From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/base/switch/index.tsx | 120 ++++++++++++++++++++++++++---------------------------------
1 files changed, 53 insertions(+), 67 deletions(-)
diff --git a/app/components/base/switch/index.tsx b/app/components/base/switch/index.tsx
index 1faf7c5..48e5c0c 100644
--- a/app/components/base/switch/index.tsx
+++ b/app/components/base/switch/index.tsx
@@ -5,82 +5,68 @@
type SwitchProps = {
onChange?: (value: boolean) => void
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'l'
+ size?: 'sm' | 'md' | 'lg' | 'l'
defaultValue?: boolean
disabled?: boolean
className?: string
}
-const Switch = (
- {
- ref: propRef,
- onChange,
- size = 'md',
- defaultValue = false,
- disabled = false,
- className,
- }: SwitchProps & {
- ref?: React.RefObject<HTMLButtonElement>;
- },
-) => {
- const [enabled, setEnabled] = useState(defaultValue)
- useEffect(() => {
- setEnabled(defaultValue)
- }, [defaultValue])
- const wrapStyle = {
- lg: 'h-6 w-11',
- l: 'h-5 w-9',
- md: 'h-4 w-7',
- sm: 'h-3 w-5',
- xs: 'h-2.5 w-3.5',
- }
+const Switch = React.forwardRef(
+ ({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps,
+ propRef: React.Ref<HTMLButtonElement>) => {
+ const [enabled, setEnabled] = useState(defaultValue)
+ useEffect(() => {
+ setEnabled(defaultValue)
+ }, [defaultValue])
+ const wrapStyle = {
+ lg: 'h-6 w-11',
+ l: 'h-5 w-9',
+ md: 'h-4 w-7',
+ sm: 'h-3 w-5',
+ }
- const circleStyle = {
- lg: 'h-5 w-5',
- l: 'h-4 w-4',
- md: 'h-3 w-3',
- sm: 'h-2 w-2',
- xs: 'h-1.5 w-1',
- }
+ const circleStyle = {
+ lg: 'h-5 w-5',
+ l: 'h-4 w-4',
+ md: 'h-3 w-3',
+ sm: 'h-2 w-2',
+ }
- const translateLeft = {
- lg: 'translate-x-5',
- l: 'translate-x-4',
- md: 'translate-x-3',
- sm: 'translate-x-2',
- xs: 'translate-x-1.5',
- }
- return (
- <OriginalSwitch
- ref={propRef}
- checked={enabled}
- onChange={(checked: boolean) => {
- if (disabled)
- return
- 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' : '',
- size === 'xs' && 'rounded-sm',
- className,
- )}
- >
- <span
- aria-hidden="true"
+ const translateLeft = {
+ lg: 'translate-x-5',
+ l: 'translate-x-4',
+ md: 'translate-x-3',
+ sm: 'translate-x-2',
+ }
+ return (
+ <OriginalSwitch
+ ref={propRef}
+ checked={enabled}
+ onChange={(checked: boolean) => {
+ if (disabled)
+ return
+ setEnabled(checked)
+ onChange?.(checked)
+ }}
className={classNames(
- circleStyle[size],
- enabled ? translateLeft[size] : 'translate-x-0',
- size === 'xs' && 'rounded-[1px]',
- 'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
+ 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,
)}
- />
- </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'
--
Gitblit v1.8.0