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

package/avatar/_story/avatar.stories.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import Avatar from '../index';
+import Popover from '../../popover/index';
+import AvatarGroup from '../avatarGroup';
+
+export default {
+  title: 'Avatar',
+}
+
+export const Basic = () => (
+  <div>
+    <div>
+      <Avatar>U</Avatar>
+      <Avatar size="large">U</Avatar>
+      <Avatar size="extra-small">U</Avatar>
+      <Avatar size="small">U</Avatar>
+      <Avatar size="default">U</Avatar>
+      <Avatar size="extra-large">U</Avatar>
+    </div>
+    <div>
+      <Avatar shape="square">U</Avatar>
+      <Avatar shape="square" size="large">
+        U
+      </Avatar>
+      <Avatar shape="square" size="extra-small">
+        U
+      </Avatar>
+      <Avatar shape="square" size="small">
+        U
+      </Avatar>
+      <Avatar shape="square" size="default">
+        U
+      </Avatar>
+      <Avatar shape="square" size="extra-large">
+        U
+      </Avatar>
+    </div>
+  </div>
+);
+
+export const CustomAvatar = () => (
+  <div>
+    <Avatar>U</Avatar>
+    <Avatar color="red">U</Avatar>
+    <Avatar color="red" size="default">
+      DF
+    </Avatar>
+    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar size="default" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
+    <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+  </div>
+);
+
+export const GroupSize = () => (
+  <div>
+    <p>medium</p>
+    <AvatarGroup>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar size="default">CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <p>default</p>
+    <AvatarGroup size="default">
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar size="default">CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <p>small</p>
+    <AvatarGroup size="small">
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar size="default">CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+  </div>
+);
+
+export const OverlapFromDemo = () => (
+  <div>
+    <div>overlapFrom=start</div>
+    <AvatarGroup overlapFrom={'start'}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+    <div>overlapFrom=end</div>
+    <AvatarGroup overlapFrom={'end'}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+  </div>
+);
+
+export const MaxCountDemo = () => (
+  <div>
+    <div>maxCount=3</div>
+    <AvatarGroup maxCount={3}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+  </div>
+);
+
+const renderMore = (restNumber, restAvatars) => {
+  const content = restAvatars.map((avatar, index) => {
+    return (
+      <div style={{ paddingBottom: '12px' }}>
+        {React.cloneElement(avatar, { size: 'extra-small' })}
+        <span style={{ marginLeft: 8, fontSize: 14 }}>这是段文字描述</span>
+      </div>
+    );
+  });
+  return (
+    <Popover
+      content={content}
+      autoAdjustOverflow={false}
+      position={'bottomRight'}
+      style={{ padding: '12px 8px', paddingBottom: 0 }}
+    >
+      <Avatar>{`+${restNumber}`}</Avatar>
+    </Popover>
+  );
+};
+
+export const RenderMoreDemo = () => (
+  <div>
+    <AvatarGroup maxCount={3} renderMore={renderMore}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+  </div>
+);
+
+export const ExtraExtraSmallOverlap = () => (
+  <div>
+    <AvatarGroup size="extra-extra-small" overlapFrom={'start'}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+    <AvatarGroup size="extra-extra-small" overlapFrom={'end'}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+    <br />
+    <br />
+    <AvatarGroup size="extra-extra-small" maxCount={3}>
+      <Avatar color="red">LL</Avatar>
+      <Avatar>CX</Avatar>
+      <Avatar color="amber">RM</Avatar>
+      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
+      <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
+    </AvatarGroup>
+  </div>
+);

package/avatar/_story/avatar.stories.tsx

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

package/avatar/avatarGroup.tsx

