feat(*): Add Next Adaptor (#903)

feat(*): Add Next Adaptor

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,
+};

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;
+        }
+    })
+};

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',
+            }
+        }
+    })
+};

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'
+            };
+        }
+    })
+
+};

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;
+  }
+};