Skip to content

Commit

Permalink
textarea-item translation, ref ant-design#329 (ant-design#1314)
Browse files Browse the repository at this point in the history
* textarea-item translation, ref ant-design#329
  • Loading branch information
silentcloud authored and lixiaoyang1992 committed Apr 26, 2018
1 parent 1eaf87a commit a387acf
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 75 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
标题字数
Number of words for title
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -198,7 +198,7 @@ exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
标题可自定义(文字 / 图片 / 无标题)
Custom title(text / image / empty)
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -247,7 +247,7 @@ exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
右侧注释可自定义
Customize the extra content in the right
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -286,7 +286,7 @@ exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
格式
Format
</div>
<div
class="am-list-body"
Expand Down
8 changes: 4 additions & 4 deletions components/input-item/demo/basic.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,15 @@ class BasicInputExample extends React.Component {
>标题</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => '标题字数'}>
<List renderHeader={() => 'Number of words for title'}>
<InputItem
{...getFieldProps('label8')}
placeholder="limited title length"
labelNumber={5}
>标题过长超过默认的5个字</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => '标题可自定义(文字 / 图片 / 无标题)'}>
<List renderHeader={() => 'Custom title(text / image / empty)'}>
<InputItem
{...getFieldProps('input3')}
placeholder="no label"
Expand All @@ -96,15 +96,15 @@ class BasicInputExample extends React.Component {
</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => '右侧注释可自定义'}>
<List renderHeader={() => 'Customize the extra content in the right'}>
<InputItem
{...getFieldProps('preice')}
placeholder="0.00"
extra="¥"
>价格</InputItem>
</List>
<WhiteSpace />
<List renderHeader={() => '格式'}>
<List renderHeader={() => 'Format'}>
<InputItem
{...getFieldProps('bankCard', {
initialValue: '8888 8888 8888 8888',
Expand Down
8 changes: 4 additions & 4 deletions components/input-item/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ Support WEB, React-Native.
Properties | Descrition | Type | Default
-----------|------------|------|--------
| type | the type of `InputItem` which is one of `bankCard`, `phone`(which the maxLength is 11 and setting will be ignored), `password`, `number`, `text` | String | `text` |
| value | the value of input (see https://facebook.github.io/react/docs/forms.html for more information about controled component) | String | |
| defaultValue | the initial input content | String | - |
| placeholder | placeholder | String | '' |
| value | the value of input (see [react doc](https://facebook.github.io/react/docs/forms.html) for more information about controled component) | String | |
| defaultValue | provides an initial value that will change when the user starts typing. | String | - |
| placeholder | the string that will be rendered before text input has been entered. | String | '' |
| editable | whether is editable | bool | true |
| disabled | whether is disabled | bool | false |
| clear | whether to display clear icon(it takes effect only `editable` is `true` or `disabled` is `false` or `value` has been set) | bool | false |
Expand All @@ -34,7 +34,7 @@ Properties | Descrition | Type | Default
| extra | the right content of `InputItem` | string or node | '' |
| onExtraClick | callback that is called when the extra content is clicked | (e: Object): void | |
| labelNumber | number of label text, valid value is 2 to 7 | number | `5` |
| autoFocus | whether to focus the input on `componentDidMount`, each page has only one `Input` can be auto focus.(Note: It is no guarantee that all browsers are supported) | bool | false |
| autoFocus | whether to focus the input on `componentDidMount`, each page has only one `Input` can be auto focused.(Note: It is no guarantee that all browsers are supported) | bool | false |
| focused | whether the `InputItem` has been focused on `componentDidMount`, you need to change this property on `onFocus` or `onBlur` callback | bool | false |
| updatePlaceholder (`web only`) | whether to replace the placeholder with cleared content | bool | false|
| prefixListCls (`web only`) | the class name prefix of list | String | `am-list` |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
自定义获取光标
Customize to focus
</div>
<div
class="am-list-body"
Expand All @@ -26,7 +26,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
>
<textarea
data-seed="logId"
placeholder="自动获取光标,支付宝客户端有效"
placeholder="auto focus in Alipay client"
rows="1"
/>
</div>
Expand All @@ -44,7 +44,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
>
<textarea
data-seed="logId"
placeholder="点击下方按钮该输入框会获取光标"
placeholder="click the button below to focus"
rows="1"
/>
</div>
Expand All @@ -61,7 +61,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
style="width:100%;color:#108ee9;text-align:center;"
>
点击获取光标
click to focus
</div>
</div>
</div>
Expand All @@ -81,7 +81,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
受控 / 非受控
Whether is controlled
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -115,7 +115,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
class="am-textarea-control"
>
<textarea
placeholder="请输入内容"
placeholder="please input content"
rows="1"
/>
</div>
Expand All @@ -128,7 +128,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
高度自适应 / 固定
Auto / Fixed height
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -157,7 +157,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
class="am-textarea-control"
>
<textarea
placeholder="固定行数,rows"
placeholder="fixed number of lines"
rows="3"
/>
</div>
Expand All @@ -173,7 +173,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
带清除按钮
Show clear icon
</div>
<div
class="am-list-body"
Expand All @@ -190,7 +190,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
class="am-textarea-control"
>
<textarea
placeholder="输入会显示清除按钮"
placeholder="displayed clear icon while typing"
rows="1"
/>
</div>
Expand All @@ -206,7 +206,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
标题可自定义(文字 / 图片 / 无标题
Custom title(text / image / empty
</div>
<div
class="am-list-body"
Expand All @@ -227,7 +227,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
class="am-textarea-control"
>
<textarea
placeholder="标题可以自定义"
placeholder="title can be customized"
rows="1"
/>
</div>
Expand All @@ -243,7 +243,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
限制输入字符数量
Limited value length
</div>
<div
class="am-list-body"
Expand All @@ -256,7 +256,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
>
<textarea
maxlength="10"
placeholder="最多输入10个字符"
placeholder="can enter up to 10 characters"
rows="1"
/>
</div>
Expand All @@ -272,7 +272,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
带计数
Count
</div>
<div
class="am-list-body"
Expand Down Expand Up @@ -311,7 +311,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
<div
class="am-list-header"
>
不可编辑 / 禁用
Not editable / Disabled
</div>
<div
class="am-list-body"
Expand All @@ -332,7 +332,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
readonly=""
rows="1"
>
不可编辑
not editable
</textarea>
</div>
</div>
Expand All @@ -352,7 +352,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
placeholder=""
rows="1"
>
这个是禁用的样式
disabled style
</textarea>
</div>
</div>
Expand Down
44 changes: 25 additions & 19 deletions components/textarea-item/demo/basic.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ title:
en-US: Basic
---

([rc-form 文档](https://github.com/react-component/form))
## zh-CN

受控组件建议使用([rc-form ](https://github.com/react-component/form))

## en-US

Recommended use of [rc-form ](https://github.com/react-component/form) for controlled component.

````jsx
import { List, TextareaItem, WhiteSpace } from 'antd-mobile';
Expand All @@ -19,17 +25,17 @@ class TextareaItemExample extends React.Component {
const { getFieldProps } = this.props.form;
return (
<div>
<List renderHeader={() => '自定义获取光标'}>
<List renderHeader={() => 'Customize to focus'}>
<TextareaItem
title="标题"
placeholder="自动获取光标,支付宝客户端有效"
placeholder="auto focus in Alipay client"
data-seed="logId"
autoFocus
autoHeight
/>
<TextareaItem
title="标题"
placeholder="点击下方按钮该输入框会获取光标"
placeholder="click the button below to focus"
data-seed="logId"
autoHeight
focused={this.state.focused}
Expand All @@ -48,12 +54,12 @@ class TextareaItemExample extends React.Component {
});
}}
>
点击获取光标
click to focus
</div>
</List.Item>
</List>
<WhiteSpace />
<List renderHeader={() => '受控 / 非受控'}>
<List renderHeader={() => 'Whether is controlled'}>
<TextareaItem
{...getFieldProps('control')}
title="受控组件"
Expand All @@ -62,10 +68,10 @@ class TextareaItemExample extends React.Component {
<TextareaItem
{...getFieldProps('control')}
title="非受控组件"
placeholder="请输入内容"
placeholder="please input content"
/>
</List>
<List renderHeader={() => '高度自适应 / 固定'}>
<List renderHeader={() => 'Auto / Fixed height'}>
<TextareaItem
{...getFieldProps('note3')}
title="高度自适应"
Expand All @@ -75,36 +81,36 @@ class TextareaItemExample extends React.Component {
<TextareaItem
{...getFieldProps('note1')}
rows={3}
placeholder="固定行数,rows"
placeholder="fixed number of lines"
/>
</List>
<WhiteSpace />
<List renderHeader={() => '带清除按钮'}>
<List renderHeader={() => 'Show clear icon'}>
<TextareaItem
{...getFieldProps('clear1')}
clear
title="标题"
placeholder="输入会显示清除按钮"
placeholder="displayed clear icon while typing"
/>
</List>
<WhiteSpace />
<List renderHeader={() => '标题可自定义(文字 / 图片 / 无标题'}>
<List renderHeader={() => 'Custom title(text / image / empty'}>
<TextareaItem
{...getFieldProps('title3')}
title={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" alt="icon" style={{ width: '0.56rem', height: '0.56rem' }} />}
placeholder="标题可以自定义"
placeholder="title can be customized"
/>
</List>
<WhiteSpace />
<List renderHeader={() => '限制输入字符数量'}>
<List renderHeader={() => 'Limited value length'}>
<TextareaItem
{...getFieldProps('note4')}
placeholder="最多输入10个字符"
placeholder="can enter up to 10 characters"
count={10}
/>
</List>
<WhiteSpace />
<List renderHeader={() => '带计数'}>
<List renderHeader={() => 'Count'}>
<TextareaItem
{...getFieldProps('count', {
initialValue: '计数功能,我的意见是...',
Expand All @@ -114,16 +120,16 @@ class TextareaItemExample extends React.Component {
/>
</List>
<WhiteSpace />
<List renderHeader={() => '不可编辑 / 禁用'}>
<List renderHeader={() => 'Not editable / Disabled'}>
<TextareaItem
{...getFieldProps('note6', {
initialValue: '不可编辑',
initialValue: 'not editable',
})}
title="姓名"
editable={false}
/>
<TextareaItem
value="这个是禁用的样式"
value="disabled style"
title="姓名"
disabled
/>
Expand Down
Loading

0 comments on commit a387acf

Please sign in to comment.