Selector

import { Selector } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Состояние переключателя

<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, marginBottom: '15px' }}>
                <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>