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

package/tag/_story/tag.stories.js

@@ -1,290 +0,0 @@
-/* argus-disable unPkgSensitiveInfo */
-import React, { useCallback, useState } from 'react';
-import withPropsCombinations from 'react-storybook-addon-props-combinations';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-import { Tag, TagGroup } from '../../index';
-
-export default {
-  title: 'Tag'
-}
-
-export const Tag1 = () => (
-  <div>
-    <Tag>hello Tag</Tag>
-    <Tag>
-      <div>
-        leftBottom
-        <br />
-        leftBottom line 2
-      </div>
-    </Tag>
-  </div>
-);
-
-Tag1.story = {
-  name: 'tag 1',
-};
-
-export const Tag2 = () => (
-  <div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="red" closable>
-        hello Tag
-      </Tag>
-      <Tag color="red">hello Tag</Tag>
-      <Tag color="red">hello Tag</Tag>
-      <Tag color="red">hello Tag</Tag>
-      <Tag color="red">hello Tag</Tag>
-    </div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="green">hello Tag</Tag>
-      <Tag color="green">hello Tag</Tag>
-      <Tag color="green">hello Tag</Tag>
-      <Tag color="green">hello Tag</Tag>
-      <Tag color="green">hello Tag</Tag>
-    </div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="blue">hello Tag</Tag>
-      <Tag color="blue">hello Tag</Tag>
-      <Tag color="blue">hello Tag</Tag>
-      <Tag color="blue">hello Tag</Tag>
-      <Tag color="blue">hello Tag</Tag>
-    </div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="grey">hello Tag</Tag>
-      <Tag color="grey">hello Tag</Tag>
-      <Tag color="grey">hello Tag</Tag>
-      <Tag color="grey">hello Tag</Tag>
-      <Tag color="grey">hello Tag</Tag>
-    </div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="orange">hello Tag</Tag>
-      <Tag color="orange">hello Tag</Tag>
-      <Tag color="orange">hello Tag</Tag>
-      <Tag color="orange">hello Tag</Tag>
-      <Tag color="orange">hello Tag</Tag>
-    </div>
-    <div className={`${BASE_CLASS_PREFIX}-tag-group`}>
-      <Tag color="white">hello Tag</Tag>
-      <Tag color="white">hello Tag</Tag>
-      <Tag color="white">hello Tag</Tag>
-      <Tag color="white">hello Tag</Tag>
-      <Tag color="white">hello Tag</Tag>
-    </div>
-  </div>
-);
-
-Tag2.story = {
-  name: 'tag 2',
-};
-
-export const CombinationShow = withPropsCombinations(
-  Tag,
-  {
-    children: ['hello Tag'],
-    size: ['large', 'small'],
-    closable: [true, false],
-    color: ['green', 'orange', 'blue', 'grey', 'red', 'white'],
-  },
-  {
-    showSource: false,
-  }
-);
-
-CombinationShow.story = {
-  name: 'combination show',
-};
-
-const TagGroupDemo = () => {
-  let tagList = [
-    { color: 'white', children: '抖音' },
-    { color: 'white', children: '火山小视频' },
-    { color: 'white', children: 'Abc' },
-    { color: 'white', children: 'vigo' },
-    { color: 'white', children: '皮皮虾' },
-  ];
-  let divStyle = {
-    backgroundColor: 'var(--semi-color-fill-0)',
-    height: 35,
-    width: 300,
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 10px',
-  };
-  return (
-    <>
-      <div style={divStyle}>
-        <TagGroup
-          maxTagCount={3}
-          style={{ width: 300 }}
-          tagList={tagList}
-          size="large"
-          showPopover
-        ></TagGroup>
-      </div>
-      <br />
-      <div style={divStyle}>
-        <TagGroup
-          maxTagCount={3}
-          style={{ width: 300 }}
-          tagList={tagList}
-          size="small"
-          showPopover
-        ></TagGroup>
-      </div>
-      <br />
-      <div>
-        <TagGroup style={{ width: 300 }} tagList={tagList} size="large"></TagGroup>
-      </div>
-      <div>
-        <TagGroup style={{ width: 300 }} tagList={tagList} size="small"></TagGroup>
-      </div>
-    </>
-  );
-};
-
-export const _TagGroup = () => <TagGroupDemo />;
-
-_TagGroup.story = {
-  name: 'tagGroup',
-};
-
-export const TagAvatar = () => {
-  const avatarSrc =
-    'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
-  return (
-    <div style={{ margin: 10 }}>
-      <Tag avatarSrc={avatarSrc} avatarShape={'square'} onClick={()=>{console.log('如果能重来，我要做李白')}}>
-        李白
-      </Tag>
-      <br />
-      <Tag avatarSrc={avatarSrc} avatarShape={'square'} size="large">
-        李白
-      </Tag>
-      <br />
-      <Tag avatarSrc={avatarSrc} avatarShape={'circle'}>
-        白居易
-      </Tag>
-      <br />
-      <Tag avatarSrc={avatarSrc} avatarShape={'circle'} size="large">
-        白居易
-      </Tag>
-      <br />
-      <Tag closable={true} avatarSrc={avatarSrc} avatarShape={'square'}>
-        李白
-      </Tag>
-      <br />
-      <Tag closable={true} avatarSrc={avatarSrc} avatarShape={'square'} size="large">
-        李白
-      </Tag>
-      <br />
-      <Tag closable={true} avatarSrc={avatarSrc} avatarShape={'circle'}>
-        白居易
-      </Tag>
-      <br />
-      <Tag closable={true} avatarSrc={avatarSrc} avatarShape={'circle'} size="large">
-        白居易
-      </Tag>
-      <br />
-    </div>
-  );
-};
-
-TagAvatar.story = {
-  name: 'tag avatar',
-};
-
-const AvatarTagGroupDemo = () => {
-  const src =
-    'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
-  let tagList = [
-    { color: 'white', children: '抖音', avatarSrc: src },
-    { color: 'white', children: '火山小视频', avatarSrc: src },
-    { color: 'white', children: 'Abc', avatarSrc: src },
-    { color: 'white', children: 'vigo', avatarSrc: src },
-    { color: 'white', children: '皮皮虾', avatarSrc: src },
-  ];
-  let divStyle = {
-    backgroundColor: 'var(--semi-color-fill-0)',
-    height: 35,
-    width: 350,
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 10px',
-  };
-  return (
-    <div style={divStyle}>
-      <TagGroup
-        maxTagCount={3}
-        style={{ width: 350 }}
-        tagList={tagList}
-        size="large"
-        avatarShape="circle"
-        showPopover
-      ></TagGroup>
-    </div>
-  );
-};
-
-export const AvatarTagGroup = () => <AvatarTagGroupDemo />;
-
-AvatarTagGroup.story = {
-  name: 'avatar tagGroup',
-};
-
-class TagGroupCloseableDemo extends React.Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            tagList: [
-                { tagKey: '1', color: 'white', children: '抖音',  closable: true,},
-                { tagKey: '2',color: 'white', children: '火山小视频', closable: true,},
-                { tagKey: '3',color: 'white', children: '剪映', closable: true,},
-                { tagKey: '4',color: 'white', children: '皮皮虾', closable: true,},
-            ]
-        };
-        this.tagListClick = this.tagListClick.bind(this);
-    }
-
-    tagListClick(value, e, tagKey){
-        const newTagList = [...this.state.tagList];
-        const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey);
-        newTagList.splice(closeTagIndex, 1);
-        this.setState({
-          tagList: newTagList,
-        });
-    }
-
-    render() {
-        return (
-            <div style={ {
-                backgroundColor: 'var(--semi-color-fill-0)',
-                height: 35,
-                width: 300,
-                display: 'flex',
-                alignItems: 'center',
-                padding: '0 10px',
-                marginBottom: 30,
-            }}>
-                <TagGroup
-                    maxTagCount={3}
-                    style={ {
-                        display: 'flex',
-                        alignItems: 'center',
-                        width: 350,
-                    }}
-                    tagList={this.state.tagList}
-                    size='large'
-                    onTagClose={this.tagListClick}
-                />
-            </div>
-        );
-    }
-}
-
-export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
-
-TagGroupCloseable.story = {
-  name: 'tagGroup closable',
-}

