# Component/InputStepper

> Props: component-inputstepper.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  }
}
```

### By Size

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  },
  args: {
    width: '350px'
  },
  render: args => {
    return <Stack direction='column' gap={8}>
        {(['xsmall', 'small', 'medium', 'large'] as InputSize[]).map(size => <FormField label={size} key={size} size={size}>
            <Stack direction='column' gap={4}>
              <InputStepper size={size} {...args} />
              <InputStepper size={size} {...args} value={99} />
            </Stack>
          </FormField>)}
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  },
  args: {
    width: '350px'
  },
  render: args => {
    return <Stack direction='column' gap={8}>
        {(['xsmall', 'small', 'medium', 'large'] as InputSize[]).map(size => <FormField label={size} key={size} size={size}>
            <Stack direction='column' gap={4}>
              <InputStepper size={size} {...args} />
              <InputStepper size={size} {...args} value={99} />
            </Stack>
          </FormField>)}
      </Stack>;
  },
  args: {
    width: '350px',
    disabled: true
  }
}
```

### Empty Value

값이 없을때 좌측 버튼은 비활성화 됩니다

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  },
  parameters: {
    docs: {
      description: {
        story: '값이 없을때 좌측 버튼은 비활성화 됩니다'
      }
    }
  }
}
```

### Fixed Width

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  },
  args: {
    width: '350px'
  }
}
```

### Out Of Range

```tsx
{
  args: {
    min: 5,
    max: 10,
    step: 2
  },
  render: args => {
    const [value, setValue] = React.useState(DEFAULT_VALUE);
    return <Stack direction='column' gap={8}>
        <BaseText>
          min: {args.min}/ max: {args.max}/ step: 2
        </BaseText>
        {(['min', 'max'] as ('min' | 'max')[]).map(key => <FormField label={key} key={key}>
            <Stack direction='row' gap={8}>
              <InputStepper {...args} value={value[key]} onChange={value => setValue(prev => ({
            ...prev,
            [key]: value
          }))} />
              <Button onClick={() => setValue({
            ...value,
            [key]: DEFAULT_VALUE[key]
          })} disabled={value[key] === DEFAULT_VALUE[key]}>
                Reset
              </Button>
            </Stack>
          </FormField>)}
      </Stack>;
  }
}
```

### Status

status 값은 min, max validation보다 우선해서 표현합니다

```tsx
{
  render: args => {
    const [value, setValue] = React.useState(args.value ?? args.defaultValue);
    useEffect(() => {
      if (args.defaultValue && args.value === undefined) {
        setValue(args.defaultValue);
      }
    }, [args.value, args.defaultValue]);
    useEffect(() => {
      setValue(args.value);
    }, [args.value]);
    return <InputStepper {...args} value={value} onChange={value => setValue(value ?? undefined)} />;
  },
  parameters: {
    docs: {
      description: {
        story: 'status 값은 min, max validation보다 우선해서 표현합니다'
      }
    }
  },
  render: () => {
    return <Stack direction='column' gap={8}>
        <FormField label='min:1' labelWidth={160}>
          <InputStepper min={1} value={5} />
        </FormField>
        <FormField label='min:1 status:"error"' labelWidth={160}>
          <InputStepper status='error' min={1} value={5} />
        </FormField>
        <FormField label='min:10' labelWidth={160}>
          <InputStepper min={10} value={5} />
        </FormField>
        <FormField label='min:10, status:"info"' labelWidth={160}>
          <InputStepper status='info' min={10} value={5} />
        </FormField>
      </Stack>;
  }
}
```

### Valid Value

onChange의 validValue 값을 사용해 범위 내 값을 가져올 수 있습니다

```tsx
{
  args: {
    min: 5,
    max: 10,
    step: 2
  },
  parameters: {
    docs: {
      description: {
        story: 'onChange의 validValue 값을 사용해 범위 내 값을 가져올 수 있습니다'
      }
    }
  },
  render: args => {
    const [value, setValue] = React.useState(DEFAULT_VALUE);
    return <Stack direction='column' gap={8}>
        <BaseText as='p'>
          min: {args.min}/ max: {args.max}/ step: 2.
          <br /> 직접 입력 및 stepper 클릭시 범위내 값만 지정 가능
        </BaseText>
        {(['min', 'max'] as ('min' | 'max')[]).map(key => <FormField label={key} key={key}>
            <Stack direction='row' gap={8}>
              <InputStepper {...args} value={value[key]} onChange={(value, validValue) => setValue(prev => ({
            ...prev,
            [key]: validValue
          }))} />
              <Button onClick={() => setValue({
            ...value,
            [key]: DEFAULT_VALUE[key]
          })} disabled={value[key] === DEFAULT_VALUE[key]}>
                Reset
              </Button>
            </Stack>
          </FormField>)}
      </Stack>;
  }
}
```