import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPNumber } from '../../src/index';

export default {
  title: '组件/数据录入/OPNumber',
  component: OPNumber,
} as ComponentMeta<typeof OPNumber>;

export const 数字输入: ComponentStory<typeof OPNumber> = (): JSX.Element => {
  const [val, setVal] = useState(1);
  const onChange = (val) => {
    // console.log(val);
  };
  const onEnter = () => {
    console.log('onEnter');
  };
  const onCorrect = (currentValue, oldValue) => {
    console.log('修正前', oldValue, '修正后', currentValue);
    setVal('');
  };
  return (
    <div>
      <OPNumber
        onEnter={onEnter}
        value={val}
        onChange={setVal}
        width={100}
        align='right'
        onCorrect={onCorrect}
      />
      <OPNumber onChange={onChange} width={100} align='right' />
      <OPNumber
        placeholder='设置了最大100'
        max={100}
        onChange={onChange}
        width={200}
        align='right'
        onCorrect={onCorrect}
      />
      <OPNumber
        placeholder='设置了最小值100'
        min={100}
        width={200}
        align='right'
        onCorrect={onCorrect}
      />
      <OPNumber
        placeholder='自定义format，每次+1'
        format={(val) => val + 1}
        width={250}
        align='right'
        onCorrect={onCorrect}
      />
    </div>
  );
};