@teambit/sidebar 0.0.669 → 0.0.672

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -51,6 +51,16 @@ function _lodash() {
51
51
  return data;
52
52
  }
53
53
 
54
+ function _classnames() {
55
+ const data = _interopRequireDefault(require("classnames"));
56
+
57
+ _classnames = function () {
58
+ return data;
59
+ };
60
+
61
+ return data;
62
+ }
63
+
54
64
  function _designUiSurfacesMenu() {
55
65
  const data = require("@teambit/design.ui.surfaces.menu.section");
56
66
 
@@ -120,13 +130,16 @@ function SideBar(_ref) {
120
130
  }), drawers.map(drawer => {
121
131
  if (!drawer || !drawer.name) return null; // consider passing collapse all as a prop so each drawer collapses itself
122
132
 
133
+ const isOpen = openDrawerList.includes(drawer.id);
123
134
  return /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
124
- isOpen: openDrawerList.includes(drawer.id),
135
+ className: (0, _classnames().default)(_sideBarModule().default.sidebarDrawer, isOpen && _sideBarModule().default.open),
136
+ isOpen: isOpen,
125
137
  onToggle: () => handleDrawerToggle(drawer.id),
126
138
  key: drawer.id,
127
139
  name: drawer.name,
128
- Widget: drawer.widget,
129
- Context: drawer.Context
140
+ Widgets: drawer.widgets,
141
+ Context: drawer.Context,
142
+ Filters: drawer.Filters
130
143
  }, /*#__PURE__*/_react().default.createElement(drawer.render, null));
131
144
  }));
