This commit is contained in:
afc163 2017-02-23 11:45:48 +08:00
parent 922a57dfde
commit 0f46eed370
10 changed files with 126 additions and 121 deletions

View File

@ -36,7 +36,6 @@ const eslintrc = {
'consistent-return': 0,
'no-redeclare': 0,
'react/require-extension': 0,
'react/jsx-indent': 0,
'jsx-a11y/no-static-element-interactions': 0,
'jsx-a11y/anchor-has-content': 0,
'react/no-danger': 0,

View File

@ -72,7 +72,7 @@ class TimeRelatedForm extends React.Component {
{...formItemLayout}
label="DatePicker[showTime]"
>
{getFieldDecorator('date-time-picker', config)(
{getFieldDecorator('date-time-picker', config)(
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
)}
</FormItem>
@ -80,7 +80,7 @@ class TimeRelatedForm extends React.Component {
{...formItemLayout}
label="MonthPicker"
>
{getFieldDecorator('month-picker', config)(
{getFieldDecorator('month-picker', config)(
<MonthPicker />
)}
</FormItem>
@ -88,7 +88,7 @@ class TimeRelatedForm extends React.Component {
{...formItemLayout}
label="RangePicker"
>
{getFieldDecorator('range-picker', rangeConfig)(
{getFieldDecorator('range-picker', rangeConfig)(
<RangePicker />
)}
</FormItem>
@ -96,7 +96,7 @@ class TimeRelatedForm extends React.Component {
{...formItemLayout}
label="RangePicker[showTime]"
>
{getFieldDecorator('range-time-picker', rangeConfig)(
{getFieldDecorator('range-time-picker', rangeConfig)(
<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
)}
</FormItem>
@ -104,7 +104,7 @@ class TimeRelatedForm extends React.Component {
{...formItemLayout}
label="TimePicker"
>
{getFieldDecorator('time-picker', config)(
{getFieldDecorator('time-picker', config)(
<TimePicker />
)}
</FormItem>

View File

@ -18,40 +18,40 @@ import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
ReactDOM.render(
<div>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
<Layout>
<Header>Header</Header>
<div>
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout>
<Header>Header</Header>
<Layout>
<Content>Content</Content>
<Sider>Sider</Sider>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout>
<Sider>Sider</Sider>
<Content>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Content>
</Layout>
</div>
</Layout>
<Layout>
<Header>Header</Header>
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout>
<Header>Header</Header>
<Layout>
<Content>Content</Content>
<Sider>Sider</Sider>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout>
<Sider>Sider</Sider>
<Content>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Content>
</Layout>
</div>
, mountNode);
````

View File

@ -17,20 +17,20 @@ You can show the total number of data by setting `showTotal`.
import { Pagination } from 'antd';
ReactDOM.render(
<div>
<Pagination
total={85}
showTotal={total => `Total ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
<br />
<Pagination
total={85}
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
</div>
<div>
<Pagination
total={85}
showTotal={total => `Total ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
<br />
<Pagination
total={85}
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
pageSize={20}
defaultCurrent={1}
/>
</div>
, mountNode);
````

View File

@ -36,32 +36,34 @@ class EditableCell extends React.Component {
}
render() {
const { value, editable } = this.state;
return (<div className="editable-cell">
{
editable ?
<div className="editable-cell-input-wrapper">
<Input
value={value}
onChange={this.handleChange}
onPressEnter={this.check}
/>
<Icon
type="check"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
:
<div className="editable-cell-text-wrapper">
{value || ' '}
<Icon
type="edit"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
}
</div>);
return (
<div className="editable-cell">
{
editable ?
<div className="editable-cell-input-wrapper">
<Input
value={value}
onChange={this.handleChange}
onPressEnter={this.check}
/>
<Icon
type="check"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
:
<div className="editable-cell-text-wrapper">
{value || ' '}
<Icon
type="edit"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
}
</div>
);
}
}
@ -142,10 +144,12 @@ class EditableTable extends React.Component {
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (<div>
<Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
<Table bordered dataSource={dataSource} columns={columns} />
</div>);
return (
<div>
<Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
<Table bordered dataSource={dataSource} columns={columns} />
</div>
);
}
}
@ -189,7 +193,7 @@ ReactDOM.render(<EditableTable />, mountNode);
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color:#2db7f5;
color: #108ee9;
}
.editable-add-btn {

View File

@ -47,21 +47,23 @@ class EditableCell extends React.Component {
}
render() {
const { value, editable } = this.state;
return (<div>
{
editable ?
<div>
<Input
value={value}
onChange={e => this.handleChange(e)}
/>
</div>
:
<div className="editable-row-text">
{value.toString() || ' '}
</div>
}
</div>);
return (
<div>
{
editable ?
<div>
<Input
value={value}
onChange={e => this.handleChange(e)}
/>
</div>
:
<div className="editable-row-text">
{value.toString() || ' '}
</div>
}
</div>
);
}
}
@ -88,21 +90,23 @@ class EditableTable extends React.Component {
dataIndex: 'operation',
render: (text, record, index) => {
const { editable } = this.state.data[index].name;
return (<div className="editable-row-operations">
{
editable ?
<span>
<a onClick={() => this.editDone(index, 'save')}>Save</a>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.editDone(index, 'cancel')}>
<a>Cancel</a>
</Popconfirm>
</span>
:
<span>
<a onClick={() => this.edit(index)}>Edit</a>
</span>
}
</div>);
return (
<div className="editable-row-operations">
{
editable ?
<span>
<a onClick={() => this.editDone(index, 'save')}>Save</a>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.editDone(index, 'cancel')}>
<a>Cancel</a>
</Popconfirm>
</span>
:
<span>
<a onClick={() => this.edit(index)}>Edit</a>
</span>
}
</div>
);
},
}];
this.state = {

View File

@ -88,7 +88,7 @@ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Micros
<p class="font-text">
<a href="#">
<span>我是链接文字</span>
<span>#2db7f5</span>
<span>#108ee9</span>
<span>12px</span>
</a>
</p>
@ -151,7 +151,7 @@ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Micros
<p class="font-text">
<a href="#">
<span>I am example text</span>
<span>#2db7f5</span>
<span>#108ee9</span>
<span>12px</span>
</a>
</p>

View File

@ -131,7 +131,7 @@
"rimraf": "^2.5.4",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",
"typescript": "^2.1.6",
"typescript": "~2.1.6",
"typescript-babel-jest": "^0.1.5",
"values.js": "^1.0.3",
"xhr2": "^0.1.3"

View File

@ -69,7 +69,7 @@ export default class Article extends React.Component {
{title[locale] || title}
{
!subtitle || locale === 'en-US' ? null :
<span className="subtitle">{subtitle}</span>
<span className="subtitle">{subtitle}</span>
}
<EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={filename} />
</h1>
@ -81,7 +81,7 @@ export default class Article extends React.Component {
}
{
(!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
<section className="toc">{props.utils.toReactComponent(content.toc)}</section>
<section className="toc">{props.utils.toReactComponent(content.toc)}</section>
}
{
this.getArticle(props.utils.toReactComponent(

View File

@ -86,8 +86,7 @@ export default class ComponentDoc extends React.Component {
<h1>
{title[locale] || title}
{
!subtitle ? null :
<span className="subtitle">{subtitle}</span>
!subtitle ? null : <span className="subtitle">{subtitle}</span>
}
<EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={filename} />
</h1>
@ -114,8 +113,7 @@ export default class ComponentDoc extends React.Component {
{leftChildren}
</Col>
{
isSingleCol ? null :
<Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
isSingleCol ? null : <Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
}
</Row>
{