@bigbinary/neeto-message-templates-frontend 0.4.1 → 0.4.2

package/dist/index.js

@@ -4,11 +4,10 @@ import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
-import { Dropdown, Typography, Button, Pane, Table, NoData, Alert, Select, Textarea } from '@bigbinary/neetoui';
-import { isEmpty, prop, equals, includes, pick, omit, assoc, mergeAll, pluck } from 'ramda';
+import { Typography, Button, Pane, Table, NoData, Alert, Select, Textarea } from '@bigbinary/neetoui';
+import { isEmpty, equals, prop, includes, pick, omit, assoc, mergeAll, pluck } from 'ramda';
 import { t } from 'i18next';
-import { MenuHorizontal } from '@bigbinary/neeto-icons';
-import { useTranslation, Trans } from 'react-i18next';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_INDEX } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation, withImmutableActions, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useQuery } from 'react-query';
@@ -16,6 +15,7 @@ import axios from 'axios';
 import { create } from 'zustand';
 import { FormikEditor } from '@bigbinary/neeto-editor';
 import { Input, Form as Form$1, Select as Select$1, Button as Button$1 } from '@bigbinary/neetoui/formik';
+import { useTranslation, Trans } from 'react-i18next';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
 import { useFormikContext } from 'formik';
@@ -254,18 +254,42 @@ var useTemplateStore = create(withImmutableActions(function (set) {
   };
 }));
 
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete",
+  STATUS: "status"
+};
+
+var getMenuItems = function getMenuItems(_ref) {
+  var handleDeleteTemplate = _ref.handleDeleteTemplate,
+    handleEditTemplate = _ref.handleEditTemplate,
+    handleMarkActiveInactive = _ref.handleMarkActiveInactive,
+    status = _ref.status;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: t("neetoMessageTemplate.template.edit"),
+    onClick: handleEditTemplate
+  }, {
+    key: MENU_ITEMS.STATUS,
+    label: equals(status, "active") ? t("neetoMessageTemplate.template.markAsInactive") : t("neetoMessageTemplate.template.markAsActive"),
+    onClick: function onClick() {
+      return handleMarkActiveInactive(status);
+    }
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: t("neetoMessageTemplate.template.delete"),
+    onClick: handleDeleteTemplate
+  }];
+};
+
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RowActions = function RowActions(_ref) {
   var template = _ref.template,
     setManageTemplatePane = _ref.setManageTemplatePane,
     ownerId = _ref.ownerId;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var _useUpdateTemplate = useUpdateTemplate(ownerId),
     update = _useUpdateTemplate.mutate;
-  var Menu = Dropdown.Menu,
-    MenuItem = Dropdown.MenuItem;
   var status = template.status,
     id = template.id;
   var templateType = useTemplateStore(prop("templateType"));
@@ -292,20 +316,17 @@ var RowActions = function RowActions(_ref) {
       id: id
     });
   };
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    buttonStyle: "text",
-    icon: MenuHorizontal,
-    position: "bottom-end",
-    strategy: "fixed"
-  }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-    onClick: handleEditTemplate
-  }, t("neetoMessageTemplate.template.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      return handleMarkActiveInactive(status);
-    }
-  }, status === "active" ? t("neetoMessageTemplate.template.markAsInactive") : t("neetoMessageTemplate.template.markAsActive")), /*#__PURE__*/React.createElement(MenuItem.Button, {
-    onClick: handleDeleteTemplate
-  }, t("neetoMessageTemplate.template.delete"))));
+  return /*#__PURE__*/React.createElement(MoreDropdown, {
+    dropdownProps: {
+      strategy: "fixed"
+    },
+    menuItems: getMenuItems({
+      handleDeleteTemplate: handleDeleteTemplate,
+      handleEditTemplate: handleEditTemplate,
+      handleMarkActiveInactive: handleMarkActiveInactive,
+      status: status
+    })
+  });
 };
 
 var renderSearchProps = function renderSearchProps(label) {