@teambit/sidebar 0.0.631 → 0.0.635
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.
- package/{__preview-1643039669895.js → __preview-1643340137110.js} +0 -0
- package/dist/sidebar.ui.runtime.d.ts +2 -2
- package/dist/sidebar.ui.runtime.js +1 -1
- package/dist/sidebar.ui.runtime.js.map +1 -1
- package/dist/ui/side-bar/side-bar.d.ts +3 -0
- package/dist/ui/side-bar/side-bar.js +8 -5
- package/dist/ui/side-bar/side-bar.js.map +1 -1
- package/package-tar/teambit-sidebar-0.0.635.tgz +0 -0
- package/package.json +7 -7
- package/sidebar.ui.runtime.tsx +2 -2
- package/ui/side-bar/side-bar.tsx +9 -6
- package/package-tar/teambit-sidebar-0.0.631.tgz +0 -0
|
File without changes
|
|
@@ -8,14 +8,14 @@ export declare type ComponentTypeProps = {
|
|
|
8
8
|
};
|
|
9
9
|
export declare type SidebarItem = ComponentType;
|
|
10
10
|
export declare type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
|
|
11
|
-
export declare type DrawerSlot = SlotRegistry<DrawerType>;
|
|
11
|
+
export declare type DrawerSlot = SlotRegistry<DrawerType[]>;
|
|
12
12
|
export declare class SidebarUI {
|
|
13
13
|
private drawerSlot;
|
|
14
14
|
constructor(drawerSlot: DrawerSlot);
|
|
15
15
|
/**
|
|
16
16
|
* register a new drawer into the component sidebar.
|
|
17
17
|
*/
|
|
18
|
-
registerDrawer(drawer: DrawerType): this;
|
|
18
|
+
registerDrawer(...drawer: DrawerType[]): this;
|
|
19
19
|
/**
|
|
20
20
|
* render the sidebar.
|
|
21
21
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["sidebar.ui.runtime.tsx"],"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,MAAMA,SAAN,CAAgB;AACrBC,EAAAA,WAAW,CAASC,UAAT,EAAiC;AAAA,SAAxBA,UAAwB,GAAxBA,UAAwB;AAAA,oDAalCC,KAAD,IAAkC;AACzC,0BAAO,+BAAC,cAAD;AAAS,QAAA,UAAU,EAAE,KAAKD;AAA1B,SAA0CC,KAA1C,EAAP;AACD,KAf2C;AAAE;AAE9C;AACF;AACA;;;AACEC,EAAAA,cAAc,
|
|
1
|
+
{"version":3,"sources":["sidebar.ui.runtime.tsx"],"names":["SidebarUI","constructor","drawerSlot","props","registerDrawer","drawer","register","provider","deps","config","UIRuntime","Slot","withType","SidebarAspect","addRuntime"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,MAAMA,SAAN,CAAgB;AACrBC,EAAAA,WAAW,CAASC,UAAT,EAAiC;AAAA,SAAxBA,UAAwB,GAAxBA,UAAwB;AAAA,oDAalCC,KAAD,IAAkC;AACzC,0BAAO,+BAAC,cAAD;AAAS,QAAA,UAAU,EAAE,KAAKD;AAA1B,SAA0CC,KAA1C,EAAP;AACD,KAf2C;AAAE;AAE9C;AACF;AACA;;;AACEC,EAAAA,cAAc,CAAC,GAAGC,MAAJ,EAA0B;AACtC,SAAKH,UAAL,CAAgBI,QAAhB,CAAyBD,MAAzB;AACA,WAAO,IAAP;AACD;AAED;AACF;AACA;;;AAWuB,eAARE,QAAQ,CAACC,IAAD,EAAOC,MAAP,EAAe,CAACP,UAAD,CAAf,EAA2C;AAC9D,WAAO,IAAIF,SAAJ,CAAcE,UAAd,CAAP;AACD;;AA1BoB;;;gCAAVF,S,aAkBMU,e;gCAlBNV,S,WAoBI,CAACW,gBAAKC,QAAL,EAAD,C;gCApBJZ,S,kBAsBW,E;;AAOxBa,yBAAcC,UAAd,CAAyBd,SAAzB","sourcesContent":["import { ComponentModel } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { UIRuntime } from '@teambit/ui';\nimport React, { ComponentType } from 'react';\n\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { SidebarAspect } from './sidebar.aspect';\nimport { SideBar, SideBarProps } from './ui';\n\nexport type ComponentTypeProps = {\n component: ComponentModel;\n};\n\nexport type SidebarItem = ComponentType;\n\nexport type SidebarItemSlot = SlotRegistry<SidebarItem[]>;\n\nexport type DrawerSlot = SlotRegistry<DrawerType[]>;\n\nexport class SidebarUI {\n constructor(private drawerSlot: DrawerSlot) {}\n\n /**\n * register a new drawer into the component sidebar.\n */\n registerDrawer(...drawer: DrawerType[]) {\n this.drawerSlot.register(drawer);\n return this;\n }\n\n /**\n * render the sidebar.\n */\n render = (props: Partial<SideBarProps>) => {\n return <SideBar drawerSlot={this.drawerSlot} {...props}></SideBar>;\n };\n\n static runtime = UIRuntime;\n\n static slots = [Slot.withType<DrawerType>()];\n\n static dependencies = [];\n\n static async provider(deps, config, [drawerSlot]: [DrawerSlot]) {\n return new SidebarUI(drawerSlot);\n }\n}\n\nSidebarAspect.addRuntime(SidebarUI);\n"]}
|
|
@@ -87,12 +87,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
87
87
|
* side bar component.
|
|
88
88
|
*/
|
|
89
89
|
function SideBar(_ref) {
|
|
90
|
+
var _drawers$;
|
|
91
|
+
|
|
90
92
|
let {
|
|
91
93
|
drawerSlot,
|
|
92
94
|
itemSlot
|
|
93
95
|
} = _ref,
|
|
94
96
|
rest = (0, _objectWithoutProperties2().default)(_ref, ["drawerSlot", "itemSlot"]);
|
|
95
|
-
const
|
|
97
|
+
const drawers = (0, _lodash().flatten)(drawerSlot.values());
|
|
98
|
+
const [openDrawerList, onToggleDrawer] = (0, _react().useState)([(_drawers$ = drawers[0]) === null || _drawers$ === void 0 ? void 0 : _drawers$.id]);
|
|
96
99
|
const items = (0, _react().useMemo)(() => (0, _lodash().flatten)(itemSlot === null || itemSlot === void 0 ? void 0 : itemSlot.values()), [itemSlot]);
|
|
97
100
|
|
|
98
101
|
const handleDrawerToggle = id => {
|
|
@@ -110,13 +113,13 @@ function SideBar(_ref) {
|
|
|
110
113
|
className: _sideBarModule().default.sidebar
|
|
111
114
|
}), /*#__PURE__*/_react().default.createElement(_designUiSurfacesMenu().MenuSection, {
|
|
112
115
|
items: items
|
|
113
|
-
}),
|
|
116
|
+
}), drawers.map(drawer => {
|
|
114
117
|
if (!drawer || !drawer.name) return null; // consider passing collapse all as a prop so each drawer collapses itself
|
|
115
118
|
|
|
116
119
|
return /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
|
|
117
|
-
isOpen: openDrawerList.includes(id),
|
|
118
|
-
onToggle: () => handleDrawerToggle(id),
|
|
119
|
-
key: id,
|
|
120
|
+
isOpen: openDrawerList.includes(drawer.id),
|
|
121
|
+
onToggle: () => handleDrawerToggle(drawer.id),
|
|
122
|
+
key: drawer.id,
|
|
120
123
|
name: drawer.name,
|
|
121
124
|
Widget: drawer.widget,
|
|
122
125
|
Context: drawer.Context
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","
|
|
1
|
+
{"version":3,"sources":["side-bar.tsx"],"names":["SideBar","drawerSlot","itemSlot","rest","drawers","values","openDrawerList","onToggleDrawer","id","items","handleDrawerToggle","isDrawerOpen","includes","list","filter","drawer","concat","styles","sidebar","map","name","widget","Context"],"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;;AAAA,MAAjD;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAiD;AAAA,MAAtBC,IAAsB;AACvE,QAAMC,OAAO,GAAG,uBAAQH,UAAU,CAACI,MAAX,EAAR,CAAhB;AACA,QAAM,CAACC,cAAD,EAAiBC,cAAjB,IAAmC,uBAAiC,cAACH,OAAO,CAAC,CAAD,CAAR,8CAAC,UAAYI,EAAb,CAAjC,CAAzC;AACA,QAAMC,KAAK,GAAG,sBAAQ,MAAM,uBAAQP,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEG,MAAV,EAAR,CAAd,EAA2C,CAACH,QAAD,CAA3C,CAAd;;AAEA,QAAMQ,kBAAkB,GAAIF,EAAD,IAAgB;AACzC,UAAMG,YAAY,GAAGL,cAAc,CAACM,QAAf,CAAwBJ,EAAxB,CAArB;;AACA,QAAIG,YAAJ,EAAkB;AAChBJ,MAAAA,cAAc,CAAEM,IAAD,IAAUA,IAAI,CAACC,MAAL,CAAaC,MAAD,IAAYA,MAAM,KAAKP,EAAnC,CAAX,CAAd;AACA;AACD;;AACDD,IAAAA,cAAc,CAAEM,IAAD,IAAUA,IAAI,CAACG,MAAL,CAAYR,EAAZ,CAAX,CAAd;AACD,GAPD;;AASA,sBACE,mEAASL,IAAT;AAAe,IAAA,SAAS,EAAEc,yBAAOC;AAAjC,mBACE,+BAAC,mCAAD;AAAa,IAAA,KAAK,EAAET;AAApB,IADF,EAEGL,OAAO,CAACe,GAAR,CAAaJ,MAAD,IAAY;AACvB,QAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACK,IAAvB,EAA6B,OAAO,IAAP,CADN,CAEvB;;AACA,wBACE,+BAAC,8BAAD;AACE,MAAA,MAAM,EAAEd,cAAc,CAACM,QAAf,CAAwBG,MAAM,CAACP,EAA/B,CADV;AAEE,MAAA,QAAQ,EAAE,MAAME,kBAAkB,CAACK,MAAM,CAACP,EAAR,CAFpC;AAGE,MAAA,GAAG,EAAEO,MAAM,CAACP,EAHd;AAIE,MAAA,IAAI,EAAEO,MAAM,CAACK,IAJf;AAKE,MAAA,MAAM,EAAEL,MAAM,CAACM,MALjB;AAME,MAAA,OAAO,EAAEN,MAAM,CAACO;AANlB,oBAQE,+BAAC,MAAD,CAAQ,MAAR,OARF,CADF;AAYD,GAfA,CAFH,CADF;AAqBD","sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { flatten } from 'lodash';\nimport { MenuSection } from '@teambit/design.ui.surfaces.menu.section';\nimport { 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 const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>([drawers[0]?.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}\n"]}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/sidebar",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.635",
|
|
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.
|
|
9
|
+
"version": "0.0.635"
|
|
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.
|
|
21
|
-
"@teambit/ui-foundation.ui.tree.drawer": "0.0.
|
|
22
|
-
"@teambit/ui": "0.0.
|
|
20
|
+
"@teambit/component": "0.0.635",
|
|
21
|
+
"@teambit/ui-foundation.ui.tree.drawer": "0.0.489",
|
|
22
|
+
"@teambit/ui": "0.0.635",
|
|
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.
|
|
36
|
+
"@teambit/legacy": "1.0.210",
|
|
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.
|
|
64
|
+
"@teambit/legacy": "1.0.210",
|
|
65
65
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
66
66
|
"react": "^16.8.0 || ^17.0.0"
|
|
67
67
|
}
|
package/sidebar.ui.runtime.tsx
CHANGED
|
@@ -15,7 +15,7 @@ export type SidebarItem = ComponentType;
|
|
|
15
15
|
|
|
16
16
|
export type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
|
|
17
17
|
|
|
18
|
-
export type DrawerSlot = SlotRegistry<DrawerType>;
|
|
18
|
+
export type DrawerSlot = SlotRegistry<DrawerType[]>;
|
|
19
19
|
|
|
20
20
|
export class SidebarUI {
|
|
21
21
|
constructor(private drawerSlot: DrawerSlot) {}
|
|
@@ -23,7 +23,7 @@ export class SidebarUI {
|
|
|
23
23
|
/**
|
|
24
24
|
* register a new drawer into the component sidebar.
|
|
25
25
|
*/
|
|
26
|
-
registerDrawer(drawer: DrawerType) {
|
|
26
|
+
registerDrawer(...drawer: DrawerType[]) {
|
|
27
27
|
this.drawerSlot.register(drawer);
|
|
28
28
|
return this;
|
|
29
29
|
}
|
package/ui/side-bar/side-bar.tsx
CHANGED
|
@@ -10,7 +10,9 @@ export type SideBarProps = {
|
|
|
10
10
|
* slot of registered drawers.
|
|
11
11
|
*/
|
|
12
12
|
drawerSlot: DrawerSlot;
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* slot of registered items to the main section at the top.
|
|
15
|
+
*/
|
|
14
16
|
itemSlot?: SidebarItemSlot;
|
|
15
17
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
16
18
|
|
|
@@ -18,7 +20,8 @@ export type SideBarProps = {
|
|
|
18
20
|
* side bar component.
|
|
19
21
|
*/
|
|
20
22
|
export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
|
|
21
|
-
const
|
|
23
|
+
const drawers = flatten(drawerSlot.values());
|
|
24
|
+
const [openDrawerList, onToggleDrawer] = useState<(string | undefined)[]>([drawers[0]?.id]);
|
|
22
25
|
const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);
|
|
23
26
|
|
|
24
27
|
const handleDrawerToggle = (id: string) => {
|
|
@@ -33,14 +36,14 @@ export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
|
|
|
33
36
|
return (
|
|
34
37
|
<div {...rest} className={styles.sidebar}>
|
|
35
38
|
<MenuSection items={items} />
|
|
36
|
-
{
|
|
39
|
+
{drawers.map((drawer) => {
|
|
37
40
|
if (!drawer || !drawer.name) return null;
|
|
38
41
|
// consider passing collapse all as a prop so each drawer collapses itself
|
|
39
42
|
return (
|
|
40
43
|
<DrawerUI
|
|
41
|
-
isOpen={openDrawerList.includes(id)}
|
|
42
|
-
onToggle={() => handleDrawerToggle(id)}
|
|
43
|
-
key={id}
|
|
44
|
+
isOpen={openDrawerList.includes(drawer.id)}
|
|
45
|
+
onToggle={() => handleDrawerToggle(drawer.id)}
|
|
46
|
+
key={drawer.id}
|
|
44
47
|
name={drawer.name}
|
|
45
48
|
Widget={drawer.widget}
|
|
46
49
|
Context={drawer.Context}
|
|
Binary file
|