package/tag/_story/tag.stories.tsx

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

package/tag/group.tsx

@@ -1,136 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
-import Tag from './index';
-import Popover from '../popover/index';
-import { AvatarShape, TagProps, TagGroupProps } from './interface';
-
-const prefixCls = cssClasses.PREFIX;
-const tagSize = strings.TAG_SIZE;
-const avatarShapeSet = strings.AVATAR_SHAPE;
-
-export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
-    static defaultProps = {
-        style: {},
-        className: '',
-        size: tagSize[0],
-        avatarShape: 'square',
-        onTagClose: () => undefined,
-    };
-
-    static propTypes = {
-        children: PropTypes.node,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        maxTagCount: PropTypes.number,
-        restCount: PropTypes.number,
-        tagList: PropTypes.array,
-        size: PropTypes.oneOf(tagSize),
-        mode: PropTypes.string,
-        onTagClose: PropTypes.func,
-        showPopover: PropTypes.bool,
-        popoverProps: PropTypes.object,
-        avatarShape: PropTypes.oneOf(avatarShapeSet),
-    };
-
-    renderNTag(n: number, restTags: React.ReactNode) {
-        const { size, showPopover, popoverProps } = this.props;
-        let nTag = (
-            <Tag
-                closable={false}
-                size={size}
-                color="grey"
-                style={{ backgroundColor: 'transparent' }}
-                key="_+n"
-            >
-                +{n}
-            </Tag>
-        );
-
-        if (showPopover) {
-            nTag = (
-                <Popover
-                    showArrow
-                    content={restTags}
-                    trigger="hover"
-                    position="top"
-                    autoAdjustOverflow
-                    className={`${prefixCls}-rest-group-popover`}
-                    {...popoverProps}
-                    key="_+n_Popover"
-                >
-                    {nTag}
-                </Popover>
-            );
-        }
-        return nTag;
-    }
-
-    renderMergeTags(tags: (Tag | React.ReactNode)[]) {
-        const { maxTagCount, tagList, restCount } = this.props;
-        const n = restCount ? restCount : tagList.length - maxTagCount;
-        let renderTags: (Tag | React.ReactNode)[] = tags;
-
-        const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);
-        const restTags = tags.slice(maxTagCount) as React.ReactNode;
-        let nTag = null;
-        if (n > 0) {
-            nTag = this.renderNTag(n, restTags);
-            normalTags.push(nTag);
-            renderTags = normalTags;
-        }
-        return renderTags;
-    }
-
-    renderAllTags() {
-        const { tagList, size, mode, avatarShape, onTagClose } = this.props;
-        const renderTags = tagList.map((tag): (Tag | React.ReactNode) => {
-            if (mode === 'custom') {
-                return tag as React.ReactNode;
-            }
-            if (!(tag as TagProps).size) {
-                (tag as TagProps).size = size;
-            }
-            
-            if (!(tag as TagProps).avatarShape) {
-                (tag as TagProps).avatarShape = avatarShape;
-            }
-
-            if (!(tag as TagProps).tagKey) {
-                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
-                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
-                } else {
-                    (tag as TagProps).tagKey = Math.random();
-                }
-            }
-            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
-                if ((tag as TagProps).onClose) {
-                    (tag as TagProps).onClose(tagChildren, e, tagKey);
-                }
-                onTagClose && onTagClose(tagChildren, e, tagKey);
-            }} />;
-        });
-        return renderTags;
-    }
-
-    render() {
-        const { style, className, maxTagCount, size } = this.props;
-
-        const groupCls = classNames({
-            [`${prefixCls}-group`]: true,
-            [`${prefixCls}-group-max`]: maxTagCount,
-            [`${prefixCls}-group-small`]: size === 'small',
-            [`${prefixCls}-group-large`]: size === 'large',
-        }, className);
-
-        const tags = this.renderAllTags();
-        const tagContents = (typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags)) as React.ReactNode;
-
-        return (
-            <div style={style} className={groupCls}>
-                {tagContents}
-            </div>
-        );
-    }
-}