@@ -0,0 +1,81 @@
+import React, { PureComponent, Fragment } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { get as lodashGet, isFunction, isNumber } from 'lodash';
+import Avatar from './index';
+import { AvatarGroupProps } from './interface';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/avatar/constants';
+
+const sizeSet = strings.SIZE;
+const shapeSet = strings.SHAPE;
+const overlapFromSet = strings.OVERLAP_FROM;
+const prefixCls = cssClasses.PREFIX;
+export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
+    static defaultProps = {
+        size: 'medium',
+        shape: 'circle',
+        overlapFrom: 'start',
+    };
+
+    static propTypes = {
+        children: PropTypes.node,
+        shape: PropTypes.oneOf(shapeSet),
+        size: PropTypes.oneOf(sizeSet),
+        maxCount: PropTypes.number,
+        renderMore: PropTypes.func,
+        overlapFrom: PropTypes.oneOf(overlapFromSet),
+    };
+
+    getAllAvatars() {
+        const { children } = this.props;
+        return Array.isArray(children) ? children : [children];
+    }
+
+    getMergeAvatars(avatars: React.ReactNode[]) {
+        const { maxCount } = this.props;
+        let renderAvatars = avatars;
+        const restNumber = avatars.length - maxCount;
+
+        const normalAvatars = avatars.slice(0, maxCount);
+        const restAvatars = avatars.slice(maxCount);
+
+        if (restNumber > 0) {
+            const more = this.renderMoreAvatar(restNumber, restAvatars);
+            normalAvatars.push(more);
+            renderAvatars = normalAvatars;
+        }
+        return renderAvatars;
+    }
+
+    renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]) {
+        const { renderMore } = this.props;
+        const moreCls = cls(`${prefixCls}-item-more`);
+        let moreAvatar = <Avatar className={moreCls} key="_+n">{`+${restNumber}`}</Avatar>;
+        if (isFunction(renderMore)) {
+            moreAvatar = <Fragment key="_+n">{renderMore(restNumber, restAvatars)}</Fragment>;
+        }
+        return moreAvatar;
+    }
+
+    render() {
+        // eslint-disable-next-line no-unused-vars
+        const { children, maxCount, overlapFrom, size, shape, renderMore, ...rest } = this.props;
+        let inner;
+        const groupCls = cls({
+            [`${prefixCls}-group`]: true,
+        });
+        if (children) {
+            const avatars = this.getAllAvatars();
+            inner = (isNumber(maxCount) ? this.getMergeAvatars(avatars) : avatars).map((itm, index) => {
+                const className = cls(lodashGet((itm as any).props, 'className'), {
+                    [`${prefixCls}-item-start-${index}`]: overlapFrom === 'start',
+                    [`${prefixCls}-item-end-${index}`]: overlapFrom === 'end',
+                });
+                return React.cloneElement((itm as any), { ...rest, className, size, shape, key: index });
+            });
+
+        }
+
+        return <div className={groupCls}>{inner}</div>;
+    }
+}

package/avatar/index.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/avatar/constants';
+import AvatarFoundation, { AvatarAdapter } from '@douyinfe/semi-foundation/avatar/foundation';
+import '@douyinfe/semi-foundation/avatar/avatar.scss';
+import { noop } from '@douyinfe/semi-foundation/utils/function';
+import BaseComponent from '../_base/baseComponent';
+import { AvatarProps } from './interface';
+
+const sizeSet = strings.SIZE;
+const shapeSet = strings.SHAPE;
+const colorSet = strings.COLOR;
+const prefixCls = cssClasses.PREFIX;
+
+export * from './interface';
+export interface AvatarState {
+    isImgExist: boolean;
+    hoverContent: React.ReactNode;
+}
+
+export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
+    static defaultProps = {
+        size: 'medium',
+        color: 'grey',
+        shape: 'circle',
+        onClick: noop,
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+    };
+
+    static propTypes = {
+        children: PropTypes.node,
+        color: PropTypes.oneOf(colorSet),
+        shape: PropTypes.oneOf(shapeSet),
+        size: PropTypes.oneOf(sizeSet),
+        hoverMask: PropTypes.node,
+        className: PropTypes.string,
+        style: PropTypes.object,
+        imgAttr: PropTypes.object,
+        src: PropTypes.string,
+        srcSet: PropTypes.string,
+        alt: PropTypes.string,
+        onError: PropTypes.func,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+    };
+
+    constructor(props: AvatarProps) {
+        super(props);
+        this.state = {
+            isImgExist: true,
+            hoverContent: '',
+        };
+        this.onEnter = this.onEnter.bind(this);
+        this.onLeave = this.onLeave.bind(this);
+        this.handleError = this.handleError.bind(this);
+    }
+
+    get adapter(): AvatarAdapter<AvatarProps, AvatarState> {
+        return {
+            ...super.adapter,
+            notifyImgState: (isImgExist: boolean) => {
+                this.setState({ isImgExist });
+            },
+            notifyEnter: (e: React.MouseEvent) => {
+                const { hoverMask } = this.props;
+                const hoverContent = hoverMask;
+                this.setState({ hoverContent }, () => {
+                    const { onMouseEnter } = this.props;
+                    onMouseEnter && onMouseEnter(e);
+                });
+            },
+            notifyLeave: (e: React.MouseEvent) => {
+                this.setState({ hoverContent: '' }, () => {
+                    const { onMouseLeave } = this.props;
+                    onMouseLeave && onMouseLeave(e);
+                });
+            }
+        };
+    }
+
+    componentDidMount() {
+        this.foundation = new AvatarFoundation<AvatarProps, AvatarState>(this.adapter);
+        this.foundation.init();
+    }
+
+    componentDidUpdate(prevProps: AvatarProps) {
+        if (this.props.src && this.props.src !== prevProps.src) {
+            const image = new Image(0, 0);
+            image.src = this.props.src;
+            image.onload = () => {
+                this.setState({ isImgExist: true });
+            };
+            image.onerror = () => {
+                this.setState({ isImgExist: false });
+            };
+            image.onabort = () => {
+                this.setState({ isImgExist: false });
+            };
+        }
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    onEnter() {
+        this.foundation.handleEnter();
+    }
+
+    onLeave() {
+        this.foundation.handleLeave();
+    }
+
+    handleError() {
+        this.foundation.handleImgLoadError();
+    }
+
+    render() {
+        // eslint-disable-next-line max-len, no-unused-vars
+        const { shape, children, size, color, className, hoverMask, onClick, imgAttr, src, srcSet, style, alt, ...others } = this.props;
+        const { isImgExist, hoverContent } = this.state;
+        const isImg = src && isImgExist;
+        const avatarCls = cls(
+            prefixCls,
+            {
+                [`${prefixCls}-${shape}`]: shape,
+                [`${prefixCls}-${size}`]: size,
+                [`${prefixCls}-${color}`]: color && !isImg,
+                [`${prefixCls}-img`]: isImg,
+            },
+            className
+        );
+        let content = children;
+        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
+        if (isImg) {
+            content = (
+                <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
+            );
+        } else if (typeof children === 'string') {
+            content = (
+                <span className={`${prefixCls}-content`}>
+                    <span className={`${prefixCls}-label`}>{children}</span>
+                </span>
+            );
+        }
+        return (
+            <span
+                {...(others as any)}
+                style={style}
+                className={avatarCls}
+                onClick={onClick as any}
+                onMouseEnter={this.onEnter as any}
+                onMouseLeave={this.onLeave as any}
+            >
+                {content}
+                {hoverRender}
+            </span>
+        );
+    }
+}

