@itwin/itwinui-react
Version:
A react component library for iTwinUI
82 lines (81 loc) • 2.27 kB
JavaScript
import cx from 'classnames';
import * as React from 'react';
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
import { useMergedRefs, Box } from '../../utils/index.js';
export const Checkbox = React.forwardRef((props, ref) => {
let {
className,
disabled = false,
indeterminate = false,
label,
status,
variant = 'default',
isLoading = false,
wrapperProps = {},
labelProps = {},
style,
...rest
} = props;
let inputElementRef = React.useRef(null);
let refs = useMergedRefs(inputElementRef, ref);
React.useEffect(() => {
if (inputElementRef.current) {
inputElementRef.current.indeterminate = indeterminate;
inputElementRef.current.checked = indeterminate
? false
: inputElementRef.current.checked;
}
});
let checkbox = React.createElement(
React.Fragment,
null,
React.createElement(Box, {
as: 'input',
className: cx(
'iui-checkbox',
{
'iui-checkbox-visibility': 'eyeball' === variant,
},
className,
),
style: style,
'data-iui-loading': isLoading ? 'true' : void 0,
disabled: disabled || isLoading,
type: 'checkbox',
ref: refs,
...rest,
}),
isLoading &&
React.createElement(ProgressRadial, {
size: 'x-small',
indeterminate: true,
}),
);
let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
let { className: labelClassName, ...restLabelProps } = labelProps;
return label
? React.createElement(
Box,
{
as: 'label',
className: cx('iui-checkbox-wrapper', wrapperClassName),
'data-iui-disabled': disabled ? 'true' : void 0,
'data-iui-status': status,
'data-iui-loading': isLoading ? 'true' : void 0,
...restWrapperProps,
},
checkbox,
label &&
React.createElement(
Box,
{
as: 'span',
className: cx('iui-checkbox-label', labelClassName),
...restLabelProps,
},
label,
),
)
: checkbox;
});
if ('development' === process.env.NODE_ENV) Checkbox.displayName = 'Checkbox';