From 0c7f49c8bc86cf54d6d3b9da4b35862801a6da78 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Mon, 22 Jul 2019 17:35:15 +0800
Subject: [PATCH 01/27] feat(*): Add Next Adaptor

---
 docs/adaptor.js                         |  83 ++++++++
 docs/badge/adaptor/index.jsx            |  49 +++++
 docs/balloon/adaptor/index.jsx          |  86 ++++++++
 docs/breadcrumb/adaptor/index.jsx       |  43 ++++
 docs/button/adaptor/index.jsx           | 133 +++++++++++++
 docs/calendar/adaptor/index.jsx         |  54 +++++
 docs/card/adaptor/index.jsx             |  90 +++++++++
 docs/cascader-select/adaptor/index.jsx  | 105 ++++++++++
 docs/cascader/adaptor/index.jsx         |  67 +++++++
 docs/checkbox/adaptor/index.jsx         |  42 ++++
 docs/collapse/adaptor/index.jsx         |  49 +++++
 docs/date-picker/adaptor/index.jsx      | 115 +++++++++++
 docs/dialog/adaptor/index.jsx           | 137 +++++++++++++
 docs/input/adaptor/index.jsx            | 171 ++++++++++++++++
 docs/loading/adaptor/index.jsx          |  17 ++
 docs/menu-button/adaptor/index.jsx      | 195 ++++++++++++++++++
 docs/menu/adaptor/index.jsx             | 190 ++++++++++++++++++
 docs/message/adaptor/index.jsx          |  45 +++++
 docs/nav/adaptor/index.jsx              | 187 ++++++++++++++++++
 docs/number-picker/adaptor/index.jsx    |  36 ++++
 docs/pagination/adaptor/index.jsx       |  57 ++++++
 docs/paragraph/adaptor/index.jsx        |  25 +++
 docs/progress/adaptor/index.jsx         | 106 ++++++++++
 docs/radio/adaptor/index.jsx            |  69 +++++++
 docs/range/adaptor/index.jsx            |  74 +++++++
 docs/rating/adaptor/index.jsx           |  27 +++
 docs/search/adaptor/index.jsx           |  90 +++++++++
 docs/select/adaptor/index.jsx           |  98 +++++++++
 docs/slider/adaptor/index.jsx           |  99 ++++++++++
 docs/split-button/adaptor/index.jsx     | 193 ++++++++++++++++++
 docs/step/adaptor/index.jsx             | 128 ++++++++++++
 docs/switch/adaptor/index.jsx           |  27 +++
 docs/tab/adaptor/index.jsx              |  64 ++++++
 docs/table/adaptor/index.jsx            |  67 +++++++
 docs/tag/adaptor/index.jsx              |  43 ++++
 docs/time-picker/adaptor/index.jsx      |  87 ++++++++
 docs/timeline/adaptor/index.jsx         |  74 +++++++
 docs/transfer/adaptor/index.jsx         |  51 +++++
 docs/tree-select/adaptor/index.jsx      | 111 +++++++++++
 docs/tree/adaptor/index.jsx             |  77 ++++++++
 docs/upload/adaptor/index.jsx           | 251 ++++++++++++++++++++++++
 package.json                            |   4 +-
 scripts/adaptor/build.js                |  68 +++++++
 scripts/server/loaders/adaptor/index.js |  63 ++++++
 scripts/server/tpls/theme.ejs           |   5 +-
 scripts/server/webpack.js               |  11 ++
 46 files changed, 3860 insertions(+), 3 deletions(-)
 create mode 100644 docs/adaptor.js
 create mode 100644 docs/badge/adaptor/index.jsx
 create mode 100644 docs/balloon/adaptor/index.jsx
 create mode 100644 docs/breadcrumb/adaptor/index.jsx
 create mode 100644 docs/button/adaptor/index.jsx
 create mode 100644 docs/calendar/adaptor/index.jsx
 create mode 100644 docs/card/adaptor/index.jsx
 create mode 100644 docs/cascader-select/adaptor/index.jsx
 create mode 100644 docs/cascader/adaptor/index.jsx
 create mode 100644 docs/checkbox/adaptor/index.jsx
 create mode 100644 docs/collapse/adaptor/index.jsx
 create mode 100644 docs/date-picker/adaptor/index.jsx
 create mode 100644 docs/dialog/adaptor/index.jsx
 create mode 100644 docs/input/adaptor/index.jsx
 create mode 100644 docs/loading/adaptor/index.jsx
 create mode 100644 docs/menu-button/adaptor/index.jsx
 create mode 100644 docs/menu/adaptor/index.jsx
 create mode 100644 docs/message/adaptor/index.jsx
 create mode 100644 docs/nav/adaptor/index.jsx
 create mode 100644 docs/number-picker/adaptor/index.jsx
 create mode 100644 docs/pagination/adaptor/index.jsx
 create mode 100644 docs/paragraph/adaptor/index.jsx
 create mode 100644 docs/progress/adaptor/index.jsx
 create mode 100644 docs/radio/adaptor/index.jsx
 create mode 100644 docs/range/adaptor/index.jsx
 create mode 100644 docs/rating/adaptor/index.jsx
 create mode 100644 docs/search/adaptor/index.jsx
 create mode 100644 docs/select/adaptor/index.jsx
 create mode 100644 docs/slider/adaptor/index.jsx
 create mode 100644 docs/split-button/adaptor/index.jsx
 create mode 100644 docs/step/adaptor/index.jsx
 create mode 100644 docs/switch/adaptor/index.jsx
 create mode 100644 docs/tab/adaptor/index.jsx
 create mode 100644 docs/table/adaptor/index.jsx
 create mode 100644 docs/tag/adaptor/index.jsx
 create mode 100644 docs/time-picker/adaptor/index.jsx
 create mode 100644 docs/timeline/adaptor/index.jsx
 create mode 100644 docs/transfer/adaptor/index.jsx
 create mode 100644 docs/tree-select/adaptor/index.jsx
 create mode 100644 docs/tree/adaptor/index.jsx
 create mode 100644 docs/upload/adaptor/index.jsx
 create mode 100644 scripts/adaptor/build.js
 create mode 100644 scripts/server/loaders/adaptor/index.js

