@geezee/react-ui/esm/checkbox/checkbox.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useCheckbox } from './checkbox-context';
import { getCheckboxSize } from './checkbox-group';
import CheckboxIcon from './checkbox.icon';
import useWarning from '../utils/use-warning';
var defaultProps = {
  disabled: false,
  initialChecked: false,
  size: 'small',
  className: '',
  value: ''
};

var Checkbox = function Checkbox(_ref) {
  var checked = _ref.checked,
      initialChecked = _ref.initialChecked,
      disabled = _ref.disabled,
      onChange = _ref.onChange,
      className = _ref.className,
      children = _ref.children,
      size = _ref.size,
      value = _ref.value,
      props = _objectWithoutProperties(_ref, ["checked", "initialChecked", "disabled", "onChange", "className", "children", "size", "value"]);

  var _useState = useState(initialChecked),
      _useState2 = _slicedToArray(_useState, 2),
      selfChecked = _useState2[0],
      setSelfChecked = _useState2[1];

  var _useCheckbox = useCheckbox(),
      updateState = _useCheckbox.updateState,
      inGroup = _useCheckbox.inGroup,
      disabledAll = _useCheckbox.disabledAll,
      values = _useCheckbox.values;

  var isDisabled = inGroup ? disabledAll || disabled : disabled;

  if (inGroup && checked) {
    useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox');
  }

  if (inGroup) {
    useEffect(function () {
      var next = values.includes(value);
      if (next === selfChecked) return;
      setSelfChecked(next);
    }, [values.join(',')]);
  }

  var fontSize = useMemo(function () {
    return getCheckboxSize(size);
  }, [size]);
  var changeHandle = useCallback(function (ev) {
    if (isDisabled) return;
    var selfEvent = {
      target: {
        checked: !selfChecked
      },
      stopPropagation: ev.stopPropagation,
      preventDefault: ev.preventDefault,
      nativeEvent: ev
    };

    if (inGroup && updateState) {
      updateState && updateState(value, !selfChecked);
    }

    setSelfChecked(!selfChecked);
    onChange && onChange(selfEvent);
  }, [updateState, onChange, isDisabled, selfChecked]);
  useEffect(function () {
    if (checked === undefined) return;
    setSelfChecked(checked);
  }, [checked]);
  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
    className: _JSXStyle.dynamic([["3057471586", [fontSize, isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "".concat(className))
  }), /*#__PURE__*/React.createElement(CheckboxIcon, {
    disabled: isDisabled,
    checked: selfChecked
  }), /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    disabled: isDisabled,
    checked: selfChecked,
    onChange: changeHandle,
    className: _JSXStyle.dynamic([["3057471586", [fontSize, isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, isDisabled ? 'not-allowed' : 'pointer']]])
  }), /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["3057471586", [fontSize, isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3057471586",
    dynamic: [fontSize, isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, isDisabled ? 'not-allowed' : 'pointer']
  }, "label.__jsx-style-dynamic-selector{--checkbox-size:".concat(fontSize, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";height:var(--checkbox-size);line-height:var(--checkbox-size);}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.57);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;background-color:transparent;}")));
};

Checkbox.defaultProps = defaultProps;
export default Checkbox;