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

package/button/_story/button.stories.js

@@ -0,0 +1,293 @@
+import React, { useState } from 'react';
+
+import withPropsCombinations from 'react-storybook-addon-props-combinations';
+import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/button/constants';
+import Button from '../index';
+import ButtonGroup from '../buttonGroup';
+import SplitButtonGroup from '../splitButtonGroup';
+import Dropdown from '../../dropdown';
+import { Tooltip, Switch } from '@douyinfe/semi-ui';
+import {
+  IconTick,
+  IconEdit,
+  IconTwitter,
+  IconUser,
+  IconCopy,
+  IconSearch,
+  IconPlay,
+} from '@douyinfe/semi-icons';
+import Collapse from '../../collapse';
+
+export default {
+  title: 'Button',
+}
+
+export const Primary = () => <Button type="primary">UI semi</Button>;
+
+export const Danger = () => <Button type="danger">hello button</Button>;
+
+export const Warning = () => <Button type="warning">hello button</Button>;
+
+export const WithIcon = () => (
+  <>
+    <Button icon={<IconTick />}>hello button</Button>
+    <br />
+    <Button icon={<IconEdit />} noHorizontalPadding={false} ghost={false}>
+      Edit me
+    </Button>
+    <Button icon={<IconUser />} />
+  </>
+);
+
+export const CombinationShow = withPropsCombinations(
+  Button,
+  {
+    disabled: [false, true],
+    children: ['hello button'],
+    size: strings.sizes,
+    type: strings.btnTypes,
+    theme: strings.themes, // block: [false, true],
+    // ghost: [false, true],
+    // light: [false, true],
+  },
+  {
+    showSource: false,
+  }
+);
+
+export const ButtonGroupDemo = () => (
+  <div>
+    <ButtonGroup disabled>
+      <Button>复制</Button>
+      <Button type="primary">查找</Button>
+      <Button type="danger">粘贴</Button>
+    </ButtonGroup>
+    <br />
+    <ButtonGroup>
+      <Button icon={<IconCopy />} theme={'solid'} />
+      <Button icon={<IconSearch />} theme={'solid'} />
+      <Button icon={<IconPlay />} theme={'solid'} />
+    </ButtonGroup>
+    <br />
+
+    <ButtonGroup size={'large'}>
+      <Button icon={<IconCopy />} theme={'solid'} />
+      <Button icon={<IconSearch />} theme={'solid'} />
+      <Button icon={<IconPlay />} theme={'solid'} />
+    </ButtonGroup>
+    <br />
+
+    <ButtonGroup size={'small'}>
+      <Button icon={<IconCopy />} theme={'solid'} />
+      <Button icon={<IconSearch />} theme={'solid'} />
+      <Button icon={<IconPlay />} theme={'solid'} />
+    </ButtonGroup>
+    <br />
+
+    <ButtonGroup>
+      <Button icon={<IconCopy />} theme={'solid'}>
+        拷贝
+      </Button>
+      <Button icon={<IconSearch />} theme={'solid'}>
+        搜索
+      </Button>
+      <Button icon={<IconPlay />} theme={'solid'}>
+        播放
+      </Button>
+    </ButtonGroup>
+    <br />
+
+    <ButtonGroup size={'large'}>
+      <Button icon={<IconCopy />} theme={'solid'}>
+        拷贝
+      </Button>
+      <Button icon={<IconSearch />} theme={'solid'}>
+        搜索
+      </Button>
+      <Button icon={<IconPlay />} theme={'solid'}>
+        播放
+      </Button>
+    </ButtonGroup>
+    <br />
+
+    <ButtonGroup size={'small'}>
+      <Button icon={<IconCopy />} theme={'solid'}>
+        拷贝
+      </Button>
+      <Button icon={<IconSearch />} theme={'solid'}>
+        搜索
+      </Button>
+      <Button icon={<IconPlay />} theme={'solid'}>
+        播放
+      </Button>
+    </ButtonGroup>
+    <br />
+    <div>ButtonGroup children 不是合法元素的情况:</div>
+    <ButtonGroup>
+      {false}
+      {123}
+      {null}
+      {undefined}
+      text
+      <span>span</span>
+      {true && <Button>拷贝</Button>}
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
+  </div>
+);
+
+export function Loading() {
+    const [loading, setLoading] = useState(false);
+    return (
+      <div
+        style={{
+          maxWidth: 400,
+          maxHeight: 300,
+          padding: 50,
+        }}
+      >
+        <div>
+          <Switch checked={loading} onChange={loading => setLoading(loading)} />
+        </div>
+        <Button loading={loading}>保存</Button>
+        <Button loading={loading} type="danger" theme="solid">
+          删除
+        </Button>
+        <Button loading={loading} type="danger" theme="solid" disabled>
+          删除
+        </Button>
+        <Button loading={loading} type="danger" theme="solid" block>
+          删除
+        </Button>
+        <Tooltip content={loading ? '正在保存' : '保存'}>
+          <Button loading={loading}>保存</Button>
+        </Tooltip>
+        <Button icon={<IconEdit />} loading={loading} />
+        <Tooltip content={loading ? '载入中' : '编辑'}>
+          <Button icon={<IconEdit />} loading={loading} />
+        </Tooltip>
+        <Tooltip content={loading ? '载入中' : '编辑'}>
+          <Button icon={<IconEdit />} loading={loading} theme="solid" />
+        </Tooltip>
+        <Tooltip content={loading ? '载入中' : '编辑'}>
+          <Button icon={<IconEdit />} loading={loading} theme="solid" type="danger" />
+        </Tooltip>
+        <Tooltip content={loading ? '载入中' : '编辑'}>
+          <Button icon={<IconEdit />} loading={loading} theme="solid" type="warning" disabled />
+        </Tooltip>
+      </div>
+    );
+};
+
+const menu = [
+  {
+    node: 'title',
+    name: '标题一',
+  },
+  {
+    node: 'item',
+    name: '编辑项目',
+    onClick: () => console.log('编辑项目点击'),
+  },
+  {
+    node: 'item',
+    name: '重置项目',
+    type: 'secondary',
+  },
+  {
+    node: 'divider',
+  },
+  {
+    node: 'item',
+    name: '从项目创建模版',
+    type: 'tertiary',
+  },
+  {
+    node: 'item',
+    name: '复制项目',
+    type: 'warning',
+  },
+  {
+    node: 'divider',
+  },
+  {
+    node: 'item',
+    name: '删除项目',
+    type: 'danger',
+  },
+];
+const content = '批量通过';
+
+export const SplitButton = () => (
+  <>
+    <p>基础</p>
+    <SplitButtonGroup>
+      <Button theme="solid" type="primary">
+        前面
+      </Button>
+      <Button theme="solid" type="primary">
+        后面
+      </Button>
+    </SplitButtonGroup>
+    <br />
+    <SplitButtonGroup>
+      <Button theme="solid" type="primary">
+        One
+      </Button>
+    </SplitButtonGroup>
+    <br />
+    <SplitButtonGroup>
+      <Button size="small" theme="solid" type="primary">
+        前面
+      </Button>
+      <Button size="small" theme="solid" type="primary">
+        中间
+      </Button>
+      <Button size="small" theme="solid" type="primary">
+        后面
+      </Button>
+      <Dropdown trigger="click" menu={menu} position="bottomRight">
+        <Button size="small" theme="solid" type="primary" icon={<IconTwitter />}></Button>
+      </Dropdown>
+    </SplitButtonGroup>
+  </>
+);
+
+export const StopPropagationWhenDisabled = () => (
+  <>
+    <Collapse>
+      <Collapse.Panel
+        header={
+          <>
+            title<Button>按钮</Button>
+          </>
+        }
+        itemKey="1"
+      >
+        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+      </Collapse.Panel>
+      <Collapse.Panel
+        header={
+          <>
+            title<Button disabled>按钮</Button>
+          </>
+        }
+        itemKey="2"
+      >
+        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+      </Collapse.Panel>
+    </Collapse>
+    <div onClick={() => console.log('div')}>
+      <span>正常冒泡</span>
+      <Button onClick={() => console.log('button')}>按钮</Button>
+    </div>
+    <div onClick={() => console.log('div')}>
+      <span>禁用 Button 后，阻止冒泡</span>
+      <Button disabled onClick={() => console.log('button')}>
+        按钮
+      </Button>
+    </div>
+  </>
+);