package/tag/index.tsx

@@ -1,163 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
-import Avatar from '../avatar/index';
-import { IconClose } from '@douyinfe/semi-icons';
-import { TagProps, TagSize, TagColor, TagType } from './interface';
-import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
-import '@douyinfe/semi-foundation/tag/tag.scss';
-import { isString } from 'lodash';
-
-export * from './interface';
-
-const prefixCls = cssClasses.PREFIX;
-
-const tagColors = strings.TAG_COLOR;
-
-const tagSize = strings.TAG_SIZE;
-const tagType = strings.TAG_TYPE;
-const avatarShapeSet = strings.AVATAR_SHAPE;
-
-export interface TagState {
-    visible: boolean;
-}
-
-export default class Tag extends Component<TagProps, TagState> {
-    static defaultProps: TagProps = {
-        size: tagSize[0] as TagSize,
-        color: tagColors[0] as TagColor,
-        closable: false,
-        // visible: true,
-        type: tagType[0] as TagType,
-        onClose: () => undefined,
-        onClick: () => undefined,
-        style: {},
-        className: '',
-        avatarShape: 'square',
-    };
-
-    static propTypes = {
-        children: PropTypes.node,
-        tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
-        size: PropTypes.oneOf(tagSize),
-        color: PropTypes.oneOf(tagColors),
-        type: PropTypes.oneOf(tagType),
-        closable: PropTypes.bool,
-        visible: PropTypes.bool,
-        onClose: PropTypes.func,
-        onClick: PropTypes.func,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        avatarSrc: PropTypes.string,
-        avatarShape: PropTypes.oneOf(avatarShapeSet),
-        'aria-label': PropTypes.string,
-    };
-
-    constructor(props: TagProps) {
-        super(props);
-        this.state = {
-            visible: true,
-        };
-        this.close = this.close.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-    }
-
-    // any other way to achieve this?
-    static getDerivedStateFromProps(nextProps: TagProps) {
-        if ('visible' in nextProps) {
-            return {
-                visible: nextProps.visible,
-            };
-        }
-        return null;
-    }
-
-    setVisible(visible: boolean) {
-        if (!('visible' in this.props)) {
-            this.setState({ visible });
-        }
-    }
-
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number) {
-        const { onClose } = this.props;
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-        onClose && onClose(value, e, tagKey);
-        // when user call e.preventDefault() in onClick callback, tag will not hidden
-        if (e.defaultPrevented) {
-            return;
-        }
-        this.setVisible(false);
-    }
-
-    handleKeyDown(event: any) {
-        const { closable, onClick, onKeyDown } = this.props;
-        switch (event.key) {
-            case "Backspace":
-            case "Delete":
-                closable && this.close(event, this.props.children, this.props.tagKey);
-                handlePrevent(event);
-                break;
-            case "Enter":
-                onClick(event);
-                handlePrevent(event);
-                break;
-            case 'Escape':
-                event.target.blur();
-                break;
-            default:
-                break;
-        }
-        onKeyDown && onKeyDown(event);
-    }
-
-    renderAvatar() {
-        const { avatarShape, avatarSrc } = this.props;
-        const avatar = <Avatar src={avatarSrc} shape={avatarShape} />;
-        return avatar;
-    }
-
-    render() {
-        const { tagKey, children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
-        const { visible: isVisible } = this.state;
-        const clickable = onClick !== Tag.defaultProps.onClick || closable;
-        // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
-        const a11yProps = { role: 'button', tabIndex: tabIndex | 0, onKeyDown: this.handleKeyDown };
-        const baseProps = {
-            ...attr,
-            onClick,
-            className: classNames(
-                prefixCls,
-                {
-                    [`${prefixCls}-default`]: size === 'default',
-                    [`${prefixCls}-small`]: size === 'small',
-                    [`${prefixCls}-large`]: size === 'large',
-                    [`${prefixCls}-${type}`]: type,
-                    [`${prefixCls}-${color}-${type}`]: color && type,
-                    [`${prefixCls}-closable`]: closable,
-                    [`${prefixCls}-invisible`]: !isVisible,
-                    [`${prefixCls}-avatar-${avatarShape}`]: avatarSrc,
-                },
-                className
-            ),
-        };
-        const wrapProps = clickable ? ({ ...baseProps, ...a11yProps }) : baseProps;
-        const closeIcon = closable ? (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-            <div className={`${prefixCls}-close`} onClick={e => this.close(e, children, tagKey)}>
-                <IconClose size="small" />
-            </div>
-        ) : null;
-        return (
-            <div aria-label={this.props['aria-label'] || isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : '' } {...wrapProps}>
-                <div className={`${prefixCls}-content`}>
-                    {avatarSrc ? this.renderAvatar() : null}
-                    {children}
-                    {closeIcon}
-                </div>
-            </div>
-        );
-    }
-}

