@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/backtop/_story/backtop.stories.js

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import BackTop from '../index';
-import { IconArrowUp } from '@douyinfe/semi-icons';
-
-export default {
-  title: 'BackTop',
-}
-
-export const Default = () => (
-  <div>
-    <div style={{ height: 1600, width: 300, background: 'grey' }}></div>
-    <BackTop visibilityHeight={-1} />
-  </div>
-);
-
-export const Custom = () => (
-  <div>
-    <div
-      style={{
-        height: 1600,
-        width: 300,
-        background: 'grey',
-      }}
-    ></div>
-    <BackTop
-      style={{
-        height: 40,
-        width: 40,
-        backgroundColor: '#ddd',
-        paddingTop: 12,
-      }}
-    >
-      <IconArrowUp />
-    </BackTop>
-  </div>
-);

package/backtop/_story/backtop.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import BackTop from '../index';
-
-const stories = storiesOf('Backtop', module);
-
-class Demo extends React.Component {
-    target() {
-        return document.querySelector('.scroll-wrapper');
-    }
-
-    render() {
-        const scStyle = {
-            overflow: 'scroll',
-            height: '200px'
-        }
-        return (
-            <div className='scroll-wrapper' style={scStyle}>
-                <div style={{height:400, paddingTop: 200}}>
-                    <span>Scroll down to see the bottom-right gray button.</span>
-                    <BackTop target={this.target} />
-                </div>
-            </div>
-        );
-    }
-}
-
-stories.add('BackTop', () => (
-    <Demo />
-));

package/backtop/index.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import BaseComponent from '../_base/baseComponent';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/backtop/constants';
-import BackTopFoundation, { BackTopAdapter } from '@douyinfe/semi-foundation/backtop/foundation';
-
-import '@douyinfe/semi-foundation/backtop/backtop.scss';
-import IconButton from '../iconButton';
-import { IconChevronUp } from '@douyinfe/semi-icons';
-
-const prefixCls = cssClasses.PREFIX;
-
-const getDefaultTarget = () => window;
-
-export interface BackTopProps {
-    target?: () => any;
-    visibilityHeight?: number;
-    duration?: number;
-    onClick?: (e: React.MouseEvent) => void;
-    style?: React.CSSProperties;
-    className?: string;
-    children?: React.ReactNode | undefined;
-}
-
-export interface BackTopState {
-    visible?: boolean;
-}
-
-
-export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
-    static defaultProps = {
-        visibilityHeight: 400,
-        target: getDefaultTarget,
-        duration: 450,
-    };
-
-    static propTypes = {
-        target: PropTypes.func,
-        visibilityHeight: PropTypes.number,
-        duration: PropTypes.number,
-        onClick: PropTypes.func,
-        style: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    constructor(props: BackTopProps) {
-        super(props);
-        this.state = {
-            visible: false
-        };
-        this.foundation = new BackTopFoundation(this.adapter);
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    get adapter(): BackTopAdapter {
-        return {
-            ...super.adapter,
-            updateVisible: (visible: boolean) => {
-                this.setState({ visible });
-            },
-            notifyClick: (e: React.MouseEvent) => {
-                this.props.onClick && this.props.onClick(e);
-            },
-            targetIsWindow: (target: any) => target === window,
-            isWindowUndefined: () => window === undefined,
-            targetScrollToTop: (targetNode: any, scrollTop: number) => {
-                if (targetNode === window) {
-                    document.body.scrollTop = scrollTop;
-                    document.documentElement.scrollTop = scrollTop;
-                } else {
-                    targetNode.scrollTop = scrollTop;
-                }
-            }
-        };
-    }
-
-    handleClick(e: React.MouseEvent<HTMLDivElement>) {
-        this.foundation.onClick(e);
-    }
-
-    renderDefault() {
-        return (
-            <IconButton theme="light" icon={<IconChevronUp />} />
-        );
-    }
-
-    render() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { children, className, style, onClick, visibilityHeight, target, ...others } = this.props;
-        const { visible } = this.state;
-        const preCls = cls(
-            prefixCls,
-            className
-        );
-        const backtopBtn = children ? children : this.renderDefault();
-        const content = visible ? (
-            <div
-                {...others} 
-                className={preCls} 
-                style={style} 
-                onClick={e => this.handleClick(e)} 
-                x-semi-prop="children"
-            >
-                {backtopBtn}
-            </div>
-        ) : null;
-        return content;
-    }
-}

