@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, slotProps: { input: { ...inputProps, ref: inputRef } }, focusRipple: false, toggleColor: toggleColor }), label && (_jsx(Typography, { variant: "body_m1", sx: [{
                        display: 'flex',
                        alignItems: 'center'
                    }, labelPlacement === 'left' ? {
                        order: -1
                    } : {
                        order: 1
                    }], children: label }))] }));
};
export default Toggle;