Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/nodes-deprecated/controls/checkbox.jsx

@@ -0,0 +1,329 @@
+import React, { useEffect, useState } from 'react';
+
+import guid from '../../guid';
+import Layout from '../../layout';
+import NodeSharedPortDefinitions from '../../node-shared-port-definitions';
+import { createNodeFromReactComponent } from '../../react-component-node';
+import Utils from './utils';
+
+function _styleTemplate(_class, props) {
+  return `
+    .${_class}:checked {
+        background-color: ${props.checkedBackgroundColor};
+    }  
+    `;
+}
+
+// --------------------------------------------------------------------------------------
+// CheckBox
+// --------------------------------------------------------------------------------------
+function CheckBox(props) {
+  const [checked, setChecked] = useState(props.checked);
+
+  // Report initial values when mounted
+  useEffect(() => {
+    setChecked(!!props.checked);
+  }, []);
+
+  useEffect(() => {
+    setChecked(!!props.checked);
+  }, [props.checked]);
+
+  var style = { ...props.style };
+  Layout.size(style, props);
+  Layout.align(style, props);
+
+  if (props.boxShadowEnabled) {
+    style.boxShadow = `${props.boxShadowInset ? 'inset ' : ''}${props.boxShadowOffsetX} ${props.boxShadowOffsetY} ${
+      props.boxShadowBlurRadius
+    } ${props.boxShadowSpreadRadius} ${props.boxShadowColor}`;
+  }
+
+  const tagProps = { id: props.id, style: style };
+
+  Utils.updateStylesForClass(
+    'ndl-controls-checkbox-' + props._nodeId,
+    { checkedBackgroundColor: props.checkedBackgroundColor },
+    _styleTemplate
+  );
+
+  let className = 'ndl-controls-checkbox-' + props._nodeId + ' ndl-controls-checkbox';
+  if (props.className) className = className + ' ' + props.className;
+
+  return (
+    <input
+      className={className}
+      type="checkbox"
+      {...tagProps}
+      {...Utils.controlEvents(props)}
+      checked={checked}
+      disabled={!props.enabled}
+      onChange={(e) => {
+        setChecked(e.target.checked);
+        props.checkedChanged && props.checkedChanged(e.target.checked);
+      }}
+    ></input>
+  );
+}
+
+var CheckBoxNode = {
+  name: 'Checkbox',
+  displayName: 'Checkbox',
+  docs: 'https://docs.noodl.net/nodes/visual/checkbox',
+  allowChildren: false,
+  noodlNodeAsProp: true,
+  initialize() {
+    this.props.sizeMode = 'explicit';
+    this.props.id = this._internal.controlId = 'input-' + guid();
+    this.props.enabled = this._internal.enabled = true;
+    this.props.checked = this._internal.checked = false;
+    this.props._nodeId = this.id;
+
+    this.outputPropValues.hoverState = this.outputPropValues.focusState = this.outputPropValues.pressedState = false;
+
+    this.props.checkedChanged = (checked) => {
+      const changed = this._internal.checked !== checked;
+      this._internal.checked = checked;
+      if (changed) {
+        this.flagOutputDirty('checked');
+        this.sendSignalOnOutput('onChange');
+      }
+    };
+  },
+  getReactComponent() {
+    return CheckBox;
+  },
+  inputs: {
+    enabled: {
+      type: 'boolean',
+      displayName: 'Enabled',
+      group: 'General',
+      default: true,
+      set: function (value) {
+        value = !!value;
+        const changed = value !== this._internal.enabled;
+        this.props.enabled = this._internal.enabled = value;
+
+        if (changed) {
+          this.forceUpdate();
+          this.flagOutputDirty('enabled');
+        }
+      }
+    },
+    checked: {
+      type: 'boolean',
+      displayName: 'Checked',
+      group: 'General',
+      default: false,
+      set: function (value) {
+        value = !!value;
+        const changed = value !== this._internal.checked;
+        this.props.checked = this._internal.checked = value;
+
+        if (changed) {
+          this.forceUpdate();
+          this.flagOutputDirty('checked');
+        }
+      }
+    }
+  },
+  outputs: {
+    controlId: {
+      type: 'string',
+      displayName: 'Control Id',
+      group: 'General',
+      getter: function () {
+        return this._internal.controlId;
+      }
+    },
+    enabled: {
+      type: 'boolean',
+      displayName: 'Enabled',
+      group: 'States',
+      getter: function () {
+        return this._internal.enabled;
+      }
+    },
+    checked: {
+      type: 'boolean',
+      displayName: 'Checked',
+      group: 'States',
+      getter: function () {
+        return this._internal.checked;
+      }
+    },
+    // Change
+    onChange: {
+      displayName: 'Changed',
+      group: 'Events',
+      type: 'signal'
+    }
+  },
+  inputProps: {
+    width: {
+      index: 11,
+      group: 'Dimensions',
+      displayName: 'Width',
+      type: {
+        name: 'number',
+        units: ['%', 'px', 'vw'],
+        defaultUnit: 'px'
+      },
+      default: 32
+    },
+    height: {
+      index: 12,
+      group: 'Dimensions',
+      displayName: 'Height',
+      type: {
+        name: 'number',
+        units: ['%', 'px', 'vh'],
+        defaultUnit: 'px'
+      },
+      default: 32
+    },
+
+    // Styles
+    checkedBackgroundColor: {
+      displayName: 'Background color',
+      group: 'Checked Style',
+      type: { name: 'color', allowEditOnly: true },
+      default: '#000000'
+    },
+
+    // Box shadow
+    boxShadowEnabled: {
+      index: 250,
+      group: 'Box Shadow',
+      displayName: 'Shadow Enabled',
+      type: 'boolean',
+      default: false
+    },
+    boxShadowOffsetX: {
+      index: 251,
+      group: 'Box Shadow',
+      displayName: 'Offset X',
+      default: 0,
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      }
+    },
+    boxShadowOffsetY: {
+      index: 252,
+      group: 'Box Shadow',
+      displayName: 'Offset Y',
+      default: 0,
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      }
+    },
+    boxShadowBlurRadius: {
+      index: 253,
+      group: 'Box Shadow',
+      displayName: 'Blur Radius',
+      default: 5,
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      }
+    },
+    boxShadowSpreadRadius: {
+      index: 254,
+      group: 'Box Shadow',
+      displayName: 'Spread Radius',
+      default: 2,
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      }
+    },
+    boxShadowInset: {
+      index: 255,
+      group: 'Box Shadow',
+      displayName: 'Inset',
+      type: 'boolean',
+      default: false
+    },
+    boxShadowColor: {
+      index: 256,
+      group: 'Box Shadow',
+      displayName: 'Shadow Color',
+      type: 'color',
+      default: 'rgba(0,0,0,0.2)'
+    }
+  },
+  inputCss: {
+    backgroundColor: {
+      index: 201,
+      displayName: 'Background Color',
+      group: 'Style',
+      type: 'color'
+    },
+
+    // Border styles
+    borderRadius: {
+      index: 202,
+      displayName: 'Border Radius',
+      group: 'Style',
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      },
+      default: 2,
+      applyDefault: false
+    },
+    borderStyle: {
+      index: 203,
+      displayName: 'Border Style',
+      group: 'Style',
+      type: {
+        name: 'enum',
+        enums: [
+          { label: 'None', value: 'none' },
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'Dashed', value: 'dashed' }
+        ]
+      },
+      default: 'solid',
+      applyDefault: false
+    },
+    borderWidth: {
+      index: 204,
+      displayName: 'Border Width',
+      group: 'Style',
+      type: {
+        name: 'number',
+        units: ['px'],
+        defaultUnit: 'px'
+      },
+      default: 1,
+      applyDefault: false
+    },
+    borderColor: {
+      index: 205,
+      displayName: 'Border Color',
+      group: 'Style',
+      type: 'color',
+      default: '#000000'
+    }
+  },
+  outputProps: {},
+  methods: {}
+};
+
+NodeSharedPortDefinitions.addAlignInputs(CheckBoxNode);
+NodeSharedPortDefinitions.addTransformInputs(CheckBoxNode);
+NodeSharedPortDefinitions.addMarginInputs(CheckBoxNode);
+NodeSharedPortDefinitions.addSharedVisualInputs(CheckBoxNode);
+Utils.addControlEventsAndStates(CheckBoxNode);
+
+CheckBoxNode = createNodeFromReactComponent(CheckBoxNode);
+export default CheckBoxNode;