@appbuckets/react-ui/Checkbox/Checkbox.js

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var reactUiCore = require('@appbuckets/react-ui-core');
var useField = require('../hooks/useField.js');
var customHook = require('../utils/customHook.js');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');
var useTabIndex = require('../hooks/useTabIndex.js');
var Icon = require('../Icon/Icon.js');
var Field = require('../Field/Field.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

/* --------
 * Component Render
 * -------- */
var Checkbox = React__namespace.forwardRef(function (receivedProps, ref) {
  /** Get component props */
  var props = BucketContext.useWithDefaultProps('checkbox', receivedProps);
  var _a = customHook.useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    /** Strict Checkbox Props */
    checkedProp = _b.checked,
    defaultChecked = _b.defaultChecked,
    indeterminate = _b.indeterminate,
    radio = _b.radio,
    userDefinedTabIndex = _b.tabIndex;
  _b.type;
  var handleChecked = _b.onChecked,
    handleClick = _b.onClick,
    handleUnchecked = _b.onUnchecked,
    asSwitch = _b.switch,
    /** All other Checkbox props */
    rawRest = tslib.__rest(_b, [
      'checked',
      'defaultChecked',
      'indeterminate',
      'radio',
      'tabIndex',
      'type',
      'onChecked',
      'onClick',
      'onUnchecked',
      'switch',
    ]);
  var _c = tslib.__read(customHook.useSplitStateClassName(rawRest), 1),
    stateClassName = _c[0];
  // ----
  // Build field and Helpers
  // ----
  var _d = useField.useField(rawRest),
    fieldRef = _d.fieldRef,
    _e = _d.fieldProps,
    label = _e.label,
    fieldProps = tslib.__rest(_e, ['label']),
    rest = _d.rest,
    addClassesToField = _d.addClassesToField,
    removeClassesFromField = _d.removeClassesFromField,
    helpers = tslib.__rest(_d, [
      'fieldRef',
      'fieldProps',
      'rest',
      'addClassesToField',
      'removeClassesFromField',
    ]);
  var disabled = fieldProps.disabled,
    readOnly = fieldProps.readOnly,
    required = fieldProps.required;
  /* --------
   * AutoControlled Checked State
   * -------- */
  var _f = tslib.__read(
      reactUiCore.useAutoControlledValue(false, {
        prop: checkedProp,
        defaultProp: defaultChecked,
      }),
      2
    ),
    checked = _f[0],
    trySetChecked = _f[1];
  /* --------
   * Internal Component Ref
   * -------- */
  var inputRef = React__namespace.useRef(null);
  var handleRef = reactUiCore.useForkRef(ref, inputRef);
  /* --------
   * Change Field Classes based on State
   * -------- */
  React__namespace.useEffect(
    function () {
      if (checked) {
        addClassesToField('checked');
      } else {
        removeClassesFromField('checked');
      }
    },
    [checked, addClassesToField, removeClassesFromField]
  );
  /* --------
   * Component Classes
   * -------- */
  var checkBoxType = radio ? 'radio' : asSwitch ? 'switch' : 'checkbox';
  var classes = clsx__default['default'](
    { required: required, disabled: disabled, checked: checked },
    !label && 'unlabeled',
    !checked && indeterminate && 'indeterminate',
    checkBoxType,
    stateClassName,
    className
  );
  /* --------
   * Internal Checkbox Props
   * -------- */
  var canToggle = !disabled && !readOnly && !(radio && checked);
  var tabIndex = useTabIndex.useTabIndex({
    disabled: disabled,
    readOnly: readOnly,
    prop: userDefinedTabIndex,
  });
  /* --------
   * Component Handlers
   * -------- */
  var handleLabelClick = function (e) {
    /** If checkbox could not toggle, return */
    if (!canToggle) {
      return;
    }
    e.stopPropagation();
    /** Set field as touched and dirty */
    helpers.setFieldClicked();
    helpers.setFieldChanged();
    /** Build the Handler Params to be reused */
    var changeHandlerParams = [
      e,
      tslib.__assign(tslib.__assign({}, props), { checked: !checked }),
    ];
    /** Call user defined Handlers */
    if (handleClick) {
      handleClick.apply(
        void 0,
        tslib.__spreadArray([], tslib.__read(changeHandlerParams), false)
      );
    }
    if (!checked && handleChecked) {
      handleChecked.apply(
        void 0,
        tslib.__spreadArray([], tslib.__read(changeHandlerParams), false)
      );
    } else if (checked && handleUnchecked) {
      handleUnchecked.apply(
        void 0,
        tslib.__spreadArray([], tslib.__read(changeHandlerParams), false)
      );
    }
    /** Try to set the internal auto controlled state */
    trySetChecked(!checked);
  };
  /* --------
   * Memoized Component Element
   * -------- */
  var checkboxIcon = React__namespace.useMemo(
    function () {
      if (asSwitch) {
        return null;
      }
      return React__namespace.createElement(Icon, {
        className: 'checkbox-icon',
        name: radio ? 'circle' : indeterminate ? 'minus' : 'check',
      });
    },
    [asSwitch, radio, indeterminate]
  );
  var labelElement = React__namespace.createElement(
    'label',
    { htmlFor: rest.id, onClick: handleLabelClick },
    React__namespace.createElement(
      'div',
      { className: 'checkbox-toggle' },
      checkboxIcon
    ),
    label && React__namespace.createElement('span', null, label)
  );
  /* --------
   * Component Render
   * -------- */
  return React__namespace.createElement(
    Field,
    tslib.__assign({ ref: fieldRef }, fieldProps, {
      contentType: checkBoxType,
    }),
    React__namespace.createElement(
      'input',
      tslib.__assign({}, rest, {
        ref: handleRef,
        readOnly: true,
        className: classes,
        disabled: disabled,
        checked: checked,
        tabIndex: tabIndex,
        type: radio ? 'radio' : 'checkbox',
      })
    ),
    labelElement
  );
});
Checkbox.displayName = 'Checkbox';
Checkbox.create = reactUiCore.createShorthandFactory(
  Checkbox,
  function (label) {
    return { label: label };
  }
);

module.exports = Checkbox;