feat(list): add basic List component

Author: wewoor

src/common/style.ts

@@ -1,54 +1,3 @@
 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>
-    );
-}
+export * from './list';
+export * from './item';

src/components/list/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { classNames } from 'mo/common/className';
+import { IList } from './list';
+
+export interface IItem<T = any> extends IList {
+    icon?: string;
+    disabled?: boolean;
+    data?: T;
+}
+
+export function Item(props: React.PropsWithChildren<IItem>) {
+    const { id, onClick, disabled, active, className, children, ...others } = props;
+    const click = (e: React.MouseEvent) => {
+        if (onClick) {
+            onClick(e, props);
+        }
+    };
+    const claNames = classNames('list-item', className, disabled, active === id ? 'active' : '');
+    return (
+        <li
+            className={claNames}
+            key={`${id}`}
+        >
+            <a className={'item-container'} onClick={click} {...others as any}>
+                {children}
+            </a>
+        </li>
+    );
+}

src/components/list/item.tsx

@@ -0,0 +1,33 @@
+import './style.scss';
+import * as React from 'react';
+import { prefixClaName, classNames } from 'mo/common/className';
+import { ComponentProps } from 'react';
+import { IItem } from './item';
+import { cloneReactChildren } from 'mo/react';
+
+export interface IList<T = any> extends ComponentProps<any> {
+    /**
+     * Default is vertical mode
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * Current active 
+     */
+    active?: string;
+    onClick?(event: React.MouseEvent, item?: IItem): void;
+}
+
+export function List<T = any>(props: React.PropsWithChildren<IList<T>>) {
+    const { children, active, onClick, className, mode = 'vertical', ...others } = props;
+    const claNames = classNames(prefixClaName('list'), className, mode);
+    return (
+        <ul
+            {...others}
+            className={claNames}
+        >
+            {
+                cloneReactChildren<IList>(children, { active, onClick })
+            }
+        </ul>
+    );
+}

src/components/list/list.tsx

@@ -1,8 +1,9 @@
-@import 'mo/style/const';
+@import 'mo/style/common';
 $list: 'list';
 
 #{prefix($list)} {
     display: flex;
+    height: 100%;
     margin: 0 auto;
     padding: 0;
     width: 100%;
@@ -14,23 +15,42 @@ $list: 'list';
         justify-content: left;
         list-style: none;
         position: relative;
+
+        // &.active {
+            
+        // }
+    }
+
+    .list-item:hover {
+        opacity: 0.8;
     }
 
     &.vertical {
         flex-direction: column;
+
+        .list-item {
+            height: 50px;
+            width: 100%;
+        }
     }
 
     &.horizontal {
         flex-direction: row;
+
+        .list-item {
+            margin-left: 10px;
+        }
     }
 
-    .list-label {
+    .item-container {
         align-items: center;
         background-position: center center;
         background-repeat: no-repeat;
         background-size: 16px;
         display: flex;
+        height: 100%;
         justify-content: left;
         text-decoration: none;
+        width: 100%;
     }
 }

src/components/list/style.scss

@@ -167,3 +167,16 @@
         background: rgba(0, 0, 0, 0.1);
     }
 }
+
+// =============== List =============== //
+
+#{prefix($list)} {
+    .list-item {
+        background-color: #252526;
+        color: #bbb;
+
+        &.active {
+            background-color: #316ac5;
+        }
+    }
+}

src/style/theme.scss

@@ -4,6 +4,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { propsTable } from '../common/propsTable';
 
 import { List, Item } from 'mo/components/list';
+import { useState } from 'react';
 
 const stories = storiesOf('List', module);
 stories.addDecorator(withKnobs);
@@ -21,25 +22,32 @@ const propDefinitions = [
 stories.add(
     'Basic Usage',
     () => {
+
+        const [active, setActive] = useState('1');
+
+        const click = (e, item) => {
+            console.log('item.', e, item);
+            setActive(item.id);
+        }
+
         return (
             <div>
                 <h2>简述</h2>
                 <p>
-                    ContextView
-                    组件主要是提供了一个可根据指定锚点位置、渲染内容的视图容器。
+                    List component.
                 </p>
                 <h2>使用示例</h2>
                 <div>
                     <h3>Direction - vertical</h3>
-                    <List direction="vertical">
-                        <Item>Item 1</Item>
-                        <Item>Item 1</Item>
-                        <Item>Item 1</Item>
+                    <List className="custom-list-1" mode="vertical" onClick={click} active={active}>
+                        <Item id="1">Item 1</Item>
+                        <Item id="2">Item 1</Item>
+                        <Item id="3">Item 1</Item>
                     </List>
                 </div>
                 <div>
                     <h3>Direction - horizontal</h3>
-                    <List direction="horizontal">
+                    <List className="custom-list-2" mode="horizontal">
                         <Item>Item 1</Item>
                         <Item>Item 1</Item>
                         <Item>Item 1</Item>