feat(Divider): add divider component

.fusion

@@ -50,6 +50,7 @@
     }
   },
   "variables": {
+    "divider": "lib/divider/scss/variable.scss",
     "divider": "lib/divider/scss/variable.scss",
     "global": "lib/core/style/_global.scss",
     "size": "lib/core/style/_size.scss",

docs/divider/adaptor/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Divider',
+    editor: () => ({
+
+    }),
+    adaptor: ({ level, count, ...others }) => {
+        return <Divider {...others}/>;
+    },
+    content: () => ({
+    })
+};

docs/divider/demo/basic.md

@@ -0,0 +1,45 @@
+# 基本
+
+- order: 0
+
+简单的分隔符展示。
+
+:::lang=en-us
+# Basic Usage
+
+- order: 0
+
+Simple usage of Divider component.
+
+:::
+---
+
+````jsx
+import { Divider } from '@alifd/next';
+
+ReactDOM.render(
+    <div>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <Divider />
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <Divider dashed />
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <a href="#">Add</a>
+        <Divider direction="ver" />
+        <a href="#">Edit</a>
+        <Divider direction="ver" />
+        <a href="#">Delete</a>
+    </div>
+    , mountNode);
+````
+
+````css
+
+````

docs/divider/demo/orientation.md

@@ -0,0 +1,40 @@
+# 带文案的分割线
+
+- order: 1
+
+通过 `orientation` 来设置分割线上文案的位置
+
+:::lang=en-us
+# Basic Usage
+
+- order: 1
+
+Divider with different orientation of text.
+
+:::
+---
+
+````jsx
+import { Divider } from '@alifd/next';
+
+ReactDOM.render(
+    <div>
+        <Divider>Text</Divider>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <Divider orientation="left">Left Text</Divider>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <Divider orientation="right">Right Text</Divider>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </div>
+    , mountNode);
+````
+
+````css
+
+````

docs/divider/index.en-us.md

@@ -0,0 +1,23 @@
+# Divider
+
+-   category: Components
+-   family: General
+-   chinese: 分隔符
+-   type: Display
+
+---
+
+## Develop Guide
+
+### When to Use
+
+
+## API
+
+### Divider
+
+| Param | Descripiton  | Type  | Default Value |
+| ----------- | ----------------------------------------------------- | ------- | -------- |
+| dashed      | is dash or not                                                 | Boolean | false    |
+| direction   | is horizonal or vertical<br><br>**options**:<br>'hoz', 'ver'            | Enum    | 'hoz'    |
+| orientation | position of title<br><br>**options**:<br>'left', 'right', 'center' | Enum    | 'center' |

docs/divider/index.md

@@ -0,0 +1,27 @@
+# Divider
+
+-   category: Components
+-   family: General
+-   chinese: 分隔符
+-   type: 展示
+
+---
+
+## 开发指南
+
+区隔内容的分割线。
+
+### 何时使用
+
+对不同章节的文本段落进行分割。
+对行内文字/链接进行分割，例如表格的操作列。
+
+## API
+
+### Divider
+
+| 参数          | 说明                                                    | 类型      | 默认值      |
+| ----------- | ----------------------------------------------------- | ------- | -------- |
+| dashed      | 是否为虚线                                                 | Boolean | false    |
+| direction   | 线是水平还是垂直类型<br><br>**可选值**:<br>'hoz', 'ver'            | Enum    | 'hoz'    |
+| orientation | 分割线标题的位置<br><br>**可选值**:<br>'left', 'right', 'center' | Enum    | 'center' |