package/avatar/interface.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { BaseProps } from '../_base/baseComponent';
+
+export type AvatarShape = 'circle' | 'square';
+export type AvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
+export type AvatarColor =
+    | 'amber'
+    | 'blue'
+    | 'cyan'
+    | 'green'
+    | 'grey'
+    | 'indigo'
+    | 'light-blue'
+    | 'light-green'
+    | 'lime'
+    | 'orange'
+    | 'pink'
+    | 'purple'
+    | 'red'
+    | 'teal'
+    | 'violet'
+    | 'yellow';
+
+export interface AvatarProps extends BaseProps {
+    children?: React.ReactNode;
+    color?: AvatarColor;
+    shape?: AvatarShape;
+    size?: AvatarSize;
+    hoverMask?: React.ReactNode;
+    src?: string;
+    srcSet?: string;
+    alt?: string;
+    onError?: React.MouseEventHandler;
+    onClick?: React.MouseEventHandler;
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
+}
+
+export type AvatarGroupShape = 'circle' | 'square';
+export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export type AvatarGroupOverlapFrom = 'start' | 'end';
+
+export interface AvatarGroupProps {
+    children?: React.ReactNode;
+    shape?: AvatarGroupShape;
+    size?: AvatarGroupSize;
+    overlapFrom?: AvatarGroupOverlapFrom;
+    maxCount?: number;
+    renderMore?: (restNumber?: number, restAvatars?: React.ReactNode[]) => React.ReactNode;
+}

package/backtop/__test__/backtop.test.js

@@ -0,0 +1,49 @@
+import { BackTop } from '../../index';
+import sinon from 'sinon';
+
+describe('BackTop', () => {
+    beforeEach(() => {
+        jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+      });
+      
+    afterEach(() => {
+        window.requestAnimationFrame.mockRestore();
+    });
+
+    it('test className & style', () => {
+        const props = {
+            className: 'test',
+            style: {
+                color: 'red',
+            },
+            visibilityHeight: -1,
+        };
+        const demo = mount(
+            <div>
+                <div style={{height: 1600, width: 300, background: 'grey'}}></div>
+                <BackTop {...props}></BackTop>
+            </div>
+        );
+        expect(demo.exists(`.semi-backtop.test`)).toEqual(true);
+        expect(demo.find(`.semi-backtop`)).toHaveStyle('color', 'red');
+        demo.unmount();
+    });
+
+    it('test onClick', () => {
+        const onClick = sinon.spy(() => {});
+        const props = {
+            onClick,
+            className: 'test',
+            visibilityHeight: -1,
+        };
+        const demo = mount(
+            <div>
+                <div style={{height: 1600, width: 300, background: 'grey'}}></div>
+                <BackTop {...props}></BackTop>
+            </div>
+        );
+        demo.find('.semi-backtop.test').simulate('click');
+        expect(onClick.calledOnce).toEqual(true);
+        demo.unmount();
+    });
+});

package/backtop/_story/backtop.stories.js

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,30 @@
+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 />
+));