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

package/sideSheet/_story/sideSheet.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import SideSheet from '../index';
+import Button from '../../button';
+
+const stories = storiesOf('SideSheet', module);
+
+interface IProps {
+    [x:string]: any;
+}
+interface IState {
+    visible: boolean;
+}
+class Demo extends React.Component<IProps, IState> {
+    constructor(props:any) {
+      super(props);
+      this.state = { visible: false};
+    }
+    show() {
+      this.setState({
+        visible: true
+      });
+    }
+    handleCancel() {  
+      this.setState({
+        visible: false
+      });
+    }
+    render() {
+        const { visible } = this.state;
+      return (
+        <>
+          <Button onClick={() => this.show()}>Open SideSheet</Button>
+          <SideSheet
+            title="滑动侧边栏" 
+            visible={visible} 
+            onCancel={() => this.handleCancel()}
+          >
+            <p>This is the content of a basic sidesheet.</p>
+            <p>Here is more content...</p>
+          </SideSheet>
+        </>
+      );
+    }
+  }
+
+stories.add('SideSheet', () => (<Demo />
+));

package/sideSheet/index.tsx

@@ -0,0 +1,268 @@
+/* eslint-disable no-nested-ternary */
+import React, { CSSProperties } from 'react';
+import BaseComponent from '../_base/baseComponent';
+import PropTypes from 'prop-types';
+import Portal from '../_portal';
+import cls from 'classnames';
+import ConfigContext from '../configProvider/context';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/sideSheet/constants';
+import SideSheetTransition from './SideSheetTransition';
+import SideSheetContent from './SideSheetContent';
+import { noop } from 'lodash';
+import SideSheetFoundation, {
+    SideSheetAdapter,
+    SideSheetProps,
+    SideSheetState
+} from '@douyinfe/semi-foundation/sideSheet/sideSheetFoundation';
+import '@douyinfe/semi-foundation/sideSheet/sideSheet.scss';
+
+const prefixCls = cssClasses.PREFIX;
+const defaultWidthList = strings.WIDTH;
+const defaultHeight = strings.HEIGHT;
+
+export { SideSheetContentProps } from './SideSheetContent';
+export { SideSheetTransitionProps } from './SideSheetTransition';
+
+export interface SideSheetReactProps extends SideSheetProps{
+    bodyStyle?: CSSProperties;
+    headerStyle?: CSSProperties;
+    maskStyle?: CSSProperties;
+    style?: CSSProperties;
+    title?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+
+}
+
+export {
+    SideSheetState
+};
+
+export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSheetState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        bodyStyle: PropTypes.object,
+        headerStyle: PropTypes.object,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        closable: PropTypes.bool,
+        disableScroll: PropTypes.bool,
+        getPopupContainer: PropTypes.func,
+        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        mask: PropTypes.bool,
+        maskClosable: PropTypes.bool,
+        maskStyle: PropTypes.object,
+        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+        onCancel: PropTypes.func,
+        placement: PropTypes.oneOf(strings.PLACEMENT),
+        size: PropTypes.oneOf(strings.SIZE),
+        style: PropTypes.object,
+        title: PropTypes.node,
+        visible: PropTypes.bool,
+        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        zIndex: PropTypes.number,
+        afterVisibleChange: PropTypes.func,
+        closeOnEsc: PropTypes.bool,
+        footer: PropTypes.node,
+        keepDOM: PropTypes.bool
+    };
+
+    static defaultProps: SideSheetReactProps = {
+        visible: false,
+        motion: true,
+        mask: true,
+        placement: 'right',
+        closable: true,
+        footer: null,
+        zIndex: 1000,
+        maskClosable: true,
+        size: 'small',
+        disableScroll: true,
+        closeOnEsc: false,
+        afterVisibleChange: noop,
+        keepDOM: false
+    };
+    private _active: boolean;
+
+    constructor(props: SideSheetReactProps) {
+        super(props);
+        this.state = { hidden: !this.props.visible };
+        this.foundation = new SideSheetFoundation(this.adapter);
+        this._active = false;
+    }
+
+    get adapter(): SideSheetAdapter {
+        return {
+            ...super.adapter,
+            disabledBodyScroll: () => {
+                const { getPopupContainer } = this.props;
+                if (!getPopupContainer && document) {
+                    document.body.style.overflow = 'hidden';
+                }
+            },
+            enabledBodyScroll: () => {
+                const { getPopupContainer } = this.props;
+                if (!getPopupContainer && document) {
+                    document.body.style.overflow = '';
+                }
+            },
+            notifyCancel: (e: React.MouseEvent | React.KeyboardEvent) => {
+                this.props.onCancel && this.props.onCancel(e);
+            },
+            notifyVisibleChange: (visible: boolean) => {
+                this.props.afterVisibleChange(visible);
+            },
+            setOnKeyDownListener: () => {
+                if (window) {
+                    window.addEventListener('keydown', this.handleKeyDown);
+                }
+            },
+            removeKeyDownListener: () => {
+                if (window) {
+                    window.removeEventListener('keydown', this.handleKeyDown);
+                }
+            },
+            toggleHidden: (hidden: boolean) => {
+                if (hidden !== this.state.hidden) {
+                    this.setState({ hidden });
+                }
+            },
+        };
+    }
+
+    static getDerivedStateFromProps(props: SideSheetReactProps, prevState: SideSheetState) {
+        const newState: Partial<SideSheetState> = {};
+
+        if (props.visible && prevState.hidden) {
+            newState.hidden = false;
+        }
+
+        if (!props.visible && !props.motion && !prevState.hidden) {
+            newState.hidden = true;
+        }
+
+        return newState;
+    }
+
+    componentDidMount() {
+        if (this.props.visible) {
+            this.foundation.beforeShow();
+            this._active = this._active || this.props.visible;
+        }
+    }
+
+    componentDidUpdate(prevProps: SideSheetReactProps, prevState: SideSheetState, snapshot: any) {
+        // hide => show
+        if (!prevProps.visible && this.props.visible) {
+            this.foundation.beforeShow();
+        }
+        // show => hide
+        if (prevProps.visible && !this.props.visible) {
+            this.foundation.afterHide();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.visible) {
+            this.foundation.destroy();
+        }
+    }
+
+    handleCancel = (e: React.MouseEvent) => {
+        this.foundation.handleCancel(e);
+    };
+
+    handleKeyDown = (e: KeyboardEvent) => {
+        this.foundation.handleKeyDown(e);
+    };
+
+    renderContent() {
+        const {
+            placement,
+            className,
+            children,
+            width,
+            height,
+            motion,
+            visible,
+            style,
+            maskStyle,
+            size,
+            zIndex,
+            getPopupContainer,
+            keepDOM,
+            ...props
+        } = this.props;
+        const { direction } = this.context;
+        const isVertical = placement === 'left' || placement === 'right';
+        const isHorizontal = placement === 'top' || placement === 'bottom';
+        const sheetWidth = isVertical ? (width ? width : defaultWidthList[size]) : '100%';
+        const sheetHeight = isHorizontal ? (height ? height : defaultHeight) : '100%';
+        const classList = cls(prefixCls, className, {
+            [`${prefixCls}-${placement}`]: placement,
+            [`${prefixCls}-popup`]: getPopupContainer,
+            [`${prefixCls}-horizontal`]: isHorizontal,
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+            [`${prefixCls}-hidden`]: keepDOM && this.state.hidden,
+        });
+        const contentProps = {
+            ...props,
+            visible,
+            motion: false,
+            className: classList,
+            width: sheetWidth,
+            height: sheetHeight,
+            onClose: this.handleCancel,
+        };
+
+        const mergedMotion = this.foundation.getMergedMotion();
+        this._active = this._active || visible;
+        const shouldRender = (visible || keepDOM) && this._active;
+        if (mergedMotion) {
+            return (
+                <SideSheetTransition placement={placement} motion={mergedMotion} controlled={keepDOM} visible={visible}>
+                    {shouldRender ?
+                        transitionStyles => (
+                            <SideSheetContent
+                                {...contentProps}
+                                style={{ ...transitionStyles, ...style }}
+                                maskStyle={{ opacity: transitionStyles.opacity, ...maskStyle }}
+                            >
+                                {children}
+                            </SideSheetContent>
+                        ) : null}
+                </SideSheetTransition>
+            );
+        }
+        if (shouldRender) {
+            return (
+                <SideSheetContent {...contentProps} style={style} maskStyle={maskStyle}>
+                    {children}
+                </SideSheetContent>
+            );
+        }
+        return null;
+    }
+
+    render() {
+        const {
+            zIndex,
+            getPopupContainer,
+        } = this.props;
+        let wrapperStyle: CSSProperties = {
+            zIndex,
+        };
+        if (getPopupContainer) {
+            wrapperStyle = {
+                zIndex,
+                position: 'static',
+            };
+        }
+        return (
+            <Portal getPopupContainer={getPopupContainer} style={wrapperStyle}>
+                {this.renderContent()}
+            </Portal>
+        );
+    }
+}

