feat: redesign radio (#69)

Signed-off-by: Innei <i@innei.in>
RSSNext · Jun 17, 2024 · 6d3f6c2 · 6d3f6c2
1 parent ba6184d
commit 6d3f6c2
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 126 deletions.
diff --git a/src/renderer/src/components/ui/radio-group.tsx b/src/renderer/src/components/ui/radio-group.tsx
diff --git a/src/renderer/src/components/ui/radio-group/Radio.tsx b/src/renderer/src/components/ui/radio-group/Radio.tsx
@@ -0,0 +1,52 @@
+import { cn } from "@renderer/lib/utils"
+import type { FC, ReactNode } from "react"
+import { useEventCallback } from "usehooks-ts"
+
+import { useRadioContext, useRadioGroupValue } from "./context"
+
+export const Radio: FC<
+  React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > & {
+    label: ReactNode
+    wrapperClassName?: string
+  }
+> = (props) => {
+  const { id, label, className, wrapperClassName, value, onChange, ...rest } =
+    props
+  const { groupId, onChange: ctxOnChange } = useRadioContext() || {}
+
+  const ctxValue = useRadioGroupValue()
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> =
+    useEventCallback((e) => {
+      ctxOnChange?.(e.target.value)
+      onChange?.(e)
+    })
+  return (
+    <div className={cn("flex items-center gap-2", wrapperClassName)}>
+      <input
+        {...rest}
+        type="radio"
+        id={groupId || id}
+        className={cn(
+          "radio radio-primary radio-sm disabled:radio-current disabled:cursor-not-allowed disabled:text-theme-disabled",
+          className,
+        )}
+        value={value}
+        checked={ctxValue === value}
+        onChange={handleChange}
+      />
+
+      <label
+        className={cn(
+          rest.disabled ? "text-theme-disabled" : "",
+        )}
+        htmlFor={groupId || id}
+      >
+        {label}
+      </label>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/ui/radio-group/RadioGroup.tsx b/src/renderer/src/components/ui/radio-group/RadioGroup.tsx
@@ -0,0 +1,33 @@
+import { useId, useMemo, useRef, useState } from "react"
+
+import { RadioGroupContextProvider, RadioGroupValueProvider } from "./context"
+
+export const RadioGroup: Component<{
+  value?: string
+  onValueChange?: (value: string) => void
+}> = (props) => {
+  const id = useId()
+  const { onValueChange, value } = props
+
+  const stableOnValueChange = useRef(onValueChange).current
+
+  const [currentValue, setCurrentValue] = useState(value)
+  return (
+    <RadioGroupContextProvider
+      value={useMemo(
+        () => ({
+          groupId: id,
+          onChange(value) {
+            setCurrentValue(value)
+            stableOnValueChange?.(value)
+          },
+        }),
+        [id, stableOnValueChange],
+      )}
+    >
+      <RadioGroupValueProvider value={currentValue}>
+        {props.children}
+      </RadioGroupValueProvider>
+    </RadioGroupContextProvider>
+  )
+}
diff --git a/src/renderer/src/components/ui/radio-group/context.ts b/src/renderer/src/components/ui/radio-group/context.ts
@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react"
+
+interface RadioContext {
+  groupId: string
+  onChange: (value: string) => void
+
+}
+const RadioContext = createContext<RadioContext>(null!)
+
+export const useRadioContext = () => useContext(RadioContext)
+
+export const RadioGroupContextProvider = RadioContext.Provider
+type RadioGroupValue = string | undefined
+
+const RadioGroupValueContext = createContext<RadioGroupValue>("")
+export const RadioGroupValueProvider = RadioGroupValueContext.Provider
+export const useRadioGroupValue = () => useContext(RadioGroupValueContext)
diff --git a/src/renderer/src/components/ui/radio-group/index.ts b/src/renderer/src/components/ui/radio-group/index.ts
@@ -0,0 +1,3 @@
+export * from "./context"
+export * from "./Radio"
+export * from "./RadioGroup"