chore: added controllable state

adaptui · anuraghazra · Feb 1, 2021 · Jan 21, 2021 · Jan 22, 2021 · Jan 22, 2021
commit cf0615178c9465332c2ded9f7e68cf42c61dceaa
diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -1,15 +1,15 @@
+import React from "react";
 import { cx } from "@renderlesskit/react";
 import {
   Radio as ReakitRadio,
   RadioGroup as ReakitRadioGroup,
   RadioGroupProps,
-  RadioInitialState,
   RadioProps,
-  useRadioState,
 } from "reakit";
 import { useTheme } from "../theme";
 import { createContext } from "../utils";
 import { forwardRefWithAs } from "../utils/types";
+import { useRadioState, RadioInitialState } from "./useRadioState";
 
 const [RadioProvider, useRadioContext] = createContext({
   name: "RadioContext",

diff --git a/src/radio/stories/Radio.stories.tsx b/src/radio/stories/Radio.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { Radio, RadioGroup } from "../Radio";
+import { Button } from "../../";
 
 export default {
   title: "Radio",
@@ -22,6 +23,32 @@ export const Default = () => {
   );
 };
 
+export const Controlled = () => {
+  const [state, setState] = React.useState("3");
+
+  console.log(state);
+  return (
+    <>
+      <RadioGroup
+        state={state}
+        onStateChange={e => {
+          setState(e as string);
+        }}
+      >
+        <div className="flex gap-5">
+          <Radio value="1">One</Radio>
+          <Radio value="2">Two</Radio>
+          <Radio value="3">Three</Radio>
+          <Radio value="4" disabled>
+            Disabled
+          </Radio>
+        </div>
+      </RadioGroup>
+      <Button onClick={() => setState("2")}>change</Button>
+    </>
+  );
+};
+
 export const States = () => {
   return (
     <RadioGroup state={"2"}>

diff --git a/src/radio/useRadioState.tsx b/src/radio/useRadioState.tsx
@@ -0,0 +1,55 @@
+import { useControllableState } from "@renderlesskit/react";
+import * as React from "react";
+import {
+  CompositeState,
+  CompositeActions,
+  CompositeInitialState,
+  useCompositeState,
+} from "reakit";
+
+export type RadioState = CompositeState & {
+  /**
+   * The `value` attribute of the current checked radio.
+   */
+  state: string | number | undefined;
+};
+
+export type RadioActions = CompositeActions & {
+  /**
+   * Sets `state`.
+   */
+  setState: React.Dispatch<React.SetStateAction<string | number>>;
+};
+
+export type RadioInitialState = CompositeInitialState &
+  Partial<Pick<RadioState, "state">> & {
+    defaultState?: RadioState["state"];
+    onStateChange?: (v: RadioState["state"]) => void;
+  };
+
+export type RadioStateReturn = RadioState & RadioActions;
+
+export function useRadioState(
+  initialState: RadioInitialState = {},
+): RadioStateReturn {
+  const {
+    state: initialValue,
+    defaultState,
+    loop = true,
+    onStateChange,
+    ...props
+  } = initialState;
+
+  const [state, setState] = useControllableState({
+    value: initialValue,
+    defaultValue: defaultState,
+    onChange: onStateChange,
+  });
+
+  const composite = useCompositeState({ ...props, loop });
+  return {
+    ...composite,
+    state,
+    setState,
+  };
+}