@atlaskit/editor-toolbar-model 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-toolbar-model
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.2
 
 ### Patch Changes
@@ -34,7 +46,6 @@
 
 - [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
   [ux] [ED-28473] minor UI updates for editor-toolbar
-
   - Use ADS ButtonGroup for ToolbarButtonGroup
   - Remove groupLocation prop and use CSS instead
   - Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and

package/dist/cjs/ui/toolbar-model-renderer/ToolbarRendererNew.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarModelRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _common = require("./common");
+var hasParents = function hasParents(component) {
+  return component.type !== 'toolbar';
+};
+var getChildTypesForParent = function getChildTypesForParent(parentType) {
+  switch (parentType) {
+    case 'toolbar':
+      return ['section'];
+    case 'section':
+      return ['group'];
+    case 'group':
+      return ['button', 'menu'];
+    case 'menu':
+    case 'nested-menu':
+      return ['menu-section'];
+    case 'menu-section':
+      return ['menu-item', 'nested-menu'];
+    default:
+      return [];
+  }
+};
+var getFallbackComponent = function getFallbackComponent(type, fallbacks) {
+  switch (type) {
+    case 'group':
+      return fallbacks.group;
+    case 'menu-section':
+      return fallbacks.menuSection;
+    case 'section':
+      return fallbacks.section;
+    default:
+      return _common.NoOp;
+  }
+};
+var _ComponentRenderer = function ComponentRenderer(_ref) {
+  var component = _ref.component,
+    parents = _ref.parents,
+    allComponents = _ref.allComponents,
+    fallbacks = _ref.fallbacks;
+  var childTypes = getChildTypesForParent(component.type);
+  var children = (0, _common.getSortedChildren)(allComponents.filter(function (comp) {
+    return childTypes.includes(comp.type);
+  }), component.key);
+  if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
+    return null;
+  }
+  var Component = component.component || getFallbackComponent(component.type, fallbacks);
+  var newParents = [].concat((0, _toConsumableArray2.default)(parents), [{
+    key: component.key,
+    type: component.type
+  }]);
+  if (children.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(Component, {
+      parents: parents
+    }, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    parents: parents
+  }, children.map(function (child) {
+    return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
+      key: child.key,
+      component: child,
+      parents: newParents,
+      allComponents: allComponents,
+      fallbacks: fallbacks
+    });
+  }));
+};
+var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
+  var toolbar = _ref2.toolbar,
+    components = _ref2.components,
+    fallbacks = _ref2.fallbacks;
+  var ToolbarComponent = toolbar.component || _common.NoOp;
+  var sections = (0, _common.getSortedChildren)(components.filter(_common.isSection), toolbar.key);
+  return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(function (section) {
+    return /*#__PURE__*/_react.default.createElement(_ComponentRenderer, {
+      key: section.key,
+      component: section,
+      parents: [{
+        key: toolbar.key,
+        type: toolbar.type
+      }],
+      allComponents: components.filter(hasParents),
+      fallbacks: fallbacks
+    });
+  }));
+};

