@auraxy/react-radio-checkbox/lib/es/index.js

react radio checkbox component

/**
 * Bundle of @auraxy/react-radio-checkbox
 * Generated: 2021-05-18
 * Version: 2.4.7
 * License: MIT
 * Author: 2631541504@qq.com
 */

import classNames from 'classnames';
import React, { useMemo, useLayoutEffect, useState } from 'react';
import useStateTrackProp from 'use-state-track-prop';
import simpleUniqueId from '@livelybone/simple-unique-id';
import useWatch from 'use-watch';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(n);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var RadioOff = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M510.44839467 32.38975573c-264.06866667 0-478.03735467 213.96759573-478.03735467 478.03735467s213.96868693 478.03844587 478.03735467 478.03844587S988.48574933 774.49468587 988.48574933 510.42601813 774.5170624 32.38975573 510.44839467 32.38975573L510.44839467 32.38975573zM510.44839467 948.70451627c-241.54610667 0-438.27740587-196.50098667-438.27740587-438.27849707 0-241.54610667 196.49989547-438.27740587 438.27740587-438.27740587 241.54610667 0 438.27740587 196.50098667 438.27740586 438.27740587C948.72580053 751.97321707 751.99450133 948.70451627 510.44839467 948.70451627L510.44839467 948.70451627zM510.44839467 948.70451627",
  fill: "currentColor"
}));
var RadioOn = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M510.44839467 32.38975573c-264.06866667 0-478.03735467 213.96759573-478.03735467 478.03735467s213.96868693 478.03844587 478.03735467 478.03844587S988.48574933 774.49468587 988.48574933 510.42601813 774.5170624 32.38975573 510.44839467 32.38975573L510.44839467 32.38975573zM510.44839467 948.70451627c-241.54610667 0-438.27740587-196.50098667-438.27740587-438.27849707 0-241.54610667 196.49989547-438.27740587 438.27740587-438.27740587 241.54610667 0 438.27740587 196.50098667 438.27740586 438.27740587C948.72580053 751.97321707 751.99450133 948.70451627 510.44839467 948.70451627L510.44839467 948.70451627zM510.44839467 948.70451627",
  fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
  d: "M510.44839467 142.70598507c-203.16803093 0-367.72003413 164.5520032-367.72003414 367.72003413 0 203.1614816 164.5520032 367.72003413 367.72003414 367.72003413 203.1614816 0 367.72003413-164.55855147 367.72003413-367.72003413C878.1684288 307.2579872 713.60987733 142.70598507 510.44839467 142.70598507L510.44839467 142.70598507zM510.44839467 142.70598507",
  fill: "currentColor"
}));
var CheckboxOn = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M828.406 90.125H195.594c-58.219 0-105.469 47.25-105.469 105.469v632.812c0 58.219 47.25 105.469 105.469 105.469h632.812c58.219 0 105.469-47.25 105.469-105.469V195.594c0-58.219-47.25-105.469-105.469-105.469z m52.735 738.281c0 29.16-23.57 52.735-52.735 52.735H195.594c-29.11 0-52.735-23.575-52.735-52.735V195.594c0-29.11 23.625-52.735 52.735-52.735h632.812c29.16 0 52.735 23.625 52.735 52.735v632.812z",
  fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
  d: "M421.529 709.56a36.281 36.281 0 0 1-27.553-12.67L205.175 476.614a36.285 36.285 0 0 1 55.1-47.229L425.264 621.87l342.161-298.48a36.29 36.29 0 0 1 47.71 54.687L445.386 700.62a36.323 36.323 0 0 1-23.857 8.94z",
  fill: "currentColor"
}));
var CheckboxPartial = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M849.5 90.125H174.5C128.09375 90.125 90.125 128.09375 90.125 174.5v675C90.125 895.90625 128.09375 933.875 174.5 933.875h675c46.40625 0 84.375-37.96875 84.375-84.375V174.5C933.875 128.09375 895.90625 90.125 849.5 90.125z m42.1875 759.375c0 23.26657104-18.92092896 42.1875-42.1875 42.1875H174.5c-23.26657104 0-42.1875-18.92092896-42.1875-42.1875V174.5c0-23.26657104 18.92092896-42.1875 42.1875-42.1875h675c23.26657104 0 42.1875 18.92092896 42.1875 42.1875v675z",
  fill: "currentColor"
}), /*#__PURE__*/React.createElement("rect", {
  x: "262",
  y: "457",
  width: "500",
  height: "60",
  fill: "currentColor"
}));
var CheckboxOff = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M828.406 90.125H195.594c-58.219 0-105.469 47.25-105.469 105.469v632.812c0 58.219 47.25 105.469 105.469 105.469h632.812c58.219 0 105.469-47.25 105.469-105.469V195.594c0-58.219-47.25-105.469-105.469-105.469z m52.735 738.281c0 29.16-23.57 52.735-52.735 52.735H195.594c-29.11 0-52.735-23.575-52.735-52.735V195.594c0-29.11 23.625-52.735 52.735-52.735h632.812c29.16 0 52.735 23.625 52.735 52.735v632.812z",
  fill: "currentColor"
}));
var CheckboxOnFill = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M828.406 90.125H195.594c-58.219 0-105.469 47.25-105.469 105.469v632.812c0 58.219 47.25 105.469 105.469 105.469h632.812c58.219 0 105.469-47.25 105.469-105.469V195.594c0-58.219-47.25-105.469-105.469-105.469z m52.735 738.281c0 29.16-23.57 52.735-52.735 52.735H195.594c-29.11 0-52.735-23.575-52.735-52.735V195.594c0-29.11 23.625-52.735 52.735-52.735h632.812c29.16 0 52.735 23.625 52.735 52.735v632.812z",
  fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
  d: "M810.666667 128H213.333333c-47.146667 0-85.333333 38.186667-85.333333 85.333333v597.333334c0 47.146667 38.186667 85.333333 85.333333 85.333333h597.333334c47.146667 0 85.333333-38.186667 85.333333-85.333333V213.333333c0-47.146667-38.186667-85.333333-85.333333-85.333333zM426.666667 725.333333L213.333333 512l60.373334-60.373333L426.666667 604.586667l323.626666-323.626667L810.666667 341.333333 426.666667 725.333333z",
  fill: "currentColor"
}));
var CheckboxPartialFill = /*#__PURE__*/React.createElement("svg", {
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
  d: "M828.406 90.125H195.594c-58.219 0-105.469 47.25-105.469 105.469v632.812c0 58.219 47.25 105.469 105.469 105.469h632.812c58.219 0 105.469-47.25 105.469-105.469V195.594c0-58.219-47.25-105.469-105.469-105.469z m52.735 738.281c0 29.16-23.57 52.735-52.735 52.735H195.594c-29.11 0-52.735-23.575-52.735-52.735V195.594c0-29.11 23.625-52.735 52.735-52.735h632.812c29.16 0 52.735 23.625 52.735 52.735v632.812z",
  fill: "currentColor"
}), /*#__PURE__*/React.createElement("path", {
  d: "M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m128 341.333333v85.333334h426.666666v-85.333334H298.666667z",
  fill: "currentColor"
}));