package/skeleton/__test__/skeleton.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import Skeleton from '../index';
+
+const { Avatar, Image, Title, Button, Paragraph } = Skeleton;
+
+describe('Skeleton', () => {
+    it('basic loading', () => {
+        const node = mount(
+            <Skeleton placeholder={<Avatar />} loading>
+                <div className="content">content</div>
+            </Skeleton>
+        );
+        expect(node.exists(`.${BASE_CLASS_PREFIX}-skeleton`)).toEqual(true);
+        node.setProps({ loading: false });
+        expect(node.exists(`.${BASE_CLASS_PREFIX}-skeleton`)).toEqual(false);
+        expect(node.exists('.content')).toEqual(true);
+    });
+    it('kits render', () => {
+        const avatarNode = mount(<Avatar />);
+        const imageNode = mount(<Image />);
+        const titleNode = mount(<Title />);
+        const btnNode = mount(<Button />);
+        const paraNode = mount(<Paragraph />);
+        expect(avatarNode.exists(`.${BASE_CLASS_PREFIX}-skeleton-avatar`)).toEqual(true);
+        expect(imageNode.exists(`.${BASE_CLASS_PREFIX}-skeleton-image`)).toEqual(true);
+        expect(titleNode.exists(`.${BASE_CLASS_PREFIX}-skeleton-title`)).toEqual(true);
+        expect(btnNode.exists(`.${BASE_CLASS_PREFIX}-skeleton-button`)).toEqual(true);
+        expect(paraNode.exists(`.${BASE_CLASS_PREFIX}-skeleton-paragraph`)).toEqual(true);
+    });
+});

