volto-dropdownmenu 2.4.3 → 4.0.0

package/CHANGELOG.md

@@ -4,11 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v2.4.3](https://github.com/collective/volto-dropdownmenu/compare/v2.4.3...v2.4.3)
+#### [v4.0.0](https://github.com/collective/volto-dropdownmenu/compare/v3.0.0...v4.0.0)
 
-> 31 August 2022
+- chore: install nodes added (Fixes #14) [`#26`](https://github.com/collective/volto-dropdownmenu/pull/26)
+- chore: install nodes added (Fixes #14) (#26) [`#14`](https://github.com/collective/volto-dropdownmenu/issues/14)
+- feat!: use Volto component registry for MenuConfigurationForm [`46964e9`](https://github.com/collective/volto-dropdownmenu/commit/46964e98150bb576682e72013535604ab9a3f8d5)
+
+### [v3.0.0](https://github.com/collective/volto-dropdownmenu/compare/v2.4.3...v3.0.0)
+
+> 30 October 2022
 
+- refactor: upgraded dependencies and babel config for volto 16 [`#27`](https://github.com/collective/volto-dropdownmenu/pull/27)
 - fix: a11y handle dropdown navigation [`67e97c1`](https://github.com/collective/volto-dropdownmenu/commit/67e97c1947e6a392e82c3104b5797a9c7680812f)
+- Release 2.4.3 [`3e30ff8`](https://github.com/collective/volto-dropdownmenu/commit/3e30ff8c11ff10c3408c72c3a39728714e76f5ba)
+- Release 3.0.0 [`9db2d0a`](https://github.com/collective/volto-dropdownmenu/commit/9db2d0a8992d4876208004b064a27e0149443fe4)
 - chore: rollback 2.4.3 release [`07b437b`](https://github.com/collective/volto-dropdownmenu/commit/07b437b365aaabc5a05e4d7adb7086f50186b3bc)
 
 #### [v2.4.3](https://github.com/collective/volto-dropdownmenu/compare/v2.4.2...v2.4.3)

package/README.md

@@ -1,15 +1,29 @@
 # volto-dropdownmenu
 
-Volto addon for a customizable dropdown menu.  
+Volto addon for a customizable dropdown menu.
 Intended to be used with [collective.volto.dropdownmenu](https://github.com/collective/collective.volto.dropdownmenu)
 
 To be used with mrs-developer, see [Volto docs](https://docs.voltocms.com/customizing/add-ons/) for further usage informations.
 
 Created with [voltocli](https://github.com/nzambello/voltocli).
 
+## Installation
+
+Afer installation, please add following lines into package.json to enable it.
+
+```json
+
+ "addons": [
+    "volto-dropdownmenu"
+  ],
+
+```
+
 ## Usage
 
-> If you're using Volto < 12, then use [v1.3.0](https://github.com/collective/volto-dropdownmenu/tree/v1.3.0)
+> If you are using Volto < 16, then use [v2.4.3](https://github.com/collective/volto-dropdownmenu/tree/v2.4.3)
+>
+> If you are using Volto < 12, then use [v1.3.0](https://github.com/collective/volto-dropdownmenu/tree/v1.3.0)
 
 Simply load the addon in your project, then edit the configuration in `/controlpanel/dropdown-menu-settings`.
 Example configuration to be saved in Plone [here](./menuConfigurationExample.json).
@@ -23,6 +37,17 @@ To use the default template for the dropdown menu, add `src/addons/volto-dropdow
   ]
 ```
 
+To customize the `MenuConfigurationForm` component, you can now create your own component in your site and replace it using the Volto component registry in your site config file:
+
+```javascript
+import MyMenuConfigurationForm from './src/MyMenuConfigurationForm';
+
+config.registerComponent({
+  name: 'MenuConfigurationForm',
+  component: MyMenuConfigurationForm,
+});
+```
+
 ### Navigation roots
 
 By default, navigations roots are clickable, but there's the possibility to make them not clickable.

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle/babel'];
+  const presets = ['razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "volto-dropdownmenu",
-  "version": "2.4.3",
+  "version": "4.0.0",
   "description": "Volto addon for a customizable dropdown menu",
   "main": "src/index.js",
   "repository": "https://github.com/collective/volto-dropdownmenu.git",
   "author": "collective",
   "license": "MIT",
   "devDependencies": {
-    "release-it": "*"
+    "@plone/scripts": "^2.0.0",
+    "release-it": "^14.10.1"
   },
   "scripts": {
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
     "release": "release-it"
   },
   "dependencies": {
-    "react-outside-click-handler": "1.3.0",
-    "@plone/scripts": "*"
+    "react-outside-click-handler": "1.3.0"
   },
   "peerDependencies": {
-    "@plone/volto": ">=14.0.0"
+    "@plone/volto": ">=16.0.0-alpha.38"
   }
 }

package/src/index.js

@@ -1,10 +1,16 @@
 import menuSVG from '@plone/volto/icons/menu.svg';
 import { dropdownMenuNavItemsReducer } from './reducers';
 import MenuConfigurationWidget from './widget/MenuConfigurationWidget';
+import MenuConfigurationForm from './widget/MenuConfigurationForm';
 import { getDropdownMenuNavitems } from './actions';
 import { getItemsByPath } from './utils';
 
-export { MenuConfigurationWidget, getDropdownMenuNavitems, getItemsByPath };
+export {
+  MenuConfigurationWidget,
+  getDropdownMenuNavitems,
+  getItemsByPath,
+  MenuConfigurationForm,
+};
 
 export default (config) => {
   config.widgets.id = {
@@ -12,6 +18,11 @@ export default (config) => {
     menu_configuration: MenuConfigurationWidget,
   };
 
+  config.registerComponent({
+    name: 'MenuConfigurationForm',
+    component: MenuConfigurationForm,
+  });
+
   config.addonReducers = {
     ...config.addonReducers,
     dropdownMenuNavItems: dropdownMenuNavItemsReducer,
@@ -24,7 +35,7 @@ export default (config) => {
       extend: (dispatchActions) => {
         if (
           dispatchActions.filter(
-            (asyncAction) => asyncAction.key === 'dropdownMenuNavItems',
+            (asyncAction) => asyncAction.key === 'dropdownMenuNavItems'
           ).length === 0
         ) {
           dispatchActions.push({

package/src/widget/MenuConfigurationWidget.jsx

@@ -9,10 +9,9 @@ import {
   Segment,
   Header,
 } from 'semantic-ui-react';
-import { TextWidget } from '@plone/volto/components';
+import { TextWidget, Component } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
-import MenuConfigurationForm from './MenuConfigurationForm';
 import './menu_configuration.css';
 
 const messages = defineMessages({
@@ -58,14 +57,14 @@ const messages = defineMessages({
   },
 });
 
-const defaultMenuItem = title => ({
+const defaultMenuItem = (title) => ({
   title,
   visible: true,
   mode: 'simpleLink',
   linkUrl: [],
 });
 
-const defaultRootMenu = title => ({
+const defaultRootMenu = (title) => ({
   rootPath: '/',
   items: [defaultMenuItem(title)],
 });
@@ -82,17 +81,17 @@ const MenuConfigurationWidget = ({
 }) => {
   const intl = useIntl();
   const [menuConfiguration, setMenuConfiguration] = useState(
-    value ? JSON.parse(value) : defaultMenuConfiguration,
+    value ? JSON.parse(value) : defaultMenuConfiguration
   );
   const [activeMenu, setActiveMenu] = useState(0);
   const [activeMenuItem, setActiveMenuItem] = useState(0);
 
-  const handleChangeConfiguration = value => {
+  const handleChangeConfiguration = (value) => {
     setMenuConfiguration(value);
     onChange(id, JSON.stringify(value));
   };
 
-  const addMenuPath = e => {
+  const addMenuPath = (e) => {
     e.preventDefault();
     const menuItemsNumber = menuConfiguration.length;
     const menuItem = `/tab${menuItemsNumber}`;
@@ -168,7 +167,7 @@ const MenuConfigurationWidget = ({
     newMenuConfiguration[pathIndex].items.splice(
       menuItemIndex + (up ? -1 : 1),
       0,
-      menuItem,
+      menuItem
     );
 
     handleChangeConfiguration(newMenuConfiguration);
@@ -221,7 +220,7 @@ const MenuConfigurationWidget = ({
                           description=""
                           required={true}
                           value={flattenToAppURL(
-                            menuConfiguration[activeMenu].rootPath,
+                            menuConfiguration[activeMenu].rootPath
                           )}
                           onChange={(id, value) => {
                             onChangeMenuPath(activeMenu, {
@@ -244,9 +243,11 @@ const MenuConfigurationWidget = ({
                                 <Button
                                   icon="trash"
                                   negative
-                                  onClick={e => deleteMenuPath(e, activeMenu)}
+                                  onClick={(e) => deleteMenuPath(e, activeMenu)}
                                   id="delete-menupath"
-                                  content={intl.formatMessage(messages.deleteButton)}
+                                  content={intl.formatMessage(
+                                    messages.deleteButton
+                                  )}
                                 />
                               </Grid.Column>
                             </Grid.Row>
@@ -277,9 +278,9 @@ const MenuConfigurationWidget = ({
                                     size="tiny"
                                     icon={<Icon name="arrow left" />}
                                     title={intl.formatMessage(
-                                      messages.moveMenuItemUp,
+                                      messages.moveMenuItemUp
                                     )}
-                                    onClick={e =>
+                                    onClick={(e) =>
                                       moveMenuItem(e, activeMenu, idx, 'up')
                                     }
                                   />
@@ -293,20 +294,20 @@ const MenuConfigurationWidget = ({
                                     size="tiny"
                                     icon={<Icon name="arrow right" />}
                                     title={intl.formatMessage(
-                                      messages.moveMenuItemDown,
+                                      messages.moveMenuItemDown
                                     )}
-                                    onClick={e =>
+                                    onClick={(e) =>
                                       moveMenuItem(e, activeMenu, idx, 'down')
                                     }
                                   />
                                 </Button.Group>
                                 <span>{menuItem.title}</span>
                               </Menu.Item>
-                            ),
+                            )
                           )}
                           <Menu.Item
                             name={intl.formatMessage(messages.addMenuItem)}
-                            onClick={e => addMenuItem(e, activeMenu)}
+                            onClick={(e) => addMenuItem(e, activeMenu)}
                           >
                             <Icon name="plus" />
                           </Menu.Item>
@@ -316,17 +317,18 @@ const MenuConfigurationWidget = ({
                         {activeMenuItem > -1 &&
                         activeMenuItem <
                           menuConfiguration[activeMenu].items?.length ? (
-                          <MenuConfigurationForm
+                          <Component
+                            componentName="MenuConfigurationForm"
                             id={`${activeMenu}-${activeMenuItem}`}
                             menuItem={
                               menuConfiguration[activeMenu].items[
                                 activeMenuItem
                               ]
                             }
-                            onChange={menu =>
+                            onChange={(menu) =>
                               onChangeMenuItem(activeMenu, activeMenuItem, menu)
                             }
-                            deleteMenuItem={e =>
+                            deleteMenuItem={(e) =>
                               deleteMenuItem(e, activeMenu, activeMenuItem)
                             }
                           />