# Property

属性配置面板

## 案例演示

### Property 本使用

使用 Property 内置的属性组件

---demo
```js
import { JsonView, Property } from 'amos-framework';

const sexs = [
  { key: 'male', label: '男' },
  { key: 'female', label: '女' },
  { key: 'unknown', label: '未知', disabled: true },
];

const types = [
  { key: 'A', label: 'A类' },
  { key: 'B', label: 'B类' },
  { key: 'C', label: 'C类' },
];

const strengthProp = {
  min: 0,
  max: 100,
  step: 1
};

const numProp = {
  min: 1,
  max: 200,
  step: 1
};

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nick: '',
      name: '',
      enable: false,
      status: false,
      color: '',
      sex: 'female',
      type: 'A',
      strength: 10,
      num: 30
    };
  }

  genHandle = (key) => {
    return function(value){
      debugger
      this.setState({
        [key]: value
      });
    }.bind(this);
  }

  genClickHandle = (key) => {
    return function(event){
      console.log('click', key);
    }.bind(this);
  }

  render() {
    const { nick, name, enable, status, color, sex, type, strength, num } = this.state;
    return (
      <div style={{ width: '25em' }}>
        <Property.Group title="基本信息配置" expanded={false}>
          <Property.Input label="昵称" style={{ width: '100%' }} value={nick} onChange={this.genHandle('nick')} />
          <Property.Input label="名称" style={{ width: '100%' }} value={name} onChange={this.genHandle('name')} />
          <Property.Checkbox label="启用" style={{ width: '100%' }} checked={enable} onChange={this.genHandle('enable')} />
          <Property.Switch label="开关状态" onOff={status} onLabel="开" offLabel="关" onChange={this.genHandle('status')} />
          <Property.Radio label="性别" value={sex} datas={sexs} onChange={this.genHandle('sex')} />
          <Property.Color label="背景色" value={color} onChange={this.genHandle('color')} />
          <Property.Select label="类型" style={{ width: '100%' }} value={type} data={types} onChange={this.genHandle('type')} />
          <Property.OSelect label="原始下拉" style={{ width: '100%', height: '100%' }} value={type} data={types} onChange={this.genHandle('type')} />
          <Property.Slider label="强度" style={{ width: '100%' }} value={strength} onChange={this.genHandle('strength')} {...strengthProp} />
          <Property.InputNumber label="数字输入" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} />
          <Property.InputNumber label="数字输入2" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} type="outer" />
          <Property.InputNumber label="数字输入3" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} type="nocontrol" />
          <Property.Button onChange={this.genClickHandle('execute')}>执行</Property.Button>
        </Property.Group>
        <JsonView value={this.state} style={{ width: '25em', marginTop: '1em', minHeight: '13em' }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### Property 自定义使用

使用 通用的 Form 表单组件

---demo
```js
import { JsonView, Property, Input, Checkbox, Switch, CustomColor } from 'amos-framework';

