/**
 * title: "上下调整形态"
 * description: "onChange 第一个参数是输入框 value， 第二个参数 e.Event 事件对象。editable 属性设置是否可输入。"
 */
import React from 'react';
import { NumberPicker } from '@alicloud/console-components';

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

function onChange(value, e) {
  console.log(value, e.type, e.triggerType);
}

export default () => {
  return (
    <div style={contentStyle}>
      <div>
        <div style={titleStyle}>默认</div>
        <NumberPicker max={7} onChange={onChange} />
      </div>
      <div>
        <div style={titleStyle}>输入完成</div>
        <NumberPicker defaultValue={5} max={7} onChange={onChange} />
      </div>
      <div>
        <div style={titleStyle}>禁用</div>
        <NumberPicker defaultValue={6} max={7} disabled />
      </div>
    </div>
  );
};