package/skeleton/_story/skeleton.stories.js

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import withPropsCombinations from 'react-storybook-addon-props-combinations';
+
+import { Table } from '@douyinfe/semi-ui/';
+
+import Skeleton from '../index';
+import Avatar from '../../avatar';
+
+export default {
+  title: 'Skeleton'
+}
+
+export const _Skeleton = () => (
+  <div>
+    <Skeleton placeholder={<Skeleton.Avatar />} loading={true}>
+      <Avatar>U</Avatar>
+    </Skeleton>
+    <Skeleton placeholder={<Skeleton.Image />} loading={true}>
+      <Avatar>U</Avatar>
+    </Skeleton>
+    <Skeleton placeholder={<Skeleton.Paragraph row={6} />} loading={true}>
+      <Avatar>U</Avatar>
+    </Skeleton>
+    <Skeleton placeholder={<Skeleton.Button />} loading={true}>
+      <Avatar>U</Avatar>
+    </Skeleton>
+    <Skeleton placeholder={<Skeleton.Title />} loading={true}>
+      <Avatar>U</Avatar>
+    </Skeleton>
+  </div>
+);
+
+export const _Table = () => {
+  const Demo = () => {
+    const phArray = [1, 2, 1, 1, 1, 1, 2, 1];
+    const columns = useMemo(
+      () =>
+        phArray.map((key, idx) => {
+          const item = {};
+          item.title = <Skeleton.Title style={{ width: '0' }} />;
+          item.dataIndex = key;
+          item.key = idx;
+          return item;
+        }),
+      phArray
+    );
+    const dataSource = useMemo(
+      () =>
+        [1, 2, 3, 4, 5].map(key => {
+          const item = {};
+          item.key = key;
+          phArray.forEach(i => {
+            const width = 50 * i;
+            item[i] = <Skeleton.Paragraph style={{ width }} rows={1} />;
+          });
+          return item;
+        }),
+      []
+    );
+
+    const placeholder = (
+      <div style={{ position: 'relative' }}>
+        <Table
+          style={{ backgroundColor: 'var(--semi-color-bg-1)' }}
+          columns={columns}
+          dataSource={dataSource}
+          pagination={false}
+        />
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }} />
+      </div>
+    );
+
+    return <Skeleton placeholder={placeholder} loading={true} />;
+  };
+
+  return <Demo />;
+};
+
+_Table.story = {
+  name: 'table',
+};

