Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 1x 23x 23x 47x 5x 4x 4x 23x 23x 1x 1x | import {forwardRef} from 'react'
import PropTypes from 'prop-types'
import {useControlledState} from '@s-ui/react-hooks/lib/useControlledState'
import AtomSwitchSingle from './SwitchDesign/AtomSwitchSingle.js'
import AtomSwitchToggle from './SwitchDesign/AtomSwitchToggle.js'
import {COLORS, DESIGNS, SIZES} from './config.js'
const AtomSwitch = forwardRef(
(
{
disabled,
readOnly,
checked,
defaultChecked = false,
className,
labelLeft,
labelRight,
id,
name,
color = COLORS.PRIMARY,
size = SIZES.DEFAULT,
design = DESIGNS.TOGGLE,
onToggle: onToggleCallback,
value,
...props
},
ref
) => {
const [innerChecked, setInnedChecked] = useControlledState(checked, defaultChecked)
const toggleHandler =
({checked}) =>
event => {
if (readOnly || disabled) return null
setInnedChecked(checked)
typeof onToggleCallback === 'function' && onToggleCallback(event, {value, checked})
}
const Component = design === DESIGNS.SINGLE ? AtomSwitchSingle : AtomSwitchToggle
return (
<Component
id={id}
name={name}
className={className}
color={color}
ref={ref}
checked={innerChecked}
disabled={disabled}
readOnly={readOnly}
value={value}
labelLeft={labelLeft}
labelRight={labelRight}
size={size}
design={design}
toggleHandler={toggleHandler}
{...props}
/>
)
}
)
AtomSwitch.displayName = 'AtomSwitch'
AtomSwitch.propTypes = {
/** Id of the switch */
id: PropTypes.string,
/** Form element name */
name: PropTypes.string,
/** Whether switch is checked on init. Controlled state component */
checked: PropTypes.bool,
/** Whether switch is checked on init. Uncontrolled state component */
defaultChecked: PropTypes.bool,
/** Size of switch: 'default', 'large' */
size: PropTypes.oneOf(Object.values(SIZES)),
/** Type of switch: 'toggle' (default), 'select', 'single' */
design: PropTypes.oneOf(Object.values(DESIGNS)),
/** Is Input disabled? */
disabled: PropTypes.bool,
/** Is Input readOnly? */
readOnly: PropTypes.bool,
/** Is the switch loading **/
isLoading: PropTypes.bool,
/** Left label to be printed */
labelLeft: PropTypes.string,
/** Right label to be printed */
labelRight: PropTypes.string,
/** The label itself. Proxy from label */
label: PropTypes.string,
/** The optional label text. Proxy from label */
labelOptionalText: PropTypes.string,
/** Callback to be called when switching. Flag whenever switch is active or not sent */
onToggle: PropTypes.func,
/** Color of the switch: 'primary', 'accent', 'success', 'alert', 'error', 'neutral', 'surface' */
color: PropTypes.oneOf(Object.values(COLORS)),
/** Callback fired when the element gets focused **/
onFocus: PropTypes.func,
/** Callback fired when the element loses its focus status **/
onBlur: PropTypes.func,
/** Whether switch is checked. Controlled state component. Don't combine with initialValue prop! */
value: PropTypes.bool,
/** element node which appears inside the switch circle when it's in left position **/
iconLeft: PropTypes.node,
/** element node which appears inside the switch circle when it's in right position **/
iconRight: PropTypes.node,
/** className to be added to the container **/
className: PropTypes.string
}
export {SIZES as atomSwitchSizes}
export {DESIGNS as atomSwitchDesigns}
export {COLORS as atomSwitchColors}
export default AtomSwitch
|