ValueField

Компактное поле ввода для использования внутри других компонентов.

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

Варианты отображения

Поддерживается только числовые значения.
Если значение внутри поля ввода превышает его ширину, поле ввода расширяется до границы родительского блока.


  <ValueField />
  <ValueField placeholder='mask' />
  <ValueField value={23} />
  <ValueField value={23} disabled />
  <ValueField value={10} valuePrefix='до' />
  <ValueField value={10} valueUnit='₽' />
  <ValueField value={10} valuePrefix='до' valueUnit='₽' />
  <ValueField value={10} fieldType='line' valuePrefix='до' valueUnit='₽' />

Позиционирование


  <ValueField placeholder='left' position='left' />
  <ValueField placeholder='right' position='right' />

Цветовые схемы


  <div style={flexStyle}>
      <ValueField />
      <ValueField placeholder='mask' />
      <ValueField value={23} />
      <ValueField value={23} disabled />
      <ValueField value={10} valuePrefix='до' />
      <ValueField value={10} valueUnit='₽' />
      <ValueField value={10} valuePrefix='до' valueUnit='₽' />
      <ValueField value={10} valuePrefix='до' valueUnit='₽' disabled />
  </div>
  <div style={{ ...flexStyle, 'backgroundColor': 'var(--spbSky0)' }}>
      <ValueField theme="gray" />
      <ValueField theme="gray" placeholder='mask' />
      <ValueField theme="gray" value={23} />
      <ValueField theme="gray" value={23} disabled />
      <ValueField theme="gray" value={10} valuePrefix='до' />
      <ValueField theme="gray" value={10} valueUnit='₽' />
      <ValueField theme="gray" value={10} valuePrefix='до' valueUnit='₽' />
      <ValueField theme="gray" value={10} valuePrefix='до' valueUnit='₽' disabled />
  </div>
  <div style={{ ...flexStyle, 'backgroundColor': 'var(--brandGreen)' }}>
      <ValueField theme="color" />
      <ValueField theme="color" placeholder='mask' />
      <ValueField theme="color" value={23} />
      <ValueField theme="color" value={23} disabled />
      <ValueField theme="color" value={10} valuePrefix='до' />
      <ValueField theme="color" value={10} valueUnit='₽' />
      <ValueField theme="color" value={10} valuePrefix='до' valueUnit='₽' />
      <ValueField theme="color" value={10} valuePrefix='до' valueUnit='₽' disabled />
  </div>

Контролируемое состояние

В данном состоянии компонент полностью контролируется родительским.

<DemoValueFieldWrapper
  minValue={10}
  maxValue={50}
>
  {({ value, onChange, onBlur }) => <ValueField value={value} onChange={onChange} onBlur={onBlur} isControlled={true} />}
</DemoValueFieldWrapper>

Код DemoValueFieldWrappertype WrapperPropsType = {
    minValue?: number;
    maxValue?: number;
    children: (props: {
        value: number | string;
        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
        onBlur: () => void;
    }) => React.ReactNode;
};

const clampValue = (value: string | number, minValue?: number, maxValue?: number): number => {
    const sourceValue = Number(value);

    if (minValue && sourceValue < minValue) {
        return minValue;
    }

    if (maxValue && sourceValue > maxValue) {
        return maxValue;
    }

    return sourceValue;
};

const DemoValueFieldWrapper: React.FC<WrapperPropsType> = ({ minValue, maxValue, children }) => {
    const [inputValue, setInputValue] = React.useState<number | string>('');
    const [rawInputValue, setRawInputValue] = React.useState<string | null>(null);

    const handleChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(clampValue(value, minValue, maxValue));
        setRawInputValue(value);
    };

    const handleInputBlur = () => {
        setRawInputValue(null);
    };

    return (
        <div style={{ display: 'flex', maxWidth: '200px' }}>
            {children({ value: rawInputValue ?? inputValue, onChange: handleChange, onBlur: handleInputBlur })}
        </div>
    );
};