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

package/breadcrumb/_story/breadcrumb.stories.js

@@ -0,0 +1,317 @@
+/* argus-disable unPkgSensitiveInfo */
+import React from 'react';
+import Breadcrumb from '../index';
+import Popover from '../../popover';
+import {
+  IconMore,
+  IconArrowRight,
+  IconHome,
+  IconArticle,
+  IconChevronRight,
+} from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Breadcrumb',
+}
+
+export const Default = () => (
+  <div>
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'default',
+      ]}
+      onClick={item => console.log(item)}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          icon: <IconHome />,
+          href: '#',
+        },
+        {
+          path: '/breadcrumb',
+          name: 'breadcrumb',
+          icon: <IconChevronRight />,
+        },
+        'icon',
+      ]}
+      onClick={item => console.log(item)}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'separator',
+        'string',
+      ]}
+      onClick={item => console.log(item)}
+      separator={'>'}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'separator',
+        'with icon',
+      ]}
+      onClick={item => console.log(item)}
+      separator={<IconArrowRight size={'small'} />}
+    />
+    <Breadcrumb
+      routes={['首页', '当这个页面标题很长时需要省略', '详情页']}
+      onClick={item => console.log(item)}
+    />
+    <Breadcrumb
+      routes={[
+        '首页',
+        '当层级很多的时候',
+        '又一层很长需要省略的时候',
+        '再一层',
+        '上上一层',
+        '上一层',
+        '详情页',
+      ]}
+      onClick={item => console.log(item)}
+    />
+  </div>
+);
+
+export const Compact = () => (
+  <div>
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'compact',
+      ]}
+      onClick={item => console.log(item)}
+      compact={true}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          icon: <IconHome />,
+        },
+        {
+          path: '/breadcrumb',
+          name: 'breadcrumb',
+          icon: <IconChevronRight />,
+        },
+        'icon',
+      ]}
+      onClick={item => console.log(item)}
+      compact={true}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'separator',
+        'string',
+      ]}
+      onClick={item => console.log(item)}
+      separator={'>'}
+      compact={true}
+    />
+    <Breadcrumb
+      routes={[
+        {
+          path: '/home',
+          name: 'home',
+        },
+        'breadcrumb',
+        'separator',
+        'icon',
+      ]}
+      onClick={item => console.log(item)}
+      separator={<IconArrowRight size={'small'} />}
+      compact={true}
+    />
+    <Breadcrumb
+      routes={['首页', '当这个页面标题很长时需要省略', '详情页']}
+      onClick={item => console.log(item)}
+      compact={true}
+    />
+    <Breadcrumb
+      routes={[
+        '首页',
+        '当层级很多的时候',
+        '又一层很长需要省略的时候',
+        '再一层',
+        '上上一层',
+        '上一层',
+        '详情页',
+      ]}
+      onClick={item => console.log(item)}
+      compact={true}
+    />
+  </div>
+);
+
+export const BreadcrumbItemJSX = () => (
+  <div>
+    <Breadcrumb onClick={item => console.log(item)}>
+      <Breadcrumb.Item onClick={item => console.log('child', item)}>home</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
+      <Breadcrumb.Item>default</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb onClick={item => console.log(item)}>
+      <Breadcrumb.Item icon={<IconHome />}></Breadcrumb.Item>
+      <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
+      <Breadcrumb.Item>default</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb separator={'>'} onClick={item => console.log(item)}>
+      <Breadcrumb.Item>home</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
+      <Breadcrumb.Item>separator</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb compact={true} onClick={item => console.log(item)}>
+      <Breadcrumb.Item>home</Breadcrumb.Item>
+      <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
+      <Breadcrumb.Item>compact</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb onClick={item => console.log(item)}>
+      <Breadcrumb.Item>首页</Breadcrumb.Item>
+      <Breadcrumb.Item>当这个页面标题很长时需要省略</Breadcrumb.Item>
+      <Breadcrumb.Item>详情页</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb onClick={item => console.log(item)}>
+      <Breadcrumb.Item>首页</Breadcrumb.Item>
+      <Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>
+      <Breadcrumb.Item>又一层很长需要省略的时候</Breadcrumb.Item>
+      <Breadcrumb.Item>再一层</Breadcrumb.Item>
+      <Breadcrumb.Item>上上一层</Breadcrumb.Item>
+      <Breadcrumb.Item>上一层</Breadcrumb.Item>
+      <Breadcrumb.Item>详情页</Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb></Breadcrumb>
+  </div>
+);
+
+export const Test = () => (
+  <div>
+    <Breadcrumb onClick={item => console.log(item)}>
+      <Breadcrumb.Item onClick={item => console.log('child', item)}>home jump</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
+      <Breadcrumb.Item>
+        <h1>default</h1>
+      </Breadcrumb.Item>
+    </Breadcrumb>
+    <Breadcrumb>
+      <Breadcrumb.Item icon={<IconHome />}></Breadcrumb.Item>
+      <Breadcrumb.Item icon={<IconArticle />}>
+        <h5>breadcrumb</h5>
+      </Breadcrumb.Item>
+      <Breadcrumb.Item>with icon</Breadcrumb.Item>
+    </Breadcrumb>
+  </div>
+);
+
+const separator = '-'; // 用于拼接 restItem 数组项的分隔符
+
+const renderMore = restItem => {
+  const content = (
+    <>
+      {restItem.map((item, idx) => (
+        <React.Fragment key={`restItem-${idx}`}>
+          {item}
+          {idx !== restItem.length - 1 && (
+            <span
+              style={{
+                color: 'var(--semi-color-text-2)',
+                marginRight: '6px',
+              }}
+            >
+              {separator}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  );
+  return (
+    <Popover
+      content={content}
+      style={{
+        padding: 12,
+      }}
+      showArrow
+    >
+      <IconMore />
+    </Popover>
+  );
+};
+
+export const RenderMore = () => (
+  <div
+    style={{
+      margin: '100px',
+    }}
+  >
+    <Breadcrumb
+      renderMore={restItem => renderMore(restItem)}
+      onClick={(item, e) => console.log(item, e)}
+    >
+      <Breadcrumb.Item>首页</Breadcrumb.Item>
+      <Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>
+      <Breadcrumb.Item>又一层</Breadcrumb.Item>
+      <Breadcrumb.Item>再一层</Breadcrumb.Item>
+      <Breadcrumb.Item>上上一层</Breadcrumb.Item>
+      <Breadcrumb.Item>上一层</Breadcrumb.Item>
+      <Breadcrumb.Item>详情页</Breadcrumb.Item>
+    </Breadcrumb>
+    <br />
+    <br />
+    <div>
+      <Breadcrumb
+        renderMore={restItem => renderMore(restItem)}
+        onClick={(item, e) => console.log(item, e)}
+        routes={[
+          {
+            path: '/',
+            href: '/',
+            icon: <IconHome />,
+          },
+          {
+            path: '/breadcrumb',
+            href: '/components/breadcrumb',
+            name: 'breadcrumb',
+            icon: <IconArticle />,
+          },
+          {
+            path: '/breadcrumb',
+            href: '/components/breadcrumb',
+            name: 'breadcrumb',
+            icon: <IconArticle />,
+          },
+          {
+            path: '/breadcrumb',
+            href: '/components/breadcrumb',
+            name: 'breadcrumb',
+            icon: <IconArticle />,
+          },
+          'with icon',
+        ]}
+      />
+    </div>
+  </div>
+);

package/breadcrumb/_story/breadcrumb.stories.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Breadcrumb } from '../../index';
+
+const stories = storiesOf('Breadcrumb', module);
+
+stories.add('breadcrumbitem', () => (
+    <div>
+        <Breadcrumb onClick={item => console.log(item)}>
+            <Breadcrumb.Item onClick={item => console.log('child', item)}>home</Breadcrumb.Item>
+            <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
+            <Breadcrumb.Item>default</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb onClick={item => console.log(item)}>
+            <Breadcrumb.Item icon={'home'}></Breadcrumb.Item>
+            <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
+            <Breadcrumb.Item>default</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb separator={'>'} onClick={item => console.log(item)}>
+            <Breadcrumb.Item>home</Breadcrumb.Item>
+            <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
+            <Breadcrumb.Item>separator</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb compact={true} onClick={item => console.log(item)}>
+            <Breadcrumb.Item>home</Breadcrumb.Item>
+            <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
+            <Breadcrumb.Item>compact</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb onClick={item => console.log(item)}>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>当这个页面标题很长时需要省略</Breadcrumb.Item>
+            <Breadcrumb.Item>详情页</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb onClick={item => console.log(item)}>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>
+            <Breadcrumb.Item>又一层很长需要省略的时候</Breadcrumb.Item>
+            <Breadcrumb.Item>再一层</Breadcrumb.Item>
+            <Breadcrumb.Item>上上一层</Breadcrumb.Item>
+            <Breadcrumb.Item>上一层</Breadcrumb.Item>
+            <Breadcrumb.Item>详情页</Breadcrumb.Item>
+        </Breadcrumb>
+        <Breadcrumb></Breadcrumb>
+    </div>
+));

package/breadcrumb/bread-context.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { showToolTipProps } from './index';
+import { BreadcrumbItemInfo } from './item';
+export interface BreadContextProps {
+    onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
+    showTooltip?: boolean | showToolTipProps;
+    compact?: boolean;
+    separator?: string | React.ReactNode;
+}
+
+const BreadContext = React.createContext<BreadContextProps>({});
+
+export default BreadContext;

package/breadcrumb/index.tsx

@@ -0,0 +1,293 @@
+/* eslint-disable max-len */
+import React from 'react';
+import cls from 'classnames';
+import propTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/breadcrumb/constants';
+import BreadcrumbFoundation, { BreadcrumbAdapter } from '@douyinfe/semi-foundation/breadcrumb/foundation';
+import warning from '@douyinfe/semi-foundation/utils/warning';
+import { isFunction } from 'lodash';
+import '@douyinfe/semi-foundation/breadcrumb/breadcrumb.scss';
+import { noop } from '@douyinfe/semi-foundation/utils/function';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import Popover from '../popover';
+import BreadcrumbItem, { RouteProps, BreadcrumbItemInfo } from './item';
+import BreadContext, { BreadContextProps } from './bread-context';
+import { TooltipProps } from '../tooltip';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const clsPrefix = cssClasses.PREFIX;
+
+export { RouteProps, BreadcrumbItemProps, BreadcrumbItemInfo } from './item';
+export interface showToolTipProps {
+    width?: string | number;
+    ellipsisPos?: 'end' | 'middle';
+    opts?: TooltipProps;
+}
+
+export type MoreType = 'default' | 'popover';
+
+export interface BreadcrumbProps extends BaseProps {
+    routes?: Array<RouteProps | string>;
+    onClick?: (route: RouteProps, event: React.MouseEvent) => void;
+    separator?: React.ReactNode;
+    compact?: boolean;
+    style?: React.CSSProperties;
+    renderItem?: (route: RouteProps) => React.ReactNode;
+    className?: string;
+    showTooltip?: boolean | showToolTipProps;
+    maxItemCount?: number;
+    autoCollapse?: boolean;
+    /* Customize the contents of the ellipsis area */
+    renderMore?: (restItem: Array<React.ReactNode>) => React.ReactNode;
+    /* Style type for ellipsis area */
+    moreType?: MoreType;
+}
+
+interface BreadcrumbState {
+    isCollapsed: boolean;
+}
+
+class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
+    static contextType: React.Context<BreadContextProps> = BreadContext;
+
+    static Item: typeof BreadcrumbItem = BreadcrumbItem;
+
+    static propTypes = {
+        routes: propTypes.array,
+        onClick: propTypes.func,
+        separator: propTypes.node,
+        compact: propTypes.bool,
+        children: propTypes.node,
+        style: propTypes.object,
+        renderItem: propTypes.func,
+        showTooltip: propTypes.oneOfType([
+            propTypes.shape({
+                width: propTypes.oneOfType([propTypes.string, propTypes.number]),
+                ellipsisPos: propTypes.oneOf(['end', 'middle']),
+                opts: propTypes.object,
+            }),
+            propTypes.bool,
+        ]),
+        className: propTypes.string,
+        autoCollapse: propTypes.bool,
+        maxItemCount: propTypes.number,
+
+        /* Customize the contents of the ellipsis area */
+        renderMore: propTypes.func,
+
+        /* Type of ellipsis area */
+        moreType: propTypes.oneOf(strings.MORE_TYPE),
+    };
+    static defaultProps = {
+        routes: [] as [],
+        onClick: noop,
+        renderItem: undefined as undefined,
+        separator: '/',
+        compact: true,
+        showTooltip: {
+            width: 150,
+            ellipsisPos: 'end',
+        },
+        autoCollapse: true,
+        moreType: 'default',
+        maxItemCount: 4,
+    };
+
+    constructor(props: BreadcrumbProps) {
+        super(props);
+        this.foundation = new BreadcrumbFoundation(this.adapter);
+        this.state = {
+            isCollapsed: true,
+        };
+        this.onClick = this.onClick.bind(this);
+    }
+
+    get adapter(): BreadcrumbAdapter<BreadcrumbProps, BreadcrumbState> {
+        return {
+            ...super.adapter,
+            notifyClick: (...args) => {
+                this.props.onClick(...args);
+            },
+            expandCollapsed: () =>
+                this.setState({
+                    isCollapsed: false,
+                }),
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    renderPopoverMore(restItem: Array<React.ReactNode>) {
+        const { separator } = this.props;
+        const content = (
+            <>
+                {
+                    restItem.map((item: React.ReactNode, idx: number) => (
+                        <React.Fragment key={`restItem-${idx}`}>
+                            {item}
+                            {idx !== restItem.length - 1 &&
+                                (
+                                    <span className={`${clsPrefix}-restItem`}>
+                                        {separator}
+                                    </span>
+                                )
+                            }
+                        </React.Fragment>
+                    ))
+                }
+            </>
+        );
+        return (
+            <Popover
+                content={content}
+                style={{
+                    padding: 12,
+                }}
+                showArrow
+            >
+                <IconMore />
+            </Popover>
+        );
+    }
+
+    handleCollapse = (template: Array<React.ReactNode>, itemsLen: number) => {
+        const { maxItemCount, renderMore, moreType } = this.props;
+        const hasRenderMore = isFunction(renderMore);
+        const restItem = template.slice(1, itemsLen - 3);
+        const spread = (
+            <span className={`${clsPrefix}-collapse`} key={`more-${itemsLen}`}>
+                <span className={`${clsPrefix}-item-wrap`}>
+                    <span
+                        className={`${clsPrefix}-item ${clsPrefix}-item-more`}
+                        onClick={item => this.foundation.handleExpand(item)}
+                    >
+                        {hasRenderMore && renderMore(restItem)}
+                        {!hasRenderMore && moreType === 'default' && <IconMore />}
+                        {!hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)}
+                    </span>
+                    <span className={`${clsPrefix}-separator`}>{this.props.separator}</span>
+                </span>
+            </span>
+        );
+        template.splice(1, itemsLen - maxItemCount, spread);
+        return template;
+    };
+
+    renderRouteItems = (items: Array<RouteProps>, shouldCollapse: boolean, moreTypeIsPopover: boolean) => {
+        const { renderItem, renderMore, maxItemCount } = this.props;
+        const restItemLength = items.length - maxItemCount;
+        const hasRenderMore = isFunction(renderMore);
+        const template = (
+            items.map((route, idx: number) => {
+                const key = route._origin.key || `item-${route.name || route.path}-${idx}`;
+                const inCollapseArea = idx > 0 && idx <= restItemLength;
+                return (
+                    <BreadcrumbItem
+                        {...route}
+                        key={key}
+                        active={idx === items.length - 1}
+                        route={route._origin}
+                        // eslint-disable-next-line max-len
+                        shouldRenderSeparator={!(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)}
+                    >
+                        {renderItem ? renderItem(route._origin) : route.name}
+                    </BreadcrumbItem>
+                );
+            })
+        );
+        return template;
+    };
+
+    renderList = (): Array<React.ReactNode> => {
+        const {
+            routes,
+            children,
+            autoCollapse,
+            maxItemCount,
+            renderMore,
+            moreType
+        } = this.props;
+        const { isCollapsed } = this.state;
+        const hasRoutes = routes && routes.length > 0;
+        const items = hasRoutes ?
+            this.foundation.genRoutes(routes) :
+            React.Children.toArray(children);
+        let template;
+        const itemLength = items.length; // children length
+
+        const restItemLength = itemLength - maxItemCount; // Omitted children items
+
+        const shouldCollapse = items && autoCollapse && itemLength > maxItemCount && isCollapsed; // Whether the number of children exceeds, need to collapse
+
+        const hasRenderMore = isFunction(renderMore); // Whether the user passes in the renderMore method
+        const moreTypeIsPopover = moreType === 'popover';
+
+        if (hasRoutes) {
+            template = this.renderRouteItems(items, shouldCollapse, moreTypeIsPopover);
+        } else {
+            template = (
+                items.map((item: any, idx: number) => {
+                    const inCollapseArea = idx > 0 && idx <= restItemLength;
+                    if (!item) {
+                        return item;
+                    }
+
+                    warning(
+                        item.type && !item.type.isBreadcrumbItem,
+                        '[Semi Breadcrumb]: Only accepts Breadcrumb.Item as its children'
+                    );
+
+                    return React.cloneElement(item, {
+                        key: `${idx}-item`,
+                        active: idx === items.length - 1,
+                        shouldRenderSeparator: !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)
+                    });
+                })
+            );
+        }
+
+        if (shouldCollapse) {
+            return this.handleCollapse(template, items.length);
+        }
+
+        return template;
+    };
+
+    onClick = (info: BreadcrumbItemInfo, event: React.MouseEvent) => {
+        this.foundation.handleClick(info, event);
+    };
+
+    render() {
+        const breadcrumbs = this.renderList();
+        const { compact, className, style, separator, showTooltip } = this.props;
+        const sizeCls = cls(className,
+            {
+                [`${clsPrefix}-wrapper`]: true,
+                [`${clsPrefix}-wrapper-compact`]: compact,
+                [`${clsPrefix}-wrapper-loose`]: !compact
+            }
+        );
+        return (
+            <BreadContext.Provider
+                value={{
+                    onClick: this.onClick,
+                    showTooltip,
+                    compact,
+                    separator,
+                }}
+            >
+                <nav aria-label={`${clsPrefix}`} className={sizeCls} style={style}>
+                    {breadcrumbs}
+                </nav>
+            </BreadContext.Provider>
+        );
+    }
+}
+
+export default Breadcrumb;