var RadioProxy = /*#__PURE__*/function () {
  function RadioProxy() {
    _classCallCheck(this, RadioProxy);
  }

  _createClass(RadioProxy, null, [{
    key: "getItem",
    value: function getItem(name, id) {
      if (!RadioProxy.items[name]) return undefined;
      return RadioProxy.items[name].find(function (item) {
        return item.id === id;
      });
    }
  }, {
    key: "updateItem",
    value: function updateItem(name, id, _ref) {
      var value = _ref.value,
          disabled = _ref.disabled,
          checked = _ref.checked,
          update = _ref.update;
      if (!RadioProxy.items[name]) RadioProxy.items[name] = [];
      var item = RadioProxy.getItem(name, id);

      if (item) {
        value !== undefined && (item.value = value);
        update !== undefined && (item.update = update);

        if (checked !== undefined && item.checked !== checked) {
          var disabledCheckedItem = undefined;

          if (checked) {
            RadioProxy.items[name].forEach(function (it) {
              if (it.checked) {
                if (!it.disabled) {
                  it.checked = false;
                  it.update(it.checked);
                } else {
                  disabledCheckedItem = it;
                }
              }
            });
          }

          if (!disabledCheckedItem) {
            item.checked = checked;
            item.update(item.checked);
          } else {
            console.warn("react-radio-checkbox(RadioItem): radio component of field '".concat(name, "' has a disabled checked item(value: ").concat(disabledCheckedItem.value, ")"));
          }
        }
      } else {
        item = {
          name: name,
          id: id,
          value: value,
          disabled: disabled || false,
          checked: checked || false,
          update: update || function () {
            return void 0;
          }
        };
        RadioProxy.items[name].push(item);
      }

      return item;
    }
  }, {
    key: "delItem",
    value: function delItem(name, id) {
      var items = RadioProxy.items[name];

      if (items) {
        var index = Object.keys(items).find(function (i) {
          return items[+i].id === id;
        });
        index && items.splice(+index, 1);
      }
    }
  }, {
    key: "getValue",
    value: function getValue(name) {
      if (!RadioProxy.items[name]) return undefined;
      var item = RadioProxy.items[name].find(function (it) {
        return it.checked;
      });
      return item && item.value;
    }
  }]);

  return RadioProxy;
}();

