feat(components): add Breadcrumb

Author: wewoor

src/components/breadcrumb/index.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
+import { ComponentProps } from 'react';
+import { Icon } from '../icon';
+
+export interface IBreadcrumbItem {
+    id: string;
+    href?: string;
+    name?: string;
+    icon?: typeof Icon;
+    className?: string;
+    render?(item: IBreadcrumbItem): ReactNode;
+}
+
+export interface IBreadcrumb extends ComponentProps<'div'> {
+    routes: IBreadcrumbItem[];
+    separator?: typeof Icon;
+    onClick?(event: React.MouseEvent, item?: IBreadcrumbItem): void;
+}
+
+export const defaultBreadcrumbClassName = prefixClaName('breadcrumb');
+
+export const breadcrumbItemClassName = getBEMElement(
+    defaultBreadcrumbClassName,
+    'item'
+);
+
+export const breadcrumbLabelClassName = getBEMElement(
+    defaultBreadcrumbClassName,
+    'label'
+);
+
+export function Breadcrumb(props: IBreadcrumb) {
+    const { onClick, className, separator, routes = [], ...extra } = props;
+
+    const getEvents = (item: IBreadcrumbItem) => {
+        return {
+            onClick: function (e: React.MouseEvent) {
+                onClick?.(e, item);
+            },
+        };
+    };
+
+    const claNames = classNames(defaultBreadcrumbClassName, className);
+    const len = routes.length;
+    const sep = separator || <Icon type="chevron-right" />;
+    return (
+        <div className={claNames} {...extra}>
+            {routes.map((route: IBreadcrumbItem, index: number) => (
+                <a
+                    key={route.id}
+                    className={classNames(
+                        breadcrumbItemClassName,
+                        route.className
+                    )}
+                    href={route.href}
+                    {...getEvents(route)}
+                >
+                    {route.icon}
+                    <span className={breadcrumbLabelClassName}>
+                        {route.render ? route.render(route) : route.name}
+                    </span>
+                    {len - index > 1 ? sep : null}
+                </a>
+            ))}
+        </div>
+    );
+}

src/components/breadcrumb/style.scss

@@ -0,0 +1,30 @@
+@import 'mo/style/common';
+
+#{$breadcrumb} {
+    display: flex;
+
+    &__item {
+        align-items: center;
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        justify-content: left;
+        text-decoration: none;
+
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+
+    &__label {
+        align-items: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 16px;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        text-decoration: none;
+        width: 100%;
+    }
+}

stories/components/18-Breadcrumb.stories.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { propsTable } from '../common/propsTable';
+
+import { Breadcrumb, IBreadcrumbItem } from 'mo/components/breadcrumb';
+
+const stories = storiesOf('Breadcrumb', module);
+stories.addDecorator(withKnobs);
+
+const propDefinitions = [
+    {
+        property: 'render',
+        propType: '() => React.ReactNode',
+        required: false,
+        description: 'Default render content',
+        defaultValue: null,
+    },
+];
+
+stories.add(
+    'Basic Usage',
+    () => {
+        const click = (e, item) => {
+            console.log('onClick breadcrumb item.', e, item);
+        };
+
+        const data: IBreadcrumbItem[] = [
+            {
+                id: 'item1',
+                name: 'item1',
+                href: '#',
+            },
+            {
+                id: 'item2',
+                name: 'item1',
+                href: '#',
+            },
+            {
+                id: 'item3',
+                name: 'item1',
+                href: '#',
+            },
+        ];
+
+        return (
+            <div>
+                <h2>简述</h2>
+                <p>Breadcrumb component.</p>
+                <h2>使用示例</h2>
+                <div>
+                    <h3>Basic</h3>
+                    <Breadcrumb
+                        className="custom-list-1"
+                        onClick={click}
+                        routes={data}
+                    />
+                </div>
+            </div>
+        );
+    },
+    {
+        info: {
+            inline: true,
+            TableComponent: () => propsTable({ propDefinitions }),
+            // propTablesExclude: [],
+            text: `
+            代码示例：
+            ~~~js
+            import { useContextView } from 'mo/components/contextview';
+
+            const contextView = useContextView();
+
+            const mouseMove = (event: React.MouseEvent): void => {
+                contextView.show({
+                    x: event.clientX,
+                    y: event.clientY,
+                }, () => {
+                    return (
+                        <h1>Hello World</h1>
+                    );
+                });
+            };
+
+            return (
+                <div>
+                    <div id="topLeft"
+                        onMouseMove={mouseMove}
+                        style={
+                            {
+                                position: 'absolute',
+                                width: 200,
+                                height: 200,
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                background: '#dddddd',
+                            }
+                        }>
+                            Hover me!
+                    </div>
+                </div>
+            );
+            ～～
+        `,
+        },
+    }
+);