diff --git a/docs/adaptor.js b/docs/adaptor.js
new file mode 100644
index 0000000000..4ac0c77350
--- /dev/null
+++ b/docs/adaptor.js
@@ -0,0 +1,83 @@
+import Badge from './badge/adaptor';
+import Balloon from './balloon/adaptor';
+import Breadcrumb from './breadcrumb/adaptor';
+import Button from './button/adaptor';
+import Calendar from './calendar/adaptor';
+import Card from './card/adaptor';
+import Cascader from './cascader/adaptor';
+import CascaderSelect from './cascader-select/adaptor';
+import Checkbox from './checkbox/adaptor';
+import Collapse from './collapse/adaptor';
+import DatePicker from './date-picker/adaptor';
+import Dialog from './dialog/adaptor';
+import Input from './input/adaptor';
+import Loading from './loading/adaptor';
+import Menu from './menu/adaptor';
+import MenuButton from './menu-button/adaptor';
+import Message from './message/adaptor';
+import Nav from './nav/adaptor';
+import NumberPicker from './number-picker/adaptor';
+import Pagination from './pagination/adaptor';
+import Paragraph from './paragraph/adaptor';
+import Progress from './progress/adaptor';
+import Radio from './radio/adaptor';
+import Range from './range/adaptor';
+import Rating from './rating/adaptor';
+import Search from './search/adaptor';
+import Select from './select/adaptor';
+import Slider from './slider/adaptor';
+import SplitButton from './split-button/adaptor';
+import Step from './step/adaptor';
+import Switch from './switch/adaptor';
+import Tab from './tab/adaptor';
+import Table from './table/adaptor';
+import Tag from './tag/adaptor';
+import TimePicker from './time-picker/adaptor';
+import Timeline from './timeline/adaptor';
+import Transfer from './transfer/adaptor';
+import Tree from './tree/adaptor';
+import TreeSelect from './tree-select/adaptor';
+import Upload from './upload/adaptor';
+
+module.exports = {
+    Badge,
+    Balloon,
+    Breadcrumb,
+    Button,
+    Calendar,
+    Card,
+    Cascader,
+    CascaderSelect,
+    Checkbox,
+    Collapse,
+    DatePicker,
+    Dialog,
+    Input,
+    Loading,
+    Menu,
+    MenuButton,
+    Message,
+    Nav,
+    NumberPicker,
+    Pagination,
+    Paragraph,
+    Progress,
+    Radio,
+    Range,
+    Rating,
+    Search,
+    Select,
+    Slider,
+    SplitButton,
+    Step,
+    Switch,
+    Tab,
+    Table,
+    Tag,
+    TimePicker,
+    Timeline,
+    Transfer,
+    Tree,
+    TreeSelect,
+    Upload,
+};
diff --git a/docs/badge/adaptor/index.jsx b/docs/badge/adaptor/index.jsx
new file mode 100644
index 0000000000..7c61d9ac87
--- /dev/null
+++ b/docs/badge/adaptor/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Badge } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Badge',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['dot', 'number'],
+            default: 'dot'
+        }, {
+            name: 'count',
+            type: Types.number,
+            default: 12,
+        }]
+    }),
+    adaptor: ({ level, count, ...others }) => {
+        return <Badge {...others} dot={level=== 'dot'} count={level === 'number' ? count : 0} />;
+    },
+    content: () => ({
+        options: [{
+            name: 'use',
+            options: ['independent', 'withOthers'],
+            default: 'withOthers'
+        }],
+        transform: (props, { use }) => {
+            if (use === 'withOthers') {
+                return {
+                    ...props,
+                    children: {
+                        adaptor: 'div',
+                        props: {
+                            style: {
+                                width: '42px',
+                                height: '42px',
+                                borderRadius: '50%',
+                                background: '#eee',
+                                display: 'inline-block'
+                            }
+                        }
+                    }
+                };
+            }
+            return props;
+        }
+    })
+};
diff --git a/docs/balloon/adaptor/index.jsx b/docs/balloon/adaptor/index.jsx
new file mode 100644
index 0000000000..b343ad1686
--- /dev/null
+++ b/docs/balloon/adaptor/index.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Balloon } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+const ALIGN_LIST = [
+    { label: 'Top', value: 'b' }, // (上)
+    { label: 'Right', value: 'l' }, // (右)
+    { label: 'Bottom', value: 't' }, // (下)
+    { label: 'Left', value: 'r' }, // (左)
+    { label: 'Top Left', value: 'br' }, // (上左)
+    { label: 'Top Right', value: 'bl' }, // (上右)
+    { label: 'Bottom Left', value: 'tr' }, // (下左)
+    { label: 'Bottom Right', value: 'tl' }, // (下右)
+    { label: 'Left Top', value: 'rt' }, // (左上)
+    { label: 'Left Bottom', value: 'rb' }, // (左下)
+    { label: 'Right Top', value: 'lt' }, // (右上)
+    { label: 'Right Bottom', value: 'lb' }, // (右下 及其 两两组合)
+];
+
+
+export default {
+    name: 'Balloon',
+    shape: [{
+        label: 'Balloon',
+        value: 'balloon'
+    }, {
+        label: 'Tooltip',
+        value: 'tooltip'
+    }],
+    editor: (shape) => {
+        return {
+            props: [
+                shape === 'balloon' && {
+                    name: 'level',
+                    type: Types.enum,
+                    options: ['normal', 'primary'],
+                    default: 'normal',
+                },
+                {
+                    name: 'direction',
+                    type: Types.enum,
+                    options: ALIGN_LIST,
+                    default: 'b',
+                },
+                shape === 'balloon' ?
+                    {
+                        name: 'closable',
+                        type: Types.bool,
+                        default: true
+                    } :
+                    null
+            ].filter(v => !!v),
+            data: {
+                default: `${shape.substring(0, 1).toUpperCase() + shape.substring(1)} content replace holder.`
+            }
+        };
+    },
+    adaptor: ({ shape, level, direction, closable, data }) => {
+        return (
+            <Balloon.Inner type={level} style={{position: 'relative'}} isTooltip={shape === 'tooltip'} align={direction} closable={shape === 'balloon' && closable}>
+                {data}
+            </Balloon.Inner>
+        );
+    },
+    content: (shape) => ({
+        options: [
+            {
+                name: 'direction',
+                options: ALIGN_LIST,
+                default: 'b'
+            },
+            shape === 'balloon' && {
+                name: 'closable',
+                options: ['yes', 'no'],
+                default: 'yes'
+            }
+        ].filter(v => !!v),
+        transform: (props, { direction, closable }) => {
+            return {
+                ...props,
+                direction,
+                closable: closable === 'yes',
+            }
+        }
+    })
+};
diff --git a/docs/breadcrumb/adaptor/index.jsx b/docs/breadcrumb/adaptor/index.jsx
new file mode 100644
index 0000000000..1f5478ab02
--- /dev/null
+++ b/docs/breadcrumb/adaptor/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Breadcrumb } from '@alifd/next';
+import { Types, parseData } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Breadcrumb',
+    editor: () => ({
+        props: [{
+            name: 'ellipsis',
+            type: Types.bool,
+            default: false
+        }],
+        data: {
+            icon: true,
+            default: 'Home\nAll Categories\nWomen\'s Clothing\nBlouses & Shirts 78,999 T-shirts'
+        }
+    }),
+    adaptor: ({ ellipsis, data, ...others }) => {
+        const props = ellipsis ? { maxNode: 3 } : {};
+        const list = parseData(data).filter((it) => it.type === 'node');
+        return (
+            <Breadcrumb {...others} {...props}>
+                {
+                    list.map((item, index) => <Breadcrumb.Item key={`item_${index}`}>{item.value}</Breadcrumb.Item>)
+                }
+            </Breadcrumb>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'ellipsis',
+            options: ['yes', 'no'],
+            default: 'no'
+        }],
+        transform: (props, { ellipsis }) => {
+            return {
+                ...props,
+                ellipsis: ellipsis === 'yes'
+            };
+        }
+    })
+
+};
diff --git a/docs/button/adaptor/index.jsx b/docs/button/adaptor/index.jsx
new file mode 100644
index 0000000000..fa300952c1
--- /dev/null
+++ b/docs/button/adaptor/index.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { Types, ContentType, parseData, STATE_MARK } from '@alifd/adaptor-helper';
+import { Button, Icon } from '@alifd/next';
+
+const createContent = (list = []) => {
+    if (!Array.isArray(list)) return list;
+    return list.map(({ type, value }, index) => {
+        if (type === ContentType.icon) {
+            return <Icon type={value} key={`icon-${index}`} />;
+        }
+        return value;
+    });
+};
+
+export default {
+  name: 'Button',
+  shape: ['normal', 'text', 'warning', 'ghost', 'group'],
+  editor: (shape) => {
+    return {
+      props: [{
+        name: 'level',
+        type: Types.enum,
+        options: {
+          normal: ['normal', 'primary', 'secondary'],
+          text: ['normal', 'primary', 'secondary'],
+          warning: ['normal', 'primary'],
+          ghost: ['light', 'dark'],
+          group: ['normal', 'primary', 'secondary'],
+        }[shape],
+      }, {
+        name: 'size',
+        type: Types.enum,
+        options: ['large', 'medium', 'small'],
+        default: 'medium'
+      }],
+      data: {
+        icon: true,
+        ...(shape === 'group' ? {} : {
+          disable: true,
+          hover: true,
+        }),
+        default: shape === 'group' ? 'Button\nButton\nButton' : 'Button'
+      }
+    };
+  },
+  adaptor: ({ shape, level, size, data, ...others }) => {
+    const list = parseData(data, { parseContent: true });
+
+    const buttonProps = {
+      type: shape === 'ghost' ? 'normal' : level,
+      warning: shape === 'warning',
+      text: shape === 'text',
+      ghost: shape === 'ghost' ? level : false,
+    };
+
+    if (list.length === 1) {
+      const className = (others.className || '');
+      return <Button {...others} disabled={list[0].state === 'disabled'} className={list[0].state === 'hover' ? ['hover', className].join(' ') : className } size={size} {...buttonProps}>{createContent(list[0].value)}</Button>
+    }
+
+    return (
+      <Button.Group {...others} size={size}>
+        {
+          list.map((item, index) => <Button key={index} disabled={item.state === 'disabled'} className={item.state === 'hover' ? 'hover' : ''} {...buttonProps}>{createContent(item.value)}</Button>)
+        }
+      </Button.Group>
+    );
+  },
+  content(shape) {
+    if (shape === 'group') {
+      return {
+        options: [{
+          name: 'iconType',
+          options: ['none', 'arrow', 'onlyIcon'],
+          default: 'none'
+        }],
+        transform: (props, { iconType }) => {
+          if (iconType === 'arrow') {
+            return {
+              ...props,
+              data: ['[arrow-left]Go Back', 'Button', 'Go Forward[arrow-right]'].join('\n'),
+            };
+          }
+
+          if (iconType === 'onlyIcon') {
+            return {
+              ...props,
+              data: ['[set]', '[atm]', '[download]'].join('\n'),
+            };
+          }
+
+          return props;
+        }
+      };
+    }
+
+    return {
+      options: [{
+        name: 'iconType',
+        options: ['none', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'atm'],
+        default: 'none'
+      }],
+      transform: (props, { iconType }) => {
+        if (iconType === 'none') return props;
+        let { data } = props;
+        const icon = `[${iconType}]`;
+
+        if (['arrow-right', 'arrow-down', 'arrow-up'].indexOf(iconType) !== -1) {
+          data = data + icon;
+        } else {
+          data = Object.keys(STATE_MARK).filter(v => !!v).indexOf(data.substring(0, 1)) !== -1 ?
+            [data.substring(0, 1), icon, data.substring(1)].join('') : icon + data;
+        }
+
+        return {
+          ...props,
+          data
+        };
+      }
+    };
+  },
+  demoOptions(demo) {
+    const { node } = demo;
+    const { level } = node.props;
+    if (level === 'dark') {
+      return {
+        ...demo,
+        background: '#000',
+      };
+    }
+    return demo;
+  }
+};
diff --git a/docs/calendar/adaptor/index.jsx b/docs/calendar/adaptor/index.jsx
new file mode 100644
index 0000000000..cb6f7f384e
--- /dev/null
+++ b/docs/calendar/adaptor/index.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import moment from 'moment';
+import { Calendar } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+const now = new Date();
+
+
+export default {
+    name: 'Calendar',
+    shape: ['fullscreen', 'card', 'panel', 'rangePanel'],
+    editor: (shape) => {
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: ['day', 'month', 'year'].filter((level) => {
+                    if (level === 'year') return shape === 'panel';
+                    if (shape === 'rangePanel') return level === 'day';
+
+                    return true;
+                }),
+                default: 'day'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: shape === 'fullscreen' ? 600 : shape === 'rangePanel' ? 600 : 320,
+            }, {
+                name: 'date',
+                type: Types.string,
+                default: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
+            }]
+        };
+    },
+    adaptor: ({ shape, level, width, date, style = {}, ...others }) => {
+
+        if (shape === 'rangePanel') {
+            if (!Calendar.RangeCalendar) return null;
+
+            return (
+                <Calendar.RangeCalendar {...others}  style={{
+                    width,
+                    ...style
+                }} showOtherMonth startValue={moment(date)} endValue={moment(date).clone().add(1, 'months')} />
+            );
+        }
+        return (
+            <Calendar {...others} value={moment(date)} shape={shape} mode={level === 'day' ? 'date' : level} style={{
+                width,
+                ...style
+            }} />
+        );
+    }
+};
diff --git a/docs/card/adaptor/index.jsx b/docs/card/adaptor/index.jsx
new file mode 100644
index 0000000000..005ae47334
--- /dev/null
+++ b/docs/card/adaptor/index.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+let index = 0;
+export default {
+    name: 'Card',
+    editor: () => ({
+        props: [{
+            name: 'bullet',
+            type: Types.bool,
+            default: false,
+        }, {
+            name: 'divider',
+            type: Types.bool,
+            default: true,
+        }, {
+            name: 'expand',
+            label: 'Expaned',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'height',
+            label: 'Content Height',
+            type: Types.number,
+            default: 215,
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Title'
+        }, {
+            name: 'subTitle',
+            type: Types.string,
+            default: '',
+        }, {
+            name: 'extra',
+            type: Types.string,
+            default: '',
+        }],
+    }),
+    adaptor: ({ bullet, divider, expand, width, height, title, subTitle, extra, style, ...others }) => {
+        const cardStyle = {
+            width: width === 0 ? '' : width,
+            ...style,
+        };
+
+        return (
+            <Card {...others} key={`${expand}_${index++}`} locale={{ expand: 'Fold' }} title={title} showTitleBullet={bullet} subTitle={subTitle} extra={extra} showHeadDivider={divider} contentHeight={expand ? 'auto' : height - 1} style={cardStyle}>
+                <div style={{ height }}></div>
+            </Card>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'bullet',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }, {
+            name: 'divider',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'expanded',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'subTitle',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }, {
+            name: 'link',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }],
+        transform: (props, { bullet, divider, expanded, subTitle, link }) => {
+            return {
+                ...props,
+                bullet: bullet === 'show',
+                divider: divider === 'show',
+                expand: expanded === 'yes',
+                subTitle: subTitle === 'show' ? 'Sub Title' : '',
+                extra: link === 'show' ? 'Link' : '',
+            };
+        }
+    })
+};
diff --git a/docs/cascader-select/adaptor/index.jsx b/docs/cascader-select/adaptor/index.jsx
new file mode 100644
index 0000000000..03484ee531
--- /dev/null
+++ b/docs/cascader-select/adaptor/index.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { CascaderSelect } from '@alifd/next';
+
+let index = 1000;
+const createDataSource = (list, map = {}) => {
+    if (!list) return [];
+    return list.filter((item) => item.type === NodeType.node).map(({ value, children, state }) => {
+        const key = String(index++);
+        if (state === 'active') {
+            if (!children || children.length === 0) {
+                map.selecteds.push(key);
+            } else {
+                map.expandeds.push(key);
+            }
+        }
+
+        return {
+            value: key,
+            label: value,
+            disabled: state === 'disabled',
+            children: createDataSource(children, map),
+        };
+    });
+};
+export default {
+    name: 'CascaderSelect',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true,
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }],
+        data: {
+            active: true,
+            disabled: true,
+            icon: true,
+            default: '*1\n\t*1-1\n\t\t1-1-1\n\t\t1-1-2\n\t\t1-1-3\n\t\t1-1-4\n\t\t*1-1-5\n\t1-2\n\t1-3\n\t1-4\n\t1-5\n2\n\t2-1\n\t2-2\n\t2-3\n\t2-4\n\t2-5\n3\n\t3-1\n\t3-2\n\t3-3\n\t3-4\n\t3-5\n4\n\t4-1\n\t4-2\n\t4-3\n\t4-4\n\t4-5\n5\n\t5-1\n\t5-2\n\t5-3\n\t5-4\n\t5-5'
+        }
+    }),
+    adaptor: ({ shape, size, state, width, border, checkbox, label, data, style = {}, ...others}) => {
+        const list = parseData(data);
+        const map = { selecteds: [], expandeds: [] };
+        const dataSource = createDataSource(list, map);
+        const value = map.selecteds;
+
+        return (
+            <CascaderSelect  {...others} popupProps={{ needAdjust: false }} key={new Date().getTime()} defaultExpandedValue={map.expandeds} style={{ width: width <=0 ? '' : width, ...style }} label={label} popupContainer={node => node} hasBorder={border} size={size} multiple={checkbox} value={value} visible={state === 'expanded'} disabled={state=== 'disabled'} dataSource={dataSource}/>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'checkbox',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'border',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'label',
+            options: ['yes', 'no'],
+            default: 'no'
+        }],
+        transform: (props, { checkbox, border, label }) => {
+            return {
+                ...props,
+                checkbox: checkbox === 'yes',
+                border: border === 'show',
+                label: label === 'yes' ? 'Label' : ''
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props = {} } = node;
+        if (props.state === 'expanded') {
+            return { ...demo, height: 300 };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/cascader/adaptor/index.jsx b/docs/cascader/adaptor/index.jsx
new file mode 100644
index 0000000000..8a09f1fa53
--- /dev/null
+++ b/docs/cascader/adaptor/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Types, NodeType, parseData } from '@alifd/adaptor-helper';
+import { Cascader, Icon } from '@alifd/next';
+
+let index = 1000;
+const createDataSource = (list, map = {}) => {
+    if (!list) return [];
+    return list.filter((item) => item.type === NodeType.node).map(({ value, children, state }) => {
+        const key = String(index++);
+        if (state === 'active') {
+            if (!children || children.length === 0) {
+                map.selecteds.push(key);
+            } else {
+                map.expandeds.push(key);
+            }
+        }
+
+        return {
+            value: key,
+            label: value,
+            disabled: state === 'disabled',
+            children: createDataSource(children, map),
+        };
+    });
+}
+export default {
+    name: 'Cascader',
+    editor: () => ({
+        props: [{
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 120
+        }],
+        data: {
+            active: true,
+            disable: true,
+            icon: true,
+            default: 'Option1\n\tOption1-1\n\tOption1-2\n\tOption1-3\n\tOption1-4\n\tOption1-5\n\tOption1-6\nOption2\n\tOption2-1\n\tOption2-2\n\tOption2-3\n\tOption2-4\n\tOption2-5\n\tOption2-6\nOption3\n\tOption3-1\n\tOption3-2\n\tOption3-3\n\tOption3-4\n\tOption3-5\n\tOption3-6\nOption4\n\tOption4-1\n\tOption4-2\n\tOption4-3\n\tOption4-4\n\tOption4-5\n\tOption4-6\nOption5\n\tOption5-1\n\tOption5-2\n\tOption5-3\n\tOption5-4\n\tOption5-5\n\tOption5-6\nOption6\n\tOption6-1\n\tOption6-2\n\tOption6-3\n\tOption6-4\n\tOption6-5\n\tOption6-6',
+        }
+    }),
+    adaptor: ({ checkbox, width, data, ...others }) => {
+        const list = parseData(data);
+        const map = { selecteds: [], expandeds: [] };
+        const dataSource = createDataSource(list, map);
+        const value = map.selecteds;
+        const itemRender = ({ label = '' }) => {
+            return label.replace(/(\[.*?\])/g, '\n$1\n').split('\n').filter(v=> !!v)
+                .map((d, i) => {
+                    let icon;
+                    switch (true) {
+                        case /^\[(.*)\]$/.test(d):
+                            icon = RegExp.$1;
+                            if (!icon) return '';
+                            return <Icon style={{ marginRight: '4px' }} type={icon} size="small" key={icon + i} />;
+                        default:
+                            return d;
+                    }
+                });
+        };
+
+        return <Cascader {...others} itemRender={itemRender} canOnlySelectLeaf  listStyle={{ width: width <= 0 ? '' : width }} dataSource={dataSource} expandedValue={map.expandeds} value={value} multiple={checkbox} />;
+    }
+};
diff --git a/docs/checkbox/adaptor/index.jsx b/docs/checkbox/adaptor/index.jsx
new file mode 100644
index 0000000000..28b1ca3d1d
--- /dev/null
+++ b/docs/checkbox/adaptor/index.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Checkbox } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Checkbox',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'disabled', 'indeterminate', 'indeterminateHover', 'indeterminateDisabled', 'checked', 'checkedHover', 'checkedDisabled'],
+            default: 'normal'
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: 'pear'
+        }]
+    }),
+    adaptor: ({ state = '', label, className = '', ...others }) => {
+        const isHovered = ['hover', 'indeterminateHover', 'checkedHover'].indexOf(state) !== -1;
+        const isChecked = state.indexOf('checked') !== -1;
+        const isDisabled = ['disabled', 'indeterminateDisabled', 'checkedDisabled'].indexOf(state) !== -1;
+        const isIndeterminated = state.indexOf('indeterminate') !== -1;
+
+        return (
+            <Checkbox {...others} className={`${isHovered ? 'hovered' : ''} ${className}`} indeterminate={isIndeterminated} checked={isChecked} disabled={isDisabled}>{label}</Checkbox>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'label',
+            options: ['show', 'hide'],
+            default: 'show'
+        }],
+        transform: (props, { label }) => {
+            return {
+                ...props,
+                label: label === 'show' ? props.label : ''
+            };
+        },
+    })
+};
diff --git a/docs/collapse/adaptor/index.jsx b/docs/collapse/adaptor/index.jsx
new file mode 100644
index 0000000000..89225e473b
--- /dev/null
+++ b/docs/collapse/adaptor/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Collapse } from '@alifd/next';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Collapse',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }],
+        data: {
+            active: true,
+            disable: true,
+            default: '*Panel Header 1\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 2\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 3\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\n'
+        }
+    }),
+    adaptor: ({ state, width, data, style = {}, ...others }) => {
+        const list = parseData(data).filter(node => NodeType.node === node.type);
+        let expandedKeys = [];
+        const children = list.map(({ state, value, children }, index) => {
+            if (state === 'active') {
+                expandedKeys.push(`panel_${index}`);
+            }
+
+            return (
+                <Collapse.Panel disabled={state === 'disabled'} key={`panel_${index}`} title={value}>
+                    {children && children.length > 0 ? children[0].value : ''}
+                </Collapse.Panel>
+            );
+        });
+        return (
+            <Collapse {...others} style={{
+                minWidth: width,
+                ...style,
+            }} expandedKeys={state === 'disabled' ? [] : expandedKeys} disabled={state === 'disabled'}>
+                {
+                    children
+                }
+            </Collapse>
+        );
+    }
+};
diff --git a/docs/date-picker/adaptor/index.jsx b/docs/date-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..7a11c78f8a
--- /dev/null
+++ b/docs/date-picker/adaptor/index.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { DatePicker } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+import moment from 'moment';
+
+export default {
+    name: 'DatePicker',
+    shape: ['normal', {
+        value: 'range',
+        label: 'Range Picker'
+    }],
+    editor: (shape) => {
+        return {
+            props: [{
+                name: 'state',
+                type: Types.enum,
+                options: ['normal', 'expanded', 'selected', 'disabled'],
+                default: 'normal'
+            }, {
+                name: 'size',
+                type: Types.enum,
+                options: ['large', 'medium', 'small'],
+                default: 'medium'
+            }, {
+                name: 'type',
+                type: Types.enum,
+                options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+                default: shape === 'range' ? 'dateRange' : 'date'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: 288
+            }, {
+                name: 'label',
+                type: Types.string,
+                default: ''
+            }, {
+                name: 'placeholder',
+                type: Types.string,
+                default: shape === 'range' ? 'Start Date - End Date' : 'Please Select Date'
+            }]
+        }
+    },
+    adaptor: ({ shape, state, size, type, width, label, placeholder = '', style = {}, ...others }) => {
+        const now = moment();
+        style = {
+            minWidth: width,
+            ...style,
+        }
+
+        if (shape === 'range') {
+            return  (
+                <DatePicker.RangePicker
+                    {...others}
+                    visible={state === 'expanded'}
+                    disabled={state === 'disabled'}
+                    popupProps={{ needAdjust: false }}
+                    popupContainer={node => node}
+                    style={style}
+                    size={size}
+                    showTime={'dateTimeRange' === type}
+                    locale={{
+                        startPlaceholder: placeholder.split('-')[0],
+                        endPlaceholder: placeholder.split('-')[1]
+                    }}
+                    label={label}
+                    value={state !== 'normal' ? [now.clone(), now.clone().add(1, 'month')] : null}
+                />
+            );
+        }
+
+        return (
+            <DatePicker
+                {...others}
+                visible={state === 'expanded'}
+                disabled={state === 'disabled'}
+                popupProps={{ needAdjust: false }}
+                popupContainer={node => node}
+                style={style}
+                size={size}
+                showTime={'dateTime' === type}
+                placeholder={placeholder}
+                label={label}
+                value={state !== 'normal' ? now.clone() : null}
+            />
+        );
+    },
+    content: (shape) => ({
+        options: [{
+            name: 'type',
+            options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+            default: shape === 'range' ? 'dateRange' : 'date'
+        }, {
+            name: 'label',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }],
+        transform: (props, { type , label }) => {
+            return {
+                ...props,
+                type,
+                label: label === 'show' ? 'Label' : ''
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props = {} } = node;
+        if (props.state === 'expanded') {
+            return { ...demo, height: 300 };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/dialog/adaptor/index.jsx b/docs/dialog/adaptor/index.jsx
new file mode 100644
index 0000000000..8189cc2583
--- /dev/null
+++ b/docs/dialog/adaptor/index.jsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { Dialog, Message } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Dialog',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'alert', 'confirm'],
+            default: 'normal'
+        }, {
+            name: 'footerAlign',
+            type: Types.enum,
+            options: ['left', 'right', 'center'],
+            default: 'right'
+        }, {
+            name: 'okButtonPosition',
+            type: Types.enum,
+            options: ['left', 'right'],
+            default: 'left'
+        }, {
+            name: 'mask',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'height',
+            type: Types.number,
+            default: 160
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Welcome to Alibaba.com'
+        }],
+        data: {
+            default: 'Start your business here by searching a popular product'
+        }
+    }),
+    adaptor: ({ level, footerAlign, okButtonPosition, mask, width, height, title, style, className, data, ...others}) => {
+         const dialogStyle = {
+            position: mask ? 'absolute' : 'relative',
+            width: width,
+            ...(mask ? {
+                left: 20,
+                top: 20,
+            } : style),
+        };
+
+        const props = {
+            ...(mask ? {} : {...others }),
+            className: level === 'normal' ? className : `${className || ''} next-dialog-quick`,
+            style: dialogStyle,
+            footerAlign: footerAlign,
+            footerActions: okButtonPosition == 'left' ? ['ok', 'cancel'] : ['cancel', 'ok'],
+            locale: locale.Dialog,
+            height: `${height}px`
+        };
+
+        let dialog;
+        switch(level) {
+            case 'alert':
+                dialog = (
+                    <Dialog.Inner {...props}>
+                        <Message
+                            size="large"
+                            shape="addon"
+                            type="warning"
+                            title={title}
+                            className="next-dialog-message"
+                        >
+                            {data}
+                        </Message>
+                    </Dialog.Inner>
+                );
+                break;
+            case 'confirm':
+                dialog = (
+                    <Dialog.Inner {...props}>
+                        <Message
+                            size="large"
+                            shape="addon"
+                            type="help"
+                            title={title}
+                            className="next-dialog-message"
+                        >
+                            {data}
+                        </Message>
+                    </Dialog.Inner>
+                );
+                break;
+            default:
+                dialog = <Dialog.Inner {...props} title={title}>{data}</Dialog.Inner>
+                break;
+        }
+
+        return mask ? (
+            <div className={`next-overlay-wrapper opened ${ className }`} {...others} style={{ position: 'relative', width: width + 40, height: height + 40, ...style }}>
+                <div className="next-overlay-backdrop" style={{ position: 'relative' }} />
+                {dialog}
+            </div>
+        ) : dialog;
+    },
+    content: () => ({
+        options: [{
+            name: 'title',
+            options: ['show', 'hide'],
+            default: 'show',
+        }, {
+            name: 'overlay',
+            options: ['show', 'hide'],
+            default: 'hide',
+        }, {
+            name: 'footerAlign',
+            options: ['left', 'center', 'right'],
+            default: 'right'
+        }, {
+            name: 'okButtonPosition',
+            options: ['left', 'right'],
+            default: 'right'
+        }],
+        transform: (props, { title, overlay, footerAlign, okButtonPosition }) => {
+            return {
+                ...props,
+                title: title === 'hide' ? '' : title,
+                mask: overlay === 'show',
+                footerAlign,
+                okButtonPosition,
+            };
+        }
+    })
+}
diff --git a/docs/input/adaptor/index.jsx b/docs/input/adaptor/index.jsx
new file mode 100644
index 0000000000..82d4878343
--- /dev/null
+++ b/docs/input/adaptor/index.jsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Input  } from '@alifd/next';
+
+export default {
+    name: 'Input',
+    shape: [{
+        label: 'Textfield',
+        value: 'textfield'
+    }, {
+        label: 'Textarea',
+        value: 'textarea'
+    }, {
+        label: 'Addon',
+        value: 'addon'
+    }],
+    editor: (shape = 'textfield') => {
+        return {
+            props: [...(
+                shape === 'textarea' ? [] : [{
+                    name: 'size',
+                    type: Types.enum,
+                    options: ['large', 'medium', 'small'],
+                    default: 'medium'
+                }]
+            ), ...(
+                shape === 'addon' ? [] : [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'focused', 'disabled', 'error', ...(shape === 'textfield' ? ['success', 'loading'] : [])],
+                    default: 'normal'
+                }]
+            ), {
+                name: 'widget',
+                type: Types.enum,
+                options: shape === 'textarea' ? ['none', 'length'] : ['none', 'length', 'clear'],
+                default: 'none'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: 200
+            },
+            ...(shape === 'textarea' ? [{
+                name: 'rows',
+                type: Types.number,
+                default: 4,
+            }] : []),
+            ...(shape !== 'addon' ? [{
+                name: 'border',
+                type: Types.bool,
+                default: true,
+            }] : []),
+            {
+                name: 'label',
+                type: Types.string,
+                default: ''
+            }, {
+                name: 'placeholder',
+                type: Types.string,
+                default: 'Please Input'
+            },
+            ...(shape === 'addon' ? [{
+                name: 'prefix',
+                type: Types.string,
+                default: 'https://'
+            }, {
+                name: 'suffix',
+                type: Types.string,
+                default: '.com'
+            }] : [])],
+            data: {
+                default: shape === 'textarea' ? 'multiple line' : shape === 'addon' ? 'alibaba' : ''
+            }
+        };
+    },
+    adaptor: ({
+        shape,
+        size,
+        state,
+        widget,
+        width,
+        rows,
+        border,
+        label,
+        placeholder,
+        prefix = '',
+        suffix = '',
+        style = {},
+        className = '',
+        data,
+        ...others
+    }) => {
+        const props = {
+            ...others,
+            label,
+            hasBorder: border,
+            placeholder,
+            className,
+            style: {
+                width,
+                ...style
+            },
+            value: data
+        };
+
+        if (widget === 'length') {
+            props.hasLimitHint = true;
+            props.maxLength = 15;
+        } else if (widget === 'clear') {
+            props.hasClear = true;
+        }
+
+        if (size) {
+            props.size = size;
+        }
+
+        switch(state) {
+            case 'focused':
+                props.className = `${className} next-focus`;
+                break;
+            case 'disabled':
+                props.disabled = true;
+                break;
+            case 'error':
+            case 'loading':
+            case 'success':
+                props.state = state;
+                break;
+            default: break;
+        }
+
+
+        if (rows && rows > 0) {
+            props.rows = rows;
+        }
+
+        if (shape === 'addon') {
+            props.addonTextAfter = suffix;
+            props.addonTextBefore = prefix;
+        }
+
+        if (shape === 'textarea') {
+            return <Input.TextArea {...props}/>;
+        }
+
+        return <Input {...props} />;
+    },
+    content: (shape) => {
+        if (shape === 'textfield') {
+            return {
+                options: [{
+                    name: 'clear',
+                    options: ['show', 'hide'],
+                    default: 'hide',
+                }],
+                transform: (props, { clear }) => {
+                    return {
+                        ...props,
+                        widget: clear === 'show' ? 'clear' : 'none',
+                        data: clear === 'show' ? 'Input ...' : props.value,
+                    };
+                }
+            };
+        }
+
+        return {
+            options: [],
+            transform: p => p
+        };
+    }
+};
diff --git a/docs/loading/adaptor/index.jsx b/docs/loading/adaptor/index.jsx
new file mode 100644
index 0000000000..f81f8b148d
--- /dev/null
+++ b/docs/loading/adaptor/index.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Loading } from '@alifd/next';
+
+export default {
+    name: 'Loading',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: 'enum',
+            options: ['large', 'medium'],
+            default: 'medium'
+        }],
+    }),
+    adaptor: ({ size, ...others }) => {
+        return <Loading {...others} size={size}><div style={{ textAlign: 'center', padding: '20px', display: 'block' }}/></Loading>;
+    }
+};
diff --git a/docs/menu-button/adaptor/index.jsx b/docs/menu-button/adaptor/index.jsx
new file mode 100644
index 0000000000..1c67e72b5d
--- /dev/null
+++ b/docs/menu-button/adaptor/index.jsx
@@ -0,0 +1,195 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { MenuButton, Menu, Icon } from '@alifd/next';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Menu.SubMenu>
+        );
+    }
+
+    return <Menu.Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+export default {
+    name: 'MenuButton',
+    shape: ['normal', 'text', 'ghost'],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'text' ? ['normal', 'primary'] : shape === 'ghost' ? ['light', 'dark'] : ['normal', 'primary', 'secondary'],
+            default: shape === 'ghost' ? 'light' : 'normal',
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }],
+        data: {
+            icon: true,
+            active: true,
+            disable: true,
+            default: 'Edit Document\n\tUndo\n\t*Redo\n\tCut\n\tCopy\n\tPaste'
+        }
+    }),
+    adaptor: ({ shape, level, size, data, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const buttonItem = list[0] ? list[0] : { value: []};
+
+        if (buttonItem.type !== 'node') return null;
+
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list[0] ? list[0].children : [], keys);
+
+        const label = buttonItem.value.map(({ type, value}) => {
+            if (type === 'icon') return <Icon type={value} />;
+            return value;
+        });
+
+        return (
+            <MenuButton
+                {...others}
+                size={size}
+                disabled={buttonItem.state === 'disabled'}
+                visible={buttonItem.state === 'active'}
+                type={shape === 'ghost' ? 'normal' : level}
+                popupProps={{ needAdjust: false }}
+                popupContainer={node => node}
+                ghost={shape === 'ghost' ? level : false}
+                selectMode="multiple"
+                text={shape === 'text'}
+                menuProps={{ openKeys: keys.expanded, style: { textAlign: 'left' } }}
+                selectedKeys={keys.selected}
+                label={label}
+            >
+                {createContents(dataSouce)}
+            </MenuButton>
+        );
+    },
+    demoOptions: (demo) => {
+        const { node = { props: {} } } = demo;
+        const { level, data } = node.props;
+        if (data.indexOf('*') === 0) {
+            demo = {
+                ...demo,
+                height: 250
+            };
+        }
+
+        if (level === 'dark') {
+            demo = {
+                ...demo,
+                background: '#333'
+            };
+        } else if(level === 'light') {
+            demo = {
+                ...demo,
+                background: 'rgb(235, 236, 240)',
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/menu/adaptor/index.jsx b/docs/menu/adaptor/index.jsx
new file mode 100644
index 0000000000..6bf1700d22
--- /dev/null
+++ b/docs/menu/adaptor/index.jsx
@@ -0,0 +1,190 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+import { Menu, Icon } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item, selectType) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children, selectType)}
+            </Menu.SubMenu>
+        );
+    }
+
+    let Item = Menu.Item;
+
+    if (selectType === 'checkbox') {
+        Item = Menu.CheckboxItem;
+    } else if (selectType === 'radio') {
+        Item = Menu.RadioItem;
+    }
+
+    return <Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = [], selectType) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it, selectType))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item, selectType);
+    });
+};
+
+export default {
+    name: "Menu",
+    editor: () => ({
+        props: [{
+            name: 'selectType',
+            type: Types.enum,
+            options: ['checkbox', 'radio', 'checkLeft', 'checkRight'],
+            default: 'checkLeft'
+        }, {
+            name: 'nestMode',
+            type: Types.enum,
+            options: ['inline', 'popup'],
+            default: 'inline',
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 150
+        }],
+        data: {
+            active: true,
+            disable: true,
+            group: true,
+            icon: true,
+            default: '#Group1\noption1\n*option2\n\tsub option3\n\t-sub option4\n\tsub option5\n---\n#Group2\noption1\n*option2'
+        }
+    }),
+    adaptor: ({ selectType, nestMode, width, style, data, ...others }) => {
+        const list = parseData(data, { parseContent: true });
+        const keys = { selected: [], expanded: [] };
+        const array = createDataSouce(list, keys);
+
+        return (
+            <Menu {...others} selectMode="multiple" popupProps={{ needAdjust: false, container: node => node }} isSelectIconRight={selectType === 'checkRight'} openKeys={keys.expanded} selectedKeys={keys.selected} style={{ width, ...style }} mode={nestMode === 'popup' ? 'popup' : 'inline'}>
+                {
+                    createContents(array, selectType)
+                }
+            </Menu>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'group',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'icon',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'selectType',
+            options: ['checkbox', 'radio', 'checkLeft', 'checkRight'],
+            default: 'checkLeft',
+        }],
+        transform: (props, { group, icon, selectType }) => {
+            const iconStr = icon === 'yes' ? '[picture]' : '';
+            const prefix = (props.data || '').indexOf('*') !== -1 ? '*' : (props.data || '').indexOf('-') !== -1 ? '-' : '';
+            if (group === 'yes') {
+                props.data = `#group1\n${prefix}${iconStr}option1\n${iconStr}option2\n---\n#group2\n${iconStr}option3\n${iconStr}option4`;
+            } else if (icon === 'yes') {
+                props.data = `${iconStr}option1\n${iconStr}option2\n${iconStr}option3\n${iconStr}option4`;
+            }
+            return {
+                ...props,
+                selectType,
+            };
+        }
+    })
+};
diff --git a/docs/message/adaptor/index.jsx b/docs/message/adaptor/index.jsx
new file mode 100644
index 0000000000..201a57371c
--- /dev/null
+++ b/docs/message/adaptor/index.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Message } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Message',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['inline', 'toast', 'addon'],
+            default: 'inline'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['success', 'warning', 'error', 'notice', 'help', 'loading'],
+            default: 'success',
+        }, {
+            name: 'closable',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Title'
+        }],
+        data: {
+            default: 'This item already has the label "travel", you can add a new label.'
+        }
+    }),
+    adaptor: ({ level, size, state, closable, width, title, data, style, ...others}) => {
+        return (
+            <Message {...others} shape={level} style={{ width: width || '', ...style}} closeable={closable} type={state} size={size} title={title}>{data}</Message>
+        );
+    }
+};
diff --git a/docs/nav/adaptor/index.jsx b/docs/nav/adaptor/index.jsx
new file mode 100644
index 0000000000..eb54ff844b
--- /dev/null
+++ b/docs/nav/adaptor/index.jsx
@@ -0,0 +1,187 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+import { Nav } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    const { value } = (item.value || []).find(item => item.type === ContentType.icon) || {};
+    if (item.children.length > 0) {
+        return (
+            <Nav.SubNav key={item.key} icon={value} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Nav.SubNav>
+        );
+    }
+
+    return <Nav.Item key={item.key} icon={value} className={item.state === 'hover' ? 'next-focused' : ''} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? null : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Nav.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Nav.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Nav.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+
+export default {
+    name: 'Nav',
+    shape: [{
+        label: 'Horizontal',
+        value: 'hoz'
+    }, {
+        label: 'Vertical',
+        value: 'ver'
+    }],
+    editor: (shape = 'hoz') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'primary', 'secondary', 'line'],
+            default: 'normal'
+        }, {
+            name: 'selectLinePosition',
+            type: Types.enum,
+            options: shape === 'hoz' ? ['top', 'bottom', 'none'] : ['left', 'right', 'none'],
+            default: shape === 'hoz' ? 'bottom' : 'right'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: shape === 'hoz' ? 640 : 200
+        },
+        ...(shape === 'ver' ? [{
+            name: 'height',
+            type: Types.number,
+            default: shape === 'hoz' ? '' : 600
+        }, {
+            name: 'iconOnly',
+            type: Types.bool,
+            default: false,
+        }] : [])],
+        data: {
+            active: true,
+            hover: true,
+            group: true,
+            icon: true,
+            default: `[account]Nav Item 1\n[account]Nav Item 2\n[account]Nav Item 3\n${shape === 'ver' ? '*' : ''}[account]Nav Item 4\n\t[account]Option 1\n\t[account]Option 2\n\t[account]Option 3\n\t[account]Option 4`
+        }
+    }),
+    adaptor: ({ shape, level, selectLinePosition, width, height, data, style, iconOnly = false, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list, keys);
+
+        return (
+            <Nav
+                {...others}
+                type={level}
+                direction={shape}
+                iconOnly={iconOnly}
+                openKeys={keys.expanded}
+                selectedKeys={keys.selected}
+                activeDirection={
+                    selectLinePosition === 'none' ?
+                        null :
+                        selectLinePosition
+                }
+                style={{
+                    width,
+                    height,
+                    ...style
+                }}
+            >
+                {createContents(dataSouce)}
+            </Nav>
+        );
+    }
+};
diff --git a/docs/number-picker/adaptor/index.jsx b/docs/number-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..cc7243ca3c
--- /dev/null
+++ b/docs/number-picker/adaptor/index.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { NumberPicker } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'NumberPicker',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'inline'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 80
+        }, {
+            name: 'value',
+            type: Types.number,
+            default: 1
+        }]
+    }),
+    adaptor: ({ level, size, state, width, value, style, ...others }) => {
+        return <NumberPicker {...others} style={{ minWidth: width, ...style }} disabled={state === 'disabled'} value={value} size={size} type={level} />
+    }
+};
diff --git a/docs/pagination/adaptor/index.jsx b/docs/pagination/adaptor/index.jsx
new file mode 100644
index 0000000000..f47110dc22
--- /dev/null
+++ b/docs/pagination/adaptor/index.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Pagination } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+import enUS from '../../../src/locale/en-us';
+
+export default {
+    name: 'Pagination',
+    shape: ['normal', 'simple', 'mini'],
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'sizeSelector',
+            type: Types.enum,
+            options: ['none', 'filter', 'dropdown'],
+            default: 'none'
+        }, {
+            name: 'control',
+            type: Types.enum,
+            options: ['textAndIcon', 'onlyIcon', 'noBorder'],
+            default: 'textAndIcon'
+        }]
+    }),
+    adaptor: ({ shape, size, sizeSelector, control, ...others}) => {
+        return (
+            <Pagination
+                {...others}
+                type={shape}
+                size={size}
+                current={4}
+                shape={{
+                    textAndIcon: 'normal',
+                    onlyIcon: 'arrow-only',
+                    noBorder: 'no-border'
+                }[control]}
+                locale={enUS.Pagination}
+                pageSizeSelector={sizeSelector === 'none' ? false : sizeSelector}
+            />
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'control',
+            options: ['textAndIcon', 'onlyIcon', 'noBorder'],
+            default: 'textAndIcon'
+        }],
+        transform: (props, { control }) => {
+            return {
+                ...props,
+                control
+            };
+        }
+    })
+};
diff --git a/docs/paragraph/adaptor/index.jsx b/docs/paragraph/adaptor/index.jsx
new file mode 100644
index 0000000000..2c4ade5c32
--- /dev/null
+++ b/docs/paragraph/adaptor/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Paragraph } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Paragraph',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }],
+        data: {
+            default: `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.`
+        }
+    }),
+    adaptor: ({ size, width, style, data, ...others }) => {
+        return (<Paragraph {...others} style={{ width: width, ...style }} size={size} type={size === 'meidum' ? 'long' : 'short'}>{data}</Paragraph>);
+    }
+};
diff --git a/docs/progress/adaptor/index.jsx b/docs/progress/adaptor/index.jsx
new file mode 100644
index 0000000000..b2d4522ed5
--- /dev/null
+++ b/docs/progress/adaptor/index.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Progress } from '@alifd/next';
+
+export default {
+    name: 'Progress',
+    shape: ['line', 'circle'],
+    editor: (shape = 'line') => {
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: ['normal', 'success', 'error'],
+                default: 'normal'
+            }, {
+                name: 'size',
+                type: Types.enum,
+                options: ['large', 'medium', 'small'],
+                default: 'medium'
+            }, {
+                name: 'mode',
+                type: Types.enum,
+                options: ['basic', 'staging'],
+                default: 'basic'
+            }, {
+                name: 'text',
+                type: Types.bool,
+                default: false
+            },
+            ...(
+                shape === 'line' ?
+                    [{
+                        name: 'border',
+                        type: Types.bool,
+                        default: false
+                    }, {
+                        name: 'width',
+                        type: Types.number,
+                        default: 200
+                    }] :
+                    []
+            ),
+            {
+                name: 'percent',
+                type: Types.number,
+                default: 25
+            }]
+        };
+    },
+    adaptor: ({ shape, level, size, mode, text, border, width, percent, style, ...others }) => {
+        return (
+            <Progress {...others} style={{
+                width: width || '',
+                ...style,
+            }} shape={shape} size={size} textRender={(percent) => text ? `${Math.floor(percent)}%` : false} percent={percent} state={level} progressive={mode === 'staging'} hasBorder={border} />
+        );
+    },
+    content: (shape = 'line') => ({
+        options: [{
+            name: 'staging',
+            options: ['none', 'started', 'middle', 'finishing'],
+            default: 'none'
+        }, {
+            name: 'text',
+            options: ['show', 'hide'],
+            default: shape === 'cirlce' ? 'show' : 'hide'
+        }, {
+            name: 'border',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }].filter(({ name }) => name !== 'border' || shape === 'line'),
+        transform: (props, { staging, text, border }) => {
+            switch (staging) {
+                case 'started':
+                    props = {
+                        ...props,
+                        percent: 20,
+                        mode: 'staging'
+                    };
+                    break;
+                case 'middle':
+                    props = {
+                        ...props,
+                        percent: 60,
+                        mode: 'staging'
+                    };
+                    break;
+                case 'finishing':
+                    props = {
+                        ...props,
+                        percent: 85,
+                        mode: 'staging'
+                    };
+                    break;
+                default: break;
+            }
+
+            return {
+                ...props,
+                text: text === 'show',
+                border: border === 'show'
+            };
+        }
+    })
+
+};
diff --git a/docs/radio/adaptor/index.jsx b/docs/radio/adaptor/index.jsx
new file mode 100644
index 0000000000..467c772c72
--- /dev/null
+++ b/docs/radio/adaptor/index.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Radio } from '@alifd/next';
+
+export default {
+    name: 'Radio',
+    shape: ['normal', {value: 'button', label: 'Radio Button'}],
+    editor: (shape = 'normal') => {
+        if (shape === 'button') {
+            return {
+                props: [{
+                    name: 'size',
+                    type: Types.enum,
+                    options: ['large', 'medium', 'small'],
+                    default: 'medium'
+                }, {
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }],
+                data: {
+                    hover: true,
+                    disable: true,
+                    active: true,
+                    default: `Cell 1\n*Cell 2\nCell 3`
+                }
+            };
+        }
+        return {
+            props: [{
+                name: 'state',
+                type: Types.enum,
+                options: ['normal', 'hover', 'disabled', 'checked', 'checkedHover', 'checkedDisabled'],
+                default: 'normal'
+            }, {
+                name: 'label',
+                type: Types.string,
+                default: 'label'
+            }],
+        }
+    },
+    adaptor: ({ shape, size, state = '', label, data,  ...others }) => {
+        if (shape === 'normal') {
+            return (
+                <Radio
+                    {...others}
+                    disabled={['disabled', 'checkedDisabled'].indexOf(state) !== -1}
+                    className={`${others.className || ''} ${['hover', 'checkedHover'].indexOf(state) !== -1 ? 'hovered' : ''}`}
+                    checked={state.indexOf('checked') !== -1}
+                    label={label}
+                />
+            );
+        }
+
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+
+        return (
+            <Radio.Group {...others} size={size} shape="button" value={list.findIndex(item => item.state === 'active')}>
+                {
+                    list.map((item, index) => <Radio key={`key_${index}`} className={item.state === 'hover' ? 'hovered' : ''} value={index} disabled={item.state === 'disabled' || state === 'disabled'}>{item.value}</Radio>)
+                }
+            </Radio.Group>
+        );
+
+    }
+
+};
+
diff --git a/docs/range/adaptor/index.jsx b/docs/range/adaptor/index.jsx
new file mode 100644
index 0000000000..4047a4b8c7
--- /dev/null
+++ b/docs/range/adaptor/index.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Range } from '@alifd/next';
+
+export default {
+    name: 'Range',
+    shape: [{
+        label: 'Basic',
+        value: 'basic'
+    }, {
+        label: 'With Scale',
+        value: 'scale',
+    }],
+    editor: () => ({
+        props: [{
+            name: 'level',
+            label: 'Selection Mode',
+            type: Types.enum,
+            options: ['single', 'double'],
+            default: 'single'
+        }, {
+            name: 'type',
+            type: Types.enum,
+            options: ['basic', 'scale'],
+            default: 'basic'
+        }, {
+            name: 'scalePosition',
+            type: Types.enum,
+            options: ['above', 'below'],
+            default: 'above'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'clicked', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'start',
+            type: Types.number,
+            default: 0
+        }, {
+            name: 'end',
+            type: Types.number,
+            default: 35
+        }],
+    }),
+    adaptor: ({ shape, level, type, scalePosition, state, width, start, end, style, className, ...others }) => {
+        return (
+            <Range
+                {...others}
+                style={{ width, ...style }}
+                className={`${className || ''} ${state === 'hover' ? 'simulation-hover' : state === 'clicked' ? 'simulation-click' : ''}`}
+                slider={level}
+                value={level === 'double' ? [start, end] : end}
+                marks={shape === 'scale' || type === 'scale' ? 10 : false}
+                marksPosition={scalePosition}
+                disabled={state === 'disabled'}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props } = node;
+        if (props.level === 'double') {
+            props.start = 20;
+            props.end = 60;
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/rating/adaptor/index.jsx b/docs/rating/adaptor/index.jsx
new file mode 100644
index 0000000000..02d00d69cb
--- /dev/null
+++ b/docs/rating/adaptor/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Rating } from '@alifd/next';
+
+export default {
+    name: 'Rating',
+    editor: () => ({
+        props: [{
+            name: 'type',
+            type: Types.enum,
+            options: ['normal', 'level'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'value',
+            type: Types.number,
+            default: 3
+        }]
+    }),
+    adaptor: ({ type, size, value }) => {
+        return <Rating showGrade={type === 'level'} value={value} size={size} />;
+    }
+};
diff --git a/docs/search/adaptor/index.jsx b/docs/search/adaptor/index.jsx
new file mode 100644
index 0000000000..0ce0008432
--- /dev/null
+++ b/docs/search/adaptor/index.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Search } from '@alifd/next';
+
+export default {
+    name: 'Search',
+    shape: [{
+        value: 'normal',
+        label: 'Basic'
+    }, {
+        value: 'simple',
+        label: 'Simple'
+    }],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'simple' ? ['normal', 'dark'] : ['normal', 'primary', 'secondary', 'dark'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'menu',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Input'
+        },
+        ...(
+            shape === 'normal' ? [{
+                name: 'label',
+                type: Types.bool,
+                default: true
+             }] : []
+        ), {
+            name: 'width',
+            type: Types.number,
+            default: shape === 'normal' ? 400 : 380
+        }]
+    }),
+    adaptor: ({ shape, level, size, menu, label, width, style, ...others }) => {
+        return (
+            <Search
+                {...others}
+                filterProps={{ placeholder: 'Please Select'}}
+                style={{ width, ...style }}
+                shape={shape}
+                searchText={label ? 'Search' : ''}
+                filter={menu ? [{ label: 'temp', value: 'temp' }] : []}
+                type={level}
+                size={size}
+            />
+        );
+    },
+    content: (shape) => ({
+        options: [{
+            name: 'menu',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'buttonLabel',
+            options: ['show', 'hide'],
+            default: 'show'
+        }].filter(({ name }) => name !== 'buttonLabel' || shape === 'normal'),
+        transform: (props, { menu, buttonLabel }) => {
+            return {
+                ...props,
+                menu: menu === 'show',
+                label: buttonLabel === 'show'
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'dark') {
+            return {
+                ...demo,
+                background: '#333'
+            };
+        }
+        return  {
+            ...demo
+        };
+    }
+};
+
diff --git a/docs/select/adaptor/index.jsx b/docs/select/adaptor/index.jsx
new file mode 100644
index 0000000000..b2509b3c11
--- /dev/null
+++ b/docs/select/adaptor/index.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Select } from '@alifd/next';
+
+export default {
+    name: 'Select',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            label: 'Type',
+            type: Types.enum,
+            options: ['single', 'multiple'],
+            default: 'single'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 200
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select'
+        }],
+        data: {
+            disable: true,
+            active: true,
+            default: 'Option 1\n*Option 2\nOption 3\nOption 4\nOption 5'
+        }
+    }),
+    adaptor: ({ level, size, state, border, width, label, placeholder, data, style, ...others }) => {
+        const list = parseData(data).filter(({ type }) => NodeType.node === type);
+        const dataSource = [];
+        const value = [];
+
+        list.forEach((item, index) => {
+            dataSource.push({
+                label: item.value,
+                value: index,
+                disabled: item.state === 'disabled'
+            });
+            if (item.state === 'active') {
+                value.push(index);
+            }
+        });
+
+        return (
+            <Select
+                {...others}
+                style={{
+                    width,
+                    ...style,
+                }}
+                mode={level}
+                size={size}
+                visible={state === 'expanded'}
+                popupContainer={node => node}
+                popupProps={{ needAdjust: false }}
+                dataSource={dataSource}
+                disabled={state === 'disabled'}
+                value={level === 'single' ? value[0] : value}
+                label={label}
+                placeholder={placeholder}
+                hasBorder={border}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            return {
+                ...demo,
+                height: 300
+            };
+        }
+
+        if (demo.node.props.state === 'normal') {
+            demo.node.props.data = demo.node.props.data.replace('*', '');
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/slider/adaptor/index.jsx b/docs/slider/adaptor/index.jsx
new file mode 100644
index 0000000000..a924f64b2f
--- /dev/null
+++ b/docs/slider/adaptor/index.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Slider } from '@alifd/next';
+
+const banners = [
+    'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
+    'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
+    'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
+    'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg'
+];
+
+const cards = [
+    'https://img.alicdn.com/bao/uploaded/i3/TB1YHwUNpXXXXaNXXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
+    'https://img.alicdn.com/bao/uploaded/i3/TB1SyBLNpXXXXb4aXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
+    'https://img.alicdn.com/bao/uploaded/i3/TB1NllZLXXXXXcPXpXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
+    'https://img.alicdn.com/bao/uploaded/i4/TB1v3A7KpXXXXa0aXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
+    'https://img.alicdn.com/bao/uploaded/i2/TB1FOfLMVXXXXacapXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg'
+];
+
+export default {
+    name: 'Slider',
+    shape: ['banner', 'card'],
+    editor: (shape) => ({
+      props: [...(shape === 'card' ? [{
+        name: 'level',
+        type: Types.enum,
+        options: [{ label: 'Vertical', value: 'ver'}, {label: 'Horizontal', value: 'hoz' }],
+        default: 'hoz'
+    }] : []), {
+          name: 'arrow',
+          type: Types.bool,
+          default: true
+      }, {
+          name: 'dot',
+          type: Types.bool,
+          default: true
+      }, {
+          name: 'arrowSize',
+          type: Types.enum,
+          options: ['large', 'medium'],
+          default: 'medium'
+      }, {
+          name: 'width',
+          type: Types.number,
+          default: 500
+      }, {
+          name: 'height',
+          type: Types.number,
+          default: 150
+      }, {
+          name: 'imageNumber',
+          type: Types.number,
+          default: 4
+      }],
+    }),
+    adaptor: ({ shape, level = 'hoz', arrow, dot, arrowSize, width, height, imageNumber, style, ...others }) => {
+
+        const slides = [];
+
+        for (let i = 0; i < imageNumber; i++) {
+            const images = shape === 'banner' ? banners : cards;
+            const imageURL = images[i % images.length];
+            slides.push(
+                <div key={i}>
+                    <img style={{ width:  level === 'ver' || shape === 'banner' ? width : width / imageNumber, height: level === 'ver'  ? height / imageNumber : height}} src={imageURL} alt="image" />
+                </div>
+            );
+        }
+
+        return (
+            <Slider
+                {...others}
+                style={{
+                    width,
+                    ...style
+                }}
+                key={new Date().getTime()}
+                slideDirection={level}
+                arrowDirection={level}
+                arrowPosition={shape === 'card' ? 'outer' : 'inner'}
+                infinite={false}
+                arrows={arrow}
+                dots={dot}
+                arrowSize={arrowSize}
+                slidesToShow={shape === 'banner' ? 1 : imageNumber}
+                slidesToScroll={1}
+            >
+                {slides}
+            </Slider>
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'ver') {
+            demo.node.props.height = 600;
+            demo.node.props.width = 150;
+        }
+        return demo;
+    }
+};
diff --git a/docs/split-button/adaptor/index.jsx b/docs/split-button/adaptor/index.jsx
new file mode 100644
index 0000000000..ee0ba2ff20
--- /dev/null
+++ b/docs/split-button/adaptor/index.jsx
@@ -0,0 +1,193 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { SplitButton, Menu, Icon } from '@alifd/next';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Menu.SubMenu>
+        );
+    }
+
+    return <Menu.Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+export default {
+    name: 'SplitButton',
+    shape: ['normal', 'ghost'],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'ghost' ? ['light', 'dark'] : ['normal', 'primary', 'secondary'],
+            default: shape === 'ghost' ? 'light' : 'normal',
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }],
+        data: {
+            icon: true,
+            active: true,
+            disable: true,
+            default: 'Edit Document\n\tUndo\n\t*Redo\n\tCut\n\tCopy\n\tPaste'
+        }
+    }),
+    adaptor: ({ shape, level, size, data, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const buttonItem = list[0] ? list[0] : { value: []};
+
+        if (buttonItem.type !== 'node') return null;
+
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list[0] ? list[0].children : [], keys);
+
+        const label = buttonItem.value.map(({ type, value}) => {
+            if (type === 'icon') return <Icon type={value} />;
+            return value;
+        });
+
+        return (
+            <SplitButton
+                {...others}
+                size={size}
+                disabled={buttonItem.state === 'disabled'}
+                visible={buttonItem.state === 'active'}
+                type={shape === 'ghost' ? 'normal' : level}
+                popupProps={{ needAdjust: false, container: node => node }}
+                ghost={shape === 'ghost' ? level : false}
+                selectMode="multiple"
+                menuProps={{ openKeys: keys.expanded, style: { textAlign: 'left' } }}
+                selectedKeys={keys.selected}
+                label={label}
+            >
+                {createContents(dataSouce)}
+            </SplitButton>
+        );
+    },
+    demoOptions: (demo) => {
+        const { node = { props: {} } } = demo;
+        const { level, data } = node.props;
+        if (data.indexOf('*') === 0) {
+            demo = {
+                ...demo,
+                height: 250
+            };
+        }
+
+        if (level === 'dark') {
+            demo = {
+                ...demo,
+                background: '#333'
+            };
+        } else if(level === 'light') {
+            demo = {
+                ...demo,
+                background: 'rgb(235, 236, 240)',
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/step/adaptor/index.jsx b/docs/step/adaptor/index.jsx
new file mode 100644
index 0000000000..daca14978c
--- /dev/null
+++ b/docs/step/adaptor/index.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { Types, parseData, NodeType, ContentType } from '@alifd/adaptor-helper';
+import { Step } from '@alifd/next';
+
+export default {
+    name: 'Step',
+    shape: ['circle', 'arrow', 'dot'],
+    editor: (shape) => {
+        if (shape === 'arrow') {
+            return {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }],
+                data: {
+                    active: true,
+                    disabled: true,
+                    default:  'Step 1\nStep 2\n*Step 3\nStep 4'
+                }
+            };
+        }
+
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: [{ value: 'hoz', label: 'Horizontal' }, { value: 'ver', label: 'Vertical' }]
+            },
+            ...(
+                shape === 'circle' ? [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'percent', 'disabled'],
+                    default: 'normal'
+                }, {
+                    name: 'location',
+                    type: Types.enum,
+                    options: ['down', 'right'],
+                    default: 'down'
+
+                }] : [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }]
+            ), {
+                name: 'width',
+                type: Types.number,
+                default: 600
+            }, {
+                name: 'height',
+                type: Types.number,
+                default: 300
+            }],
+            data: {
+                active: true,
+                disabled: true,
+                default: 'Step 1\n\tOpen the door Put the elephant into the fridge\n*Step 2\n\tOpen the door Put the elephant into the fridge\nStep 3\n\tOpen the door Put the elephant into the fridge\nStep 4\n\tOpen the door Put the elephant into the fridge'
+            }
+        };
+    },
+    adaptor: ({ shape, level, state, location, width, height, data, style, ...others }) => {
+        const list = parseData(data, { parseContent: true }).filter(({ type }) => type === NodeType.node);
+        const dataSouce = [];
+        let current = 0;
+        list.forEach((item, index) => {
+            const { value = '' } = item.value.find(({ type }) => type === ContentType.icon) || {};
+            dataSouce.push({
+                key: index,
+                icon: value,
+                title: item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join(''),
+                content: item.children && item.children.length > 0 ? item.children[0].value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : '',
+                disabled: state === 'disabled' || item.state === 'disabled',
+            });
+
+            if (item.state === 'active') {
+                current = index;
+            }
+        });
+
+        if (state === 'percent' && dataSouce[current]) {
+            dataSouce[current].percent = 60;
+        }
+
+        return (
+            <div {...others} style={{
+                width,
+                height,
+                ...style,
+            }}>
+                <Step
+                    current={current}
+                    shape={shape}
+                    direction={level}
+                    labelPlacement={location === 'right' ? 'hoz' : 'ver'}
+                    >
+                    {
+                        dataSouce.map(item => <Step.Item key={item.key} title={item.title} content={item.content} icon={item.icon} percent={item.percent} disabled={item.disabled}/>)
+                    }
+                </Step>
+            </div>
+        )
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'hoz') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 600,
+                height: 120
+            };
+        } else if (demo.node.props.level === 'ver') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 200,
+                height: 300
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/switch/adaptor/index.jsx b/docs/switch/adaptor/index.jsx
new file mode 100644
index 0000000000..1bb4ff2bfe
--- /dev/null
+++ b/docs/switch/adaptor/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Switch } from '@alifd/next';
+
+export default {
+    name: 'Switch',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['on', 'off', 'disabledOn', 'disabledOff'],
+            default: 'off'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'showLabel',
+            type: Types.bool,
+            default: false
+        }]
+    }),
+    adaptor: ({ state, size, showLabel, ...others }) => {
+        return <Switch {...others} checked={['on', 'disabledOn'].indexOf(state) !== -1} checkedChildren={showLabel ? 'on' : ''} unCheckedChildren={showLabel ? 'off' : ''} disabled={state.indexOf('disabled') !== -1}/>
+    }
+}
diff --git a/docs/tab/adaptor/index.jsx b/docs/tab/adaptor/index.jsx
new file mode 100644
index 0000000000..d04aa02cb5
--- /dev/null
+++ b/docs/tab/adaptor/index.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Types, parseData } from '@alifd/adaptor-helper';
+import { Tab, Icon } from '@alifd/next';
+
+export default {
+    name: 'Tab',
+    shape: ['pure', 'wrapped', 'text', 'capsule'],
+    editor: (shape = 'pure') => {
+        const props = [{
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'closable',
+            type: Types.bool,
+            default: false
+        }];
+
+        if (['pure', 'wrapped', 'text'].indexOf(shape) !== -1) {
+            props.push({
+                name: 'overflow',
+                type: Types.enum,
+                options: ['slide', 'dropdown'],
+                default: 'slide'
+            });
+            props.push({
+                name: 'width',
+                type: Types.number,
+                default: 480
+            });
+        }
+
+        if (shape === 'wrapped') {
+            props.splice(props.length - 2, 0, {
+                name: 'position',
+                type: Types.enum,
+                options: ['top', 'left', 'right'],
+                default: 'top'
+            });
+        }
+
+        return {
+            props,
+            data: {
+                active: true,
+                disable: true,
+                default: 'Tab 1\n*Tab 2\nTab 3'
+            }
+        };
+    },
+    adaptor: ({ shape, size, closable, overflow, width, position, style = {}, data, ...others }) => {
+        const list = parseData(data, { parseContent: true });
+        const activeKey = list.findIndex((item) => item.state === 'active');
+
+        return (
+            <Tab {...others} style={{ minWidth: style.width ? 0 : width, ...style }} activeKey={activeKey} shape={shape} size={size} excessMode={overflow} tabPosition={position}>
+                {
+                    list.map((item, index) => <Tab.Item key={index} title={item.value.map(({ type, value }, i) => type === 'icon' ? <Icon key={`icon_${i}`} type={value} /> : value)} closeable={closable} disabled={item.state === 'disabled'} />)
+                }
+            </Tab>
+        );
+    }
+};
diff --git a/docs/table/adaptor/index.jsx b/docs/table/adaptor/index.jsx
new file mode 100644
index 0000000000..80d1dc911d
--- /dev/null
+++ b/docs/table/adaptor/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Types, getChildren } from '@alifd/adaptor-helper';
+import { Table } from '@alifd/next';
+
+export default {
+    name: 'Table',
+    editor: () => ({
+        props: [{
+            name: 'border',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'stripe',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'select',
+            type: Types.enum,
+            options: ['checkbox', 'none'],
+            default: 'none'
+        }, {
+            name: 'align',
+            type: Types.enum,
+            options: ['left', 'right', 'center'],
+            default: 'left'
+        }, {
+            name: 'head',
+            type: Types.enum,
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 800
+        }],
+        data: {
+            default: 'Product | Price | Status\n2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace | US $2.5 | No Priced\nFree shipping women Casual dresses lady dress plus size 201 | US $2.5 | Already Priced'
+        }
+    }),
+    adaptor: ({ border, stripe, select, align, head, width, data, style, ...others }) => {
+
+        const list = data.split('\n').filter(v => !!v);
+        let ths = [];
+        const bodys = [];
+        list.forEach((template, index) => {
+          if (index === 0) {
+            ths = template.split('|');
+          } else {
+            const column = {};
+            template.split('|').forEach((value, index) => {
+                column[`column_${index}`] = value;
+            });
+            bodys.push(column);
+          }
+        });
+
+        return (
+            <Table {...others} dataSource={bodys}  rowSelection={select === 'checkbox' ? { onChange: () => {}} : null} style={{ width, ...style }} hasBorder={border} hasHeader={head === 'show'} isZebra={stripe}>
+                {
+                    ths.map((label, index) => (
+                        <Table.Column cell={value => value} align={align} title={label} key={`column_${index}`} dataIndex={`column_${index}`} />
+                    ))
+                }
+            </Table>
+        );
+    }
+};
diff --git a/docs/tag/adaptor/index.jsx b/docs/tag/adaptor/index.jsx
new file mode 100644
index 0000000000..5e468439a3
--- /dev/null
+++ b/docs/tag/adaptor/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Tag } from '@alifd/next';
+
+export default {
+    name: 'Tag',
+    shape: [{
+        label: 'Default',
+        value: 'default',
+    }, {
+        label: 'Selectable',
+        value: 'selectable',
+    }, {
+        label: 'Deletable',
+        value: 'deletable'
+    }],
+    editor: (shape) => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'primary'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small']
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'disabled', ...(shape === 'selectable' ? ['selected', 'selectedHover', 'selectedDisabled'] : [])],
+            default: 'normal'
+        }],
+        data: {
+            default: 'Tag Hello'
+        }
+    }),
+    adaptor: ({ shape, level, size, state = '', data, className = '', ...others }) => {
+        const TagComponent = shape === 'selectable' ? Tag.Selectable : shape === 'deletable' ? Tag.Closable : Tag;
+        return (
+            <TagComponent {...others} className={`${className} ${state.toLowerCase().indexOf('hover') !== -1 ? 'hover' : ''}`} checked={state.indexOf('selected') !== -1 ? true : null} type={level} size={size} disabled={state.toLowerCase().indexOf('disabled') !== -1}>{data}</TagComponent>
+        );
+    }
+};
diff --git a/docs/time-picker/adaptor/index.jsx b/docs/time-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..65ec643aa9
--- /dev/null
+++ b/docs/time-picker/adaptor/index.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { TimePicker } from '@alifd/next';
+import moment from 'moment';
+
+export default {
+    name: 'TimePicker',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'selected', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'type',
+            type: Types.enum,
+            options: ['HMS', 'HM', 'MS'],
+            default: 'HMS'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 200
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select Time'
+        }, {
+            name: 'value',
+            type: Types.string,
+            default: '06:06:06'
+        }],
+    }),
+    adaptor: ({ size, state, type, width, label, placeholder, value = '', style, ...others }) => {
+        const time = moment();
+        const arr = value.split(':');
+
+        for(let i = 0; i < type.length; i++) {
+            const char = type.charAt(i);
+            const v = arr[i];
+
+            if (v === undefined) break;
+
+            switch(char) {
+                case 'H':
+                    time.hours(v);
+                    break;
+                case 'M':
+                    time.minutes(v);
+                    break;
+                case 'S':
+                    time.seconds(v);
+                    break;
+            }
+        }
+
+        return (
+            <TimePicker
+                {...others}
+                size={size}
+                style={{ width, ...style }}
+                popupContainer={node => node}
+                popupProps={{ needAdjust: false }}
+                format={type === 'HM' ? 'HH:mm' : type === 'MS' ? 'mm:ss' : 'HH:mm:ss'}
+                label={label}
+                disabled={state === 'disabled'}
+                visible={state === 'expanded'}
+                placeholder={placeholder}
+                value={state === 'normal' ? null : time}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            demo.height = 300;
+        }
+        return demo;
+    }
+};
diff --git a/docs/timeline/adaptor/index.jsx b/docs/timeline/adaptor/index.jsx
new file mode 100644
index 0000000000..8683dcc4fc
--- /dev/null
+++ b/docs/timeline/adaptor/index.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Types, parseData, NodeType, ContentType } from '@alifd/adaptor-helper';
+import { Timeline } from '@alifd/next';
+
+export default {
+    name: 'Timeline',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'success', 'error'],
+            default: 'normal'
+        }, {
+            name: 'timeLeft',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'content',
+            Type: Types.enum,
+            options: ['titleAndContentAndTime', 'title', 'titleAndContent', 'timeAndTime'],
+            default: 'titleAndContentAndTime'
+        }, {
+            name: 'height',
+            type: Types.number,
+            default: 300
+        }],
+        data: {
+            active: true,
+            icon: true,
+            default: [
+                'Signed\n\tSigned, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\n\tJun, 10, 2016 10:30:00',
+                '[atm]Ship\n\tExpress has arrived in Hangzhou, Zhejiang Binjiang company\n\tJun, 10, 2016 09:30:00',
+                'Ship\n\tZhejiang Hangzhou Riverside company sent a member for you to send pieces\n\tJun, 10, 2016 09:03:00',
+                'Ship\n\tZhejiang Hangzhou Transshipment Center has been issued\n\tJun, 10, 2016 06:10:00'
+            ].join('\n')
+        }
+    }),
+    adaptor: ({ state, timeLeft, content, height, style, data, ...others }) => {
+        const list = parseData(data, { parseContent: true }).filter(({ type }) => type === NodeType.node);
+        const array = [];
+
+        list.forEach((item, index) => {
+            const { value = '' } = item.value.find(({ type }) => type === ContentType.icon) || {};
+            const obj = {
+                title: item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join(''),
+                icon: value,
+            };
+
+            item.children.forEach((it, index) => {
+                if (index === 0) {
+                    obj.content = it.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('');
+                } else if (index === 1) {
+                    obj[timeLeft ? 'time' : 'timeLeft'] = it.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('');
+                }
+            });
+
+            if (index === 0) {
+                obj.state = state === 'normal' ? 'process' : state;
+            }
+
+            array.push(obj);
+        });
+
+        return (
+            <Timeline {...others} style={{ minHeight: height, ...style }}>
+                {
+                    array.map(({ title, icon, content, time, timeLeft, state }, index) => (
+                        <Timeline.Item key={index} state={state} title={title} icon={icon} time={time} timeLeft={timeLeft} content={content} />
+                    ))
+                }
+            </Timeline>
+        );
+    }
+};
diff --git a/docs/transfer/adaptor/index.jsx b/docs/transfer/adaptor/index.jsx
new file mode 100644
index 0000000000..30b1f8a30e
--- /dev/null
+++ b/docs/transfer/adaptor/index.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Transfer } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+
+export default {
+    name: 'Transfer',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'simple'],
+            default: 'normal'
+        }, {
+            name: 'search',
+            type: Types.bool,
+            default: false,
+        }, {
+            name: 'sourcePanelTitle',
+            type: Types.string,
+            default: 'Title'
+        }, {
+            name: 'targetPanelTitle',
+            type: Types.string,
+            default: 'Title'
+        }],
+        data: {
+            disabled: true,
+            active: true,
+            default: `Content1\nContent2\n*Content3\n*Content4\n*Content5\nContent6\nContent7\nContent8\nContent9\nContent10`
+        }
+    }),
+    adaptor: ({ level, search, sourcePanelTitle, targetPanelTitle, data, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = [];
+        const dataSource = list.map((item, i) => {
+            if (item.state === 'active') {
+                keys.push(`${i}`);
+            }
+            return {
+                label: `${item.value}`,
+                value: `${i}`,
+                disabled: item.state === 'disabled'
+            };
+        });
+
+        return (
+            <Transfer {...others} key={new Date().getTime()} locale={locale.Transfer} mode={level} showSearch={search} searchPlaceholder="Please Input" dataSource={dataSource} defaultLeftChecked={keys} titles={[sourcePanelTitle, targetPanelTitle]} />
+        );
+    }
+};
diff --git a/docs/tree-select/adaptor/index.jsx b/docs/tree-select/adaptor/index.jsx
new file mode 100644
index 0000000000..d41e47173d
--- /dev/null
+++ b/docs/tree-select/adaptor/index.jsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { TreeSelect } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let index = 0;
+
+    list.forEach((item) => {
+        const key = `${prefix || level }-${index++}`;
+
+        if (item.children && item.children.length > 0) {
+            item.children = createDataSouce(item.children, keys, level + 1, key);
+        }
+        array.push({
+            label: item.value,
+            value: key,
+            disabled: item.state === 'disabled',
+            key,
+            children: item.children
+        });
+
+        if (item.state === 'active') {
+            if (item.children && item.children.length > 0) {
+                keys.expanded.push(key);
+            } else {
+                keys.selected.push(key);
+            }
+        }
+
+        return;
+    });
+
+    return array;
+};
+
+export default {
+    name: 'TreeSelect',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select'
+        }],
+        data: {
+            active: true,
+            disabled: true,
+            default: '*Trunk\n\t-Branch\n\t\t*Branch\n\t\t\tLeaf\n\t\tLeaf\n\t*Branch\n\t\tLeaf\n\t\tLeaf'
+        }
+    }),
+    adaptor: ({ state, size, width, border, checkbox, label, placeholder, data, style, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = { selected: [], expanded: [] };
+        const dataSource = createDataSouce(list, keys);
+
+        const props = {
+            ...others,
+            style: { width, ...style },
+            size,
+            dataSource,
+            key: new Date().getTime(),
+            multiple: checkbox,
+            treeCheckable: checkbox,
+            treeDefaultExpandAll: true,
+            hasBorder: border,
+            disabled: state === 'disabled',
+            visible: state === 'expanded',
+            label,
+            placeholder,
+            popupContainer: node => node,
+            popupProps: { needAdjust: false },
+            value: checkbox ? keys.selected : keys.selected[0],
+        };
+
+        return (
+            <TreeSelect {...props} />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            demo.height = 300;
+        }
+        return demo;
+    }
+};
diff --git a/docs/tree/adaptor/index.jsx b/docs/tree/adaptor/index.jsx
new file mode 100644
index 0000000000..39ea8ca66b
--- /dev/null
+++ b/docs/tree/adaptor/index.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Tree } from '@alifd/next';
+
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let index = 0;
+
+    list.forEach((item) => {
+        const key = `${prefix || level }-${index++}`;
+
+        if (item.children && item.children.length > 0) {
+            item.children = createDataSouce(item.children, keys, level + 1, key);
+        }
+        array.push({
+            label: item.value,
+            disabled: item.state === 'disabled',
+            key,
+            children: item.children
+        });
+
+        if (item.state === 'active') {
+            if (item.children && item.children.length > 0) {
+                keys.expanded.push(key);
+            } else {
+                keys.selected.push(key);
+            }
+        }
+
+        return;
+    });
+
+    return array;
+};
+
+export default {
+    name: 'Tree',
+    shape: ['normal', 'line'],
+    editor: () => ({
+        props: [{
+            name: 'select',
+            type: Types.enum,
+            options: ['node', 'label'],
+            default: 'label'
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }],
+        data: {
+            active: true,
+            dsiabled: true,
+            default: 'Trunk\n\t-Branch\n\t\t*Branch\n\t\t\tLeaf\n\t\tLeaf\n\t*Branch\n\t\tLeaf\n\t\tLeaf'
+        }
+    }),
+    adaptor: ({ shape, select, checkbox, data, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = { selected: [], expanded: [] };
+        const dataSource = createDataSouce(list, keys);
+
+        const props = {
+            ...others,
+            dataSource,
+            key: new Date().getTime(),
+            checkable: checkbox,
+            showLine: shape === 'line',
+            isNodeBlock: select === 'node',
+            expandedKeys: keys.expanded,
+            [checkbox ? 'checkedKeys' : 'selectedKeys']: keys.selected,
+        };
+
+        return (
+            <Tree {...props} />
+        );
+    }
+}
diff --git a/docs/upload/adaptor/index.jsx b/docs/upload/adaptor/index.jsx
new file mode 100644
index 0000000000..189b708d81
--- /dev/null
+++ b/docs/upload/adaptor/index.jsx
@@ -0,0 +1,251 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Upload } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+
+const getSize = (size) => {
+    if (!size) return 0;
+    const UNIT = ['T', 'G', 'MB', 'KB', 'B'];
+    for (let i = 0; i < UNIT.length; i++) {
+        const unit = UNIT[i];
+        const index = size.indexOf(unit);
+        if (index !== -1) {
+            const number = Number(size.substring(0, index)) || 0;
+            switch (i) {
+                case 0:
+                    return number * 1024 * 1024 * 1024 * 1024;
+                case 1:
+                    return number * 1024 * 1024 * 1024;
+                case 2:
+                    return number * 1024 * 1024;
+                case 3:
+                    return number * 1024;
+                case 4:
+                    return number;
+            }
+        }
+    }
+};
+export default {
+    name: 'Upload',
+    shape: [{
+        label: 'File Upload',
+        value: 'normal'
+    }, 'image', 'card', 'drag'],
+    editor: (shape = 'normal') => {
+        return {
+            normal: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['uploading', 'done', 'error'],
+                    default: 'uploading'
+                }, {
+                    name: 'close',
+                    type: Types.bool,
+                    default: false
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 50
+                }, {
+                    name: 'filesize',
+                    type: Types.string,
+                    default: '11MB'
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            image: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['uploading', 'done', 'error'],
+                    default: 'uploading'
+                }, {
+                    name: 'close',
+                    type: Types.bool,
+                    default: false
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 50
+                }, {
+                    name: 'filesize',
+                    type: Types.string,
+                    default: '11MB'
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            card: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled', 'uploading', 'done', 'error'],
+                    default: 'string'
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 20
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            drag: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'over', 'uploading', 'disabled', 'done', 'error'],
+                    default: 'over'
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'height',
+                    type: Types.number,
+                    default: 200
+                }, {
+                    name: 'title',
+                    type: Types.string,
+                    default: 'Click or Drag the file to this area to upload'
+                }, {
+                    name: 'description',
+                    type: Types.string,
+                    default: 'Support docx, xls, PDF, rar, zip, PNG, JPG and other files upload'
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 20
+                }],
+                data: {
+                    default: 'xxx.png\nxx2.png'
+                }
+            }
+        }[shape];
+    },
+    adaptor: ({
+        shape,
+        state,
+        close,
+        width,
+        height,
+        progress,
+        filesize,
+        filename,
+        title,
+        description,
+        style,
+        data,
+        ...others
+    }) => {
+
+        if (shape === 'normal') {
+            return (
+                <Upload
+                    {...others}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                    limit={1}
+                    listType="text"
+                    closable={close}
+                    value={[{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        size: getSize(filesize),
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }]}
+                />
+            );
+        }
+
+        if (shape === 'image') {
+            return (
+                <Upload
+                    {...others}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                    limit={1}
+                    listType="image"
+                    closable={close}
+                    value={[{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        size: getSize(filesize),
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }]}
+                />
+            );
+        }
+
+        if (shape === 'card') {
+            return (
+                <Upload.Card
+                    {...others}
+                    style={style}
+                    limit={1}
+                    disabled={state === 'disabled'}
+                    value={['normal', 'disabled'].indexOf(state) === -1 ? [{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }] : []}
+                />
+            );
+        }
+
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+
+
+        return (
+            <Upload.Dragger
+                {...others}
+                style={{
+                    width,
+                    height,
+                    ...style,
+                }}
+                locale={{
+                    ...locale.Upload,
+                    drag: {
+                        text: title,
+                        hint: description
+                    }
+                }}
+                disabled={state === 'disabled'}
+                className={`${state === 'over' ? 'next-upload-drag-over' : ''} ${others.className || ''}`}
+                listType={'text'}
+                value={['normal', 'over', 'disabled'].indexOf(state) === -1 ? list.map((item) => {
+                    return {
+                        name: item.value,
+                        state,
+                        percent: progress
+                    };
+                }) : []}
+            />
+        );
+
+    }
+};
diff --git a/package.json b/package.json
index d0b27eb851..ed8d33f92e 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "check-sass": "node ./scripts/check/sass.js",
     "docs": "node ./scripts/docs/index.js",
     "api": "node ./scripts/api.js",
