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/components/controls/Checkbox/Checkbox.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+
+import Layout from '../../../layout';
+import Utils from '../../../nodes/controls/utils';
+import { Noodl } from '../../../types';
+
+export interface CheckboxProps extends Noodl.ReactProps {
+  id: string;
+  enabled: boolean;
+  checked: boolean;
+
+  useLabel: boolean;
+  label: string;
+  labelSpacing: string;
+  labeltextStyle: Noodl.TextStyle;
+
+  useIcon: boolean;
+  iconPlacement: 'left' | 'right';
+  iconSpacing: string;
+  iconSourceType: 'image' | 'icon';
+  iconImageSource: Noodl.Image;
+  iconIconSource: Noodl.Icon;
+  iconSize: string;
+  iconColor: Noodl.Color;
+
+  checkedChanged: (checked: boolean) => void;
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const [checked, setChecked] = useState(props.checked);
+
+  // Report initial values when mounted
+  useEffect(() => {
+    setChecked(!!props.checked);
+  }, []);
+
+  useEffect(() => {
+    setChecked(!!props.checked);
+  }, [props.checked]);
+
+  const style: React.CSSProperties = { ...props.style };
+
+  if (props.parentLayout === 'none') {
+    style.position = 'absolute';
+  }
+
+  Layout.align(style, props);
+
+  const inputProps = {
+    id: props.id,
+    className: [props.className, 'ndl-controls-checkbox-2'].join(' '),
+    disabled: !props.enabled,
+    style: {
+      width: props.styles.checkbox.width,
+      height: props.styles.checkbox.height
+    }
+  };
+
+  const inputWrapperStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    position: 'relative',
+    ...props.styles.checkbox
+  };
+
+  if (!props.useLabel) {
+    Object.assign(inputProps, Utils.controlEvents(props));
+    Object.assign(inputWrapperStyle, style);
+  }
+
+  function _renderIcon() {
+    if (props.iconSourceType === 'image' && props.iconImageSource !== undefined)
+      return (
+        <img
+          alt=""
+          src={props.iconImageSource}
+          style={{
+            width: props.iconSize,
+            height: props.iconSize,
+            position: 'absolute'
+          }}
+        />
+      );
+    else if (props.iconSourceType === 'icon' && props.iconIconSource !== undefined) {
+      const style: React.CSSProperties = {
+        fontSize: props.iconSize,
+        color: props.iconColor,
+        position: 'absolute'
+      };
+
+      if (props.iconIconSource.codeAsClass === true) {
+        return (
+          <span className={[props.iconIconSource.class, props.iconIconSource.code].join(' ')} style={style}></span>
+        );
+      } else {
+        return (
+          <span className={props.iconIconSource.class} style={style}>
+            {props.iconIconSource.code}
+          </span>
+        );
+      }
+    }
+
+    return null;
+  }
+
+  const checkbox = (
+    <div className="ndl-controls-pointer" style={inputWrapperStyle} noodl-style-tag="checkbox">
+      {props.useIcon ? _renderIcon() : null}
+      <input
+        type="checkbox"
+        {...inputProps}
+        checked={checked}
+        onChange={(e) => {
+          setChecked(e.target.checked);
+          props.checkedChanged && props.checkedChanged(e.target.checked);
+        }}
+      />
+    </div>
+  );
+
+  if (props.useLabel) {
+    const labelStyle: React.CSSProperties = {
+      marginLeft: props.labelSpacing,
+      ...props.labeltextStyle,
+      ...props.styles.label
+    };
+
+    if (!props.enabled) {
+      labelStyle.cursor = 'default';
+    }
+
+    labelStyle.color = props.noodlNode.context.styles.resolveColor(labelStyle.color);
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', ...style }} {...Utils.controlEvents(props)}>
+        {checkbox}
+        <label className="ndl-controls-pointer" style={labelStyle} htmlFor={props.id} noodl-style-tag="label">
+          {props.label}
+        </label>
+      </div>
+    );
+  } else {
+    return checkbox;
+  }
+}