package/skeleton/_story/skeleton.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Skeleton from '../index';
+import Button from '../../button';
+import Switch from '../../switch';
+import Avatar from '../../avatar';
+
+const stories = storiesOf('Skeleton', module);
+
+interface IProps {
+    [x:string]: any;
+}
+interface IState {
+    loading: boolean;
+}
+class Demo extends React.Component<IProps, IState> {
+    constructor(props:any) {
+      super(props);
+      this.state = {loading: true};
+    }
+  
+    showContent() {
+      const {loading} = this.state;
+      this.setState({
+        loading: !loading
+      });
+    }
+  
+    render() {
+      const {loading} = this.state;
+      return (
+        <>
+          <span style={{display: 'flex', alignItems: 'center'}}>
+            <Switch onChange={() => this.showContent()}/>
+            <span style={{marginLeft: '10px' }}>显示加载内容</span>
+          </span>
+          <br/>
+          <Skeleton placeholder={(<Skeleton.Avatar size="medium" />)} loading={loading}>
+              <Avatar color='blue' style={{marginBottom: 10}}>U</Avatar>
+          </Skeleton>
+          <br/>
+          <Skeleton style={{width: 200, height: 150}} placeholder={(<Skeleton.Image />)} loading={loading}>
+              <img src="https://sf3-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/semi/831f8189f564e79c25769884c9d3d5f6.jpg" height='150' />
+          </Skeleton>
+          <br/>
+          <Skeleton style={{width: 80}} placeholder={(<Skeleton.Title style={{marginBottom: 10}}/>)} loading={loading}>
+              <h4 style={{marginBottom: 0}}>Semi UI</h4>
+          </Skeleton>
+          <Skeleton style={{width: 240}} placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={loading}>
+              <p style={{width: 240}} >精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</p>
+          </Skeleton>
+          <br/>
+          <Skeleton placeholder={(<Skeleton.Button />)} loading={loading}>
+              <Button>Button</Button>
+          </Skeleton>
+        </>
+      );
+    }
+  }
+stories.add('Skeleton', () => (<Demo />
+));

package/skeleton/index.tsx