-    "pack": "node ./scripts/pack.js",
+    "pack": "node ./scripts/pack.js && node ./scripts/adaptor/build.js",
     "release": "node ./scripts/release/index.js",
     "test": "node --max_old_space_size=8192 ./scripts/test/index.js",
     "test:a11y": "node --max_old_space_size=8192 ./scripts/test/a11y-index.js",
@@ -76,6 +76,8 @@
     "shallow-element-equals": "^1.0.1"
   },
   "devDependencies": {
+    "@alifd/adaptor-generate": "^0.2.3",
+    "@alifd/adaptor-helper": "^0.1.3",
     "@alifd/api-extractor": "^3.4.0",
     "@alifd/babel-preset-next": "^2.0.0",
     "@alifd/doc-parser": "^1.0.0",
diff --git a/scripts/adaptor/build.js b/scripts/adaptor/build.js
new file mode 100644
index 0000000000..634a9496d7
--- /dev/null
+++ b/scripts/adaptor/build.js
@@ -0,0 +1,68 @@
+const path = require('path');
+const webpack = require('webpack');
+const getWebpackConfig = require('../webpack/prod');
+const { logger } = require('../utils');
+
+const distPath = path.join(process.cwd(), 'dist');
+
+const minimize = true;
+
+const config = getWebpackConfig({ minimize });
+config.entry = {
+    adaptor: './docs/adaptor.js',
+};
+config.output = Object.assign({}, config.output, {
+    path: distPath,
+    publicPath: '/dist/',
+    library: 'Adaptors',
+    libraryTarget: 'umd',
+});
+config.externals = [
+    {
+        react: {
+            root: 'React',
+            commonjs2: 'react',
+            commonjs: 'react',
+            amd: 'react',
+        },
+    },
+    {
+        'react-dom': {
+            root: 'ReactDOM',
+            commonjs2: 'react-dom',
+            commonjs: 'react-dom',
+            amd: 'react-dom',
+        },
+    },
+    {
+        moment: {
+            root: 'moment',
+            commonjs2: 'moment',
+            commonjs: 'moment',
+            amd: 'moment',
+        },
+    },
+    {
+        '@alifd/next': {
+            root: 'Next',
+            commonjs2: '@alifd/next',
+            commonjs: '@alifd/next',
+            amd: '@alifd/next',
+        },
+    },
+];
+config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
+
+// eslint-disable-next-line handle-callback-err
+webpack(config, (err, stats) => {
+    logger.info(
+        stats.toString({
+            colors: true,
+            chunks: false,
+            modules: false,
+            hash: false,
+            usedExports: false,
+            version: false,
+        })
+    );
+});
diff --git a/scripts/server/loaders/adaptor/index.js b/scripts/server/loaders/adaptor/index.js
new file mode 100644
index 0000000000..ff4f635912
--- /dev/null
+++ b/scripts/server/loaders/adaptor/index.js
@@ -0,0 +1,63 @@
+const path = require('path');
+const _ = require('lodash');
+
+const cwd = process.cwd();
+const IMPORT_REG = /import {(.+)} from ['"]@alifd\/next['"];?/;
+const IMPORT_LIB_REG = /import (.+) from ['"]@alifd\/next\/lib\/(.+)['"];?/;
+const IMPORT_LIB_REG_G = /^import .+ from ['"]@alifd\/next\/lib\/(.+)['"];?/gm;
+
+module.exports = function(content) {
+    return fixImport(content, this.resourcePath);
+};
+
+function fixImport(code, resourcePath) {
+    const matched = code.match(IMPORT_REG);
+    const matchedLib = code.match(IMPORT_LIB_REG_G);
+
+    if (matched) {
+        const components = matched[1].replace(/\s/g, '').split(',');
+
+        const importStrings = components
+            .map(component => {
+                const componentPath = path.join(
+                    cwd,
+                    'src',
+                    _.kebabCase(component)
+                );
+                const relativePath = path.relative(
+                    path.dirname(resourcePath),
+                    componentPath
+                );
+
+                return `
+import ${component} from '${relativePath}';
+import '${path.join(relativePath, 'style.js')}';
+`;
+            })
+            .join('\n');
+
+        code = code.replace(IMPORT_REG, importStrings);
+    }
+
+    if (matchedLib) {
+        matchedLib.forEach(element => {
+            const component = element
+                .match(IMPORT_LIB_REG)[1]
+                .replace(/\s/g, '');
+            const afterLib = element
+                .match(IMPORT_LIB_REG)[2]
+                .replace(/\s/g, '');
+            const libPath = path.join(cwd, 'src', afterLib);
+            const newLibPath = path.relative(
+                path.dirname(resourcePath),
+                libPath
+            );
+            const newLibStr = `
+import ${component} from'${newLibPath}'`;
+
+            code = code.replace(IMPORT_LIB_REG, newLibStr);
+        });
+    }
+
+    return code;
+}
diff --git a/scripts/server/tpls/theme.ejs b/scripts/server/tpls/theme.ejs
index 8605d87c44..8a8b033c0a 100644
--- a/scripts/server/tpls/theme.ejs
+++ b/scripts/server/tpls/theme.ejs
@@ -14,12 +14,13 @@
         </style>
         <% } %>
         <script src="//shadow.elemecdn.com/npm/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
-        <script src="//shadow.elemecdn.com/npm/react@16.0.0/umd/react.development.js"></script>
-        <script src="//shadow.elemecdn.com/npm/react-dom@16.0.0/umd/react-dom.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/react@16.x/umd/react.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/react-dom@16.x/umd/react-dom.development.js"></script>
         <script src="//shadow.elemecdn.com/npm/moment@2.24.0/min/moment-with-locales.js"></script>
     </head>
     <body>
         <div id="container"></div>
+        <div id="root"></div>
         <% scripts.forEach(function(src) { %>
         <script src="<%= src %>"></script>
         <% })%>
diff --git a/scripts/server/webpack.js b/scripts/server/webpack.js
index 90d262ad97..21894524e7 100644
--- a/scripts/server/webpack.js
+++ b/scripts/server/webpack.js
@@ -43,6 +43,7 @@ module.exports = function getWebpackConfig(options) {
             'index-loader': path.join(loadersPath, 'index/index.js'),
             'demo-loader': path.join(loadersPath, 'demo/index.js'),
             'theme-loader': path.join(loadersPath, 'theme/index.js'),
+            'adaptor-loader': path.join(loadersPath, 'adaptor/index.js'),
         },
     };
 
@@ -140,6 +141,16 @@ module.exports = function getWebpackConfig(options) {
             },
         ],
     });
+    config.module.rules.push({
+        test: /adaptor\/.+\.jsx$/,
+        use: [
+            babelLoader,
+            {
+                loader: 'adaptor-loader',
+                options: {},
+            },
+        ],
+    });
 
     config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
     config.plugins.push(

From d7ed6219838d36bcb641d1e200951a75d360c256 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Wed, 24 Jul 2019 17:44:08 +0800
Subject: [PATCH 02/27] temp(*):  remove images

---
 docs/dialog/adaptor/index.jsx |  3 ++-
 docs/slider/adaptor/index.jsx | 23 ++++++-----------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/docs/dialog/adaptor/index.jsx b/docs/dialog/adaptor/index.jsx
index 8189cc2583..9dc76d93b6 100644
--- a/docs/dialog/adaptor/index.jsx
+++ b/docs/dialog/adaptor/index.jsx
@@ -46,6 +46,7 @@ export default {
          const dialogStyle = {
             position: mask ? 'absolute' : 'relative',
             width: width,
+            zIndex: 1,
             ...(mask ? {
                 left: 20,
                 top: 20,
@@ -134,4 +135,4 @@ export default {
             };
         }
     })
-}
+};
diff --git a/docs/slider/adaptor/index.jsx b/docs/slider/adaptor/index.jsx
index a924f64b2f..648ec57e46 100644
--- a/docs/slider/adaptor/index.jsx
+++ b/docs/slider/adaptor/index.jsx
@@ -2,20 +2,7 @@ import React from 'react';
 import { Types } from '@alifd/adaptor-helper';
 import { Slider } from '@alifd/next';
 
-const banners = [
-    'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
-    'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
-    'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
-    'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg'
-];
-
-const cards = [
-    'https://img.alicdn.com/bao/uploaded/i3/TB1YHwUNpXXXXaNXXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
-    'https://img.alicdn.com/bao/uploaded/i3/TB1SyBLNpXXXXb4aXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
-    'https://img.alicdn.com/bao/uploaded/i3/TB1NllZLXXXXXcPXpXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
-    'https://img.alicdn.com/bao/uploaded/i4/TB1v3A7KpXXXXa0aXXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg',
-    'https://img.alicdn.com/bao/uploaded/i2/TB1FOfLMVXXXXacapXXXXXXXXXX_!!0-item_pic.jpg_150x150q120.jpg'
-];
+const colors = ['#7732bb', '#047cc0', '#00884b', '#e3bc13', '#db7c00', '#aa231f'];
 
 export default {
     name: 'Slider',
@@ -58,11 +45,13 @@ export default {
         const slides = [];
 
         for (let i = 0; i < imageNumber; i++) {
-            const images = shape === 'banner' ? banners : cards;
-            const imageURL = images[i % images.length];
+            const slideWidth = level === 'ver' || shape === 'banner' ? width : width / imageNumber;
+            const slideHeight = level === 'ver'  ? height / imageNumber : height;
             slides.push(
                 <div key={i}>
-                    <img style={{ width:  level === 'ver' || shape === 'banner' ? width : width / imageNumber, height: level === 'ver'  ? height / imageNumber : height}} src={imageURL} alt="image" />
+                    <div style={{ backgroundColor: colors[i % colors.length], color: '#fff', fontSize: shape === 'banner' ? 36 : 24, lineHeight: `${slideHeight}px`, textAlign: 'center',  width: slideWidth, height: slideHeight }}>
+                        Slide {i + 1}
+                    </div>
                 </div>
             );
         }

From 8e339bce5c481b1a00e51e9151de9388af5241b3 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Wed, 24 Jul 2019 18:53:43 +0800
Subject: [PATCH 03/27] temp(Calendar): add date parse

---
 docs/calendar/adaptor/index.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/docs/calendar/adaptor/index.jsx b/docs/calendar/adaptor/index.jsx
index cb6f7f384e..f92988a32b 100644
--- a/docs/calendar/adaptor/index.jsx
+++ b/docs/calendar/adaptor/index.jsx
@@ -5,7 +5,6 @@ import { Types } from '@alifd/adaptor-helper';
 
 const now = new Date();
 
-
 export default {
     name: 'Calendar',
     shape: ['fullscreen', 'card', 'panel', 'rangePanel'],
@@ -32,7 +31,25 @@ export default {
             }]
         };
     },