const style = {
  height: '26px',
  lineHeight: '22px'
};

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nick: '',
      name: '',
      enable: false,
      status: false,
      color: '',
    };
  }


  genHandle = (key) => {
    return function(value){
      this.setState({
        [key]: value
      });
    }.bind(this);
  }

  genEventHandle = (key) => {
    return function(event){
      this.setState({
        [key]: event.target.value
      });
    }.bind(this);
  }

  genCheckedHandle = (key) => {
    return function(event){
      this.setState({
        [key]: event.target.checked
      });
    }.bind(this);
  }

  genClickHandle = (key) => {
    return function(event){
      console.log('click', key);
    }.bind(this);
  }

  render() {
    const { nick, name, enable, status, color } = this.state;
    return (
      <div style={{ width: '25em' }}>
        <Property.Group title="基本信息配置" expanded={false}>
          <Input label="名称" style={{ width: '100%' }} value={name} onChange={this.genEventHandle('name')} />
          <Checkbox label="启用" style={{ width: '100%' }} checked={enable} onChange={this.genCheckedHandle('enable')} />
          <Switch label="开关状态" onOff={status} onLabel="开" offLabel="关" onChange={this.genHandle('status')} />
          <CustomColor label="背景色" value={color} onChange={this.genHandle('color')} style={style} />
        </Property.Group>
        <JsonView value={this.state} style={{ width: '25em', marginTop: '1em', minHeight: '13em' }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Property 多组使用

多组案例

可以采用 `Property.Grid` 进行包裹，也可以使用自定义的容器进行包裹

---demo
```js
import { JsonView, Property } from 'amos-framework';

const sexs = [
  { key: 'male', label: '男' },
  { key: 'female', label: '女' },
  { key: 'unknown', label: '未知', disabled: true },
];

const types = [
  { key: 'A', label: 'A类' },
  { key: 'B', label: 'B类' },
  { key: 'C', label: 'C类' },
];

const strengthProp = {
  min: 0,
  max: 100,
  step: 1
};

const numProp = {
  min: 1,
  max: 200,
  step: 1
};

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nick: '',
      name: '',
      enable: false,
      status: false,
      color: '',
      sex: 'female',
      type: 'A',
      strength: 10,
      num: 30
    };
  }

  genHandle = (key) => {
    return function(value){
      this.setState({
        [key]: value
      });
    }.bind(this);
  }

  genClickHandle = (key) => {
    return function(event){
      console.log('click', key);
    }.bind(this);
  }

  render() {
    const { nick, name, enable, status, color, sex, type, strength, num } = this.state;
    return (
      <div style={{ width: '25em' }}>
        <Property.Grid>
          <Property.Group title="基本信息配置" expanded={false}>
            <Property.Input label="昵称" style={{ width: '100%' }} value={nick} onChange={this.genHandle('nick')} />
            <Property.Input label="名称" style={{ width: '100%' }} value={name} onChange={this.genHandle('name')} />
          </Property.Group>
          <Property.Group title="基本信息配置2" expanded={false}>
            <Property.Checkbox label="启用" style={{ width: '100%' }} checked={enable} onChange={this.genHandle('enable')} />
            <Property.Switch label="开关状态" onOff={status} onLabel="开" offLabel="关" onChange={this.genHandle('status')} />
            <Property.Radio label="性别" value={sex} datas={sexs} onChange={this.genHandle('sex')} />
            <Property.Color label="背景色" value={color} onChange={this.genHandle('color')} />
          </Property.Group>
          <Property.Group title="质量信息配置" expanded={false}>
            <Property.Select label="类型" style={{ width: '100%' }} value={type} data={types} onChange={this.genHandle('type')} />
            <Property.Slider label="强度" style={{ width: '100%' }} value={strength} onChange={this.genHandle('strength')} {...strengthProp} />
          </Property.Group>
          <Property.Group title="数字信息配置" expanded={false}>
            <Property.InputNumber label="数字输入" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} />
            <Property.InputNumber label="数字输入2" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} type="outer" />
            <Property.InputNumber label="数字输入3" style={{ width: '100%' }} value={num} onChange={this.genHandle('num')} {...numProp} type="nocontrol" />
            <Property.Button onChange={this.genClickHandle('execute')}>执行</Property.Button>
          </Property.Group>
        </Property.Grid>
        <JsonView value={this.state} style={{ width: '25em', marginTop: '1em', minHeight: '13em' }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Property Group 嵌套使用

---demo
```js
import { JsonView, Property } from 'amos-framework';

const sexs = [
  { key: 'male', label: '男' },
  { key: 'female', label: '女' },
  { key: 'unknown', label: '未知', disabled: true },
];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nick: '',
      name: '',
      enable: false,
      status: false,
      sex: 'female',
      color: ''
    };
  }

  genHandle = (key) => {
    return function(value){
      this.setState({
        [key]: value
      });
    }.bind(this);
  }

  render() {
    const { nick, name, enable, status, sex, color } = this.state;
    return (
      <div style={{ width: '25em' }}>
        <Property.Group title="基本信息配置" expanded={false}>
          <Property.Input label="昵称" style={{ width: '100%' }} value={nick} onChange={this.genHandle('nick')} />
          <Property.Input label="名称" style={{ width: '100%' }} value={name} onChange={this.genHandle('name')} />
          <Property.Group title="状态信息配置" expanded={false}>
            <Property.Checkbox label="启用" style={{ width: '100%' }} checked={enable} onChange={this.genHandle('enable')} />
            <Property.Switch label="开关状态" onOff={status} onLabel="开" offLabel="关" onChange={this.genHandle('status')} />
          </Property.Group>
          <Property.Radio label="性别" value={sex} datas={sexs} onChange={this.genHandle('sex')} />
          <Property.Color label="背景色" value={color} onChange={this.genHandle('color')} />
        </Property.Group>
        <JsonView value={this.state} style={{ width: '25em', marginTop: '1em', minHeight: '13em' }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

### Property.Grid

可以用做多个 `Property.Group` 的父层级。

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `property-grid` | css class 前缀 |
| className | string | - | css class |
| style | Object | - | 自定义样式 |
| children | ReactNode | - | 内容区 |

### Property.Group

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `property-group` | css class 前缀 |
| className | string | - | css class |
| style | Object | - | 自定义样式 |
| children | ReactNode | - | 内容区 |
| title | string | - | 组标题内容 |
| show | bool | true | 是否显示 |
| expanded | bool | true | 是否展开 |
| onExpand | function | true | 展开回调，参数为当前展开状态，无需进行同步 |

## 支持的内置属性组件

```js
Property.Grid;
Property.Group;
Property.Button;
Property.Radio;
Property.Color;
Property.Select;
Property.OSelect;
Property.Slider;
Property.Input;
Property.Checkbox;
Property.Switch;
Property.InputNumber;
```