From bda09de46244e9054cdda10fe8859042502b57a1 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Sun, 14 Mar 2021 01:00:46 +0300 Subject: [PATCH] Web: Components: added story for TreeMenu --- .../asc-web-components/.storybook/main.js | 1 + .../asc-web-components/tree-menu/index.js | 41 ++++++- .../tree-menu/sub-components/tree-node.js | 3 + .../tree-menu/tree-menu.stories.js | 114 +++++++++--------- .../tree-menu/tree-menu.stories.mdx | 59 +++++++++ 5 files changed, 156 insertions(+), 62 deletions(-) create mode 100644 packages/asc-web-components/tree-menu/tree-menu.stories.mdx diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js index 337bd02391..ac9cb6b1aa 100644 --- a/packages/asc-web-components/.storybook/main.js +++ b/packages/asc-web-components/.storybook/main.js @@ -57,6 +57,7 @@ module.exports = { "../toggle-button/*.stories.@(js|mdx)", "../toggle-content/*.stories.@(js|mdx)", "../tooltip/*.stories.@(js|mdx)", + "../tree-menu/*.stories.@(js|mdx)", ], addons: [ "@storybook/addon-links", diff --git a/packages/asc-web-components/tree-menu/index.js b/packages/asc-web-components/tree-menu/index.js index b6e5b9cae8..4ea39c50b8 100644 --- a/packages/asc-web-components/tree-menu/index.js +++ b/packages/asc-web-components/tree-menu/index.js @@ -275,33 +275,70 @@ const TreeMenu = React.forwardRef((props, ref) => { }); TreeMenu.propTypes = { + /** Whether support checked */ checkable: PropTypes.bool, + /** Whether can drag treeNode */ draggable: PropTypes.bool, + /** Whether disabled the tree */ disabled: PropTypes.bool, + /** Whether multiple select */ multiple: PropTypes.bool, + /** Whether show icon */ showIcon: PropTypes.bool, + /** Whether show line */ showLine: PropTypes.bool, + /** Expand all treeNodes */ defaultExpandAll: PropTypes.bool, + /** Auto expand parent treeNodes when init */ defaultExpandParent: PropTypes.bool, icon: PropTypes.func, + /** it execs when fire the tree's dragend event */ + onDragEnd: PropTypes.func, + /** it execs when fire the tree's dragenter event */ + onDragEnter: PropTypes.func, + /** it execs when fire the tree's dragleave event */ + onDragLeave: PropTypes.func, + /** it execs when fire the tree's dragover event */ + onDragOver: PropTypes.func, + /** it execs when fire the tree's dragstart event */ onDragStart: PropTypes.func, + /** it execs when fire the tree's drop event */ onDrop: PropTypes.func, + /** fire on treeNode expand or not */ + onExpand: PropTypes.func, + /** Trigger when a node is loaded. If you set the loadedKeys, you must handle onLoad to avoid infinity loop */ + onLoad: PropTypes.func, + /** call when mouse enter a treeNode */ + onMouseEnter: PropTypes.func, + /** call when mouse leave a treeNode */ + onMouseLeave: PropTypes.func, + /** select current treeNode and show customized contextmenu */ + onRightClick: PropTypes.func, + /** click the treeNode to fire */ + onSelect: PropTypes.func, + /** load data asynchronously and the return value should be a promise */ loadData: PropTypes.func, - + /** child elements */ children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), + /** Accepts class */ className: PropTypes.string, + /** Accepts id */ id: PropTypes.string, + /** Accepts css style */ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), disableSwitch: PropTypes.bool, - + /** to select the selection style of the active node */ isFullFillSelection: PropTypes.bool, + /** for setting the spacing between nodes */ gapBetweenNodes: PropTypes.string, + /** to set spacing between nodes on tablets and phones (if necessary) */ gapBetweenNodesTablet: PropTypes.string, + /** swipe the root node to the left if there are no nested elements */ isEmptyRootNode: PropTypes.bool, }; diff --git a/packages/asc-web-components/tree-menu/sub-components/tree-node.js b/packages/asc-web-components/tree-menu/sub-components/tree-node.js index ddb09c36c7..e0c8106ea0 100644 --- a/packages/asc-web-components/tree-menu/sub-components/tree-node.js +++ b/packages/asc-web-components/tree-menu/sub-components/tree-node.js @@ -359,8 +359,11 @@ const TreeNodeMenu = styled(TreeNode)` `; TreeNodeMenu.propTypes = { + /** The number of new elements in the node */ newItems: PropTypes.number, + /** to display the badge */ showBadge: PropTypes.bool, + /** call when click on badge */ onBadgeClick: PropTypes.func, }; TreeNodeMenu.defaultProps = { theme: Base }; diff --git a/packages/asc-web-components/tree-menu/tree-menu.stories.js b/packages/asc-web-components/tree-menu/tree-menu.stories.js index 42c3971be8..3822a83ef1 100644 --- a/packages/asc-web-components/tree-menu/tree-menu.stories.js +++ b/packages/asc-web-components/tree-menu/tree-menu.stories.js @@ -1,21 +1,9 @@ import React, { useState } from "react"; -import { storiesOf } from "@storybook/react"; -import { - withKnobs, - boolean, - text, - select, - number, -} from "@storybook/addon-knobs/react"; -import withReadme from "storybook-readme/with-readme"; -import Readme from "./README.md"; import TreeMenu from "."; import TreeNode from "./sub-components/tree-node"; -import { Icons } from "../icons"; -import { action } from "@storybook/addon-actions"; -import ExpanderDownIcon from "../../../../../public/images/expander-down.react.svg"; -import ExpanderRightIcon from "../../../../../public/images/expander-right.react.svg"; -const iconNames = Object.keys(Icons); +import ExpanderDownIcon from "../public/static/images/expander-down.react.svg"; +import ExpanderRightIcon from "../public/static/images/expander-right.react.svg"; +import CatalogFolderIcon from "../public/static/images/catalog.folder.react.svg"; const treeData = [ { @@ -24,13 +12,19 @@ const treeData = [ }, ]; -const TreeMenuStory = (props) => { - // eslint-disable-next-line react/prop-types - const { data } = props; - +const Template = ({ + data, + title, + newItems, + showBadge, + onSelect, + onLoad, + onCheck, + onRightClick, + ...args +}) => { const [gData, setGData] = useState(data); const [autoExpandParent, setAutoExpandParent] = useState(true); - const [expandedKeys, setExpandedKeys] = useState([ "0-0-key", "0-0-0-key", @@ -107,6 +101,7 @@ const TreeMenuStory = (props) => { } setGData(treeData); }; + const onExpand = (expandedKeys) => { setExpandedKeys(expandedKeys); setAutoExpandParent(false); @@ -117,15 +112,18 @@ const TreeMenuStory = (props) => { if (item.children && item.children.length) { return ( + } onBadgeClick={onBadgeClick} - newItems={number("newItems", 0)} - showBadge={boolean("showBadge", false)} + newItems={newItems} + showBadge={showBadge} > {getTreeNodes(item.children)} @@ -134,11 +132,12 @@ const TreeMenuStory = (props) => { return ( ); }); @@ -149,33 +148,16 @@ const TreeMenuStory = (props) => { return null; } if (obj.expanded) { - return ; + return ; } else { - return ( - - ); + return ; } }; return (
{ onDrop={(info) => onDrop(info)} onDragEnter={onDragEnter} switcherIcon={switcherIcon} - onSelect={action("select")} - onLoad={action("load")} - onCheck={action("check")} - onRightClick={action("rightClick")} + onSelect={() => onSelect("select")} + onLoad={() => onLoad("load")} + onCheck={() => onCheck("check")} + onRightClick={() => onRightClick("rightClick")} > {getTreeNodes(gData)} @@ -194,7 +176,19 @@ const TreeMenuStory = (props) => { ); }; -storiesOf("Components|Tree", module) - .addDecorator(withKnobs) - .addDecorator(withReadme(Readme)) - .add("base", () => ); +export const basic = Template.bind({}); +basic.args = { + checkable: false, + draggable: false, + disabled: false, + multiple: false, + showIcon: true, + isFullFillSelection: true, + isEmptyRootNode: false, + defaultExpandAll: false, + defaultExpandParent: true, + data: treeData, + title: "Title", + newItems: 0, + showBadge: false, +}; diff --git a/packages/asc-web-components/tree-menu/tree-menu.stories.mdx b/packages/asc-web-components/tree-menu/tree-menu.stories.mdx new file mode 100644 index 0000000000..750f8c41fc --- /dev/null +++ b/packages/asc-web-components/tree-menu/tree-menu.stories.mdx @@ -0,0 +1,59 @@ +import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks"; +import * as stories from "./tree-menu.stories.js"; + +import TreeMenu from "./"; +import TreeNode from "./sub-components/tree-node.js"; + + + +# TreeMenu + +Tree menu description + + + + + + + +### Usage + +```js +import TreeMenu from "@appserver/components/tree-menu"; +``` + +```jsx + +``` + +### Properties TreeNode + +| Props | Type | Required | Values | Default | Description | +| ----------------- | :----------------: | :------: | :----: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `checkable` | `bool` | - | - | - | control node checkable if Tree is checkable | +| `className` | `string` | - | - | - | additional class to treeNode | +| `disableCheckbox` | `bool` | - | - | `false` | whether disable the treeNode' checkbox | +| `disabled` | `bool` | - | - | `false` | whether disabled the treeNode | +| `icon` | `element`,`func` | - | - | `false` | customize icon. When you pass component, whose render will receive full TreeNode props as component props | +| `isLeaf` | `bool` | - | - | `false` | whether it's leaf node | +| `key` | `bool` | - | - | - | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes | +| `style` | `object` | - | - | - | set style to treeNode | +| `title` | `string`,`element` | - | - | - | tree/subTree's title | +| `newItems` | `number` | - | - | - | The number of new elements in the node | +| `onBadgeClick` | `func` | - | - | - | call when click on badge | +| `showBadge` | `bool` | - | - | - | to display the badge |