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

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__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 = this && this.__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 = this && this.__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;
};
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '../../lib/di';
import { useToggleable } from '../../hooks/behavior/useToggleable';
import { useUniqueId } from '../../hooks/useUniqueId';
import { useEqualMemo } from '../../hooks/useEqualMemo';
import { runByReadyState } from '../../lib/runByReadyState';
import { mergeRefsAsCallback } from '../../lib/mergeRefs';
import { mergeProps } from '../../lib/merge';
import { makeChain } from '../../lib/makeChain';
import './Checkbox.css';
export var cnCheckbox = cn('Checkbox');
export 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 = useUniqueId('checkbox');
  var labelId = useUniqueId('checkbox-label');
  var _c = __read(useState(false), 2),
    isHovered = _c[0],
    setIsHovered = _c[1];
  var _d = __read(useState(false), 2),
    isFocused = _d[0],
    setIsFocused = _d[1];
  var toggle = 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 = useCallback(makeChain(toggle, controlProps.onChange), [toggle, controlProps.onChange]);
  var controlRef = useRef(null);
  var controlRefCb = useMemo(function () {
    return mergeRefsAsCallback(controlRef, controlProps.innerRef);
  }, [controlRef, controlProps.innerRef]);
  // sync indeterminate state for control
  useEffect(function () {
    if (controlRef.current !== null) {
      controlRef.current.indeterminate = !!indeterminate;
    }
  });
  // focus to control
  useEffect(function () {
    if (autoFocus) {
      // await loading page if need, to prevent blink
      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 = useEqualMemo(function () {
    return 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 = useComponentRegistry(cnCheckbox()),
    Box = _e.Box,
    Control = _e.Control,
    Tick = _e.Tick,
    Label = _e.Label;
  return /*#__PURE__*/React.createElement("div", __assign({}, propsMix, {
    ref: innerRef,
    className: cnCheckbox({
      checked: checked || indeterminate,
      indeterminate: indeterminate,
      disabled: disabled,
      hovered: isHovered,
      focused: isFocused
    }, [className])
  }), addonBefore, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Control, __assign({}, controlProps, {
    innerRef: controlRefCb,
    id: controlId,
    disabled: disabled,
    checked: checked,
    onChange: onChange,
    "aria-checked": indeterminate ? 'mixed' : checked,
    "aria-labelledby": labelId
  })), /*#__PURE__*/React.createElement(Tick, {
    indeterminate: indeterminate
  })), label && ( /*#__PURE__*/React.createElement(Label, {
    id: labelId,
    target: controlId,
    innerRef: labelRef
  }, label)), addonAfter);
};
Checkbox.displayName = cnCheckbox();