@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
46 lines • 1.72 kB
JavaScript
import React, { useCallback, useMemo, useState } from 'react';
import { useUuid } from '../../hooks/uuid';
import { getHeightOfSingleTextLine } from '../../utils/calculate';
import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
const Checkbox = _ref => {
let {
children,
isChecked,
isDisabled,
labelClassName,
onChange,
shouldShowAsSwitch,
shouldShowCentered = false,
shouldChangeOnLabelClick = true
} = _ref;
const [isActive, setIsActive] = useState(isChecked ?? false);
const handleChange = useCallback(event => {
setIsActive(event.target.checked);
if (typeof onChange === 'function') {
onChange(event);
}
}, [onChange]);
const uuid = useUuid();
const lineHeight = useMemo(() => !children || shouldShowCentered ? undefined : getHeightOfSingleTextLine(), [children, shouldShowCentered]);
return /*#__PURE__*/React.createElement(StyledCheckbox, null, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
checked: isChecked,
disabled: isDisabled,
id: uuid,
onChange: handleChange,
type: "checkbox"
}), /*#__PURE__*/React.createElement(StyledCheckboxBox, {
htmlFor: uuid,
$isChecked: isChecked ?? isActive,
$isDisabled: isDisabled,
$shouldShowAsSwitch: shouldShowAsSwitch,
$lineHeight: lineHeight
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
className: labelClassName,
$isDisabled: isDisabled,
$shouldChangeOnLabelClick: shouldChangeOnLabelClick,
htmlFor: shouldChangeOnLabelClick ? uuid : undefined
}, children));
};
Checkbox.displayName = 'Checkbox';
export default Checkbox;
//# sourceMappingURL=Checkbox.js.map