From a360d1b83b084e0aa4164ecae61228f2178f4bf1 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sat, 23 May 2020 08:14:49 +0800
Subject: [PATCH] refactor(radio): use CSS variable instead of Context
 broadcast size

---
 .../radio/__tests__/__snapshots__/group.test.tsx.snap | 11 ++++++++---
 components/radio/radio-context.ts                     |  2 --
 components/radio/radio-group.tsx                      |  7 +++----
 components/radio/radio.tsx                            | 10 ++--------
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
index 48a20db..2b13355 100644
--- a/components/radio/__tests__/__snapshots__/group.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1rem * 1);
           margin-left: 0;
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -280,6 +281,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: 0;
           margin-left: calc(1rem * 1);
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -306,7 +308,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .75rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -362,6 +364,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.75rem * 1);
           margin-left: 0;
+          --radio-size: .75rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -384,7 +387,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .875rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -440,6 +443,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.875rem * 1);
           margin-left: 0;
+          --radio-size: .875rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -462,7 +466,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1.125rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -518,6 +522,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1.125rem * 1);
           margin-left: 0;
+          --radio-size: 1.125rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
diff --git a/components/radio/radio-context.ts b/components/radio/radio-context.ts
index 3f98478..9a0ecb5 100644
--- a/components/radio/radio-context.ts
+++ b/components/radio/radio-context.ts
@@ -1,11 +1,9 @@
 import React from 'react'
-import { NormalSizes } from 'components/utils/prop-types'
 
 export interface RadioConfig {
   updateState: (value: string) => void
   disabledAll: boolean
   value?: string
-  size?: NormalSizes
   inGroup: boolean
 }
 
diff --git a/components/radio/radio-group.tsx b/components/radio/radio-group.tsx
index 20ff2ab..af31b42 100644
--- a/components/radio/radio-group.tsx
+++ b/components/radio/radio-group.tsx
@@ -23,8 +23,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
-export const getRadioSize = (selfSize: NormalSizes, groupSize?: NormalSizes): string => {
-  const size = groupSize || selfSize
+export const getRadioSize = (size: NormalSizes): string => {
   const sizes: { [key in NormalSizes]: string } = {
     mini: '.75rem',
     small: '.875rem',
@@ -56,10 +55,9 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
       updateState,
       disabledAll: disabled,
       inGroup: true,
-      size,
       value: selfVal,
     }
-  }, [disabled, selfVal, size])
+  }, [disabled, selfVal])
 
   const fontSize = useMemo(() => getRadioSize(size), [size])
   const groupGap = `calc(${fontSize} * 1)`
@@ -83,6 +81,7 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
         .radio-group :global(.radio) {
           margin-top: ${useRow ? 0 : groupGap};
           margin-left: ${useRow ? groupGap : 0};
+          --radio-size: ${fontSize};
         }
 
         .radio-group :global(.radio:first-of-type) {
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index 2037f0c..8480f5d 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -48,13 +48,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
 }) => {
   const theme = useTheme()
   const [selfChecked, setSelfChecked] = useState<boolean>(!!checked)
-  const {
-    value: groupValue,
-    disabledAll,
-    inGroup,
-    updateState,
-    size: groupSize,
-  } = useRadioContext()
+  const { value: groupValue, disabledAll, inGroup, updateState } = useRadioContext()
   const [withoutDescChildren, DescChildren] = pickChild(children, RadioDescription)
 
   if (inGroup) {
@@ -69,7 +63,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
     }, [groupValue, radioValue])
   }
 
-  const fontSize = useMemo(() => getRadioSize(size, groupSize), [size, groupSize])
+  const fontSize = useMemo(() => getRadioSize(size), [size])
   const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll])
   const changeHandler = (event: React.ChangeEvent) => {
     if (isDisabled) return