_defineProperty(RadioProxy, "items", {});

var RadioItem = React.memo(function (props) {
  var _props$name = props.name,
      name = _props$name === void 0 ? '$GLOBAL' : _props$name,
      className = props.className,
      value = props.value,
      disabled = props.disabled,
      checked = props.checked,
      hideIcon = props.hideIcon,
      _props$checkedIcon = props.checkedIcon,
      checkedIcon = _props$checkedIcon === void 0 ? RadioOn : _props$checkedIcon,
      _props$uncheckedIcon = props.uncheckedIcon,
      uncheckedIcon = _props$uncheckedIcon === void 0 ? RadioOff : _props$uncheckedIcon,
      beforeChange = props.beforeChange,
      onChange = props.onChange;
  var label = props.label || props.children;
  var id = useMemo(function () {
    return simpleUniqueId();
  }, []);

  var _useStateTrackProp = useStateTrackProp(!!checked),
      _useStateTrackProp2 = _slicedToArray(_useStateTrackProp, 2),
      $checked = _useStateTrackProp2[0],
      setChecked = _useStateTrackProp2[1];

  useLayoutEffect(function () {
    var unmounted = false;

    var update = function update(_checked) {
      if (!unmounted) setChecked(_checked);
    };

    RadioProxy.updateItem(name, id, {
      update: update
    });
    return function () {
      RadioProxy.delItem(name, id);
      unmounted = true;
    };
  }, [name, id, setChecked]);
  useWatch("".concat(value, "-").concat(disabled, "-").concat($checked), function () {
    RadioProxy.updateItem(name, id, {
      value: value,
      disabled: disabled,
      checked: $checked
    });
  }, {
    immediate: true
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('radio', className, {
      checked: $checked,
      disabled: disabled
    }),
    onClick: function onClick() {
      if (!disabled && !$checked) {
        var pro = Promise.resolve(beforeChange ? beforeChange(!$checked, _objectSpread2({}, RadioProxy.getItem(name, id)), RadioProxy.getValue(name)) : true);
        pro.then(function (should) {
          if (should) {
            var item = RadioProxy.updateItem(name, id, {
              checked: !$checked
            });

            if (item.checked !== $checked) {
              onChange && onChange(_objectSpread2({}, item), RadioProxy.getValue(name));
            }
          }
        });
      }
    }
  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, $checked ? checkedIcon : uncheckedIcon), typeof label === 'function' ? label(_objectSpread2(_objectSpread2({}, props), {}, {
    checked: $checked
  }), $checked) : label);
});
var Radios = React.memo(function (_ref2) {
  var name = _ref2.name,
      items = _ref2.items,
      value = _ref2.value,
      _onChange = _ref2.onChange,
      className = _ref2.className,
      hideIcon = _ref2.hideIcon,
      disabled = _ref2.disabled;
  var $name = useMemo(function () {
    return name || simpleUniqueId();
  }, [name]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('radio-wrap', className)
  }, items.map(function (item, i) {
    return /*#__PURE__*/React.createElement(RadioItem, Object.assign({}, item, {
      name: $name,
      key: "".concat(item.value, "-").concat(i),
      hideIcon: hideIcon,
      checked: value === item.value,
      onChange: function onChange(it, val) {
        return _onChange && _onChange(val);
      },
      disabled: disabled || item.disabled
    }));
  }));
});

