@atlaskit/editor-toolbar-model 0.2.2 → 0.2.4

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import { isSection, NoOp } from './common';
+const isGroup = component => {
+  return component.type === 'group';
+};
+const isToolbarItem = component => {
+  return component.type === 'button' || component.type === 'menu';
+};
+const isToolbarMenuSection = component => {
+  return component.type === 'menu-section';
+};
+const isToolbarMenuItem = component => {
+  return component.type === 'menu-item' || component.type === 'menu-section';
+};
+const isToolbarMenuItemOrNestedMenu = component => {
+  return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
+};
+const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
+  var _a$parents$find, _b$parents$find;
+  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);
+});
+export const ToolbarModelRenderer = ({
+  toolbar,
+  components,
+  fallbacks
+}) => {
+  const sections = getSortedChildren(components.filter(isSection), toolbar.key);
+  const groups = components.filter(isGroup);
+  const toolbarItems = components.filter(isToolbarItem);
+  const menuSections = components.filter(isToolbarMenuSection);
+  const menuItems = components.filter(isToolbarMenuItem);
+  const menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
+  const renderToolbarItem = ({
+    item,
+    index,
+    parents
+  }) => {
+    if (item.type === 'menu') {
+      const menuComponents = getSortedChildren(menuSections, item.key);
+      if (menuComponents.length === 0) {
+        return null;
+      }
+      const Menu = item.component || NoOp;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: item.key,
+        parents: parents
+      }, menuComponents.map(menuSection => {
+        const menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
+        const MenuSection = menuSection.component || fallbacks.menuSection;
+        return /*#__PURE__*/React.createElement(MenuSection, {
+          key: menuSection.key,
+          parents: [...parents, {
+            key: item.key,
+            type: item.type
+          }]
+        }, menuItemsInSection.map(menuItem => {
+          if (menuItem.type === 'nested-menu') {
+            const nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
+            const NestedMenu = menuItem.component;
+            return /*#__PURE__*/React.createElement(NestedMenu, {
+              key: menuItem.key,
+              parents: [...parents, {
+                key: item.key,
+                type: item.type
+              }, {
+                key: menuSection.key,
+                type: menuSection.type
+              }]
+            }, nestedMenuComponents.map(nestedMenuSection => {
+              const menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
+              const NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
+              return /*#__PURE__*/React.createElement(NestedMenuSection, {
+                key: nestedMenuSection.key,
+                parents: [...parents, {
+                  key: item.key,
+                  type: item.type
+                }, {
+                  key: menuSection.key,
+                  type: menuSection.type
+                }, {
+                  key: menuItem.key,
+                  type: menuItem.type
+                }]
+              }, menuItemsInNestedMenuSection.map(nestedMenuItem => {
+                const NestedMenuItem = nestedMenuItem.component || NoOp;
+                return /*#__PURE__*/React.createElement(NestedMenuItem, {
+                  key: nestedMenuItem.key,
+                  parents: [...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
+                  }]
+                });
+              }));
+            }));
+          }
+          const MenuItem = menuItem.component || NoOp;
+          return /*#__PURE__*/React.createElement(MenuItem, {
+            key: menuItem.key,
+            parents: [...parents, {
+              key: item.key,
+              type: item.type
+            }, {
+              key: menuSection.key,
+              type: menuSection.type
+            }]
+          });
+        }));
+      }));
+    }
+    const Button = item.component || NoOp;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: item.key,
+      parents: parents
+    });
+  };
+  const renderGroup = (group, parents) => {
+    const groupItems = getSortedChildren(toolbarItems, group.key);
+    if (groupItems.length === 0) {
+      return null;
+    }
+    const Group = group.component || fallbacks.group;
+    return /*#__PURE__*/React.createElement(Group, {
+      key: group.key,
+      parents: parents
+    }, groupItems.map((item, index) => {
+      return renderToolbarItem({
+        item,
+        index,
+        parents: [...parents, {
+          key: group.key,
+          type: group.type
+        }]
+      });
+    }));
+  };
+  const renderSection = section => {
+    const sectionGroups = getSortedChildren(groups, section.key);
+    const Section = section.component || fallbacks.section;
+    const parents = [{
+      key: toolbar.key,
+      type: toolbar.type
+    }];
+    return /*#__PURE__*/React.createElement(Section, {
+      key: section.key,
+      parents: parents
+    }, sectionGroups.map(group => renderGroup(group, [...parents, {
+      key: section.key,
+      type: section.type
+    }])));
+  };
+  const ToolbarComponent = toolbar.component || NoOp;
+  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
+};

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

