<Selector value="not-checked-value" checked={false} />
<Selector value="checked-value" checked />
<Selector value="disabled-value" disabled />
<Selector value="checked-disabled-value" checked disabled />
<Selector value="error-value" error />
<Selector value="not-checked-value" checked={false} color={'light'} />
<Selector value="checked-value" checked color={'light'} />
<Selector value="disabled-value" disabled color={'light'} />
<Selector value="checked-disabled-value" checked disabled color={'light'} />
<Selector value="error-value" error color={'light'} />
Код DemoSelectorWrapperexport const DemoSelectorWrapper = ({ children }) => {
const [selectedOption, setSelectedOption] = React.useState('');
const handleChange = (value) => {
setSelectedOption(value);
}
return (
<>
<p style={{textAlign: 'center', marginTop: 0}}><b>Value:</b> {selectedOption || undefined}</p>
<div style={flexStyle}>
{children({
onChange: handleChange,
selectedOption: selectedOption,
})}
</div>
</>
);
}
<DemoSelectorWrapper>
{({ onChange, selectedOption }) => (
<>
<Selector
value="value-1"
checked={selectedOption === 'value-1'}
onChange={onChange}
/>
<Selector
value="value-2"
checked={selectedOption === 'value-2'}
onChange={onChange}
/>
</>
)}
</DemoSelectorWrapper>
<DemoSelectorWrapper>
{({ onChange, selectedOption }) => (
<>
<Selector value="value-1" name="group-1" onChange={onChange} />
<Selector value="value-2" name="group-1" onChange={onChange} />
</>
)}
</DemoSelectorWrapper>
Код DemoMultipleSelectorWrapperexport const DemoMultipleSelectorWrapper = ({ children }: ISelectorProps) => {
const [selectedOption, setSelectedOption] = React.useState<string[]>([]);
const handleChange = (values: string[]): void => {
setSelectedOption(values);
};
return (
<>
<p style={{ textAlign: 'center', marginTop: 0 }}>
<b>Value:</b> {selectedOption.join(', ') || undefined};
</p>
<div style={flexStyle}>
{children({
onChange: handleChange,
selectedOption,
})}
</div>
</>
);
};
<DemoMultipleSelectorWrapper>
{({ onChange, selectedOption }) =>
[
{ value: 'option1' },
{ value: 'option2' },
{ value: 'option3' },
].map(option => (
<Selector
key={option.value}
type="checkbox"
value={option.value}
name="options"
checkedOptions={selectedOption}
onChange={onChange}
/>
))
}
</DemoMultipleSelectorWrapper>
Код customInput class.top-right {
position: absolute;
top: 10px;
right: 10px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.bottom-left {
position: absolute;
bottom: 10px;
left: 10px;
}
<DemoSelectorWrapper>
{({ onChange, selectedOption }) => (
<>
<Selector
value="value-1"
name="group-1"
onChange={onChange}
classes={{ customInput: 'top-right' }}
>
<div style={cardStyle} />
</Selector>
<Selector
value="value-2"
name="group-1"
onChange={onChange}
classes={{ customInput: 'center' }}
>
<div style={cardStyle} />
</Selector>
<Selector
value="value-3"
name="group-1"
onChange={onChange}
classes={{ customInput: 'bottom-left' }}
>
<div style={cardStyle} />
</Selector>
</>
)}
</DemoSelectorWrapper>