@teambit/component.ui.component-drawer 0.0.1 → 0.0.4
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/component-drawer.module.scss +13 -8
- package/component-drawer.tsx +19 -17
- package/dist/component-drawer.js +10 -11
- package/dist/component-drawer.js.map +1 -1
- package/dist/component-drawer.module.scss +13 -8
- package/package-tar/teambit-component.ui.component-drawer-0.0.4.tgz +0 -0
- package/package.json +5 -4
- /package/{preview-1648092203429.js → preview-1648265027481.js} +0 -0
- package/package-tar/teambit-component.ui.component-drawer-0.0.1.tgz +0 -0
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
.drawerContainer {
|
|
2
2
|
height: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
3
5
|
}
|
|
4
6
|
|
|
5
7
|
.emptyDrawer {
|
|
@@ -44,15 +46,18 @@
|
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
.filter {
|
|
47
|
-
display:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
display: none;
|
|
50
|
+
&.open {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: row;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
padding: 8px;
|
|
56
|
+
margin: 4px 8px;
|
|
57
|
+
}
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
.
|
|
56
|
-
overflow-y: scroll;
|
|
60
|
+
.drawerTreeContainer {
|
|
57
61
|
height: 100%;
|
|
62
|
+
overflow-y: scroll;
|
|
58
63
|
}
|
package/component-drawer.tsx
CHANGED
|
@@ -70,26 +70,29 @@ export class ComponentsDrawer implements DrawerType {
|
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
renderFilters = ({ components }: { components: ComponentModel[] }) => {
|
|
73
|
-
if (!this.plugins.filters) return null;
|
|
74
|
-
const filterPlugins = this.plugins.filters;
|
|
75
73
|
const { filterWidgetOpen } = useContext(ComponentFilterWidgetContext);
|
|
76
|
-
|
|
77
|
-
if (!filterPlugins) return null;
|
|
74
|
+
const filterPlugins = this.plugins.filters;
|
|
78
75
|
|
|
79
76
|
const filters = useMemo(
|
|
80
77
|
() =>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
(filterPlugins &&
|
|
79
|
+
flatten(
|
|
80
|
+
filterPlugins.toArray().map(([key, filtersByKey]) => {
|
|
81
|
+
return filtersByKey.map((filter) => ({ ...filter, key: `${key}-${filter.id}` }));
|
|
82
|
+
})
|
|
83
|
+
).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))) ||
|
|
84
|
+
[],
|
|
86
85
|
[filterPlugins]
|
|
87
86
|
);
|
|
88
87
|
|
|
89
88
|
return (
|
|
90
89
|
<div className={classNames(styles.filtersContainer, filterWidgetOpen && styles.open)}>
|
|
91
90
|
{filters.map((filter) => (
|
|
92
|
-
<filter.render
|
|
91
|
+
<filter.render
|
|
92
|
+
key={filter.key}
|
|
93
|
+
components={components}
|
|
94
|
+
className={classNames(styles.filter, filterWidgetOpen && styles.open)}
|
|
95
|
+
/>
|
|
93
96
|
))}
|
|
94
97
|
</div>
|
|
95
98
|
);
|
|
@@ -101,14 +104,13 @@ export class ComponentsDrawer implements DrawerType {
|
|
|
101
104
|
|
|
102
105
|
const TreeNode = tree?.customRenderer && useCallback(tree.customRenderer(tree.widgets), [tree.widgets]);
|
|
103
106
|
const isVisible = components.length > 0;
|
|
107
|
+
|
|
104
108
|
if (!isVisible) return null;
|
|
109
|
+
|
|
105
110
|
return (
|
|
106
|
-
<
|
|
107
|
-
components={components}
|
|
108
|
-
|
|
109
|
-
className={styles.componentTree}
|
|
110
|
-
TreeNode={TreeNode}
|
|
111
|
-
/>
|
|
111
|
+
<div className={styles.drawerTreeContainer}>
|
|
112
|
+
<ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNode} />
|
|
113
|
+
</div>
|
|
112
114
|
);
|
|
113
115
|
};
|
|
114
116
|
|
|
@@ -137,7 +139,7 @@ export class ComponentsDrawer implements DrawerType {
|
|
|
137
139
|
<div key={this.id} className={styles.drawerContainer}>
|
|
138
140
|
{Filters}
|
|
139
141
|
{Tree}
|
|
140
|
-
{
|
|
142
|
+
{filteredComponents.length === 0 && emptyDrawer}
|
|
141
143
|
</div>
|
|
142
144
|
);
|
|
143
145
|
};
|
package/dist/component-drawer.js
CHANGED
|
@@ -49,16 +49,14 @@ class ComponentsDrawer {
|
|
|
49
49
|
return react_1.default.createElement(base_ui_utils_composer_1.Composer, { components: combinedContexts }, children);
|
|
50
50
|
};
|
|
51
51
|
this.renderFilters = ({ components }) => {
|
|
52
|
-
if (!this.plugins.filters)
|
|
53
|
-
return null;
|
|
54
|
-
const filterPlugins = this.plugins.filters;
|
|
55
52
|
const { filterWidgetOpen } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
const filterPlugins = this.plugins.filters;
|
|
54
|
+
const filters = (0, react_1.useMemo)(() => (filterPlugins &&
|
|
55
|
+
(0, lodash_flatten_1.default)(filterPlugins.toArray().map(([key, filtersByKey]) => {
|
|
56
|
+
return filtersByKey.map((filter) => (Object.assign(Object.assign({}, filter), { key: `${key}-${filter.id}` })));
|
|
57
|
+
})).sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); })) ||
|
|
58
|
+
[], [filterPlugins]);
|
|
59
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filtersContainer, filterWidgetOpen && component_drawer_module_scss_1.default.open) }, filters.map((filter) => (react_1.default.createElement(filter.render, { key: filter.key, components: components, className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filter, filterWidgetOpen && component_drawer_module_scss_1.default.open) })))));
|
|
62
60
|
};
|
|
63
61
|
this.renderTree = ({ components }) => {
|
|
64
62
|
const { collapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
|
|
@@ -67,7 +65,8 @@ class ComponentsDrawer {
|
|
|
67
65
|
const isVisible = components.length > 0;
|
|
68
66
|
if (!isVisible)
|
|
69
67
|
return null;
|
|
70
|
-
return (react_1.default.createElement(
|
|
68
|
+
return (react_1.default.createElement("div", { className: component_drawer_module_scss_1.default.drawerTreeContainer },
|
|
69
|
+
react_1.default.createElement(ui_foundation_ui_side_bar_1.ComponentTree, { components: components, isCollapsed: collapsed, TreeNode: TreeNode })));
|
|
71
70
|
};
|
|
72
71
|
this.setWidgets = (widgets) => {
|
|
73
72
|
this.widgets = (0, lodash_flatten_1.default)(widgets === null || widgets === void 0 ? void 0 : widgets.values());
|
|
@@ -85,7 +84,7 @@ class ComponentsDrawer {
|
|
|
85
84
|
return (react_1.default.createElement("div", { key: this.id, className: component_drawer_module_scss_1.default.drawerContainer },
|
|
86
85
|
Filters,
|
|
87
86
|
Tree,
|
|
88
|
-
|
|
87
|
+
filteredComponents.length === 0 && emptyDrawer));
|
|
89
88
|
};
|
|
90
89
|
Object.assign(this, props);
|
|
91
90
|
this.useComponents = props.useComponents;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-drawer.js","sourceRoot":"","sources":["../component-drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2E;AAC3E,4DAAoC;AACpC,kFAAgF;AAChF,wFAAmE;AAGnE,0FAAqE;AACrE,kFAA8D;AAG9D,4EAA2E;AAC3E,oEAAqC;AACrC,4FAKiD;AAEjD,qGAAuH;AACvH,iGAAqG;AAErG,kGAAoD;AAoBpD,MAAa,gBAAgB;IAW3B,YAAY,KAA4B;;QAQxC,YAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;;YACzB,MAAM,OAAO,GAAG,IAAA,wBAAO,EAAC,CAAA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,MAAM,EAAE,KAAI,EAAE,CAAC,CAAC;YAC/D,MAAM,gBAAgB,GAAG;gBACvB,4DAAqB;gBACrB,sEAA6B;gBAC7B,CAAC,yDAAwB,EAAE,EAAE,OAAO,EAAE,CAAqC;aAC5E,CAAC;YACF,OAAO,8BAAC,iCAAQ,IAAC,UAAU,EAAE,gBAAgB,IAAG,QAAQ,CAAY,CAAC;QACvE,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,EAAE,UAAU,EAAoC,EAAE,EAAE;YACnE,
|
|
1
|
+
{"version":3,"file":"component-drawer.js","sourceRoot":"","sources":["../component-drawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
.drawerContainer {
|
|
2
2
|
height: 100%;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
3
5
|
}
|
|
4
6
|
|
|
5
7
|
.emptyDrawer {
|
|
@@ -44,15 +46,18 @@
|
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
.filter {
|
|
47
|
-
display:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
display: none;
|
|
50
|
+
&.open {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: row;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
padding: 8px;
|
|
56
|
+
margin: 4px 8px;
|
|
57
|
+
}
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
.
|
|
56
|
-
overflow-y: scroll;
|
|
60
|
+
.drawerTreeContainer {
|
|
57
61
|
height: 100%;
|
|
62
|
+
overflow-y: scroll;
|
|
58
63
|
}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/component.ui.component-drawer",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"homepage": "https://bit.dev/teambit/component/ui/component-drawer",
|
|
4
5
|
"main": "dist/index.js",
|
|
5
6
|
"componentId": {
|
|
6
7
|
"scope": "teambit.component",
|
|
7
8
|
"name": "ui/component-drawer",
|
|
8
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.4"
|
|
9
10
|
},
|
|
10
11
|
"dependencies": {
|
|
11
12
|
"@teambit/harmony": "0.2.11",
|
|
@@ -18,8 +19,8 @@
|
|
|
18
19
|
"@teambit/design.ui.styles.muted-italic": "0.0.35",
|
|
19
20
|
"@teambit/design.ui.tree": "0.0.5",
|
|
20
21
|
"@teambit/ui-foundation.ui.full-loader": "0.0.486",
|
|
21
|
-
"@teambit/ui-foundation.ui.side-bar": "0.0.
|
|
22
|
-
"@teambit/ui-foundation.ui.tree.drawer": "0.0.
|
|
22
|
+
"@teambit/ui-foundation.ui.side-bar": "0.0.523",
|
|
23
|
+
"@teambit/ui-foundation.ui.tree.drawer": "0.0.498"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
26
|
"@types/react": "^17.0.8",
|
|
File without changes
|
|
Binary file
|