acid-info/lsd
1
0
Fork 0
mirror of https://github.com/acid-info/lsd.git synced 2025-01-27 09:15:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: refactor radio button and radio button group

Browse Source
This commit is contained in:
jinhojang6 2023-03-07 02:24:07 +09:00
parent 929dc713e5
commit a73302ffd5
4 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/lsd-react/src/components/RadioButton/RadioButton.tsx
View File

@ -16,6 +16,8 @@ export type RadioButtonProps = Omit<
> & {
disabled?: boolean
size?: 'small' | 'medium' | 'large'
name?: string
value?: string
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
}
@ -32,12 +34,10 @@ export const RadioButton: React.FC<RadioButtonProps> & {
...props
}) => {
const ref = useRef<HTMLInputElement>(null)
const radioButtonGroup = useRadioButtonGroupContext()
const size = radioButtonGroup?.size ?? _size
const selected = radioButtonGroup
? radioButtonGroup.activeRadioButton != null &&
radioButtonGroup.activeRadioButton === inputProps?.value
? radioButtonGroup.value === inputProps?.value
: _checked
const input = useInput({
@ -48,9 +48,9 @@ export const RadioButton: React.FC<RadioButtonProps> & {
})
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChange && onChange(event)
input.onChange(event)
inputProps.value && radioButtonGroup?.setActiveRadioButton(inputProps.value)
radioButtonGroup
? radioButtonGroup.setActiveValue(event.target.value)
: input.onChange(event)
}
return (

4
packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts
View File

@ -5,8 +5,8 @@ import {
} from './RadioButtonGroup'
export type RadioButtonGroupContextType = {
activeRadioButton?: ActiveRadioButtonType | null
setActiveRadioButton: (value: ActiveRadioButtonType) => void
value?: ActiveRadioButtonType | null
setActiveValue: (value: ActiveRadioButtonType) => void
size?: RadioButtonGroupProps['size']
}

16
packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
View File

@ -18,28 +18,28 @@ export default {
export const Root: Story<RadioButtonGroupProps> = (args) => (
<RadioButtonGroup {...args}>
<RadioButton inputProps={{ name: 'name', value: 1 }}>
<RadioButton checked inputProps={{ name: 'name', value: '1' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 2 }}>
<RadioButton inputProps={{ name: 'name', value: '2' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 3 }}>
<RadioButton inputProps={{ name: 'name', value: '3' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 4 }}>
<RadioButton inputProps={{ name: 'name', value: '4' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 5 }}>
<RadioButton inputProps={{ name: 'name', value: '5' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 6 }}>
<RadioButton inputProps={{ name: 'name', value: '6' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 7 }}>
<RadioButton inputProps={{ name: 'name', value: '7' }}>
RadioButton label
</RadioButton>
<RadioButton inputProps={{ name: 'name', value: 8 }}>
<RadioButton inputProps={{ name: 'name', value: '8' }}>
RadioButton label
</RadioButton>
</RadioButtonGroup>

19
packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
View File

@ -4,29 +4,32 @@ import { RadioButtonGroupContext } from './RadioButtonGroup.context'
import { radioButtonGroupClasses } from './RadioButtonGroup.classes'
import { Typography } from '../Typography'
export type ActiveRadioButtonType = string | number | readonly string[]
export type ActiveRadioButtonType = string | readonly string[]
export type RadioButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
activeRadioButton?: ActiveRadioButtonType | null
value?: ActiveRadioButtonType | null
name?: ActiveRadioButtonType | null
onChange?: (value: ActiveRadioButtonType) => void
size?: 'small' | 'medium' | 'large'
label?: string
}
export const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
classes: typeof radioButtonGroupClasses
} = ({ size = 'large', label, activeRadioButton, children, ...props }) => {
} = ({ size = 'large', label, value, name, onChange, children, ...props }) => {
const ref = useRef<HTMLDivElement>(null)
const [value, setValue] = useState(activeRadioButton)
const [activeValue, setActiveValue] = useState(value)
const setActiveRadioButton = (radioButton: ActiveRadioButtonType) => {
setValue(radioButton)
const setActiveRadioButton = (value: ActiveRadioButtonType) => {
if (onChange) onChange(value)
else setActiveValue(value)
}
useEffect(() => setValue(activeRadioButton), [activeRadioButton])
useEffect(() => setActiveValue(value), [value])
return (
<RadioButtonGroupContext.Provider
value={{ activeRadioButton: value, setActiveRadioButton, size }}
value={{ value: activeValue, setActiveValue, size }}
>
<div
ref={ref}