var CheckboxProxy = /*#__PURE__*/function () {
  function CheckboxProxy() {
    _classCallCheck(this, CheckboxProxy);
  }

  _createClass(CheckboxProxy, null, [{
    key: "getController",
    value: function getController(name, id) {
      if (!CheckboxProxy.items[name]) return undefined;
      return CheckboxProxy.items[name].controllers.find(function (item) {
        return item.id === id;
      });
    }
  }, {
    key: "getItem",
    value: function getItem(name, id) {
      if (!CheckboxProxy.items[name]) return undefined;
      return CheckboxProxy.items[name].items.find(function (item) {
        return item.id === id;
      });
    }
  }, {
    key: "autoUpdateControlItem",
    value: function autoUpdateControlItem(name) {
      var controllers = CheckboxProxy.items[name] && CheckboxProxy.items[name].controllers;

      if (controllers) {
        var allLength = 0;
        var allLengthExceptDisabled = 0;
        var checkedLength = 0;
        var checkedLengthExceptDisabled = 0;
        CheckboxProxy.items[name].items.forEach(function (it) {
          allLength += 1;
          if (!it.disabled) allLengthExceptDisabled += 1;
          if (it.checked) checkedLength += 1;
          if (it.checked && !it.disabled) checkedLengthExceptDisabled += 1;
        });
        var checked = allLengthExceptDisabled !== 0 && allLengthExceptDisabled === checkedLengthExceptDisabled;
        var partial = checkedLength > 0 && checkedLength < allLength;
        controllers.forEach(function (it) {
          if (it.checked !== checked || it.partial !== partial) {
            it.checked = checked;
            it.partial = partial;
            it.update(it.checked, it.partial);
          }
        });
      }
    }
  }, {
    key: "updateController",
    value: function updateController(name, id, _ref) {
      var disabled = _ref.disabled,
          checked = _ref.checked,
          update = _ref.update;
      if (!CheckboxProxy.items[name]) CheckboxProxy.items[name] = {
        controllers: [],
        items: []
      };
      var item = CheckboxProxy.getController(name, id);

      if (item) {
        disabled !== undefined && (item.disabled = disabled);
        update !== undefined && (item.update = update);

        if (!item.disabled && checked !== undefined && item.checked !== checked) {
          CheckboxProxy.items[name].items.forEach(function (it) {
            if (!it.disabled && it.checked !== checked) {
              it.checked = checked;
              it.update(it.checked);
            }
          });
          CheckboxProxy.autoUpdateControlItem(name);
        }

        return item;
      }

      var $item = {
        name: name,
        id: id,
        disabled: disabled || false,
        checked: checked || false,
        partial: false,
        update: update || function () {
          return void 0;
        }
      };
      CheckboxProxy.items[name].controllers.push($item);
      CheckboxProxy.autoUpdateControlItem(name);
      return $item;
    }
  }, {
    key: "updateItem",
    value: function updateItem(name, id, _ref2) {
      var value = _ref2.value,
          disabled = _ref2.disabled,
          checked = _ref2.checked,
          update = _ref2.update;
      var updateControlItem = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
      if (!CheckboxProxy.items[name]) CheckboxProxy.items[name] = {
        controllers: [],
        items: []
      };
      var item = CheckboxProxy.getItem(name, id);

      if (item) {
        value !== undefined && (item.value = value);
        disabled !== undefined && (item.disabled = disabled);
        update !== undefined && (item.update = update);

        if (checked !== undefined && item.checked !== checked) {
          item.checked = checked;
          item.update(item.checked); // 自动更新控制元素的属性

          if (updateControlItem) CheckboxProxy.autoUpdateControlItem(name);
        }

        return item;
      }

      var $item = {
        name: name,
        id: id,
        value: value,
        disabled: disabled || false,
        checked: checked || false,
        update: update || function () {
          return void 0;
        }
      };
      CheckboxProxy.items[name].items.push($item); // 自动更新控制元素的属性

      if (updateControlItem) CheckboxProxy.autoUpdateControlItem(name);
      return $item;
    }
  }, {
    key: "delItem",
    value: function delItem(name, id) {
      var items = CheckboxProxy.items[name] && CheckboxProxy.items[name].items;

      if (items) {
        var index = Object.keys(items).find(function (i) {
          return items[+i].id === id;
        });

        if (index) {
          items.splice(+index, 1);
          CheckboxProxy.autoUpdateControlItem(name);
        }
      }
    }
  }, {
    key: "getValues",
    value: function getValues(name) {
      var items = CheckboxProxy.items[name] && CheckboxProxy.items[name].items;
      if (!items) return [];
      return items.filter(function (it) {
        return it.checked;
      }).map(function (it) {
        return it.value;
      });
    }
  }]);

  return CheckboxProxy;
}();

