react-elegant-ui/components/Checkbox/Checkbox.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.cnCheckbox = exports.Checkbox = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classname = require("@bem-react/classname");
var _di = require("../../lib/di");
var _useToggleable = require("../../hooks/behavior/useToggleable");
var _useUniqueId = require("../../hooks/useUniqueId");
var _useEqualMemo = require("../../hooks/useEqualMemo");
var _runByReadyState = require("../../lib/runByReadyState");
var _mergeRefs = require("../../lib/mergeRefs");
var _merge = require("../../lib/merge");
var _makeChain = require("../../lib/makeChain");
require("./Checkbox.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
var cnCheckbox = exports.cnCheckbox = (0, _classname.cn)('Checkbox');
var Checkbox = function (_a) {
  var checked = _a.checked,
    setChecked = _a.setChecked,
    disabled = _a.disabled,
    autoFocus = _a.autoFocus,
    indeterminate = _a.indeterminate,
    className = _a.className,
    innerRef = _a.innerRef,
    label = _a.label,
    labelRef = _a.labelRef,
    _b = _a.controlProps,
    controlProps = _b === void 0 ? {} : _b,
    addonBefore = _a.addonBefore,
    addonAfter = _a.addonAfter,
    props = __rest(_a, ["checked", "setChecked", "disabled", "autoFocus", "indeterminate", "className", "innerRef", "label", "labelRef", "controlProps", "addonBefore", "addonAfter"]);
  var controlId = (0, _useUniqueId.useUniqueId)('checkbox');
  var labelId = (0, _useUniqueId.useUniqueId)('checkbox-label');
  var _c = __read((0, _react.useState)(false), 2),
    isHovered = _c[0],
    setIsHovered = _c[1];
  var _d = __read((0, _react.useState)(false), 2),
    isFocused = _d[0],
    setIsFocused = _d[1];
  var toggle = (0, _useToggleable.useToggleable)({
    state: checked,
    setState: setChecked,
    disabled: disabled
  }).toggle;
  // forward user handler
  // `makeChain` is callback constructor
  // eslint-disable-next-line react-hooks/exhaustive-deps
  var onChange = (0, _react.useCallback)((0, _makeChain.makeChain)(toggle, controlProps.onChange), [toggle, controlProps.onChange]);
  var controlRef = (0, _react.useRef)(null);
  var controlRefCb = (0, _react.useMemo)(function () {
    return (0, _mergeRefs.mergeRefsAsCallback)(controlRef, controlProps.innerRef);
  }, [controlRef, controlProps.innerRef]);
  // sync indeterminate state for control
  (0, _react.useEffect)(function () {
    if (controlRef.current !== null) {
      controlRef.current.indeterminate = !!indeterminate;
    }
  });
  // focus to control
  (0, _react.useEffect)(function () {
    if (autoFocus) {
      // await loading page if need, to prevent blink
      (0, _runByReadyState.runByReadyState)(function () {
        if (controlRef.current !== null) {
          controlRef.current.focus();
        }
      }, 'complete');
    }
    // run for first render only
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // merge root props and inner handlers for it
  var propsMix = (0, _useEqualMemo.useEqualMemo)(function () {
    return (0, _merge.mergeProps)(props, {
      onFocus: function () {
        return setIsFocused(true);
      },
      onBlur: function () {
        return setIsFocused(false);
      },
      onMouseEnter: function () {
        return setIsHovered(true);
      },
      onMouseLeave: function () {
        return setIsHovered(false);
      }
    });
  }, [props, setIsFocused, setIsHovered]);
  var _e = (0, _di.useComponentRegistry)(cnCheckbox()),
    Box = _e.Box,
    Control = _e.Control,
    Tick = _e.Tick,
    Label = _e.Label;
  return /*#__PURE__*/_react.default.createElement("div", __assign({}, propsMix, {
    ref: innerRef,
    className: cnCheckbox({
      checked: checked || indeterminate,
      indeterminate: indeterminate,
      disabled: disabled,
      hovered: isHovered,
      focused: isFocused
    }, [className])
  }), addonBefore, /*#__PURE__*/_react.default.createElement(Box, null, /*#__PURE__*/_react.default.createElement(Control, __assign({}, controlProps, {
    innerRef: controlRefCb,
    id: controlId,
    disabled: disabled,
    checked: checked,
    onChange: onChange,
    "aria-checked": indeterminate ? 'mixed' : checked,
    "aria-labelledby": labelId
  })), /*#__PURE__*/_react.default.createElement(Tick, {
    indeterminate: indeterminate
  })), label && ( /*#__PURE__*/_react.default.createElement(Label, {
    id: labelId,
    target: controlId,
    innerRef: labelRef
  }, label)), addonAfter);
};
exports.Checkbox = Checkbox;
Checkbox.displayName = cnCheckbox();