@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/timeline/__test__/timeline.test.js

@@ -0,0 +1,253 @@
+import { Timeline, Icon } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const dataSource = [
+    {
+        time: '2019-07-14 10:35',
+        extra: '节点辅助说明信息',
+        content: '第一个节点内容',
+        type: 'ongoing',
+    },
+    {
+        time: '2019-06-13 16:17',
+        extra: '节点辅助说明信息',
+        content: <span style={{ fontSize: '18px' }}>第二个节点内容</span>,
+        color: 'pink',
+    },
+    {
+        time: '2019-05-14 18:34',
+        extra: '节点辅助说明信息',
+        dot: <Icon type="alert_triangle" />,
+        content: '第三个节点内容',
+        type: 'warning',
+    },
+    {
+        time: '2019-05-09 09:12',
+        extra: '节点辅助说明信息',
+        content: '第四个节点内容',
+        type: 'success',
+    },
+];
+
+function renderTl(props) {
+    const realProps = {
+        dataSource,
+        ...props,
+    };
+    return mount(<Timeline {...realProps}></Timeline>, {
+        attachTo: document.getElementById('container'),
+    });
+}
+
+describe('Timeline', () => {
+
+    beforeEach(() => {
+        const div = document.createElement('div');
+        div.setAttribute('id', 'container');
+        document.body.appendChild(div);
+    });
+
+    afterEach(() => {
+        const div = document.getElementById('container');
+        if (div) {
+            document.body.removeChild(div);
+        }
+        document.body.innerHTML = '';
+    });
+
+    it('Timeline with dataSource', () => {
+        const timeline = renderTl();
+        const item = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-timeline-item`);
+        expect(item.length).toEqual(4);
+        const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content`).at(0);
+        // content
+        expect(
+            firstItem
+                .getDOMNode()
+                .textContent
+        ).toEqual('第一个节点内容节点辅助说明信息2019-07-14 10:35');
+        // extra
+        expect(
+            firstItem
+                .find(`.${BASE_CLASS_PREFIX}-timeline-item-content-extra`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('节点辅助说明信息');
+        // time
+        expect(
+            firstItem
+                .find(`.${BASE_CLASS_PREFIX}-timeline-item-content-time`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('2019-07-14 10:35');
+        // type
+        expect(
+            timeline
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-head-ongoing`)
+        ).toEqual(true);
+        timeline.unmount();
+    });
+
+    it('Timeline with jsx',()=>{
+        const timeline=mount(<Timeline>
+            <Timeline.Item time="2019-07-14 10:35">第一个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34">第三个节点内容</Timeline.Item>
+        </Timeline>, {
+            attachTo: document.getElementById('container'),
+        });
+        const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content`).at(0);
+        expect(
+            firstItem
+                .getDOMNode()
+                .textContent
+        ).toEqual('第一个节点内容2019-07-14 10:35');
+        timeline.unmount();
+    });
+
+    it('Timeline with type',()=>{
+        const timeline=mount(<Timeline>
+            <Timeline.Item time="2019-07-14 10:35" type='default'>第一个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-06-13 16:17" type='ongoing'>第二个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" type='success'>第三个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" type='warning'>第四个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" type='error'>第五个节点内容</Timeline.Item>
+        </Timeline>, {
+            attachTo: document.getElementById('container'),
+        });
+        const items = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item`);
+        expect(items.length).toEqual(5);
+        expect(
+            items
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-default`)
+        ).toEqual(true);
+        expect(
+            items
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-ongoing`)
+        ).toEqual(true);
+        expect(
+            items
+            .at(2)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-success`)
+        ).toEqual(true);
+        expect(
+            items
+            .at(3)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-warning`)
+        ).toEqual(true);
+        expect(
+            items
+            .at(4)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-error`)
+        ).toEqual(true);
+        timeline.unmount();
+    });
+
+    it('Timeline with className & style', () => {
+        const timeline=mount(<Timeline className='test' style={{color: 'red'}}>
+            <Timeline.Item time="2019-07-14 10:35" type='default'>第一个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-06-13 16:17" type='ongoing'>第二个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" type='success'>第三个节点内容</Timeline.Item>
+        </Timeline>, {
+            attachTo: document.getElementById('container'),
+        });
+        expect(timeline.exists('.test')).toEqual(true);
+        expect(timeline.find(`.${BASE_CLASS_PREFIX}-timeline.test`)).toHaveStyle('color', 'red');
+    });
+
+    it('Timeline.item with className & style', () => {
+        const timeline=mount(<Timeline>
+            <Timeline.Item time="2019-07-14 10:35" type='default' className='test' style={{color: 'red'}}>第一个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-06-13 16:17" type='ongoing'>第二个节点内容</Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" type='success'>第三个节点内容</Timeline.Item>
+        </Timeline>, {
+            attachTo: document.getElementById('container'),
+        });
+        const firstItems = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item`).at(0);
+        expect(firstItems.find(`.${BASE_CLASS_PREFIX}-timeline-item.test`)).toHaveStyle('color', 'red');
+        expect(firstItems.exists('.test')).toEqual(true);
+    });
+
+    it('Timeline with type',()=>{
+        const timeline=mount(<Timeline>
+            <Timeline.Item time="2019-07-14 10:35">默认样式的节点</Timeline.Item>
+            <Timeline.Item time="2019-06-13 16:17" dot="a" type="warning">
+                自定义图标
+            </Timeline.Item>
+            <Timeline.Item time="2019-05-14 18:34" color="pink">
+                自定义节点颜色
+            </Timeline.Item>
+        </Timeline>, {
+            attachTo: document.getElementById('container'),
+        });
+        const items = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item`);
+        expect(
+            items
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-timeline-item-head-default`)
+        ).toEqual(true);
+        expect(
+            items
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-timeline-item-head`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('a');
+        expect(
+            items
+            .at(2)
+            .find(`.${BASE_CLASS_PREFIX}-timeline-item-head-default`)
+        ).toHaveStyle('backgroundColor', 'pink');
+        timeline.unmount();
+    });
+
+    it('Timeline with mode',()=>{
+        const timelineLeft = renderTl({mode:'left'});
+        expect(
+            timelineLeft
+            .find(`.${BASE_CLASS_PREFIX}-timeline-left`)
+            .length
+        ).toEqual(1);
+        timelineLeft.unmount();
+        const timelineCenter = renderTl({mode:'center'});
+        expect(
+            timelineCenter
+            .find(`.${BASE_CLASS_PREFIX}-timeline-center`)
+            .length
+        ).toEqual(1);
+        timelineCenter.unmount();
+        const timelineAlternate = renderTl({mode:'alternate'});
+        expect(
+            timelineAlternate
+            .find(`.${BASE_CLASS_PREFIX}-timeline-alternate`)
+            .length
+        ).toEqual(1);
+        timelineAlternate.unmount();
+        const timelineRight = renderTl({mode:'right'});
+        expect(
+            timelineRight
+            .find(`.${BASE_CLASS_PREFIX}-timeline-right`)
+            .length
+        ).toEqual(1);
+        timelineRight.unmount();
+    });
+
+  it('Timeline with time type ReactNode',()=>{
+    const timeline=mount(<Timeline>
+      <Timeline.Item time={<span>2019-07-14 10:35</span>}>第一个节点内容</Timeline.Item>
+      <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
+    </Timeline>, {
+      attachTo: document.getElementById('container'),
+    });
+    const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content .${BASE_CLASS_PREFIX}-timeline-item-content-time`).at(0);
+    expect(
+      firstItem
+        .getDOMNode()
+        .innerHTML
+    ).toEqual('<span>2019-07-14 10:35</span>');
+    timeline.unmount();
+  });
+
+});

package/timeline/_story/timeline.stories.js

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+
+import Timeline from '../index';
+import { Icon } from '../../index';
+import { IconAlertTriangle } from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Timeline'
+}
+
+export const DefaultTimeline = () => (
+  <div>
+    <Timeline>
+      <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
+      <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+      <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
+      <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
+    </Timeline>
+  </div>
+);
+
+DefaultTimeline.story = {
+  name: 'default Timeline',
+};
+
+export const Color = () => (
+  <div>
+    <Timeline>
+      <Timeline.Item time="2015-09-01" type="success">
+        创建服务现场
+      </Timeline.Item>
+      <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+      <Timeline.Item time="2015-09-01" type="warning">
+        技术测试异常
+      </Timeline.Item>
+      <Timeline.Item time="2015-09-01" type="error">
+        网络异常正在修复
+      </Timeline.Item>
+    </Timeline>
+  </div>
+);
+
+Color.story = {
+  name: 'color',
+};
+
+export const Custom = () => (
+  <div>
+    <Timeline>
+      <Timeline.Item time="2015-09-01" color="pink">
+        创建服务现场
+      </Timeline.Item>
+      <Timeline.Item time="2015-09-01" color="pink">
+        <span
+          style={{
+            fontSize: '18px',
+          }}
+        >
+          初步排除网络异常
+        </span>
+      </Timeline.Item>
+      <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />} type="warning">
+        技术测试异常
+      </Timeline.Item>
+      <Timeline.Item time="2015-09-01" extra="节点辅助说明信息">
+        初步排除网络异常
+      </Timeline.Item>
+    </Timeline>
+  </div>
+);
+
+Custom.story = {
+  name: 'custom',
+};
+
+export const Mode = () => (
+  <div>
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="alternate">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+    <br />
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="right">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+    <br />
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="left">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+    <br />
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="center">
+        <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+  </div>
+);
+
+Mode.story = {
+  name: 'mode',
+};
+
+const data = [
+  {
+    time: '2019-07-14 10:35',
+    extra: '节点辅助说明信息',
+    content: '创建服务现场',
+    type: 'ongoing',
+  },
+  {
+    time: '2019-06-13 16:17',
+    extra: '节点辅助说明信息',
+    content: (
+      <span
+        style={{
+          fontSize: '18px',
+        }}
+      >
+        初步排除网络异常
+      </span>
+    ),
+    color: 'pink',
+  },
+  {
+    time: '2019-05-14 18:34',
+    extra: '节点辅助说明信息',
+    dot: <IconAlertTriangle />,
+    content: '技术测试异常',
+    type: 'warning',
+  },
+  {
+    time: '2019-05-09 09:12',
+    extra: '节点辅助说明信息',
+    content: '网络异常正在修复',
+    dot: <IconAlertTriangle />,
+    type: 'success',
+  },
+];
+
+export const DataSource = () => (
+  <div
+    style={{
+      width: '400px',
+    }}
+  >
+    <Timeline mode="alternate" dataSource={data} />
+  </div>
+);
+
+DataSource.story = {
+  name: 'dataSource',
+};

package/timeline/_story/timeline.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Timeline from '../index';
+
+const stories = storiesOf('Timeline', module);
+
+stories.add('Timeline', () => (
+    <>
+        <Timeline mode='right'>
+            <Timeline.Item time='2019-07-14 10:35'>第一个节点内容</Timeline.Item>
+            <Timeline.Item time='2019-06-13 16:17'>第二个节点内容</Timeline.Item>
+            <Timeline.Item time='2019-05-14 18:34'>第三个节点内容</Timeline.Item>
+        </Timeline>
+    </>
+));

package/timeline/index.tsx

@@ -0,0 +1,96 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/timeline/timeline.scss';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/timeline/constants';
+import ConfigContext from '../configProvider/context';
+import Item, { TimelineItemProps } from './item';
+
+export { TimelineItemProps } from './item';
+
+export interface Data extends TimelineItemProps {
+    content: React.ReactNode;
+}
+
+export interface TimelineProps {
+    mode?: 'left' | 'right' | 'center' | 'alternate';
+    className?: string;
+    style?: React.CSSProperties;
+    dataSource?: Data[];
+}
+
+const prefixCls = cssClasses.PREFIX;
+
+class Timeline extends PureComponent<TimelineProps> {
+    static contextType = ConfigContext;
+    static Item = Item;
+    static propTypes = {
+        mode: PropTypes.oneOf(strings.MODE),
+        className: PropTypes.string,
+        style: PropTypes.object,
+        dataSource: PropTypes.array,
+    };
+    static defaultProps = {
+        mode: 'left',
+    };
+
+    getPosCls = (ele: React.ReactElement, idx: number) => {
+        const { mode } = this.props;
+        if (mode === 'alternate') {
+            if (ele.props.position) {
+                return `${prefixCls}-item-${ele.props.position}`;
+            }
+            return idx % 2 === 0 ? `${prefixCls}-item-left` : `${prefixCls}-item-right`;
+        }
+        if (mode === 'center') {
+            if (ele.props.position) {
+                return `${prefixCls}-item-${ele.props.position}`;
+            }
+            return `${prefixCls}-item-left`;
+        }
+        if (mode === 'left' || mode === 'right') {
+            return `${prefixCls}-item-${mode}`;
+        }
+        if (ele.props.position) {
+            return `${prefixCls}-item-${ele.props.position}`;
+        }
+        return '';
+    };
+
+    addClassName = (items: React.ReactNode) => React.Children.map(items, (ele, idx) => {
+        if (React.isValidElement(ele)) {
+            return React.cloneElement(ele, {
+                className: cls(
+                    ele.props.className,
+                    this.getPosCls(ele, idx)
+                ),
+            });
+        }
+        return ele;
+    });
+
+    render() {
+        const { children, className, style, mode, dataSource } = this.props;
+        const classString = cls(
+            prefixCls,
+            className,
+            { [`${prefixCls}-${mode}`]: mode }
+        );
+        let childrenList;
+        if (dataSource && dataSource.length) {
+            const items = dataSource.map(
+                (item, index) => <Item key={`timeline-item-${index}`} {...item}>{item.content}</Item>
+            );
+            childrenList = this.addClassName(items);
+        }
+        const items = childrenList || this.addClassName(children);
+
+        return (
+            <ul style={style} className={classString}>
+                {items}
+            </ul>
+        );
+    }
+}
+
+export default Timeline;

package/timeline/item.tsx

@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/timeline/constants';
+import '@douyinfe/semi-foundation/timeline/timeline.scss';
+
+export interface TimelineItemProps {
+    color?: string;
+    time?: React.ReactNode;
+    type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
+    dot?: React.ReactNode;
+    extra?: React.ReactNode;
+    position?: 'left' | 'right';
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+const prefixCls = cssClasses.ITEM;
+
+export default class Item extends PureComponent<TimelineItemProps> {
+    static propTypes = {
+        color: PropTypes.string,
+        time: PropTypes.node,
+        type: PropTypes.oneOf(strings.ITEM_TYPE),
+        dot: PropTypes.node,
+        extra: PropTypes.node,
+        position: PropTypes.oneOf(strings.ITEM_POS),
+        className: PropTypes.string,
+        style: PropTypes.object,
+    };
+
+    static defaultProps = {
+        type: 'default',
+        time: '',
+    };
+
+    render() {
+        const {
+            className,
+            color,
+            children,
+            dot,
+            type,
+            style,
+            time,
+            extra
+        } = this.props;
+
+        const itemCls = cls(prefixCls,
+            className
+        );
+
+        const dotCls = cls({
+            [`${prefixCls}-head`]: true,
+            [`${prefixCls}-head-custom`]: dot,
+            [`${prefixCls}-head-${type}`]: type,
+        });
+        const dotStyle = color ? { style: { backgroundColor: color } } : null;
+        return (
+            <li className={itemCls} style={style}>
+                <div className={`${prefixCls}-tail`} />
+                <div
+                    className={dotCls}
+                    {...dotStyle}
+                >
+                    {dot}
+                </div>
+                <div className={`${prefixCls}-content`}>
+                    {children}
+                    {extra && <div className={`${prefixCls}-content-extra`}>{extra}</div>}
+                    {time && <div className={`${prefixCls}-content-time`}>{time}</div>}
+                </div>
+            </li>
+        );
+    }
+}

package/toast/ToastTransition.tsx

@@ -0,0 +1,43 @@
+// @ts-ignore  Currently there is no types for semi-animation-react
+import { Transition } from '@douyinfe/semi-animation-react';
+import { Motion } from '../_base/base';
+import React, { CSSProperties } from 'react';
+
+
+export interface ToastTransitionProps{
+    motion?: Motion<ToastTransitionProps>;
+    children?: React.ReactChildren | React.JSXElementConstructor<any>;
+}
+
+
+export default function ToastTransition(props: ToastTransitionProps = {}) {
+    let { motion = {} } = props;
+
+    if (typeof motion === 'function') {
+        motion = motion(props);
+    } else if (!motion || typeof motion !== 'object') {
+        motion = {};
+    }
+
+    return (
+        <Transition
+            // onFrame={style => console.log(style)}
+            from={{ translateY: -100, opacity: 0 }}
+            enter={{ translateY: { val: 0, tension: 560, friction: 32 }, opacity: { val: 1, duration: 300 } } as any}
+            leave={{
+                translateY: { val: -100, easing: 'easeOutCubic', duration: 300 },
+                opacity: { val: 0, duration: 200 },
+            } as any}
+            {...motion}
+        >
+            {typeof props.children === 'function' ?
+                ({ translateY, opacity }: { translateY: string | number; opacity: string | number }) =>
+                    (props.children as
+                        (styles: { transform: CSSProperties['transform']; opacity: string | number }) => any)({
+                        transform: `translateY(${translateY}%)`,
+                        opacity,
+                    }) :
+                props.children}
+        </Transition>
+    );
+}