/**
 *
* @title 基础示例 
 * @description 最简单输入控制。最小值为0，最大值为10000
 *
 */


import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';


class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null
        }
    }

    handleChange = (value) => {
        console.log(value);
        this.setState({
            value: value
        })
    }
    handleBtnClick = (value) => {
        console.log(value);
        
    }

    
    render () {
        return (
            <div>
                <InputNumber
                    iconStyle="one"
                    min={0}
                    max={10000}
                    onChange={this.handleChange}
                    handleBtnClick={this.handleBtnClick}
                    value={this.state.value}
                />
            </div>
        )
    }
}

export default Demo1;

#tinperBeeDemo .u-input-number {
    width: 200px;
}

/**
*
* @title 默认 iconStyle
* @description 自定义 最大值 max=12,min=5,step=1
*
*/

import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';


class Demo2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 5
        }
    }
    handleChange = (value) => {
        this.setState({
            value: value
        })
    }
	render () {
		return (
			<InputNumber
				max={12}
				min={5}
				step={1}
				value={this.state.value}
                onChange={ this.handleChange }
			/>
		)
	}
}

export default Demo2;

/**
*
* @title 第二种iconStyle
* @description 自定义max=12,min=5,step=2
*
*/

import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';
 

class Demo3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0
        }
    }
    handleChange = (value) => {
        this.setState({
            value: value
        })
    }
	render () {
		return (
			<InputNumber
				iconStyle="one"
				max={12}
				min={-9}
				step={2}
				value={this.state.value}
				onChange={ this.handleChange }
			/>
		)
	}
}

export default Demo3;

/**
 *
 * @title 默认iconStyle不可用状态
 * @description disabled 的单输入控制
 *
 */


import React, {Component} from 'react';
import { InputNumber } from 'tinper-bee';


class Demo4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0
        }
    }

    handleChange = (value) => {
        this.setState({
            value: value
        })
    }

    render() {
        return (
            <div>
                <InputNumber disabled precision={2} value={this.state.value} onChange={ this.handleChange }/>
            </div>
        )
    }
}

export default Demo4;

/**
*
* @title 第二种iconStyle不可用状态
* @description 自定义max=12,min=5,step=2 且设置 disabled 处理
*
*/

import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';
 

class Demo5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 8
        }
    }
    handleChange = (value) => {
        this.setState({
            value: value
        })
    }
	render () {
		return (
			<InputNumber
				disabled
				iconStyle="one"
				max={12}
				min={-10}
				step={2}
				value={this.state.value}
				onChange={ this.handleChange }
			/>
		)
	}
}

export default Demo5;

/**
*
* @title 保留两位小数
* @description precision={2} 设置小数点后保留两位，失去焦点时数据会格式化为两位小数
*
*/

import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';
 

class Demo6 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0
        }
    }
    handleChange = (value) => {
		console.log(value)
        this.setState({
            value: value
        })
    }
	render () {
		return (
			<InputNumber
				iconStyle="one"
				precision={2}
				value={this.state.value}
				onChange={ this.handleChange }
			/>
		)
	}
}

export default Demo6;

/**
 *
* @title 基础示例 
 * @description 最简单输入控制
 *
 */


import React, {Component} from 'react';
import { InputNumber } from 'tinper-bee';


class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '1'
        }
    }

    handleChange = (value) => {
        console.log(value);
        this.setState({
            value: value
        })
    }

    render() {
        return (
            <div>
                <InputNumber  precision={2} value={this.state.value} onChange={ this.handleChange }/>
            </div>
        )
    }
}

export default Demo1;

/**
 *
* @title 数字区间基础示例 
 * @description 使用 InputNumberGroup
 *
 */


import React, {Component} from 'react';
import { InputNumber } from 'tinper-bee';


const InputNumberGroup = InputNumber.InputNumberGroup;

class Demo9 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: [10,12]
        }
    }

    handleChange = (value) => {
        console.log(value);
        this.setState({
            value
        })
    }

    render() {
        return (
            <div className='demo9'>
                <InputNumberGroup 
                iconStyle='two'
                value={this.state.value}
                onChange={this.handleChange} 
                placeholder={['请输入最小值','请输入最大值']}/>
            </div>
        )
    }
}

export default Demo9;

/**
 *
* @title 输入时校验提示 
 * @description 设置 displayCheckPrompt={true}，显示超出限制范围之后的提示。
 *
 */


import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';


class Demo10 extends Component {
    render () {
        return (
            <InputNumber
                iconStyle="one"
                min={-100}
                max={100}
                value={0}
                displayCheckPrompt={true}
            />
        )
    }
}

export default Demo10;

/**
 *
* @title size 属性 
 * @description size="md" / "lg" / "sm" 分别表示中号(默认)、大号、小号
 *
 */


import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';


class Demo11 extends Component {
    render () {
        return (
            <div>
                <InputNumber
                    size='lg'
                    iconStyle="one"
                    min={-999999}
                    max={999999}
                />
                <br/>
                <InputNumber
                    size='sm'
                    iconStyle="one"
                    min={-999999}
                    max={999999}
                />
                <br/>
                <InputNumber
                    size='lg'
                    min={-999999}
                    max={999999}
                />
                <br/>
                <InputNumber
                    size='sm'
                    min={-999999}
                    max={999999}
                />
            </div>
        )
    }
}

export default Demo11;

/**
 *
* @title 多格式组件
 * @description 自定义 format ，支持格式自定义
 *  
 */

import React, { Component } from 'react';
import { InputNumber } from 'tinper-bee';


class Demo12 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value:0
        }
    }

    handleChange = (value) => {
        console.log(value);
        this.setState({
            value: value
        })
    }
    render () {
        return (
            <div className="demo12">
                销售价格:
                <InputNumber
                    iconStyle="one"
                    // precision={2}
                    // min={-10}
                    // max={10}
                    onFocus={(value,e)=>{
                        console.log(value+"  ==== ",e);
                        this.setState({
                            value
                        })
                    }}
                    onBlur={(value,e)=>{
                        console.log("  ==== ",e);
                        // this.setState({
                        //     value
                        // })
                    }}
                    // precision={8}
                    step={1} 
                    format={value => ` ${value} 千克`.replace(/\B(?=(\d{3})+(?!\d))/g, ':')}
                    value={this.state.value}
                />

                {/* 销售占比:
                <InputNumber
                    iconStyle="one" 
                    format={value => `${value} %`}
                    value={this.state.value}
                /> */}
            </div>
        )
    }
}

export default Demo12;