package/dist/cjs/ui/toolbar-model-renderer/ToolbarRendererOld.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarModelRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _common = require("./common");
+var isGroup = function isGroup(component) {
+  return component.type === 'group';
+};
+var isToolbarItem = function isToolbarItem(component) {
+  return component.type === 'button' || component.type === 'menu';
+};
+var isToolbarMenuSection = function isToolbarMenuSection(component) {
+  return component.type === 'menu-section';
+};
+var isToolbarMenuItem = function isToolbarMenuItem(component) {
+  return component.type === 'menu-item' || component.type === 'menu-section';
+};
+var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
+  return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
+};
+var getSortedChildren = function getSortedChildren(components, parentKey) {
+  return components.filter(function (component) {
+    return component.parents.some(function (parent) {
+      return parent.key === parentKey;
+    });
+  }).sort(function (a, b) {
+    var _a$parents$find, _b$parents$find;
+    return (((_a$parents$find = a.parents.find(function (p) {
+      return p.key === parentKey;
+    })) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
+      return p.key === parentKey;
+    })) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
+  });
+};
+var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
+  var toolbar = _ref.toolbar,
+    components = _ref.components,
+    fallbacks = _ref.fallbacks;
+  var sections = getSortedChildren(components.filter(_common.isSection), toolbar.key);
+  var groups = components.filter(isGroup);
+  var toolbarItems = components.filter(isToolbarItem);
+  var menuSections = components.filter(isToolbarMenuSection);
+  var menuItems = components.filter(isToolbarMenuItem);
+  var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
+  var renderToolbarItem = function renderToolbarItem(_ref2) {
+    var item = _ref2.item,
+      index = _ref2.index,
+      parents = _ref2.parents;
+    if (item.type === 'menu') {
+      var menuComponents = getSortedChildren(menuSections, item.key);
+      if (menuComponents.length === 0) {
+        return null;
+      }
+      var Menu = item.component || _common.NoOp;
+      return /*#__PURE__*/_react.default.createElement(Menu, {
+        key: item.key,
+        parents: parents
+      }, menuComponents.map(function (menuSection) {
+        var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
+        var MenuSection = menuSection.component || fallbacks.menuSection;
+        return /*#__PURE__*/_react.default.createElement(MenuSection, {
+          key: menuSection.key,
+          parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+            key: item.key,
+            type: item.type
+          }])
+        }, menuItemsInSection.map(function (menuItem) {
+          if (menuItem.type === 'nested-menu') {
+            var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
+            var NestedMenu = menuItem.component;
+            return /*#__PURE__*/_react.default.createElement(NestedMenu, {
+              key: menuItem.key,
+              parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+                key: item.key,
+                type: item.type
+              }, {
+                key: menuSection.key,
+                type: menuSection.type
+              }])
+            }, nestedMenuComponents.map(function (nestedMenuSection) {
+              var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
+              var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
+              return /*#__PURE__*/_react.default.createElement(NestedMenuSection, {
+                key: nestedMenuSection.key,
+                parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+                  key: item.key,
+                  type: item.type
+                }, {
+                  key: menuSection.key,
+                  type: menuSection.type
+                }, {
+                  key: menuItem.key,
+                  type: menuItem.type
+                }])
+              }, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
+                var NestedMenuItem = nestedMenuItem.component || _common.NoOp;
+                return /*#__PURE__*/_react.default.createElement(NestedMenuItem, {
+                  key: nestedMenuItem.key,
+                  parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+                    key: item.key,
+                    type: item.type
+                  }, {
+                    key: menuSection.key,
+                    type: menuSection.type
+                  }, {
+                    key: menuItem.key,
+                    type: menuItem.type
+                  }, {
+                    key: nestedMenuSection.key,
+                    type: nestedMenuSection.type
+                  }])
+                });
+              }));
+            }));
+          }
+          var MenuItem = menuItem.component || _common.NoOp;
+          return /*#__PURE__*/_react.default.createElement(MenuItem, {
+            key: menuItem.key,
+            parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+              key: item.key,
+              type: item.type
+            }, {
+              key: menuSection.key,
+              type: menuSection.type
+            }])
+          });
+        }));
+      }));
+    }
+    var Button = item.component || _common.NoOp;
+    return /*#__PURE__*/_react.default.createElement(Button, {
+      key: item.key,
+      parents: parents
+    });
+  };
+  var renderGroup = function renderGroup(group, parents) {
+    var groupItems = getSortedChildren(toolbarItems, group.key);
+    if (groupItems.length === 0) {
+      return null;
+    }
+    var Group = group.component || fallbacks.group;
+    return /*#__PURE__*/_react.default.createElement(Group, {
+      key: group.key,
+      parents: parents
+    }, groupItems.map(function (item, index) {
+      return renderToolbarItem({
+        item: item,
+        index: index,
+        parents: [].concat((0, _toConsumableArray2.default)(parents), [{
+          key: group.key,
+          type: group.type
+        }])
+      });
+    }));
+  };
+  var renderSection = function renderSection(section) {
+    var sectionGroups = getSortedChildren(groups, section.key);
+    var Section = section.component || fallbacks.section;
+    var parents = [{
+      key: toolbar.key,
+      type: toolbar.type
+    }];
+    return /*#__PURE__*/_react.default.createElement(Section, {
+      key: section.key,
+      parents: parents
+    }, sectionGroups.map(function (group) {
+      return renderGroup(group, [].concat(parents, [{
+        key: section.key,
+        type: section.type
+      }]));
+    }));
+  };
+  var ToolbarComponent = toolbar.component || _common.NoOp;
+  return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(renderSection));
+};

package/dist/cjs/ui/toolbar-model-renderer/common.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSection = exports.getSortedChildren = exports.NoOp = void 0;
+var getSortedChildren = exports.getSortedChildren = function getSortedChildren(components, parentKey) {
+  return components.filter(function (component) {
+    return component.parents.some(function (parent) {
+      return parent.key === parentKey;
+    });
+  }).sort(function (a, b) {
+    var _a$parents$find, _b$parents$find;
+    return (((_a$parents$find = a.parents.find(function (p) {
+      return p.key === parentKey;
+    })) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
+      return p.key === parentKey;
+    })) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
+  });
+};
+var NoOp = exports.NoOp = function NoOp(props) {
+  return null;
+};
+var isSection = exports.isSection = function isSection(component) {
+  return component.type === 'section';
+};

package/dist/cjs/ui/toolbar-model-renderer/index.js

