@atlaskit/editor-toolbar-model 0.2.11 → 0.3.1
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/CHANGELOG.md +18 -0
- package/dist/cjs/ui/toolbar-model-renderer/index.js +104 -16
- package/dist/es2019/ui/toolbar-model-renderer/index.js +90 -14
- package/dist/esm/ui/toolbar-model-renderer/index.js +104 -16
- package/dist/types/ui/toolbar-model-renderer/index.d.ts +1 -1
- package/dist/types-ts4.5/ui/toolbar-model-renderer/index.d.ts +1 -1
- package/package.json +3 -12
- package/dist/cjs/ui/toolbar-model-renderer/ToolbarRendererNew.js +0 -123
- package/dist/cjs/ui/toolbar-model-renderer/ToolbarRendererOld.js +0 -180
- package/dist/es2019/ui/toolbar-model-renderer/ToolbarRendererNew.js +0 -105
- package/dist/es2019/ui/toolbar-model-renderer/ToolbarRendererOld.js +0 -162
- package/dist/esm/ui/toolbar-model-renderer/ToolbarRendererNew.js +0 -116
- package/dist/esm/ui/toolbar-model-renderer/ToolbarRendererOld.js +0 -173
- package/dist/types/ui/toolbar-model-renderer/ToolbarRendererNew.d.ts +0 -3
- package/dist/types/ui/toolbar-model-renderer/ToolbarRendererOld.d.ts +0 -3
- package/dist/types-ts4.5/ui/toolbar-model-renderer/ToolbarRendererNew.d.ts +0 -3
- package/dist/types-ts4.5/ui/toolbar-model-renderer/ToolbarRendererOld.d.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar-model
|
|
2
2
|
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8708f328d5db6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8708f328d5db6) -
|
|
8
|
+
Clean up platform_editor_toolbar_aifc_overflow_menu_update feature gate
|
|
9
|
+
|
|
10
|
+
## 0.3.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [`0bddc82417f62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0bddc82417f62) -
|
|
15
|
+
Clean up platform_editor_toolbar_aifc_renderer_rewrite feature flag
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 0.2.11
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -5,24 +5,112 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ToolbarModelRenderer = void 0;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
var _common = require("./common");
|
|
11
|
+
var hasParents = function hasParents(component) {
|
|
12
|
+
return component.type !== 'toolbar';
|
|
13
|
+
};
|
|
14
|
+
var getChildTypesForParent = function getChildTypesForParent(parentType) {
|
|
15
|
+
switch (parentType) {
|
|
16
|
+
case 'toolbar':
|
|
17
|
+
return ['section'];
|
|
18
|
+
case 'section':
|
|
19
|
+
return ['group'];
|
|
20
|
+
case 'group':
|
|
21
|
+
return ['button', 'menu'];
|
|
22
|
+
case 'menu':
|
|
23
|
+
case 'nested-menu':
|
|
24
|
+
return ['menu-section'];
|
|
25
|
+
case 'menu-section':
|
|
26
|
+
return ['menu-item', 'nested-menu'];
|
|
27
|
+
default:
|
|
28
|
+
return [];
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
|
|
32
|
+
switch (type) {
|
|
33
|
+
case 'group':
|
|
34
|
+
return fallbacks.group;
|
|
35
|
+
case 'menu-section':
|
|
36
|
+
return fallbacks.menuSection;
|
|
37
|
+
case 'section':
|
|
38
|
+
return fallbacks.section;
|
|
39
|
+
default:
|
|
40
|
+
return _common.NoOp;
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
|
|
44
|
+
return menuSections.some(function (menuSection) {
|
|
45
|
+
return allComponents.some(function (component) {
|
|
46
|
+
return component.type === 'menu-item' && component.parents.some(function (parent) {
|
|
47
|
+
return parent.key === menuSection.key;
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
|
|
53
|
+
if (component.type === 'menu') {
|
|
54
|
+
var menuSections = children.filter(function (child) {
|
|
55
|
+
return child.type === 'menu-section';
|
|
56
|
+
});
|
|
57
|
+
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
58
|
+
}
|
|
59
|
+
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
60
|
+
return children.length === 0;
|
|
61
|
+
}
|
|
62
|
+
return false;
|
|
63
|
+
};
|
|
64
|
+
var _ComponentRenderer = function ComponentRenderer(_ref) {
|
|
65
|
+
var component = _ref.component,
|
|
66
|
+
parents = _ref.parents,
|
|
67
|
+
allComponents = _ref.allComponents,
|
|
15
68
|
fallbacks = _ref.fallbacks;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
69
|
+
var childTypes = getChildTypesForParent(component.type);
|
|
70
|
+
var children = (0, _common.getSortedChildren)(allComponents.filter(function (comp) {
|
|
71
|
+
return childTypes.includes(comp.type);
|
|
72
|
+
}), component.key);
|
|
73
|
+
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
var Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
77
|
+
var newParents = [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
78
|
+
key: component.key,
|
|
79
|
+
type: component.type
|
|
80
|
+
}]);
|
|
81
|
+
if (children.length === 0) {
|
|
82
|
+
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
83
|
+
parents: parents
|
|
84
|
+
}, null);
|
|
85
|
+
}
|
|
86
|
+
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
87
|
+
parents: parents
|
|
88
|
+
}, children.map(function (child) {
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
|
|
90
|
+
key: child.key,
|
|
91
|
+
component: child,
|
|
92
|
+
parents: newParents,
|
|
93
|
+
allComponents: allComponents,
|
|
20
94
|
fallbacks: fallbacks
|
|
21
95
|
});
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
96
|
+
}));
|
|
97
|
+
};
|
|
98
|
+
var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
|
|
99
|
+
var toolbar = _ref2.toolbar,
|
|
100
|
+
components = _ref2.components,
|
|
101
|
+
fallbacks = _ref2.fallbacks;
|
|
102
|
+
var ToolbarComponent = toolbar.component || _common.NoOp;
|
|
103
|
+
var sections = (0, _common.getSortedChildren)(components.filter(_common.isSection), toolbar.key);
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(function (section) {
|
|
105
|
+
return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
|
|
106
|
+
key: section.key,
|
|
107
|
+
component: section,
|
|
108
|
+
parents: [{
|
|
109
|
+
key: toolbar.key,
|
|
110
|
+
type: toolbar.type
|
|
111
|
+
}],
|
|
112
|
+
allComponents: components.filter(hasParents),
|
|
113
|
+
fallbacks: fallbacks
|
|
114
|
+
});
|
|
115
|
+
}));
|
|
28
116
|
};
|
|
@@ -1,22 +1,98 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { getSortedChildren, isSection, NoOp } from './common';
|
|
3
|
+
const hasParents = component => {
|
|
4
|
+
return component.type !== 'toolbar';
|
|
5
|
+
};
|
|
6
|
+
const getChildTypesForParent = parentType => {
|
|
7
|
+
switch (parentType) {
|
|
8
|
+
case 'toolbar':
|
|
9
|
+
return ['section'];
|
|
10
|
+
case 'section':
|
|
11
|
+
return ['group'];
|
|
12
|
+
case 'group':
|
|
13
|
+
return ['button', 'menu'];
|
|
14
|
+
case 'menu':
|
|
15
|
+
case 'nested-menu':
|
|
16
|
+
return ['menu-section'];
|
|
17
|
+
case 'menu-section':
|
|
18
|
+
return ['menu-item', 'nested-menu'];
|
|
19
|
+
default:
|
|
20
|
+
return [];
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const getFallbackComponent = (type, fallbacks) => {
|
|
24
|
+
switch (type) {
|
|
25
|
+
case 'group':
|
|
26
|
+
return fallbacks.group;
|
|
27
|
+
case 'menu-section':
|
|
28
|
+
return fallbacks.menuSection;
|
|
29
|
+
case 'section':
|
|
30
|
+
return fallbacks.section;
|
|
31
|
+
default:
|
|
32
|
+
return NoOp;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const hasMenuItems = (menuSections, allComponents) => {
|
|
36
|
+
return menuSections.some(menuSection => {
|
|
37
|
+
return allComponents.some(component => component.type === 'menu-item' && component.parents.some(parent => parent.key === menuSection.key));
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
const shouldHideEmptyComponent = (component, children, allComponents) => {
|
|
41
|
+
if (component.type === 'menu') {
|
|
42
|
+
const menuSections = children.filter(child => child.type === 'menu-section');
|
|
43
|
+
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
44
|
+
}
|
|
45
|
+
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
46
|
+
return children.length === 0;
|
|
47
|
+
}
|
|
48
|
+
return false;
|
|
49
|
+
};
|
|
50
|
+
const ComponentRenderer = ({
|
|
51
|
+
component,
|
|
52
|
+
parents,
|
|
53
|
+
allComponents,
|
|
54
|
+
fallbacks
|
|
55
|
+
}) => {
|
|
56
|
+
const childTypes = getChildTypesForParent(component.type);
|
|
57
|
+
const children = getSortedChildren(allComponents.filter(comp => childTypes.includes(comp.type)), component.key);
|
|
58
|
+
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
const Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
62
|
+
const newParents = [...parents, {
|
|
63
|
+
key: component.key,
|
|
64
|
+
type: component.type
|
|
65
|
+
}];
|
|
66
|
+
if (children.length === 0) {
|
|
67
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
68
|
+
parents: parents
|
|
69
|
+
}, null);
|
|
70
|
+
}
|
|
71
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
72
|
+
parents: parents
|
|
73
|
+
}, children.map(child => /*#__PURE__*/React.createElement(ComponentRenderer, {
|
|
74
|
+
key: child.key,
|
|
75
|
+
component: child,
|
|
76
|
+
parents: newParents,
|
|
77
|
+
allComponents: allComponents,
|
|
78
|
+
fallbacks: fallbacks
|
|
79
|
+
})));
|
|
80
|
+
};
|
|
5
81
|
export const ToolbarModelRenderer = ({
|
|
6
82
|
toolbar,
|
|
7
83
|
components,
|
|
8
84
|
fallbacks
|
|
9
85
|
}) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
86
|
+
const ToolbarComponent = toolbar.component || NoOp;
|
|
87
|
+
const sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
88
|
+
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(section => /*#__PURE__*/React.createElement(ComponentRenderer, {
|
|
89
|
+
key: section.key,
|
|
90
|
+
component: section,
|
|
91
|
+
parents: [{
|
|
92
|
+
key: toolbar.key,
|
|
93
|
+
type: toolbar.type
|
|
94
|
+
}],
|
|
95
|
+
allComponents: components.filter(hasParents),
|
|
20
96
|
fallbacks: fallbacks
|
|
21
|
-
});
|
|
97
|
+
})));
|
|
22
98
|
};
|
|
@@ -1,21 +1,109 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
import { getSortedChildren, isSection, NoOp } from './common';
|
|
4
|
+
var hasParents = function hasParents(component) {
|
|
5
|
+
return component.type !== 'toolbar';
|
|
6
|
+
};
|
|
7
|
+
var getChildTypesForParent = function getChildTypesForParent(parentType) {
|
|
8
|
+
switch (parentType) {
|
|
9
|
+
case 'toolbar':
|
|
10
|
+
return ['section'];
|
|
11
|
+
case 'section':
|
|
12
|
+
return ['group'];
|
|
13
|
+
case 'group':
|
|
14
|
+
return ['button', 'menu'];
|
|
15
|
+
case 'menu':
|
|
16
|
+
case 'nested-menu':
|
|
17
|
+
return ['menu-section'];
|
|
18
|
+
case 'menu-section':
|
|
19
|
+
return ['menu-item', 'nested-menu'];
|
|
20
|
+
default:
|
|
21
|
+
return [];
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
|
|
25
|
+
switch (type) {
|
|
26
|
+
case 'group':
|
|
27
|
+
return fallbacks.group;
|
|
28
|
+
case 'menu-section':
|
|
29
|
+
return fallbacks.menuSection;
|
|
30
|
+
case 'section':
|
|
31
|
+
return fallbacks.section;
|
|
32
|
+
default:
|
|
33
|
+
return NoOp;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
|
|
37
|
+
return menuSections.some(function (menuSection) {
|
|
38
|
+
return allComponents.some(function (component) {
|
|
39
|
+
return component.type === 'menu-item' && component.parents.some(function (parent) {
|
|
40
|
+
return parent.key === menuSection.key;
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
|
|
46
|
+
if (component.type === 'menu') {
|
|
47
|
+
var menuSections = children.filter(function (child) {
|
|
48
|
+
return child.type === 'menu-section';
|
|
49
|
+
});
|
|
50
|
+
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
51
|
+
}
|
|
52
|
+
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
53
|
+
return children.length === 0;
|
|
54
|
+
}
|
|
55
|
+
return false;
|
|
56
|
+
};
|
|
57
|
+
var _ComponentRenderer = function ComponentRenderer(_ref) {
|
|
58
|
+
var component = _ref.component,
|
|
59
|
+
parents = _ref.parents,
|
|
60
|
+
allComponents = _ref.allComponents,
|
|
8
61
|
fallbacks = _ref.fallbacks;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
62
|
+
var childTypes = getChildTypesForParent(component.type);
|
|
63
|
+
var children = getSortedChildren(allComponents.filter(function (comp) {
|
|
64
|
+
return childTypes.includes(comp.type);
|
|
65
|
+
}), component.key);
|
|
66
|
+
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
var Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
70
|
+
var newParents = [].concat(_toConsumableArray(parents), [{
|
|
71
|
+
key: component.key,
|
|
72
|
+
type: component.type
|
|
73
|
+
}]);
|
|
74
|
+
if (children.length === 0) {
|
|
75
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
76
|
+
parents: parents
|
|
77
|
+
}, null);
|
|
78
|
+
}
|
|
79
|
+
return /*#__PURE__*/React.createElement(Component, {
|
|
80
|
+
parents: parents
|
|
81
|
+
}, children.map(function (child) {
|
|
82
|
+
return /*#__PURE__*/React.createElement(_ComponentRenderer, {
|
|
83
|
+
key: child.key,
|
|
84
|
+
component: child,
|
|
85
|
+
parents: newParents,
|
|
86
|
+
allComponents: allComponents,
|
|
13
87
|
fallbacks: fallbacks
|
|
14
88
|
});
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
89
|
+
}));
|
|
90
|
+
};
|
|
91
|
+
export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
|
|
92
|
+
var toolbar = _ref2.toolbar,
|
|
93
|
+
components = _ref2.components,
|
|
94
|
+
fallbacks = _ref2.fallbacks;
|
|
95
|
+
var ToolbarComponent = toolbar.component || NoOp;
|
|
96
|
+
var sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
97
|
+
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(function (section) {
|
|
98
|
+
return /*#__PURE__*/React.createElement(_ComponentRenderer, {
|
|
99
|
+
key: section.key,
|
|
100
|
+
component: section,
|
|
101
|
+
parents: [{
|
|
102
|
+
key: toolbar.key,
|
|
103
|
+
type: toolbar.type
|
|
104
|
+
}],
|
|
105
|
+
allComponents: components.filter(hasParents),
|
|
106
|
+
fallbacks: fallbacks
|
|
107
|
+
});
|
|
108
|
+
}));
|
|
21
109
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ToolbarProps } from './types';
|
|
3
|
-
export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;
|
|
3
|
+
export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks, }: ToolbarProps) => React.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ToolbarProps } from './types';
|
|
3
|
-
export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks }: ToolbarProps) => React.JSX.Element;
|
|
3
|
+
export declare const ToolbarModelRenderer: ({ toolbar, components, fallbacks, }: ToolbarProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -21,8 +21,7 @@
|
|
|
21
21
|
],
|
|
22
22
|
"atlaskit:src": "src/index.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@atlaskit/
|
|
25
|
-
"@atlaskit/tokens": "^9.0.0",
|
|
24
|
+
"@atlaskit/tokens": "^10.1.0",
|
|
26
25
|
"@babel/runtime": "^7.0.0",
|
|
27
26
|
"@compiled/react": "^0.18.6"
|
|
28
27
|
},
|
|
@@ -30,7 +29,7 @@
|
|
|
30
29
|
"react": "^18.2.0"
|
|
31
30
|
},
|
|
32
31
|
"devDependencies": {
|
|
33
|
-
"@atlaskit/editor-toolbar": "^0.
|
|
32
|
+
"@atlaskit/editor-toolbar": "^0.19.0",
|
|
34
33
|
"@testing-library/react": "^16.3.0",
|
|
35
34
|
"react-dom": "^18.2.0"
|
|
36
35
|
},
|
|
@@ -69,16 +68,8 @@
|
|
|
69
68
|
]
|
|
70
69
|
}
|
|
71
70
|
},
|
|
72
|
-
"platform-feature-flags": {
|
|
73
|
-
"platform_editor_toolbar_aifc_renderer_rewrite": {
|
|
74
|
-
"type": "boolean"
|
|
75
|
-
},
|
|
76
|
-
"platform_editor_toolbar_aifc_overflow_menu_update": {
|
|
77
|
-
"type": "boolean"
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
71
|
"name": "@atlaskit/editor-toolbar-model",
|
|
81
|
-
"version": "0.
|
|
72
|
+
"version": "0.3.1",
|
|
82
73
|
"description": "register and render toolbar component",
|
|
83
74
|
"author": "Atlassian Pty Ltd",
|
|
84
75
|
"license": "Apache-2.0",
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ToolbarModelRenderer = void 0;
|
|
8
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
-
var _common = require("./common");
|
|
12
|
-
var hasParents = function hasParents(component) {
|
|
13
|
-
return component.type !== 'toolbar';
|
|
14
|
-
};
|
|
15
|
-
var getChildTypesForParent = function getChildTypesForParent(parentType) {
|
|
16
|
-
switch (parentType) {
|
|
17
|
-
case 'toolbar':
|
|
18
|
-
return ['section'];
|
|
19
|
-
case 'section':
|
|
20
|
-
return ['group'];
|
|
21
|
-
case 'group':
|
|
22
|
-
return ['button', 'menu'];
|
|
23
|
-
case 'menu':
|
|
24
|
-
case 'nested-menu':
|
|
25
|
-
return ['menu-section'];
|
|
26
|
-
case 'menu-section':
|
|
27
|
-
return ['menu-item', 'nested-menu'];
|
|
28
|
-
default:
|
|
29
|
-
return [];
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
|
|
33
|
-
switch (type) {
|
|
34
|
-
case 'group':
|
|
35
|
-
return fallbacks.group;
|
|
36
|
-
case 'menu-section':
|
|
37
|
-
return fallbacks.menuSection;
|
|
38
|
-
case 'section':
|
|
39
|
-
return fallbacks.section;
|
|
40
|
-
default:
|
|
41
|
-
return _common.NoOp;
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
|
|
45
|
-
return menuSections.some(function (menuSection) {
|
|
46
|
-
return allComponents.some(function (component) {
|
|
47
|
-
return component.type === 'menu-item' && component.parents.some(function (parent) {
|
|
48
|
-
return parent.key === menuSection.key;
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
|
|
54
|
-
if (component.type === 'menu') {
|
|
55
|
-
var menuSections = children.filter(function (child) {
|
|
56
|
-
return child.type === 'menu-section';
|
|
57
|
-
});
|
|
58
|
-
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
59
|
-
}
|
|
60
|
-
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
61
|
-
return children.length === 0;
|
|
62
|
-
}
|
|
63
|
-
return false;
|
|
64
|
-
};
|
|
65
|
-
var _ComponentRenderer = function ComponentRenderer(_ref) {
|
|
66
|
-
var component = _ref.component,
|
|
67
|
-
parents = _ref.parents,
|
|
68
|
-
allComponents = _ref.allComponents,
|
|
69
|
-
fallbacks = _ref.fallbacks;
|
|
70
|
-
var childTypes = getChildTypesForParent(component.type);
|
|
71
|
-
var children = (0, _common.getSortedChildren)(allComponents.filter(function (comp) {
|
|
72
|
-
return childTypes.includes(comp.type);
|
|
73
|
-
}), component.key);
|
|
74
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update')) {
|
|
75
|
-
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
|
-
} else {
|
|
79
|
-
if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
|
|
80
|
-
return null;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
var Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
84
|
-
var newParents = [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
85
|
-
key: component.key,
|
|
86
|
-
type: component.type
|
|
87
|
-
}]);
|
|
88
|
-
if (children.length === 0) {
|
|
89
|
-
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
90
|
-
parents: parents
|
|
91
|
-
}, null);
|
|
92
|
-
}
|
|
93
|
-
return /*#__PURE__*/_react.default.createElement(Component, {
|
|
94
|
-
parents: parents
|
|
95
|
-
}, children.map(function (child) {
|
|
96
|
-
return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
|
|
97
|
-
key: child.key,
|
|
98
|
-
component: child,
|
|
99
|
-
parents: newParents,
|
|
100
|
-
allComponents: allComponents,
|
|
101
|
-
fallbacks: fallbacks
|
|
102
|
-
});
|
|
103
|
-
}));
|
|
104
|
-
};
|
|
105
|
-
var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
|
|
106
|
-
var toolbar = _ref2.toolbar,
|
|
107
|
-
components = _ref2.components,
|
|
108
|
-
fallbacks = _ref2.fallbacks;
|
|
109
|
-
var ToolbarComponent = toolbar.component || _common.NoOp;
|
|
110
|
-
var sections = (0, _common.getSortedChildren)(components.filter(_common.isSection), toolbar.key);
|
|
111
|
-
return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(function (section) {
|
|
112
|
-
return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
|
|
113
|
-
key: section.key,
|
|
114
|
-
component: section,
|
|
115
|
-
parents: [{
|
|
116
|
-
key: toolbar.key,
|
|
117
|
-
type: toolbar.type
|
|
118
|
-
}],
|
|
119
|
-
allComponents: components.filter(hasParents),
|
|
120
|
-
fallbacks: fallbacks
|
|
121
|
-
});
|
|
122
|
-
}));
|
|
123
|
-
};
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ToolbarModelRenderer = void 0;
|
|
8
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _common = require("./common");
|
|
11
|
-
var isGroup = function isGroup(component) {
|
|
12
|
-
return component.type === 'group';
|
|
13
|
-
};
|
|
14
|
-
var isToolbarItem = function isToolbarItem(component) {
|
|
15
|
-
return component.type === 'button' || component.type === 'menu';
|
|
16
|
-
};
|
|
17
|
-
var isToolbarMenuSection = function isToolbarMenuSection(component) {
|
|
18
|
-
return component.type === 'menu-section';
|
|
19
|
-
};
|
|
20
|
-
var isToolbarMenuItem = function isToolbarMenuItem(component) {
|
|
21
|
-
return component.type === 'menu-item' || component.type === 'menu-section';
|
|
22
|
-
};
|
|
23
|
-
var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
|
|
24
|
-
return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
|
|
25
|
-
};
|
|
26
|
-
var getSortedChildren = function getSortedChildren(components, parentKey) {
|
|
27
|
-
return components.filter(function (component) {
|
|
28
|
-
return component.parents.some(function (parent) {
|
|
29
|
-
return parent.key === parentKey;
|
|
30
|
-
});
|
|
31
|
-
}).sort(function (a, b) {
|
|
32
|
-
var _a$parents$find, _b$parents$find;
|
|
33
|
-
return (((_a$parents$find = a.parents.find(function (p) {
|
|
34
|
-
return p.key === parentKey;
|
|
35
|
-
})) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
|
|
36
|
-
return p.key === parentKey;
|
|
37
|
-
})) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
|
|
41
|
-
var toolbar = _ref.toolbar,
|
|
42
|
-
components = _ref.components,
|
|
43
|
-
fallbacks = _ref.fallbacks;
|
|
44
|
-
var sections = getSortedChildren(components.filter(_common.isSection), toolbar.key);
|
|
45
|
-
var groups = components.filter(isGroup);
|
|
46
|
-
var toolbarItems = components.filter(isToolbarItem);
|
|
47
|
-
var menuSections = components.filter(isToolbarMenuSection);
|
|
48
|
-
var menuItems = components.filter(isToolbarMenuItem);
|
|
49
|
-
var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
|
|
50
|
-
var renderToolbarItem = function renderToolbarItem(_ref2) {
|
|
51
|
-
var item = _ref2.item,
|
|
52
|
-
index = _ref2.index,
|
|
53
|
-
parents = _ref2.parents;
|
|
54
|
-
if (item.type === 'menu') {
|
|
55
|
-
var menuComponents = getSortedChildren(menuSections, item.key);
|
|
56
|
-
if (menuComponents.length === 0) {
|
|
57
|
-
return null;
|
|
58
|
-
}
|
|
59
|
-
var Menu = item.component || _common.NoOp;
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement(Menu, {
|
|
61
|
-
key: item.key,
|
|
62
|
-
parents: parents
|
|
63
|
-
}, menuComponents.map(function (menuSection) {
|
|
64
|
-
var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
|
|
65
|
-
var MenuSection = menuSection.component || fallbacks.menuSection;
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement(MenuSection, {
|
|
67
|
-
key: menuSection.key,
|
|
68
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
69
|
-
key: item.key,
|
|
70
|
-
type: item.type
|
|
71
|
-
}])
|
|
72
|
-
}, menuItemsInSection.map(function (menuItem) {
|
|
73
|
-
if (menuItem.type === 'nested-menu') {
|
|
74
|
-
var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
|
|
75
|
-
var NestedMenu = menuItem.component;
|
|
76
|
-
return /*#__PURE__*/_react.default.createElement(NestedMenu, {
|
|
77
|
-
key: menuItem.key,
|
|
78
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
79
|
-
key: item.key,
|
|
80
|
-
type: item.type
|
|
81
|
-
}, {
|
|
82
|
-
key: menuSection.key,
|
|
83
|
-
type: menuSection.type
|
|
84
|
-
}])
|
|
85
|
-
}, nestedMenuComponents.map(function (nestedMenuSection) {
|
|
86
|
-
var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
|
|
87
|
-
var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
|
|
88
|
-
return /*#__PURE__*/_react.default.createElement(NestedMenuSection, {
|
|
89
|
-
key: nestedMenuSection.key,
|
|
90
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
91
|
-
key: item.key,
|
|
92
|
-
type: item.type
|
|
93
|
-
}, {
|
|
94
|
-
key: menuSection.key,
|
|
95
|
-
type: menuSection.type
|
|
96
|
-
}, {
|
|
97
|
-
key: menuItem.key,
|
|
98
|
-
type: menuItem.type
|
|
99
|
-
}])
|
|
100
|
-
}, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
|
|
101
|
-
var NestedMenuItem = nestedMenuItem.component || _common.NoOp;
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(NestedMenuItem, {
|
|
103
|
-
key: nestedMenuItem.key,
|
|
104
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
105
|
-
key: item.key,
|
|
106
|
-
type: item.type
|
|
107
|
-
}, {
|
|
108
|
-
key: menuSection.key,
|
|
109
|
-
type: menuSection.type
|
|
110
|
-
}, {
|
|
111
|
-
key: menuItem.key,
|
|
112
|
-
type: menuItem.type
|
|
113
|
-
}, {
|
|
114
|
-
key: nestedMenuSection.key,
|
|
115
|
-
type: nestedMenuSection.type
|
|
116
|
-
}])
|
|
117
|
-
});
|
|
118
|
-
}));
|
|
119
|
-
}));
|
|
120
|
-
}
|
|
121
|
-
var MenuItem = menuItem.component || _common.NoOp;
|
|
122
|
-
return /*#__PURE__*/_react.default.createElement(MenuItem, {
|
|
123
|
-
key: menuItem.key,
|
|
124
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
125
|
-
key: item.key,
|
|
126
|
-
type: item.type
|
|
127
|
-
}, {
|
|
128
|
-
key: menuSection.key,
|
|
129
|
-
type: menuSection.type
|
|
130
|
-
}])
|
|
131
|
-
});
|
|
132
|
-
}));
|
|
133
|
-
}));
|
|
134
|
-
}
|
|
135
|
-
var Button = item.component || _common.NoOp;
|
|
136
|
-
return /*#__PURE__*/_react.default.createElement(Button, {
|
|
137
|
-
key: item.key,
|
|
138
|
-
parents: parents
|
|
139
|
-
});
|
|
140
|
-
};
|
|
141
|
-
var renderGroup = function renderGroup(group, parents) {
|
|
142
|
-
var groupItems = getSortedChildren(toolbarItems, group.key);
|
|
143
|
-
if (groupItems.length === 0) {
|
|
144
|
-
return null;
|
|
145
|
-
}
|
|
146
|
-
var Group = group.component || fallbacks.group;
|
|
147
|
-
return /*#__PURE__*/_react.default.createElement(Group, {
|
|
148
|
-
key: group.key,
|
|
149
|
-
parents: parents
|
|
150
|
-
}, groupItems.map(function (item, index) {
|
|
151
|
-
return renderToolbarItem({
|
|
152
|
-
item: item,
|
|
153
|
-
index: index,
|
|
154
|
-
parents: [].concat((0, _toConsumableArray2.default)(parents), [{
|
|
155
|
-
key: group.key,
|
|
156
|
-
type: group.type
|
|
157
|
-
}])
|
|
158
|
-
});
|
|
159
|
-
}));
|
|
160
|
-
};
|
|
161
|
-
var renderSection = function renderSection(section) {
|
|
162
|
-
var sectionGroups = getSortedChildren(groups, section.key);
|
|
163
|
-
var Section = section.component || fallbacks.section;
|
|
164
|
-
var parents = [{
|
|
165
|
-
key: toolbar.key,
|
|
166
|
-
type: toolbar.type
|
|
167
|
-
}];
|
|
168
|
-
return /*#__PURE__*/_react.default.createElement(Section, {
|
|
169
|
-
key: section.key,
|
|
170
|
-
parents: parents
|
|
171
|
-
}, sectionGroups.map(function (group) {
|
|
172
|
-
return renderGroup(group, [].concat(parents, [{
|
|
173
|
-
key: section.key,
|
|
174
|
-
type: section.type
|
|
175
|
-
}]));
|
|
176
|
-
}));
|
|
177
|
-
};
|
|
178
|
-
var ToolbarComponent = toolbar.component || _common.NoOp;
|
|
179
|
-
return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(renderSection));
|
|
180
|
-
};
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { getSortedChildren, isSection, NoOp } from './common';
|
|
4
|
-
const hasParents = component => {
|
|
5
|
-
return component.type !== 'toolbar';
|
|
6
|
-
};
|
|
7
|
-
const getChildTypesForParent = parentType => {
|
|
8
|
-
switch (parentType) {
|
|
9
|
-
case 'toolbar':
|
|
10
|
-
return ['section'];
|
|
11
|
-
case 'section':
|
|
12
|
-
return ['group'];
|
|
13
|
-
case 'group':
|
|
14
|
-
return ['button', 'menu'];
|
|
15
|
-
case 'menu':
|
|
16
|
-
case 'nested-menu':
|
|
17
|
-
return ['menu-section'];
|
|
18
|
-
case 'menu-section':
|
|
19
|
-
return ['menu-item', 'nested-menu'];
|
|
20
|
-
default:
|
|
21
|
-
return [];
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
const getFallbackComponent = (type, fallbacks) => {
|
|
25
|
-
switch (type) {
|
|
26
|
-
case 'group':
|
|
27
|
-
return fallbacks.group;
|
|
28
|
-
case 'menu-section':
|
|
29
|
-
return fallbacks.menuSection;
|
|
30
|
-
case 'section':
|
|
31
|
-
return fallbacks.section;
|
|
32
|
-
default:
|
|
33
|
-
return NoOp;
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const hasMenuItems = (menuSections, allComponents) => {
|
|
37
|
-
return menuSections.some(menuSection => {
|
|
38
|
-
return allComponents.some(component => component.type === 'menu-item' && component.parents.some(parent => parent.key === menuSection.key));
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
const shouldHideEmptyComponent = (component, children, allComponents) => {
|
|
42
|
-
if (component.type === 'menu') {
|
|
43
|
-
const menuSections = children.filter(child => child.type === 'menu-section');
|
|
44
|
-
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
45
|
-
}
|
|
46
|
-
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
47
|
-
return children.length === 0;
|
|
48
|
-
}
|
|
49
|
-
return false;
|
|
50
|
-
};
|
|
51
|
-
const ComponentRenderer = ({
|
|
52
|
-
component,
|
|
53
|
-
parents,
|
|
54
|
-
allComponents,
|
|
55
|
-
fallbacks
|
|
56
|
-
}) => {
|
|
57
|
-
const childTypes = getChildTypesForParent(component.type);
|
|
58
|
-
const children = getSortedChildren(allComponents.filter(comp => childTypes.includes(comp.type)), component.key);
|
|
59
|
-
if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
|
|
60
|
-
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
} else {
|
|
64
|
-
if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
|
|
65
|
-
return null;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
const Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
69
|
-
const newParents = [...parents, {
|
|
70
|
-
key: component.key,
|
|
71
|
-
type: component.type
|
|
72
|
-
}];
|
|
73
|
-
if (children.length === 0) {
|
|
74
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
75
|
-
parents: parents
|
|
76
|
-
}, null);
|
|
77
|
-
}
|
|
78
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
79
|
-
parents: parents
|
|
80
|
-
}, children.map(child => /*#__PURE__*/React.createElement(ComponentRenderer, {
|
|
81
|
-
key: child.key,
|
|
82
|
-
component: child,
|
|
83
|
-
parents: newParents,
|
|
84
|
-
allComponents: allComponents,
|
|
85
|
-
fallbacks: fallbacks
|
|
86
|
-
})));
|
|
87
|
-
};
|
|
88
|
-
export const ToolbarModelRenderer = ({
|
|
89
|
-
toolbar,
|
|
90
|
-
components,
|
|
91
|
-
fallbacks
|
|
92
|
-
}) => {
|
|
93
|
-
const ToolbarComponent = toolbar.component || NoOp;
|
|
94
|
-
const sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
95
|
-
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(section => /*#__PURE__*/React.createElement(ComponentRenderer, {
|
|
96
|
-
key: section.key,
|
|
97
|
-
component: section,
|
|
98
|
-
parents: [{
|
|
99
|
-
key: toolbar.key,
|
|
100
|
-
type: toolbar.type
|
|
101
|
-
}],
|
|
102
|
-
allComponents: components.filter(hasParents),
|
|
103
|
-
fallbacks: fallbacks
|
|
104
|
-
})));
|
|
105
|
-
};
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { isSection, NoOp } from './common';
|
|
3
|
-
const isGroup = component => {
|
|
4
|
-
return component.type === 'group';
|
|
5
|
-
};
|
|
6
|
-
const isToolbarItem = component => {
|
|
7
|
-
return component.type === 'button' || component.type === 'menu';
|
|
8
|
-
};
|
|
9
|
-
const isToolbarMenuSection = component => {
|
|
10
|
-
return component.type === 'menu-section';
|
|
11
|
-
};
|
|
12
|
-
const isToolbarMenuItem = component => {
|
|
13
|
-
return component.type === 'menu-item' || component.type === 'menu-section';
|
|
14
|
-
};
|
|
15
|
-
const isToolbarMenuItemOrNestedMenu = component => {
|
|
16
|
-
return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
|
|
17
|
-
};
|
|
18
|
-
const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
|
|
19
|
-
var _a$parents$find, _b$parents$find;
|
|
20
|
-
return (((_a$parents$find = a.parents.find(p => p.key === parentKey)) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(p => p.key === parentKey)) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
|
|
21
|
-
});
|
|
22
|
-
export const ToolbarModelRenderer = ({
|
|
23
|
-
toolbar,
|
|
24
|
-
components,
|
|
25
|
-
fallbacks
|
|
26
|
-
}) => {
|
|
27
|
-
const sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
28
|
-
const groups = components.filter(isGroup);
|
|
29
|
-
const toolbarItems = components.filter(isToolbarItem);
|
|
30
|
-
const menuSections = components.filter(isToolbarMenuSection);
|
|
31
|
-
const menuItems = components.filter(isToolbarMenuItem);
|
|
32
|
-
const menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
|
|
33
|
-
const renderToolbarItem = ({
|
|
34
|
-
item,
|
|
35
|
-
index,
|
|
36
|
-
parents
|
|
37
|
-
}) => {
|
|
38
|
-
if (item.type === 'menu') {
|
|
39
|
-
const menuComponents = getSortedChildren(menuSections, item.key);
|
|
40
|
-
if (menuComponents.length === 0) {
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
const Menu = item.component || NoOp;
|
|
44
|
-
return /*#__PURE__*/React.createElement(Menu, {
|
|
45
|
-
key: item.key,
|
|
46
|
-
parents: parents
|
|
47
|
-
}, menuComponents.map(menuSection => {
|
|
48
|
-
const menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
|
|
49
|
-
const MenuSection = menuSection.component || fallbacks.menuSection;
|
|
50
|
-
return /*#__PURE__*/React.createElement(MenuSection, {
|
|
51
|
-
key: menuSection.key,
|
|
52
|
-
parents: [...parents, {
|
|
53
|
-
key: item.key,
|
|
54
|
-
type: item.type
|
|
55
|
-
}]
|
|
56
|
-
}, menuItemsInSection.map(menuItem => {
|
|
57
|
-
if (menuItem.type === 'nested-menu') {
|
|
58
|
-
const nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
|
|
59
|
-
const NestedMenu = menuItem.component;
|
|
60
|
-
return /*#__PURE__*/React.createElement(NestedMenu, {
|
|
61
|
-
key: menuItem.key,
|
|
62
|
-
parents: [...parents, {
|
|
63
|
-
key: item.key,
|
|
64
|
-
type: item.type
|
|
65
|
-
}, {
|
|
66
|
-
key: menuSection.key,
|
|
67
|
-
type: menuSection.type
|
|
68
|
-
}]
|
|
69
|
-
}, nestedMenuComponents.map(nestedMenuSection => {
|
|
70
|
-
const menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
|
|
71
|
-
const NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
|
|
72
|
-
return /*#__PURE__*/React.createElement(NestedMenuSection, {
|
|
73
|
-
key: nestedMenuSection.key,
|
|
74
|
-
parents: [...parents, {
|
|
75
|
-
key: item.key,
|
|
76
|
-
type: item.type
|
|
77
|
-
}, {
|
|
78
|
-
key: menuSection.key,
|
|
79
|
-
type: menuSection.type
|
|
80
|
-
}, {
|
|
81
|
-
key: menuItem.key,
|
|
82
|
-
type: menuItem.type
|
|
83
|
-
}]
|
|
84
|
-
}, menuItemsInNestedMenuSection.map(nestedMenuItem => {
|
|
85
|
-
const NestedMenuItem = nestedMenuItem.component || NoOp;
|
|
86
|
-
return /*#__PURE__*/React.createElement(NestedMenuItem, {
|
|
87
|
-
key: nestedMenuItem.key,
|
|
88
|
-
parents: [...parents, {
|
|
89
|
-
key: item.key,
|
|
90
|
-
type: item.type
|
|
91
|
-
}, {
|
|
92
|
-
key: menuSection.key,
|
|
93
|
-
type: menuSection.type
|
|
94
|
-
}, {
|
|
95
|
-
key: menuItem.key,
|
|
96
|
-
type: menuItem.type
|
|
97
|
-
}, {
|
|
98
|
-
key: nestedMenuSection.key,
|
|
99
|
-
type: nestedMenuSection.type
|
|
100
|
-
}]
|
|
101
|
-
});
|
|
102
|
-
}));
|
|
103
|
-
}));
|
|
104
|
-
}
|
|
105
|
-
const MenuItem = menuItem.component || NoOp;
|
|
106
|
-
return /*#__PURE__*/React.createElement(MenuItem, {
|
|
107
|
-
key: menuItem.key,
|
|
108
|
-
parents: [...parents, {
|
|
109
|
-
key: item.key,
|
|
110
|
-
type: item.type
|
|
111
|
-
}, {
|
|
112
|
-
key: menuSection.key,
|
|
113
|
-
type: menuSection.type
|
|
114
|
-
}]
|
|
115
|
-
});
|
|
116
|
-
}));
|
|
117
|
-
}));
|
|
118
|
-
}
|
|
119
|
-
const Button = item.component || NoOp;
|
|
120
|
-
return /*#__PURE__*/React.createElement(Button, {
|
|
121
|
-
key: item.key,
|
|
122
|
-
parents: parents
|
|
123
|
-
});
|
|
124
|
-
};
|
|
125
|
-
const renderGroup = (group, parents) => {
|
|
126
|
-
const groupItems = getSortedChildren(toolbarItems, group.key);
|
|
127
|
-
if (groupItems.length === 0) {
|
|
128
|
-
return null;
|
|
129
|
-
}
|
|
130
|
-
const Group = group.component || fallbacks.group;
|
|
131
|
-
return /*#__PURE__*/React.createElement(Group, {
|
|
132
|
-
key: group.key,
|
|
133
|
-
parents: parents
|
|
134
|
-
}, groupItems.map((item, index) => {
|
|
135
|
-
return renderToolbarItem({
|
|
136
|
-
item,
|
|
137
|
-
index,
|
|
138
|
-
parents: [...parents, {
|
|
139
|
-
key: group.key,
|
|
140
|
-
type: group.type
|
|
141
|
-
}]
|
|
142
|
-
});
|
|
143
|
-
}));
|
|
144
|
-
};
|
|
145
|
-
const renderSection = section => {
|
|
146
|
-
const sectionGroups = getSortedChildren(groups, section.key);
|
|
147
|
-
const Section = section.component || fallbacks.section;
|
|
148
|
-
const parents = [{
|
|
149
|
-
key: toolbar.key,
|
|
150
|
-
type: toolbar.type
|
|
151
|
-
}];
|
|
152
|
-
return /*#__PURE__*/React.createElement(Section, {
|
|
153
|
-
key: section.key,
|
|
154
|
-
parents: parents
|
|
155
|
-
}, sectionGroups.map(group => renderGroup(group, [...parents, {
|
|
156
|
-
key: section.key,
|
|
157
|
-
type: section.type
|
|
158
|
-
}])));
|
|
159
|
-
};
|
|
160
|
-
const ToolbarComponent = toolbar.component || NoOp;
|
|
161
|
-
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
|
|
162
|
-
};
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
-
import { getSortedChildren, isSection, NoOp } from './common';
|
|
5
|
-
var hasParents = function hasParents(component) {
|
|
6
|
-
return component.type !== 'toolbar';
|
|
7
|
-
};
|
|
8
|
-
var getChildTypesForParent = function getChildTypesForParent(parentType) {
|
|
9
|
-
switch (parentType) {
|
|
10
|
-
case 'toolbar':
|
|
11
|
-
return ['section'];
|
|
12
|
-
case 'section':
|
|
13
|
-
return ['group'];
|
|
14
|
-
case 'group':
|
|
15
|
-
return ['button', 'menu'];
|
|
16
|
-
case 'menu':
|
|
17
|
-
case 'nested-menu':
|
|
18
|
-
return ['menu-section'];
|
|
19
|
-
case 'menu-section':
|
|
20
|
-
return ['menu-item', 'nested-menu'];
|
|
21
|
-
default:
|
|
22
|
-
return [];
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
|
|
26
|
-
switch (type) {
|
|
27
|
-
case 'group':
|
|
28
|
-
return fallbacks.group;
|
|
29
|
-
case 'menu-section':
|
|
30
|
-
return fallbacks.menuSection;
|
|
31
|
-
case 'section':
|
|
32
|
-
return fallbacks.section;
|
|
33
|
-
default:
|
|
34
|
-
return NoOp;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
var hasMenuItems = function hasMenuItems(menuSections, allComponents) {
|
|
38
|
-
return menuSections.some(function (menuSection) {
|
|
39
|
-
return allComponents.some(function (component) {
|
|
40
|
-
return component.type === 'menu-item' && component.parents.some(function (parent) {
|
|
41
|
-
return parent.key === menuSection.key;
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
var shouldHideEmptyComponent = function shouldHideEmptyComponent(component, children, allComponents) {
|
|
47
|
-
if (component.type === 'menu') {
|
|
48
|
-
var menuSections = children.filter(function (child) {
|
|
49
|
-
return child.type === 'menu-section';
|
|
50
|
-
});
|
|
51
|
-
return menuSections.length === 0 || !hasMenuItems(menuSections, allComponents);
|
|
52
|
-
}
|
|
53
|
-
if (component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') {
|
|
54
|
-
return children.length === 0;
|
|
55
|
-
}
|
|
56
|
-
return false;
|
|
57
|
-
};
|
|
58
|
-
var _ComponentRenderer = function ComponentRenderer(_ref) {
|
|
59
|
-
var component = _ref.component,
|
|
60
|
-
parents = _ref.parents,
|
|
61
|
-
allComponents = _ref.allComponents,
|
|
62
|
-
fallbacks = _ref.fallbacks;
|
|
63
|
-
var childTypes = getChildTypesForParent(component.type);
|
|
64
|
-
var children = getSortedChildren(allComponents.filter(function (comp) {
|
|
65
|
-
return childTypes.includes(comp.type);
|
|
66
|
-
}), component.key);
|
|
67
|
-
if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
|
|
68
|
-
if (shouldHideEmptyComponent(component, children, allComponents)) {
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
} else {
|
|
72
|
-
if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
|
|
73
|
-
return null;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
var Component = component.component || getFallbackComponent(component.type, fallbacks);
|
|
77
|
-
var newParents = [].concat(_toConsumableArray(parents), [{
|
|
78
|
-
key: component.key,
|
|
79
|
-
type: component.type
|
|
80
|
-
}]);
|
|
81
|
-
if (children.length === 0) {
|
|
82
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
83
|
-
parents: parents
|
|
84
|
-
}, null);
|
|
85
|
-
}
|
|
86
|
-
return /*#__PURE__*/React.createElement(Component, {
|
|
87
|
-
parents: parents
|
|
88
|
-
}, children.map(function (child) {
|
|
89
|
-
return /*#__PURE__*/React.createElement(_ComponentRenderer, {
|
|
90
|
-
key: child.key,
|
|
91
|
-
component: child,
|
|
92
|
-
parents: newParents,
|
|
93
|
-
allComponents: allComponents,
|
|
94
|
-
fallbacks: fallbacks
|
|
95
|
-
});
|
|
96
|
-
}));
|
|
97
|
-
};
|
|
98
|
-
export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
|
|
99
|
-
var toolbar = _ref2.toolbar,
|
|
100
|
-
components = _ref2.components,
|
|
101
|
-
fallbacks = _ref2.fallbacks;
|
|
102
|
-
var ToolbarComponent = toolbar.component || NoOp;
|
|
103
|
-
var sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
104
|
-
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(function (section) {
|
|
105
|
-
return /*#__PURE__*/React.createElement(_ComponentRenderer, {
|
|
106
|
-
key: section.key,
|
|
107
|
-
component: section,
|
|
108
|
-
parents: [{
|
|
109
|
-
key: toolbar.key,
|
|
110
|
-
type: toolbar.type
|
|
111
|
-
}],
|
|
112
|
-
allComponents: components.filter(hasParents),
|
|
113
|
-
fallbacks: fallbacks
|
|
114
|
-
});
|
|
115
|
-
}));
|
|
116
|
-
};
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { isSection, NoOp } from './common';
|
|
4
|
-
var isGroup = function isGroup(component) {
|
|
5
|
-
return component.type === 'group';
|
|
6
|
-
};
|
|
7
|
-
var isToolbarItem = function isToolbarItem(component) {
|
|
8
|
-
return component.type === 'button' || component.type === 'menu';
|
|
9
|
-
};
|
|
10
|
-
var isToolbarMenuSection = function isToolbarMenuSection(component) {
|
|
11
|
-
return component.type === 'menu-section';
|
|
12
|
-
};
|
|
13
|
-
var isToolbarMenuItem = function isToolbarMenuItem(component) {
|
|
14
|
-
return component.type === 'menu-item' || component.type === 'menu-section';
|
|
15
|
-
};
|
|
16
|
-
var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
|
|
17
|
-
return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
|
|
18
|
-
};
|
|
19
|
-
var getSortedChildren = function getSortedChildren(components, parentKey) {
|
|
20
|
-
return components.filter(function (component) {
|
|
21
|
-
return component.parents.some(function (parent) {
|
|
22
|
-
return parent.key === parentKey;
|
|
23
|
-
});
|
|
24
|
-
}).sort(function (a, b) {
|
|
25
|
-
var _a$parents$find, _b$parents$find;
|
|
26
|
-
return (((_a$parents$find = a.parents.find(function (p) {
|
|
27
|
-
return p.key === parentKey;
|
|
28
|
-
})) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
|
|
29
|
-
return p.key === parentKey;
|
|
30
|
-
})) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
|
|
34
|
-
var toolbar = _ref.toolbar,
|
|
35
|
-
components = _ref.components,
|
|
36
|
-
fallbacks = _ref.fallbacks;
|
|
37
|
-
var sections = getSortedChildren(components.filter(isSection), toolbar.key);
|
|
38
|
-
var groups = components.filter(isGroup);
|
|
39
|
-
var toolbarItems = components.filter(isToolbarItem);
|
|
40
|
-
var menuSections = components.filter(isToolbarMenuSection);
|
|
41
|
-
var menuItems = components.filter(isToolbarMenuItem);
|
|
42
|
-
var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
|
|
43
|
-
var renderToolbarItem = function renderToolbarItem(_ref2) {
|
|
44
|
-
var item = _ref2.item,
|
|
45
|
-
index = _ref2.index,
|
|
46
|
-
parents = _ref2.parents;
|
|
47
|
-
if (item.type === 'menu') {
|
|
48
|
-
var menuComponents = getSortedChildren(menuSections, item.key);
|
|
49
|
-
if (menuComponents.length === 0) {
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
52
|
-
var Menu = item.component || NoOp;
|
|
53
|
-
return /*#__PURE__*/React.createElement(Menu, {
|
|
54
|
-
key: item.key,
|
|
55
|
-
parents: parents
|
|
56
|
-
}, menuComponents.map(function (menuSection) {
|
|
57
|
-
var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
|
|
58
|
-
var MenuSection = menuSection.component || fallbacks.menuSection;
|
|
59
|
-
return /*#__PURE__*/React.createElement(MenuSection, {
|
|
60
|
-
key: menuSection.key,
|
|
61
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
62
|
-
key: item.key,
|
|
63
|
-
type: item.type
|
|
64
|
-
}])
|
|
65
|
-
}, menuItemsInSection.map(function (menuItem) {
|
|
66
|
-
if (menuItem.type === 'nested-menu') {
|
|
67
|
-
var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
|
|
68
|
-
var NestedMenu = menuItem.component;
|
|
69
|
-
return /*#__PURE__*/React.createElement(NestedMenu, {
|
|
70
|
-
key: menuItem.key,
|
|
71
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
72
|
-
key: item.key,
|
|
73
|
-
type: item.type
|
|
74
|
-
}, {
|
|
75
|
-
key: menuSection.key,
|
|
76
|
-
type: menuSection.type
|
|
77
|
-
}])
|
|
78
|
-
}, nestedMenuComponents.map(function (nestedMenuSection) {
|
|
79
|
-
var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
|
|
80
|
-
var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
|
|
81
|
-
return /*#__PURE__*/React.createElement(NestedMenuSection, {
|
|
82
|
-
key: nestedMenuSection.key,
|
|
83
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
84
|
-
key: item.key,
|
|
85
|
-
type: item.type
|
|
86
|
-
}, {
|
|
87
|
-
key: menuSection.key,
|
|
88
|
-
type: menuSection.type
|
|
89
|
-
}, {
|
|
90
|
-
key: menuItem.key,
|
|
91
|
-
type: menuItem.type
|
|
92
|
-
}])
|
|
93
|
-
}, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
|
|
94
|
-
var NestedMenuItem = nestedMenuItem.component || NoOp;
|
|
95
|
-
return /*#__PURE__*/React.createElement(NestedMenuItem, {
|
|
96
|
-
key: nestedMenuItem.key,
|
|
97
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
98
|
-
key: item.key,
|
|
99
|
-
type: item.type
|
|
100
|
-
}, {
|
|
101
|
-
key: menuSection.key,
|
|
102
|
-
type: menuSection.type
|
|
103
|
-
}, {
|
|
104
|
-
key: menuItem.key,
|
|
105
|
-
type: menuItem.type
|
|
106
|
-
}, {
|
|
107
|
-
key: nestedMenuSection.key,
|
|
108
|
-
type: nestedMenuSection.type
|
|
109
|
-
}])
|
|
110
|
-
});
|
|
111
|
-
}));
|
|
112
|
-
}));
|
|
113
|
-
}
|
|
114
|
-
var MenuItem = menuItem.component || NoOp;
|
|
115
|
-
return /*#__PURE__*/React.createElement(MenuItem, {
|
|
116
|
-
key: menuItem.key,
|
|
117
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
118
|
-
key: item.key,
|
|
119
|
-
type: item.type
|
|
120
|
-
}, {
|
|
121
|
-
key: menuSection.key,
|
|
122
|
-
type: menuSection.type
|
|
123
|
-
}])
|
|
124
|
-
});
|
|
125
|
-
}));
|
|
126
|
-
}));
|
|
127
|
-
}
|
|
128
|
-
var Button = item.component || NoOp;
|
|
129
|
-
return /*#__PURE__*/React.createElement(Button, {
|
|
130
|
-
key: item.key,
|
|
131
|
-
parents: parents
|
|
132
|
-
});
|
|
133
|
-
};
|
|
134
|
-
var renderGroup = function renderGroup(group, parents) {
|
|
135
|
-
var groupItems = getSortedChildren(toolbarItems, group.key);
|
|
136
|
-
if (groupItems.length === 0) {
|
|
137
|
-
return null;
|
|
138
|
-
}
|
|
139
|
-
var Group = group.component || fallbacks.group;
|
|
140
|
-
return /*#__PURE__*/React.createElement(Group, {
|
|
141
|
-
key: group.key,
|
|
142
|
-
parents: parents
|
|
143
|
-
}, groupItems.map(function (item, index) {
|
|
144
|
-
return renderToolbarItem({
|
|
145
|
-
item: item,
|
|
146
|
-
index: index,
|
|
147
|
-
parents: [].concat(_toConsumableArray(parents), [{
|
|
148
|
-
key: group.key,
|
|
149
|
-
type: group.type
|
|
150
|
-
}])
|
|
151
|
-
});
|
|
152
|
-
}));
|
|
153
|
-
};
|
|
154
|
-
var renderSection = function renderSection(section) {
|
|
155
|
-
var sectionGroups = getSortedChildren(groups, section.key);
|
|
156
|
-
var Section = section.component || fallbacks.section;
|
|
157
|
-
var parents = [{
|
|
158
|
-
key: toolbar.key,
|
|
159
|
-
type: toolbar.type
|
|
160
|
-
}];
|
|
161
|
-
return /*#__PURE__*/React.createElement(Section, {
|
|
162
|
-
key: section.key,
|
|
163
|
-
parents: parents
|
|
164
|
-
}, sectionGroups.map(function (group) {
|
|
165
|
-
return renderGroup(group, [].concat(parents, [{
|
|
166
|
-
key: section.key,
|
|
167
|
-
type: section.type
|
|
168
|
-
}]));
|
|
169
|
-
}));
|
|
170
|
-
};
|
|
171
|
-
var ToolbarComponent = toolbar.component || NoOp;
|
|
172
|
-
return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
|
|
173
|
-
};
|