-    adaptor: ({ shape, level, width, date, style = {}, ...others }) => {
+    adaptor: ({ shape, level, width, date = '', style = {}, ...others }) => {
+        const arr = date.split('-').map(number => Number(number) || 0);
+
+        const d = moment();
+        arr.forEach((number, index) => {
+            if (!number) return;
+            switch (index) {
+                case 0:
+                    d.year(number);
+                    break;
+                case 1:
+                    d.month(number - 1);
+                    break;
+                case 2:
+                    d.date(number);
+                    break;
+                default: return;
+            }
+        });
 
         if (shape === 'rangePanel') {
             if (!Calendar.RangeCalendar) return null;
@@ -41,11 +58,11 @@ export default {
                 <Calendar.RangeCalendar {...others}  style={{
                     width,
                     ...style
-                }} showOtherMonth startValue={moment(date)} endValue={moment(date).clone().add(1, 'months')} />
+                }} showOtherMonth startValue={d} endValue={d.clone().add(1, 'months')} />
             );
         }
         return (
-            <Calendar {...others} value={moment(date)} shape={shape} mode={level === 'day' ? 'date' : level} style={{
+            <Calendar {...others} value={d} shape={shape} mode={level === 'day' ? 'date' : level} style={{
                 width,
                 ...style
             }} />

From 20ac7745282354553952ec562d63f87f60af4864 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Fri, 26 Jul 2019 11:36:36 +0800
Subject: [PATCH 04/27] fix(Tree): Still can check after disableChecked

fixed https://github.com/alibaba-fusion/next/issues/872
---
 src/tree-select/tree-select.jsx |   4 +-
 src/tree/view/tree.jsx          |  90 +++++++++++++++---
 src/tree/view/util.js           | 159 ++++++++++++++++++++++----------
 test/tree-select/index-spec.js  |  23 +++--
 test/tree/index-spec.js         |  18 ++--
 5 files changed, 214 insertions(+), 80 deletions(-)

diff --git a/src/tree-select/tree-select.jsx b/src/tree-select/tree-select.jsx
index 92e379d8c1..7752cbdd78 100644
--- a/src/tree-select/tree-select.jsx
+++ b/src/tree-select/tree-select.jsx
@@ -319,10 +319,10 @@ export default class TreeSelect extends Component {
 
         switch (treeCheckedStrategy) {
             case 'parent':
-                keys = filterChildKey(keys, this._k2n);
+                keys = filterChildKey(keys, this._k2n, this._p2n);
                 break;
             case 'child':
-                keys = filterParentKey(keys, this._k2n);
+                keys = filterParentKey(keys, this._k2n, this._p2n);
                 break;
             default:
                 break;
diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
index 0fa29001e5..add0484ef6 100644
--- a/src/tree/view/tree.jsx
+++ b/src/tree/view/tree.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-depth */
 import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -10,12 +11,25 @@ import {
     filterChildKey,
     filterParentKey,
     getAllCheckedKeys,
+    forEachEnableNode,
 } from './util';
 
 const { bindCtx, noop } = func;
 const { getOffset } = dom;
 const { pickOthers, isPlainObject } = obj;
 
+const childChecked = (child, checkedKeys) => {
+    if (child.disabled || parent.checkboxDisabled) return true;
+    if (child.checkable === false) {
+        return (
+            !child.children ||
+            child.children.length === 0 ||
+            child.children.every(c => childChecked(c, checkedKeys))
+        );
+    }
+    return checkedKeys.indexOf(child.key) > -1;
+};
+
 /**
  * Tree
  */
@@ -703,19 +717,32 @@ export default class Tree extends Component {
 
         const pos = this._k2n[key].pos;
 
-        const ps = Object.keys(this._p2n);
-        ps.forEach(p => {
-            if (isDescendantOrSelf(pos, p)) {
-                this.processKey(checkedKeys, this._p2n[p].key, check);
-            }
+        forEachEnableNode(this._k2n[key], node => {
+            if (node.checkable === false) return;
+            this.processKey(checkedKeys, node.key, check);
         });
 
+        const ps = Object.keys(this._p2n);
+        // ps.forEach(p => {
+        //     if (this._p2n[p].checkable !== false && !this._p2n[p].disabled && isDescendantOrSelf(pos, p)) {
+        //         this.processKey(checkedKeys, this._p2n[p].key, check);
+        //     }
+        // });
+
         let currentPos = pos;
         const nums = pos.split('-');
         for (let i = nums.length; i > 2; i--) {
             let parentCheck = true;
 
             const parentPos = nums.slice(0, i - 1).join('-');
+            if (
+                this._p2n[parentPos].disabled ||
+                this._p2n[parentPos].checkboxDisabled ||
+                this._p2n[parentPos].checkable === false
+            ) {
+                currentPos = parentPos;
+                continue;
+            }
             const parentKey = this._p2n[parentPos].key;
             const parentChecked = checkedKeys.indexOf(parentKey) > -1;
             if (!check && !parentChecked) {
@@ -724,12 +751,34 @@ export default class Tree extends Component {
 
             for (let j = 0; j < ps.length; j++) {
                 const p = ps[j];
-                if (isSiblingOrSelf(currentPos, p)) {
-                    const k = this._p2n[p].key;
-                    if (checkedKeys.indexOf(k) === -1) {
+                const pnode = this._p2n[p];
+                if (
+                    isSiblingOrSelf(currentPos, p) &&
+                    !pnode.disabled &&
+                    !pnode.checkboxDisabled
+                ) {
+                    const k = pnode.key;
+                    if (pnode.checkable === false) {
+                        // eslint-disable-next-line max-depth
+                        if (!pnode.children || pnode.children.length === 0)
+                            continue;
+
+                        // eslint-disable-next-line max-depth
+                        for (let m = 0; m < pnode.children.length; m++) {
+                            if (
+                                !pnode.children.every(child =>
+                                    childChecked(child, checkedKeys)
+                                )
+                            ) {
+                                parentCheck = false;
+                                break;
+                            }
+                        }
+                    } else if (checkedKeys.indexOf(k) === -1) {
                         parentCheck = false;
-                        break;
                     }
+
+                    if (!parentCheck) break;
                 }
             }
 
@@ -749,10 +798,18 @@ export default class Tree extends Component {
         let newCheckedKeys;
         switch (checkedStrategy) {
             case 'parent':
-                newCheckedKeys = filterChildKey(checkedKeys, this._k2n);
+                newCheckedKeys = filterChildKey(
+                    checkedKeys,
+                    this._k2n,
+                    this._p2n
+                );
                 break;
             case 'child':
-                newCheckedKeys = filterParentKey(checkedKeys, this._k2n);
+                newCheckedKeys = filterParentKey(
+                    checkedKeys,
+                    this._k2n,
+                    this._p2n
+                );
                 break;
             default:
                 newCheckedKeys = checkedKeys;
@@ -819,17 +876,24 @@ export default class Tree extends Component {
     }
 
     getIndeterminateKeys(checkedKeys) {
+        if (this.props.checkStrictly) {
+            return [];
+        }
+
         const indeterminateKeys = [];
 
         const poss = filterChildKey(
             checkedKeys.filter(key => !!this._k2n[key]),
-            this._k2n
+            this._k2n,
+            this._p2n
         ).map(key => this._k2n[key].pos);
         poss.forEach(pos => {
             const nums = pos.split('-');
             for (let i = nums.length; i > 2; i--) {
                 const parentPos = nums.slice(0, i - 1).join('-');
-                const parentKey = this._p2n[parentPos].key;
+                const parent = this._p2n[parentPos];
+                if (parent.disabled || parent.checkboxDisabled) break;
+                const parentKey = parent.key;
                 if (indeterminateKeys.indexOf(parentKey) === -1) {
                     indeterminateKeys.push(parentKey);
                 }
diff --git a/src/tree/view/util.js b/src/tree/view/util.js
index 2ba679cfea..34270c9b48 100644
--- a/src/tree/view/util.js
+++ b/src/tree/view/util.js
@@ -10,49 +10,86 @@ export function normalizeToArray(keys) {
 
     return [];
 }
+
+/**
+ * 遍历所有可用的子节点
+ * @param {Node}
+ * @param {Function} callback
+ */
+export function forEachEnableNode(node, callback = () => {}) {
+    if (node.disabled || node.checkboxDisabled) return;
+    // eslint-disable-next-line callback-return
+    callback(node);
+    if (node.children && node.children.length > 0) {
+        node.children.forEach(child => forEachEnableNode(child, callback));
+    }
+}
+/**
+ * 判断节点是否禁用checked
+ * @param {Node} node
+ */
+export function isNodeDisabledChecked(node) {
+    if (node.disabled || node.checkboxDisabled) return true;
+    if (node.checkable === false) {
+        return (
+            !node.children ||
+            node.children.length === 0 ||
+            node.children.every(isNodeDisabledChecked)
+        );
+    }
+
+    return false;
+}
+
+/**
+ * 获取一个 checkable = {true} 的父节点
+ * @param {Node} node
+ */
+export function getCheckableParentNode(node, _p2n) {
+    let parentPos = node.pos.split(['-']);
+    if (parentPos.length === 2) return node;
+    parentPos.splice(parentPos.length - 1, 1);
+    parentPos = parentPos.join('-');
+    const parentNode = _p2n[parentPos];
+    if (parentNode.disabled || parentNode.checkboxDisabled) return false;
+    if (parentNode.checkable === false) {
+        return getCheckableParentNode(parentNode, _p2n);
+    }
+
+    return parentNode;
+}
 /**
  * 过滤子节点
  * @param {Array} keys
  * @param {Object} _k2n
  */
-export function filterChildKey(keys, _k2n) {
-    const newKeys = [...keys]
-        .filter(key => !!_k2n[key])
-        .sort((prev, next) => {
-            return getDepth(prev, _k2n) - getDepth(next, _k2n);
-        });
-
-    for (let i = 0; i < newKeys.length; i++) {
-        for (let j = 0; j < newKeys.length; j++) {
-            if (
-                i !== j &&
-                isDescendantOrSelf(_k2n[newKeys[i]].pos, _k2n[newKeys[j]].pos)
-            ) {
-                newKeys.splice(j, 1);
-                j--;
-            }
+export function filterChildKey(keys, _k2n, _p2n) {
+    const newKeys = [];
+    keys.forEach(key => {
+        const node = getCheckableParentNode(_k2n[key], _p2n);
+        if (
+            !node ||
+            node.checkable === false ||
+            node === _k2n[key] ||
+            keys.indexOf(node.key) === -1
+        ) {
+            newKeys.push(key);
         }
-    }
-
+    });
     return newKeys;
 }
 
-export function filterParentKey(keys, _k2n) {
-    const newKeys = [...keys]
-        .filter(key => !!_k2n[key])
-        .sort((prev, next) => {
-            return getDepth(next, _k2n) - getDepth(prev, _k2n);
-        });
+export function filterParentKey(keys, _k2n, _p2n) {
+    const newKeys = [];
 
-    for (let i = 0; i < newKeys.length; i++) {
-        for (let j = 0; j < newKeys.length; j++) {
-            if (
-                i !== j &&
-                isDescendantOrSelf(_k2n[newKeys[j]].pos, _k2n[newKeys[i]].pos)
-            ) {
-                newKeys.splice(j, 1);
-                j--;
-            }
+    for (let i = 0; i < keys.length; i++) {
+        const node = _k2n[keys[i]];
+        if (
+            !node.children ||
+            node.children.length === 0 ||
+            node.children.every(isNodeDisabledChecked)
+        ) {
+            newKeys.push(keys[i]);
         }
     }
 
@@ -91,10 +128,34 @@ export function isSiblingOrSelf(currentPos, targetPos) {
 export function getAllCheckedKeys(checkedKeys, _k2n, _p2n) {
     checkedKeys = normalizeToArray(checkedKeys);
     const filteredKeys = checkedKeys.filter(key => !!_k2n[key]);
-    let flatKeys = filterChildKey(filteredKeys, _k2n);
-    const childChecked = child => flatKeys.indexOf(child.key) > -1;
-    const removeKey = child => flatKeys.splice(flatKeys.indexOf(child.key), 1);
+    const flatKeys = filterChildKey(filteredKeys, _k2n, _p2n);
+
+    const childChecked = child => {
+        if (child.disabled || child.checkboxDisabled) return true;
+        if (child.checkable === false) {
+            return (
+                !child.children ||
+                child.children.length === 0 ||
+                child.children.every(childChecked)
+            );
+        }
+        return flatKeys.indexOf(child.key) > -1;
+    };
+
+    const removeKey = child => {
+        if (child.disabled || child.checkboxDisabled) return;
+        if (
+            child.checkable === false &&
+            child.children &&
+            child.children.length > 0
+        ) {
+            return child.children.forEach(removeKey);
+        }
+        flatKeys.splice(flatKeys.indexOf(child.key), 1);
+    };
+
     const addParentKey = (i, parent) => flatKeys.splice(i, 0, parent.key);
+
     const keys = [...flatKeys];
     for (let i = 0; i < keys.length; i++) {
         const pos = _k2n[keys[i]].pos;
@@ -105,6 +166,12 @@ export function getAllCheckedKeys(checkedKeys, _k2n, _p2n) {
         for (let j = nums.length - 2; j > 0; j--) {
             const parentPos = nums.slice(0, j + 1).join('-');
             const parent = _p2n[parentPos];
+            if (
+                parent.checkable === false ||
+                parent.disabled ||
+                parent.checkboxDisabled
+            )
+                continue;
             const parentChecked = parent.children.every(childChecked);
             if (parentChecked) {
                 parent.children.forEach(removeKey);
@@ -116,20 +183,12 @@ export function getAllCheckedKeys(checkedKeys, _k2n, _p2n) {
     }
 
     const newKeys = [];
-    if (flatKeys.length) {
-        flatKeys = flatKeys.reverse();
-        const ps = Object.keys(_p2n);
-        for (let i = 0; i < flatKeys.length; i++) {
-            const pos = _k2n[flatKeys[i]].pos;
-            for (let j = 0; j < ps.length; j++) {
-                if (isDescendantOrSelf(pos, ps[j])) {
-                    newKeys.push(_p2n[ps[j]].key);
-                    ps.splice(j, 1);
-                    j--;
-                }
-            }
-        }
-    }
+    flatKeys.forEach(key => {
+        forEachEnableNode(_k2n[key], node => {
+            if (node.checkable === false) return;
+            newKeys.push(node.key);
+        });
+    });
 
     return newKeys;
 }
diff --git a/test/tree-select/index-spec.js b/test/tree-select/index-spec.js
index 1f60cdc2f6..5b93db90f5 100644
--- a/test/tree-select/index-spec.js
+++ b/test/tree-select/index-spec.js
@@ -310,19 +310,20 @@ describe('TreeSelect', () => {
         let triggered = false;
         const initValue = '4';
         const appendValue = '6';
-        const expectValue = ['3', '4'];
+        const expectValue = ['4', '3'];
         const handleChange = (value, data) => {
             triggered = true;
             assert.deepEqual(value, expectValue);
             assert.deepEqual(data, expectValue.map(v => _v2n[v]));
         };
-
         wrapper = mount(
             <TreeSelect
                 defaultVisible
                 treeCheckable
                 treeDefaultExpandAll
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 value={initValue}
                 onChange={handleChange}
             />
@@ -361,7 +362,9 @@ describe('TreeSelect', () => {
         wrapper = mount(
             <TreeSelect
                 treeCheckable
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 defaultValue={['6']}
                 treeCheckedStrategy="parent"
             />
@@ -387,12 +390,14 @@ describe('TreeSelect', () => {
                 defaultVisible
                 treeDefaultExpandAll
                 treeCheckable
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 defaultValue={['6']}
                 treeCheckedStrategy="all"
             />
         );
-        assert.deepEqual(getLabels(wrapper), ['裙子', '女装']);
+        assert.deepEqual(getLabels(wrapper), ['女装', '裙子']);
 
         wrapper
             .find('div.next-tag')
@@ -567,13 +572,13 @@ describe('TreeSelect', () => {
     });
 });
 
-function cloneData(data, keyMap = {}) {
+function cloneData(data, valueMap = {}) {
     const loop = data =>
         data.map(item => {
             let newItem;
 
-            if (item.key in keyMap) {
-                newItem = { ...item, ...keyMap[item.key] };
+            if (item.value in valueMap) {
+                newItem = { ...item, ...valueMap[item.value] };
             } else {
                 newItem = { ...item };
             }
diff --git a/test/tree/index-spec.js b/test/tree/index-spec.js
index 5c7a78810c..f5722aaf9d 100644
--- a/test/tree/index-spec.js
+++ b/test/tree/index-spec.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import assert from 'power-assert';
 import ReactTestUtils from 'react-dom/test-utils';
-import { dom, KEYCODE, func } from '../../src/util';
+import { dom, KEYCODE } from '../../src/util';
 import Tree from '../../src/tree/index';
 import '../../src/tree/style.js';
 
@@ -111,7 +111,9 @@ class CheckDemo extends Component {
                 defaultExpandAll
                 checkable
                 checkedKeys={this.state.checkedKeys}
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 onCheck={this.handleCheck}
                 {...this.props}
             />
@@ -411,8 +413,8 @@ describe('Tree', () => {
         );
         assertChecked('3', true);
         assertChecked('6', true);
-        assertChecked('1', false);
-        assertIndeterminate('1', true);
+        assertChecked('1', true);
+        assertIndeterminate('1', false);
         assert(
             hasClass(
                 findTreeNodeByKey('4').querySelector('.next-checkbox-wrapper'),
@@ -452,7 +454,9 @@ describe('Tree', () => {
             <Tree
                 checkable
                 defaultExpandAll
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 onCheck={handleCheck}
             />,
             mountNode
@@ -474,7 +478,9 @@ describe('Tree', () => {
                 checkable
                 checkedStrategy="parent"
                 defaultExpandAll
-                dataSource={dataSource}
+                dataSource={cloneData(dataSource, {
+                    2: { disabled: false }
+                })}
                 onCheck={handleCheck}
             />,
             mountNode

From c2ea8a78034d2d51c143ce74a5fe00876d6113aa Mon Sep 17 00:00:00 2001
From: bindoon <bindoon@sina.com>
Date: Fri, 26 Jul 2019 12:30:38 +0800
Subject: [PATCH 05/27] fix(Upload): bug by Dragger value under controlled.
 Close #923

---
 src/upload/dragger.jsx | 9 ++++++---
 src/upload/upload.jsx  | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/upload/dragger.jsx b/src/upload/dragger.jsx
index e80f71f3e4..0ee7084385 100644
--- a/src/upload/dragger.jsx
+++ b/src/upload/dragger.jsx
@@ -43,9 +43,12 @@ class Dragger extends React.Component {
     };
 
     onDragOver = e => {
-        this.setState({
-            dragOver: true,
-        });
+        if (!this.state.dragOver) {
+            this.setState({
+                dragOver: true,
+            });
+        }
+
         this.props.onDragOver(e);
     };
 
diff --git a/src/upload/upload.jsx b/src/upload/upload.jsx
index c11e01bdba..44853a8f5b 100644
--- a/src/upload/upload.jsx
+++ b/src/upload/upload.jsx
@@ -275,6 +275,8 @@ class Upload extends Base {
     }
 
     uploadFiles(files) {
+        // NOTE: drag上传，当鼠标松开的时候回执行 onDrop，但此时onChange还没出发所以 value=[], 必须提前标识上传中
+        this.uploading = true;
         const fileList = files
             .filter(file => {
                 if (file.state === 'selected') {

From 2b1dee8544ee9a065179371c09303272957c46f6 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Fri, 26 Jul 2019 15:11:19 +0800
Subject: [PATCH 06/27] fix(CascaderSelect): not exist value  be removed not
 exist value  be removed after checked

---
 src/cascader-select/cascader-select.jsx | 7 ++++++-
 test/cascader-select/index-spec.js      | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/cascader-select/cascader-select.jsx b/src/cascader-select/cascader-select.jsx
index 0857f515f0..42bb3d822b 100644
--- a/src/cascader-select/cascader-select.jsx
+++ b/src/cascader-select/cascader-select.jsx
@@ -565,7 +565,7 @@ export default class CascaderSelect extends Component {
 
     handleChange(value, data, extra) {
         const { multiple, changeOnSelect, onChange } = this.props;
-        const { visible, searchValue } = this.state;
+        const { visible, searchValue, value: stateValue } = this.state;
 
         const st = {};
         if (
@@ -574,6 +574,11 @@ export default class CascaderSelect extends Component {
         ) {
             this.handleVisibleChange(!visible, 'fromCascader');
         }
+
+        if (multiple && stateValue && Array.isArray(stateValue)) {
+            value = [...stateValue.filter(v => !this._v2n[v]), ...value];
+        }
+
         if (!('value' in this.props)) {
             st.value = value;
         }
diff --git a/test/cascader-select/index-spec.js b/test/cascader-select/index-spec.js
index 26c8c5317a..57903adb27 100644
--- a/test/cascader-select/index-spec.js
+++ b/test/cascader-select/index-spec.js
@@ -442,6 +442,14 @@ describe('CascaderSelect', () => {
             value: VALUE,
         });
         assert(called);
+        wrapper.setProps({
+            valueRender: item => item.label,
+            onChange: (value) => {
+                assert.deepEqual(value, [VALUE, '2973']);
+            }
+        });
+        const item00 = findItem(0, 0);
+        ReactTestUtils.Simulate.click(item00);
     });
 });
 

From 3fe5cf7b4f8743e81d9dd2c21874b006a76845b3 Mon Sep 17 00:00:00 2001
From: Justin Kahn <justindavidkahn@gmail.com>
Date: Fri, 26 Jul 2019 15:20:55 +0800
Subject: [PATCH 07/27] fix(Field): use constructor not initValue fix #924

---
 src/field/index.js         | 14 +++++++++++++-
 test/field/options-spec.js | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/field/index.js b/src/field/index.js
index 58ba17ab92..032d52277d 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -134,7 +134,19 @@ class Field {
         }
 
         if (!('value' in field)) {
-            field.value = defaultValue;
+            if (parseName) {
+                const cachedValue = getIn(this.values, name);
+                field.value =
+                    typeof cachedValue !== 'undefined'
+                        ? cachedValue
+                        : defaultValue;
+            } else {
+                const cachedValue = this.values[name];
+                field.value =
+                    typeof cachedValue !== 'undefined'
+                        ? cachedValue
+                        : defaultValue;
+            }
         }
         if (parseName && !getIn(this.values, name)) {
             this.values = setIn(this.values, name, field.value);
diff --git a/test/field/options-spec.js b/test/field/options-spec.js
index 4e25ed2762..6e840bfa37 100644
--- a/test/field/options-spec.js
+++ b/test/field/options-spec.js
@@ -308,7 +308,18 @@ describe('options', () => {
             field.init('input');
 
             assert(field.getValue('input') === undefined);
-        })
+        });
+
+        it('should set the value to constructor value even with initValue from init', function() {
+            const inputValue = 0;
+            const field = new Field(this, {
+                values: {
+                    input: inputValue
+                },
+            });
+            field.init('input', {initValue: 1});
+            assert.equal(field.getValue('input'), inputValue);
+        });
     });
 
     describe('should support parseName', () => {
@@ -603,6 +614,27 @@ describe('options', () => {
                 assert.equal(field.getValue('input.otherValue'), secondValue);
             });
         });
+
+        it('should set the value to constructor value even with initValue from init', function() {
+            const fieldDefault = 0;
+            const initValue = 'other default value';
+            const field = new Field(this, {
+                parseName: true,
+                values: {
+                    input: {
+                        myValue: fieldDefault
+                    }
+                }
+            });
+
+            field.init('input.myValue', { initValue });
+
+            assert.deepEqual(field.getValues(), {
+                input: {
+                    myValue: fieldDefault,
+                },
+            });
+        });
     });
 
     describe('should support autoValidate=false', () => {

From fee18b84f0a444c764241ebf228052ab60ff9c58 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Fri, 26 Jul 2019 15:50:14 +0800
Subject: [PATCH 08/27] test(Tree): add test

---
 test/tree/index-spec.js | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/test/tree/index-spec.js b/test/tree/index-spec.js
index f5722aaf9d..5b3e0b063a 100644
--- a/test/tree/index-spec.js
+++ b/test/tree/index-spec.js
@@ -710,6 +710,47 @@ describe('Tree', () => {
         assert(hasClass(findTreeNodeByKey('1'), 'next-filtered'));
     });
 
+    it('should support disabled', () => {
+        ReactDOM.render(
+            <Tree
+                dataSource={dataSource}
+                defaultExpandAll
+                checkable
+                defaultCheckedKeys={['3']}
+            />,
+            mountNode
+        );
+
+        ['1', '3', '6'].forEach(key => assertChecked(key, true));
+        checkTreeNode('6');
+        checkTreeNode('4');
+        ['1', '3', '6'].forEach(key => assertChecked(key, false));
+        assertChecked('4', true);
+    })
+
+    it('should support checkable = false', () => {
+        ReactDOM.render(
+            <Tree
+                dataSource={cloneData(dataSource, {
+                    2: {
+                        disabled: false,
+                        checkable: false
+                    }
+                })}
+                defaultExpandAll
+                checkable
+                defaultCheckedKeys={['3']}
+            />,
+            mountNode
+        );
+        ['3', '6'].forEach(key => assertChecked(key, true));
+        assertIndeterminate('1', true);
+        checkTreeNode('4');
+        checkTreeNode('5');
+        ['1', '3', '6'].forEach(key => assertChecked(key, true));
+        assertIndeterminate('1', false);
+    });
+
     it('should support keyboard', () => {
         ReactDOM.render(
             <Tree

From 807e258dd3382b2cb5fe8543f8d330c980b112d8 Mon Sep 17 00:00:00 2001
From: myron <myronliu347@gmail.com>
Date: Fri, 26 Jul 2019 16:11:26 +0800
Subject: [PATCH 09/27] feat(*): Add Next Adaptor (#903)

feat(*): Add Next Adaptor
---
 docs/adaptor.js                         |  83 ++++++++
 docs/badge/adaptor/index.jsx            |  49 +++++
 docs/balloon/adaptor/index.jsx          |  86 ++++++++
 docs/breadcrumb/adaptor/index.jsx       |  43 ++++
 docs/button/adaptor/index.jsx           | 133 +++++++++++++
 docs/calendar/adaptor/index.jsx         |  71 +++++++
 docs/card/adaptor/index.jsx             |  90 +++++++++
 docs/cascader-select/adaptor/index.jsx  | 105 ++++++++++
 docs/cascader/adaptor/index.jsx         |  67 +++++++
 docs/checkbox/adaptor/index.jsx         |  42 ++++
 docs/collapse/adaptor/index.jsx         |  49 +++++
 docs/date-picker/adaptor/index.jsx      | 115 +++++++++++
 docs/dialog/adaptor/index.jsx           | 138 +++++++++++++
 docs/input/adaptor/index.jsx            | 171 ++++++++++++++++
 docs/loading/adaptor/index.jsx          |  17 ++
 docs/menu-button/adaptor/index.jsx      | 195 ++++++++++++++++++
 docs/menu/adaptor/index.jsx             | 190 ++++++++++++++++++
 docs/message/adaptor/index.jsx          |  45 +++++
 docs/nav/adaptor/index.jsx              | 187 ++++++++++++++++++
 docs/number-picker/adaptor/index.jsx    |  36 ++++
 docs/pagination/adaptor/index.jsx       |  57 ++++++
 docs/paragraph/adaptor/index.jsx        |  25 +++
 docs/progress/adaptor/index.jsx         | 106 ++++++++++
 docs/radio/adaptor/index.jsx            |  69 +++++++
 docs/range/adaptor/index.jsx            |  74 +++++++
 docs/rating/adaptor/index.jsx           |  27 +++
 docs/search/adaptor/index.jsx           |  90 +++++++++
 docs/select/adaptor/index.jsx           |  98 +++++++++
 docs/slider/adaptor/index.jsx           |  88 +++++++++
 docs/split-button/adaptor/index.jsx     | 193 ++++++++++++++++++
 docs/step/adaptor/index.jsx             | 128 ++++++++++++
 docs/switch/adaptor/index.jsx           |  27 +++
 docs/tab/adaptor/index.jsx              |  64 ++++++
 docs/table/adaptor/index.jsx            |  67 +++++++
 docs/tag/adaptor/index.jsx              |  43 ++++
 docs/time-picker/adaptor/index.jsx      |  87 ++++++++
 docs/timeline/adaptor/index.jsx         |  74 +++++++
 docs/transfer/adaptor/index.jsx         |  51 +++++
 docs/tree-select/adaptor/index.jsx      | 111 +++++++++++
 docs/tree/adaptor/index.jsx             |  77 ++++++++
 docs/upload/adaptor/index.jsx           | 251 ++++++++++++++++++++++++
 package.json                            |   4 +-
 scripts/adaptor/build.js                |  68 +++++++
 scripts/server/loaders/adaptor/index.js |  63 ++++++
 scripts/server/tpls/theme.ejs           |   5 +-
 scripts/server/webpack.js               |  11 ++
 46 files changed, 3867 insertions(+), 3 deletions(-)
 create mode 100644 docs/adaptor.js
 create mode 100644 docs/badge/adaptor/index.jsx
 create mode 100644 docs/balloon/adaptor/index.jsx
 create mode 100644 docs/breadcrumb/adaptor/index.jsx
 create mode 100644 docs/button/adaptor/index.jsx
 create mode 100644 docs/calendar/adaptor/index.jsx
 create mode 100644 docs/card/adaptor/index.jsx
 create mode 100644 docs/cascader-select/adaptor/index.jsx
 create mode 100644 docs/cascader/adaptor/index.jsx
 create mode 100644 docs/checkbox/adaptor/index.jsx
 create mode 100644 docs/collapse/adaptor/index.jsx
 create mode 100644 docs/date-picker/adaptor/index.jsx
 create mode 100644 docs/dialog/adaptor/index.jsx
 create mode 100644 docs/input/adaptor/index.jsx
 create mode 100644 docs/loading/adaptor/index.jsx
 create mode 100644 docs/menu-button/adaptor/index.jsx
 create mode 100644 docs/menu/adaptor/index.jsx
 create mode 100644 docs/message/adaptor/index.jsx
 create mode 100644 docs/nav/adaptor/index.jsx
 create mode 100644 docs/number-picker/adaptor/index.jsx
 create mode 100644 docs/pagination/adaptor/index.jsx
 create mode 100644 docs/paragraph/adaptor/index.jsx
 create mode 100644 docs/progress/adaptor/index.jsx
 create mode 100644 docs/radio/adaptor/index.jsx
 create mode 100644 docs/range/adaptor/index.jsx
 create mode 100644 docs/rating/adaptor/index.jsx
 create mode 100644 docs/search/adaptor/index.jsx
 create mode 100644 docs/select/adaptor/index.jsx
 create mode 100644 docs/slider/adaptor/index.jsx
 create mode 100644 docs/split-button/adaptor/index.jsx
 create mode 100644 docs/step/adaptor/index.jsx
 create mode 100644 docs/switch/adaptor/index.jsx
 create mode 100644 docs/tab/adaptor/index.jsx
 create mode 100644 docs/table/adaptor/index.jsx
 create mode 100644 docs/tag/adaptor/index.jsx
 create mode 100644 docs/time-picker/adaptor/index.jsx
 create mode 100644 docs/timeline/adaptor/index.jsx
 create mode 100644 docs/transfer/adaptor/index.jsx
 create mode 100644 docs/tree-select/adaptor/index.jsx
 create mode 100644 docs/tree/adaptor/index.jsx
 create mode 100644 docs/upload/adaptor/index.jsx
 create mode 100644 scripts/adaptor/build.js
 create mode 100644 scripts/server/loaders/adaptor/index.js

diff --git a/docs/adaptor.js b/docs/adaptor.js
new file mode 100644
index 0000000000..4ac0c77350
--- /dev/null
+++ b/docs/adaptor.js
@@ -0,0 +1,83 @@
+import Badge from './badge/adaptor';
+import Balloon from './balloon/adaptor';
+import Breadcrumb from './breadcrumb/adaptor';
+import Button from './button/adaptor';
+import Calendar from './calendar/adaptor';
+import Card from './card/adaptor';
+import Cascader from './cascader/adaptor';
+import CascaderSelect from './cascader-select/adaptor';
+import Checkbox from './checkbox/adaptor';
+import Collapse from './collapse/adaptor';
+import DatePicker from './date-picker/adaptor';
+import Dialog from './dialog/adaptor';
+import Input from './input/adaptor';
+import Loading from './loading/adaptor';
+import Menu from './menu/adaptor';
+import MenuButton from './menu-button/adaptor';
+import Message from './message/adaptor';
+import Nav from './nav/adaptor';
+import NumberPicker from './number-picker/adaptor';
+import Pagination from './pagination/adaptor';
+import Paragraph from './paragraph/adaptor';
+import Progress from './progress/adaptor';
+import Radio from './radio/adaptor';
+import Range from './range/adaptor';
+import Rating from './rating/adaptor';
+import Search from './search/adaptor';
+import Select from './select/adaptor';
+import Slider from './slider/adaptor';
+import SplitButton from './split-button/adaptor';
+import Step from './step/adaptor';
+import Switch from './switch/adaptor';
+import Tab from './tab/adaptor';
+import Table from './table/adaptor';
+import Tag from './tag/adaptor';
+import TimePicker from './time-picker/adaptor';
+import Timeline from './timeline/adaptor';
+import Transfer from './transfer/adaptor';
+import Tree from './tree/adaptor';
+import TreeSelect from './tree-select/adaptor';
+import Upload from './upload/adaptor';
+
+module.exports = {
+    Badge,
+    Balloon,
+    Breadcrumb,
+    Button,
+    Calendar,
+    Card,
+    Cascader,
+    CascaderSelect,
+    Checkbox,
+    Collapse,
+    DatePicker,
+    Dialog,
+    Input,
+    Loading,
+    Menu,
+    MenuButton,
+    Message,
+    Nav,
+    NumberPicker,
+    Pagination,
+    Paragraph,
+    Progress,
+    Radio,
+    Range,
+    Rating,
+    Search,
+    Select,
+    Slider,
+    SplitButton,
+    Step,
+    Switch,
+    Tab,
+    Table,
+    Tag,
+    TimePicker,
+    Timeline,
+    Transfer,
+    Tree,
+    TreeSelect,
+    Upload,
+};
diff --git a/docs/badge/adaptor/index.jsx b/docs/badge/adaptor/index.jsx
new file mode 100644
index 0000000000..7c61d9ac87
--- /dev/null
+++ b/docs/badge/adaptor/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Badge } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Badge',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['dot', 'number'],
+            default: 'dot'
+        }, {
+            name: 'count',
+            type: Types.number,
+            default: 12,
+        }]
+    }),
+    adaptor: ({ level, count, ...others }) => {
+        return <Badge {...others} dot={level=== 'dot'} count={level === 'number' ? count : 0} />;
+    },
+    content: () => ({
+        options: [{
+            name: 'use',
+            options: ['independent', 'withOthers'],
+            default: 'withOthers'
+        }],
+        transform: (props, { use }) => {
+            if (use === 'withOthers') {
+                return {
+                    ...props,
+                    children: {
+                        adaptor: 'div',
+                        props: {
+                            style: {
+                                width: '42px',
+                                height: '42px',
+                                borderRadius: '50%',
+                                background: '#eee',
+                                display: 'inline-block'
+                            }
+                        }
+                    }
+                };
+            }
+            return props;
+        }
+    })
+};
diff --git a/docs/balloon/adaptor/index.jsx b/docs/balloon/adaptor/index.jsx
new file mode 100644
index 0000000000..b343ad1686
--- /dev/null
+++ b/docs/balloon/adaptor/index.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Balloon } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+const ALIGN_LIST = [
+    { label: 'Top', value: 'b' }, // (上)
+    { label: 'Right', value: 'l' }, // (右)
+    { label: 'Bottom', value: 't' }, // (下)
+    { label: 'Left', value: 'r' }, // (左)
+    { label: 'Top Left', value: 'br' }, // (上左)
+    { label: 'Top Right', value: 'bl' }, // (上右)
+    { label: 'Bottom Left', value: 'tr' }, // (下左)
+    { label: 'Bottom Right', value: 'tl' }, // (下右)
+    { label: 'Left Top', value: 'rt' }, // (左上)
+    { label: 'Left Bottom', value: 'rb' }, // (左下)
+    { label: 'Right Top', value: 'lt' }, // (右上)
+    { label: 'Right Bottom', value: 'lb' }, // (右下 及其 两两组合)
+];
+
+
+export default {
+    name: 'Balloon',
+    shape: [{
+        label: 'Balloon',
+        value: 'balloon'
+    }, {
+        label: 'Tooltip',
+        value: 'tooltip'
+    }],
+    editor: (shape) => {
+        return {
+            props: [
+                shape === 'balloon' && {
+                    name: 'level',
+                    type: Types.enum,
+                    options: ['normal', 'primary'],
+                    default: 'normal',
+                },
+                {
+                    name: 'direction',
+                    type: Types.enum,
+                    options: ALIGN_LIST,
+                    default: 'b',
+                },
+                shape === 'balloon' ?
+                    {
+                        name: 'closable',
+                        type: Types.bool,
+                        default: true
+                    } :
+                    null
+            ].filter(v => !!v),
+            data: {
+                default: `${shape.substring(0, 1).toUpperCase() + shape.substring(1)} content replace holder.`
+            }
+        };
+    },
+    adaptor: ({ shape, level, direction, closable, data }) => {
+        return (
+            <Balloon.Inner type={level} style={{position: 'relative'}} isTooltip={shape === 'tooltip'} align={direction} closable={shape === 'balloon' && closable}>
+                {data}
+            </Balloon.Inner>
+        );
+    },
+    content: (shape) => ({
+        options: [
+            {
+                name: 'direction',
+                options: ALIGN_LIST,
+                default: 'b'
+            },
+            shape === 'balloon' && {
+                name: 'closable',
+                options: ['yes', 'no'],
+                default: 'yes'
+            }
+        ].filter(v => !!v),
+        transform: (props, { direction, closable }) => {
+            return {
+                ...props,
+                direction,
+                closable: closable === 'yes',
+            }
+        }
+    })
+};
diff --git a/docs/breadcrumb/adaptor/index.jsx b/docs/breadcrumb/adaptor/index.jsx
new file mode 100644
index 0000000000..1f5478ab02
--- /dev/null
+++ b/docs/breadcrumb/adaptor/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Breadcrumb } from '@alifd/next';
+import { Types, parseData } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Breadcrumb',
+    editor: () => ({
+        props: [{
+            name: 'ellipsis',
+            type: Types.bool,
+            default: false
+        }],
+        data: {
+            icon: true,
+            default: 'Home\nAll Categories\nWomen\'s Clothing\nBlouses & Shirts 78,999 T-shirts'
+        }
+    }),
+    adaptor: ({ ellipsis, data, ...others }) => {
+        const props = ellipsis ? { maxNode: 3 } : {};
+        const list = parseData(data).filter((it) => it.type === 'node');
+        return (
+            <Breadcrumb {...others} {...props}>
+                {
+                    list.map((item, index) => <Breadcrumb.Item key={`item_${index}`}>{item.value}</Breadcrumb.Item>)
+                }
+            </Breadcrumb>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'ellipsis',
+            options: ['yes', 'no'],
+            default: 'no'
+        }],
+        transform: (props, { ellipsis }) => {
+            return {
+                ...props,
+                ellipsis: ellipsis === 'yes'
+            };
+        }
+    })
+
+};
diff --git a/docs/button/adaptor/index.jsx b/docs/button/adaptor/index.jsx
new file mode 100644
index 0000000000..fa300952c1
--- /dev/null
+++ b/docs/button/adaptor/index.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { Types, ContentType, parseData, STATE_MARK } from '@alifd/adaptor-helper';
+import { Button, Icon } from '@alifd/next';
+
+const createContent = (list = []) => {
+    if (!Array.isArray(list)) return list;
+    return list.map(({ type, value }, index) => {
+        if (type === ContentType.icon) {
+            return <Icon type={value} key={`icon-${index}`} />;
+        }
+        return value;
+    });
+};
+
+export default {
+  name: 'Button',
+  shape: ['normal', 'text', 'warning', 'ghost', 'group'],
+  editor: (shape) => {
+    return {
+      props: [{
+        name: 'level',
+        type: Types.enum,
+        options: {
+          normal: ['normal', 'primary', 'secondary'],
+          text: ['normal', 'primary', 'secondary'],
+          warning: ['normal', 'primary'],
+          ghost: ['light', 'dark'],
+          group: ['normal', 'primary', 'secondary'],
+        }[shape],
+      }, {
+        name: 'size',
+        type: Types.enum,
+        options: ['large', 'medium', 'small'],
+        default: 'medium'
+      }],
+      data: {
+        icon: true,
+        ...(shape === 'group' ? {} : {
+          disable: true,
+          hover: true,
+        }),
+        default: shape === 'group' ? 'Button\nButton\nButton' : 'Button'
+      }
+    };
+  },
+  adaptor: ({ shape, level, size, data, ...others }) => {
+    const list = parseData(data, { parseContent: true });
+
+    const buttonProps = {
+      type: shape === 'ghost' ? 'normal' : level,
+      warning: shape === 'warning',
+      text: shape === 'text',
+      ghost: shape === 'ghost' ? level : false,
+    };
+
+    if (list.length === 1) {
+      const className = (others.className || '');
+      return <Button {...others} disabled={list[0].state === 'disabled'} className={list[0].state === 'hover' ? ['hover', className].join(' ') : className } size={size} {...buttonProps}>{createContent(list[0].value)}</Button>
+    }
+
+    return (
+      <Button.Group {...others} size={size}>
+        {
+          list.map((item, index) => <Button key={index} disabled={item.state === 'disabled'} className={item.state === 'hover' ? 'hover' : ''} {...buttonProps}>{createContent(item.value)}</Button>)
+        }
+      </Button.Group>
+    );
+  },
+  content(shape) {
+    if (shape === 'group') {
+      return {
+        options: [{
+          name: 'iconType',
+          options: ['none', 'arrow', 'onlyIcon'],
+          default: 'none'
+        }],
+        transform: (props, { iconType }) => {
+          if (iconType === 'arrow') {
+            return {
+              ...props,
+              data: ['[arrow-left]Go Back', 'Button', 'Go Forward[arrow-right]'].join('\n'),
+            };
+          }
+
+          if (iconType === 'onlyIcon') {
+            return {
+              ...props,
+              data: ['[set]', '[atm]', '[download]'].join('\n'),
+            };
+          }
+
+          return props;
+        }
+      };
+    }
+
+    return {
+      options: [{
+        name: 'iconType',
+        options: ['none', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'atm'],
+        default: 'none'
+      }],
+      transform: (props, { iconType }) => {
+        if (iconType === 'none') return props;
+        let { data } = props;
+        const icon = `[${iconType}]`;
+
+        if (['arrow-right', 'arrow-down', 'arrow-up'].indexOf(iconType) !== -1) {
+          data = data + icon;
+        } else {
+          data = Object.keys(STATE_MARK).filter(v => !!v).indexOf(data.substring(0, 1)) !== -1 ?
+            [data.substring(0, 1), icon, data.substring(1)].join('') : icon + data;
+        }
+
+        return {
+          ...props,
+          data
+        };
+      }
+    };
+  },
+  demoOptions(demo) {
+    const { node } = demo;
+    const { level } = node.props;
+    if (level === 'dark') {
+      return {
+        ...demo,
+        background: '#000',
+      };
+    }
+    return demo;
+  }
+};
diff --git a/docs/calendar/adaptor/index.jsx b/docs/calendar/adaptor/index.jsx
new file mode 100644
index 0000000000..f92988a32b
--- /dev/null
+++ b/docs/calendar/adaptor/index.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import moment from 'moment';
+import { Calendar } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+const now = new Date();
+
+export default {
+    name: 'Calendar',
+    shape: ['fullscreen', 'card', 'panel', 'rangePanel'],
+    editor: (shape) => {
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: ['day', 'month', 'year'].filter((level) => {
+                    if (level === 'year') return shape === 'panel';
+                    if (shape === 'rangePanel') return level === 'day';
+
+                    return true;
+                }),
+                default: 'day'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: shape === 'fullscreen' ? 600 : shape === 'rangePanel' ? 600 : 320,
+            }, {
+                name: 'date',
+                type: Types.string,
+                default: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
+            }]
+        };
+    },
+    adaptor: ({ shape, level, width, date = '', style = {}, ...others }) => {
+        const arr = date.split('-').map(number => Number(number) || 0);
+
+        const d = moment();
+        arr.forEach((number, index) => {
+            if (!number) return;
+            switch (index) {
+                case 0:
+                    d.year(number);
+                    break;
+                case 1:
+                    d.month(number - 1);
+                    break;
+                case 2:
+                    d.date(number);
+                    break;
+                default: return;
+            }
+        });
+
+        if (shape === 'rangePanel') {
+            if (!Calendar.RangeCalendar) return null;
+
+            return (
+                <Calendar.RangeCalendar {...others}  style={{
+                    width,
+                    ...style
+                }} showOtherMonth startValue={d} endValue={d.clone().add(1, 'months')} />
+            );
+        }
+        return (
+            <Calendar {...others} value={d} shape={shape} mode={level === 'day' ? 'date' : level} style={{
+                width,
+                ...style
+            }} />
+        );
+    }
+};
diff --git a/docs/card/adaptor/index.jsx b/docs/card/adaptor/index.jsx
new file mode 100644
index 0000000000..005ae47334
--- /dev/null
+++ b/docs/card/adaptor/index.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+let index = 0;
+export default {
+    name: 'Card',
+    editor: () => ({
+        props: [{
+            name: 'bullet',
+            type: Types.bool,
+            default: false,
+        }, {
+            name: 'divider',
+            type: Types.bool,
+            default: true,
+        }, {
+            name: 'expand',
+            label: 'Expaned',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'height',
+            label: 'Content Height',
+            type: Types.number,
+            default: 215,
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Title'
+        }, {
+            name: 'subTitle',
+            type: Types.string,
+            default: '',
+        }, {
+            name: 'extra',
+            type: Types.string,
+            default: '',
+        }],
+    }),
+    adaptor: ({ bullet, divider, expand, width, height, title, subTitle, extra, style, ...others }) => {
+        const cardStyle = {
+            width: width === 0 ? '' : width,
+            ...style,
+        };
+
+        return (
+            <Card {...others} key={`${expand}_${index++}`} locale={{ expand: 'Fold' }} title={title} showTitleBullet={bullet} subTitle={subTitle} extra={extra} showHeadDivider={divider} contentHeight={expand ? 'auto' : height - 1} style={cardStyle}>
+                <div style={{ height }}></div>
+            </Card>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'bullet',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }, {
+            name: 'divider',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'expanded',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'subTitle',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }, {
+            name: 'link',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }],
+        transform: (props, { bullet, divider, expanded, subTitle, link }) => {
+            return {
+                ...props,
+                bullet: bullet === 'show',
+                divider: divider === 'show',
+                expand: expanded === 'yes',
+                subTitle: subTitle === 'show' ? 'Sub Title' : '',
+                extra: link === 'show' ? 'Link' : '',
+            };
+        }
+    })
+};
diff --git a/docs/cascader-select/adaptor/index.jsx b/docs/cascader-select/adaptor/index.jsx
new file mode 100644
index 0000000000..03484ee531
--- /dev/null
+++ b/docs/cascader-select/adaptor/index.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { CascaderSelect } from '@alifd/next';
+
+let index = 1000;
+const createDataSource = (list, map = {}) => {
+    if (!list) return [];
+    return list.filter((item) => item.type === NodeType.node).map(({ value, children, state }) => {
+        const key = String(index++);
+        if (state === 'active') {
+            if (!children || children.length === 0) {
+                map.selecteds.push(key);
+            } else {
+                map.expandeds.push(key);
+            }
+        }
+
+        return {
+            value: key,
+            label: value,
+            disabled: state === 'disabled',
+            children: createDataSource(children, map),
+        };
+    });
+};
+export default {
+    name: 'CascaderSelect',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true,
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }],
+        data: {
+            active: true,
+            disabled: true,
+            icon: true,
+            default: '*1\n\t*1-1\n\t\t1-1-1\n\t\t1-1-2\n\t\t1-1-3\n\t\t1-1-4\n\t\t*1-1-5\n\t1-2\n\t1-3\n\t1-4\n\t1-5\n2\n\t2-1\n\t2-2\n\t2-3\n\t2-4\n\t2-5\n3\n\t3-1\n\t3-2\n\t3-3\n\t3-4\n\t3-5\n4\n\t4-1\n\t4-2\n\t4-3\n\t4-4\n\t4-5\n5\n\t5-1\n\t5-2\n\t5-3\n\t5-4\n\t5-5'
+        }
+    }),
+    adaptor: ({ shape, size, state, width, border, checkbox, label, data, style = {}, ...others}) => {
+        const list = parseData(data);
+        const map = { selecteds: [], expandeds: [] };
+        const dataSource = createDataSource(list, map);
+        const value = map.selecteds;
+
+        return (
+            <CascaderSelect  {...others} popupProps={{ needAdjust: false }} key={new Date().getTime()} defaultExpandedValue={map.expandeds} style={{ width: width <=0 ? '' : width, ...style }} label={label} popupContainer={node => node} hasBorder={border} size={size} multiple={checkbox} value={value} visible={state === 'expanded'} disabled={state=== 'disabled'} dataSource={dataSource}/>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'checkbox',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'border',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'label',
+            options: ['yes', 'no'],
+            default: 'no'
+        }],
+        transform: (props, { checkbox, border, label }) => {
+            return {
+                ...props,
+                checkbox: checkbox === 'yes',
+                border: border === 'show',
+                label: label === 'yes' ? 'Label' : ''
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props = {} } = node;
+        if (props.state === 'expanded') {
+            return { ...demo, height: 300 };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/cascader/adaptor/index.jsx b/docs/cascader/adaptor/index.jsx
new file mode 100644
index 0000000000..8a09f1fa53
--- /dev/null
+++ b/docs/cascader/adaptor/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Types, NodeType, parseData } from '@alifd/adaptor-helper';
+import { Cascader, Icon } from '@alifd/next';
+
+let index = 1000;
+const createDataSource = (list, map = {}) => {
+    if (!list) return [];
+    return list.filter((item) => item.type === NodeType.node).map(({ value, children, state }) => {
+        const key = String(index++);
+        if (state === 'active') {
+            if (!children || children.length === 0) {
+                map.selecteds.push(key);
+            } else {
+                map.expandeds.push(key);
+            }
+        }
+
+        return {
+            value: key,
+            label: value,
+            disabled: state === 'disabled',
+            children: createDataSource(children, map),
+        };
+    });
+}
+export default {
+    name: 'Cascader',
+    editor: () => ({
+        props: [{
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 120
+        }],
+        data: {
+            active: true,
+            disable: true,
+            icon: true,
+            default: 'Option1\n\tOption1-1\n\tOption1-2\n\tOption1-3\n\tOption1-4\n\tOption1-5\n\tOption1-6\nOption2\n\tOption2-1\n\tOption2-2\n\tOption2-3\n\tOption2-4\n\tOption2-5\n\tOption2-6\nOption3\n\tOption3-1\n\tOption3-2\n\tOption3-3\n\tOption3-4\n\tOption3-5\n\tOption3-6\nOption4\n\tOption4-1\n\tOption4-2\n\tOption4-3\n\tOption4-4\n\tOption4-5\n\tOption4-6\nOption5\n\tOption5-1\n\tOption5-2\n\tOption5-3\n\tOption5-4\n\tOption5-5\n\tOption5-6\nOption6\n\tOption6-1\n\tOption6-2\n\tOption6-3\n\tOption6-4\n\tOption6-5\n\tOption6-6',
+        }
+    }),
+    adaptor: ({ checkbox, width, data, ...others }) => {
+        const list = parseData(data);
+        const map = { selecteds: [], expandeds: [] };
+        const dataSource = createDataSource(list, map);
+        const value = map.selecteds;
+        const itemRender = ({ label = '' }) => {
+            return label.replace(/(\[.*?\])/g, '\n$1\n').split('\n').filter(v=> !!v)
+                .map((d, i) => {
+                    let icon;
+                    switch (true) {
+                        case /^\[(.*)\]$/.test(d):
+                            icon = RegExp.$1;
+                            if (!icon) return '';
+                            return <Icon style={{ marginRight: '4px' }} type={icon} size="small" key={icon + i} />;
+                        default:
+                            return d;
+                    }
+                });
+        };
+
+        return <Cascader {...others} itemRender={itemRender} canOnlySelectLeaf  listStyle={{ width: width <= 0 ? '' : width }} dataSource={dataSource} expandedValue={map.expandeds} value={value} multiple={checkbox} />;
+    }
+};
diff --git a/docs/checkbox/adaptor/index.jsx b/docs/checkbox/adaptor/index.jsx
new file mode 100644
index 0000000000..28b1ca3d1d
--- /dev/null
+++ b/docs/checkbox/adaptor/index.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Checkbox } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Checkbox',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'disabled', 'indeterminate', 'indeterminateHover', 'indeterminateDisabled', 'checked', 'checkedHover', 'checkedDisabled'],
+            default: 'normal'
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: 'pear'
+        }]
+    }),
+    adaptor: ({ state = '', label, className = '', ...others }) => {
+        const isHovered = ['hover', 'indeterminateHover', 'checkedHover'].indexOf(state) !== -1;
+        const isChecked = state.indexOf('checked') !== -1;
+        const isDisabled = ['disabled', 'indeterminateDisabled', 'checkedDisabled'].indexOf(state) !== -1;
+        const isIndeterminated = state.indexOf('indeterminate') !== -1;
+
+        return (
+            <Checkbox {...others} className={`${isHovered ? 'hovered' : ''} ${className}`} indeterminate={isIndeterminated} checked={isChecked} disabled={isDisabled}>{label}</Checkbox>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'label',
+            options: ['show', 'hide'],
+            default: 'show'
+        }],
+        transform: (props, { label }) => {
+            return {
+                ...props,
+                label: label === 'show' ? props.label : ''
+            };
+        },
+    })
+};
diff --git a/docs/collapse/adaptor/index.jsx b/docs/collapse/adaptor/index.jsx
new file mode 100644
index 0000000000..89225e473b
--- /dev/null
+++ b/docs/collapse/adaptor/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Collapse } from '@alifd/next';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Collapse',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }],
+        data: {
+            active: true,
+            disable: true,
+            default: '*Panel Header 1\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 2\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 3\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\n'
+        }
+    }),
+    adaptor: ({ state, width, data, style = {}, ...others }) => {
+        const list = parseData(data).filter(node => NodeType.node === node.type);
+        let expandedKeys = [];
+        const children = list.map(({ state, value, children }, index) => {
+            if (state === 'active') {
+                expandedKeys.push(`panel_${index}`);
+            }
+
+            return (
+                <Collapse.Panel disabled={state === 'disabled'} key={`panel_${index}`} title={value}>
+                    {children && children.length > 0 ? children[0].value : ''}
+                </Collapse.Panel>
+            );
+        });
+        return (
+            <Collapse {...others} style={{
+                minWidth: width,
+                ...style,
+            }} expandedKeys={state === 'disabled' ? [] : expandedKeys} disabled={state === 'disabled'}>
+                {
+                    children
+                }
+            </Collapse>
+        );
+    }
+};
diff --git a/docs/date-picker/adaptor/index.jsx b/docs/date-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..7a11c78f8a
--- /dev/null
+++ b/docs/date-picker/adaptor/index.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { DatePicker } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+import moment from 'moment';
+
+export default {
+    name: 'DatePicker',
+    shape: ['normal', {
+        value: 'range',
+        label: 'Range Picker'
+    }],
+    editor: (shape) => {
+        return {
+            props: [{
+                name: 'state',
+                type: Types.enum,
+                options: ['normal', 'expanded', 'selected', 'disabled'],
+                default: 'normal'
+            }, {
+                name: 'size',
+                type: Types.enum,
+                options: ['large', 'medium', 'small'],
+                default: 'medium'
+            }, {
+                name: 'type',
+                type: Types.enum,
+                options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+                default: shape === 'range' ? 'dateRange' : 'date'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: 288
+            }, {
+                name: 'label',
+                type: Types.string,
+                default: ''
+            }, {
+                name: 'placeholder',
+                type: Types.string,
+                default: shape === 'range' ? 'Start Date - End Date' : 'Please Select Date'
+            }]
+        }
+    },
+    adaptor: ({ shape, state, size, type, width, label, placeholder = '', style = {}, ...others }) => {
+        const now = moment();
+        style = {
+            minWidth: width,
+            ...style,
+        }
+
+        if (shape === 'range') {
+            return  (
+                <DatePicker.RangePicker
+                    {...others}
+                    visible={state === 'expanded'}
+                    disabled={state === 'disabled'}
+                    popupProps={{ needAdjust: false }}
+                    popupContainer={node => node}
+                    style={style}
+                    size={size}
+                    showTime={'dateTimeRange' === type}
+                    locale={{
+                        startPlaceholder: placeholder.split('-')[0],
+                        endPlaceholder: placeholder.split('-')[1]
+                    }}
+                    label={label}
+                    value={state !== 'normal' ? [now.clone(), now.clone().add(1, 'month')] : null}
+                />
+            );
+        }
+
+        return (
+            <DatePicker
+                {...others}
+                visible={state === 'expanded'}
+                disabled={state === 'disabled'}
+                popupProps={{ needAdjust: false }}
+                popupContainer={node => node}
+                style={style}
+                size={size}
+                showTime={'dateTime' === type}
+                placeholder={placeholder}
+                label={label}
+                value={state !== 'normal' ? now.clone() : null}
+            />
+        );
+    },
+    content: (shape) => ({
+        options: [{
+            name: 'type',
+            options: shape === 'range' ? ['dateRange', 'dateTimeRange'] : ['date', 'dateTime'],
+            default: shape === 'range' ? 'dateRange' : 'date'
+        }, {
+            name: 'label',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }],
+        transform: (props, { type , label }) => {
+            return {
+                ...props,
+                type,
+                label: label === 'show' ? 'Label' : ''
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props = {} } = node;
+        if (props.state === 'expanded') {
+            return { ...demo, height: 300 };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/dialog/adaptor/index.jsx b/docs/dialog/adaptor/index.jsx
new file mode 100644
index 0000000000..9dc76d93b6
--- /dev/null
+++ b/docs/dialog/adaptor/index.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { Dialog, Message } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Dialog',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'alert', 'confirm'],
+            default: 'normal'
+        }, {
+            name: 'footerAlign',
+            type: Types.enum,
+            options: ['left', 'right', 'center'],
+            default: 'right'
+        }, {
+            name: 'okButtonPosition',
+            type: Types.enum,
+            options: ['left', 'right'],
+            default: 'left'
+        }, {
+            name: 'mask',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'height',
+            type: Types.number,
+            default: 160
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Welcome to Alibaba.com'
+        }],
+        data: {
+            default: 'Start your business here by searching a popular product'
+        }
+    }),
+    adaptor: ({ level, footerAlign, okButtonPosition, mask, width, height, title, style, className, data, ...others}) => {
+         const dialogStyle = {
+            position: mask ? 'absolute' : 'relative',
+            width: width,
+            zIndex: 1,
+            ...(mask ? {
+                left: 20,
+                top: 20,
+            } : style),
+        };
+
+        const props = {
+            ...(mask ? {} : {...others }),
+            className: level === 'normal' ? className : `${className || ''} next-dialog-quick`,
+            style: dialogStyle,
+            footerAlign: footerAlign,
+            footerActions: okButtonPosition == 'left' ? ['ok', 'cancel'] : ['cancel', 'ok'],
+            locale: locale.Dialog,
+            height: `${height}px`
+        };
+
+        let dialog;
+        switch(level) {
+            case 'alert':
+                dialog = (
+                    <Dialog.Inner {...props}>
+                        <Message
+                            size="large"
+                            shape="addon"
+                            type="warning"
+                            title={title}
+                            className="next-dialog-message"
+                        >
+                            {data}
+                        </Message>
+                    </Dialog.Inner>
+                );
+                break;
+            case 'confirm':
+                dialog = (
+                    <Dialog.Inner {...props}>
+                        <Message
+                            size="large"
+                            shape="addon"
+                            type="help"
+                            title={title}
+                            className="next-dialog-message"
+                        >
+                            {data}
+                        </Message>
+                    </Dialog.Inner>
+                );
+                break;
+            default:
+                dialog = <Dialog.Inner {...props} title={title}>{data}</Dialog.Inner>
+                break;
+        }
+
+        return mask ? (
+            <div className={`next-overlay-wrapper opened ${ className }`} {...others} style={{ position: 'relative', width: width + 40, height: height + 40, ...style }}>
+                <div className="next-overlay-backdrop" style={{ position: 'relative' }} />
+                {dialog}
+            </div>
+        ) : dialog;
+    },
+    content: () => ({
+        options: [{
+            name: 'title',
+            options: ['show', 'hide'],
+            default: 'show',
+        }, {
+            name: 'overlay',
+            options: ['show', 'hide'],
+            default: 'hide',
+        }, {
+            name: 'footerAlign',
+            options: ['left', 'center', 'right'],
+            default: 'right'
+        }, {
+            name: 'okButtonPosition',
+            options: ['left', 'right'],
+            default: 'right'
+        }],
+        transform: (props, { title, overlay, footerAlign, okButtonPosition }) => {
+            return {
+                ...props,
+                title: title === 'hide' ? '' : title,
+                mask: overlay === 'show',
+                footerAlign,
+                okButtonPosition,
+            };
+        }
+    })
+};
diff --git a/docs/input/adaptor/index.jsx b/docs/input/adaptor/index.jsx
new file mode 100644
index 0000000000..82d4878343
--- /dev/null
+++ b/docs/input/adaptor/index.jsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Input  } from '@alifd/next';
+
+export default {
+    name: 'Input',
+    shape: [{
+        label: 'Textfield',
+        value: 'textfield'
+    }, {
+        label: 'Textarea',
+        value: 'textarea'
+    }, {
+        label: 'Addon',
+        value: 'addon'
+    }],
+    editor: (shape = 'textfield') => {
+        return {
+            props: [...(
+                shape === 'textarea' ? [] : [{
+                    name: 'size',
+                    type: Types.enum,
+                    options: ['large', 'medium', 'small'],
+                    default: 'medium'
+                }]
+            ), ...(
+                shape === 'addon' ? [] : [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'focused', 'disabled', 'error', ...(shape === 'textfield' ? ['success', 'loading'] : [])],
+                    default: 'normal'
+                }]
+            ), {
+                name: 'widget',
+                type: Types.enum,
+                options: shape === 'textarea' ? ['none', 'length'] : ['none', 'length', 'clear'],
+                default: 'none'
+            }, {
+                name: 'width',
+                type: Types.number,
+                default: 200
+            },
+            ...(shape === 'textarea' ? [{
+                name: 'rows',
+                type: Types.number,
+                default: 4,
+            }] : []),
+            ...(shape !== 'addon' ? [{
+                name: 'border',
+                type: Types.bool,
+                default: true,
+            }] : []),
+            {
+                name: 'label',
+                type: Types.string,
+                default: ''
+            }, {
+                name: 'placeholder',
+                type: Types.string,
+                default: 'Please Input'
+            },
+            ...(shape === 'addon' ? [{
+                name: 'prefix',
+                type: Types.string,
+                default: 'https://'
+            }, {
+                name: 'suffix',
+                type: Types.string,
+                default: '.com'
+            }] : [])],
+            data: {
+                default: shape === 'textarea' ? 'multiple line' : shape === 'addon' ? 'alibaba' : ''
+            }
+        };
+    },
+    adaptor: ({
+        shape,
+        size,
+        state,
+        widget,
+        width,
+        rows,
+        border,
+        label,
+        placeholder,
+        prefix = '',
+        suffix = '',
+        style = {},
+        className = '',
+        data,
+        ...others
+    }) => {
+        const props = {
+            ...others,
+            label,
+            hasBorder: border,
+            placeholder,
+            className,
+            style: {
+                width,
+                ...style
+            },
+            value: data
+        };
+
+        if (widget === 'length') {
+            props.hasLimitHint = true;
+            props.maxLength = 15;
+        } else if (widget === 'clear') {
+            props.hasClear = true;
+        }
+
+        if (size) {
+            props.size = size;
+        }
+
+        switch(state) {
+            case 'focused':
+                props.className = `${className} next-focus`;
+                break;
+            case 'disabled':
+                props.disabled = true;
+                break;
+            case 'error':
+            case 'loading':
+            case 'success':
+                props.state = state;
+                break;
+            default: break;
+        }
+
+
+        if (rows && rows > 0) {
+            props.rows = rows;
+        }
+
+        if (shape === 'addon') {
+            props.addonTextAfter = suffix;
+            props.addonTextBefore = prefix;
+        }
+
+        if (shape === 'textarea') {
+            return <Input.TextArea {...props}/>;
+        }
+
+        return <Input {...props} />;
+    },
+    content: (shape) => {
+        if (shape === 'textfield') {
+            return {
+                options: [{
+                    name: 'clear',
+                    options: ['show', 'hide'],
+                    default: 'hide',
+                }],
+                transform: (props, { clear }) => {
+                    return {
+                        ...props,
+                        widget: clear === 'show' ? 'clear' : 'none',
+                        data: clear === 'show' ? 'Input ...' : props.value,
+                    };
+                }
+            };
+        }
+
+        return {
+            options: [],
+            transform: p => p
+        };
+    }
+};
diff --git a/docs/loading/adaptor/index.jsx b/docs/loading/adaptor/index.jsx
new file mode 100644
index 0000000000..f81f8b148d
--- /dev/null
+++ b/docs/loading/adaptor/index.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Loading } from '@alifd/next';
+
+export default {
+    name: 'Loading',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: 'enum',
+            options: ['large', 'medium'],
+            default: 'medium'
+        }],
+    }),
+    adaptor: ({ size, ...others }) => {
+        return <Loading {...others} size={size}><div style={{ textAlign: 'center', padding: '20px', display: 'block' }}/></Loading>;
+    }
+};
diff --git a/docs/menu-button/adaptor/index.jsx b/docs/menu-button/adaptor/index.jsx
new file mode 100644
index 0000000000..1c67e72b5d
--- /dev/null
+++ b/docs/menu-button/adaptor/index.jsx
@@ -0,0 +1,195 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { MenuButton, Menu, Icon } from '@alifd/next';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Menu.SubMenu>
+        );
+    }
+
+    return <Menu.Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+export default {
+    name: 'MenuButton',
+    shape: ['normal', 'text', 'ghost'],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'text' ? ['normal', 'primary'] : shape === 'ghost' ? ['light', 'dark'] : ['normal', 'primary', 'secondary'],
+            default: shape === 'ghost' ? 'light' : 'normal',
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }],
+        data: {
+            icon: true,
+            active: true,
+            disable: true,
+            default: 'Edit Document\n\tUndo\n\t*Redo\n\tCut\n\tCopy\n\tPaste'
+        }
+    }),
+    adaptor: ({ shape, level, size, data, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const buttonItem = list[0] ? list[0] : { value: []};
+
+        if (buttonItem.type !== 'node') return null;
+
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list[0] ? list[0].children : [], keys);
+
+        const label = buttonItem.value.map(({ type, value}) => {
+            if (type === 'icon') return <Icon type={value} />;
+            return value;
+        });
+
+        return (
+            <MenuButton
+                {...others}
+                size={size}
+                disabled={buttonItem.state === 'disabled'}
+                visible={buttonItem.state === 'active'}
+                type={shape === 'ghost' ? 'normal' : level}
+                popupProps={{ needAdjust: false }}
+                popupContainer={node => node}
+                ghost={shape === 'ghost' ? level : false}
+                selectMode="multiple"
+                text={shape === 'text'}
+                menuProps={{ openKeys: keys.expanded, style: { textAlign: 'left' } }}
+                selectedKeys={keys.selected}
+                label={label}
+            >
+                {createContents(dataSouce)}
+            </MenuButton>
+        );
+    },
+    demoOptions: (demo) => {
+        const { node = { props: {} } } = demo;
+        const { level, data } = node.props;
+        if (data.indexOf('*') === 0) {
+            demo = {
+                ...demo,
+                height: 250
+            };
+        }
+
+        if (level === 'dark') {
+            demo = {
+                ...demo,
+                background: '#333'
+            };
+        } else if(level === 'light') {
+            demo = {
+                ...demo,
+                background: 'rgb(235, 236, 240)',
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/menu/adaptor/index.jsx b/docs/menu/adaptor/index.jsx
new file mode 100644
index 0000000000..6bf1700d22
--- /dev/null
+++ b/docs/menu/adaptor/index.jsx
@@ -0,0 +1,190 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+import { Menu, Icon } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item, selectType) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children, selectType)}
+            </Menu.SubMenu>
+        );
+    }
+
+    let Item = Menu.Item;
+
+    if (selectType === 'checkbox') {
+        Item = Menu.CheckboxItem;
+    } else if (selectType === 'radio') {
+        Item = Menu.RadioItem;
+    }
+
+    return <Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = [], selectType) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it, selectType))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item, selectType);
+    });
+};
+
+export default {
+    name: "Menu",
+    editor: () => ({
+        props: [{
+            name: 'selectType',
+            type: Types.enum,
+            options: ['checkbox', 'radio', 'checkLeft', 'checkRight'],
+            default: 'checkLeft'
+        }, {
+            name: 'nestMode',
+            type: Types.enum,
+            options: ['inline', 'popup'],
+            default: 'inline',
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 150
+        }],
+        data: {
+            active: true,
+            disable: true,
+            group: true,
+            icon: true,
+            default: '#Group1\noption1\n*option2\n\tsub option3\n\t-sub option4\n\tsub option5\n---\n#Group2\noption1\n*option2'
+        }
+    }),
+    adaptor: ({ selectType, nestMode, width, style, data, ...others }) => {
+        const list = parseData(data, { parseContent: true });
+        const keys = { selected: [], expanded: [] };
+        const array = createDataSouce(list, keys);
+
+        return (
+            <Menu {...others} selectMode="multiple" popupProps={{ needAdjust: false, container: node => node }} isSelectIconRight={selectType === 'checkRight'} openKeys={keys.expanded} selectedKeys={keys.selected} style={{ width, ...style }} mode={nestMode === 'popup' ? 'popup' : 'inline'}>
+                {
+                    createContents(array, selectType)
+                }
+            </Menu>
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'group',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'icon',
+            options: ['yes', 'no'],
+            default: 'no'
+        }, {
+            name: 'selectType',
+            options: ['checkbox', 'radio', 'checkLeft', 'checkRight'],
+            default: 'checkLeft',
+        }],
+        transform: (props, { group, icon, selectType }) => {
+            const iconStr = icon === 'yes' ? '[picture]' : '';
+            const prefix = (props.data || '').indexOf('*') !== -1 ? '*' : (props.data || '').indexOf('-') !== -1 ? '-' : '';
+            if (group === 'yes') {
+                props.data = `#group1\n${prefix}${iconStr}option1\n${iconStr}option2\n---\n#group2\n${iconStr}option3\n${iconStr}option4`;
+            } else if (icon === 'yes') {
+                props.data = `${iconStr}option1\n${iconStr}option2\n${iconStr}option3\n${iconStr}option4`;
+            }
+            return {
+                ...props,
+                selectType,
+            };
+        }
+    })
+};
diff --git a/docs/message/adaptor/index.jsx b/docs/message/adaptor/index.jsx
new file mode 100644
index 0000000000..201a57371c
--- /dev/null
+++ b/docs/message/adaptor/index.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Message } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Message',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['inline', 'toast', 'addon'],
+            default: 'inline'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['success', 'warning', 'error', 'notice', 'help', 'loading'],
+            default: 'success',
+        }, {
+            name: 'closable',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'title',
+            type: Types.string,
+            default: 'Title'
+        }],
+        data: {
+            default: 'This item already has the label "travel", you can add a new label.'
+        }
+    }),
+    adaptor: ({ level, size, state, closable, width, title, data, style, ...others}) => {
+        return (
+            <Message {...others} shape={level} style={{ width: width || '', ...style}} closeable={closable} type={state} size={size} title={title}>{data}</Message>
+        );
+    }
+};
diff --git a/docs/nav/adaptor/index.jsx b/docs/nav/adaptor/index.jsx
new file mode 100644
index 0000000000..eb54ff844b
--- /dev/null
+++ b/docs/nav/adaptor/index.jsx
@@ -0,0 +1,187 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+import { Nav } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    const { value } = (item.value || []).find(item => item.type === ContentType.icon) || {};
+    if (item.children.length > 0) {
+        return (
+            <Nav.SubNav key={item.key} icon={value} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Nav.SubNav>
+        );
+    }
+
+    return <Nav.Item key={item.key} icon={value} className={item.state === 'hover' ? 'next-focused' : ''} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? null : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Nav.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Nav.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Nav.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+
+export default {
+    name: 'Nav',
+    shape: [{
+        label: 'Horizontal',
+        value: 'hoz'
+    }, {
+        label: 'Vertical',
+        value: 'ver'
+    }],
+    editor: (shape = 'hoz') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'primary', 'secondary', 'line'],
+            default: 'normal'
+        }, {
+            name: 'selectLinePosition',
+            type: Types.enum,
+            options: shape === 'hoz' ? ['top', 'bottom', 'none'] : ['left', 'right', 'none'],
+            default: shape === 'hoz' ? 'bottom' : 'right'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: shape === 'hoz' ? 640 : 200
+        },
+        ...(shape === 'ver' ? [{
+            name: 'height',
+            type: Types.number,
+            default: shape === 'hoz' ? '' : 600
+        }, {
+            name: 'iconOnly',
+            type: Types.bool,
+            default: false,
+        }] : [])],
+        data: {
+            active: true,
+            hover: true,
+            group: true,
+            icon: true,
+            default: `[account]Nav Item 1\n[account]Nav Item 2\n[account]Nav Item 3\n${shape === 'ver' ? '*' : ''}[account]Nav Item 4\n\t[account]Option 1\n\t[account]Option 2\n\t[account]Option 3\n\t[account]Option 4`
+        }
+    }),
+    adaptor: ({ shape, level, selectLinePosition, width, height, data, style, iconOnly = false, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list, keys);
+
+        return (
+            <Nav
+                {...others}
+                type={level}
+                direction={shape}
+                iconOnly={iconOnly}
+                openKeys={keys.expanded}
+                selectedKeys={keys.selected}
+                activeDirection={
+                    selectLinePosition === 'none' ?
+                        null :
+                        selectLinePosition
+                }
+                style={{
+                    width,
+                    height,
+                    ...style
+                }}
+            >
+                {createContents(dataSouce)}
+            </Nav>
+        );
+    }
+};
diff --git a/docs/number-picker/adaptor/index.jsx b/docs/number-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..cc7243ca3c
--- /dev/null
+++ b/docs/number-picker/adaptor/index.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { NumberPicker } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'NumberPicker',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'inline'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 80
+        }, {
+            name: 'value',
+            type: Types.number,
+            default: 1
+        }]
+    }),
+    adaptor: ({ level, size, state, width, value, style, ...others }) => {
+        return <NumberPicker {...others} style={{ minWidth: width, ...style }} disabled={state === 'disabled'} value={value} size={size} type={level} />
+    }
+};
diff --git a/docs/pagination/adaptor/index.jsx b/docs/pagination/adaptor/index.jsx
new file mode 100644
index 0000000000..f47110dc22
--- /dev/null
+++ b/docs/pagination/adaptor/index.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Pagination } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+import enUS from '../../../src/locale/en-us';
+
+export default {
+    name: 'Pagination',
+    shape: ['normal', 'simple', 'mini'],
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'sizeSelector',
+            type: Types.enum,
+            options: ['none', 'filter', 'dropdown'],
+            default: 'none'
+        }, {
+            name: 'control',
+            type: Types.enum,
+            options: ['textAndIcon', 'onlyIcon', 'noBorder'],
+            default: 'textAndIcon'
+        }]
+    }),
+    adaptor: ({ shape, size, sizeSelector, control, ...others}) => {
+        return (
+            <Pagination
+                {...others}
+                type={shape}
+                size={size}
+                current={4}
+                shape={{
+                    textAndIcon: 'normal',
+                    onlyIcon: 'arrow-only',
+                    noBorder: 'no-border'
+                }[control]}
+                locale={enUS.Pagination}
+                pageSizeSelector={sizeSelector === 'none' ? false : sizeSelector}
+            />
+        );
+    },
+    content: () => ({
+        options: [{
+            name: 'control',
+            options: ['textAndIcon', 'onlyIcon', 'noBorder'],
+            default: 'textAndIcon'
+        }],
+        transform: (props, { control }) => {
+            return {
+                ...props,
+                control
+            };
+        }
+    })
+};
diff --git a/docs/paragraph/adaptor/index.jsx b/docs/paragraph/adaptor/index.jsx
new file mode 100644
index 0000000000..2c4ade5c32
--- /dev/null
+++ b/docs/paragraph/adaptor/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Paragraph } from '@alifd/next';
+import { Types } from '@alifd/adaptor-helper';
+
+export default {
+    name: 'Paragraph',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }],
+        data: {
+            default: `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.`
+        }
+    }),
+    adaptor: ({ size, width, style, data, ...others }) => {
+        return (<Paragraph {...others} style={{ width: width, ...style }} size={size} type={size === 'meidum' ? 'long' : 'short'}>{data}</Paragraph>);
+    }
+};
diff --git a/docs/progress/adaptor/index.jsx b/docs/progress/adaptor/index.jsx
new file mode 100644
index 0000000000..b2d4522ed5
--- /dev/null
+++ b/docs/progress/adaptor/index.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Progress } from '@alifd/next';
+
+export default {
+    name: 'Progress',
+    shape: ['line', 'circle'],
+    editor: (shape = 'line') => {
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: ['normal', 'success', 'error'],
+                default: 'normal'
+            }, {
+                name: 'size',
+                type: Types.enum,
+                options: ['large', 'medium', 'small'],
+                default: 'medium'
+            }, {
+                name: 'mode',
+                type: Types.enum,
+                options: ['basic', 'staging'],
+                default: 'basic'
+            }, {
+                name: 'text',
+                type: Types.bool,
+                default: false
+            },
+            ...(
+                shape === 'line' ?
+                    [{
+                        name: 'border',
+                        type: Types.bool,
+                        default: false
+                    }, {
+                        name: 'width',
+                        type: Types.number,
+                        default: 200
+                    }] :
+                    []
+            ),
+            {
+                name: 'percent',
+                type: Types.number,
+                default: 25
+            }]
+        };
+    },
+    adaptor: ({ shape, level, size, mode, text, border, width, percent, style, ...others }) => {
+        return (
+            <Progress {...others} style={{
+                width: width || '',
+                ...style,
+            }} shape={shape} size={size} textRender={(percent) => text ? `${Math.floor(percent)}%` : false} percent={percent} state={level} progressive={mode === 'staging'} hasBorder={border} />
+        );
+    },
+    content: (shape = 'line') => ({
+        options: [{
+            name: 'staging',
+            options: ['none', 'started', 'middle', 'finishing'],
+            default: 'none'
+        }, {
+            name: 'text',
+            options: ['show', 'hide'],
+            default: shape === 'cirlce' ? 'show' : 'hide'
+        }, {
+            name: 'border',
+            options: ['show', 'hide'],
+            default: 'hide'
+        }].filter(({ name }) => name !== 'border' || shape === 'line'),
+        transform: (props, { staging, text, border }) => {
+            switch (staging) {
+                case 'started':
+                    props = {
+                        ...props,
+                        percent: 20,
+                        mode: 'staging'
+                    };
+                    break;
+                case 'middle':
+                    props = {
+                        ...props,
+                        percent: 60,
+                        mode: 'staging'
+                    };
+                    break;
+                case 'finishing':
+                    props = {
+                        ...props,
+                        percent: 85,
+                        mode: 'staging'
+                    };
+                    break;
+                default: break;
+            }
+
+            return {
+                ...props,
+                text: text === 'show',
+                border: border === 'show'
+            };
+        }
+    })
+
+};
diff --git a/docs/radio/adaptor/index.jsx b/docs/radio/adaptor/index.jsx
new file mode 100644
index 0000000000..467c772c72
--- /dev/null
+++ b/docs/radio/adaptor/index.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Radio } from '@alifd/next';
+
+export default {
+    name: 'Radio',
+    shape: ['normal', {value: 'button', label: 'Radio Button'}],
+    editor: (shape = 'normal') => {
+        if (shape === 'button') {
+            return {
+                props: [{
+                    name: 'size',
+                    type: Types.enum,
+                    options: ['large', 'medium', 'small'],
+                    default: 'medium'
+                }, {
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }],
+                data: {
+                    hover: true,
+                    disable: true,
+                    active: true,
+                    default: `Cell 1\n*Cell 2\nCell 3`
+                }
+            };
+        }
+        return {
+            props: [{
+                name: 'state',
+                type: Types.enum,
+                options: ['normal', 'hover', 'disabled', 'checked', 'checkedHover', 'checkedDisabled'],
+                default: 'normal'
+            }, {
+                name: 'label',
+                type: Types.string,
+                default: 'label'
+            }],
+        }
+    },
+    adaptor: ({ shape, size, state = '', label, data,  ...others }) => {
+        if (shape === 'normal') {
+            return (
+                <Radio
+                    {...others}
+                    disabled={['disabled', 'checkedDisabled'].indexOf(state) !== -1}
+                    className={`${others.className || ''} ${['hover', 'checkedHover'].indexOf(state) !== -1 ? 'hovered' : ''}`}
+                    checked={state.indexOf('checked') !== -1}
+                    label={label}
+                />
+            );
+        }
+
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+
+        return (
+            <Radio.Group {...others} size={size} shape="button" value={list.findIndex(item => item.state === 'active')}>
+                {
+                    list.map((item, index) => <Radio key={`key_${index}`} className={item.state === 'hover' ? 'hovered' : ''} value={index} disabled={item.state === 'disabled' || state === 'disabled'}>{item.value}</Radio>)
+                }
+            </Radio.Group>
+        );
+
+    }
+
+};
+
diff --git a/docs/range/adaptor/index.jsx b/docs/range/adaptor/index.jsx
new file mode 100644
index 0000000000..4047a4b8c7
--- /dev/null
+++ b/docs/range/adaptor/index.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Range } from '@alifd/next';
+
+export default {
+    name: 'Range',
+    shape: [{
+        label: 'Basic',
+        value: 'basic'
+    }, {
+        label: 'With Scale',
+        value: 'scale',
+    }],
+    editor: () => ({
+        props: [{
+            name: 'level',
+            label: 'Selection Mode',
+            type: Types.enum,
+            options: ['single', 'double'],
+            default: 'single'
+        }, {
+            name: 'type',
+            type: Types.enum,
+            options: ['basic', 'scale'],
+            default: 'basic'
+        }, {
+            name: 'scalePosition',
+            type: Types.enum,
+            options: ['above', 'below'],
+            default: 'above'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'clicked', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 400
+        }, {
+            name: 'start',
+            type: Types.number,
+            default: 0
+        }, {
+            name: 'end',
+            type: Types.number,
+            default: 35
+        }],
+    }),
+    adaptor: ({ shape, level, type, scalePosition, state, width, start, end, style, className, ...others }) => {
+        return (
+            <Range
+                {...others}
+                style={{ width, ...style }}
+                className={`${className || ''} ${state === 'hover' ? 'simulation-hover' : state === 'clicked' ? 'simulation-click' : ''}`}
+                slider={level}
+                value={level === 'double' ? [start, end] : end}
+                marks={shape === 'scale' || type === 'scale' ? 10 : false}
+                marksPosition={scalePosition}
+                disabled={state === 'disabled'}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        const { node } = demo;
+        const { props } = node;
+        if (props.level === 'double') {
+            props.start = 20;
+            props.end = 60;
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/rating/adaptor/index.jsx b/docs/rating/adaptor/index.jsx
new file mode 100644
index 0000000000..02d00d69cb
--- /dev/null
+++ b/docs/rating/adaptor/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Rating } from '@alifd/next';
+
+export default {
+    name: 'Rating',
+    editor: () => ({
+        props: [{
+            name: 'type',
+            type: Types.enum,
+            options: ['normal', 'level'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'value',
+            type: Types.number,
+            default: 3
+        }]
+    }),
+    adaptor: ({ type, size, value }) => {
+        return <Rating showGrade={type === 'level'} value={value} size={size} />;
+    }
+};
diff --git a/docs/search/adaptor/index.jsx b/docs/search/adaptor/index.jsx
new file mode 100644
index 0000000000..0ce0008432
--- /dev/null
+++ b/docs/search/adaptor/index.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Search } from '@alifd/next';
+
+export default {
+    name: 'Search',
+    shape: [{
+        value: 'normal',
+        label: 'Basic'
+    }, {
+        value: 'simple',
+        label: 'Simple'
+    }],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'simple' ? ['normal', 'dark'] : ['normal', 'primary', 'secondary', 'dark'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium'],
+            default: 'medium'
+        }, {
+            name: 'menu',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Input'
+        },
+        ...(
+            shape === 'normal' ? [{
+                name: 'label',
+                type: Types.bool,
+                default: true
+             }] : []
+        ), {
+            name: 'width',
+            type: Types.number,
+            default: shape === 'normal' ? 400 : 380
+        }]
+    }),
+    adaptor: ({ shape, level, size, menu, label, width, style, ...others }) => {
+        return (
+            <Search
+                {...others}
+                filterProps={{ placeholder: 'Please Select'}}
+                style={{ width, ...style }}
+                shape={shape}
+                searchText={label ? 'Search' : ''}
+                filter={menu ? [{ label: 'temp', value: 'temp' }] : []}
+                type={level}
+                size={size}
+            />
+        );
+    },
+    content: (shape) => ({
+        options: [{
+            name: 'menu',
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'buttonLabel',
+            options: ['show', 'hide'],
+            default: 'show'
+        }].filter(({ name }) => name !== 'buttonLabel' || shape === 'normal'),
+        transform: (props, { menu, buttonLabel }) => {
+            return {
+                ...props,
+                menu: menu === 'show',
+                label: buttonLabel === 'show'
+            };
+        }
+    }),
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'dark') {
+            return {
+                ...demo,
+                background: '#333'
+            };
+        }
+        return  {
+            ...demo
+        };
+    }
+};
+
diff --git a/docs/select/adaptor/index.jsx b/docs/select/adaptor/index.jsx
new file mode 100644
index 0000000000..b2509b3c11
--- /dev/null
+++ b/docs/select/adaptor/index.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Select } from '@alifd/next';
+
+export default {
+    name: 'Select',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            label: 'Type',
+            type: Types.enum,
+            options: ['single', 'multiple'],
+            default: 'single'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 200
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select'
+        }],
+        data: {
+            disable: true,
+            active: true,
+            default: 'Option 1\n*Option 2\nOption 3\nOption 4\nOption 5'
+        }
+    }),
+    adaptor: ({ level, size, state, border, width, label, placeholder, data, style, ...others }) => {
+        const list = parseData(data).filter(({ type }) => NodeType.node === type);
+        const dataSource = [];
+        const value = [];
+
+        list.forEach((item, index) => {
+            dataSource.push({
+                label: item.value,
+                value: index,
+                disabled: item.state === 'disabled'
+            });
+            if (item.state === 'active') {
+                value.push(index);
+            }
+        });
+
+        return (
+            <Select
+                {...others}
+                style={{
+                    width,
+                    ...style,
+                }}
+                mode={level}
+                size={size}
+                visible={state === 'expanded'}
+                popupContainer={node => node}
+                popupProps={{ needAdjust: false }}
+                dataSource={dataSource}
+                disabled={state === 'disabled'}
+                value={level === 'single' ? value[0] : value}
+                label={label}
+                placeholder={placeholder}
+                hasBorder={border}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            return {
+                ...demo,
+                height: 300
+            };
+        }
+
+        if (demo.node.props.state === 'normal') {
+            demo.node.props.data = demo.node.props.data.replace('*', '');
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/slider/adaptor/index.jsx b/docs/slider/adaptor/index.jsx
new file mode 100644
index 0000000000..648ec57e46
--- /dev/null
+++ b/docs/slider/adaptor/index.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Slider } from '@alifd/next';
+
+const colors = ['#7732bb', '#047cc0', '#00884b', '#e3bc13', '#db7c00', '#aa231f'];
+
+export default {
+    name: 'Slider',
+    shape: ['banner', 'card'],
+    editor: (shape) => ({
+      props: [...(shape === 'card' ? [{
+        name: 'level',
+        type: Types.enum,
+        options: [{ label: 'Vertical', value: 'ver'}, {label: 'Horizontal', value: 'hoz' }],
+        default: 'hoz'
+    }] : []), {
+          name: 'arrow',
+          type: Types.bool,
+          default: true
+      }, {
+          name: 'dot',
+          type: Types.bool,
+          default: true
+      }, {
+          name: 'arrowSize',
+          type: Types.enum,
+          options: ['large', 'medium'],
+          default: 'medium'
+      }, {
+          name: 'width',
+          type: Types.number,
+          default: 500
+      }, {
+          name: 'height',
+          type: Types.number,
+          default: 150
+      }, {
+          name: 'imageNumber',
+          type: Types.number,
+          default: 4
+      }],
+    }),
+    adaptor: ({ shape, level = 'hoz', arrow, dot, arrowSize, width, height, imageNumber, style, ...others }) => {
+
+        const slides = [];
+
+        for (let i = 0; i < imageNumber; i++) {
+            const slideWidth = level === 'ver' || shape === 'banner' ? width : width / imageNumber;
+            const slideHeight = level === 'ver'  ? height / imageNumber : height;
+            slides.push(
+                <div key={i}>
+                    <div style={{ backgroundColor: colors[i % colors.length], color: '#fff', fontSize: shape === 'banner' ? 36 : 24, lineHeight: `${slideHeight}px`, textAlign: 'center',  width: slideWidth, height: slideHeight }}>
+                        Slide {i + 1}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <Slider
+                {...others}
+                style={{
+                    width,
+                    ...style
+                }}
+                key={new Date().getTime()}
+                slideDirection={level}
+                arrowDirection={level}
+                arrowPosition={shape === 'card' ? 'outer' : 'inner'}
+                infinite={false}
+                arrows={arrow}
+                dots={dot}
+                arrowSize={arrowSize}
+                slidesToShow={shape === 'banner' ? 1 : imageNumber}
+                slidesToScroll={1}
+            >
+                {slides}
+            </Slider>
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'ver') {
+            demo.node.props.height = 600;
+            demo.node.props.width = 150;
+        }
+        return demo;
+    }
+};
diff --git a/docs/split-button/adaptor/index.jsx b/docs/split-button/adaptor/index.jsx
new file mode 100644
index 0000000000..ee0ba2ff20
--- /dev/null
+++ b/docs/split-button/adaptor/index.jsx
@@ -0,0 +1,193 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import { SplitButton, Menu, Icon } from '@alifd/next';
+import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+
+const createDataSouce = (list, keys = { selected: [], expanded: {} }, level = 0, prefix='') => {
+    const array = [];
+    let group = [];
+    let grouping = false;
+    let index = 0;
+
+    list.forEach((item) => {
+        switch(item.type) {
+            // eslint-disable-next-line no-case-declarations
+            case 'node':
+                const key = `${prefix || level }-${index++}`;
+
+                if (item.children && item.children.length > 0) {
+                    item.children = createDataSouce(item.children, keys, level + 1, key);
+                }
+
+                if (grouping) {
+                    group.push({
+                        ...item,
+                        key,
+                    });
+                } else {
+                    array.push({
+                        ...item,
+                        key
+                    });
+                }
+
+                if (item.state === 'active') {
+                    if (item.children && item.children.length > 0) {
+                        keys.expanded.push(key);
+                    } else {
+                        keys.selected.push(key);
+                    }
+                }
+
+                return;
+            case 'comment':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = item.value;
+                return;
+            case 'divider':
+                if (group.length > 0) {
+                    array.push({
+                        type: 'group',
+                        value: grouping,
+                        children: group,
+                        key: `${prefix || level }-${index++}`
+                    });
+                    group = [];
+                }
+                grouping = false;
+                array.push({
+                    type: 'divider',
+                    key: `${prefix || level }-${index++}`,
+                });
+                return;
+            default: return;
+        }
+    });
+
+    if (group.length > 0) {
+        array.push({
+            type: 'group',
+            value: grouping,
+            children: group,
+            key: `${prefix || level }-${index++}`
+        });
+        group = [];
+    }
+
+    return array;
+};
+
+const createMenuItem = (item) => {
+    if (item.children.length > 0) {
+        return (
+            <Menu.SubMenu key={item.key} disabled={item.state === 'disabled'} label={item.value ? item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : ''}>
+                {createContents(item.children)}
+            </Menu.SubMenu>
+        );
+    }
+
+    return <Menu.Item key={item.key} checked={item.state === 'active'} disabled={item.state === 'disabled'} children={item.value.map(({ type, value }, index) => type === 'icon' ? <Icon key={`icon_${index}`} type={value} size="small" style={{ marginRight: '4px' }} /> : value)} />;
+};
+
+const createContents = (array = []) => {
+
+    return array.map((item) => {
+        if (item.type === 'group' && item.children.length > 0) {
+            return <Menu.Group key={item.key} label={item.value}>{item.children.map(it => createMenuItem(it))}</Menu.Group>;
+        }
+
+        if (item.type === 'divider') {
+            return <Menu.Divider key={item.key}/>;
+        }
+
+        return createMenuItem(item);
+    });
+};
+
+export default {
+    name: 'SplitButton',
+    shape: ['normal', 'ghost'],
+    editor: (shape = 'normal') => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: shape === 'ghost' ? ['light', 'dark'] : ['normal', 'primary', 'secondary'],
+            default: shape === 'ghost' ? 'light' : 'normal',
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }],
+        data: {
+            icon: true,
+            active: true,
+            disable: true,
+            default: 'Edit Document\n\tUndo\n\t*Redo\n\tCut\n\tCopy\n\tPaste'
+        }
+    }),
+    adaptor: ({ shape, level, size, data, ...others}) => {
+        const list = parseData(data, { parseContent: true });
+        const buttonItem = list[0] ? list[0] : { value: []};
+
+        if (buttonItem.type !== 'node') return null;
+
+        const keys = { selected: [], expanded: [] };
+        const dataSouce = createDataSouce(list[0] ? list[0].children : [], keys);
+
+        const label = buttonItem.value.map(({ type, value}) => {
+            if (type === 'icon') return <Icon type={value} />;
+            return value;
+        });
+
+        return (
+            <SplitButton
+                {...others}
+                size={size}
+                disabled={buttonItem.state === 'disabled'}
+                visible={buttonItem.state === 'active'}
+                type={shape === 'ghost' ? 'normal' : level}
+                popupProps={{ needAdjust: false, container: node => node }}
+                ghost={shape === 'ghost' ? level : false}
+                selectMode="multiple"
+                menuProps={{ openKeys: keys.expanded, style: { textAlign: 'left' } }}
+                selectedKeys={keys.selected}
+                label={label}
+            >
+                {createContents(dataSouce)}
+            </SplitButton>
+        );
+    },
+    demoOptions: (demo) => {
+        const { node = { props: {} } } = demo;
+        const { level, data } = node.props;
+        if (data.indexOf('*') === 0) {
+            demo = {
+                ...demo,
+                height: 250
+            };
+        }
+
+        if (level === 'dark') {
+            demo = {
+                ...demo,
+                background: '#333'
+            };
+        } else if(level === 'light') {
+            demo = {
+                ...demo,
+                background: 'rgb(235, 236, 240)',
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/step/adaptor/index.jsx b/docs/step/adaptor/index.jsx
new file mode 100644
index 0000000000..daca14978c
--- /dev/null
+++ b/docs/step/adaptor/index.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { Types, parseData, NodeType, ContentType } from '@alifd/adaptor-helper';
+import { Step } from '@alifd/next';
+
+export default {
+    name: 'Step',
+    shape: ['circle', 'arrow', 'dot'],
+    editor: (shape) => {
+        if (shape === 'arrow') {
+            return {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }],
+                data: {
+                    active: true,
+                    disabled: true,
+                    default:  'Step 1\nStep 2\n*Step 3\nStep 4'
+                }
+            };
+        }
+
+        return {
+            props: [{
+                name: 'level',
+                type: Types.enum,
+                options: [{ value: 'hoz', label: 'Horizontal' }, { value: 'ver', label: 'Vertical' }]
+            },
+            ...(
+                shape === 'circle' ? [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'percent', 'disabled'],
+                    default: 'normal'
+                }, {
+                    name: 'location',
+                    type: Types.enum,
+                    options: ['down', 'right'],
+                    default: 'down'
+
+                }] : [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled'],
+                    default: 'normal'
+                }]
+            ), {
+                name: 'width',
+                type: Types.number,
+                default: 600
+            }, {
+                name: 'height',
+                type: Types.number,
+                default: 300
+            }],
+            data: {
+                active: true,
+                disabled: true,
+                default: 'Step 1\n\tOpen the door Put the elephant into the fridge\n*Step 2\n\tOpen the door Put the elephant into the fridge\nStep 3\n\tOpen the door Put the elephant into the fridge\nStep 4\n\tOpen the door Put the elephant into the fridge'
+            }
+        };
+    },
+    adaptor: ({ shape, level, state, location, width, height, data, style, ...others }) => {
+        const list = parseData(data, { parseContent: true }).filter(({ type }) => type === NodeType.node);
+        const dataSouce = [];
+        let current = 0;
+        list.forEach((item, index) => {
+            const { value = '' } = item.value.find(({ type }) => type === ContentType.icon) || {};
+            dataSouce.push({
+                key: index,
+                icon: value,
+                title: item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join(''),
+                content: item.children && item.children.length > 0 ? item.children[0].value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('') : '',
+                disabled: state === 'disabled' || item.state === 'disabled',
+            });
+
+            if (item.state === 'active') {
+                current = index;
+            }
+        });
+
+        if (state === 'percent' && dataSouce[current]) {
+            dataSouce[current].percent = 60;
+        }
+
+        return (
+            <div {...others} style={{
+                width,
+                height,
+                ...style,
+            }}>
+                <Step
+                    current={current}
+                    shape={shape}
+                    direction={level}
+                    labelPlacement={location === 'right' ? 'hoz' : 'ver'}
+                    >
+                    {
+                        dataSouce.map(item => <Step.Item key={item.key} title={item.title} content={item.content} icon={item.icon} percent={item.percent} disabled={item.disabled}/>)
+                    }
+                </Step>
+            </div>
+        )
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.level === 'hoz') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 600,
+                height: 120
+            };
+        } else if (demo.node.props.level === 'ver') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 200,
+                height: 300
+            };
+        }
+
+        return demo;
+    }
+};
diff --git a/docs/switch/adaptor/index.jsx b/docs/switch/adaptor/index.jsx
new file mode 100644
index 0000000000..1bb4ff2bfe
--- /dev/null
+++ b/docs/switch/adaptor/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Switch } from '@alifd/next';
+
+export default {
+    name: 'Switch',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['on', 'off', 'disabledOn', 'disabledOff'],
+            default: 'off'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'showLabel',
+            type: Types.bool,
+            default: false
+        }]
+    }),
+    adaptor: ({ state, size, showLabel, ...others }) => {
+        return <Switch {...others} checked={['on', 'disabledOn'].indexOf(state) !== -1} checkedChildren={showLabel ? 'on' : ''} unCheckedChildren={showLabel ? 'off' : ''} disabled={state.indexOf('disabled') !== -1}/>
+    }
+}
diff --git a/docs/tab/adaptor/index.jsx b/docs/tab/adaptor/index.jsx
new file mode 100644
index 0000000000..d04aa02cb5
--- /dev/null
+++ b/docs/tab/adaptor/index.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Types, parseData } from '@alifd/adaptor-helper';
+import { Tab, Icon } from '@alifd/next';
+
+export default {
+    name: 'Tab',
+    shape: ['pure', 'wrapped', 'text', 'capsule'],
+    editor: (shape = 'pure') => {
+        const props = [{
+            name: 'size',
+            type: Types.enum,
+            options: ['medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'closable',
+            type: Types.bool,
+            default: false
+        }];
+
+        if (['pure', 'wrapped', 'text'].indexOf(shape) !== -1) {
+            props.push({
+                name: 'overflow',
+                type: Types.enum,
+                options: ['slide', 'dropdown'],
+                default: 'slide'
+            });
+            props.push({
+                name: 'width',
+                type: Types.number,
+                default: 480
+            });
+        }
+
+        if (shape === 'wrapped') {
+            props.splice(props.length - 2, 0, {
+                name: 'position',
+                type: Types.enum,
+                options: ['top', 'left', 'right'],
+                default: 'top'
+            });
+        }
+
+        return {
+            props,
+            data: {
+                active: true,
+                disable: true,
+                default: 'Tab 1\n*Tab 2\nTab 3'
+            }
+        };
+    },
+    adaptor: ({ shape, size, closable, overflow, width, position, style = {}, data, ...others }) => {
+        const list = parseData(data, { parseContent: true });
+        const activeKey = list.findIndex((item) => item.state === 'active');
+
+        return (
+            <Tab {...others} style={{ minWidth: style.width ? 0 : width, ...style }} activeKey={activeKey} shape={shape} size={size} excessMode={overflow} tabPosition={position}>
+                {
+                    list.map((item, index) => <Tab.Item key={index} title={item.value.map(({ type, value }, i) => type === 'icon' ? <Icon key={`icon_${i}`} type={value} /> : value)} closeable={closable} disabled={item.state === 'disabled'} />)
+                }
+            </Tab>
+        );
+    }
+};
diff --git a/docs/table/adaptor/index.jsx b/docs/table/adaptor/index.jsx
new file mode 100644
index 0000000000..80d1dc911d
--- /dev/null
+++ b/docs/table/adaptor/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Types, getChildren } from '@alifd/adaptor-helper';
+import { Table } from '@alifd/next';
+
+export default {
+    name: 'Table',
+    editor: () => ({
+        props: [{
+            name: 'border',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'stripe',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'select',
+            type: Types.enum,
+            options: ['checkbox', 'none'],
+            default: 'none'
+        }, {
+            name: 'align',
+            type: Types.enum,
+            options: ['left', 'right', 'center'],
+            default: 'left'
+        }, {
+            name: 'head',
+            type: Types.enum,
+            options: ['show', 'hide'],
+            default: 'show'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 800
+        }],
+        data: {
+            default: 'Product | Price | Status\n2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace | US $2.5 | No Priced\nFree shipping women Casual dresses lady dress plus size 201 | US $2.5 | Already Priced'
+        }
+    }),
+    adaptor: ({ border, stripe, select, align, head, width, data, style, ...others }) => {
+
+        const list = data.split('\n').filter(v => !!v);
+        let ths = [];
+        const bodys = [];
+        list.forEach((template, index) => {
+          if (index === 0) {
+            ths = template.split('|');
+          } else {
+            const column = {};
+            template.split('|').forEach((value, index) => {
+                column[`column_${index}`] = value;
+            });
+            bodys.push(column);
+          }
+        });
+
+        return (
+            <Table {...others} dataSource={bodys}  rowSelection={select === 'checkbox' ? { onChange: () => {}} : null} style={{ width, ...style }} hasBorder={border} hasHeader={head === 'show'} isZebra={stripe}>
+                {
+                    ths.map((label, index) => (
+                        <Table.Column cell={value => value} align={align} title={label} key={`column_${index}`} dataIndex={`column_${index}`} />
+                    ))
+                }
+            </Table>
+        );
+    }
+};
diff --git a/docs/tag/adaptor/index.jsx b/docs/tag/adaptor/index.jsx
new file mode 100644
index 0000000000..5e468439a3
--- /dev/null
+++ b/docs/tag/adaptor/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { Tag } from '@alifd/next';
+
+export default {
+    name: 'Tag',
+    shape: [{
+        label: 'Default',
+        value: 'default',
+    }, {
+        label: 'Selectable',
+        value: 'selectable',
+    }, {
+        label: 'Deletable',
+        value: 'deletable'
+    }],
+    editor: (shape) => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'primary'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small']
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'hover', 'disabled', ...(shape === 'selectable' ? ['selected', 'selectedHover', 'selectedDisabled'] : [])],
+            default: 'normal'
+        }],
+        data: {
+            default: 'Tag Hello'
+        }
+    }),
+    adaptor: ({ shape, level, size, state = '', data, className = '', ...others }) => {
+        const TagComponent = shape === 'selectable' ? Tag.Selectable : shape === 'deletable' ? Tag.Closable : Tag;
+        return (
+            <TagComponent {...others} className={`${className} ${state.toLowerCase().indexOf('hover') !== -1 ? 'hover' : ''}`} checked={state.indexOf('selected') !== -1 ? true : null} type={level} size={size} disabled={state.toLowerCase().indexOf('disabled') !== -1}>{data}</TagComponent>
+        );
+    }
+};
diff --git a/docs/time-picker/adaptor/index.jsx b/docs/time-picker/adaptor/index.jsx
new file mode 100644
index 0000000000..65ec643aa9
--- /dev/null
+++ b/docs/time-picker/adaptor/index.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
+import { TimePicker } from '@alifd/next';
+import moment from 'moment';
+
+export default {
+    name: 'TimePicker',
+    editor: () => ({
+        props: [{
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'selected', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'type',
+            type: Types.enum,
+            options: ['HMS', 'HM', 'MS'],
+            default: 'HMS'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 200
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select Time'
+        }, {
+            name: 'value',
+            type: Types.string,
+            default: '06:06:06'
+        }],
+    }),
+    adaptor: ({ size, state, type, width, label, placeholder, value = '', style, ...others }) => {
+        const time = moment();
+        const arr = value.split(':');
+
+        for(let i = 0; i < type.length; i++) {
+            const char = type.charAt(i);
+            const v = arr[i];
+
+            if (v === undefined) break;
+
+            switch(char) {
+                case 'H':
+                    time.hours(v);
+                    break;
+                case 'M':
+                    time.minutes(v);
+                    break;
+                case 'S':
+                    time.seconds(v);
+                    break;
+            }
+        }
+
+        return (
+            <TimePicker
+                {...others}
+                size={size}
+                style={{ width, ...style }}
+                popupContainer={node => node}
+                popupProps={{ needAdjust: false }}
+                format={type === 'HM' ? 'HH:mm' : type === 'MS' ? 'mm:ss' : 'HH:mm:ss'}
+                label={label}
+                disabled={state === 'disabled'}
+                visible={state === 'expanded'}
+                placeholder={placeholder}
+                value={state === 'normal' ? null : time}
+            />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            demo.height = 300;
+        }
+        return demo;
+    }
+};
diff --git a/docs/timeline/adaptor/index.jsx b/docs/timeline/adaptor/index.jsx
new file mode 100644
index 0000000000..8683dcc4fc
--- /dev/null
+++ b/docs/timeline/adaptor/index.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Types, parseData, NodeType, ContentType } from '@alifd/adaptor-helper';
+import { Timeline } from '@alifd/next';
+
+export default {
+    name: 'Timeline',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'success', 'error'],
+            default: 'normal'
+        }, {
+            name: 'timeLeft',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'content',
+            Type: Types.enum,
+            options: ['titleAndContentAndTime', 'title', 'titleAndContent', 'timeAndTime'],
+            default: 'titleAndContentAndTime'
+        }, {
+            name: 'height',
+            type: Types.number,
+            default: 300
+        }],
+        data: {
+            active: true,
+            icon: true,
+            default: [
+                'Signed\n\tSigned, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\n\tJun, 10, 2016 10:30:00',
+                '[atm]Ship\n\tExpress has arrived in Hangzhou, Zhejiang Binjiang company\n\tJun, 10, 2016 09:30:00',
+                'Ship\n\tZhejiang Hangzhou Riverside company sent a member for you to send pieces\n\tJun, 10, 2016 09:03:00',
+                'Ship\n\tZhejiang Hangzhou Transshipment Center has been issued\n\tJun, 10, 2016 06:10:00'
+            ].join('\n')
+        }
+    }),
+    adaptor: ({ state, timeLeft, content, height, style, data, ...others }) => {
+        const list = parseData(data, { parseContent: true }).filter(({ type }) => type === NodeType.node);
+        const array = [];
+
+        list.forEach((item, index) => {
+            const { value = '' } = item.value.find(({ type }) => type === ContentType.icon) || {};
+            const obj = {
+                title: item.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join(''),
+                icon: value,
+            };
+
+            item.children.forEach((it, index) => {
+                if (index === 0) {
+                    obj.content = it.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('');
+                } else if (index === 1) {
+                    obj[timeLeft ? 'time' : 'timeLeft'] = it.value.filter(({ type }) => type === ContentType.text).map(({ value }) => value).join('');
+                }
+            });
+
+            if (index === 0) {
+                obj.state = state === 'normal' ? 'process' : state;
+            }
+
+            array.push(obj);
+        });
+
+        return (
+            <Timeline {...others} style={{ minHeight: height, ...style }}>
+                {
+                    array.map(({ title, icon, content, time, timeLeft, state }, index) => (
+                        <Timeline.Item key={index} state={state} title={title} icon={icon} time={time} timeLeft={timeLeft} content={content} />
+                    ))
+                }
+            </Timeline>
+        );
+    }
+};
diff --git a/docs/transfer/adaptor/index.jsx b/docs/transfer/adaptor/index.jsx
new file mode 100644
index 0000000000..30b1f8a30e
--- /dev/null
+++ b/docs/transfer/adaptor/index.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Transfer } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+
+export default {
+    name: 'Transfer',
+    editor: () => ({
+        props: [{
+            name: 'level',
+            type: Types.enum,
+            options: ['normal', 'simple'],
+            default: 'normal'
+        }, {
+            name: 'search',
+            type: Types.bool,
+            default: false,
+        }, {
+            name: 'sourcePanelTitle',
+            type: Types.string,
+            default: 'Title'
+        }, {
+            name: 'targetPanelTitle',
+            type: Types.string,
+            default: 'Title'
+        }],
+        data: {
+            disabled: true,
+            active: true,
+            default: `Content1\nContent2\n*Content3\n*Content4\n*Content5\nContent6\nContent7\nContent8\nContent9\nContent10`
+        }
+    }),
+    adaptor: ({ level, search, sourcePanelTitle, targetPanelTitle, data, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = [];
+        const dataSource = list.map((item, i) => {
+            if (item.state === 'active') {
+                keys.push(`${i}`);
+            }
+            return {
+                label: `${item.value}`,
+                value: `${i}`,
+                disabled: item.state === 'disabled'
+            };
+        });
+
+        return (
+            <Transfer {...others} key={new Date().getTime()} locale={locale.Transfer} mode={level} showSearch={search} searchPlaceholder="Please Input" dataSource={dataSource} defaultLeftChecked={keys} titles={[sourcePanelTitle, targetPanelTitle]} />
+        );
+    }
+};
diff --git a/docs/tree-select/adaptor/index.jsx b/docs/tree-select/adaptor/index.jsx
new file mode 100644
index 0000000000..d41e47173d
--- /dev/null
+++ b/docs/tree-select/adaptor/index.jsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { TreeSelect } from '@alifd/next';
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let index = 0;
+
+    list.forEach((item) => {
+        const key = `${prefix || level }-${index++}`;
+
+        if (item.children && item.children.length > 0) {
+            item.children = createDataSouce(item.children, keys, level + 1, key);
+        }
+        array.push({
+            label: item.value,
+            value: key,
+            disabled: item.state === 'disabled',
+            key,
+            children: item.children
+        });
+
+        if (item.state === 'active') {
+            if (item.children && item.children.length > 0) {
+                keys.expanded.push(key);
+            } else {
+                keys.selected.push(key);
+            }
+        }
+
+        return;
+    });
+
+    return array;
+};
+
+export default {
+    name: 'TreeSelect',
+    editor: () => ({
+        props: [{
+            name: 'state',
+            type: Types.enum,
+            options: ['normal', 'expanded', 'disabled'],
+            default: 'normal'
+        }, {
+            name: 'size',
+            type: Types.enum,
+            options: ['large', 'medium', 'small'],
+            default: 'medium'
+        }, {
+            name: 'width',
+            type: Types.number,
+            default: 300,
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: true
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'label',
+            type: Types.string,
+            default: ''
+        }, {
+            name: 'placeholder',
+            type: Types.string,
+            default: 'Please Select'
+        }],
+        data: {
+            active: true,
+            disabled: true,
+            default: '*Trunk\n\t-Branch\n\t\t*Branch\n\t\t\tLeaf\n\t\tLeaf\n\t*Branch\n\t\tLeaf\n\t\tLeaf'
+        }
+    }),
+    adaptor: ({ state, size, width, border, checkbox, label, placeholder, data, style, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = { selected: [], expanded: [] };
+        const dataSource = createDataSouce(list, keys);
+
+        const props = {
+            ...others,
+            style: { width, ...style },
+            size,
+            dataSource,
+            key: new Date().getTime(),
+            multiple: checkbox,
+            treeCheckable: checkbox,
+            treeDefaultExpandAll: true,
+            hasBorder: border,
+            disabled: state === 'disabled',
+            visible: state === 'expanded',
+            label,
+            placeholder,
+            popupContainer: node => node,
+            popupProps: { needAdjust: false },
+            value: checkbox ? keys.selected : keys.selected[0],
+        };
+
+        return (
+            <TreeSelect {...props} />
+        );
+    },
+    demoOptions: (demo) => {
+        if (demo.node.props.state === 'expanded') {
+            demo.height = 300;
+        }
+        return demo;
+    }
+};
diff --git a/docs/tree/adaptor/index.jsx b/docs/tree/adaptor/index.jsx
new file mode 100644
index 0000000000..39ea8ca66b
--- /dev/null
+++ b/docs/tree/adaptor/index.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Tree } from '@alifd/next';
+
+
+const createDataSouce = (list, keys = { selected: [], expanded: [] }, level = 0, prefix='') => {
+    const array = [];
+    let index = 0;
+
+    list.forEach((item) => {
+        const key = `${prefix || level }-${index++}`;
+
+        if (item.children && item.children.length > 0) {
+            item.children = createDataSouce(item.children, keys, level + 1, key);
+        }
+        array.push({
+            label: item.value,
+            disabled: item.state === 'disabled',
+            key,
+            children: item.children
+        });
+
+        if (item.state === 'active') {
+            if (item.children && item.children.length > 0) {
+                keys.expanded.push(key);
+            } else {
+                keys.selected.push(key);
+            }
+        }
+
+        return;
+    });
+
+    return array;
+};
+
+export default {
+    name: 'Tree',
+    shape: ['normal', 'line'],
+    editor: () => ({
+        props: [{
+            name: 'select',
+            type: Types.enum,
+            options: ['node', 'label'],
+            default: 'label'
+        }, {
+            name: 'checkbox',
+            type: Types.bool,
+            default: false
+        }],
+        data: {
+            active: true,
+            dsiabled: true,
+            default: 'Trunk\n\t-Branch\n\t\t*Branch\n\t\t\tLeaf\n\t\tLeaf\n\t*Branch\n\t\tLeaf\n\t\tLeaf'
+        }
+    }),
+    adaptor: ({ shape, select, checkbox, data, ...others }) => {
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+        const keys = { selected: [], expanded: [] };
+        const dataSource = createDataSouce(list, keys);
+
+        const props = {
+            ...others,
+            dataSource,
+            key: new Date().getTime(),
+            checkable: checkbox,
+            showLine: shape === 'line',
+            isNodeBlock: select === 'node',
+            expandedKeys: keys.expanded,
+            [checkbox ? 'checkedKeys' : 'selectedKeys']: keys.selected,
+        };
+
+        return (
+            <Tree {...props} />
+        );
+    }
+}
diff --git a/docs/upload/adaptor/index.jsx b/docs/upload/adaptor/index.jsx
new file mode 100644
index 0000000000..189b708d81
--- /dev/null
+++ b/docs/upload/adaptor/index.jsx
@@ -0,0 +1,251 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { Upload } from '@alifd/next';
+import locale from '../../../src/locale/en-us';
+
+const getSize = (size) => {
+    if (!size) return 0;
+    const UNIT = ['T', 'G', 'MB', 'KB', 'B'];
+    for (let i = 0; i < UNIT.length; i++) {
+        const unit = UNIT[i];
+        const index = size.indexOf(unit);
+        if (index !== -1) {
+            const number = Number(size.substring(0, index)) || 0;
+            switch (i) {
+                case 0:
+                    return number * 1024 * 1024 * 1024 * 1024;
+                case 1:
+                    return number * 1024 * 1024 * 1024;
+                case 2:
+                    return number * 1024 * 1024;
+                case 3:
+                    return number * 1024;
+                case 4:
+                    return number;
+            }
+        }
+    }
+};
+export default {
+    name: 'Upload',
+    shape: [{
+        label: 'File Upload',
+        value: 'normal'
+    }, 'image', 'card', 'drag'],
+    editor: (shape = 'normal') => {
+        return {
+            normal: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['uploading', 'done', 'error'],
+                    default: 'uploading'
+                }, {
+                    name: 'close',
+                    type: Types.bool,
+                    default: false
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 50
+                }, {
+                    name: 'filesize',
+                    type: Types.string,
+                    default: '11MB'
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            image: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['uploading', 'done', 'error'],
+                    default: 'uploading'
+                }, {
+                    name: 'close',
+                    type: Types.bool,
+                    default: false
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 50
+                }, {
+                    name: 'filesize',
+                    type: Types.string,
+                    default: '11MB'
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            card: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'disabled', 'uploading', 'done', 'error'],
+                    default: 'string'
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 20
+                }, {
+                    name: 'filename',
+                    type: Types.string,
+                    default: 'xxx.png'
+                }]
+            },
+            drag: {
+                props: [{
+                    name: 'state',
+                    type: Types.enum,
+                    options: ['normal', 'over', 'uploading', 'disabled', 'done', 'error'],
+                    default: 'over'
+                }, {
+                    name: 'width',
+                    type: Types.number,
+                    default: 500
+                }, {
+                    name: 'height',
+                    type: Types.number,
+                    default: 200
+                }, {
+                    name: 'title',
+                    type: Types.string,
+                    default: 'Click or Drag the file to this area to upload'
+                }, {
+                    name: 'description',
+                    type: Types.string,
+                    default: 'Support docx, xls, PDF, rar, zip, PNG, JPG and other files upload'
+                }, {
+                    name: 'progress',
+                    type: Types.number,
+                    default: 20
+                }],
+                data: {
+                    default: 'xxx.png\nxx2.png'
+                }
+            }
+        }[shape];
+    },
+    adaptor: ({
+        shape,
+        state,
+        close,
+        width,
+        height,
+        progress,
+        filesize,
+        filename,
+        title,
+        description,
+        style,
+        data,
+        ...others
+    }) => {
+
+        if (shape === 'normal') {
+            return (
+                <Upload
+                    {...others}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                    limit={1}
+                    listType="text"
+                    closable={close}
+                    value={[{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        size: getSize(filesize),
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }]}
+                />
+            );
+        }
+
+        if (shape === 'image') {
+            return (
+                <Upload
+                    {...others}
+                    style={{
+                        width,
+                        ...style,
+                    }}
+                    limit={1}
+                    listType="image"
+                    closable={close}
+                    value={[{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        size: getSize(filesize),
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }]}
+                />
+            );
+        }
+
+        if (shape === 'card') {
+            return (
+                <Upload.Card
+                    {...others}
+                    style={style}
+                    limit={1}
+                    disabled={state === 'disabled'}
+                    value={['normal', 'disabled'].indexOf(state) === -1 ? [{
+                        name: filename,
+                        state,
+                        percent: progress,
+                        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                    }] : []}
+                />
+            );
+        }
+
+        const list = parseData(data).filter(({ type }) => type === NodeType.node);
+
+
+        return (
+            <Upload.Dragger
+                {...others}
+                style={{
+                    width,
+                    height,
+                    ...style,
+                }}
+                locale={{
+                    ...locale.Upload,
+                    drag: {
+                        text: title,
+                        hint: description
+                    }
+                }}
+                disabled={state === 'disabled'}
+                className={`${state === 'over' ? 'next-upload-drag-over' : ''} ${others.className || ''}`}
+                listType={'text'}
+                value={['normal', 'over', 'disabled'].indexOf(state) === -1 ? list.map((item) => {
+                    return {
+                        name: item.value,
+                        state,
+                        percent: progress
+                    };
+                }) : []}
+            />
+        );
+
+    }
+};
diff --git a/package.json b/package.json
index b39ff73968..181b91e931 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "check-sass": "node ./scripts/check/sass.js",
     "docs": "node ./scripts/docs/index.js",
     "api": "node ./scripts/api.js",