package/button/_story/button.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Button from '../index';
+import Demo from './Demo';
+
+const stories = storiesOf('Button', module);
+
+stories.add('base', () => <Demo />);

package/button/buttonGroup.tsx

@@ -0,0 +1,49 @@
+import React, { isValidElement, cloneElement } from 'react';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
+import { Type, Size } from './Button';
+
+import '@douyinfe/semi-foundation/button/button.scss';
+
+export type Theme = 'solid' | 'borderless' | 'light';
+
+export interface ButtonGroupProps extends BaseProps {
+    disabled?: boolean;
+    type?: Type;
+    size?: Size;
+    theme?: Theme;
+}
+
+const prefixCls = cssClasses.PREFIX;
+const btnSizes = strings.sizes;
+
+export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
+    static propTypes = {
+        children: PropTypes.node,
+        disabled: PropTypes.bool,
+        type: PropTypes.string,
+        size: PropTypes.oneOf(btnSizes),
+        theme: PropTypes.oneOf(strings.themes),
+    };
+
+    static defaultProps = {
+        size: 'default',
+        type: 'primary',
+        theme: 'light',
+    };
+
+    render() {
+        const { children, disabled, size, type, ...rest } = this.props;
+        let inner;
+
+        if (children) {
+            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+                isValidElement(itm)
+                    ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
+                    : itm
+            ));
+        }
+        return <div className={`${prefixCls}-group`}>{inner}</div>;
+    }
+}