132
145
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","drawers","values","filter","drawer","isHidden","sort","sortFn","openDrawerList","onToggleDrawer","map","id","items","handleDrawerToggle","isDrawerOpen","includes","list","concat","styles","sidebar","name","widget","Context","first","second","order"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAaA;AACA;AACA;AACO,SAASA,OAAT,OAAkE;AAAA,MAAjD;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAiD;AAAA,MAAtBC,IAAsB;AACvE,QAAMC,OAAO,GAAG,uBAAQH,UAAU,CAACI,MAAX,EAAR,EACbC,MADa,CACLC,MAAD;AAAA;;AAAA,WAAY,EAACA,MAAD,aAACA,MAAD,mCAACA,MAAM,CAAEC,QAAT,6CAAC,sBAAAD,MAAM,CAAP,CAAZ;AAAA,GADM,EAEbE,IAFa,CAERC,MAFQ,CAAhB;AAIA,QAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,uBAAiCR,OAAO,CAACS,GAAR,CAAaN,MAAD,IAAYA,MAAM,CAACO,EAA/B,CAAjC,CAAzC;AACA,QAAMC,KAAK,GAAG,sBAAQ,MAAM,uBAAQb,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEG,MAAV,EAAR,CAAd,EAA2C,CAACH,QAAD,CAA3C,CAAd;;AAEA,QAAMc,kBAAkB,GAAIF,EAAD,IAAgB;AACzC,UAAMG,YAAY,GAAGN,cAAc,CAACO,QAAf,CAAwBJ,EAAxB,CAArB;;AACA,QAAIG,YAAJ,EAAkB;AAChBL,MAAAA,cAAc,CAAEO,IAAD,IAAUA,IAAI,CAACb,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKO,EAAnC,CAAX,CAAd;AACA;AACD;;AACDF,IAAAA,cAAc,CAAEO,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAYN,EAAZ,CAAX,CAAd;AACD,GAPD;;AASA,sBACE,mEAASX,IAAT;AAAe,IAAA,SAAS,EAAEkB,yBAAOC;AAAjC,mBACE,+BAAC,mCAAD;AAAa,IAAA,KAAK,EAAEP;AAApB,IADF,EAEGX,OAAO,CAACS,GAAR,CAAaN,MAAD,IAAY;AACvB,QAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACgB,IAAvB,EAA6B,OAAO,IAAP,CADN,CAEvB;;AACA,wBACE,+BAAC,8BAAD;AACE,MAAA,MAAM,EAAEZ,cAAc,CAACO,QAAf,CAAwBX,MAAM,CAACO,EAA/B,CADV;AAEE,MAAA,QAAQ,EAAE,MAAME,kBAAkB,CAACT,MAAM,CAACO,EAAR,CAFpC;AAGE,MAAA,GAAG,EAAEP,MAAM,CAACO,EAHd;AAIE,MAAA,IAAI,EAAEP,MAAM,CAACgB,IAJf;AAKE,MAAA,MAAM,EAAEhB,MAAM,CAACiB,MALjB;AAME,MAAA,OAAO,EAAEjB,MAAM,CAACkB;AANlB,oBAQE,+BAAC,MAAD,CAAQ,MAAR,OARF,CADF;AAYD,GAfA,CAFH,CADF;AAqBD;;AACD,SAASf,MAAT,CAAgBgB,KAAhB,EAAmCC,MAAnC,EAAuD;AAAA;;AACrD;AACA;AACA;AAEA,SAAO,iBAACD,KAAK,CAACE,KAAP,uDAAgB,CAAhB,sBAAsBD,MAAM,CAACC,KAA7B,yDAAsC,CAAtC,CAAP;AACD","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';\nimport styles from './side-bar.module.scss';\n\nexport type SideBarProps = {\n /**\n * slot of registered drawers.\n */\n drawerSlot: DrawerSlot;\n /**\n * slot of registered items to the main section at the top.\n */\n itemSlot?: SidebarItemSlot;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * side bar component.\n */\nexport function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {\n const drawers = flatten(drawerSlot.values())\n .filter((drawer) => !drawer?.isHidden?.())\n .sort(sortFn);\n\n const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>(drawers.map((drawer) => drawer.id));\n const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);\n\n const handleDrawerToggle = (id: string) => {\n const isDrawerOpen = openDrawerList.includes(id);\n if (isDrawerOpen) {\n onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n return;\n }\n onToggleDrawer((list) => list.concat(id));\n };\n\n return (\n <div {...rest} className={styles.sidebar}>\n <MenuSection items={items} />\n {drawers.map((drawer) => {\n if (!drawer || !drawer.name) return null;\n // consider passing collapse all as a prop so each drawer collapses itself\n return (\n <DrawerUI\n isOpen={openDrawerList.includes(drawer.id)}\n onToggle={() => handleDrawerToggle(drawer.id)}\n key={drawer.id}\n name={drawer.name}\n Widget={drawer.widget}\n Context={drawer.Context}\n >\n <drawer.render />\n </DrawerUI>\n );\n })}\n </div>\n );\n}\nfunction sortFn(first: DrawerType, second: DrawerType) {\n // 0 - equal\n // <0 - first < second\n // >0 - first > second\n\n return (first.order ?? 0) - (second.order ?? 0);\n}\n"]}
1
+ {"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","drawers","values","filter","drawer","isHidden","sort","sortFn","openDrawerList","onToggleDrawer","map","id","items","handleDrawerToggle","isDrawerOpen","includes","list","concat","styles","sidebar","name","isOpen","sidebarDrawer","open","widgets","Context","Filters","first","second","order"],"mappings":"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","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport classNames from 'classnames';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';\nimport styles from './side-bar.module.scss';\n\nexport type SideBarProps = {\n /**\n * slot of registered drawers.\n */\n drawerSlot: DrawerSlot;\n /**\n * slot of registered items to the main section at the top.\n */\n itemSlot?: SidebarItemSlot;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * side bar component.\n */\nexport function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {\n const drawers = flatten(drawerSlot.values())\n .filter((drawer) => !drawer?.isHidden?.())\n .sort(sortFn);\n\n const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>(drawers.map((drawer) => drawer.id));\n const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);\n\n const handleDrawerToggle = (id: string) => {\n const isDrawerOpen = openDrawerList.includes(id);\n if (isDrawerOpen) {\n onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n return;\n }\n onToggleDrawer((list) => list.concat(id));\n };\n\n return (\n <div {...rest} className={styles.sidebar}>\n <MenuSection items={items} />\n {drawers.map((drawer) => {\n if (!drawer || !drawer.name) return null;\n // consider passing collapse all as a prop so each drawer collapses itself\n const isOpen = openDrawerList.includes(drawer.id);\n\n return (\n <DrawerUI\n className={classNames(styles.sidebarDrawer, isOpen && styles.open)}\n isOpen={isOpen}\n onToggle={() => handleDrawerToggle(drawer.id)}\n key={drawer.id}\n name={drawer.name}\n Widgets={drawer.widgets}\n Context={drawer.Context}\n Filters={drawer.Filters}\n >\n <drawer.render />\n </DrawerUI>\n );\n })}\n </div>\n );\n}\nfunction sortFn(first: DrawerType, second: DrawerType) {\n // 0 - equal\n // <0 - first < second\n // >0 - first > second\n\n return (first.order ?? 0) - (second.order ?? 0);\n}\n"]}
@@ -5,3 +5,10 @@
5
5
  width: 100%;