_defineProperty(CheckboxProxy, "items", {});

var CheckboxItem = React.memo(function (props) {
  var _props$name = props.name,
      name = _props$name === void 0 ? '$GLOBAL' : _props$name,
      className = props.className,
      value = props.value,
      disabled = props.disabled,
      checked = props.checked,
      hideIcon = props.hideIcon,
      _props$checkedIcon = props.checkedIcon,
      checkedIcon = _props$checkedIcon === void 0 ? props.fill ? CheckboxOnFill : CheckboxOn : _props$checkedIcon,
      _props$uncheckedIcon = props.uncheckedIcon,
      uncheckedIcon = _props$uncheckedIcon === void 0 ? CheckboxOff : _props$uncheckedIcon,
      beforeChange = props.beforeChange,
      onChange = props.onChange;
  var label = props.label || props.children;
  var id = useMemo(function () {
    return simpleUniqueId();
  }, []);

  var _useStateTrackProp = useStateTrackProp(!!checked),
      _useStateTrackProp2 = _slicedToArray(_useStateTrackProp, 2),
      $checked = _useStateTrackProp2[0],
      setChecked = _useStateTrackProp2[1];

  useLayoutEffect(function () {
    var unmounted = false;

    var update = function update(_checked) {
      if (!unmounted) setChecked(_checked);
    };

    CheckboxProxy.updateItem(name, id, {
      update: update
    });
    return function () {
      CheckboxProxy.delItem(name, id);
      unmounted = true;
    };
  }, [name, id, setChecked]);
  useWatch("".concat(value, "-").concat(disabled, "-").concat($checked), function () {
    CheckboxProxy.updateItem(name, id, {
      value: value,
      disabled: disabled,
      checked: $checked
    });
  }, {
    immediate: true
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('checkbox', className, {
      checked: $checked,
      disabled: disabled
    }),
    onClick: function onClick() {
      if (!disabled) {
        var pro = Promise.resolve(beforeChange ? beforeChange(!$checked, _objectSpread2({}, CheckboxProxy.getItem(name, id)), CheckboxProxy.getValues(name)) : true);
        pro.then(function (should) {
          if (should) {
            var item = CheckboxProxy.updateItem(name, id, {
              checked: !$checked
            });

            if (item.checked !== $checked) {
              onChange && onChange(_objectSpread2({}, item), CheckboxProxy.getValues(name));
            }
          }
        });
      }
    }
  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, $checked ? checkedIcon : uncheckedIcon), typeof label === 'function' ? label(_objectSpread2(_objectSpread2({}, props), {}, {
    checked: $checked
  }), $checked) : label);
});
var CheckboxController = React.memo(function (props) {
  var _props$name2 = props.name,
      name = _props$name2 === void 0 ? '$GLOBAL' : _props$name2,
      className = props.className,
      disabled = props.disabled,
      checked = props.checked,
      hideIcon = props.hideIcon,
      _props$checkedIcon2 = props.checkedIcon,
      checkedIcon = _props$checkedIcon2 === void 0 ? props.fill ? CheckboxOnFill : CheckboxOn : _props$checkedIcon2,
      _props$partialIcon = props.partialIcon,
      partialIcon = _props$partialIcon === void 0 ? props.fill ? CheckboxPartialFill : CheckboxPartial : _props$partialIcon,
      _props$uncheckedIcon2 = props.uncheckedIcon,
      uncheckedIcon = _props$uncheckedIcon2 === void 0 ? CheckboxOff : _props$uncheckedIcon2,
      beforeChange = props.beforeChange,
      onChange = props.onChange;
  var label = props.label || props.children;
  var id = useMemo(function () {
    return simpleUniqueId();
  }, []);

  var _useStateTrackProp3 = useStateTrackProp(!!checked),
      _useStateTrackProp4 = _slicedToArray(_useStateTrackProp3, 2),
      $checked = _useStateTrackProp4[0],
      setChecked = _useStateTrackProp4[1];

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      partial = _useState2[0],
      setPartial = _useState2[1];

  useLayoutEffect(function () {
    var unmounted = false;

    var update = function update(_checked, _partial) {
      if (!unmounted) {
        setChecked(_checked);
        setPartial(_partial);
      }
    };

    CheckboxProxy.updateController(name, id, {
      update: update
    });
    return function () {
      CheckboxProxy.delItem(name, id);
      unmounted = true;
    };
  }, [name, id, setChecked, setPartial]);
  useWatch("".concat(disabled, "-").concat($checked), function () {
    CheckboxProxy.updateController(name, id, {
      disabled: disabled,
      checked: $checked
    });
  }, {
    immediate: true
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('checkbox', className, {
      checked: $checked,
      partial: partial,
      disabled: disabled
    }),
    onClick: function onClick() {
      if (!disabled) {
        var pro = Promise.resolve(beforeChange ? beforeChange(!$checked, _objectSpread2({}, CheckboxProxy.getController(name, id)), CheckboxProxy.getValues(name)) : true);
        pro.then(function (should) {
          if (should) {
            var item = CheckboxProxy.updateController(name, id, {
              checked: !$checked
            });

            if (item.checked !== $checked) {
              onChange && onChange(_objectSpread2({}, item), CheckboxProxy.getValues(name));
            }
          }
        });
      }
    }
  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, partial ? partialIcon : $checked ? checkedIcon : uncheckedIcon), typeof label === 'function' ? label(_objectSpread2(_objectSpread2({}, props), {}, {
    checked: $checked
  }), $checked) : label);
});
var Checkboxs = React.memo(function (_ref3) {
  var name = _ref3.name,
      items = _ref3.items,
      value = _ref3.value,
      _onChange = _ref3.onChange,
      className = _ref3.className,
      hideIcon = _ref3.hideIcon;
  var $name = useMemo(function () {
    return name || simpleUniqueId();
  }, [name]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('checkbox-wrap', className)
  }, items.map(function (item, i) {
    return /*#__PURE__*/React.createElement(CheckboxItem, Object.assign({}, item, {
      name: $name,
      key: "".concat(item.value, "-").concat(i),
      hideIcon: hideIcon,
      checked: !!value && value.includes(item.value),
      onChange: function onChange(it, val) {
        return _onChange && _onChange(val);
      }
    }));
  }));
});