package/button/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import BaseButton, { ButtonProps as BaseButtonProps } from './Button';
+import IconButton, { IconButtonProps } from '../iconButton';
+
+export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
+
+export { HorizontalPaddingType } from '../iconButton';
+
+export { ButtonGroupProps } from './buttonGroup';
+
+export { SplitButtonGroupProps } from './splitButtonGroup';
+
+// eslint-disable-next-line 
+export interface ButtonProps extends IconButtonProps, BaseButtonProps {} // TODO check
+class Button extends React.PureComponent<ButtonProps> {
+    static propTypes = {
+        ...BaseButton.propTypes,
+        ...IconButton.propTypes,
+    };
+    constructor(props = {}) {
+        super(props);
+    }
+    render() {
+        const props = { ...this.props };
+        const hasIcon = Boolean(props.icon); 
+        const isLoading = Boolean(props.loading);
+        const isDisabled = Boolean(props.disabled);
+
+        if (hasIcon || (isLoading && !isDisabled)) {
+            return <IconButton {...props} />;
+        } else {
+            return <BaseButton {...props} />;
+        }
+    }
+}
+
+export default Button;

package/button/splitButtonGroup.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/button/constants';
+import '@douyinfe/semi-foundation/button/button.scss';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+
+const prefixCls = cssClasses.PREFIX;
+
+// eslint-disable-next-line
+export interface SplitButtonGroupProps extends BaseProps {}
+
+export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
+    static propTypes = {
+        style: PropTypes.object,
+        className: PropTypes.string,
+    };
+    render() {
+        const { children, style, className } = this.props;
+        const cls = classNames(`${prefixCls}-split`, className);
+        return (
+            <div className={cls} style={style}>
+                {children}
+            </div>
+        );
+    }
+}

package/calendar/__test__/calendar.test.js

