feat: improve code (#15)

react-component · Mar 7, 2022 · a1141dd · a1141dd
1 parent f132daf
commit a1141dd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,7 @@ render(
 | options      | Array<string \| number \| [SegmentedOption](#SegmentedOption)> | []           | options for choices                |
 | value        | string \| number                                               |              | value of segmented                 |
 | defaultValue | string \| number                                               |              | defaultValue of segmented          |
+| value | string \| number                                               |              | currently selected value of segmented          |
 | onChange     | (e: any) => void                                               |              | defaultValue of segmented          |
 | disabled     | boolean                                                        | false        | disabled status of segmented       |
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -88,13 +88,20 @@ const InternalSegmentedOption: React.FC<{
   );
 };
 
+interface ThumbMoveStatus {
+  from: React.CSSProperties | null;
+  to: React.CSSProperties | null;
+}
+
 const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
   (props, ref) => {
     const {
       prefixCls = 'rc-segmented',
       direction,
       options,
       disabled,
+      defaultValue,
+      value,
       onChange,
       className = '',
       motionName = 'thumb-motion',
@@ -104,9 +111,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     const containerRef = React.useRef<HTMLDivElement>(null);
     const mergedRef = composeRef<HTMLDivElement>(containerRef, ref);
 
-    const thumbMoveStyles = React.useRef<
-      Record<'from' | 'to', React.CSSProperties | null>
-    >({
+    const thumbMoveStatus = React.useRef<ThumbMoveStatus>({
       from: null,
       to: null,
     });
@@ -115,51 +120,52 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       return normalizeOptions(options);
     }, [options]);
 
-    const [selected, setSelected] = useMergedState(
-      props.defaultValue || segmentedOptions[0]?.value,
-    );
+    const [selected, setSelected] = useMergedState(segmentedOptions[0]?.value, {
+      value,
+      defaultValue,
+    });
 
     const [visualSelected, setVisualSelected] = React.useState<
       SegmentedRawOption | undefined
     >(selected);
 
     const [thumbShow, setThumbShow] = React.useState(false);
 
-    const calcThumbMoveStyle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const calcThumbMoveStatus = (
+      event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
       const toElement = event.target.closest(`.${prefixCls}-item`);
 
       const fromElement = containerRef.current?.querySelector(
         `.${prefixCls}-item-selected`,
       );
 
-      if (fromElement && toElement && thumbMoveStyles.current) {
-        thumbMoveStyles.current.from = calcThumbStyle(
+      if (fromElement && toElement && thumbMoveStatus.current) {
+        thumbMoveStatus.current.from = calcThumbStyle(
           fromElement as HTMLElement,
         );
-        thumbMoveStyles.current.to = calcThumbStyle(toElement as HTMLElement);
+        thumbMoveStatus.current.to = calcThumbStyle(toElement as HTMLElement);
 
         setThumbShow(true);
       }
     };
 
     const handleChange = (
       event: React.ChangeEvent<HTMLInputElement>,
-      value: SegmentedRawOption,
+      val: SegmentedRawOption,
     ) => {
       if (disabled) {
         return;
       }
 
-      if (value !== selected) {
-        calcThumbMoveStyle(event);
-      }
+      calcThumbMoveStatus(event);
 
-      setSelected(value);
+      setSelected(val);
 
       if (onChange) {
         const mutatedTarget = Object.create(event.target, {
           value: {
-            value,
+            value: val,
           },
         });
         const mutatedEvent = Object.create(event, {
@@ -173,15 +179,15 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     // --- motion event handlers for thumb move
     const handleThumbEnterStart = () => {
-      const fromStyle = thumbMoveStyles.current.from;
+      const fromStyle = thumbMoveStatus.current.from;
       if (fromStyle) {
         setVisualSelected(undefined);
         return fromStyle;
       }
     };
 
     const handleThumbEnterActive = () => {
-      const toStyle = thumbMoveStyles.current.to;
+      const toStyle = thumbMoveStatus.current.to;
       if (toStyle) {
         return toStyle;
       }
@@ -191,8 +197,8 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       setThumbShow(false);
       setVisualSelected(selected);
 
-      if (thumbMoveStyles.current) {
-        thumbMoveStyles.current = {
+      if (thumbMoveStatus.current) {
+        thumbMoveStatus.current = {
           from: null,
           to: null,
         };
@@ -251,6 +257,8 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
 Segmented.displayName = 'Segmented';
 
-Segmented.defaultProps = {};
+Segmented.defaultProps = {
+  options: [],
+};
 
 export default Segmented;
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rc-segmented render 1`] = `
+exports[`rc-segmented render empty segmented 1`] = `
+<div
+  class="rc-segmented"
+/>
+`;
+
+exports[`rc-segmented render label with ReactNode 1`] = `
 <div
   class="rc-segmented"
 >
@@ -53,12 +59,6 @@ exports[`rc-segmented render 1`] = `
 </div>
 `;
 
-exports[`rc-segmented render empty segmented 1`] = `
-<div
-  class="rc-segmented"
-/>
-`;
-
 exports[`rc-segmented render segmented ok 1`] = `
 <div
   class="rc-segmented"

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -36,7 +36,7 @@ describe('rc-segmented', () => {
     ).toEqual([true, false, false]);
   });
 
-  it('render', () => {
+  it('render label with ReactNode', () => {
     const wrapper = mount(
       <Segmented
         options={[