docs/divider/theme/index.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import '../../../src/demo-helper/style.js';
+import { Demo, DemoGroup, initDemo } from '../../../src/demo-helper';
+import ConfigProvider from '../../../src/config-provider';
+import zhCN from '../../../src/locale/zh-cn';
+import enUS from '../../../src/locale/en-us';
+import '../../../src/divider/style.js';
+import Divider from '../../../src/divider';
+
+const i18nMap = {
+    'zh-cn': {
+        'divider': '分割线',
+        normal: '正常',
+        dashed: '虚线',
+        text: '标题',
+        textLeft: '左标题',
+        textRight: '右标题',
+        ver: '垂直模式',
+    },
+    'en-us': {
+        'divider': 'Divider',
+        normal: 'Normal',
+        dashed: 'Dashed',
+        text: 'Text',
+        textLeft: 'Text Left',
+        textRight: 'Text Right',
+        ver: 'Vertical',
+    },
+};
+
+class RenderDivider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            demoFunction: {
+            }
+        };
+    }
+
+    onFunctionChange = (demoFunction) => {
+        this.setState({ demoFunction });
+    }
+
+    render() {
+        const { i18nMap } = this.props;
+        const { demoFunction } = this.state;
+
+        return (<Demo title={i18nMap.divider} demoFunction={demoFunction} onFunctionChange={this.onFunctionChange}>
+            <Demo title={i18nMap.divider}>
+                <DemoGroup label={i18nMap.normal}>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                        <Divider />
+                        <p>
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    </div>
+                </DemoGroup>
+                <DemoGroup label={i18nMap.dashed}>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                        <Divider dashed/>
+                        <p>
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    </div>
+                </DemoGroup>
+                <DemoGroup label={i18nMap.text}>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                        <Divider>{i18nMap.text}</Divider>
+                        <p>
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    </div>
+                </DemoGroup>
+                <DemoGroup label={i18nMap.textLeft}>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                        <Divider orientation="left">{i18nMap.textLeft}</Divider>
+                        <p>
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    </div>
+                </DemoGroup>
+                <DemoGroup label={i18nMap.textRight}>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                        <Divider orientation="right">{i18nMap.textRight}</Divider>
+                        <p>
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                    </div>
+                </DemoGroup>
+                <DemoGroup label={i18nMap.ver}>
+                    <div>
+                        <a href="#">Add</a>
+                        <Divider direction="ver"/>
+                        <a href="#">Edit</a>
+                        <Divider direction="ver" />
+                        <a href="#">Delete</a>
+                    </div>
+                </DemoGroup>
+            </Demo>
+        </Demo>);
+    }
+
+}
+
+function render(i18nMap, lang) {
+    ReactDOM.render(<ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
+        <div className="demo-container">
+            <RenderDivider i18nMap={i18nMap} />
+        </div>
+    </ConfigProvider>, document.getElementById('container'));
+}
+
+window.renderDemo = function(lang = 'en-us') {
+    render(i18nMap[lang], lang);
+};
+
+renderDemo();
+
+initDemo('divider');

scripts/config.js

@@ -15,6 +15,7 @@ module.exports = {
         'Upload.Drager': 'Upload',
     },
     components: [
+        'divider',
         'affix',
         'animate',
         'badge',

src/divider/index.jsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { polyfill } from 'react-lifecycles-compat';
+import ConfigProvider from '../config-provider';
+import { obj } from '../util';
+
+/**
+ * Divider
+ */
+class Divider extends Component {
+    static propTypes = {
+        prefix: PropTypes.string,
+        children: PropTypes.any,
+        className: PropTypes.string,
+        /**
+         * 是否为虚线
+         */
+        dashed: PropTypes.bool,
+        /**
+         * 线是水平还是垂直类型
+         */
+        direction: PropTypes.oneOf(['hoz', 'ver']),
+        /**
+         * 分割线标题的位置
+         */
+        orientation: PropTypes.oneOf(['left', 'right', 'center']),
+    };
+
+    static defaultProps = {
+        prefix: 'next-',
+        direction: 'hoz',
+        orientation: 'center',
+        dashed: false,
+    };
+
+    render() {
+        const {
+            prefix,
+            className,
+            dashed,
+            direction,
+            orientation,
+            children,
+        } = this.props;
+        const others = obj.pickOthers(Divider.propTypes, this.props);
+
+        const cls = classNames(
+            {
+                [`${prefix}divider`]: true,
+                [`${prefix}divider-dashed`]: !!dashed,
+                [`${prefix}divider-${direction}`]: !!direction,
+                [`${prefix}divider-with-text-${orientation}`]:
+                    !!orientation && children,
+            },
+            className
+        );
+
+        return (
+            <div role="separator" className={cls} {...others}>
+                {children && (
+                    <span className={`${prefix}divider-inner-text`}>
+                        {children}
+                    </span>
+                )}
+            </div>
+        );
+    }
+}
+
+export default ConfigProvider.config(polyfill(Divider));