@@ -0,0 +1,163 @@
+import Calendar from '../index'
+import { mount, shallow } from 'enzyme';
+import WeekCalendar from '../weekCalendar'
+import DayCalendar from '../dayCalendar';
+import MonthCalendar from '../monthCalendar';
+import RangeCalendar from '../rangeCalendar';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+
+describe('Calendar', () => {
+    it('prop mode', () => {
+        let calendar = mount(<Calendar></Calendar>)
+        expect(calendar.find(WeekCalendar)).toHaveLength(1)
+
+
+        calendar = mount(<Calendar mode='day'></Calendar>)
+        expect(calendar.find(DayCalendar)).toHaveLength(1)
+
+        calendar = mount(<Calendar mode='month'></Calendar>)
+        expect(calendar.find(MonthCalendar)).toHaveLength(1)
+
+        calendar = mount(<Calendar mode='range' range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]}></Calendar>)
+        expect(calendar.find(RangeCalendar)).toHaveLength(1)
+    })
+
+    it('prop showCurrTime', () => {
+        let wrapper = mount(<Calendar showCurrTime={false} mode='week' />)
+        expect(wrapper.find('.semi-calendar-grid-curr-line')).toHaveLength(0)
+
+        wrapper = mount(<Calendar showCurrTime={false} mode='day' />)
+        expect(wrapper.find('.semi-calendar-grid-curr-line')).toHaveLength(0)
+
+        wrapper = mount(<Calendar showCurrTime mode='week' />)
+        expect(wrapper.find('.semi-calendar-grid-curr-line')).toHaveLength(1)
+
+
+        wrapper = mount(<Calendar showCurrTime mode='day' />)
+        expect(wrapper.find('.semi-calendar-grid-curr-line')).toHaveLength(1)
+    })
+
+    it('prop onClick', () => {
+        const clickHandler = jest.fn();
+        let weekWrapper = mount(<Calendar onClick={clickHandler} mode='week'  />)
+        expect(clickHandler).toHaveBeenCalledTimes(0)
+        weekWrapper.find('.semi-calendar-grid-skeleton-row-line').at(0).simulate('click')
+        expect(clickHandler).toHaveBeenCalledTimes(1)
+
+        const clickHandler2 = jest.fn();
+        let monthWrapper = mount(<Calendar onClick={clickHandler2} mode='month'  />)
+        expect(clickHandler2).toHaveBeenCalledTimes(0)
+        monthWrapper.find('.semi-calendar-month-skeleton li').at(0).simulate('click')
+        expect(clickHandler2).toHaveBeenCalledTimes(1)
+
+
+    })
+    
+    it('test dateGridRender', ()=>{
+        const importantDateStyle = {
+            position: 'absolute',
+            left: '0',
+            right: '0',
+            top: '0',
+            bottom: '0',
+            backgroundColor: 'red',
+        };
+        const displayValue = new Date(2019, 6, 23, 8, 32, 0);
+        const importDates = [new Date(2019, 6, 2)];
+        const dateRender = dateString => {
+            if (importDates.filter(date => date.toString() === dateString).length) {
+                return <div style={importantDateStyle}>hello</div>;
+            }
+            return null;
+        };
+        let calendar = mount(<Calendar displayValue={displayValue} dateGridRender={dateRender} mode='month'></Calendar>)
+        // test the date 2019, 7, 2 whether renders an extra div
+        expect(calendar.find(`.${BASE_CLASS_PREFIX}-calendar-month-same`).at(1).find('div').text()).toBe('hello')
+    })
+
+    it('test event render',()=>{
+        const allDayStyle = {
+            borderRadius: '3px',
+            boxSizing: 'border-box',
+            border: 'var(--color-bg-1) 1px solid',
+            padding: '2px 4px',
+            backgroundColor: 'var(--color-primary-light-active)',
+            height: '100%',
+            overflow: 'hidden',
+        };
+        const events = [
+            {
+                key: '0',
+                start: new Date(2019, 5, 25, 14, 45, 0),
+                children: <div className="eventDay" style={allDayStyle}>6月25日 14:45</div>,
+            },
+            {
+                key: '1',
+                start: new Date(2019, 6, 18, 10, 0, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月18日 10:00</div>,
+            },
+            {
+                key: '2',
+                start: new Date(2019, 6, 19, 20, 0, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月19日 20:00</div>,
+            },
+            {
+                key: '3',
+                start: new Date(2019, 6, 21, 6, 0, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月21日 6:00</div>,
+            },
+            {
+                key: '4',
+                allDay: true,
+                start: new Date(2019, 6, 22, 8, 0, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月22日 全天</div>,
+            },
+            {
+                key: '5',
+                start: new Date(2019, 6, 23, 9, 0, 0),
+                allDay: true,
+                children: <div className="eventDay" >7月23日 全天</div>,
+            },
+            {
+                key: '6',
+                start: new Date(2019, 6, 24, 8, 32, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月24日 8:32</div>,
+            },
+            {
+                key: '7',
+                start: new Date(2019, 6, 25, 8, 32, 0),
+                end: new Date(2019, 6, 26, 8, 32, 0),
+                children: <div className="eventDay" style={allDayStyle}>7月25日 8:32 - 7月26日 8:32</div>,
+            }
+
+        ];
+        
+        let monthCalendar = mount(<Calendar
+                    height={400}
+                    mode={'month'}
+                    displayValue={new Date(2019, 6, 23, 8, 32, 0)}
+                    events={events}
+                ></Calendar>)
+        const eventInJuly = events.filter(event=>{
+            return event.start.getMonth() === 6
+        })
+        // test whether july's event rendered
+        expect(monthCalendar.find(`.eventDay`).length).toBe(eventInJuly.length)
+
+        
+        let dailyCalendar = mount(<Calendar
+            height={400}
+            mode={'day'}
+            displayValue={new Date(2019, 6, 23)}
+            events={events}
+        ></Calendar>)
+
+        const eventOnJuly23 = events.filter(event=>{
+            return event.start.getMonth() === 6 && event.start.getDate() === 23
+        })
+        // test whether 07/23's event rendered
+        expect(dailyCalendar.find(`.eventDay`).length).toBe(eventOnJuly23.length)
+
+    })
+})

package/calendar/_story/Demo.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Calendar from '../index';
+
+const Demo = () => {
+    return (
+        <div>
+            <Calendar
+                height="1200"
+                onClick={(ev: any) => {
+                    console.log(ev);
+                }}
+                showCurrTime
+                markWeekend>
+
+            </Calendar>
+        </div>
+    )
+}
+
+export default Demo