var Switch = function Switch(_ref) {
  var className = _ref.className,
      value = _ref.value,
      disabled = _ref.disabled,
      _ref$activeValue = _ref.activeValue,
      activeValue = _ref$activeValue === void 0 ? true : _ref$activeValue,
      _ref$inactiveValue = _ref.inactiveValue,
      inactiveValue = _ref$inactiveValue === void 0 ? false : _ref$inactiveValue,
      beforeChange = _ref.beforeChange,
      onChange = _ref.onChange;

  var _useStateTrackProp = useStateTrackProp(value),
      _useStateTrackProp2 = _slicedToArray(_useStateTrackProp, 2),
      $value = _useStateTrackProp2[0],
      setValue = _useStateTrackProp2[1];

  return /*#__PURE__*/React.createElement("div", {
    className: classNames('switch-wrap', className, {
      activated: $value === activeValue,
      disabled: disabled
    }),
    onClick: function onClick() {
      if (!disabled) {
        var val = $value === activeValue ? inactiveValue : activeValue;
        var pro = Promise.resolve(beforeChange ? beforeChange(val) : true);
        pro.then(function (should) {
          if (should) {
            setValue(val);
            onChange && onChange(val);
          }
        });
      }
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "switch"
  }));
};

export { CheckboxController, CheckboxItem, Checkboxs, RadioItem, Radios, Switch };