From 3b59a03c00c29835222ecfe68310222fd9e619ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Sat, 19 Aug 2017 12:39:11 +0800 Subject: [PATCH] New component divider (#7261) * Add Divider * use Divider in table demos * update demo instruction * upgrade snapshots --- .../__snapshots__/index.test.js.snap | 1 + .../__tests__/__snapshots__/demo.test.js.snap | 49 +++++++ components/divider/__tests__/demo.test.js | 3 + components/divider/demo/horizontal.md | 28 ++++ components/divider/demo/vertical.md | 28 ++++ components/divider/index.en-US.md | 21 +++ components/divider/index.tsx | 20 +++ components/divider/index.zh-CN.md | 19 +++ components/divider/style/index.less | 51 +++++++ components/divider/style/index.tsx | 2 + components/index.tsx | 2 + components/style/core/base.less | 8 -- .../__tests__/__snapshots__/demo.test.js.snap | 128 +++++++++--------- components/table/demo/basic.md | 6 +- components/table/demo/dynamic-settings.md | 6 +- components/table/demo/jsx.md | 6 +- tests/__snapshots__/index.test.js.snap | 1 + 17 files changed, 298 insertions(+), 81 deletions(-) create mode 100644 components/divider/__tests__/__snapshots__/demo.test.js.snap create mode 100644 components/divider/__tests__/demo.test.js create mode 100644 components/divider/demo/horizontal.md create mode 100644 components/divider/demo/vertical.md create mode 100644 components/divider/index.en-US.md create mode 100644 components/divider/index.tsx create mode 100644 components/divider/index.zh-CN.md create mode 100644 components/divider/style/index.less create mode 100644 components/divider/style/index.tsx diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap index aa0f83b83d..bbe25f7fcd 100644 --- a/components/__tests__/__snapshots__/index.test.js.snap +++ b/components/__tests__/__snapshots__/index.test.js.snap @@ -19,6 +19,7 @@ Array [ "Checkbox", "Col", "DatePicker", + "Divider", "Dropdown", "Form", "Icon", diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..0f67062456 --- /dev/null +++ b/components/divider/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = ` +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

+
+ + With Text + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

+
+`; + +exports[`renders ./components/divider/demo/vertical.md correctly 1`] = ` +
+ Text +
+ + Link + +
+ + Link + +
+`; diff --git a/components/divider/__tests__/demo.test.js b/components/divider/__tests__/demo.test.js new file mode 100644 index 0000000000..7515c2e83a --- /dev/null +++ b/components/divider/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('divider'); diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md new file mode 100644 index 0000000000..1cb665e4c4 --- /dev/null +++ b/components/divider/demo/horizontal.md @@ -0,0 +1,28 @@ +--- +order: 0 +title: + zh-CN: 水平分割线 + en-US: Horizontal +--- + +## zh-CN + +默认为水平分割线，可在中间加入文字。 + +## en-US + +Divider default type is `horizontal`. Support inner text inside Divider. + +````jsx +import { Divider } from 'antd'; + +ReactDOM.render( +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

+ With Text +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

+
+, mountNode); +```` diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md new file mode 100644 index 0000000000..2b808e43ee --- /dev/null +++ b/components/divider/demo/vertical.md @@ -0,0 +1,28 @@ +--- +order: 1 +title: + zh-CN: 垂直分割线 + en-US: Vertical +--- + +## zh-CN + +使用 `type="vertical"` 设置为行内的垂直分割线。 + +## en-US + +Use `type="vertical"` make it vertical. + +````jsx +import { Divider } from 'antd'; + +ReactDOM.render( +
+ Text + + Link + + Link +
+, mountNode); +```` diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md new file mode 100644 index 0000000000..5d874917e9 --- /dev/null +++ b/components/divider/index.en-US.md @@ -0,0 +1,21 @@ +--- +category: Components +type: Other +title: Divider +cols: 1 +--- + +A divider line separates different content. + +## When To Use + +- Divide sections of article. +- Divide inline text and links such as the operation column of table. + +## API + +### Divider + +Property | Description | Type | Default +---------|-------------|------|-------- +type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` diff --git a/components/divider/index.tsx b/components/divider/index.tsx new file mode 100644 index 0000000000..a94df41022 --- /dev/null +++ b/components/divider/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import classNames from 'classnames'; + +export default function Divider({ + prefixCls = 'ant', + type = 'horizontal', + className, + children, + ...restProps, +}) { + const classString = classNames(className, `${prefixCls}-divider`, { + [`${prefixCls}-divider-${type}`]: true, + [`${prefixCls}-divider-with-text`]: children, + }); + return ( +
+ {children && {children}} +
+ ); +} diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md new file mode 100644 index 0000000000..7c863ab97e --- /dev/null +++ b/components/divider/index.zh-CN.md @@ -0,0 +1,19 @@ +--- +category: Components +type: Other +title: Divider +subtitle: 分割线 +--- + +区隔内容的分割线。 + +## 何时使用 + +- 对不同章节的文本段落进行分割。 +- 对行内文字/链接进行分割，例如表格的操作列。 + +## API + +参数 | 说明 | 类型 | 默认值 +----|-----|------|------ +type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` diff --git a/components/divider/style/index.less b/components/divider/style/index.less new file mode 100644 index 0000000000..e790547cd2 --- /dev/null +++ b/components/divider/style/index.less @@ -0,0 +1,51 @@ +@import "../../style/themes/default"; +@import "../../style/mixins/index"; + +@divider-prefix-cls: ~"@{ant-prefix}-divider"; + +.@{divider-prefix-cls} { + background: @border-color-split; + + &, // for compatiable + &-vertical { + margin: 0 8px; + display: inline-block; + height: 0.9em; + width: 1px; + vertical-align: middle; + position: relative; + top: -0.06em; + } + &-horizontal { + display: block; + height: 1px; + width: 100%; + margin: 24px 0; + } + &-horizontal&-with-text { + display: table; + white-space: nowrap; + text-align: center; + background: transparent; + font-weight: 500; + color: @heading-color; + font-size: 16px; + margin: 16px 0; + + &:before, + &:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + border-top: 1px solid @border-color-split; + transform: translateY(50%); + } + } + + &-inner-text { + display: inline-block; + padding: 0 24px; + } +} diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx new file mode 100644 index 0000000000..3a3ab0de59 --- /dev/null +++ b/components/divider/style/index.tsx @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/index.tsx b/components/index.tsx index 2980f466b3..bedea4e018 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -45,6 +45,8 @@ export { default as Col } from './col'; export { default as DatePicker } from './date-picker'; +export { default as Divider } from './divider'; + export { default as Dropdown } from './dropdown'; export { default as Form } from './form'; diff --git a/components/style/core/base.less b/components/style/core/base.less index f2e123d073..1e75c8f714 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -100,14 +100,6 @@ a { } } -.@{ant-prefix}-divider { - margin: 0 6px; - display: inline-block; - height: 8px; - width: 1px; - background: #ccc; -} - code, kbd, pre, diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index b42599cd08..6d98a99dfe 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -204,16 +204,16 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = ` > Action 一 John Brown - Delete - Action 一 Jim Green - Delete - Action 一 Joe Black - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 John Brown - Delete - Action 一 - Delete - Action 一 - Delete - Action 一 - Delete - ( Action 一 {record.name} - + Delete - + More actions diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index 133d060473..9fc255cab1 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -14,7 +14,7 @@ title: Select different settings to see the result. ````jsx -import { Table, Icon, Switch, Radio, Form } from 'antd'; +import { Table, Icon, Switch, Radio, Form, Divider } from 'antd'; const FormItem = Form.Item; const columns = [{ @@ -39,9 +39,9 @@ const columns = [{ render: (text, record) => ( Action 一 {record.name} - + Delete - + More actions diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md index 5e4d748478..ce4cdb142f 100644 --- a/components/table/demo/jsx.md +++ b/components/table/demo/jsx.md @@ -18,7 +18,7 @@ Using JSX style API (introduced in 2.5.0) > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components. ````jsx -import { Table, Icon } from 'antd'; +import { Table, Icon, Divider } from 'antd'; const { Column, ColumnGroup } = Table; @@ -72,9 +72,9 @@ ReactDOM.render( render={(text, record) => ( Action 一 {record.name} - + Delete - + More actions diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index 5c0249bd91..d727fbcb6a 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -19,6 +19,7 @@ Array [ "Checkbox", "Col", "DatePicker", + "Divider", "Dropdown", "Form", "Icon",