feat(menu): add controlled usage

Yoctol · Apr 10, 2019 · bf0abfe · bf0abfe
1 parent 12e6e10
commit bf0abfe
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 8 deletions.
diff --git a/docs/Menu.mdx b/docs/Menu.mdx
@@ -6,7 +6,7 @@ route: /components/menu
 
 import { PropsTable, Playground } from 'docz';
 import { range } from 'ramda';
-import { Menu, Box } from 'tailor-ui';
+import { Menu, Flex, Space, Button } from 'tailor-ui';
 
 # Menu
 
@@ -61,6 +61,53 @@ import { Menu } from 'tailor-ui';
 
 </Playground>
 
+### Controlled usage
+
+<Playground>
+  {() => {
+    const [subKeys, setSubKeys] = React.useState(['understood']);
+    const [value, setValue] = React.useState('1');
+
+    return (
+      <>
+        <Flex mb="3">
+          <Button onClick={() => setSubKeys([])}>Close All</Button>
+          <Space mx="1" />
+          <Button onClick={() => setSubKeys(['understood', 'kurator', 'touch'])}>Open All</Button>
+        </Flex>
+        <Menu subKeys={subKeys} onUpdateSubKeys={setSubKeys}>
+          <Menu.SubMenu id="understood" title="Group 1" icon="understood">
+            <Menu.Item active={value === '1'} onClick={() => setValue('1')}>
+              Item 1
+            </Menu.Item>
+            <Menu.Item active={value === '2'} onClick={() => setValue('2')}>
+              Item 2
+            </Menu.Item>
+          </Menu.SubMenu>
+          <Menu.SubMenu id="kurator" title="Group 2" icon="kurator">
+            <Menu.Item active={value === '3'} onClick={() => setValue('3')}>
+              Item 3
+            </Menu.Item>
+            <Menu.Item active={value === '4'} onClick={() => setValue('4')}>
+              Item 4
+            </Menu.Item>
+          </Menu.SubMenu>
+          <Menu.SubMenu id="touch" title="Group 3" icon="touch">
+            <Menu.Item active={value === '5'} onClick={() => setValue('5')}>
+              Item 5
+            </Menu.Item>
+            <Menu.Item active={value === '6'} onClick={() => setValue('6')}>
+              Item 6
+            </Menu.Item>
+          </Menu.SubMenu>
+        </Menu>
+      </>
+    );
+
+}}
+
+</Playground>
+
 ### With current sub only
 
 <Playground>

diff --git a/package.json b/package.json
@@ -112,7 +112,7 @@
     "stylelint-config-yoctol": "^1.1.1",
     "stylelint-processor-styled-components": "^1.6.0",
     "ts-jest": "^24.0.2",
-    "typescript": "3.4.2"
+    "typescript": "3.4.3"
   },
   "husky": {
     "hooks": {

diff --git a/packages/tailor-ui/src/Menu/Menu.tsx b/packages/tailor-ui/src/Menu/Menu.tsx
@@ -9,14 +9,28 @@ import SubMenu from './SubMenu';
 interface MenuProps {
   width: number;
   currentSubOnly?: boolean;
+  subKeys?: string[];
   defaultSubKeys?: string[];
+  onUpdateSubKeys?: (keys: string[]) => void;
 }
 
 const Menu: FunctionComponent<MenuProps> & {
   SubMenu: typeof SubMenu;
   Item: typeof Item;
-} = ({ children, currentSubOnly, defaultSubKeys, ...props }) => {
-  const [openKeys, setOpenKeys] = useState<string[]>(defaultSubKeys || []);
+} = ({
+  children,
+  currentSubOnly,
+  subKeys,
+  onUpdateSubKeys,
+  defaultSubKeys,
+  ...props
+}) => {
+  const [ownOpenKeys, setOwnOpenKeys] = useState<string[]>(
+    defaultSubKeys || []
+  );
+
+  const openKeys = subKeys || ownOpenKeys;
+  const setOpenKeys = onUpdateSubKeys || setOwnOpenKeys;
 
   return (
     <MenuContext.Provider

diff --git a/yarn.lock b/yarn.lock
@@ -14501,10 +14501,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.2.tgz#9ed4e6475d906f589200193be056f5913caed481"
-  integrity sha512-Og2Vn6Mk7JAuWA1hQdDQN/Ekm/SchX80VzLhjKN9ETYrIepBFAd8PkOdOTK2nKt0FCkmMZKBJvQ1dV1gIxPu/A==
+typescript@3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.3.tgz#0eb320e4ace9b10eadf5bc6103286b0f8b7c224f"
+  integrity sha512-FFgHdPt4T/duxx6Ndf7hwgMZZjZpB+U0nMNGVCYPq0rEzWKjEDobm4J6yb3CS7naZ0yURFqdw9Gwc7UOh/P9oQ==
 
 ua-parser-js@^0.7.18:
   version "0.7.19"