package/tag/interface.ts

@@ -1,56 +0,0 @@
-import { PopoverProps } from '../popover/index';
-
-export type TagColor =
-    | 'amber'
-    | 'blue'
-    | 'cyan'
-    | 'green'
-    | 'grey'
-    | 'indigo'
-    | 'light-blue'
-    | 'light-green'
-    | 'lime'
-    | 'orange'
-    | 'pink'
-    | 'purple'
-    | 'red'
-    | 'teal'
-    | 'violet'
-    | 'yellow'
-    | 'white';
-export type TagType = 'ghost' | 'solid' | 'light';
-export type TagSize = 'default' | 'small' | 'large';
-export type AvatarShape = 'circle' | 'square';
-
-export interface TagProps {
-    children?: React.ReactNode;
-    tagKey?: string | number;
-    size?: TagSize;
-    color?: TagColor;
-    type?: TagType;
-    closable?: boolean;
-    visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    style?: React.CSSProperties;
-    className?: string;
-    avatarSrc?: string;
-    avatarShape?: AvatarShape;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    tabIndex?: number; // use internal, when tag in taInput, we want to use left arrow and right arrow to control the tag focus, so the tabIndex need to be -1. 
-}
-
-export interface TagGroupProps<T> {
-    style?: React.CSSProperties;
-    className?: string;
-    maxTagCount?: number;
-    restCount?: number;
-    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
-    size?: 'small' | 'large';
-    showPopover?: boolean;
-    popoverProps?: PopoverProps;
-    avatarShape?: AvatarShape;
-    mode?: string;
-    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
-}