@braineet/ui
Version:
Braineet design system
115 lines (114 loc) • 4.2 kB
JavaScript
var _excluded = ["field", "form", "value", "disabled", "indeterminate", "name", "theme", "label", "icon", "color", "opacity", "labelText", "checkboxName", "labelStyles", "readOnly"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/* 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 } from "react/jsx-runtime";
import { 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);