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

package/tabs/_story/tabs.stories.tsx

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

package/tabs/index.tsx

@@ -0,0 +1,300 @@
+
+import React, { createRef, MouseEvent, ReactElement, ReactNode, RefCallback, RefObject, isValidElement } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/tabs/constants';
+import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
+import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
+import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/tabs/foundation';
+import { isEqual, pick, omit } from 'lodash';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/tabs/tabs.scss';
+
+import TabBar from './TabBar';
+import TabPane from './TabPane';
+import TabsContext from './tabs-context';
+import { TabsProps, PlainTab, TabBarProps } from './interface';
+
+const panePickKeys = Object.keys(omit(TabPane.propTypes, ['children']));
+
+export * from './interface';
+
+export interface TabsState {
+    activeKey: string;
+    panes: Array<PlainTab>;
+}
+
+class Tabs extends BaseComponent<TabsProps, TabsState> {
+    static TabPane = TabPane;
+
+    static propTypes = {
+        activeKey: PropTypes.string,
+        className: PropTypes.string,
+        collapsible: PropTypes.bool,
+        contentStyle: PropTypes.oneOfType([PropTypes.object]),
+        defaultActiveKey: PropTypes.string,
+        keepDOM: PropTypes.bool,
+        lazyRender: PropTypes.bool,
+        onChange: PropTypes.func,
+        onTabClick: PropTypes.func,
+        renderTabBar: PropTypes.func,
+        size: PropTypes.oneOf(strings.SIZE),
+        style: PropTypes.object,
+        tabBarClassName: PropTypes.string,
+        tabBarExtraContent: PropTypes.node,
+        tabBarStyle: PropTypes.object,
+        tabList: PropTypes.array,
+        tabPaneMotion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+        tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
+        type: PropTypes.oneOf(strings.TYPE_MAP),
+        onTabClose: PropTypes.func,
+    };
+
+    static defaultProps: TabsProps = {
+        children: [],
+        collapsible: false,
+        keepDOM: true,
+        lazyRender: false,
+        onChange: () => undefined,
+        onTabClick: () => undefined,
+        size: 'large',
+        tabPaneMotion: true,
+        tabPosition: 'top',
+        type: 'line',
+        onTabClose: () => undefined
+    };
+
+    contentRef: RefObject<HTMLDivElement>;
+    contentHeight: string;
+    foundation: TabsFoundation;
+
+    constructor(props: TabsProps) {
+        super(props);
+
+        this.foundation = new TabsFoundation(this.adapter);
+
+        this.state = {
+            activeKey: this.foundation.getDefaultActiveKey(),
+            panes: [],
+        };
+        this.contentRef = createRef();
+        this.contentHeight = 'auto';
+    }
+
+    get adapter(): TabsAdapter<TabsProps, TabsState> {
+        return {
+            ...super.adapter,
+            collectPane: (): void => {
+                const { tabList, children } = this.props;
+                if (Array.isArray(tabList) && tabList.length) {
+                    this.setState({ panes: tabList });
+                    return;
+                }
+                const panes = React.Children.map(children, (child: any) => {
+                    if (child) {
+                        const { tab, icon, disabled, itemKey, closable } = child.props;
+                        return { tab, icon, disabled, itemKey, closable };
+                    }
+                    return undefined;
+                });
+                this.setState({ panes });
+            },
+            collectActiveKey: (): void => {
+                let panes = [];
+                const { tabList, children, activeKey: propsActiveKey } = this.props;
+                if (typeof propsActiveKey !== 'undefined') {
+                    return;
+                }
+                const { activeKey } = this.state;
+                if (Array.isArray(tabList) && tabList.length) {
+                    panes = tabList;
+                } else {
+                    panes = React.Children.map(children, (child: any) => {
+                        if (child) {
+                            const { tab, icon, disabled, itemKey, closable } = child.props;
+                            return { tab, icon, disabled, itemKey, closable };
+                        }
+                        return undefined;
+                    });
+                }
+                if (panes.findIndex(p => p.itemKey === activeKey) === -1){
+                    if (panes.length>0){
+                        this.setState({activeKey: panes[0].itemKey});
+                    } else {
+                        this.setState({activeKey: ''});
+                    }
+                }
+                
+            },
+            notifyTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>): void => {
+                this.props.onTabClick(activeKey, event);
+            },
+            notifyChange: (activeKey: string): void => {
+                this.props.onChange(activeKey);
+            },
+            setNewActiveKey: (activeKey: string): void => {
+                this.setState({ activeKey });
+            },
+            getDefaultActiveKeyFromChildren: (): string => {
+                const { tabList, children } = this.props;
+                let activeKey = '';
+                const list = tabList ? tabList : React.Children.toArray(children).map((child) => isValidElement(child) ? child.props : null);
+                list.forEach(item => {
+                    if (item && !activeKey && !item.disabled) {
+                        activeKey = item.itemKey;
+                    }
+                });
+                return activeKey;
+            },
+            notifyTabDelete: (tabKey: string) => {
+                this.props.onTabClose && this.props.onTabClose(tabKey);
+            }
+        };
+    }
+
+    static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState> {
+        const states: Partial<TabsState> = {};
+        if (!isNullOrUndefined(props.activeKey) && props.activeKey !== state.activeKey) {
+            states.activeKey = props.activeKey;
+        }
+        return states;
+    }
+
+    componentDidUpdate(prevProps: TabsProps): void {
+        // Panes state acts on tab bar, no need to compare TabPane children
+        const prevChildrenProps = React.Children.toArray(prevProps.children).map((child) =>
+            pick(isValidElement(child) ? child.props : null, panePickKeys)
+        );
+        const nowChildrenProps = React.Children.toArray(this.props.children).map((child) =>
+            pick(isValidElement(child) ? child.props : null, panePickKeys)
+        );
+
+        const isTabListType = this.props.tabList || prevProps.tabList;
+
+        if (!isEqual(this.props.tabList, prevProps.tabList)) {
+            this.foundation.handleTabListChange();
+        }
+
+        // children变化，tabList方式使用时，啥也不用做
+        // children变化，非tabList方式使用，需要重新取activeKey。TabPane可能是异步更新的，若不重新取，未设activeKey时，第一个不会自动激活
+        // children changed: do nothing in tabList case
+        // children changed: recalc activeKey. TabPane could be updated async. If not recalc the first panel will not be activated
+        if (!isEqual(prevChildrenProps, nowChildrenProps) && !isTabListType) {
+            this.foundation.handleTabPanesChange();
+        }
+    }
+
+    setContentRef: RefCallback<HTMLDivElement> = ref => {
+        this.contentRef = { current: ref };
+    };
+
+    onTabClick = (activeKey: string, event: MouseEvent<HTMLDivElement>): void => {
+        this.foundation.handleTabClick(activeKey, event);
+    };
+
+    rePosChildren = (children: ReactElement[], activeKey: string): ReactElement[] => {
+        const newChildren: ReactElement[] = [];
+
+        const falttenChildren = React.Children.toArray(children) as ReactElement[];
+
+        if (children.length) {
+            newChildren.push(...falttenChildren.filter(child => child.props && child.props.itemKey === activeKey));
+            newChildren.push(...falttenChildren.filter(child => child.props && child.props.itemKey !== activeKey));
+        }
+
+        return newChildren;
+    };
+
+    getActiveItem = (): ReactNode | ReactNode[] => {
+        const { activeKey } = this.state;
+        const { children, tabList } = this.props;
+        if (tabList || !Array.isArray(children)) {
+            return children;
+        }
+        return React.Children.toArray(children).filter((pane) => {
+            if (isValidElement(pane) && pane.type && (pane.type as any).isTabPane) {
+                return pane.props.itemKey === activeKey;
+            }
+            return true;
+        });
+    };
+
+    deleteTabItem = (tabKey: string, event: MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+        this.foundation.handleTabDelete(tabKey);
+    }
+
+    render(): ReactNode {
+        const {
+            children,
+            className,
+            collapsible,
+            contentStyle,
+            keepDOM,
+            lazyRender,
+            renderTabBar,
+            size,
+            style,
+            tabBarClassName,
+            tabBarExtraContent,
+            tabBarStyle,
+            tabPaneMotion,
+            tabPosition,
+            type,
+            ...restProps
+        } = this.props;
+        const { panes, activeKey } = this.state;
+        const tabWrapperCls = cls(className, {
+            [cssClasses.TABS]: true,
+            [`${cssClasses.TABS}-${tabPosition}`]: tabPosition,
+        });
+
+        const tabContentCls = cls({
+            [cssClasses.TABS_CONTENT]: true,
+            [`${cssClasses.TABS_CONTENT}-${tabPosition}`]: tabPosition,
+        });
+
+        const tabBarProps = {
+            activeKey,
+            className: tabBarClassName,
+            collapsible,
+            list: panes,
+            onTabClick: this.onTabClick,
+            size,
+            style: tabBarStyle,
+            tabBarExtraContent,
+            tabPosition,
+            type,
+            deleteTabItem: this.deleteTabItem
+        } as TabBarProps;
+
+        const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : <TabBar {...tabBarProps} />;
+        const content = keepDOM ? children : this.getActiveItem();
+
+        return (
+            <div className={tabWrapperCls} style={style} {...getDataAttr(restProps)}>
+                {tabBar}
+                <TabsContext.Provider
+                    value={{
+                        activeKey,
+                        lazyRender,
+                        panes,
+                        tabPaneMotion,
+                        tabPosition,
+                    }}
+                >
+                    <div
+                        ref={this.setContentRef}
+                        role="tab-content"
+                        className={tabContentCls}
+                        style={{ ...contentStyle }}
+                    >
+                        {content}
+                    </div>
+                </TabsContext.Provider>
+            </div>
+        );
+    }
+}
+
+export default Tabs;

