@lunit/oui/dist/components/Toggle/Toggle.js

Lunit Oncology UI components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { Typography } from '@mui/material';
import { Container, StyledIndeterminateToggle, StyledToggle } from './Toggle.styled';
const Toggle = ({ value, name, checked, defaultChecked, disabled, required, onChange, onChangeCapture, inputProps, inputRef, label, labelPlacement = 'right', toggleColor, indeterminate, ...rootProps }) => {
    const ToggleComponent = indeterminate ? StyledIndeterminateToggle : StyledToggle;
    return (_jsxs(Container, { ...rootProps, className: clsx('toggle', { 'is-disabled': disabled }, rootProps.className), component: label != null ? 'label' : 'span', children: [_jsx(ToggleComponent, { disableRipple: true, value: true, name: name, 
                // indeterminate가 true인 Toggle을 클릭했을 때
                // 발생하는 change event target의 checked property의 일관성을 보장함
                checked: indeterminate ? true : checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: onChange, onChangeCapture: onChangeCapture, inputProps: inputProps, inputRef: inputRef, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: {
                    display: 'flex',
                    alignItems: 'center',
                    order: labelPlacement === 'left' ? -1 : 1,
                }, children: label }))] }));
};
export default Toggle;