package/badge/__test__/badge.test.js

@@ -1,123 +0,0 @@
-import Badge from '../index';
-import Avatar from '../../avatar/index';
-import ConfigProvider from '../../configProvider';
-
-function getBadge(props) {
-    if (!props.optionList && !props.children) {
-        props.children = <Avatar color='blue'>Semi</Avatar>
-    }
-
-    return mount(<Badge {...props} />);
-}
-
-
-describe('badge', () => {
-    it('badge with custom className & style', () => {
-        let props = {
-            className: 'test',
-            style: {
-                color: 'red'
-            }
-        }
-        let badge = getBadge(props);
-        expect(badge.hasClass('test')).toEqual(true);
-        expect(badge.find('span.test')).toHaveStyle('color', 'red');
-        badge.unmount();
-    });
-
-    it('badge children', () => {
-        let children = (<div>semi design</div>)
-        let props = {
-            children
-        };
-        let badge = getBadge(props);
-        expect(badge.contains(children)).toEqual(true);
-    });
- 
-    it('badge count', () => {
-        let props = {
-            count: 5
-        };
-        let badge = getBadge(props);
-        expect(badge.find('.semi-badge-count').text()).toEqual("5");
-        expect(badge.exists('.semi-badge-dot')).toEqual(false);
-        let stringProps = {
-            count: 'semi'
-        }
-        let stringBadge = getBadge(stringProps);
-        expect(stringBadge.find('.semi-badge-count').text()).toEqual("semi");
-        expect(stringBadge.exists('.semi-badge-dot')).toEqual(false);
-    });
-
-    it('badge dot', () => {
-        let props = {
-            dot: true
-        };
-        let badge = getBadge(props);
-        expect(badge.exists('.semi-badge-dot')).toEqual(true);
-        expect(badge.exists('.semi-badge-count')).toEqual(false);
-    });
-
-    it('badge overflowCount', () => {
-        let props = {
-            count: 99,
-            overflowCount: 5
-        };
-        let badge = getBadge(props);
-        expect(badge.find('.semi-badge-count').text()).toEqual('5+');
-    });
-
-    it('badge type & theme', () => {
-        let types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];
-        let themes = ['solid', 'light', 'inverted'];
-        let props = {
-            type: types[0],
-            theme: themes[0]
-        }
-        let badge = getBadge(props)
-        expect(badge.exists(`.semi-badge-${types[0]}`)).toEqual(true);
-        badge.setProps({ type: types[1] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${types[1]}`)).toEqual(true);
-        badge.setProps({ type: types[2] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${types[2]}`)).toEqual(true);
-        badge.setProps({ type: types[3] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${types[3]}`)).toEqual(true);
-        badge.setProps({ type: types[4] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${types[4]}`)).toEqual(true);
-        badge.setProps({ theme: themes[1] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${themes[1]}`)).toEqual(true);
-        badge.setProps({ theme: themes[2] });
-        badge.update();
-        expect(badge.exists(`.semi-badge-${themes[2]}`)).toEqual(true);
-    });
-
-    it('badge position', () => {
-        let leftTop = { position: 'leftTop' };
-        let leftBottom = { position: 'leftBottom' };
-        let rightTop = { } //rightTop is default position
-        let rightBottom = { position: 'rightBottom' };
-        let leftTopBadge = getBadge(leftTop);
-        let leftBottomBadge = getBadge(leftBottom);
-        let rightTopBadge = getBadge(rightTop);
-        let rightBottomBadge = getBadge(rightBottom);
-        expect(leftTopBadge.exists('.semi-badge-leftTop')).toEqual(true);
-        expect(leftBottomBadge.exists('.semi-badge-leftBottom')).toEqual(true);
-        expect(rightTopBadge.exists('.semi-badge-rightTop')).toEqual(true);
-        expect(rightBottomBadge.exists('.semi-badge-rightBottom')).toEqual(true);
-    });
-
-    it('badge in rtl mode', ()=>{
-        let rtlWrapper = mount(
-            <ConfigProvider direction='rtl'>
-                <Badge count={5}>Semi</Badge>
-            </ConfigProvider>
-        )
-        // when in rtl mode, default position is 'rightTop'
-        expect(rtlWrapper.exists('.semi-badge-leftTop')).toEqual(true);
-    })
-});

package/badge/_story/Demo.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Badge from '../index';
-
-const Demo = () => {
-    return (
-        <div>
-            <Badge type="primary" position="leftBottom" dot></Badge>
-            <br/>
-            <Badge type="danger" count={ 12 }>
-                <div>132456</div>
-            </Badge>
-        </div>
-    )
-}
-
-export default Demo

package/badge/_story/badge.stories.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { Avatar, Badge } from '../../index';
-import { IconLock } from '@douyinfe/semi-icons';
-
-export default {
-  title: 'Badge',
-}
-
-const style = {
-  width: '42px',
-  height: '42px',
-  borderRadius: '4px',
-  background: '#eee',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-};
-
-export const Default = () => (
-  <div>
-    <Badge count={5}>
-      <a style={style}></a>
-    </Badge>
-    <Badge dot>
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} />
-    <Badge dot />
-  </div>
-);
-
-export const MaxCount = () => (
-  <div>
-    <Badge count={99}>
-      <a style={style}></a>
-    </Badge>
-    <Badge count={100}>
-      <a style={style}></a>
-    </Badge>
-    <Badge count={99} overflowCount={10}>
-      <a style={style}></a>
-    </Badge>
-    <Badge count={1000} overflowCount={999}>
-      <a style={style}></a>
-    </Badge>
-  </div>
-);
-
-export const Type = () => (
-  <div>
-    <Badge count={5} type="primary">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} type="secondary">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} type="tertiary">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} type="warning">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} type="danger">
-      <a style={style}></a>
-    </Badge>
-    <Badge dot type="primary">
-      <a style={style}></a>
-    </Badge>
-  </div>
-);
-
-export const Theme = () => (
-  <div>
-    <Badge count={5} theme="solid">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} theme="light">
-      <a style={style}></a>
-    </Badge>
-    <Badge count={5} theme="inverted">
-      <a style={style}></a>
-    </Badge>
-    <Badge dot theme="solid">
-      <a style={style}></a>
-    </Badge>
-    <Badge dot theme="light">
-      <a style={style}></a>
-    </Badge>
-    <Badge dot theme="inverted">
-      <a style={style}></a>
-    </Badge>
-  </div>
-);
-
-export const AvatarBadge = () => {
-  const style = {
-      width: '42px',
-      height: '42px',
-      borderRadius: '4px',
-  };
-  return (
-      <div>
-          <Badge count={5}>
-              <Avatar color='blue' shape='square' style={style}>BM</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge dot>
-              <Avatar color='blue' shape='square' style={style}>YL</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
-              <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge count='NEW' >
-              <Avatar color='light-blue' shape='square' style={style}>WF</Avatar>
-          </Badge>
-      </div>
-  );  
-};
-AvatarBadge.storyName = '头像 badge';

package/badge/_story/badge.stories.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import Demo from './Demo';
-
-const stories = storiesOf('Badge', module);
-
-stories.add('Badge', () => <Demo />);

package/badge/index.tsx

@@ -1,91 +0,0 @@
-import React, { PureComponent } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { isNumber, isString, noop } from 'lodash';
-import ConfigContext, { ContextValue } from '../configProvider/context';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/badge/constants';
-import '@douyinfe/semi-foundation/badge/badge.scss';
-
-const prefixCls = cssClasses.PREFIX;
-
-export type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning';
-export type BadgeTheme = 'solid' | 'light' | 'inverted';
-export type BadgePosition = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
-
-export interface BadgeProps {
-    count?: React.ReactNode;
-    dot?: boolean;
-    type?: BadgeType;
-    theme?: BadgeTheme;
-    position?: BadgePosition;
-    overflowCount?: number;
-    style?: React.CSSProperties;
-    className?: string;
-    onMouseEnter?: (e: React.MouseEvent) => any;
-    onMouseLeave?: (e: React.MouseEvent) => any;
-    onClick?: (e: React.MouseEvent) => any;
-    children?: React.ReactNode;
-}
-
-export default class Badge extends PureComponent<BadgeProps> {
-    static contextType = ConfigContext;
-    static propTypes = {
-        count: PropTypes.node,
-        dot: PropTypes.bool,
-        type: PropTypes.oneOf(strings.TYPE_SET),
-        theme: PropTypes.oneOf(strings.THEME_SET),
-        position: PropTypes.oneOf(strings.POS_SET),
-        overflowCount: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        children: PropTypes.node,
-        onClick: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-    };
-
-    static defaultProps = {
-        dot: false,
-        type: 'primary',
-        theme: 'solid',
-        className: '',
-        onClick: () => noop,
-        onMouseEnter: () => noop,
-        onMouseLeave: () => noop,
-    };
-
-    context: ContextValue;
-
-    render() {
-        const { direction } = this.context;
-        // DefaultPosition here, static can't get this
-        const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
-        // eslint-disable-next-line max-len
-        const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
-        const custom = count && !(isNumber(count) || isString(count));
-        const showBadge = count !== null && typeof count !== 'undefined';
-        const wrapper = cls(className, {
-            [`${prefixCls}-${type}`]: !custom,
-            [`${prefixCls}-${theme}`]: !custom,
-            [`${prefixCls}-${position}`]: Boolean(position) && Boolean(children),
-            [`${prefixCls}-block`]: !children,
-            [`${prefixCls}-dot`]: dot,
-            [`${prefixCls}-count`]: !dot && !custom && showBadge,
-            [`${prefixCls}-custom`]: custom,
-        });
-        let content;
-        if (isNumber(count)) {
-            content = overflowCount && overflowCount < count ? `${overflowCount}+` : `${count}`;
-        } else {
-            content = count;
-        }
-        return (
-            <span className={prefixCls} {...rest}>
-                {children}
-                <span className={wrapper} style={style} x-semi-prop="count">
-                    {dot ? null : content}
-                </span>
-            </span>
-        );
-    }
-}

package/banner/__test__/banner.test.js

@@ -1,58 +0,0 @@
-import { Banner } from '../../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-
-// function render(props) {
-//     return mount(
-//         <Banner
-//             {...props}
-//         />,
-//         {
-//             attachTo: document.getElementById('container')
-//         }
-//     );
-// }
-
-
-describe('Banner', () => {
-
-    // beforeEach(() => {
-    //     // Avoid `attachTo: document.body` Warning
-    //     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);
-    //     }
-    // });
-
-    it('different type banner', () => {
-        const defaultBanner = mount(<Banner />);
-        const dangerBanner = mount(<Banner type='danger' />);
-        const successBanner = mount(<Banner type='success' />);
-        const warningBanner = mount(<Banner type='warning' />);
-        expect(dangerBanner.exists(`.${BASE_CLASS_PREFIX}-banner-danger`)).toEqual(true);
-        expect(defaultBanner.exists(`.${BASE_CLASS_PREFIX}-banner`)).toEqual(true);
-        expect(successBanner.exists(`.${BASE_CLASS_PREFIX}-banner-success`)).toEqual(true);
-        expect(warningBanner.exists(`.${BASE_CLASS_PREFIX}-banner-warning`)).toEqual(true);
-    });
-
-    it('custom className & style', () => {
-        const wrapper = mount(<Banner className='test' style={{ color: 'red' }} />, { attachTo: document.getElementById('container') });
-        expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
-    });
-
-    it('call onClose', () => {
-        const onClose = () => { };
-        let spyOnClose = sinon.spy(onClose);
-        const wrapper = mount(<Banner onClose={spyOnClose} />);
-        wrapper.find(`.${BASE_CLASS_PREFIX}-button`).simulate('click', { target: { value: 'test' }});
-        expect(spyOnClose.calledOnce).toBe(true);
-        // 验证回调参数是否正确
-        expect(spyOnClose.getCall(0).args[0].target.value).toEqual('test');
-    });
-});

package/banner/_story/Demo.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import Banner from '../index';
-
-const Demo = () => {
-    return (
-        <div>
-            <div id="banner-target"></div>
-            <Banner type="warning"> banner-warning </Banner>
-            <Banner type="danger" onClose={ () => { alert('close'); } }> banner-close-callBack </Banner>
-        </div>
-    );
-};
-
-export default Demo;