feat(list): initial list component

Author: wewoor

src/components/list/index.tsx

@@ -0,0 +1,54 @@
+import './style.scss';
+import * as React from 'react';
+import { prefixClaName, classNames } from 'mo/common/className';
+
+export interface IItem<T = any> {
+    id?: string;
+    name?: string;
+    title?: string;
+    icon?: string;
+    disabled?: boolean;
+    data?: T;
+    className?: string;
+    onClick?(event: React.MouseEvent, item: IItem): void;
+}
+
+export interface IList<T = any> {
+    className?: string;
+    /**
+     * Default is vertical direction
+     */
+    direction?: 'horizontal' | 'vertical';
+}
+
+export function Item(props: React.PropsWithChildren<IItem>) {
+    const { id, onClick, disabled, className, children, ...others } = props;
+    const click = (e: React.MouseEvent) => {
+        if (onClick) {
+            onClick(e, props);
+        }
+    };
+    return (
+        <li
+            className={classNames('list-item', className, disabled)}
+            key={`${id}`}
+        >
+            <a className={'list-label'} onClick={click} {...others}>
+                {children}
+            </a>
+        </li>
+    );
+}
+
+export function List<T = any>(props: React.PropsWithChildren<IList<T>>) {
+    const { children, className, direction = 'vertical', ...others } = props;
+
+    return (
+        <ul
+            className={classNames(prefixClaName('list', className), direction)}
+            {...others}
+        >
+            {children}
+        </ul>
+    );
+}

src/components/list/style.scss

@@ -0,0 +1,36 @@
+@import 'mo/style/const';
+$list: 'list';
+
+#{prefix($list)} {
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+
+    .list-item {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        justify-content: left;
+        list-style: none;
+        position: relative;
+    }
+
+    &.vertical {
+        flex-direction: column;
+    }
+
+    &.horizontal {
+        flex-direction: row;
+    }
+
+    .list-label {
+        align-items: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 16px;
+        display: flex;
+        justify-content: left;
+        text-decoration: none;
+    }
+}

stories/components/9-List.stories.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { propsTable } from '../common/propsTable';
+
+import { List, Item } from 'mo/components/list';
+
+const stories = storiesOf('List', module);
+stories.addDecorator(withKnobs);
+
+const propDefinitions = [
+    {
+        property: 'render',
+        propType: '() => React.ReactNode',
+        required: false,
+        description: 'Default render content',
+        defaultValue: null,
+    },
+];
+
+stories.add(
+    'Basic Usage',
+    () => {
+        return (
+            <div>
+                <h2>简述</h2>
+                <p>
+                    ContextView
+                    组件主要是提供了一个可根据指定锚点位置、渲染内容的视图容器。
+                </p>
+                <h2>使用示例</h2>
+                <div>
+                    <h3>Direction - vertical</h3>
+                    <List direction="vertical">
+                        <Item>Item 1</Item>
+                        <Item>Item 1</Item>
+                        <Item>Item 1</Item>
+                    </List>
+                </div>
+                <div>
+                    <h3>Direction - horizontal</h3>
+                    <List direction="horizontal">
+                        <Item>Item 1</Item>
+                        <Item>Item 1</Item>
+                        <Item>Item 1</Item>
+                    </List>
+                </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>
+            );
+            ～～
+        `,
+        },
+    }
+);