@bigbinary/neeto-fields-frontend 1.1.14 → 1.3.0

package/README.md

@@ -7,9 +7,12 @@ referred as custom fields) for the resources across neeto products.
 
 - [General information](#general-information)
 - [Installation instructions](#installation-instructions)
+
   - [Engine Installation](#engine-installation)
   - [Frontend package Installation](#frontend-package-installation)
-- Frontend package exports
+  - [Dependency](#dependency)
+
+- [Frontend package exports](#frontend-package-exports)
   - [Components](#components)
     - [FieldsDashBoard](#1-fieldsdashboard)
     - [FieldsPane](#2-fieldspane)
@@ -136,6 +139,17 @@ Install the latest `neetoFields nano` package using the below command:
 yarn add @bigbinary/neeto-fields-frontend
 ```
 
+## Dependency
+
+`neeto-fields-nano` has a peer dependency which is required to use the nano
+properly. Install the peer dependency using the below command:
+
+```shell
+yarn add uuid
+```
+
+# Frontend package exports
+
 The frontend package exports 4 components, 2 utility functions and a hook.
 
 ## Components
@@ -655,7 +669,7 @@ The usage of `yalc` is explained in this video:
 https://www.youtube.com/watch?v=QBiYGP0Rhe0
 
 1.  See the changes in the host app by executing the following command \
-     <br/> Use this command if releasing package for the first time.
+     <br/> Use this command if releasing a package for the first time.
 
     ```shell
     yarn build && yalc publish

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var ramda = require('ramda');
 var formik = require('formik');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var yup = require('yup');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var formik$1 = require('@bigbinary/neetoui/formik');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
@@ -16,7 +17,7 @@ var Container = require('@bigbinary/neeto-molecules/Container');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var reactQuery = require('react-query');
 var axios = require('axios');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var uuid = require('uuid');
 var reactRouterDom = require('react-router-dom');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
@@ -6004,27 +6005,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 ramda.map(pure.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__namespace.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
@@ -6045,7 +6032,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) {
@@ -6074,6 +6061,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 = pure.renameKeys({
+    id: "value"
+  }, fieldData));
   if (ramda.isNil(formRef) && ramda.isNotNil(formRefs)) {
     formRefs.current[fieldValuePath] = formikContext;
   } else if (ramda.isNil(formRefs) && ramda.isNotNil(formRef)) {
@@ -6102,9 +6092,15 @@ var useFormikFields = function useFormikFields(_ref) {
   };
   var getValueForField = function getValueForField(value) {
     if (kind === KINDS.singleOption) {
-      value = pure.toLabelAndValue(value);
+      value = pure.findBy({
+        value: value
+      }, fieldData);
     } else if (kind === KINDS.multiOption) {
-      value = buildArrayToLabelAndValues(value);
+      value = value.map(function (optionId) {
+        return pure.findBy({
+          value: optionId
+        }, fieldData);
+      });
     }
     return value || "";
   };
@@ -6125,7 +6121,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) ? ramda.prop("parentElement") : undefined
     })
   };
@@ -6194,6 +6190,7 @@ var Number$1 = function Number(props) {
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      "data-cy": utils.joinHyphenCase(fieldProps.label, "check-button"),
       icon: neetoIcons.Check,
       style: "text",
       onClick: function onClick() {
@@ -6256,6 +6253,7 @@ var Text = function Text(props) {
   var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      "data-cy": utils.joinHyphenCase(fieldProps.label, "check-button"),
       icon: neetoIcons.Check,
       style: "text",
       onClick: function onClick() {
@@ -6679,6 +6677,13 @@ var renderFormFooter = function renderFormFooter(_ref3) {
     }
   }));
 };
+var getDefaultOption = function getDefaultOption() {
+  return {
+    id: uuid.v4(),
+    label: "",
+    displayOrder: 0
+  };
+};
 
 var PERMITTED_REGEX_PATTERN = /^\/.*\/[igmsyu]*$/;
 var ADVANCED_REGEX_ASSERTION_PATTERN = /\(\?=[^)]*\)|\(\?![^)]*\)|\(\?<=[^)]*\)|\(\?<![^)]*\)/;
@@ -6804,11 +6809,6 @@ var INITIAL_FIELDS = {
   kind: pure.toLabelAndValue("text"),
   isRequired: false
 };
-var DEFAULT_OPTION = {
-  label: "",
-  displayOrder: 0
-};
-var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
 var DEFAULT_REGEX_DATA = {
   condition: "",
   helpMessage: ""
@@ -6844,7 +6844,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__default["default"].createElement(formik.FieldArray, {
@@ -6921,7 +6921,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);
     }