mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
upgrade eslint-config-airbnb version and fix some problems
This commit is contained in:
parent
ce123137e3
commit
03cb74ead5
@ -30,6 +30,8 @@ const eslintrc = {
|
||||
'react/sort-comp': 0,
|
||||
'react/prop-types': 0,
|
||||
'react/jsx-closing-bracket-location': 0,
|
||||
'react/jsx-first-prop-new-line': 0,
|
||||
'import/no-unresolved': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-return-assign': 0,
|
||||
'max-len': 0,
|
||||
|
@ -9,6 +9,6 @@ title: 自定义关闭
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
|
||||
<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -12,55 +12,54 @@ import { Button, Icon } from 'antd';
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<h4>基本组合</h4>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">确定</Button>
|
||||
<Button type="primary">取消</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button disabled>左</Button>
|
||||
<Button disabled>中</Button>
|
||||
<Button disabled>右</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">左</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button>右</Button>
|
||||
</ButtonGroup>
|
||||
<h4>基本组合</h4>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">确定</Button>
|
||||
<Button type="primary">取消</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button disabled>左</Button>
|
||||
<Button disabled>中</Button>
|
||||
<Button disabled>右</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">左</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button type="ghost">中</Button>
|
||||
<Button>右</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>带图标按钮组合</h4>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">
|
||||
<Icon type="left" />后退
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
前进<Icon type="right" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
<h4>带图标按钮组合</h4>
|
||||
<ButtonGroup>
|
||||
<Button type="primary">
|
||||
<Icon type="left" />后退
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
前进<Icon type="right" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>尺寸</h4>
|
||||
<ButtonGroup size="large">
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup size="small">
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
, mountNode);
|
||||
<h4>尺寸</h4>
|
||||
<ButtonGroup size="large">
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
<Button type="ghost">大</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
<Button type="ghost">默认</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup size="small">
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
<Button type="ghost">小</Button>
|
||||
</ButtonGroup>
|
||||
</div>, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -40,13 +40,13 @@ export default class Header extends React.Component {
|
||||
return (
|
||||
<Select
|
||||
style={{ width: 75 }}
|
||||
size={ fullscreen ? null : 'small' }
|
||||
size={fullscreen ? null : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownMenuStyle={{ minWidth: 103 }}
|
||||
className={`${prefixCls}-year-select`}
|
||||
onChange={this.onYearChange}
|
||||
value={String(year)}>
|
||||
{ options }
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
@ -65,12 +65,12 @@ export default class Header extends React.Component {
|
||||
<Select
|
||||
style={{ minWidth: 70 }}
|
||||
dropdownMenuStyle={{ minWidth: 125 }}
|
||||
size={ fullscreen ? null : 'small' }
|
||||
size={fullscreen ? null : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
className={`${prefixCls}-month-select`}
|
||||
value={String(month)}
|
||||
onChange={this.onMonthChange}>
|
||||
{ options }
|
||||
{options}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
@ -104,9 +104,9 @@ export default class Header extends React.Component {
|
||||
|
||||
return (
|
||||
<div className={`${prefixCls}-header`}>
|
||||
{ yearSelect }
|
||||
{ monthSelect }
|
||||
{ typeSwitch }
|
||||
{yearSelect}
|
||||
{monthSelect}
|
||||
{typeSwitch}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -31,12 +31,12 @@ const optionsWithDisabled = [
|
||||
];
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
|
||||
<br />
|
||||
<CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
|
||||
<br />
|
||||
<CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
|
||||
</div>
|
||||
<div>
|
||||
<CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
|
||||
<br />
|
||||
<CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
|
||||
<br />
|
||||
<CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -13,6 +13,6 @@ function onChange(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
|
||||
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -28,7 +28,7 @@ export default class FormItem extends React.Component {
|
||||
form: React.PropTypes.object,
|
||||
}
|
||||
|
||||
_getLayoutClass(colDef) {
|
||||
getLayoutClass(colDef) {
|
||||
if (!colDef) {
|
||||
return '';
|
||||
}
|
||||
@ -132,7 +132,7 @@ export default class FormItem extends React.Component {
|
||||
renderWrapper(children) {
|
||||
const wrapperCol = this.props.wrapperCol;
|
||||
return (
|
||||
<div className={this._getLayoutClass(wrapperCol)} key="wrapper">
|
||||
<div className={this.getLayoutClass(wrapperCol)} key="wrapper">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@ -158,7 +158,7 @@ export default class FormItem extends React.Component {
|
||||
props.required;
|
||||
|
||||
const className = classNames({
|
||||
[this._getLayoutClass(labelCol)]: true,
|
||||
[this.getLayoutClass(labelCol)]: true,
|
||||
[`${props.prefixCls}-item-required`]: required,
|
||||
});
|
||||
|
||||
|
@ -12,76 +12,76 @@ import { Form, Input, Row, Col, Button, DatePicker } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
ReactDOM.render(
|
||||
<Form horizontal className="ant-advanced-search-form">
|
||||
<Row gutter={16}>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12} offset={12} style={{ textAlign: 'right' }}>
|
||||
<Button type="primary" htmlType="submit">搜索</Button>
|
||||
<Button>清除条件</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<Form horizontal className="ant-advanced-search-form">
|
||||
<Row gutter={16}>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col sm={8}>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="较长搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<DatePicker size="default" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="搜索名称:"
|
||||
labelCol={{ span: 10 }}
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input placeholder="请输入搜索名称" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12} offset={12} style={{ textAlign: 'right' }}>
|
||||
<Button type="primary" htmlType="submit">搜索</Button>
|
||||
<Button>清除条件</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
@ -59,7 +59,7 @@ let Demo = React.createClass({
|
||||
});
|
||||
return (
|
||||
<Form horizontal form={this.props.form}>
|
||||
{ formItems }
|
||||
{formItems}
|
||||
<Form.Item wrapperCol={{ span: 18, offset: 6 }}>
|
||||
<Button onClick={this.add}>新增好朋友</Button>
|
||||
|
||||
|
@ -13,6 +13,6 @@ function onChange(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
|
||||
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -13,6 +13,6 @@ function onChange(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<InputNumber min={1} max={10} step={0.1} onChange={onChange} />
|
||||
<InputNumber min={1} max={10} step={0.1} onChange={onChange} />
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -13,16 +13,16 @@ function onChange(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
<InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
</div>
|
||||
<div>
|
||||
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
<InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-input-number{
|
||||
.ant-input-number {
|
||||
margin-right: 10px;
|
||||
}
|
||||
````
|
||||
|
@ -68,12 +68,12 @@ const Page = React.createClass({
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div className="example">
|
||||
<Transfer
|
||||
dataSource={[]}
|
||||
showSearch
|
||||
titles={['', '']}
|
||||
targetKeys={[]}
|
||||
render={item => item.title} />
|
||||
<Transfer
|
||||
dataSource={[]}
|
||||
showSearch
|
||||
titles={['', '']}
|
||||
targetKeys={[]}
|
||||
render={item => item.title} />
|
||||
</div>
|
||||
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||
<Calendar fullscreen={false} />
|
||||
|
@ -1,8 +1,13 @@
|
||||
import Pagination from 'rc-pagination/lib/locale/en_US';
|
||||
import DatePicker from '../date-picker/locale/en_US';
|
||||
import TimePicker from '../time-picker/locale/en_US';
|
||||
import Calendar from '../calendar/locale/en_US';
|
||||
|
||||
export default {
|
||||
Pagination: require('rc-pagination/lib/locale/en_US'),
|
||||
DatePicker: require('../date-picker/locale/en_US'),
|
||||
TimePicker: require('../time-picker/locale/en_US'),
|
||||
Calendar: require('../calendar/locale/en_US'),
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
Table: {
|
||||
filterTitle: 'Filter Menu',
|
||||
filterConfirm: 'OK',
|
||||
|
@ -2,11 +2,16 @@
|
||||
* Created by Andrey Gayvoronsky on 13/04/16.
|
||||
*/
|
||||
|
||||
import Pagination from 'rc-pagination/lib/locale/ru_RU';
|
||||
import DatePicker from '../date-picker/locale/ru_RU';
|
||||
import TimePicker from '../time-picker/locale/ru_RU';
|
||||
import Calendar from '../calendar/locale/ru_RU';
|
||||
|
||||
export default {
|
||||
Pagination: require('rc-pagination/lib/locale/ru_RU'),
|
||||
DatePicker: require('../date-picker/locale/ru_RU'),
|
||||
TimePicker: require('../time-picker/locale/ru_RU'),
|
||||
Calendar: require('../calendar/locale/ru_RU'),
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
Table: {
|
||||
filterTitle: 'Фильтр',
|
||||
filterConfirm: 'OK',
|
||||
@ -29,4 +34,3 @@ export default {
|
||||
itemsUnit: 'items',
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -23,7 +23,8 @@ function showConfirm() {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
</Button>, mountNode);
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
</Button>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -21,7 +21,8 @@ function showConfirm() {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
</Button>, mountNode);
|
||||
<Button onClick={showConfirm}>
|
||||
确认对话框
|
||||
</Button>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -8,7 +8,7 @@ title: 受控
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
let Container = React.createClass({
|
||||
const Container = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
current: 3
|
||||
@ -25,8 +25,5 @@ let Container = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Container />,
|
||||
mountNode);
|
||||
ReactDOM.render(<Container />, mountNode);
|
||||
````
|
||||
|
||||
|
@ -10,10 +10,10 @@ import { Popover, Button } from 'antd';
|
||||
|
||||
const text = <span>标题</span>;
|
||||
const content = (
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>内容</p>
|
||||
<p>内容</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
|
@ -10,10 +10,10 @@ import { Progress } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Progress type="circle" percent={75} format={percent => `${percent / 10.0}折` } />
|
||||
<Progress type="circle" percent={75} format={percent => `${percent / 10.0}折`} />
|
||||
<Progress type="circle" percent={100} format={() => '成功'} />
|
||||
</div>
|
||||
, mountNode);
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -49,14 +49,14 @@ const Test = React.createClass({
|
||||
<Button onClick={this.onRemove} style={{ marginLeft: 10 }}>删除</Button>
|
||||
</p>
|
||||
<div className="demo-content">
|
||||
<div className="demo-listBox" key="b">
|
||||
<div className="demo-list">
|
||||
<div className="title"></div>
|
||||
<QueueAnim component="ul" type={['right', 'left']}>
|
||||
{this.state.show ? this.state.items : null}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
<div className="demo-listBox" key="b">
|
||||
<div className="demo-list">
|
||||
<div className="title"></div>
|
||||
<QueueAnim component="ul" type={['right', 'left']}>
|
||||
{this.state.show ? this.state.items : null}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -30,7 +30,7 @@ const Test = React.createClass({
|
||||
</div>,
|
||||
<div className="demo-listBox" key="b">
|
||||
<div className="demo-list">
|
||||
<div className="title"></div>
|
||||
<div className="title"></div>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
|
@ -13,10 +13,10 @@ function log(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Slider defaultValue={30} onChange={log} />
|
||||
<Slider range step={10} defaultValue={[20, 50]} onChange={log} />
|
||||
<Slider defaultValue={30} onAfterChange={log} />
|
||||
</div>
|
||||
<div>
|
||||
<Slider defaultValue={30} onChange={log} />
|
||||
<Slider range step={10} defaultValue={[20, 50]} onChange={log} />
|
||||
<Slider defaultValue={30} onAfterChange={log} />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -41,7 +41,7 @@ const IconSlider = React.createClass({
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<IconSlider min={0} max={20} value={0} icon={['frown', 'smile']} />
|
||||
<IconSlider min={0} max={20} value={0} icon={['frown', 'smile']} />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
@ -21,16 +21,16 @@ const marks = {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>包含关系</p>
|
||||
<Slider marks={marks} defaultValue={37} />
|
||||
<Slider range marks={marks} defaultValue={[26, 37]} />
|
||||
<p>并列关系</p>
|
||||
<Slider marks={marks} included={false} defaultValue={37} />
|
||||
<p>结合 step</p>
|
||||
<Slider marks={marks} step={10} defaultValue={37} />
|
||||
<p>`step=null`</p>
|
||||
<Slider marks={marks} step={null} defaultValue={37} />
|
||||
</div>
|
||||
<div>
|
||||
<p>包含关系</p>
|
||||
<Slider marks={marks} defaultValue={37} />
|
||||
<Slider range marks={marks} defaultValue={[26, 37]} />
|
||||
<p>并列关系</p>
|
||||
<Slider marks={marks} included={false} defaultValue={37} />
|
||||
<p>结合 step</p>
|
||||
<Slider marks={marks} step={10} defaultValue={37} />
|
||||
<p>`step=null`</p>
|
||||
<Slider marks={marks} step={null} defaultValue={37} />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -22,9 +22,9 @@ const data = [
|
||||
];
|
||||
|
||||
ReactDOM.render(
|
||||
<Table columns={columns}
|
||||
expandedRowRender={record => <p>{record.description}</p>}
|
||||
dataSource={data}
|
||||
className="table" />
|
||||
<Table columns={columns}
|
||||
expandedRowRender={record => <p>{record.description}</p>}
|
||||
dataSource={data}
|
||||
className="table" />
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -60,9 +60,9 @@ const App = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button type="primary" onClick={this.start}
|
||||
disabled={!hasSelected} loading={loading}>操作</Button>
|
||||
<span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
|
||||
<Button type="primary" onClick={this.start}
|
||||
disabled={!hasSelected} loading={loading}>操作</Button>
|
||||
<span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
|
||||
</div>
|
||||
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
||||
</div>
|
||||
|
@ -215,7 +215,7 @@ export default class Table extends React.Component {
|
||||
if (result !== 0) {
|
||||
return (sortOrder === 'descend') ? -result : result;
|
||||
}
|
||||
return a._index - b._index;
|
||||
return a.indexForSort - b.indexForSort;
|
||||
};
|
||||
}
|
||||
|
||||
@ -475,9 +475,9 @@ export default class Table extends React.Component {
|
||||
this.props.rowSelection.getCheckboxProps &&
|
||||
this.props.rowSelection.getCheckboxProps(item).disabled);
|
||||
const checkboxAll = (
|
||||
<Checkbox checked={checked}
|
||||
disabled={checkboxAllDisabled}
|
||||
onChange={this.handleSelectAllRow} />
|
||||
<Checkbox checked={checked}
|
||||
disabled={checkboxAllDisabled}
|
||||
onChange={this.handleSelectAllRow} />
|
||||
);
|
||||
selectionColumn = {
|
||||
key: 'selection-column',
|
||||
@ -644,7 +644,7 @@ export default class Table extends React.Component {
|
||||
// 优化本地排序
|
||||
data = data.slice(0);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
data[i]._index = i;
|
||||
data[i].indexForSort = i;
|
||||
}
|
||||
const sorterFn = this.getSorterFn();
|
||||
if (sorterFn) {
|
||||
|
@ -10,13 +10,14 @@ import { Tabs } from 'antd';
|
||||
const TabPane = Tabs.TabPane;
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="card-container">
|
||||
<Tabs type="card">
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
|
||||
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
|
||||
</Tabs>
|
||||
</div>, mountNode);
|
||||
<div className="card-container">
|
||||
<Tabs type="card">
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
|
||||
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -12,9 +12,10 @@ const TabPane = Tabs.TabPane;
|
||||
const operations = <Button>额外操作</Button>;
|
||||
|
||||
ReactDOM.render(
|
||||
<Tabs tabBarExtraContent={operations}>
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
|
||||
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
|
||||
</Tabs>, mountNode);
|
||||
<Tabs tabBarExtraContent={operations}>
|
||||
<TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
|
||||
<TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
|
||||
<TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
|
||||
</Tabs>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -9,11 +9,11 @@ title: 基本用法
|
||||
import { Timeline } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Timeline>
|
||||
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
<Timeline>
|
||||
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -9,19 +9,19 @@ title: 圆圈颜色
|
||||
import { Timeline } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Timeline>
|
||||
<Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item color="red">
|
||||
<p>初步排除网络异常1</p>
|
||||
<p>初步排除网络异常2</p>
|
||||
<p>初步排除网络异常3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
<Timeline.Item>
|
||||
<p>技术测试异常1</p>
|
||||
<p>技术测试异常2</p>
|
||||
<p>技术测试异常3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
</Timeline>
|
||||
<Timeline>
|
||||
<Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item color="red">
|
||||
<p>初步排除网络异常1</p>
|
||||
<p>初步排除网络异常2</p>
|
||||
<p>初步排除网络异常3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
<Timeline.Item>
|
||||
<p>技术测试异常1</p>
|
||||
<p>技术测试异常2</p>
|
||||
<p>技术测试异常3 2015-09-01</p>
|
||||
</Timeline.Item>
|
||||
</Timeline>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -9,10 +9,10 @@ title: 最后一个
|
||||
import { Timeline } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Timeline pending={<a href="#">查看更多</a>}>
|
||||
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
<Timeline pending={<a href="#">查看更多</a>}>
|
||||
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -158,26 +158,26 @@ export default class TransferList extends React.Component {
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{ bodyDom ||
|
||||
<div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
|
||||
{ showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
|
||||
<Search prefixCls={`${prefixCls}-search`}
|
||||
onChange={this.handleFilter}
|
||||
handleClear={this.handleClear}
|
||||
placeholder={searchPlaceholder || '请输入搜索内容'}
|
||||
value={filter} />
|
||||
</div> : null }
|
||||
<Animate component="ul"
|
||||
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
||||
transitionLeave={false}>
|
||||
{showItems.length > 0
|
||||
? showItems
|
||||
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
|
||||
</Animate>
|
||||
</div>}
|
||||
{ footerDom ? <div className={`${prefixCls}-footer`}>
|
||||
{ footerDom }
|
||||
</div> : null }
|
||||
{bodyDom ||
|
||||
<div className={showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
|
||||
{showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
|
||||
<Search prefixCls={`${prefixCls}-search`}
|
||||
onChange={this.handleFilter}
|
||||
handleClear={this.handleClear}
|
||||
placeholder={searchPlaceholder || '请输入搜索内容'}
|
||||
value={filter} />
|
||||
</div> : null}
|
||||
<Animate component="ul"
|
||||
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
||||
transitionLeave={false}>
|
||||
{showItems.length > 0
|
||||
? showItems
|
||||
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
|
||||
</Animate>
|
||||
</div>}
|
||||
{footerDom ? <div className={`${prefixCls}-footer`}>
|
||||
{footerDom}
|
||||
</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -30,13 +30,13 @@ export default class Search extends React.Component {
|
||||
const { placeholder, value, prefixCls } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
|
||||
<input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
|
||||
onChange={this.handleChange} />
|
||||
{ value && value.length > 0 ?
|
||||
<a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear}>
|
||||
{value && value.length > 0 ?
|
||||
<a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
|
||||
<Icon type="cross-circle" />
|
||||
</a>
|
||||
: <span className={ `${prefixCls}-action` }><Icon type="search" /></span>
|
||||
: <span className={`${prefixCls}-action`}><Icon type="search" /></span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
@ -29,10 +29,10 @@ const generateData = (_level, _preKey, _tns) => {
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const __level = _level - 1;
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(__level, key, tns[index].children);
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
@ -29,10 +29,10 @@ const generateData = (_level, _preKey, _tns) => {
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const __level = _level - 1;
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(__level, key, tns[index].children);
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
@ -16,21 +16,21 @@ const props = {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={{ width: 246, height: 140 }}>
|
||||
<Dragger {...props}>
|
||||
<Icon type="plus" />
|
||||
</Dragger>
|
||||
<div>
|
||||
<div style={{ width: 246, height: 140 }}>
|
||||
<Dragger {...props}>
|
||||
<Icon type="plus" />
|
||||
</Dragger>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, height: 180 }}>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持单个或批量上传,严禁上传公司内部资料及其他违禁文件</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16, height: 180 }}>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持单个或批量上传,严禁上传公司内部资料及其他违禁文件</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -29,20 +29,20 @@ const props = {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Upload {...props}>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
<br />
|
||||
<br />
|
||||
<Upload {...props} className="upload-list-inline">
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
<div>
|
||||
<Upload {...props}>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
<br />
|
||||
<br />
|
||||
<Upload {...props} className="upload-list-inline">
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
@ -137,7 +137,7 @@ export default class Upload extends React.Component {
|
||||
if (typeof response === 'string') {
|
||||
response = JSON.parse(response);
|
||||
}
|
||||
} catch (e) {/* do nothing */}
|
||||
} catch (e) { /* do nothing */ }
|
||||
let fileList = this.state.fileList;
|
||||
let targetItem = getFileItem(file, fileList);
|
||||
// 之前已经删除
|
||||
|
@ -106,7 +106,7 @@ export default class UploadList extends React.Component {
|
||||
) : <Icon type="cross" onClick={() => this.handleClose(file)} />
|
||||
}
|
||||
</div>
|
||||
{ progress }
|
||||
{progress}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
11
package.json
11
package.json
@ -73,19 +73,20 @@
|
||||
"devDependencies": {
|
||||
"antd-tools": "~0.3.0",
|
||||
"babel-eslint": "^6.0.2",
|
||||
"babel-jest": "^11.0.2",
|
||||
"babel-jest": "^12.0.2",
|
||||
"babel-plugin-antd": "^0.4.0",
|
||||
"dom-scroll-into-view": "^1.1.0",
|
||||
"es6-shim": "^0.35.0",
|
||||
"eslint": "^2.2.0",
|
||||
"eslint-config-airbnb": "^7.0.0",
|
||||
"eslint-config-airbnb": "^8.0.0",
|
||||
"eslint-plugin-babel": "^3.0.0",
|
||||
"eslint-plugin-jsx-a11y": "^0.6.2",
|
||||
"eslint-plugin-import": "^1.6.1",
|
||||
"eslint-plugin-jsx-a11y": "^1.0.4",
|
||||
"eslint-plugin-markdown": "*",
|
||||
"eslint-plugin-react": "^5.0.1",
|
||||
"eslint-tinker": "^0.3.1",
|
||||
"history": "^2.0.1",
|
||||
"jest-cli": "^11.0.0",
|
||||
"jest-cli": "^12.0.2",
|
||||
"jsonml-to-react-component": "~0.2.0",
|
||||
"jsonml.js": "^0.1.0",
|
||||
"jsonp": "^0.2.0",
|
||||
@ -124,7 +125,7 @@
|
||||
"eslint-fix": "eslint --fix components test site scripts ./*.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md",
|
||||
"test": "npm run lint && npm run dist && npm run jest",
|
||||
"jest": "jest",
|
||||
"pre-publish":"node ./scripts/prepub",
|
||||
"pre-publish": "node ./scripts/prepub",
|
||||
"pub": "antd-tools run pub",
|
||||
"beta": "antd-tools run beta",
|
||||
"authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt"
|
||||
|
@ -6,7 +6,7 @@ export default function App(props) {
|
||||
return (
|
||||
<div>
|
||||
<Header {...props} />
|
||||
{ props.children }
|
||||
{props.children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
@ -39,7 +39,7 @@ export default class Article extends React.Component {
|
||||
return (
|
||||
<li key={getChildren(node)[0]}>
|
||||
<Link to={{ pathname: location.pathname, query: { scrollTo: getChildren(node)[0] } }}>
|
||||
{ utils.jsonmlToComponent(location.pathname, getChildren(node)[0]) }
|
||||
{utils.jsonmlToComponent(location.pathname, getChildren(node)[0])}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
@ -53,7 +53,7 @@ export default class Article extends React.Component {
|
||||
{meta.english} {meta.chinese}
|
||||
{
|
||||
!meta.subtitle ? null :
|
||||
<span className="subtitle">{ meta.subtitle }</span>
|
||||
<span className="subtitle">{meta.subtitle}</span>
|
||||
}
|
||||
</h1>
|
||||
{
|
||||
@ -65,7 +65,7 @@ export default class Article extends React.Component {
|
||||
}
|
||||
{
|
||||
(jumper.length > 0 && meta.toc !== false) ?
|
||||
<section className="toc"><ul>{ jumper }</ul></section> :
|
||||
<section className="toc"><ul>{jumper}</ul></section> :
|
||||
null
|
||||
}
|
||||
{
|
||||
|
@ -65,9 +65,9 @@ export default class ComponentDoc extends React.Component {
|
||||
const jumper = demos.map((demo) => {
|
||||
return (
|
||||
<li key={demo.id}>
|
||||
<Link className={ demo.id === scrollTo ? 'current' : ''}
|
||||
<Link className={demo.id === scrollTo ? 'current' : ''}
|
||||
to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
|
||||
{ demo.meta.title }
|
||||
{demo.meta.title}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
@ -77,7 +77,7 @@ export default class ComponentDoc extends React.Component {
|
||||
<article>
|
||||
<Affix className="toc-affix" offsetTop={16}>
|
||||
<ul className="toc demos-anchor">
|
||||
{ jumper }
|
||||
{jumper}
|
||||
</ul>
|
||||
</Affix>
|
||||
<section className="markdown">
|
||||
@ -96,17 +96,17 @@ export default class ComponentDoc extends React.Component {
|
||||
</h2>
|
||||
</section>
|
||||
<Row gutter={16}>
|
||||
<Col span={ isSingleCol ? '24' : '12' }
|
||||
className={ isSingleCol ?
|
||||
<Col span={isSingleCol ? '24' : '12'}
|
||||
className={isSingleCol ?
|
||||
'code-boxes-col-1-1' :
|
||||
'code-boxes-col-2-1'
|
||||
}
|
||||
>
|
||||
{ leftChildren }
|
||||
{leftChildren}
|
||||
</Col>
|
||||
{
|
||||
isSingleCol ? null :
|
||||
<Col className="code-boxes-col-2-1" span="12">{ rightChildren }</Col>
|
||||
<Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
|
||||
}
|
||||
</Row>
|
||||
{
|
||||
|
@ -51,10 +51,10 @@ export default class Demo extends React.Component {
|
||||
<section className="code-box-meta markdown">
|
||||
<div className="code-box-title">
|
||||
<Link to={{ pathname, query: { scrollTo: id } }}>
|
||||
{ meta.title }
|
||||
{meta.title}
|
||||
</Link>
|
||||
</div>
|
||||
{ introChildren }
|
||||
{introChildren}
|
||||
<span className="collapse anticon anticon-circle-o-right"
|
||||
onClick={this.handleCodeExapnd}
|
||||
unselectable="none" />
|
||||
|
@ -15,7 +15,7 @@ export default class IconSet extends React.Component {
|
||||
[className]: !!className,
|
||||
});
|
||||
return (
|
||||
<ul className={listClassName}>
|
||||
<ul className={listClassName}>
|
||||
{this.props.icons.map((type, i) => <CopyableIcon key={i} type={type} />)}
|
||||
</ul>
|
||||
);
|
||||
|
@ -26,7 +26,7 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
|
||||
<Modal className="image-modal" width={960} visible={previewVisible} title={null} footer={null}
|
||||
onCancel={onCancel}>
|
||||
<Carousel className={`${onlyOneImg ? 'image-modal-single' : ''}`} adaptiveHeight>
|
||||
{ comparable ? cover : imgs }
|
||||
{comparable ? cover : imgs}
|
||||
</Carousel>
|
||||
<div className="preview-image-title">{coverMeta.alt}</div>
|
||||
</Modal>
|
||||
|
@ -45,23 +45,23 @@ export default class MainContent extends React.Component {
|
||||
generateMenuItem(isTop, item) {
|
||||
const key = this.fileNameToPath(item.fileName);
|
||||
const text = isTop ?
|
||||
item.chinese || item.english : [
|
||||
<span key="english">{ item.english }</span>,
|
||||
<span className="chinese" key="chinese">{ item.chinese }</span>
|
||||
];
|
||||
item.chinese || item.english : [
|
||||
<span key="english">{item.english}</span>,
|
||||
<span className="chinese" key="chinese">{item.chinese}</span>
|
||||
];
|
||||
const disabled = item.disabled;
|
||||
const url = item.fileName.replace(/(\/index)?\.md$/i, '');
|
||||
const child = !item.link ?
|
||||
<Link to={url} disabled={disabled}>
|
||||
{ text }
|
||||
</Link> :
|
||||
<a href={item.link} target="_blank" disabled={disabled}>
|
||||
{ text }
|
||||
</a>;
|
||||
<Link to={url} disabled={disabled}>
|
||||
{text}
|
||||
</Link> :
|
||||
<a href={item.link} target="_blank" disabled={disabled}>
|
||||
{text}
|
||||
</a>;
|
||||
|
||||
return (
|
||||
<Menu.Item key={key} disabled={disabled}>
|
||||
{ child }
|
||||
{child}
|
||||
</Menu.Item>
|
||||
);
|
||||
}
|
||||
@ -73,20 +73,20 @@ export default class MainContent extends React.Component {
|
||||
generateSubMenuItems(obj) {
|
||||
const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true));
|
||||
const itemGroups = Object.keys(obj).filter(this.isNotTopLevel)
|
||||
.sort((a, b) => {
|
||||
return config.typeOrder[a] - config.typeOrder[b];
|
||||
})
|
||||
.map((type, index) => {
|
||||
const groupItems = obj[type].sort((a, b) => {
|
||||
return a.english.charCodeAt(0) - b.english.charCodeAt(0);
|
||||
}).map(this.generateMenuItem.bind(this, false));
|
||||
.sort((a, b) => {
|
||||
return config.typeOrder[a] - config.typeOrder[b];
|
||||
})
|
||||
.map((type, index) => {
|
||||
const groupItems = obj[type].sort((a, b) => {
|
||||
return a.english.charCodeAt(0) - b.english.charCodeAt(0);
|
||||
}).map(this.generateMenuItem.bind(this, false));
|
||||
|
||||
return (
|
||||
<Menu.ItemGroup title={type} key={index}>
|
||||
{ groupItems }
|
||||
</Menu.ItemGroup>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Menu.ItemGroup title={type} key={index}>
|
||||
{groupItems}
|
||||
</Menu.ItemGroup>
|
||||
);
|
||||
});
|
||||
return [...topLevel, ...itemGroups];
|
||||
}
|
||||
|
||||
@ -103,7 +103,7 @@ export default class MainContent extends React.Component {
|
||||
|
||||
return (
|
||||
<SubMenu title={<h4>{category}</h4>} key={category}>
|
||||
{ subMenuItems }
|
||||
{subMenuItems}
|
||||
</SubMenu>
|
||||
);
|
||||
});
|
||||
@ -148,11 +148,11 @@ export default class MainContent extends React.Component {
|
||||
<Menu className="aside-container" mode="inline"
|
||||
defaultOpenKeys={Object.keys(this.props.menuItems)}
|
||||
selectedKeys={[activeMenuItem]}>
|
||||
{ menuItems }
|
||||
{menuItems}
|
||||
</Menu>
|
||||
</Col>
|
||||
<Col lg={20} md={18} sm={24} xs={24} className="main-container">
|
||||
{ this.props.children }
|
||||
{this.props.children}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
|
@ -25,7 +25,7 @@ export function jsonmlToComponent(pathname, jsonml) {
|
||||
id: children,
|
||||
...getAttributes(node),
|
||||
}, [
|
||||
<span key="title">{ children.map((child) => toReactComponent(child)) }</span>,
|
||||
<span key="title">{children.map((child) => toReactComponent(child))}</span>,
|
||||
<Link to={{ pathname, query: { scrollTo: children } }} className="anchor" key="anchor">#</Link>,
|
||||
]);
|
||||
}],
|
||||
|
@ -50,28 +50,28 @@ ReactDOM.render(
|
||||
<Route path="/" component={App}>
|
||||
<IndexRoute component={Home} />
|
||||
<Route path="components" component={ReactComponents}>
|
||||
{ utils.generateIndex(reactComponents) }
|
||||
{utils.generateIndex(reactComponents)}
|
||||
<Route path=":children"
|
||||
component={utils.getChildrenWrapper(reactComponents)} />
|
||||
</Route>
|
||||
{ redirects }
|
||||
{redirects}
|
||||
<Route path="docs/practice" component={Practice}>
|
||||
{ utils.generateIndex(practice) }
|
||||
{utils.generateIndex(practice)}
|
||||
<Route path=":children"
|
||||
component={utils.getChildrenWrapper(practice)} />
|
||||
</Route>
|
||||
<Route path="docs/pattern" component={Pattern}>
|
||||
{ utils.generateIndex(pattern) }
|
||||
{utils.generateIndex(pattern)}
|
||||
<Route path=":children"
|
||||
component={utils.getChildrenWrapper(pattern)} />
|
||||
</Route>
|
||||
<Route path="docs/spec" component={Spec}>
|
||||
{ utils.generateIndex(spec) }
|
||||
{utils.generateIndex(spec)}
|
||||
<Route path=":children"
|
||||
component={utils.getChildrenWrapper(spec)} />
|
||||
</Route>
|
||||
<Route path="docs/resource" component={Resource}>
|
||||
{ utils.generateIndex(resource) }
|
||||
{utils.generateIndex(resource)}
|
||||
<Route path=":children"
|
||||
component={utils.getChildrenWrapper(resource)} />
|
||||
</Route>
|
||||
|
Loading…
Reference in New Issue
Block a user