Counter

Код DemoCounterWrapper
type childrenPropTypes = {
    onChange: (value: number) => void;
    initialValue: number;
    value?: number;
}
interface IDemoCounterWrapperProps {
    children: (prop: childrenPropTypes) => JSX.Element;
    initialValue: number;
    isControlled?: boolean;
}
export const DemoCounterWrapper: React.FC<IDemoCounterWrapperProps> = ({
    isControlled,
    initialValue = 0,
    children,
}) => {
    const [value, setValue] = React.useState(initialValue);
    const childrenProps: childrenPropTypes = {
        onChange: setValue,
        initialValue,
    };
    if (isControlled) {
        childrenProps.value = value;
    }
    return (
        <div>
            <p style={{ marginTop: 0 }}>Value: {value}</p>
            {children(childrenProps)}
        </div>
    );
};

Состояния счетчика

Выбрано минимальное значение

<DemoCounterWrapper initialValue={3}>
  {({ onChange, initialValue }) => (
    <Counter
      initialValue={initialValue}
      onChange={onChange}
      min={3}
      max={33}
    />
  )}
</DemoCounterWrapper>

Выбрано среднее значение

<DemoCounterWrapper initialValue={18}>
  {({ onChange, initialValue }) => (
    <Counter
      initialValue={initialValue}
      onChange={onChange}
      min={3}
      max={33}
    />
  )}
</DemoCounterWrapper>

Выбрано максимальное значение

<DemoCounterWrapper initialValue={33}>
  {({ onChange, initialValue }) => (
    <Counter
      initialValue={initialValue}
      onChange={onChange}
      min={3}
      max={33}
    />
  )}
</DemoCounterWrapper>

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

Компонент контроллируется родителем.

<DemoCounterWrapper isControlled initialValue={5}>
  {({ onChange, value }) => (
    <Counter isControlled value={value} onChange={onChange} />
  )}
</DemoCounterWrapper>

Выключенное состояние

<DemoCounterWrapper>
  {({ onChange }) => <Counter onChange={onChange} disabled />}
</DemoCounterWrapper>