@@ -0,0 +1,62 @@
+import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/skeleton/constants';
+import '@douyinfe/semi-foundation/skeleton/skeleton.scss';
+import { Avatar, Image, Title, Button, Paragraph } from './item';
+
+export { ParagraphProps, AvatarProps, GenericProps } from './item';
+
+const prefixCls = cssClasses.PREFIX;
+
+export interface SkeletonProps {
+    active?: boolean;
+    children?: ReactNode;
+    className?: string;
+    loading?: boolean;
+    placeholder?: ReactNode;
+    style?: CSSProperties;
+}
+
+class Skeleton extends PureComponent<SkeletonProps> {
+    static Avatar = Avatar;
+    static Title = Title;
+    static Button = Button;
+    static Paragraph = Paragraph;
+    static Image = Image;
+
+    static defaultProps = {
+        loading: true,
+    };
+
+    static propTypes = {
+        active: PropTypes.bool,
+        placeholder: PropTypes.node,
+        style: PropTypes.object,
+        className: PropTypes.string,
+        loading: PropTypes.bool,
+        children: PropTypes.node,
+    };
+
+    render(): ReactNode {
+        const { placeholder, active, children, className, loading, style, ...others } = this.props;
+        const skCls = cls(prefixCls,
+            {
+                [`${prefixCls}-active`]: Boolean(active),
+            },
+            className);
+        let content;
+        if (loading) {
+            content = (
+                <div className={skCls} style={style} {...others}>
+                    {placeholder}
+                </div>
+            );
+        } else {
+            content = children;
+        }
+        return content;
+    }
+}
+
+export default Skeleton;

package/skeleton/item.tsx

@@ -0,0 +1,82 @@
+import React, { PureComponent, CSSProperties, ComponentType, FC, ReactElement, ReactNode } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/skeleton/constants';
+import { strings } from '@douyinfe/semi-foundation/avatar/constants';
+
+import '@douyinfe/semi-foundation/skeleton/skeleton.scss';
+
+export type BasicProps = {
+    prefixCls?: string;
+    className?: string;
+    style?: CSSProperties;
+    type?: string;
+};
+
+export interface ParagraphProps extends BasicProps {
+    rows?: number;
+}
+
+export interface AvatarProps extends BasicProps {
+    size?: typeof strings.SIZE[number];
+}
+
+export type GenericProps = BasicProps & AvatarProps;
+
+const sizeSet = strings.SIZE;
+
+const generator = <T extends BasicProps >(type: string) =>
+    (BasicComponent: ComponentType<T>): FC<T> =>
+        (props): ReactElement => <BasicComponent type={type} {...props} />;
+
+class Generic extends PureComponent<GenericProps> {
+    static propTypes = {
+        type: PropTypes.string,
+        prefixCls: PropTypes.string,
+        style: PropTypes.object,
+        className: PropTypes.string,
+        size: PropTypes.oneOf(sizeSet),
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX,
+        size: 'medium'
+    };
+
+    render() {
+        const { prefixCls, className, type, size, ...others } = this.props;
+        const classString = cls(className, `${prefixCls}-${type}`, {
+            [`${prefixCls}-${type}-${size}`]: type.toUpperCase() === 'AVATAR'
+        });
+        return React.createElement('div', { className: classString, ...others });
+    }
+}
+
+export const Avatar = generator<AvatarProps>('avatar')(Generic);
+export const Image = generator<BasicProps>('image')(Generic);
+export const Title = generator<BasicProps>('title')(Generic);
+export const Button = generator<BasicProps>('button')(Generic);
+
+export class Paragraph extends PureComponent<ParagraphProps> {
+    static propTypes = {
+        rows: PropTypes.number,
+        prefixCls: PropTypes.string,
+        style: PropTypes.object,
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX,
+        rows: 4,
+    };
+
+    render(): ReactNode {
+        const { prefixCls, className, style, rows } = this.props;
+        const classString = cls(className, `${prefixCls}-paragraph`);
+        return (
+            <ul className={classString} style={style}>
+                {[...Array(rows)].map((e, i) => <li key={i} />)}
+            </ul>
+        );
+    }
+}

package/slider/__test__/__snapshots__/slider.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should show tooltip when hovering slider handler 1`] = `null`;
+
+exports[`Slider should show tooltip when hovering slider handler 2`] = `null`;