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

Braineet design system

"use strict";

exports.__esModule = true;
exports.default = exports.Item = void 0;
var _react = _interopRequireDefault(require("react"));
var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
var _styledComponents = require("styled-components");
var _badge = _interopRequireDefault(require("../../badge"));
var _icon = _interopRequireDefault(require("../../icon"));
var _pane = _interopRequireDefault(require("../../pane"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["field", "form", "value", "disabled", "indeterminate", "name", "theme", "label", "icon", "color", "opacity", "labelText", "checkboxName", "labelStyles", "readOnly"];
/* eslint-disable no-nested-ternary */
/**
 * The `Checkbox` component.
 */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
var Item = exports.Item = /*#__PURE__*/_react.default.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.default.useRef();
  _react.default.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__*/(0, _jsxRuntime.jsxs)(_styles.StyledLabel, {
    as: "label",
    htmlFor: fieldName + "-" + (0, _kebabCase.default)(label),
    checked: value,
    disabled: disabled,
    readOnly: readOnly,
    error: isSingle && touch && error,
    stylesProps: labelStyles,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CheckboxInput, _extends({
      ref: inputRef,
      checked: value,
      disabled: disabled || readOnly,
      type: "checkbox"
    }, field, restProps, {
      required: false,
      value: value,
      id: fieldName + "-" + (0, _kebabCase.default)(label)
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CheckboxBtn, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
        name: indeterminate ? 'minus' : 'tick',
        size: 16,
        color: theme.colors.white
      })
    }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_pane.default, {
      width: "24px",
      height: "24px",
      display: "flex",
      alignX: "center",
      alignY: "center",
      ml: 8,
      children: typeof icon === 'function' ? icon() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
        name: icon,
        color: color,
        size: 18,
        className: "icon"
      })
    }) : null, labelText ? color ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.default, {
      color: color,
      size: "sm",
      ml: 8,
      children: labelText
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.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
};
var _default = exports.default = (0, _styledComponents.withTheme)(Item);