-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.js
52 lines (47 loc) · 1.24 KB
/
index.js
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
import React, { useState } from 'react'
import { animated, useSpring, config } from 'react-spring'
import classname from 'classnames'
import { useSystemState } from 'store'
import './style.scss'
export const ToggleControl = props => {
const {
className,
value: initialValue = false,
onChange = () => () => {},
label = "",
} = props
const [ value, setValue ] = useState( initialValue )
const { shouldReduceMotion } = useSystemState()
const classes = classname( {
'fl-asst-button': true,
'fl-asst-control-toggle': true,
}, className )
const mergedProps = Object.assign( {}, props, {
className: classes,
type: 'button',
onClick: e => {
setValue( ! value )
onChange( ! value, e )
},
role: 'switch',
'aria-checked': value ? "true" : "false",
'aria-label': label
} )
delete mergedProps.value
const thumbProps = useSpring( {
transform: value ? 'translateX(30px)' : 'translateX(0px)',
background: value ? 'var(--fl-accent-color)' : 'transparent',
borderColor: value ? 'transparent' : '',
config: {
...config.default,
tension: 700,
friction: 25,
},
immediate: shouldReduceMotion
} )
return (
<button {...mergedProps}>
<animated.div className="fl-asst-control-thumb" style={thumbProps} />
</button>
)
}