-    "pack": "node ./scripts/pack.js",
+    "pack": "node ./scripts/pack.js && node ./scripts/adaptor/build.js",
     "release": "node ./scripts/release/index.js",
     "test": "node --max_old_space_size=8192 ./scripts/test/index.js",
     "test:a11y": "node --max_old_space_size=8192 ./scripts/test/a11y-index.js",
@@ -76,6 +76,8 @@
     "shallow-element-equals": "^1.0.1"
   },
   "devDependencies": {
+    "@alifd/adaptor-generate": "^0.2.3",
+    "@alifd/adaptor-helper": "^0.1.3",
     "@alifd/api-extractor": "^3.5.1",
     "@alifd/babel-preset-next": "^2.0.0",
     "@alifd/doc-parser": "^1.0.0",
diff --git a/scripts/adaptor/build.js b/scripts/adaptor/build.js
new file mode 100644
index 0000000000..634a9496d7
--- /dev/null
+++ b/scripts/adaptor/build.js
@@ -0,0 +1,68 @@
+const path = require('path');
+const webpack = require('webpack');
+const getWebpackConfig = require('../webpack/prod');
+const { logger } = require('../utils');
+
+const distPath = path.join(process.cwd(), 'dist');
+
+const minimize = true;
+
+const config = getWebpackConfig({ minimize });
+config.entry = {
+    adaptor: './docs/adaptor.js',
+};
+config.output = Object.assign({}, config.output, {
+    path: distPath,
+    publicPath: '/dist/',
+    library: 'Adaptors',
+    libraryTarget: 'umd',
+});
+config.externals = [
+    {
+        react: {
+            root: 'React',
+            commonjs2: 'react',
+            commonjs: 'react',
+            amd: 'react',
+        },
+    },
+    {
+        'react-dom': {
+            root: 'ReactDOM',
+            commonjs2: 'react-dom',
+            commonjs: 'react-dom',
+            amd: 'react-dom',
+        },
+    },
+    {
+        moment: {
+            root: 'moment',
+            commonjs2: 'moment',
+            commonjs: 'moment',
+            amd: 'moment',
+        },
+    },
+    {
+        '@alifd/next': {
+            root: 'Next',
+            commonjs2: '@alifd/next',
+            commonjs: '@alifd/next',
+            amd: '@alifd/next',
+        },
+    },
+];
+config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
+
+// eslint-disable-next-line handle-callback-err
+webpack(config, (err, stats) => {
+    logger.info(
+        stats.toString({
+            colors: true,
+            chunks: false,
+            modules: false,
+            hash: false,
+            usedExports: false,
+            version: false,
+        })
+    );
+});
diff --git a/scripts/server/loaders/adaptor/index.js b/scripts/server/loaders/adaptor/index.js
new file mode 100644
index 0000000000..ff4f635912
--- /dev/null
+++ b/scripts/server/loaders/adaptor/index.js
@@ -0,0 +1,63 @@
+const path = require('path');
+const _ = require('lodash');
+
+const cwd = process.cwd();
+const IMPORT_REG = /import {(.+)} from ['"]@alifd\/next['"];?/;
+const IMPORT_LIB_REG = /import (.+) from ['"]@alifd\/next\/lib\/(.+)['"];?/;
+const IMPORT_LIB_REG_G = /^import .+ from ['"]@alifd\/next\/lib\/(.+)['"];?/gm;
+
+module.exports = function(content) {
+    return fixImport(content, this.resourcePath);
+};
+
+function fixImport(code, resourcePath) {
+    const matched = code.match(IMPORT_REG);
+    const matchedLib = code.match(IMPORT_LIB_REG_G);
+
+    if (matched) {
+        const components = matched[1].replace(/\s/g, '').split(',');
+
+        const importStrings = components
+            .map(component => {
+                const componentPath = path.join(
+                    cwd,
+                    'src',
+                    _.kebabCase(component)
+                );
+                const relativePath = path.relative(
+                    path.dirname(resourcePath),
+                    componentPath
+                );
+
+                return `
+import ${component} from '${relativePath}';
+import '${path.join(relativePath, 'style.js')}';
+`;
+            })
+            .join('\n');
+
+        code = code.replace(IMPORT_REG, importStrings);
+    }
+
+    if (matchedLib) {
+        matchedLib.forEach(element => {
+            const component = element
+                .match(IMPORT_LIB_REG)[1]
+                .replace(/\s/g, '');
+            const afterLib = element
+                .match(IMPORT_LIB_REG)[2]
+                .replace(/\s/g, '');
+            const libPath = path.join(cwd, 'src', afterLib);
+            const newLibPath = path.relative(
+                path.dirname(resourcePath),
+                libPath
+            );
+            const newLibStr = `
+import ${component} from'${newLibPath}'`;
+
+            code = code.replace(IMPORT_LIB_REG, newLibStr);
+        });
+    }
+
+    return code;
+}
diff --git a/scripts/server/tpls/theme.ejs b/scripts/server/tpls/theme.ejs
index 8605d87c44..8a8b033c0a 100644
--- a/scripts/server/tpls/theme.ejs
+++ b/scripts/server/tpls/theme.ejs
@@ -14,12 +14,13 @@
         </style>
         <% } %>
         <script src="//shadow.elemecdn.com/npm/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
-        <script src="//shadow.elemecdn.com/npm/react@16.0.0/umd/react.development.js"></script>
-        <script src="//shadow.elemecdn.com/npm/react-dom@16.0.0/umd/react-dom.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/react@16.x/umd/react.development.js"></script>
+        <script src="//shadow.elemecdn.com/npm/react-dom@16.x/umd/react-dom.development.js"></script>
         <script src="//shadow.elemecdn.com/npm/moment@2.24.0/min/moment-with-locales.js"></script>
     </head>
     <body>
         <div id="container"></div>
+        <div id="root"></div>
         <% scripts.forEach(function(src) { %>
         <script src="<%= src %>"></script>
         <% })%>
diff --git a/scripts/server/webpack.js b/scripts/server/webpack.js
index 90d262ad97..21894524e7 100644
--- a/scripts/server/webpack.js
+++ b/scripts/server/webpack.js
@@ -43,6 +43,7 @@ module.exports = function getWebpackConfig(options) {
             'index-loader': path.join(loadersPath, 'index/index.js'),
             'demo-loader': path.join(loadersPath, 'demo/index.js'),
             'theme-loader': path.join(loadersPath, 'theme/index.js'),
+            'adaptor-loader': path.join(loadersPath, 'adaptor/index.js'),
         },
     };
 
@@ -140,6 +141,16 @@ module.exports = function getWebpackConfig(options) {
             },
         ],
     });
