@braineet/ui/dist/esm/components/checkbox/item/index.js

Braineet design system

var _excluded = ["field", "form", "value", "disabled", "indeterminate", "name", "theme", "label", "icon", "color", "opacity", "labelText", "checkboxName", "labelStyles", "readOnly"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable no-nested-ternary */
import React from 'react';
import kebabCase from 'lodash/kebabCase';
import { withTheme } from 'styled-components';
import Badge from '../../badge';
import Icon from '../../icon';
import Pane from '../../pane';
import { StyledLabel, StyledText, CheckboxInput, CheckboxBtn } from './styles';

/**
 * The `Checkbox` component.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var field = _ref.field,
    form = _ref.form,
    _ref$value = _ref.value,
    v = _ref$value === void 0 ? false : _ref$value,
    disabled = _ref.disabled,
    indeterminate = _ref.indeterminate,
    name = _ref.name,
    theme = _ref.theme,
    label = _ref.label,
    icon = _ref.icon,
    color = _ref.color,
    opacity = _ref.opacity,
    labelText = _ref.labelText,
    checkboxName = _ref.checkboxName,
    labelStyles = _ref.labelStyles,
    readOnly = _ref.readOnly,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var inputRef = React.useRef();
  React.useImperativeHandle(ref, function () {
    return inputRef.current;
  });
  var isSingle = true;
  var value = field ? field.value : v;
  if (typeof value === 'string' || Array.isArray(value)) {
    value = field ? field.value.includes(checkboxName) : v.includes(checkboxName);
    isSingle = false;
  }
  var fieldName = form != null && form.touched && field ? field.name : name;
  var touch = form == null ? void 0 : form.touched[field == null ? void 0 : field.name];
  var error = form == null ? void 0 : form.errors[field == null ? void 0 : field.name];
  return /*#__PURE__*/_jsxs(StyledLabel, {
    as: "label",
    htmlFor: fieldName + "-" + kebabCase(label),
    checked: value,
    disabled: disabled,
    readOnly: readOnly,
    error: isSingle && touch && error,
    stylesProps: labelStyles,
    children: [/*#__PURE__*/_jsx(CheckboxInput, _extends({
      ref: inputRef,
      checked: value,
      disabled: disabled || readOnly,
      type: "checkbox"
    }, field, restProps, {
      required: false,
      value: value,
      id: fieldName + "-" + kebabCase(label)
    })), /*#__PURE__*/_jsx(CheckboxBtn, {
      children: /*#__PURE__*/_jsx(Icon, {
        name: indeterminate ? 'minus' : 'tick',
        size: 16,
        color: theme.colors.white
      })
    }), icon ? /*#__PURE__*/_jsx(Pane, {
      width: "24px",
      height: "24px",
      display: "flex",
      alignX: "center",
      alignY: "center",
      ml: 8,
      children: typeof icon === 'function' ? icon() : /*#__PURE__*/_jsx(Icon, {
        name: icon,
        color: color,
        size: 18,
        className: "icon"
      })
    }) : null, labelText ? color ? /*#__PURE__*/_jsx(Badge, {
      color: color,
      size: "sm",
      ml: 8,
      children: labelText
    }) : /*#__PURE__*/_jsx(StyledText, {
      size: "sm",
      ml: 8,
      error: isSingle && touch && error,
      children: labelText
    }) : null]
  });
});
Item.defaultProps = {
  theme: {},
  field: null,
  form: null,
  disabled: false,
  error: false,
  opacity: null,
  required: true,
  errorText: '',
  indeterminate: false,
  name: 'checkbox',
  checkboxName: null,
  labelText: null,
  toggleStyles: {},
  labelStyles: {},
  readOnly: false
};
export default withTheme(Item);