package/tabs/interface.ts

@@ -0,0 +1,83 @@
+import { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+import { Motion } from '../_base/base';
+
+export type TabType = 'line' | 'card' | 'button';
+export type TabSize = 'small' | 'medium' | 'large';
+export type TabPosition = 'top' | 'left';
+
+export interface PlainTab {
+    disabled?: boolean;
+    icon?: ReactNode;
+    itemKey: string;
+    tab?: ReactNode;
+    closable?: boolean;
+}
+
+
+export interface TabsProps {
+    activeKey?: string;
+    children?: ReactNode | Array<ReactNode>;
+    className?: string;
+    collapsible?: boolean;
+    contentStyle?: CSSProperties;
+    defaultActiveKey?: string;
+    keepDOM?: boolean;
+    lazyRender?: boolean;
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    size?: TabSize;
+    style?: CSSProperties;
+    tabBarClassName?: string;
+    tabBarExtraContent?: ReactNode;
+    tabBarStyle?: CSSProperties;
+    tabList?: PlainTab[];
+    tabPaneMotion?: boolean;
+    tabPosition?: TabPosition;
+    type?: TabType;
+    onTabClose?: (tabKey: string) => void;
+}
+
+export interface TabBarProps {
+    activeKey?: string;
+    className?: string;
+    collapsible?: boolean;
+    list?: Array<PlainTab>;
+    onTabClick?: (activeKey: string, event: MouseEvent<Element>) => void;
+    size?: TabSize;
+    style?: CSSProperties;
+    tabBarExtraContent?: ReactNode;
+    tabPosition?: TabPosition;
+    type?: TabType;
+    dropdownClassName?: string;
+    dropdownStyle?: CSSProperties;
+    closable?: boolean;
+    deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+}
+
+export interface TabPaneProps {
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    itemKey?: string;
+    style?: CSSProperties;
+    tab?: ReactNode;
+    closable?: boolean,
+}
+
+export interface TabPaneTransitionProps {
+    [key: string]: any;
+
+    children?: ((p: { transform?: string; opacity: number }) => ReactNode | undefined) | undefined;
+    direction?: boolean;
+    mode?: 'vertical' | 'horizontal';
+    motion?: Motion;
+}
+
+export interface TabContextValue {
+    activeKey?: string;
+    lazyRender?: boolean;
+    panes?: Array<PlainTab>;
+    tabPaneMotion?: boolean;
+    tabPosition?: TabPosition;
+}

package/tabs/tabs-context.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TabContextValue } from './interface';
+
+const TabsContext = React.createContext<TabContextValue>({});
+
+export default TabsContext;

package/tag/_story/Demo.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import React from 'react';
+import Tag from '../index';
+import TagGroup from '../group';
+
+const Demo = () => (
+    <div>
+        <Tag color="amber">Tag</Tag>
+        <Tag type="ghost">Tag</Tag>
+        <Tag type="light">Tag</Tag>
+        <TagGroup tagList={[
+            { color: 'white', children: '抖音' },
+            { color: 'white', children: '火山小视频' },
+            { color: 'white', children: 'jkl' },
+            { color: 'white', children: 'vigo' },
+            { color: 'white', children: '皮皮虾' },
+        ]}
+        />
+    </div>
+);
+
+export default Demo;

package/tag/_story/tag.stories.js

@@ -0,0 +1,234 @@
+/* argus-disable unPkgSensitiveInfo */
+import React 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'}>
+        李白
+      </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',
+};

package/tag/_story/tag.stories.tsx

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