@bigbinary/neeto-fields-frontend 1.1.14 → 1.3.0

package/dist/index.js

@@ -1,10 +1,11 @@
 import React, { useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer } from 'react';
 import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
-import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, truncate, countBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
-import { values, map, isNotNil, isNil, isEmpty, prop, pluck, clone as clone$1, pipe, mergeAll, omit, pick, assoc, any, head } from 'ramda';
+import { isNotEmpty, renameKeys, capitalize as capitalize$1, findBy, filterBy, toLabelAndValue, slugify, humanize, truncate, countBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
+import { values, isNotNil, isNil, isEmpty, prop, pluck, clone as clone$1, pipe, mergeAll, omit, map, pick, assoc, any, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { useFuncDebounce, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import * as yup from 'yup';
+import { joinHyphenCase, buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
 import { Check, Delete, MenuHorizontal, Info, Reorder } from '@bigbinary/neeto-icons';
 import { Button, ActionBlock as ActionBlock$1, Input as Input$1, Select as Select$1, Switch, Form } from '@bigbinary/neetoui/formik';
 import { DEFAULT_PAGE_INDEX, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
@@ -12,7 +13,7 @@ import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
-import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import { v4 } from 'uuid';
 import { Link, useHistory } from 'react-router-dom';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
@@ -5969,27 +5970,13 @@ var cleanedRegex = function cleanedRegex(regexCondition) {
   }
   return RegExp(conditionWithoutFlags, sanitizedFlags);
 };
-var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
-  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return optionObjects.map(function (_ref4) {
-    var label = _ref4.label,
-      value = _ref4.value;
-    return {
-      label: label,
-      value: value || label
-    };
-  });
-};
-var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
-  return map(toLabelAndValue, value || []);
-};
 var validateField = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
+  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref4) {
     var fieldValue, fieldName, isRequired, kind, fieldData;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          fieldValue = _ref5.fieldValue, fieldName = _ref5.fieldName, isRequired = _ref5.isRequired, kind = _ref5.kind, fieldData = _ref5.fieldData;
+          fieldValue = _ref4.fieldValue, fieldName = _ref4.fieldName, isRequired = _ref4.isRequired, kind = _ref4.kind, fieldData = _ref4.fieldData;
           _context.prev = 1;
           _context.next = 4;
           return yup.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
@@ -6010,7 +5997,7 @@ var validateField = /*#__PURE__*/function () {
     }, _callee, null, [[1, 7]]);
   }));
   return function validateField(_x) {
-    return _ref6.apply(this, arguments);
+    return _ref5.apply(this, arguments);
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
@@ -6039,6 +6026,9 @@ var useFormikFields = function useFormikFields(_ref) {
   var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
   var fieldName = kind === KINDS.multiOption ? "values" : "value";
   var fieldValuePath = "".concat(fieldPath, ".data.").concat(fieldName);
+  isDropdown$1(kind) && (fieldData = renameKeys({
+    id: "value"
+  }, fieldData));
   if (isNil(formRef) && isNotNil(formRefs)) {
     formRefs.current[fieldValuePath] = formikContext;
   } else if (isNil(formRefs) && isNotNil(formRef)) {
@@ -6067,9 +6057,15 @@ var useFormikFields = function useFormikFields(_ref) {
   };
   var getValueForField = function getValueForField(value) {
     if (kind === KINDS.singleOption) {
-      value = toLabelAndValue(value);
+      value = findBy({
+        value: value
+      }, fieldData);
     } else if (kind === KINDS.multiOption) {
-      value = buildArrayToLabelAndValues(value);
+      value = value.map(function (optionId) {
+        return findBy({
+          value: optionId
+        }, fieldData);
+      });
     }
     return value || "";
   };
@@ -6090,7 +6086,7 @@ var useFormikFields = function useFormikFields(_ref) {
       },
       disabled: disabled,
       //conditional props
-      options: isDropdown$1(kind) ? buildOptionsToLabelAndValue(fieldData) : undefined,
+      options: isDropdown$1(kind) ? fieldData : undefined,
       getPopupContainer: isDateTime(kind) ? prop("parentElement") : undefined
     })
   };
@@ -6159,6 +6155,7 @@ var Number$1 = function Number(props) {
   return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
       icon: Check,
       style: "text",
       onClick: function onClick() {
@@ -6221,6 +6218,7 @@ var Text = function Text(props) {
   var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
       icon: Check,
       style: "text",
       onClick: function onClick() {
@@ -6644,6 +6642,13 @@ var renderFormFooter = function renderFormFooter(_ref3) {
     }
   }));
 };
+var getDefaultOption = function getDefaultOption() {
+  return {
+    id: v4(),
+    label: "",
+    displayOrder: 0
+  };
+};
 
 var PERMITTED_REGEX_PATTERN = /^\/.*\/[igmsyu]*$/;
 var ADVANCED_REGEX_ASSERTION_PATTERN = /\(\?=[^)]*\)|\(\?![^)]*\)|\(\?<=[^)]*\)|\(\?<![^)]*\)/;
@@ -6769,11 +6774,6 @@ var INITIAL_FIELDS = {
   kind: toLabelAndValue("text"),
   isRequired: false
 };
-var DEFAULT_OPTION = {
-  label: "",
-  displayOrder: 0
-};
-var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
 var DEFAULT_REGEX_DATA = {
   condition: "",
   helpMessage: ""
@@ -6809,7 +6809,7 @@ var AdditionalInputs = function AdditionalInputs() {
     return arrayHelpers.remove(index);
   };
   var addOption = function addOption(arrayHelpers) {
-    return arrayHelpers.push(DEFAULT_OPTION);
+    return arrayHelpers.push(getDefaultOption());
   };
   if (isDropdown(kind.value)) {
     return /*#__PURE__*/React.createElement(FieldArray, {
@@ -6886,7 +6886,7 @@ var FieldForm = function FieldForm(_ref) {
   var handleKindChange = function handleKindChange(kind) {
     setFieldValue("kind", kind);
     if (isDropdown(kind.value)) {
-      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_OPTIONS_DATA);
+      setFieldValue("data", options !== null && options !== void 0 ? options : [getDefaultOption()]);
     } else if (isRegex(kind.value)) {
       setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
     }