# 可编辑文本 Editable

点击文本直接进行编辑

## 案例演示

### Editable 基本功能

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="点击修改试试" onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 双击修改

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="双击修改试试" editMode="dbclick" onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 禁用

---demo
```js
import { Editable } from 'amos-framework';

ReactDOM.render((
  <Editable defaultValue="我被禁用了，点击无效" disabled />
), _react_runner_);
```
---demoend

### Editable 默认可直接修改

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="默认可直接修改" defaultEditing onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 设置确定取消按钮props

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

const buttonProps = {
  transparent: true,
  size: 'sm',
  style: {
    margin: 0
  }
};

ReactDOM.render((
  <Editable defaultValue="点击修改试试" onChange={onChange} useOnBlur={false} buttonProps={buttonProps} />
), _react_runner_);
```
---demoend

### Editable 不显示确定与取消按钮

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="点击修改试试" showOkCancel={false} onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 不显示编辑按钮

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="点击修改试试" editIcon={false} onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 禁用onBlur

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

ReactDOM.render((
  <Editable defaultValue="点击修改试试" editIcon={false} useOnBlur={false} onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 内容区props

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

const textOverFlow = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  display: 'inline-block',
  width: '6em'
};

ReactDOM.render((
  <Editable defaultValue="点击修改试试" innerValueStyle={textOverFlow} onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 设置size

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

const textOverFlow = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  display: 'inline-block',
  width: '6em'
};

ReactDOM.render((
  <Editable defaultValue="点击修改试试" size="sm" innerValueStyle={textOverFlow} onChange={onChange} />
), _react_runner_);
```
---demoend

### Editable 设置size,特殊btn

---demo
```js
import { Editable } from 'amos-framework';

function onChange(value){
  console.log(value);
}

const textOverFlow = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  display: 'inline-block',
  width: '6em'
};

const specialBtn = {
  size: 'lg'
};

ReactDOM.render((
  <Editable defaultValue="点击修改试试" size="sm" innerValueStyle={textOverFlow} buttonProps={specialBtn} onChange={onChange} />
), _react_runner_);
```
---demoend

## API

### Button

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-editable` | css class 前缀 |
| className | string | - | css class |
| innerClassName | string | - | 内部class name |
| size | string | - | 按钮尺寸，除默认外可选值：sm、lg (其中默认值无需设置) 统一设置 input、button、 非编辑状态 |
| editMode | string | `click` | 修改模式，单击或者双击进行修改， 默认单击 |
| tip | number or string | - | 自定义提示 |
| value | string | - | 待编辑的值 |
| defaultValue | string | - | 初始化待编辑的值（不可控） |
| onChange | func | - | 确定后的回调，参数为当前值 |
| onCancel | func | - | 取消后的回调 |
| defaultEditing | bool | - | 初始化时是否处于编辑状态（不可控） |
| okIcon | string | `check` | 编辑时确认按钮icon |
| closeIcon | string | `cancel` | 编辑时取消按钮icon |
| buttonProps | object | `{}` | 设置确定与取消按钮props |
| inputProps | object | `{}` | 设置编辑框props |
| showOkCancel | bool | true | 显示确定取消按钮 |
| useOnBlur | bool | true | 是否启用input 的onblur, 默认启用 |
| innerValueStyle | object | `{}` | 非编辑状态下内容wrapper style |
| editIcon | bool or string | `edit` | 鼠标悬浮时显示的编辑图标, 如果不需要，则设置 editIcon=false. |
| disabled | bool | - | 是否禁用 |