estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: workflow page throw warning: Attempts to access this ref will fail (#12166)

Browse Source
This commit is contained in:
NFish
2024-12-27 18:33:15 +08:00
committed by GitHub
parent 89ce9a5db2
commit eb8963a673
1 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/app/components/base/switch/index.tsx
View File

@@ -11,59 +11,62 @@ type SwitchProps = {
className?: string className?: string
} }
const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps) => { const Switch = React.forwardRef(
const [enabled, setEnabled] = useState(defaultValue) ({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps,
useEffect(() => { propRef: React.Ref<HTMLButtonElement>) => {
setEnabled(defaultValue) const [enabled, setEnabled] = useState(defaultValue)
}, [defaultValue]) useEffect(() => {
const wrapStyle = { setEnabled(defaultValue)
lg: 'h-6 w-11', }, [defaultValue])
l: 'h-5 w-9', const wrapStyle = {
md: 'h-4 w-7', lg: 'h-6 w-11',
sm: 'h-3 w-5', l: 'h-5 w-9',
} md: 'h-4 w-7',
sm: 'h-3 w-5',
}
const circleStyle = { const circleStyle = {
lg: 'h-5 w-5', lg: 'h-5 w-5',
l: 'h-4 w-4', l: 'h-4 w-4',
md: 'h-3 w-3', md: 'h-3 w-3',
sm: 'h-2 w-2', sm: 'h-2 w-2',
} }
const translateLeft = { const translateLeft = {
lg: 'translate-x-5', lg: 'translate-x-5',
l: 'translate-x-4', l: 'translate-x-4',
md: 'translate-x-3', md: 'translate-x-3',
sm: 'translate-x-2', sm: 'translate-x-2',
} }
return ( return (
<OriginalSwitch <OriginalSwitch
checked={enabled} ref={propRef}
onChange={(checked: boolean) => { checked={enabled}
if (disabled) onChange={(checked: boolean) => {
return if (disabled)
setEnabled(checked) return
onChange?.(checked) setEnabled(checked)
}} onChange?.(checked)
className={classNames( }}
wrapStyle[size],
enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
'relative inline-flex flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
disabled ? '!opacity-50 !cursor-not-allowed' : '',
className,
)}
>
<span
aria-hidden="true"
className={classNames( className={classNames(
circleStyle[size], wrapStyle[size],
enabled ? translateLeft[size] : 'translate-x-0', enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out', 'relative inline-flex flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
disabled ? '!opacity-50 !cursor-not-allowed' : '',
className,
)} )}
/> >
</OriginalSwitch> <span
) aria-hidden="true"
} className={classNames(
circleStyle[size],
enabled ? translateLeft[size] : 'translate-x-0',
'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
)}
/>
</OriginalSwitch>
)
})
Switch.displayName = 'Switch' Switch.displayName = 'Switch'