@@ -5,181 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarModelRenderer = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
-var NoOp = function NoOp(props) {
-  return null;
-};
-var isSection = function isSection(component) {
-  return component.type === 'section';
-};
-var isGroup = function isGroup(component) {
-  return component.type === 'group';
-};
-var isToolbarItem = function isToolbarItem(component) {
-  return component.type === 'button' || component.type === 'menu';
-};
-var isToolbarMenuSection = function isToolbarMenuSection(component) {
-  return component.type === 'menu-section';
-};
-var isToolbarMenuItem = function isToolbarMenuItem(component) {
-  return component.type === 'menu-item' || component.type === 'menu-section';
-};
-var isToolbarMenuItemOrNestedMenu = function isToolbarMenuItemOrNestedMenu(component) {
-  return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
-};
-var getSortedChildren = function getSortedChildren(components, parentKey) {
-  return components.filter(function (component) {
-    return component.parents.some(function (parent) {
-      return parent.key === parentKey;
-    });
-  }).sort(function (a, b) {
-    var _a$parents$find, _b$parents$find;
-    return (((_a$parents$find = a.parents.find(function (p) {
-      return p.key === parentKey;
-    })) === null || _a$parents$find === void 0 ? void 0 : _a$parents$find.rank) || 0) - (((_b$parents$find = b.parents.find(function (p) {
-      return p.key === parentKey;
-    })) === null || _b$parents$find === void 0 ? void 0 : _b$parents$find.rank) || 0);
-  });
-};
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ToolbarRendererNew = require("./ToolbarRendererNew");
+var _ToolbarRendererOld = require("./ToolbarRendererOld");
 var ToolbarModelRenderer = exports.ToolbarModelRenderer = function ToolbarModelRenderer(_ref) {
   var toolbar = _ref.toolbar,
     components = _ref.components,
     fallbacks = _ref.fallbacks;
-  var sections = getSortedChildren(components.filter(isSection), toolbar.key);
-  var groups = components.filter(isGroup);
-  var toolbarItems = components.filter(isToolbarItem);
-  var menuSections = components.filter(isToolbarMenuSection);
-  var menuItems = components.filter(isToolbarMenuItem);
-  var menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
-  var renderToolbarItem = function renderToolbarItem(_ref2) {
-    var item = _ref2.item,
-      index = _ref2.index,
-      parents = _ref2.parents;
-    if (item.type === 'menu') {
-      var menuComponents = getSortedChildren(menuSections, item.key);
-      if (menuComponents.length === 0) {
-        return null;
-      }
-      var Menu = item.component || NoOp;
-      return /*#__PURE__*/_react.default.createElement(Menu, {
-        key: item.key,
-        parents: parents
-      }, menuComponents.map(function (menuSection) {
-        var menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
-        var MenuSection = menuSection.component || fallbacks.menuSection;
-        return /*#__PURE__*/_react.default.createElement(MenuSection, {
-          key: menuSection.key,
-          parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-            key: item.key,
-            type: item.type
-          }])
-        }, menuItemsInSection.map(function (menuItem) {
-          if (menuItem.type === 'nested-menu') {
-            var nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
-            var NestedMenu = menuItem.component;
-            return /*#__PURE__*/_react.default.createElement(NestedMenu, {
-              key: menuItem.key,
-              parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-                key: item.key,
-                type: item.type
-              }, {
-                key: menuSection.key,
-                type: menuSection.type
-              }])
-            }, nestedMenuComponents.map(function (nestedMenuSection) {
-              var menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
-              var NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
-              return /*#__PURE__*/_react.default.createElement(NestedMenuSection, {
-                key: nestedMenuSection.key,
-                parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-                  key: item.key,
-                  type: item.type
-                }, {
-                  key: menuSection.key,
-                  type: menuSection.type
-                }, {
-                  key: menuItem.key,
-                  type: menuItem.type
-                }])
-              }, menuItemsInNestedMenuSection.map(function (nestedMenuItem) {
-                var NestedMenuItem = nestedMenuItem.component || NoOp;
-                return /*#__PURE__*/_react.default.createElement(NestedMenuItem, {
-                  key: nestedMenuItem.key,
-                  parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-                    key: item.key,
-                    type: item.type
-                  }, {
-                    key: menuSection.key,
-                    type: menuSection.type
-                  }, {
-                    key: menuItem.key,
-                    type: menuItem.type
-                  }, {
-                    key: nestedMenuSection.key,
-                    type: nestedMenuSection.type
-                  }])
-                });
-              }));
-            }));
-          }
-          var MenuItem = menuItem.component || NoOp;
-          return /*#__PURE__*/_react.default.createElement(MenuItem, {
-            key: menuItem.key,
-            parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-              key: item.key,
-              type: item.type
-            }, {
-              key: menuSection.key,
-              type: menuSection.type
-            }])
-          });
-        }));
-      }));
-    }
-    var Button = item.component || NoOp;
-    return /*#__PURE__*/_react.default.createElement(Button, {
-      key: item.key,
-      parents: parents
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_renderer_rewrite')) {
+    return /*#__PURE__*/_react.default.createElement(_ToolbarRendererNew.ToolbarModelRenderer, {
+      toolbar: toolbar,
+      components: components,
+      fallbacks: fallbacks
     });
-  };
-  var renderGroup = function renderGroup(group, parents) {
-    var groupItems = getSortedChildren(toolbarItems, group.key);
-    if (groupItems.length === 0) {
-      return null;
-    }
-    var Group = group.component || fallbacks.group;
-    return /*#__PURE__*/_react.default.createElement(Group, {
-      key: group.key,
-      parents: parents
-    }, groupItems.map(function (item, index) {
-      return renderToolbarItem({
-        item: item,
-        index: index,
-        parents: [].concat((0, _toConsumableArray2.default)(parents), [{
-          key: group.key,
-          type: group.type
-        }])
-      });
-    }));
-  };
-  var renderSection = function renderSection(section) {
-    var sectionGroups = getSortedChildren(groups, section.key);
-    var Section = section.component || fallbacks.section;
-    var parents = [{
-      key: toolbar.key,
-      type: toolbar.type
-    }];
-    return /*#__PURE__*/_react.default.createElement(Section, {
-      key: section.key,
-      parents: parents
-    }, sectionGroups.map(function (group) {
-      return renderGroup(group, [].concat(parents, [{
-        key: section.key,
-        type: section.type
-      }]));
-    }));
-  };
-  var ToolbarComponent = toolbar.component || NoOp;
-  return /*#__PURE__*/_react.default.createElement(ToolbarComponent, null, sections.map(renderSection));
+  }
+  return /*#__PURE__*/_react.default.createElement(_ToolbarRendererOld.ToolbarModelRenderer, {
+    toolbar: toolbar,
+    components: components,
+    fallbacks: fallbacks
+  });
 };