6
6
  height: 100%;
7
7
  }
8
+
9
+ .sidebarDrawer {
10
+ flex: 0;
11
+ &.open {
12
+ flex: 1;
13
+ }
14
+ }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/sidebar",
3
- "version": "0.0.669",
3
+ "version": "0.0.672",
4
4
  "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.ui-foundation",
8
8
  "name": "sidebar",
9
- "version": "0.0.669"
9
+ "version": "0.0.672"
10
10
  },
11
11
  "dependencies": {
12
12
  "@teambit/harmony": "0.2.11",
@@ -17,9 +17,9 @@
17
17
  "@teambit/base-ui.routing.nav-link": "1.0.0",
18
18
  "@teambit/documenter.ui.separator": "4.1.1",
19
19
  "@teambit/evangelist.elements.icon": "1.0.2",
20
- "@teambit/component": "0.0.669",
21
- "@teambit/ui-foundation.ui.tree.drawer": "0.0.493",
22
- "@teambit/ui": "0.0.669",
20
+ "@teambit/component": "0.0.672",
21
+ "@teambit/ui-foundation.ui.tree.drawer": "0.0.495",
22
+ "@teambit/ui": "0.0.672",
23
23
  "@teambit/design.ui.surfaces.menu.section": "0.0.347"
24
24
  },
25
25
  "devDependencies": {
@@ -33,7 +33,7 @@
33
33
  "@types/node": "12.20.4"
34
34
  },
35
35
  "peerDependencies": {
36
- "@teambit/legacy": "1.0.230",
36
+ "@teambit/legacy": "1.0.231",
37
37
  "react-dom": "^16.8.0 || ^17.0.0",
38
38
  "react": "^16.8.0 || ^17.0.0"
39
39
  },
@@ -61,7 +61,7 @@
61
61
  "react": "-"
62
62
  },
63
63
  "peerDependencies": {
64
- "@teambit/legacy": "1.0.230",
64
+ "@teambit/legacy": "1.0.231",
65
65
  "react-dom": "^16.8.0 || ^17.0.0",
66
66
  "react": "^16.8.0 || ^17.0.0"
67
67
  }
@@ -5,3 +5,10 @@
5
5
  width: 100%;
6
6
  height: 100%;
7
7
  }
8
+
9
+ .sidebarDrawer {
10
+ flex: 0;
11
+ &.open {
12
+ flex: 1;
13
+ }
14
+ }
@@ -1,5 +1,6 @@
1
1
  import React, { useState, useMemo } from 'react';
2
2
  import { flatten } from 'lodash';
3
+ import classNames from 'classnames';
3
4
  import { MenuSection } from '@teambit/design.ui.surfaces.menu.section';
4
5
  import { DrawerType, DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
5
6
  import { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';
@@ -42,14 +43,18 @@ export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
42
43
  {drawers.map((drawer) => {
43
44
  if (!drawer || !drawer.name) return null;
44
45
  // consider passing collapse all as a prop so each drawer collapses itself
46
+ const isOpen = openDrawerList.includes(drawer.id);
47
+
45
48
  return (
46
49
  <DrawerUI
47
- isOpen={openDrawerList.includes(drawer.id)}
50
+ className={classNames(styles.sidebarDrawer, isOpen && styles.open)}
51
+ isOpen={isOpen}
48
52
  onToggle={() => handleDrawerToggle(drawer.id)}
49
53
  key={drawer.id}
50
54
  name={drawer.name}
51
- Widget={drawer.widget}
55
+ Widgets={drawer.widgets}
52
56
  Context={drawer.Context}
57
+ Filters={drawer.Filters}
53
58
  >
54
59
  <drawer.render />
55
60
  </DrawerUI>