acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: pass down value and name directly

This commit is contained in:
jinhojang6 2023-03-07 20:57:06 +09:00
parent a73302ffd5
commit 5e25a92500
5 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,4 +24,5 @@ Root.args = {
disabled: false, disabled: false,
checked: undefined, checked: undefined,
onChange: undefined, onChange: undefined,
value: '1',
} }

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

@ -17,7 +17,7 @@ export type RadioButtonProps = Omit<
disabled?: boolean disabled?: boolean
size?: 'small' | 'medium' | 'large' size?: 'small' | 'medium' | 'large'
name?: string name?: string
value?: string value: string
inputProps?: React.InputHTMLAttributes<HTMLInputElement> inputProps?: React.InputHTMLAttributes<HTMLInputElement>
} }
@ -29,15 +29,18 @@ export const RadioButton: React.FC<RadioButtonProps> & {
checked: _checked, checked: _checked,
defaultChecked, defaultChecked,
disabled = false, disabled = false,
value,
inputProps = {}, inputProps = {},
children, children,
...props ...props
}) => { }) => {
const ref = useRef<HTMLInputElement>(null) const ref = useRef<HTMLInputElement>(null)
const radioButtonGroup = useRadioButtonGroupContext() const radioButtonGroup = useRadioButtonGroupContext()
const size = radioButtonGroup?.size ?? _size const size = radioButtonGroup?.size ?? _size
const name = radioButtonGroup?.name ?? ''
const selected = radioButtonGroup const selected = radioButtonGroup
? radioButtonGroup.value === inputProps?.value ? radioButtonGroup.value === value
: _checked : _checked
const input = useInput({ const input = useInput({
@ -49,7 +52,7 @@ export const RadioButton: React.FC<RadioButtonProps> & {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
radioButtonGroup radioButtonGroup
? radioButtonGroup.setActiveValue(event.target.value) ? radioButtonGroup.setActiveRadioButton(event.target.value)
: input.onChange(event) : input.onChange(event)
} }
@ -69,6 +72,8 @@ export const RadioButton: React.FC<RadioButtonProps> & {
> >
<input <input
ref={ref} ref={ref}
name={name}
value={value}
type="radio" type="radio"
checked={input.value} checked={input.value}
onChange={handleChange} onChange={handleChange}

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

@ -6,7 +6,8 @@ import {
export type RadioButtonGroupContextType = { export type RadioButtonGroupContextType = {
value?: ActiveRadioButtonType | null value?: ActiveRadioButtonType | null
setActiveValue: (value: ActiveRadioButtonType) => void name?: string | null
setActiveRadioButton: (value: ActiveRadioButtonType) => void
size?: RadioButtonGroupProps['size'] size?: RadioButtonGroupProps['size']
} }

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

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

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

@ -7,8 +7,8 @@ import { Typography } from '../Typography'
export type ActiveRadioButtonType = string | readonly string[] export type ActiveRadioButtonType = string | readonly string[]
export type RadioButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & { export type RadioButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
value?: ActiveRadioButtonType | null value: ActiveRadioButtonType | null
name?: ActiveRadioButtonType | null name?: string | null
onChange?: (value: ActiveRadioButtonType) => void onChange?: (value: ActiveRadioButtonType) => void
size?: 'small' | 'medium' | 'large' size?: 'small' | 'medium' | 'large'
label?: string label?: string
@ -29,7 +29,7 @@ export const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
return ( return (
<RadioButtonGroupContext.Provider <RadioButtonGroupContext.Provider
value={{ value: activeValue, setActiveValue, size }} value={{ value: activeValue, setActiveRadioButton, name, size }}
> >
<div <div
ref={ref} ref={ref}