@@ -0,0 +1,8 @@
+export const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
+  var _a$parents$find, _b$parents$find;
+  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);
+});
+export const NoOp = props => null;
+export const isSection = component => {
+  return component.type === 'section';
+};

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

@@ -1,165 +1,22 @@
 import React from 'react';
-const NoOp = props => null;
-const isSection = component => {
-  return component.type === 'section';
-};
-const isGroup = component => {
-  return component.type === 'group';
-};
-const isToolbarItem = component => {
-  return component.type === 'button' || component.type === 'menu';
-};
-const isToolbarMenuSection = component => {
-  return component.type === 'menu-section';
-};
-const isToolbarMenuItem = component => {
-  return component.type === 'menu-item' || component.type === 'menu-section';
-};
-const isToolbarMenuItemOrNestedMenu = component => {
-  return component.type === 'menu-item' || component.type === 'menu-section' || component.type === 'nested-menu';
-};
-const getSortedChildren = (components, parentKey) => components.filter(component => component.parents.some(parent => parent.key === parentKey)).sort((a, b) => {
-  var _a$parents$find, _b$parents$find;
-  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);
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ToolbarModelRenderer as ToolbarModelRendererNew } from './ToolbarRendererNew';
+import { ToolbarModelRenderer as ToolbarModelRendererOld } from './ToolbarRendererOld';
 export const ToolbarModelRenderer = ({
   toolbar,
   components,
   fallbacks
 }) => {
-  const sections = getSortedChildren(components.filter(isSection), toolbar.key);
-  const groups = components.filter(isGroup);
-  const toolbarItems = components.filter(isToolbarItem);
-  const menuSections = components.filter(isToolbarMenuSection);
-  const menuItems = components.filter(isToolbarMenuItem);
-  const menuItemsAndNestedMenus = components.filter(isToolbarMenuItemOrNestedMenu);
-  const renderToolbarItem = ({
-    item,
-    index,
-    parents
-  }) => {
-    if (item.type === 'menu') {
-      const menuComponents = getSortedChildren(menuSections, item.key);
-      if (menuComponents.length === 0) {
-        return null;
-      }
-      const Menu = item.component || NoOp;
-      return /*#__PURE__*/React.createElement(Menu, {
-        key: item.key,
-        parents: parents
-      }, menuComponents.map(menuSection => {
-        const menuItemsInSection = getSortedChildren(menuItemsAndNestedMenus, menuSection.key);
-        const MenuSection = menuSection.component || fallbacks.menuSection;
-        return /*#__PURE__*/React.createElement(MenuSection, {
-          key: menuSection.key,
-          parents: [...parents, {
-            key: item.key,
-            type: item.type
-          }]
-        }, menuItemsInSection.map(menuItem => {
-          if (menuItem.type === 'nested-menu') {
-            const nestedMenuComponents = getSortedChildren(menuSections, menuItem.key);
-            const NestedMenu = menuItem.component;
-            return /*#__PURE__*/React.createElement(NestedMenu, {
-              key: menuItem.key,
-              parents: [...parents, {
-                key: item.key,
-                type: item.type
-              }, {
-                key: menuSection.key,
-                type: menuSection.type
-              }]
-            }, nestedMenuComponents.map(nestedMenuSection => {
-              const menuItemsInNestedMenuSection = getSortedChildren(menuItems, nestedMenuSection.key);
-              const NestedMenuSection = nestedMenuSection.component || fallbacks.menuSection;
-              return /*#__PURE__*/React.createElement(NestedMenuSection, {
-                key: nestedMenuSection.key,
-                parents: [...parents, {
-                  key: item.key,
-                  type: item.type
-                }, {
-                  key: menuSection.key,
-                  type: menuSection.type
-                }, {
-                  key: menuItem.key,
-                  type: menuItem.type
-                }]
-              }, menuItemsInNestedMenuSection.map(nestedMenuItem => {
-                const NestedMenuItem = nestedMenuItem.component || NoOp;
-                return /*#__PURE__*/React.createElement(NestedMenuItem, {
-                  key: nestedMenuItem.key,
-                  parents: [...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
-                  }]
-                });
-              }));
-            }));
-          }
-          const MenuItem = menuItem.component || NoOp;
-          return /*#__PURE__*/React.createElement(MenuItem, {
-            key: menuItem.key,
-            parents: [...parents, {
-              key: item.key,
-              type: item.type
-            }, {
-              key: menuSection.key,
-              type: menuSection.type
-            }]
-          });
-        }));
-      }));
-    }
-    const Button = item.component || NoOp;
-    return /*#__PURE__*/React.createElement(Button, {
-      key: item.key,
-      parents: parents
+  if (fg('platform_editor_toolbar_aifc_renderer_rewrite')) {
+    return /*#__PURE__*/React.createElement(ToolbarModelRendererNew, {
+      toolbar: toolbar,
+      components: components,
+      fallbacks: fallbacks
     });
-  };
-  const renderGroup = (group, parents) => {
-    const groupItems = getSortedChildren(toolbarItems, group.key);
-    if (groupItems.length === 0) {
-      return null;
-    }
-    const Group = group.component || fallbacks.group;
-    return /*#__PURE__*/React.createElement(Group, {
-      key: group.key,
-      parents: parents
-    }, groupItems.map((item, index) => {
-      return renderToolbarItem({
-        item,
-        index,
-        parents: [...parents, {
-          key: group.key,
-          type: group.type
-        }]
-      });
-    }));
-  };
-  const renderSection = section => {
-    const sectionGroups = getSortedChildren(groups, section.key);
-    const Section = section.component || fallbacks.section;
-    const parents = [{
-      key: toolbar.key,
-      type: toolbar.type
-    }];
-    return /*#__PURE__*/React.createElement(Section, {
-      key: section.key,
-      parents: parents
-    }, sectionGroups.map(group => renderGroup(group, [...parents, {
-      key: section.key,
-      type: section.type
-    }])));
-  };
-  const ToolbarComponent = toolbar.component || NoOp;
-  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(renderSection));
+  }
+  return /*#__PURE__*/React.createElement(ToolbarModelRendererOld, {
+    toolbar: toolbar,
+    components: components,
+    fallbacks: fallbacks
+  });
 };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,88 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { getSortedChildren, isSection, NoOp } from './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 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 = 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(_toConsumableArray(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(function (child) {