+    config.module.rules.push({
+        test: /adaptor\/.+\.jsx$/,
+        use: [
+            babelLoader,
+            {
+                loader: 'adaptor-loader',
+                options: {},
+            },
+        ],
+    });
 
     config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
     config.plugins.push(

From fc035b1a430daa5db8fe75a111b0afa43ab5e874 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Fri, 26 Jul 2019 16:14:08 +0800
Subject: [PATCH 10/27] temp(*): add istanbul ignore

---
 src/tree/view/tree.jsx | 1 +
 src/tree/view/util.js  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
index add0484ef6..61b9512c1c 100644
--- a/src/tree/view/tree.jsx
+++ b/src/tree/view/tree.jsx
@@ -20,6 +20,7 @@ const { pickOthers, isPlainObject } = obj;
 
 const childChecked = (child, checkedKeys) => {
     if (child.disabled || parent.checkboxDisabled) return true;
+    /* istanbul ignore next */
     if (child.checkable === false) {
         return (
             !child.children ||
diff --git a/src/tree/view/util.js b/src/tree/view/util.js
index 34270c9b48..e35f66dfca 100644
--- a/src/tree/view/util.js
+++ b/src/tree/view/util.js
@@ -30,6 +30,7 @@ export function forEachEnableNode(node, callback = () => {}) {
  */
 export function isNodeDisabledChecked(node) {
     if (node.disabled || node.checkboxDisabled) return true;
+    /* istanbul ignore next */
     if (node.checkable === false) {
         return (
             !node.children ||
@@ -52,6 +53,7 @@ export function getCheckableParentNode(node, _p2n) {
     parentPos = parentPos.join('-');
     const parentNode = _p2n[parentPos];
     if (parentNode.disabled || parentNode.checkboxDisabled) return false;
+    /* istanbul ignore next */
     if (parentNode.checkable === false) {
         return getCheckableParentNode(parentNode, _p2n);
     }

From 4c05cdd30f9a77a4eb051e09e3b68e0394077c3b Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Sun, 28 Jul 2019 15:09:36 +0800
Subject: [PATCH 11/27] temp(*): fix adaptor can`t render

---
 docs/balloon/adaptor/index.jsx |  4 ++--
 docs/range/adaptor/index.jsx   | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/docs/balloon/adaptor/index.jsx b/docs/balloon/adaptor/index.jsx
index b343ad1686..84aa8f5d66 100644
--- a/docs/balloon/adaptor/index.jsx
+++ b/docs/balloon/adaptor/index.jsx
@@ -55,9 +55,9 @@ export default {
             }
         };
     },
-    adaptor: ({ shape, level, direction, closable, data }) => {
+    adaptor: ({ shape, level, direction, closable, data, style, ...others }) => {
         return (
-            <Balloon.Inner type={level} style={{position: 'relative'}} isTooltip={shape === 'tooltip'} align={direction} closable={shape === 'balloon' && closable}>
+            <Balloon.Inner {...others} type={level} style={{position: 'relative', ...style }} isTooltip={shape === 'tooltip'} align={direction} closable={shape === 'balloon' && closable}>
                 {data}
             </Balloon.Inner>
         );
diff --git a/docs/range/adaptor/index.jsx b/docs/range/adaptor/index.jsx
index 4047a4b8c7..67c72b6f10 100644
--- a/docs/range/adaptor/index.jsx
+++ b/docs/range/adaptor/index.jsx
@@ -47,18 +47,21 @@ export default {
             default: 35
         }],
     }),
-    adaptor: ({ shape, level, type, scalePosition, state, width, start, end, style, className, ...others }) => {
+    adaptor: ({ shape, level, type, scalePosition, state, width, start, end, style, ...others }) => {
         return (
-            <Range
+            <div
                 {...others}
                 style={{ width, ...style }}
-                className={`${className || ''} ${state === 'hover' ? 'simulation-hover' : state === 'clicked' ? 'simulation-click' : ''}`}
-                slider={level}
-                value={level === 'double' ? [start, end] : end}
-                marks={shape === 'scale' || type === 'scale' ? 10 : false}
-                marksPosition={scalePosition}
-                disabled={state === 'disabled'}
-            />
+            >
+                <Range
+                    className={state === 'hover' ? 'simulation-hover' : state === 'clicked' ? 'simulation-click' : ''}
+                    slider={level}
+                    value={level === 'double' ? [start, end] : end}
+                    marks={shape === 'scale' || type === 'scale' ? 10 : false}
+                    marksPosition={scalePosition}
+                    disabled={state === 'disabled'}
+                />
+            </div>
         );
     },
     demoOptions: (demo) => {

From 1fa1c2060783484b6b5b72810bd3cd97ba979072 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Sun, 28 Jul 2019 15:57:52 +0800
Subject: [PATCH 12/27] temp(*): update label

---
 docs/badge/adaptor/index.jsx           |  1 +
 docs/balloon/adaptor/index.jsx         |  1 +
 docs/calendar/adaptor/index.jsx        |  1 +
 docs/card/adaptor/index.jsx            |  5 ++++-
 docs/cascader-select/adaptor/index.jsx |  1 +
 docs/checkbox/adaptor/index.jsx        |  1 +
 docs/collapse/adaptor/index.jsx        |  1 +
 docs/date-picker/adaptor/index.jsx     |  1 +
 docs/dialog/adaptor/index.jsx          |  7 +++++--
 docs/input/adaptor/index.jsx           |  1 +
 docs/menu/adaptor/index.jsx            |  2 ++
 docs/message/adaptor/index.jsx         |  3 +++
 docs/nav/adaptor/index.jsx             |  1 +
 docs/number-picker/adaptor/index.jsx   |  1 +
 docs/pagination/adaptor/index.jsx      |  2 ++
 docs/progress/adaptor/index.jsx        | 12 +++++++-----
 docs/radio/adaptor/index.jsx           |  1 +
 docs/range/adaptor/index.jsx           |  1 +
 docs/select/adaptor/index.jsx          |  1 +
 docs/slider/adaptor/index.jsx          |  1 +
 docs/step/adaptor/index.jsx            |  2 ++
 docs/switch/adaptor/index.jsx          |  2 ++
 docs/tab/adaptor/index.jsx             |  1 +
 docs/table/adaptor/index.jsx           | 18 ++++++++++--------
 docs/tag/adaptor/index.jsx             |  1 +
 docs/time-picker/adaptor/index.jsx     |  1 +
 docs/timeline/adaptor/index.jsx        |  2 ++
 docs/transfer/adaptor/index.jsx        |  3 +++
 docs/tree-select/adaptor/index.jsx     |  1 +
 docs/tree/adaptor/index.jsx            |  1 +
 docs/upload/adaptor/index.jsx          |  6 ++++++
 31 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/docs/badge/adaptor/index.jsx b/docs/badge/adaptor/index.jsx
index 7c61d9ac87..6f86dd36a8 100644
--- a/docs/badge/adaptor/index.jsx
+++ b/docs/badge/adaptor/index.jsx
@@ -7,6 +7,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'level',
+            label: 'Type',
             type: Types.enum,
             options: ['dot', 'number'],
             default: 'dot'
diff --git a/docs/balloon/adaptor/index.jsx b/docs/balloon/adaptor/index.jsx
index 84aa8f5d66..2d806f4146 100644
--- a/docs/balloon/adaptor/index.jsx
+++ b/docs/balloon/adaptor/index.jsx
@@ -38,6 +38,7 @@ export default {
                 },
                 {
                     name: 'direction',
+                    label: 'Align',
                     type: Types.enum,
                     options: ALIGN_LIST,
                     default: 'b',
diff --git a/docs/calendar/adaptor/index.jsx b/docs/calendar/adaptor/index.jsx
index f92988a32b..3bb8a30b22 100644
--- a/docs/calendar/adaptor/index.jsx
+++ b/docs/calendar/adaptor/index.jsx
@@ -12,6 +12,7 @@ export default {
         return {
             props: [{
                 name: 'level',
+                label: 'Type',
                 type: Types.enum,
                 options: ['day', 'month', 'year'].filter((level) => {
                     if (level === 'year') return shape === 'panel';
diff --git a/docs/card/adaptor/index.jsx b/docs/card/adaptor/index.jsx
index 005ae47334..63c13709b6 100644
--- a/docs/card/adaptor/index.jsx
+++ b/docs/card/adaptor/index.jsx
@@ -8,6 +8,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'bullet',
+            label: 'Label',
             type: Types.bool,
             default: false,
         }, {
@@ -16,7 +17,7 @@ export default {
             default: true,
         }, {
             name: 'expand',
-            label: 'Expaned',
+            label: 'Expanded',
             type: Types.bool,
             default: false
         }, {
@@ -34,10 +35,12 @@ export default {
             default: 'Title'
         }, {
             name: 'subTitle',
+            label: 'Subtitle',
             type: Types.string,
             default: '',
         }, {
             name: 'extra',
+            label: 'Extra Data',
             type: Types.string,
             default: '',
         }],
diff --git a/docs/cascader-select/adaptor/index.jsx b/docs/cascader-select/adaptor/index.jsx
index 03484ee531..5008b9103f 100644
--- a/docs/cascader-select/adaptor/index.jsx
+++ b/docs/cascader-select/adaptor/index.jsx
@@ -33,6 +33,7 @@ export default {
             default: 'medium'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'expanded', 'disabled'],
             default: 'normal'
diff --git a/docs/checkbox/adaptor/index.jsx b/docs/checkbox/adaptor/index.jsx
index 28b1ca3d1d..724b8c869f 100644
--- a/docs/checkbox/adaptor/index.jsx
+++ b/docs/checkbox/adaptor/index.jsx
@@ -7,6 +7,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'hover', 'disabled', 'indeterminate', 'indeterminateHover', 'indeterminateDisabled', 'checked', 'checkedHover', 'checkedDisabled'],
             default: 'normal'
diff --git a/docs/collapse/adaptor/index.jsx b/docs/collapse/adaptor/index.jsx
index 89225e473b..e08d5473db 100644
--- a/docs/collapse/adaptor/index.jsx
+++ b/docs/collapse/adaptor/index.jsx
@@ -7,6 +7,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'disabled'],
             default: 'normal'
diff --git a/docs/date-picker/adaptor/index.jsx b/docs/date-picker/adaptor/index.jsx
index 7a11c78f8a..86e84589de 100644
--- a/docs/date-picker/adaptor/index.jsx
+++ b/docs/date-picker/adaptor/index.jsx
@@ -13,6 +13,7 @@ export default {
         return {
             props: [{
                 name: 'state',
+                label: 'Status',
                 type: Types.enum,
                 options: ['normal', 'expanded', 'selected', 'disabled'],
                 default: 'normal'
diff --git a/docs/dialog/adaptor/index.jsx b/docs/dialog/adaptor/index.jsx
index 9dc76d93b6..bce05c90b5 100644
--- a/docs/dialog/adaptor/index.jsx
+++ b/docs/dialog/adaptor/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { Types } from '@alifd/adaptor-helper';
 import { Dialog, Message } from '@alifd/next';
 import locale from '../../../src/locale/en-us';
-import { Types } from '@alifd/adaptor-helper';
+
 
 export default {
     name: 'Dialog',
@@ -13,11 +14,13 @@ export default {
             default: 'normal'
         }, {
             name: 'footerAlign',
+            label: 'Button Position',
             type: Types.enum,
             options: ['left', 'right', 'center'],
             default: 'right'
         }, {
             name: 'okButtonPosition',
+            label: 'Button Order',
             type: Types.enum,
             options: ['left', 'right'],
             default: 'left'
@@ -58,7 +61,7 @@ export default {
             className: level === 'normal' ? className : `${className || ''} next-dialog-quick`,
             style: dialogStyle,
             footerAlign: footerAlign,
-            footerActions: okButtonPosition == 'left' ? ['ok', 'cancel'] : ['cancel', 'ok'],
+            footerActions: okButtonPosition === 'left' ? ['ok', 'cancel'] : ['cancel', 'ok'],
             locale: locale.Dialog,
             height: `${height}px`
         };
diff --git a/docs/input/adaptor/index.jsx b/docs/input/adaptor/index.jsx
index 82d4878343..20ef0f2969 100644
--- a/docs/input/adaptor/index.jsx
+++ b/docs/input/adaptor/index.jsx
@@ -26,6 +26,7 @@ export default {
             ), ...(
                 shape === 'addon' ? [] : [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['normal', 'focused', 'disabled', 'error', ...(shape === 'textfield' ? ['success', 'loading'] : [])],
                     default: 'normal'
diff --git a/docs/menu/adaptor/index.jsx b/docs/menu/adaptor/index.jsx
index 6bf1700d22..df98fc1551 100644
--- a/docs/menu/adaptor/index.jsx
+++ b/docs/menu/adaptor/index.jsx
@@ -125,11 +125,13 @@ export default {
     editor: () => ({
         props: [{
             name: 'selectType',
+            label: 'Selection Mode',
             type: Types.enum,
             options: ['checkbox', 'radio', 'checkLeft', 'checkRight'],
             default: 'checkLeft'
         }, {
             name: 'nestMode',
+            label: 'Subset Structure',
             type: Types.enum,
             options: ['inline', 'popup'],
             default: 'inline',
diff --git a/docs/message/adaptor/index.jsx b/docs/message/adaptor/index.jsx
index 201a57371c..4ddb0487e7 100644
--- a/docs/message/adaptor/index.jsx
+++ b/docs/message/adaptor/index.jsx
@@ -7,6 +7,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'level',
+            label: 'Shape',
             type: Types.enum,
             options: ['inline', 'toast', 'addon'],
             default: 'inline'
@@ -17,11 +18,13 @@ export default {
             default: 'medium'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['success', 'warning', 'error', 'notice', 'help', 'loading'],
             default: 'success',
         }, {
             name: 'closable',
+            label: 'Close Included',
             type: Types.bool,
             default: false
         }, {
diff --git a/docs/nav/adaptor/index.jsx b/docs/nav/adaptor/index.jsx
index eb54ff844b..80873840fb 100644
--- a/docs/nav/adaptor/index.jsx
+++ b/docs/nav/adaptor/index.jsx
@@ -131,6 +131,7 @@ export default {
             default: 'normal'
         }, {
             name: 'selectLinePosition',
+            label: 'Label Position',
             type: Types.enum,
             options: shape === 'hoz' ? ['top', 'bottom', 'none'] : ['left', 'right', 'none'],
             default: shape === 'hoz' ? 'bottom' : 'right'
diff --git a/docs/number-picker/adaptor/index.jsx b/docs/number-picker/adaptor/index.jsx
index cc7243ca3c..64d541d2b9 100644
--- a/docs/number-picker/adaptor/index.jsx
+++ b/docs/number-picker/adaptor/index.jsx
@@ -17,6 +17,7 @@ export default {
             default: 'medium'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'disabled'],
             default: 'normal'
diff --git a/docs/pagination/adaptor/index.jsx b/docs/pagination/adaptor/index.jsx
index f47110dc22..70e73d631a 100644
--- a/docs/pagination/adaptor/index.jsx
+++ b/docs/pagination/adaptor/index.jsx
@@ -14,11 +14,13 @@ export default {
             default: 'medium'
         }, {
             name: 'sizeSelector',
+            label: 'Widget',
             type: Types.enum,
             options: ['none', 'filter', 'dropdown'],
             default: 'none'
         }, {
             name: 'control',
+            label: 'Arrow Style',
             type: Types.enum,
             options: ['textAndIcon', 'onlyIcon', 'noBorder'],
             default: 'textAndIcon'
diff --git a/docs/progress/adaptor/index.jsx b/docs/progress/adaptor/index.jsx
index b2d4522ed5..4fc510f8f3 100644
--- a/docs/progress/adaptor/index.jsx
+++ b/docs/progress/adaptor/index.jsx
@@ -8,6 +8,12 @@ export default {
     editor: (shape = 'line') => {
         return {
             props: [{
+                name: 'mode',
+                label: 'Type',
+                type: Types.enum,
+                options: ['basic', 'staging'],
+                default: 'basic'
+            }, {
                 name: 'level',
                 type: Types.enum,
                 options: ['normal', 'success', 'error'],
@@ -17,13 +23,9 @@ export default {
                 type: Types.enum,
                 options: ['large', 'medium', 'small'],
                 default: 'medium'
-            }, {
-                name: 'mode',
-                type: Types.enum,
-                options: ['basic', 'staging'],
-                default: 'basic'
             }, {
                 name: 'text',
+                label: 'Data Included',
                 type: Types.bool,
                 default: false
             },
diff --git a/docs/radio/adaptor/index.jsx b/docs/radio/adaptor/index.jsx
index 467c772c72..79f3527643 100644
--- a/docs/radio/adaptor/index.jsx
+++ b/docs/radio/adaptor/index.jsx
@@ -30,6 +30,7 @@ export default {
         return {
             props: [{
                 name: 'state',
+                label: 'Status',
                 type: Types.enum,
                 options: ['normal', 'hover', 'disabled', 'checked', 'checkedHover', 'checkedDisabled'],
                 default: 'normal'
diff --git a/docs/range/adaptor/index.jsx b/docs/range/adaptor/index.jsx
index 67c72b6f10..913ef692fb 100644
--- a/docs/range/adaptor/index.jsx
+++ b/docs/range/adaptor/index.jsx
@@ -30,6 +30,7 @@ export default {
             default: 'above'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'hover', 'clicked', 'disabled'],
             default: 'normal'
diff --git a/docs/select/adaptor/index.jsx b/docs/select/adaptor/index.jsx
index b2509b3c11..85fb1a767b 100644
--- a/docs/select/adaptor/index.jsx
+++ b/docs/select/adaptor/index.jsx
@@ -18,6 +18,7 @@ export default {
             default: 'medium'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'expanded', 'disabled'],
             default: 'normal'
diff --git a/docs/slider/adaptor/index.jsx b/docs/slider/adaptor/index.jsx
index 648ec57e46..559a535e2c 100644
--- a/docs/slider/adaptor/index.jsx
+++ b/docs/slider/adaptor/index.jsx
@@ -10,6 +10,7 @@ export default {
     editor: (shape) => ({
       props: [...(shape === 'card' ? [{
         name: 'level',
+        label: 'Orientation',
         type: Types.enum,
         options: [{ label: 'Vertical', value: 'ver'}, {label: 'Horizontal', value: 'hoz' }],
         default: 'hoz'
diff --git a/docs/step/adaptor/index.jsx b/docs/step/adaptor/index.jsx
index daca14978c..6db2b8a432 100644
--- a/docs/step/adaptor/index.jsx
+++ b/docs/step/adaptor/index.jsx
@@ -29,6 +29,7 @@ export default {
         return {
             props: [{
                 name: 'level',
+                label: 'Orientation',
                 type: Types.enum,
                 options: [{ value: 'hoz', label: 'Horizontal' }, { value: 'ver', label: 'Vertical' }]
             },
@@ -46,6 +47,7 @@ export default {
 
                 }] : [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['normal', 'disabled'],
                     default: 'normal'
diff --git a/docs/switch/adaptor/index.jsx b/docs/switch/adaptor/index.jsx
index 1bb4ff2bfe..e5b93ceedd 100644
--- a/docs/switch/adaptor/index.jsx
+++ b/docs/switch/adaptor/index.jsx
@@ -7,6 +7,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['on', 'off', 'disabledOn', 'disabledOff'],
             default: 'off'
@@ -17,6 +18,7 @@ export default {
             default: 'medium'
         }, {
             name: 'showLabel',
+            label: 'Label',
             type: Types.bool,
             default: false
         }]
diff --git a/docs/tab/adaptor/index.jsx b/docs/tab/adaptor/index.jsx
index d04aa02cb5..001b265e2b 100644
--- a/docs/tab/adaptor/index.jsx
+++ b/docs/tab/adaptor/index.jsx
@@ -20,6 +20,7 @@ export default {
         if (['pure', 'wrapped', 'text'].indexOf(shape) !== -1) {
             props.push({
                 name: 'overflow',
+                label: 'Overflow Indicator',
                 type: Types.enum,
                 options: ['slide', 'dropdown'],
                 default: 'slide'
diff --git a/docs/table/adaptor/index.jsx b/docs/table/adaptor/index.jsx
index 80d1dc911d..e2a9300ce1 100644
--- a/docs/table/adaptor/index.jsx
+++ b/docs/table/adaptor/index.jsx
@@ -6,15 +6,8 @@ export default {
     name: 'Table',
     editor: () => ({
         props: [{
-            name: 'border',
-            type: Types.bool,
-            default: false
-        }, {
-            name: 'stripe',
-            type: Types.bool,
-            default: false
-        }, {
             name: 'select',
+            label: 'Selection Mode',
             type: Types.enum,
             options: ['checkbox', 'none'],
             default: 'none'
@@ -25,9 +18,18 @@ export default {
             default: 'left'
         }, {
             name: 'head',
+            label: 'Header',
             type: Types.enum,
             options: ['show', 'hide'],
             default: 'show'
+        }, {
+            name: 'border',
+            type: Types.bool,
+            default: false
+        }, {
+            name: 'stripe',
+            type: Types.bool,
+            default: false
         }, {
             name: 'width',
             type: Types.number,
diff --git a/docs/tag/adaptor/index.jsx b/docs/tag/adaptor/index.jsx
index 5e468439a3..87a05fa1fc 100644
--- a/docs/tag/adaptor/index.jsx
+++ b/docs/tag/adaptor/index.jsx
@@ -26,6 +26,7 @@ export default {
             options: ['large', 'medium', 'small']
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'hover', 'disabled', ...(shape === 'selectable' ? ['selected', 'selectedHover', 'selectedDisabled'] : [])],
             default: 'normal'
diff --git a/docs/time-picker/adaptor/index.jsx b/docs/time-picker/adaptor/index.jsx
index 65ec643aa9..569c63cd0f 100644
--- a/docs/time-picker/adaptor/index.jsx
+++ b/docs/time-picker/adaptor/index.jsx
@@ -13,6 +13,7 @@ export default {
             default: 'medium'
         }, {
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'expanded', 'selected', 'disabled'],
             default: 'normal'
diff --git a/docs/timeline/adaptor/index.jsx b/docs/timeline/adaptor/index.jsx
index 8683dcc4fc..abd2f69111 100644
--- a/docs/timeline/adaptor/index.jsx
+++ b/docs/timeline/adaptor/index.jsx
@@ -7,11 +7,13 @@ export default {
     editor: () => ({
         props: [{
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'success', 'error'],
             default: 'normal'
         }, {
             name: 'timeLeft',
+            label: 'Position',
             type: Types.bool,
             default: false
         }, {
diff --git a/docs/transfer/adaptor/index.jsx b/docs/transfer/adaptor/index.jsx
index 30b1f8a30e..252700c6e7 100644
--- a/docs/transfer/adaptor/index.jsx
+++ b/docs/transfer/adaptor/index.jsx
@@ -8,6 +8,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'level',
+            label: 'Type',
             type: Types.enum,
             options: ['normal', 'simple'],
             default: 'normal'
@@ -17,10 +18,12 @@ export default {
             default: false,
         }, {
             name: 'sourcePanelTitle',
+            label: 'Source Title',
             type: Types.string,
             default: 'Title'
         }, {
             name: 'targetPanelTitle',
+            label: 'Target Title',
             type: Types.string,
             default: 'Title'
         }],
diff --git a/docs/tree-select/adaptor/index.jsx b/docs/tree-select/adaptor/index.jsx
index d41e47173d..c0db1fcfc1 100644
--- a/docs/tree-select/adaptor/index.jsx
+++ b/docs/tree-select/adaptor/index.jsx
@@ -39,6 +39,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'state',
+            label: 'Status',
             type: Types.enum,
             options: ['normal', 'expanded', 'disabled'],
             default: 'normal'
diff --git a/docs/tree/adaptor/index.jsx b/docs/tree/adaptor/index.jsx
index 39ea8ca66b..e30d8d2600 100644
--- a/docs/tree/adaptor/index.jsx
+++ b/docs/tree/adaptor/index.jsx
@@ -40,6 +40,7 @@ export default {
     editor: () => ({
         props: [{
             name: 'select',
+            label: 'Selection Mode',
             type: Types.enum,
             options: ['node', 'label'],
             default: 'label'
diff --git a/docs/upload/adaptor/index.jsx b/docs/upload/adaptor/index.jsx
index 189b708d81..5676734e73 100644
--- a/docs/upload/adaptor/index.jsx
+++ b/docs/upload/adaptor/index.jsx
@@ -37,11 +37,13 @@ export default {
             normal: {
                 props: [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['uploading', 'done', 'error'],
                     default: 'uploading'
                 }, {
                     name: 'close',
+                    label: 'Close Included',
                     type: Types.bool,
                     default: false
                 }, {
@@ -65,11 +67,13 @@ export default {
             image: {
                 props: [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['uploading', 'done', 'error'],
                     default: 'uploading'
                 }, {
                     name: 'close',
+                    label: 'Close Included',
                     type: Types.bool,
                     default: false
                 }, {
@@ -93,6 +97,7 @@ export default {
             card: {
                 props: [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['normal', 'disabled', 'uploading', 'done', 'error'],
                     default: 'string'
@@ -109,6 +114,7 @@ export default {
             drag: {
                 props: [{
                     name: 'state',
+                    label: 'Status',
                     type: Types.enum,
                     options: ['normal', 'over', 'uploading', 'disabled', 'done', 'error'],
                     default: 'over'

From a7df8c5541365a428c75dfb63567817576cc39c7 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Tue, 30 Jul 2019 19:54:34 +0800
Subject: [PATCH 13/27] style(Tree): eslint fix

---
 src/tree/view/tree.jsx | 14 +-------------
 src/tree/view/util.js  | 23 ++++++++++++++++++++++-
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
index 61b9512c1c..ee64cc3423 100644
--- a/src/tree/view/tree.jsx
+++ b/src/tree/view/tree.jsx
@@ -12,25 +12,13 @@ import {
     filterParentKey,
     getAllCheckedKeys,
     forEachEnableNode,
+    childChecked,
 } from './util';
 
 const { bindCtx, noop } = func;
 const { getOffset } = dom;
 const { pickOthers, isPlainObject } = obj;
 
-const childChecked = (child, checkedKeys) => {
-    if (child.disabled || parent.checkboxDisabled) return true;
-    /* istanbul ignore next */
-    if (child.checkable === false) {
-        return (
-            !child.children ||
-            child.children.length === 0 ||
-            child.children.every(c => childChecked(c, checkedKeys))
-        );
-    }
-    return checkedKeys.indexOf(child.key) > -1;
-};
-
 /**
  * Tree
  */
diff --git a/src/tree/view/util.js b/src/tree/view/util.js
index e35f66dfca..21b8521458 100644
--- a/src/tree/view/util.js
+++ b/src/tree/view/util.js
@@ -11,6 +11,24 @@ export function normalizeToArray(keys) {
     return [];
 }
 
+/**
+ * 判断子节点是否是选中状态，如果 checkable={false} 则向下递归，
+ * @param {Node} child
+ * @param {Array} checkedKeys
+ */
+export function childChecked(child, checkedKeys) {
+    if (child.disabled || parent.checkboxDisabled) return true;
+    /* istanbul ignore next */
+    if (child.checkable === false) {
+        return (
+            !child.children ||
+            child.children.length === 0 ||
+            child.children.every(c => childChecked(c, checkedKeys))
+        );
+    }
+    return checkedKeys.indexOf(child.key) > -1;
+}
+
 /**
  * 遍历所有可用的子节点
  * @param {Node}
@@ -27,6 +45,7 @@ export function forEachEnableNode(node, callback = () => {}) {
 /**
  * 判断节点是否禁用checked
  * @param {Node} node
+ * @returns {Boolean}
  */
 export function isNodeDisabledChecked(node) {
     if (node.disabled || node.checkboxDisabled) return true;
@@ -43,8 +62,10 @@ export function isNodeDisabledChecked(node) {
 }
 
 /**
- * 获取一个 checkable = {true} 的父节点
+ * 递归获取一个 checkable = {true} 的父节点，当 checkable={false} 时继续往上查找
  * @param {Node} node
+ * @param {Map} _p2n
+ * @return {Node}
  */
 export function getCheckableParentNode(node, _p2n) {
     let parentPos = node.pos.split(['-']);

From 8c368f137dcd18b8eb1df0c713d55424f36c60de Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Wed, 31 Jul 2019 11:17:48 +0800
Subject: [PATCH 14/27] feat(TimePicker): add renderTimeMenuItems prop

---
 docs/time-picker/demo/render-menu.md | 31 ++++++++++++++
 docs/time-picker/index.en-us.md      |  1 +
 docs/time-picker/index.md            | 57 ++++++++++++-------------
 src/time-picker/module/time-menu.jsx | 62 +++++++++++++++++-----------
 src/time-picker/panel.jsx            | 15 +++++++
 src/time-picker/time-picker.jsx      | 14 +++++++
 test/time-picker/index-spec.js       | 30 ++++++++++++++
 7 files changed, 159 insertions(+), 51 deletions(-)
 create mode 100644 docs/time-picker/demo/render-menu.md

diff --git a/docs/time-picker/demo/render-menu.md b/docs/time-picker/demo/render-menu.md
new file mode 100644
index 0000000000..2081ab8648
--- /dev/null
+++ b/docs/time-picker/demo/render-menu.md
@@ -0,0 +1,31 @@
+# 自定义渲染时间选择菜单
+
+- order: 5
+
+可以通过 `renderTimeMenuItems` 来自定义渲染下拉菜单每一项。
+
+:::lang=en-us
+# Custom Render Time Menu
+
+- order: 5
+
+Render time menu by `renderTimeMenuItems`.
+
+:::
+
+---
+
+````jsx
+import { TimePicker } from '@alifd/next';
+
+const renderTimeMenuItems = (list) => {
+    return list.map(({ label, value }) => {
+        return {
+            value,
+            label: value > 9 ? String(value) : `0${value}`
+        };
+    });
+}
+
+ReactDOM.render(<TimePicker renderTimeMenuItems={renderTimeMenuItems} />, mountNode);
+````
diff --git a/docs/time-picker/index.en-us.md b/docs/time-picker/index.en-us.md
index 58bb3a077a..92859d0378 100644
--- a/docs/time-picker/index.en-us.md
+++ b/docs/time-picker/index.en-us.md
@@ -41,6 +41,7 @@ By default, TimePicker using moment instance as input value, which is the sugges
 | disabledHours    | Function to disable hours <br><br>**signature**:<br>Function(index: Number) => Boolean<br>**paramter**:<br>_index_: {Number} hour 0 - 23<br>**return**:<br>{Boolean} if disabled<br>                            | Function  | -          |
 | disabledMinutes  | Function to disable minutes <br><br>**signature**:<br>Function(index: Number) => Boolean<br>**paramter**:<br>_index_: {Number} minute 0 - 59<br>**return**:<br>{Boolean} if disabled<br>                            | Function  | -          |
 | disabledSeconds  | Function to disable seconds <br><br>**signature**:<br>Function(index: Number) => Boolean<br>**paramter**:<br>_index_: {Number} second 0 - 59<br>**return**:<br>{Boolean} if disabled<br>                            | Function  | -          |
+| renderTimeMenuItems | Render time menu<br>[{<br> label: '01',<br> value: 1<br>}]<br><br>**签名**:<br>Function(list: Array, mode: String, value: moment) => Array<br>**参数**:<br>_list_: {Array} default time menu list<br>_mode_: {String} menu type: hour, minute, second<br>_value_: {moment} value <br>**返回值**:<br>{Array}<br>
 | visible          | Visible state of popup | Boolean   | -          |
 | defaultVisible   | Default visible state of popup  | Boolean   | -          |
 | popupContainer   | Container of popup<br><br>**signature**:<br>Function(target: Object) => ReactNode<br>**paramter**:<br>_target_: {Object} target container<br>**return**:<br>{ReactNode} container element<br>                            | Function  | -          |
diff --git a/docs/time-picker/index.md b/docs/time-picker/index.md
index 0be6ee517c..11e9e8ca0b 100644
--- a/docs/time-picker/index.md
+++ b/docs/time-picker/index.md
@@ -25,34 +25,35 @@
 
 ### TimePicker
 
-| 参数               | 说明                                                                                                                                                                                                                   | 类型        | 默认值        |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------- |
-| label            | 按钮的文案                                                                                                                                                                                                                | ReactNode | -          |
-| size             | 时间选择框的尺寸<br><br>**可选值**:<br>'small', 'medium', 'large'                                                                                                                                                               | Enum      | 'medium'   |
-| state            | 输入框状态<br><br>**可选值**:<br>'error', 'success'                                                                                                                                                                          | Enum      | -          |
-| placeholder      | 输入框提示                                                                                                                                                                                                                | String    | -          |
-| value            | 时间值（moment 对象或时间字符串，受控状态使用）                                                                                                                                                                                          | custom    | -          |
-| defaultValue     | 时间初值（moment 对象或时间字符串，非受控状态使用）                                                                                                                                                                                        | custom    | -          |
-| hasClear         | 是否允许清空时间                                                                                                                                                                                                             | Boolean   | true       |
-| format           | 时间的格式<br><https://momentjs.com/docs/#/parsing/string-format/>                                                                                                                                                        | String    | 'HH:mm:ss' |
-| hourStep         | 小时选项步长                                                                                                                                                                                                               | Number    | -          |
-| minuteStep       | 分钟选项步长                                                                                                                                                                                                               | Number    | -          |
-| secondStep       | 秒钟选项步长                                                                                                                                                                                                               | Number    | -          |
-| disabledHours    | 禁用小时函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 时 0 - 23<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                               | Function  | -          |
-| disabledMinutes  | 禁用分钟函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 分 0 - 59<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                               | Function  | -          |
-| disabledSeconds  | 禁用秒钟函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 秒 0 - 59<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                               | Function  | -          |
-| visible          | 弹层是否显示（受控）                                                                                                                                                                                                           | Boolean   | -          |
-| defaultVisible   | 弹层默认是否显示（非受控）                                                                                                                                                                                                        | Boolean   | -          |
-| popupContainer   | 弹层容器<br><br>**签名**:<br>Function(target: Object) => ReactNode<br>**参数**:<br>_target_: {Object} 目标节点<br>**返回值**:<br>{ReactNode} 容器节点<br>                                                                               | Function  | -          |
-| popupAlign       | 弹层对齐方式, 详情见Overlay 文档                                                                                                                                                                                                | String    | 'tl tl'    |
-| popupTriggerType | 弹层触发方式<br><br>**可选值**:<br>'click', 'hover'                                                                                                                                                                           | Enum      | 'click'    |
-| onVisibleChange  | 弹层展示状态变化时的回调<br><br>**签名**:<br>Function(visible: Boolean, type: String) => void<br>**参数**:<br>_visible_: {Boolean} 弹层是否隐藏和显示<br>_type_: {String} 触发弹层显示和隐藏的来源 fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发 | Function  | func.noop  |
-| popupStyle       | 弹层自定义样式                                                                                                                                                                                                              | Object    | -          |
-| popupClassName   | 弹层自定义样式类                                                                                                                                                                                                             | String    | -          |
-| popupProps       | 弹层属性                                                                                                                                                                                                                 | Object    | -          |
-| followTrigger    | 是否跟随滚动                                                                                                                                                                                                               | Boolean   | -          |
-| disabled         | 是否禁用                                                                                                                                                                                                                 | Boolean   | false      |
-| onChange         | 时间值改变时的回调<br><br>**签名**:<br>Function(value: Object/String) => void<br>**参数**:<br>_value_: {Object/String} 时间对象或时间字符串                                                                                                 | Function  | func.noop  |
+| 参数                  | 说明                                                                                                                                                                                                                                                                                              | 类型        | 默认值        |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------- |
+| label               | 按钮的文案                                                                                                                                                                                                                                                                                           | ReactNode | -          |
+| size                | 时间选择框的尺寸<br><br>**可选值**:<br>'small', 'medium', 'large'                                                                                                                                                                                                                                          | Enum      | 'medium'   |
+| state               | 输入框状态<br><br>**可选值**:<br>'error', 'success'                                                                                                                                                                                                                                                     | Enum      | -          |
+| placeholder         | 输入框提示                                                                                                                                                                                                                                                                                           | String    | -          |
+| value               | 时间值（moment 对象或时间字符串，受控状态使用）                                                                                                                                                                                                                                                                     | custom    | -          |
+| defaultValue        | 时间初值（moment 对象或时间字符串，非受控状态使用）                                                                                                                                                                                                                                                                   | custom    | -          |
+| hasClear            | 是否允许清空时间                                                                                                                                                                                                                                                                                        | Boolean   | true       |
+| format              | 时间的格式<br><https://momentjs.com/docs/#/parsing/string-format/>                                                                                                                                                                                                                                   | String    | 'HH:mm:ss' |
+| hourStep            | 小时选项步长                                                                                                                                                                                                                                                                                          | Number    | -          |
+| minuteStep          | 分钟选项步长                                                                                                                                                                                                                                                                                          | Number    | -          |
+| secondStep          | 秒钟选项步长                                                                                                                                                                                                                                                                                          | Number    | -          |
+| disabledHours       | 禁用小时函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 时 0 - 23<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                                                                                                          | Function  | -          |
+| disabledMinutes     | 禁用分钟函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 分 0 - 59<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                                                                                                          | Function  | -          |
+| disabledSeconds     | 禁用秒钟函数<br><br>**签名**:<br>Function(index: Number) => Boolean<br>**参数**:<br>_index_: {Number} 秒 0 - 59<br>**返回值**:<br>{Boolean} 是否禁用<br>                                                                                                                                                          | Function  | -          |
+| renderTimeMenuItems | 渲染的可选择时间列表<br>[{<br> label: '01',<br> value: 1<br>}]<br><br>**签名**:<br>Function(list: Array, mode: String, value: moment) => Array<br>**参数**:<br>_list_: {Array} 默认渲染的列表<br>_mode_: {String} 渲染的菜单 hour, minute, second<br>_value_: {moment} 当前时间，可能为 null<br>**返回值**:<br>{Array} 返回需要渲染的数据<br> | Function  | -          |
+| visible             | 弹层是否显示（受控）                                                                                                                                                                                                                                                                                      | Boolean   | -          |
+| defaultVisible      | 弹层默认是否显示（非受控）                                                                                                                                                                                                                                                                                   | Boolean   | -          |
+| popupContainer      | 弹层容器<br><br>**签名**:<br>Function(target: Object) => ReactNode<br>**参数**:<br>_target_: {Object} 目标节点<br>**返回值**:<br>{ReactNode} 容器节点<br>                                                                                                                                                          | Function  | -          |
+| popupAlign          | 弹层对齐方式, 详情见Overlay 文档                                                                                                                                                                                                                                                                           | String    | 'tl tl'    |
+| popupTriggerType    | 弹层触发方式<br><br>**可选值**:<br>'click', 'hover'                                                                                                                                                                                                                                                      | Enum      | 'click'    |
+| onVisibleChange     | 弹层展示状态变化时的回调<br><br>**签名**:<br>Function(visible: Boolean, type: String) => void<br>**参数**:<br>_visible_: {Boolean} 弹层是否隐藏和显示<br>_type_: {String} 触发弹层显示和隐藏的来源 fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发                                                                            | Function  | func.noop  |
+| popupStyle          | 弹层自定义样式                                                                                                                                                                                                                                                                                         | Object    | -          |
+| popupClassName      | 弹层自定义样式类                                                                                                                                                                                                                                                                                        | String    | -          |
+| popupProps          | 弹层属性                                                                                                                                                                                                                                                                                            | Object    | -          |
+| followTrigger       | 是否跟随滚动                                                                                                                                                                                                                                                                                          | Boolean   | -          |
+| disabled            | 是否禁用                                                                                                                                                                                                                                                                                            | Boolean   | false      |
+| onChange            | 时间值改变时的回调<br><br>**签名**:<br>Function(value: Object/String) => void<br>**参数**:<br>_value_: {Object/String} 时间对象或时间字符串                                                                                                                                                                            | Function  | func.noop  |
 
 ## ARIA and KeyBoard
 
diff --git a/src/time-picker/module/time-menu.jsx b/src/time-picker/module/time-menu.jsx
index 00f9edab0c..8d71891555 100644
--- a/src/time-picker/module/time-menu.jsx
+++ b/src/time-picker/module/time-menu.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { checkMomentObj } from '../utils';
 
 function scrollTo(element, to, duration) {
     const requestAnimationFrame =
@@ -37,7 +38,9 @@ class TimeMenu extends React.Component {
         mode: PropTypes.oneOf(['hour', 'minute', 'second']),
         step: PropTypes.number,
         activeIndex: PropTypes.number,
+        value: checkMomentObj,
         disabledItems: PropTypes.func,
+        renderTimeMenuItems: PropTypes.func,
         onSelect: PropTypes.func,
         disabled: PropTypes.bool,
     };
@@ -45,6 +48,7 @@ class TimeMenu extends React.Component {
     static defaultProps = {
         step: 1,
         disabledItems: () => false,
+        renderTimeMenuItems: list => list,
         onSelect: () => {},
         disabled: false,
     };
@@ -71,40 +75,52 @@ class TimeMenu extends React.Component {
         this.menu = ref;
     };
 
-    render() {
+    createMenuItems = list => {
         const {
             prefix,
-            title,
             mode,
-            activeIndex,
-            step,
             disabled,
             disabledItems,
+            activeIndex,
             onSelect,
+            renderTimeMenuItems,
+            value: timeValue,
         } = this.props;
+        list = renderTimeMenuItems(list, mode, timeValue) || list;
+
+        return list.map(({ label, value }) => {
+            const isDisabled = disabled || disabledItems(value);
+            const itemCls = classnames({
+                [`${prefix}time-picker-menu-item`]: true,
+                [`${prefix}disabled`]: isDisabled,
+                [`${prefix}selected`]: value === activeIndex,
+            });
+            const onClick = isDisabled ? noop : () => onSelect(value, mode);
+            return (
+                <li
+                    role="option"
+                    aria-selected={String(value === activeIndex)}
+                    key={value}
+                    title={value}
+                    className={itemCls}
+                    onClick={onClick}
+                >
+                    {label}
+                </li>
+            );
+        });
+    };
+
+    render() {
+        const { prefix, title, mode, step } = this.props;
         const total = mode === 'hour' ? 24 : 60;
         const list = [];
         for (let i = 0; i < total; i++) {
             if (i % step === 0) {
-                const isDisabled = disabled || disabledItems(i);
-                const itemCls = classnames({
-                    [`${prefix}time-picker-menu-item`]: true,
-                    [`${prefix}disabled`]: isDisabled,
-                    [`${prefix}selected`]: i === activeIndex,
+                list.push({
+                    label: i,
+                    value: i,
                 });
-                const onClick = isDisabled ? noop : () => onSelect(i, mode);
-                list.push(
-                    <li
-                        role="option"
-                        aria-selected={String(i === activeIndex)}
-                        key={i}
-                        title={i}
-                        className={itemCls}
-                        onClick={onClick}
-                    >
-                        {i}
-                    </li>
-                );
             }
         }
 
@@ -120,7 +136,7 @@ class TimeMenu extends React.Component {
                     className={`${prefix}time-picker-menu-${mode}`}
                     ref={this._menuRefHandler}
                 >
-                    {list}
+                    {this.createMenuItems(list)}
                 </ul>
             </div>
         );
diff --git a/src/time-picker/panel.jsx b/src/time-picker/panel.jsx
index c8b0aea993..e21d153447 100644
--- a/src/time-picker/panel.jsx
+++ b/src/time-picker/panel.jsx
@@ -54,6 +54,18 @@ class TimePickerPanel extends Component {
          * @return {Boolean} 是否禁用
          */
         disabledSeconds: PropTypes.func,
+        /**
+         * 渲染的可选择时间列表
+         * [{
+         *  label: '01',
+         *  value: 1
+         * }]
+         * @param {Array} list 默认渲染的列表
+         * @param {String} mode 渲染的菜单 hour, minute, second
+         * @param {moment} value 当前时间，可能为 null
+         * @return {Array} 返回需要渲染的数据
+         */
+        renderTimeMenuItems: PropTypes.func,
         /**
          * 选择某个日期值时的回调
          * @param {Object} 选中后的日期值
@@ -110,6 +122,7 @@ class TimePickerPanel extends Component {
             disabledHours,
             disabledMinutes,
             disabledSeconds,
+            renderTimeMenuItems,
             ...others
         } = this.props;
 
@@ -126,6 +139,8 @@ class TimePickerPanel extends Component {
             prefix,
             disabled,
             onSelect: this.onSelectMenuItem,
+            renderTimeMenuItems,
+            value,
         };
 
         let activeHour;
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index 48dc736867..3619c7c335 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -84,6 +84,18 @@ export default class TimePicker extends Component {
          * @return {Boolean} 是否禁用
          */
         disabledSeconds: PropTypes.func,
+        /**
+         * 渲染的可选择时间列表
+         * [{
+         *  label: '01',
+         *  value: 1
+         * }]
+         * @param {Array} list 默认渲染的列表
+         * @param {String} mode 渲染的菜单 hour, minute, second
+         * @param {moment} value 当前时间，可能为 null
+         * @return {Array} 返回需要渲染的数据
+         */
+        renderTimeMenuItems: PropTypes.func,
         /**
          * 弹层是否显示（受控）
          */
@@ -316,6 +328,7 @@ export default class TimePicker extends Component {
             disabledHours,
             disabledMinutes,
             disabledSeconds,
+            renderTimeMenuItems,
             popupAlign,
             popupTriggerType,
             popupContainer,
@@ -380,6 +393,7 @@ export default class TimePicker extends Component {
             disabledHours,
             disabledMinutes,
             disabledSeconds,
+            renderTimeMenuItems,
             onSelect: this.onTimePanelSelect,
         };
 
diff --git a/test/time-picker/index-spec.js b/test/time-picker/index-spec.js
index 6e59b665c0..b20ac52091 100644
--- a/test/time-picker/index-spec.js
+++ b/test/time-picker/index-spec.js
@@ -103,6 +103,36 @@ describe('TimePicker', () => {
                 ).length === 12
             );
         });
+
+        it('should render menu items', () => {
+            const renderTimeMenuItems = (list) => {
+                return list.map(({ label, value }) => {
+                    return {
+                        value,
+                        label: value > 9 ? String(value) : `0${value}`
+                    };
+                });
+            };
+            wrapper = mount(<TimePicker defaultVisible renderTimeMenuItems={renderTimeMenuItems}  />);
+
+            assert(
+                wrapper.find(
+                    '.next-time-picker-menu-second .next-time-picker-menu-item'
+                ).at(0).text() === '00'
+            );
+
+            assert(
+                wrapper.find(
+                    '.next-time-picker-menu-second .next-time-picker-menu-item'
+                ).at(9).text() === '09'
+            );
+
+            assert(
+                wrapper.find(
+                    '.next-time-picker-menu-second .next-time-picker-menu-item'
+                ).at(10).text() === '10'
+            );
+        });
     });
 
     describe('action', () => {

From 61a9c540e26388cbf40a9d0feb9bf864fef624d9 Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Wed, 31 Jul 2019 17:52:23 +0800
Subject: [PATCH 15/27] fix(Typescript): add button props to menu-button
 split-button

---
 types/menu-button/index.d.ts  | 3 ++-
 types/split-button/index.d.ts | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/types/menu-button/index.d.ts b/types/menu-button/index.d.ts
index 01ded719a0..15494a57a4 100644
--- a/types/menu-button/index.d.ts
+++ b/types/menu-button/index.d.ts
@@ -2,12 +2,13 @@
 
 import * as React from 'react';
 import { Item, Group, Divider } from '../menu';
+import { ButtonProps } from '../button';
 
 interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
     onSelect?: any;
 }
 
-export interface MenuButtonProps extends HTMLAttributesWeak {
+export interface MenuButtonProps extends HTMLAttributesWeak, ButtonProps {
     /**
      * 按钮上的文本内容
      */
diff --git a/types/split-button/index.d.ts b/types/split-button/index.d.ts
index ade85e8ba1..c9619e42be 100644
--- a/types/split-button/index.d.ts
+++ b/types/split-button/index.d.ts
@@ -1,12 +1,13 @@
 /// <reference types="react" />
 
 import * as React from 'react';
+import { ButtonProps } from '../button';
 
 interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
     onSelect?: any;
 }
 
-export interface SplitButtonProps extends HTMLAttributesWeak {
+export interface SplitButtonProps extends HTMLAttributesWeak, ButtonProps {
     /**
      * 按钮的类型
      */

From ac0321328b23ab68ad80b7f69fe8323cd65849e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=9D=E9=B8=9F?= <xuhong.cxh@alibaba-inc.com>
Date: Wed, 31 Jul 2019 21:46:30 +0800
Subject: [PATCH 16/27] feat(Range): range component support touch event

---
 src/range/view/range.jsx | 49 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
index bfb5354618..450a6072b1 100644
--- a/src/range/view/range.jsx
+++ b/src/range/view/range.jsx
@@ -278,7 +278,7 @@ export default class Range extends React.Component {
         const value = props.value !== undefined ? props.value : defaultValue;
 
         this.state = {
-            value: value,
+            value,
             tempValue: value,
             hasMovingClass: false,
             lowerTooltipVisible: false,
@@ -304,7 +304,7 @@ export default class Range extends React.Component {
                 value = initialValue;
             }
             this.setState({
-                value: value,
+                value,
                 tempValue: value,
             });
         }
@@ -383,11 +383,20 @@ export default class Range extends React.Component {
                 hasMovingClass: true,
             });
             this._start(e.pageX);
-            this._addDocumentEvents();
+            this._addDocumentMouseEvents();
             pauseEvent(e);
         }
     }
 
+    _onTouchStart(e) {
+        this.setState({
+            hasMovingClass: true,
+        });
+        this._start(e.targetTouches[0].pageX);
+        this._addDocumentTouchEvents();
+        e.stopPropagation(); // preventDefault() will be ignored: https://www.chromestatus.com/features/5093566007214080
+    }
+
     onKeyDown(e) {
         if (
             e.keyCode === KEYCODE.LEFT_ARROW ||
@@ -462,7 +471,7 @@ export default class Range extends React.Component {
                 this.setState({
                     // tooltipVisible: false,
                     tempValue: value,
-                    value: value,
+                    value,
                 });
             }
             this.props.onChange(tempValue);
@@ -470,7 +479,9 @@ export default class Range extends React.Component {
     }
 
     _move(e) {
-        this._onProcess(e.pageX);
+        const position =
+            e.type === 'mousemove' ? e.pageX : e.targetTouches[0].pageX;
+        this._onProcess(position);
     }
 
     _onProcess(position, start) {
@@ -530,7 +541,7 @@ export default class Range extends React.Component {
         }
     }
 
-    _addDocumentEvents() {
+    _addDocumentMouseEvents() {
         this._onMouseMoveListener = events.on(
             document,
             'mousemove',
@@ -543,6 +554,19 @@ export default class Range extends React.Component {
         );
     }
 
+    _addDocumentTouchEvents() {
+        this._onTouchMoveListener = events.on(
+            document,
+            'touchmove',
+            this._move.bind(this)
+        );
+        this._onTouchEndListener = events.on(
+            document,
+            'touchend',
+            this._end.bind(this)
+        );
+    }
+
     _removeDocumentEvents() {
         if (this._onMouseMoveListener) {
             this._onMouseMoveListener.off();
@@ -553,8 +577,20 @@ export default class Range extends React.Component {
             this._onMouseUpListener.off();
             this._onMouseUpListener = null;
         }
+
+        if (this._onTouchStartListener) {
+            this._onTouchStartListener.off();
+            this._onTouchStartListener = null;
+        }
+
+        if (this._onTouchEndListener) {
+            this._onTouchEndListener.off();
+            this._onTouchEndListener = null;
+        }
     }
 
+    _remove;
+
     // position => current (value type)
     _positionToCurrent(position) {
         const { start, end } = this._moving;
@@ -716,6 +752,7 @@ export default class Range extends React.Component {
                 id={id}
                 dir={rtl ? 'rtl' : 'ltr'}
                 onMouseDown={disabled ? noop : this._onMouseDown.bind(this)}
+                onTouchStart={disabled ? noop : this._onTouchStart.bind(this)}
             >
                 {marks !== false && marksPosition === 'above' ? (
                     <Mark {...commonProps} marks={this._calcMarks()} />

From 1ae682f2bc55561492d522a566c74ed81d152518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=9D=E9=B8=9F?= <xuhong.cxh@alibaba-inc.com>
Date: Wed, 31 Jul 2019 21:49:38 +0800
Subject: [PATCH 17/27] chore(Range): remove redundant code

---
 src/range/view/range.jsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
index 450a6072b1..8eebbf3c02 100644
--- a/src/range/view/range.jsx
+++ b/src/range/view/range.jsx
@@ -379,9 +379,6 @@ export default class Range extends React.Component {
 
     _onMouseDown(e) {
         if (e.button === 0) {
-            this.setState({
-                hasMovingClass: true,
-            });
             this._start(e.pageX);
             this._addDocumentMouseEvents();
             pauseEvent(e);
@@ -389,9 +386,6 @@ export default class Range extends React.Component {
     }
 
     _onTouchStart(e) {
-        this.setState({
-            hasMovingClass: true,
-        });
         this._start(e.targetTouches[0].pageX);
         this._addDocumentTouchEvents();
         e.stopPropagation(); // preventDefault() will be ignored: https://www.chromestatus.com/features/5093566007214080
@@ -426,6 +420,10 @@ export default class Range extends React.Component {
     }
 
     _start(position) {
+        this.setState({
+            hasMovingClass: true,
+        });
+
         const { tempValue } = this.state;
         const range = this.dom;
         const start = range.getBoundingClientRect().left;

From 9921578e7eeee2b62e4f948996953ea325b405ed Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Thu, 1 Aug 2019 14:39:49 +0800
Subject: [PATCH 18/27] fix(Dialog): pass event to onClose of Dialog.show,
 close #947

---
 src/dialog/show.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dialog/show.jsx b/src/dialog/show.jsx
index 38cc968609..7b895581a0 100644
--- a/src/dialog/show.jsx
+++ b/src/dialog/show.jsx
@@ -102,8 +102,8 @@ class Modal extends Component {
     };
 
     wrapper(fn, callback) {
-        return () => {
-            const res = fn();
+        return (...args) => {
+            const res = fn(...args);
             if (res && res.then) {
                 this.loading(true);
 

From b1056aff74d6aa48bef05f8486fc254d7ad95e6a Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Thu, 1 Aug 2019 15:01:19 +0800
Subject: [PATCH 19/27] chore(*): Release-1.16.5

---
 CHANGELOG.md             | 15 +++++++++++++++
 LATESTLOG.md             |  9 +++++++--
 index.js                 |  2 +-
 package.json             |  2 +-
 scripts/release/index.js |  2 +-
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dd2e05583..d345bc5dca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Change Log 
 
+## [1.16.5](https://github.com/alibaba-fusion/next/compare/1.16.4...1.16.5) (2019-08-01)
+
+
+### Bug Fixes
+
+* **CascaderSelect:** not exist value  be removed ([2b1dee8](https://github.com/alibaba-fusion/next/commit/2b1dee8))
+* **Dialog:** pass event to onClose of Dialog.show, close [#947](https://github.com/alibaba-fusion/next/issues/947) ([9921578](https://github.com/alibaba-fusion/next/commit/9921578))
+* **Field:** use constructor not initValue fix [#924](https://github.com/alibaba-fusion/next/issues/924) ([3fe5cf7](https://github.com/alibaba-fusion/next/commit/3fe5cf7))
+* **Pagination:** button style override pagination ([41e9399](https://github.com/alibaba-fusion/next/commit/41e9399))
+* **Typescript:** add button props to menu-button split-button ([61a9c54](https://github.com/alibaba-fusion/next/commit/61a9c54))
+* **Upload:** bug by Dragger value under controlled. Close [#923](https://github.com/alibaba-fusion/next/issues/923) ([c2ea8a7](https://github.com/alibaba-fusion/next/commit/c2ea8a7))
+
+
+
+
 ## [1.16.4](https://github.com/alibaba-fusion/next/compare/1.16.3...1.16.4) (2019-07-23)
 
 
diff --git a/LATESTLOG.md b/LATESTLOG.md
index a5cd4d89df..1c5bbf2ed3 100644
--- a/LATESTLOG.md
+++ b/LATESTLOG.md
@@ -1,10 +1,15 @@
 # Latest Log 
 
-## [1.16.4](https://github.com/alibaba-fusion/next/compare/1.16.3...1.16.4) (2019-07-23)
+## [1.16.5](https://github.com/alibaba-fusion/next/compare/1.16.4...1.16.5) (2019-08-01)
 
 
 ### Bug Fixes
 
-* **Field:** validate no names fix [#913](https://github.com/alibaba-fusion/next/issues/913) ([d131416](https://github.com/alibaba-fusion/next/commit/d131416))
+* **CascaderSelect:** not exist value  be removed ([2b1dee8](https://github.com/alibaba-fusion/next/commit/2b1dee8))
+* **Dialog:** pass event to onClose of Dialog.show, close [#947](https://github.com/alibaba-fusion/next/issues/947) ([9921578](https://github.com/alibaba-fusion/next/commit/9921578))
+* **Field:** use constructor not initValue fix [#924](https://github.com/alibaba-fusion/next/issues/924) ([3fe5cf7](https://github.com/alibaba-fusion/next/commit/3fe5cf7))
+* **Pagination:** button style override pagination ([41e9399](https://github.com/alibaba-fusion/next/commit/41e9399))
+* **Typescript:** add button props to menu-button split-button ([61a9c54](https://github.com/alibaba-fusion/next/commit/61a9c54))
+* **Upload:** bug by Dragger value under controlled. Close [#923](https://github.com/alibaba-fusion/next/issues/923) ([c2ea8a7](https://github.com/alibaba-fusion/next/commit/c2ea8a7))
 
 
diff --git a/index.js b/index.js
index 20e808bfbe..f62fae5c1a 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
 var next = require('./lib/index.js');
 
-next.version = '1.16.4';
+next.version = '1.16.5';
 
 module.exports = next;
diff --git a/package.json b/package.json
index b39ff73968..44567a66bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alifd/next",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "description": "A configurable component library for web built on React.",
   "keywords": [
     "fusion",
diff --git a/scripts/release/index.js b/scripts/release/index.js
index 9fb42a1e70..dc83afd718 100644
--- a/scripts/release/index.js
+++ b/scripts/release/index.js
@@ -22,7 +22,7 @@ const runCommond = function(cmd) {
 };
 
 co(function*() {
-    checkTags();
+    // checkTags();
 
     yield pushMaster();
     yield pushPlatformDocsBranch();

From 05f5a8748aa19f28fa19f06d40e7e68830e2a229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=9D=E9=B8=9F?= <xuhong.cxh@alibaba-inc.com>
Date: Thu, 1 Aug 2019 15:25:13 +0800
Subject: [PATCH 20/27] fix(Range): prevent arrow keyup event when disabled

---
 src/range/view/range.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
index 8eebbf3c02..ac84d00bf6 100644
--- a/src/range/view/range.jsx
+++ b/src/range/view/range.jsx
@@ -392,6 +392,8 @@ export default class Range extends React.Component {
     }
 
     onKeyDown(e) {
+        if (this.props.disabled) return;
+
         if (
             e.keyCode === KEYCODE.LEFT_ARROW ||
             e.keyCode === KEYCODE.RIGHT_ARROW
@@ -576,9 +578,9 @@ export default class Range extends React.Component {
             this._onMouseUpListener = null;
         }
 
-        if (this._onTouchStartListener) {
-            this._onTouchStartListener.off();
-            this._onTouchStartListener = null;
+        if (this._onTouchMoveListener) {
+            this._onTouchMoveListener.off();
+            this._onTouchMoveListener = null;
         }
 
         if (this._onTouchEndListener) {
@@ -587,8 +589,6 @@ export default class Range extends React.Component {
         }
     }
 
-    _remove;
-
     // position => current (value type)
     _positionToCurrent(position) {
         const { start, end } = this._moving;

From 6e2c85a874c0d584d0e0874059516685a2cf1334 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=9D=E9=B8=9F?= <xuhong.cxh@alibaba-inc.com>
Date: Thu, 1 Aug 2019 16:30:48 +0800
Subject: [PATCH 21/27] feat(Range): add touch test case for Range

---
 test/range/index-spec.js | 53 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/test/range/index-spec.js b/test/range/index-spec.js
index 9bba3fc99f..6f0ed3aaa4 100644
--- a/test/range/index-spec.js
+++ b/test/range/index-spec.js
@@ -165,7 +165,7 @@ describe('Range ', () => {
         );
     });
 
-    it('dragging onChange onProcess', done => {
+    it('laptop dragging onChange onProcess', done => {
         let changeValue = 0;
         let processValue = 0;
         let onChangeCall = 0;
@@ -202,6 +202,55 @@ describe('Range ', () => {
         });
         RangeInstance._move({
             pageX: 20,
+            type: 'mousemove',
+            stopPropagation: () => {},
+            preventDefault: () => {},
+        });
+        RangeInstance._end();
+
+        assert(processValue === 20);
+        assert(processCall === 1);
+        assert(onChangeCall === 1);
+        done();
+    });
+
+    it('mobile dragging onChange onProcess', done => {
+        let changeValue = 0;
+        let processValue = 0;
+        let onChangeCall = 0;
+        let processCall = 0;
+        const wrapper = mount(
+            <Range
+                defaultValue={10}
+                style={{ width: 100 }}
+                marks={[0, 26, 37, 100]}
+                onChange={function(value) {
+                    // console.log('onChange', value);
+                    changeValue = value;
+                    onChangeCall++;
+                }}
+                onProcess={function(value) {
+                    // console.log('onProcess', value);
+                    processValue = value;
+                    processCall++;
+                }}
+                min={0}
+                max={100}
+            />
+        );
+
+        const RangeInstance = wrapper
+            .find('Range')
+            .at(0)
+            .instance();
+        RangeInstance._onTouchStart({
+            targetTouches: [{ pageX: 10 }],
+            stopPropagation: () => {},
+            preventDefault: () => {},
+        });
+        RangeInstance._move({
+            targetTouches: [{ pageX: 20 }],
+            type: 'touchmove',
             stopPropagation: () => {},
             preventDefault: () => {},
         });
@@ -243,6 +292,7 @@ describe('Range ', () => {
         });
         RangeInstance._move({
             pageX: 30,
+            type: 'mousemove',
             stopPropagation: () => {},
             preventDefault: () => {},
         });
@@ -259,6 +309,7 @@ describe('Range ', () => {
         });
         RangeInstance._move({
             pageX: 0,
+            type: 'mousemove',
             stopPropagation: () => {},
             preventDefault: () => {},
         });

From 0cfe939f9a0338980cac8cc6353c230aa771bfa4 Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Thu, 1 Aug 2019 19:10:08 +0800
Subject: [PATCH 22/27] fix(Typescript): fix menu-button & split-button

---
 scripts/release/index.js      | 2 +-
 types/menu-button/index.d.ts  | 4 ++--
 types/split-button/index.d.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/release/index.js b/scripts/release/index.js
index dc83afd718..9fb42a1e70 100644
--- a/scripts/release/index.js
+++ b/scripts/release/index.js
@@ -22,7 +22,7 @@ const runCommond = function(cmd) {
 };
 
 co(function*() {
-    // checkTags();
+    checkTags();
 
     yield pushMaster();
     yield pushPlatformDocsBranch();
diff --git a/types/menu-button/index.d.ts b/types/menu-button/index.d.ts
index 15494a57a4..d98843842b 100644
--- a/types/menu-button/index.d.ts
+++ b/types/menu-button/index.d.ts
@@ -4,11 +4,11 @@ import * as React from 'react';
 import { Item, Group, Divider } from '../menu';
 import { ButtonProps } from '../button';
 
-interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+interface HTMLAttributesWeak extends ButtonProps {
     onSelect?: any;
 }
 
-export interface MenuButtonProps extends HTMLAttributesWeak, ButtonProps {
+export interface MenuButtonProps extends HTMLAttributesWeak {
     /**
      * 按钮上的文本内容
      */
diff --git a/types/split-button/index.d.ts b/types/split-button/index.d.ts
index c9619e42be..5367ea14c0 100644
--- a/types/split-button/index.d.ts
+++ b/types/split-button/index.d.ts
@@ -3,11 +3,11 @@
 import * as React from 'react';
 import { ButtonProps } from '../button';
 
-interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
+interface HTMLAttributesWeak extends ButtonProps {
     onSelect?: any;
 }
 
-export interface SplitButtonProps extends HTMLAttributesWeak, ButtonProps {
+export interface SplitButtonProps extends HTMLAttributesWeak {
     /**
      * 按钮的类型
      */

From 67f0d49cf1564977c38765fb99c0c02579e38df1 Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Thu, 1 Aug 2019 19:35:23 +0800
Subject: [PATCH 23/27] chore(*): Release-1.16.6

---
 CHANGELOG.md | 10 ++++++++++
 LATESTLOG.md |  9 ++-------
 index.js     |  2 +-
 package.json |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d345bc5dca..699937b419 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log 
 
+## [1.16.6](https://github.com/alibaba-fusion/next/compare/1.16.5...1.16.6) (2019-08-01)
+
+
+### Bug Fixes
+
+* **Typescript:** fix menu-button & split-button ([0cfe939](https://github.com/alibaba-fusion/next/commit/0cfe939))
+
+
+
+
 ## [1.16.5](https://github.com/alibaba-fusion/next/compare/1.16.4...1.16.5) (2019-08-01)
 
 
diff --git a/LATESTLOG.md b/LATESTLOG.md
index 1c5bbf2ed3..a9610b59f7 100644
--- a/LATESTLOG.md
+++ b/LATESTLOG.md
@@ -1,15 +1,10 @@
 # Latest Log 
 
-## [1.16.5](https://github.com/alibaba-fusion/next/compare/1.16.4...1.16.5) (2019-08-01)
+## [1.16.6](https://github.com/alibaba-fusion/next/compare/1.16.5...1.16.6) (2019-08-01)
 
 
 ### Bug Fixes
 
-* **CascaderSelect:** not exist value  be removed ([2b1dee8](https://github.com/alibaba-fusion/next/commit/2b1dee8))
-* **Dialog:** pass event to onClose of Dialog.show, close [#947](https://github.com/alibaba-fusion/next/issues/947) ([9921578](https://github.com/alibaba-fusion/next/commit/9921578))
-* **Field:** use constructor not initValue fix [#924](https://github.com/alibaba-fusion/next/issues/924) ([3fe5cf7](https://github.com/alibaba-fusion/next/commit/3fe5cf7))
-* **Pagination:** button style override pagination ([41e9399](https://github.com/alibaba-fusion/next/commit/41e9399))
-* **Typescript:** add button props to menu-button split-button ([61a9c54](https://github.com/alibaba-fusion/next/commit/61a9c54))
-* **Upload:** bug by Dragger value under controlled. Close [#923](https://github.com/alibaba-fusion/next/issues/923) ([c2ea8a7](https://github.com/alibaba-fusion/next/commit/c2ea8a7))
+* **Typescript:** fix menu-button & split-button ([0cfe939](https://github.com/alibaba-fusion/next/commit/0cfe939))
 
 
diff --git a/index.js b/index.js
index f62fae5c1a..b2e5915fa7 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,5 @@
 var next = require('./lib/index.js');
 
-next.version = '1.16.5';
+next.version = '1.16.6';
 
 module.exports = next;
diff --git a/package.json b/package.json
index 44567a66bf..b761bc3a15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@alifd/next",
-  "version": "1.16.5",
+  "version": "1.16.6",
   "description": "A configurable component library for web built on React.",
   "keywords": [
     "fusion",

From 2f9ea90994c434c08cffc24fb32c1c54c0e37ec3 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Mon, 5 Aug 2019 11:41:16 +0800
Subject: [PATCH 24/27] feat(DatePicker): support set Array defaultValue fixed
 https://github.com/alibaba-fusion/next/issues/433 fixed
 https://github.com/alibaba-fusion/next/issues/891

---
 docs/date-picker/demo/show-time.md |  3 +++
 src/date-picker/range-picker.jsx   | 25 +++++++++++++++++++------
 test/date-picker/index-spec.js     | 26 ++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/docs/date-picker/demo/show-time.md b/docs/date-picker/demo/show-time.md
index 8df1fb1859..d209ed5da4 100644
--- a/docs/date-picker/demo/show-time.md
+++ b/docs/date-picker/demo/show-time.md
@@ -25,6 +25,7 @@ const onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss')
 const onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));
 
 const defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);
+const defaultTimeValues = [moment('09:00:00', 'HH:mm:ss', true), moment('23:59:59', 'HH:mm:ss', true)];
 
 ReactDOM.render(<div>
     <p>DatePicker With Time</p>
@@ -39,5 +40,7 @@ ReactDOM.render(<div>
     <RangePicker showTime resetTime onChange={onChange} onOk={onRangeOk} />
     <p>RangePicker with Time, with default time value, hide seconds</p>
     <RangePicker showTime={{ defaultValue: defaultTimeValue, format: 'HH:mm', minuteStep: 15 }} onChange={onChange} onOk={onRangeOk} />
+    <p>RangePicker with Time, with default start & end time value, hide seconds</p>
+    <RangePicker showTime={{ defaultValue: defaultTimeValues, format: 'HH:mm', minuteStep: 15 }} onChange={onChange} onOk={onRangeOk} />
 </div>, mountNode);
 ````
diff --git a/src/date-picker/range-picker.jsx b/src/date-picker/range-picker.jsx
index eeb13ebb62..d5df86c07c 100644
--- a/src/date-picker/range-picker.jsx
+++ b/src/date-picker/range-picker.jsx
@@ -316,7 +316,9 @@ export default class RangePicker extends Component {
                         // 第一次选择，如果设置了时间默认值，则使用该默认时间
                         if (showTime.defaultValue) {
                             const defaultTimeValue = formatDateValue(
-                                showTime.defaultValue,
+                                Array.isArray(showTime.defaultValue)
+                                    ? showTime.defaultValue[0]
+                                    : showTime.defaultValue,
                                 this.timeFormat
                             );
                             newValue = resetValueTime(value, defaultTimeValue);
@@ -346,7 +348,10 @@ export default class RangePicker extends Component {
                         // 第一次选择，如果设置了时间默认值，则使用该默认时间
                         if (showTime.defaultValue) {
                             const defaultTimeValue = formatDateValue(
-                                showTime.defaultValue,
+                                Array.isArray(showTime.defaultValue)
+                                    ? showTime.defaultValue[1] ||
+                                          showTime.defaultValue[0]
+                                    : showTime.defaultValue,
                                 this.timeFormat
                             );
                             newValue = resetValueTime(value, defaultTimeValue);
@@ -606,9 +611,15 @@ export default class RangePicker extends Component {
     };
 
     changePanel = panel => {
+        const { startValue, endValue } = this.state;
         this.setState({
             panel,
-            activeDateInput: panel === PANEL.DATE ? 'startValue' : 'startTime',
+            activeDateInput:
+                panel === PANEL.DATE
+                    ? !!startValue && !endValue
+                        ? 'endValue'
+                        : 'startValue'
+                    : 'startTime',
         });
     };
 
@@ -850,7 +861,7 @@ export default class RangePicker extends Component {
                     {...sharedTimeInputProps}
                     value={startTimeInputValue}
                     aria-label={startTimeInputAriaLabel}
-                    disabled={disabled || !state.startValue || !state.endValue}
+                    disabled={disabled || !state.startValue}
                     onFocus={() => this.onFocusTimeInput('startTime')}
                     className={startTimeInputCls}
                 />
@@ -866,7 +877,7 @@ export default class RangePicker extends Component {
                     {...sharedTimeInputProps}
                     value={endTimeInputValue}
                     aria-label={endTimeInputAriaLabel}
-                    disabled={disabled || !state.endValue || !state.startValue}
+                    disabled={disabled || !state.endValue}
                     onFocus={() => this.onFocusTimeInput('endTime')}
                     className={endTimeInputCls}
                 />
@@ -888,6 +899,7 @@ export default class RangePicker extends Component {
                 <div className={`${prefix}range-picker-panel-time`}>
                     <TimePickerPanel
                         {...sharedTimePickerProps}
+                        disabled={disabled || !state.startValue}
                         className={`${prefix}range-picker-panel-time-start`}
                         value={state.startValue}
                         onSelect={this.onSelectStartTime}
@@ -895,6 +907,7 @@ export default class RangePicker extends Component {
                     <TimePickerPanel
                         {...sharedTimePickerProps}
                         {...disabledTime}
+                        disabled={disabled || !state.endValue}
                         className={`${prefix}range-picker-panel-time-end`}
                         value={state.endValue}
                         onSelect={this.onSelectEndTime}
@@ -906,7 +919,7 @@ export default class RangePicker extends Component {
         panelFooter = panelFooter || (
             <PanelFooter
                 prefix={prefix}
-                value={state.startValue && state.endValue}
+                value={state.startValue || state.endValue}
                 ranges={Object.keys(ranges).map(key => ({
                     label: key,
                     value: ranges[key],
diff --git a/test/date-picker/index-spec.js b/test/date-picker/index-spec.js
index 029c23fc5f..37768f68af 100644
--- a/test/date-picker/index-spec.js
+++ b/test/date-picker/index-spec.js
@@ -12,6 +12,7 @@ const { RangePicker, MonthPicker, YearPicker } = DatePicker;
 const startValue = moment('2017-11-20', 'YYYY-MM-DD', true);
 const endValue = moment('2017-12-15', 'YYYY-MM-DD', true);
 const defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);
+const defaultTimeValues = [moment('09:00:00', 'HH:mm:ss', true), moment('23:59:59', 'HH:mm:ss', true)];
 
 // 禁止选择 startValue 之前的所有日期
 const disabledDate = function(date, view) {
@@ -1139,6 +1140,31 @@ describe('RangePicker', () => {
             );
         });
 
+        it('should set defaultValues for TimePicker', () => {
+            let ret;
+            wrapper = mount(
+                <RangePicker
+                    showTime={{ defaultValue: defaultTimeValues }}
+                    defaultVisible
+                    defaultVisibleMonth={() => startValue}
+                    onChange={val => (ret = val)}
+                />
+            );
+            wrapper
+                .find('td[title="2017-11-09"] .next-calendar-date')
+                .simulate('click');
+            assert(
+                ret[0].format('YYYY-MM-DD HH:mm:ss') === '2017-11-09 09:00:00'
+            );
+            wrapper
+                .find('td[title="2017-12-09"] .next-calendar-date')
+                .at(1)
+                .simulate('click');
+            assert(
+                ret[1].format('YYYY-MM-DD HH:mm:ss') === '2017-12-09 23:59:59'
+            );
+        });
+
         it('should resetTime', () => {
             let ret;
 

From 210d84eb235490a5f9c3ece90d666af10ee2e8d2 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Mon, 5 Aug 2019 13:41:40 +0800
Subject: [PATCH 25/27] temp(Tree): delete repeat code, change method name

---
 src/tree/view/tree.jsx |  4 ++--
 src/tree/view/util.js  | 30 ++++++++++--------------------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
index ee64cc3423..551d53bada 100644
--- a/src/tree/view/tree.jsx
+++ b/src/tree/view/tree.jsx
@@ -12,7 +12,7 @@ import {
     filterParentKey,
     getAllCheckedKeys,
     forEachEnableNode,
-    childChecked,
+    isNodeChecked,
 } from './util';
 
 const { bindCtx, noop } = func;
@@ -756,7 +756,7 @@ export default class Tree extends Component {
                         for (let m = 0; m < pnode.children.length; m++) {
                             if (
                                 !pnode.children.every(child =>
-                                    childChecked(child, checkedKeys)
+                                    isNodeChecked(child, checkedKeys)
                                 )
                             ) {
                                 parentCheck = false;
diff --git a/src/tree/view/util.js b/src/tree/view/util.js
index 21b8521458..89dbbd7f68 100644
--- a/src/tree/view/util.js
+++ b/src/tree/view/util.js
@@ -16,17 +16,17 @@ export function normalizeToArray(keys) {
  * @param {Node} child
  * @param {Array} checkedKeys
  */
-export function childChecked(child, checkedKeys) {
-    if (child.disabled || parent.checkboxDisabled) return true;
+export function isNodeChecked(node, checkedKeys) {
+    if (node.disabled || parent.checkboxDisabled) return true;
     /* istanbul ignore next */
-    if (child.checkable === false) {
+    if (node.checkable === false) {
         return (
-            !child.children ||
-            child.children.length === 0 ||
-            child.children.every(c => childChecked(c, checkedKeys))
+            !node.children ||
+            node.children.length === 0 ||
+            node.children.every(c => isNodeChecked(c, checkedKeys))
         );
     }
-    return checkedKeys.indexOf(child.key) > -1;
+    return checkedKeys.indexOf(node.key) > -1;
 }
 
 /**
@@ -153,18 +153,6 @@ export function getAllCheckedKeys(checkedKeys, _k2n, _p2n) {
     const filteredKeys = checkedKeys.filter(key => !!_k2n[key]);
     const flatKeys = filterChildKey(filteredKeys, _k2n, _p2n);
 
-    const childChecked = child => {
-        if (child.disabled || child.checkboxDisabled) return true;
-        if (child.checkable === false) {
-            return (
-                !child.children ||
-                child.children.length === 0 ||
-                child.children.every(childChecked)
-            );
-        }
-        return flatKeys.indexOf(child.key) > -1;
-    };
-
     const removeKey = child => {
         if (child.disabled || child.checkboxDisabled) return;
         if (
@@ -195,7 +183,9 @@ export function getAllCheckedKeys(checkedKeys, _k2n, _p2n) {
                 parent.checkboxDisabled
             )
                 continue;
-            const parentChecked = parent.children.every(childChecked);
+            const parentChecked = parent.children.every(child =>
+                isNodeChecked(child, flatKeys)
+            );
             if (parentChecked) {
                 parent.children.forEach(removeKey);
                 addParentKey(i, parent);

From bce29cf732576bb7682b5b8a7db3e823c52f3078 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Mon, 5 Aug 2019 14:27:08 +0800
Subject: [PATCH 26/27] test(DatePicker): add test case

---
 test/date-picker/index-spec.js | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/test/date-picker/index-spec.js b/test/date-picker/index-spec.js
index 37768f68af..d209c6891e 100644
--- a/test/date-picker/index-spec.js
+++ b/test/date-picker/index-spec.js
@@ -1115,6 +1115,48 @@ describe('RangePicker', () => {
             );
         });
 
+        it('should select start date & time then select end date & time', () => {
+            let ret;
+            wrapper = mount(
+                <RangePicker
+                    showTime
+                    defaultVisible
+                    defaultVisibleMonth={() => moment('2019-08-01', 'YYYY-MM-DD')}
+                    onChange={val => (ret = val)}
+                />
+            );
+
+            wrapper.find('.next-calendar-cell[title="2019-08-06"]').simulate('click');
+            wrapper
+                .find('.next-range-picker-panel-input-start-time input')
+                .simulate('focus');
+            wrapper
+                .find(
+                    '.next-range-picker-panel-time-start .next-time-picker-menu-hour .next-time-picker-menu-item'
+                )
+                .at(3)
+                .simulate('click');
+            wrapper
+                .find(
+                    '.next-date-picker-panel-footer .next-btn'
+                )
+                .at(0)
+                .simulate('click');
+            wrapper.find('.next-calendar-cell[title="2019-08-09"]').simulate('click');
+            wrapper
+                .find('.next-range-picker-panel-input-end-time input')
+                .simulate('focus');
+            wrapper
+                .find(
+                    '.next-range-picker-panel-time-end .next-time-picker-menu-hour .next-time-picker-menu-item'
+                )
+                .at(3)
+                .simulate('click');
+            assert(
+                ret[0].format('YYYY-MM-DD HH:mm:ss') === '2019-08-06 03:00:00'
+            );
+        });
+
         it('should set defaultValue for TimePicker', () => {
             let ret;
             wrapper = mount(

From 3c356bf233d6986b62c62c3576a726d5737c9223 Mon Sep 17 00:00:00 2001
From: myronliu347 <myronliu347@gmail.com>
Date: Mon, 5 Aug 2019 20:03:24 +0800
Subject: [PATCH 27/27] feat(Tab): support device touchable

---
 src/tab/main.scss      | 13 +++++++++++++
 src/tab/tab.jsx        |  6 +++++-
 test/tab/index-spec.js | 12 ++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/tab/main.scss b/src/tab/main.scss
index 15a7f9fe0a..61460c720d 100644
--- a/src/tab/main.scss
+++ b/src/tab/main.scss
@@ -33,6 +33,19 @@
         white-space: nowrap;
     }
 
+    &-scrollable #{$tab-prefix}-nav-scroll {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        &::-webkit-scrollbar {
+            display: none !important;
+            width: 0 !important;
+            height: 0 !important;
+            -webkit-appearance: none;
+            opacity: 0 !important;
+        }
+    }
+
     &-nav {
         display: inline-block;
         position: relative;
diff --git a/src/tab/tab.jsx b/src/tab/tab.jsx
index 01ac34f0f5..59ea0f0dc1 100644
--- a/src/tab/tab.jsx
+++ b/src/tab/tab.jsx
@@ -14,6 +14,7 @@ export default class Tab extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         rtl: PropTypes.bool,
+        device: PropTypes.oneOf(['tablet', 'desktop', 'phone']),
         /**
          * 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换
          */
@@ -242,11 +243,13 @@ export default class Tab extends Component {
             onClose,
             children,
             rtl,
+            device,
             ...others
         } = this.props;
         const { activeKey } = this.state;
 
         const tabs = toArray(children);
+        const isTouchable = ['phone', 'tablet'].indexOf(device) !== -1;
         let newPosition = tabPosition;
         if (rtl && ['left', 'right'].indexOf(tabPosition) >= 0) {
             newPosition = tabPosition === 'left' ? 'right' : 'left';
@@ -258,6 +261,7 @@ export default class Tab extends Component {
                 [`${prefix}tabs-vertical`]:
                     shape === 'wrapped' &&
                     ['left', 'right'].indexOf(tabPosition) >= 0,
+                [`${prefix}tabs-scrollable`]: isTouchable,
                 [`${prefix}tabs-${newPosition}`]: shape === 'wrapped',
                 [`${prefix + size}`]: size,
             },
@@ -269,7 +273,7 @@ export default class Tab extends Component {
             rtl,
             animation,
             activeKey,
-            excessMode,
+            excessMode: isTouchable ? 'dropdown' : excessMode,
             extra,
             tabs,
             tabPosition,
diff --git a/test/tab/index-spec.js b/test/tab/index-spec.js
index c66ae3656e..a69c62578f 100644
--- a/test/tab/index-spec.js
+++ b/test/tab/index-spec.js
@@ -6,6 +6,7 @@ import sinon from 'sinon';
 import assert from 'power-assert';
 import { KEYCODE, dom } from '../../src/util';
 import Tab from '../../src/tab/index';
+import TabNav from '../../src/tab/tabs/nav';
 import '../../src/tab/style.js';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -182,6 +183,17 @@ describe('Tab', () => {
             wrapper = mount(<Tab lazyLoad={false}>{panes}</Tab>);
             assert(wrapper.find('.next-tabs-tabpane').length === 4);
         });
+
+        it('should support device', () => {
+            wrapper = mount(<Tab>{panes}</Tab>);
+            assert(wrapper.find('.next-tabs-scrollable').length === 0);
+            assert(wrapper.find(TabNav).prop('excessMode') === 'slide');
+            wrapper.setProps({
+                device: 'phone'
+            });
+            assert(wrapper.find('.next-tabs-scrollable').length > 0);
+            assert(wrapper.find(TabNav).prop('excessMode') === 'dropdown');
+        })
     });
 
     describe('with action', () => {