package/dist/cjs/ui/toolbar-model-renderer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/ui/toolbar-model-renderer/ToolbarRendererNew.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { getSortedChildren, isSection, NoOp } from './common';
+const hasParents = component => {
+  return component.type !== 'toolbar';
+};
+const getChildTypesForParent = parentType => {
+  switch (parentType) {
+    case 'toolbar':
+      return ['section'];
+    case 'section':
+      return ['group'];
+    case 'group':
+      return ['button', 'menu'];
+    case 'menu':
+    case 'nested-menu':
+      return ['menu-section'];
+    case 'menu-section':
+      return ['menu-item', 'nested-menu'];
+    default:
+      return [];
+  }
+};
+const getFallbackComponent = (type, fallbacks) => {
+  switch (type) {
+    case 'group':
+      return fallbacks.group;
+    case 'menu-section':
+      return fallbacks.menuSection;
+    case 'section':
+      return fallbacks.section;
+    default:
+      return NoOp;
+  }
+};
+const ComponentRenderer = ({
+  component,
+  parents,
+  allComponents,
+  fallbacks
+}) => {
+  const childTypes = getChildTypesForParent(component.type);
+  const children = getSortedChildren(allComponents.filter(comp => childTypes.includes(comp.type)), component.key);
+  if ((component.type === 'menu' || component.type === 'group' || component.type === 'nested-menu' || component.type === 'menu-section') && children.length === 0) {
+    return null;
+  }
+  const Component = component.component || getFallbackComponent(component.type, fallbacks);
+  const newParents = [...parents, {
+    key: component.key,
+    type: component.type
+  }];
+  if (children.length === 0) {
+    return /*#__PURE__*/React.createElement(Component, {
+      parents: parents
+    }, null);
+  }
+  return /*#__PURE__*/React.createElement(Component, {
+    parents: parents
+  }, children.map(child => /*#__PURE__*/React.createElement(ComponentRenderer, {
+    key: child.key,
+    component: child,
+    parents: newParents,
+    allComponents: allComponents,
+    fallbacks: fallbacks
+  })));
+};
+export const ToolbarModelRenderer = ({
+  toolbar,
+  components,
+  fallbacks
+}) => {
+  const ToolbarComponent = toolbar.component || NoOp;
+  const sections = getSortedChildren(components.filter(isSection), toolbar.key);
+  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(section => /*#__PURE__*/React.createElement(ComponentRenderer, {
+    key: section.key,
+    component: section,
+    parents: [{
+      key: toolbar.key,
+      type: toolbar.type
+    }],
+    allComponents: components.filter(hasParents),
+    fallbacks: fallbacks
+  })));
+};