+    return /*#__PURE__*/React.createElement(_ComponentRenderer, {
+      key: child.key,
+      component: child,
+      parents: newParents,
+      allComponents: allComponents,
+      fallbacks: fallbacks
+    });
+  }));
+};
+export var ToolbarModelRenderer = function ToolbarModelRenderer(_ref2) {
+  var toolbar = _ref2.toolbar,
+    components = _ref2.components,
+    fallbacks = _ref2.fallbacks;
+  var ToolbarComponent = toolbar.component || NoOp;
+  var sections = getSortedChildren(components.filter(isSection), toolbar.key);
+  return /*#__PURE__*/React.createElement(ToolbarComponent, null, sections.map(function (section) {
+    return /*#__PURE__*/React.createElement(_ComponentRenderer, {
+      key: section.key,
+      component: section,
+      parents: [{
+        key: toolbar.key,
+        type: toolbar.type
+      }],
+      allComponents: components.filter(hasParents),
+      fallbacks: fallbacks
+    });
+  }));
+};

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

@@ -0,0 +1,173 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { isSection, NoOp } from './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);
+  });
+};
+export var 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.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.createElement(MenuSection, {
+          key: menuSection.key,
+          parents: [].concat(_toConsumableArray(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.createElement(NestedMenu, {
+              key: menuItem.key,
+              parents: [].concat(_toConsumableArray(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.createElement(NestedMenuSection, {
+                key: nestedMenuSection.key,
+                parents: [].concat(_toConsumableArray(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.createElement(NestedMenuItem, {
+                  key: nestedMenuItem.key,
+                  parents: [].concat(_toConsumableArray(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.createElement(MenuItem, {
+            key: menuItem.key,
+            parents: [].concat(_toConsumableArray(parents), [{
+              key: item.key,
+              type: item.type
+            }, {
+              key: menuSection.key,
+              type: menuSection.type
+            }])
+          });
+        }));
+      }));
+    }
+    var Button = item.component || NoOp;
+    return /*#__PURE__*/React.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.createElement(Group, {
+      key: group.key,
+      parents: parents
+    }, groupItems.map(function (item, index) {
+      return renderToolbarItem({
+        item: item,
+        index: index,
+        parents: [].concat(_toConsumableArray(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.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.createElement(ToolbarComponent, null, sections.map(renderSection));
+};

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

@@ -0,0 +1,20 @@
+export 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);
+  });
+};
+export var NoOp = function NoOp(props) {
+  return null;
+};
+export var isSection = function isSection(component) {
+  return component.type === 'section';
+};