@bigbinary/neeto-fields-frontend 1.1.4 → 1.1.6

package/README.md

@@ -346,10 +346,8 @@ specific resource.
 11. `isRequiredColumnName`: The name of column which holds the value which
     suggests if a field value is a `required` one or not. Default is
     `isRequired` column.
-12. `fieldContainerClassName`: Class names for styling the `div` containing the
+12. `fieldClassName`: Class names for styling the `div` containing the
     input field.
-13. `fieldClassName`: Class names for styling the field.
-14. `labelClassName`: Class names for styling the label for fields.
 15. `onMutationSuccess`: The callback function which is triggered on the success
     of mutation functions( create, update & delete).
 

package/dist/index.cjs.js

@@ -7,6 +7,7 @@ var neetoui = require('@bigbinary/neetoui');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
 var ramda = require('ramda');
 var formik = require('formik');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var yup = require('yup');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var formik$1 = require('@bigbinary/neetoui/formik');
@@ -18,7 +19,6 @@ var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactRouterDom = require('react-router-dom');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var reactDom = require('react-dom');
@@ -5882,57 +5882,60 @@ var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schem
     name: "validate-if-not-empty",
     test: function test(value) {
       if (pure.isNotEmpty(value) && ramda.isNotNil(value)) {
-        try {
-          schema.validateSync(value);
-          return true;
-        } catch (_unused) {
-          return false;
-        }
+        schema.validateSync(value);
+      }
+      return true;
+    }
+  });
+};
+var buildSchemaForRequiredInputs = function buildSchemaForRequiredInputs(schema) {
+  return yup__namespace.mixed().test({
+    name: "validate-required-inputs",
+    test: function test(value) {
+      if (ramda.isEmpty(value) || ramda.isNil(value)) {
+        throw new yup__namespace.ValidationError(t$1("validations.thisIsRequired"));
       }
+      schema.validateSync(value);
       return true;
     }
   });
 };
-var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
-  var kind = _ref.kind,
-    isRequired = _ref.isRequired,
-    fieldData = _ref.fieldData;
+var buildSchema = function buildSchema(_ref) {
+  var schema = _ref.schema,
+    isRequired = _ref.isRequired;
+  return isRequired ? buildSchemaForRequiredInputs(schema) : buildSchemaAllowingEmptyValue(schema);
+};
+var getBasicValidationSchema = function getBasicValidationSchema(_ref2) {
+  var kind = _ref2.kind,
+    fieldData = _ref2.fieldData;
   switch (kind) {
     case KINDS.singleOption:
     case KINDS.text:
       {
-        var schema = yup__namespace.string().trim().nullable();
-        return isRequired ? schema.required(t$1("validations.thisIsRequired")) : schema;
+        return yup__namespace.string().trim().nullable();
       }
     case KINDS.number:
     case KINDS.monetary:
     case KINDS.decimal:
       {
-        var _schema = buildSchemaAllowingEmptyValue(yup__namespace.number().typeError(t$1("validations.notAValidNumber")));
-        return isRequired ? _schema.required(t$1("validations.thisIsRequired")) : _schema;
+        return yup__namespace.number(t$1("validations.notAValidNumber")).nullable();
       }
     case KINDS.integer:
       {
-        var _schema2 = buildSchemaAllowingEmptyValue(yup__namespace.number().nullable().integer().typeError(t$1("validations.notAValidInteger")));
-        return isRequired ? _schema2.required(t$1("validations.thisIsRequired")) : _schema2;
+        return yup__namespace.number().nullable().integer(t$1("validations.notAValidInteger"));
       }
     case KINDS.date:
     case KINDS.time:
       {
-        var _schema3 = buildSchemaAllowingEmptyValue(dateSchema);
-        return isRequired ? _schema3.required(t$1("validations.thisIsRequired")) : _schema3;
+        return dateSchema;
       }
     case KINDS.multiOption:
       {
-        var _schema4 = yup__namespace.array().of(yup__namespace.string()).nullable();
-        return isRequired ? _schema4.min(1, t$1("validations.minOneItem")).required(t$1("validations.thisIsRequired")) : _schema4;
+        return yup__namespace.array().of(yup__namespace.string()).nullable();
       }
     case KINDS.dateRange:
     case KINDS.timeRange:
       {
-        if (isRequired) {
-          return yup__namespace.array().of(dateSchema).required(t$1("validations.thisIsRequired"));
-        }
         return yup__namespace.array().of(dateSchema).nullable();
       }
     case KINDS.checkbox:
@@ -5940,13 +5943,25 @@ var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
     case KINDS.regex:
       {
         var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
-        var _schema5 = buildSchemaAllowingEmptyValue(yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage));
-        return isRequired ? _schema5.required(t$1("validations.thisIsRequired")) : _schema5;
+        return yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
       }
     default:
       return yup__namespace.mixed();
   }
 };
+var buildFieldValidationSchema = function buildFieldValidationSchema(_ref3) {
+  var kind = _ref3.kind,
+    isRequired = _ref3.isRequired,
+    fieldData = _ref3.fieldData;
+  var schema = getBasicValidationSchema({
+    kind: kind,
+    fieldData: fieldData
+  });
+  return buildSchema({
+    schema: schema,
+    isRequired: isRequired
+  });
+};
 var cleanedRegex = function cleanedRegex(expression) {
   if (expression.startsWith("/") && expression.endsWith("/")) {
     return expression.slice(1, -1);
@@ -5955,9 +5970,9 @@ var cleanedRegex = function cleanedRegex(expression) {
 };
 var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
   var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return optionObjects.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
+  return optionObjects.map(function (_ref4) {
+    var label = _ref4.label,
+      value = _ref4.value;
     return {
       label: label,
       value: value || label
@@ -5968,12 +5983,12 @@ var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
   return ramda.map(pure.toLabelAndValue, value || []);
 };
 var validateField = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
     var fieldValue, fieldName, isRequired, kind, fieldData;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
+          fieldValue = _ref5.fieldValue, fieldName = _ref5.fieldName, isRequired = _ref5.isRequired, kind = _ref5.kind, fieldData = _ref5.fieldData;
           _context.prev = 1;
           _context.next = 4;
           return yup__namespace.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
@@ -5994,7 +6009,7 @@ var validateField = /*#__PURE__*/function () {
     }, _callee, null, [[1, 7]]);
   }));
   return function validateField(_x) {
-    return _ref4.apply(this, arguments);
+    return _ref6.apply(this, arguments);
   };
 }();
 var dateTimeToString = function dateTimeToString(dateTime) {
@@ -6017,8 +6032,7 @@ var useFormikFields = function useFormikFields(_ref) {
     isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
     props = _objectWithoutProperties(_ref, _excluded$3);
   var formikContext = formik.useFormikContext();
-  var setFieldValue = formikContext.setFieldValue,
-    submitForm = formikContext.submitForm,
+  var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
     isSubmitting = formikContext.isSubmitting;
   var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
@@ -6045,9 +6059,10 @@ var useFormikFields = function useFormikFields(_ref) {
     formikFieldProps = _useField2[0],
     meta = _useField2[1],
     helpers = _useField2[2];
+  var debouncedSubmitForm = reactUtils.useFuncDebounce(submitForm, 100);
   var handleSubmit = function handleSubmit(value) {
-    ramda.isNotNil(value) && setFieldValue(fieldValuePath, value);
-    individualSubmit && submitForm();
+    ramda.isNotNil(value) && helpers.setValue(value);
+    individualSubmit && debouncedSubmitForm();
   };
   var getValueForField = function getValueForField(value) {
     if (kind === KINDS.singleOption) {
@@ -6058,18 +6073,20 @@ var useFormikFields = function useFormikFields(_ref) {
     return value || "";
   };
   var isDropdown = ["single_option", "multi_option"].includes(kind);
-  if (isSubmitting && !meta.touched) {
-    helpers.setTouched(true);
-  }
+  React.useEffect(function () {
+    if (isSubmitting && !meta.touched) {
+      helpers.setTouched(true);
+    }
+  }, [isSubmitting]);
   return {
+    dirty: dirty,
     handleSubmit: handleSubmit,
     fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
       required: props[isRequiredColumnName],
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
-      dirty: dirty,
-      label: !individualSubmit && pure.capitalize(name),
+      label: pure.capitalize(name),
       disabled: disabled
     })
   };
@@ -6079,7 +6096,7 @@ var Checkbox = function Checkbox(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, _extends({}, fieldProps, {
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, _extends({}, fieldProps, {
     checked: fieldProps.value,
     onChange: function onChange(_ref) {
       var checked = _ref.target.checked;
@@ -6134,8 +6151,9 @@ var MultiOption = function MultiOption(props) {
 var Number$1 = function Number(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
@@ -6156,7 +6174,11 @@ var RangePicker = function RangePicker(props) {
     var _ref2 = _slicedToArray(_ref, 2),
       begin = _ref2[0],
       end = _ref2[1];
-    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+    if (begin && end) {
+      handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+    } else {
+      handleSubmit([]);
+    }
   };
   if (props.kind === KINDS.dateRange) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
@@ -6179,11 +6201,11 @@ var SingleOption = function SingleOption(props) {
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    isClearable: true,
     isSearchable: true
   }, fieldProps, {
-    onChange: function onChange(_ref) {
-      var value = _ref.value;
-      return handleSubmit(value);
+    onChange: function onChange(option) {
+      return handleSubmit((option === null || option === void 0 ? void 0 : option.value) || "");
     }
   }));
 };
@@ -6191,8 +6213,9 @@ var SingleOption = function SingleOption(props) {
 var Text = function Text(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  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, {
       icon: neetoIcons.Check,
@@ -6209,8 +6232,9 @@ var TextArea = function TextArea(props) {
     t = _useTranslation.t;
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+    fieldProps = _useFormikFields.fieldProps,
+    dirty = _useFormikFields.dirty;
+  var showSubmitButton = props.individualSubmit && dirty;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
     className: "m-auto mt-2",
     label: t("labels.submit"),
@@ -6277,26 +6301,46 @@ var transformValues = function transformValues(_ref2) {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
-var getInitialFieldValue = function getInitialFieldValue(field) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+var getDefaultInitialValue = function getDefaultInitialValue(kind) {
+  switch (kind) {
+    case KINDS.checkbox:
+      return false;
+    case KINDS.multiOption:
+    case KINDS.dateRange:
+    case KINDS.timeRange:
+      return [];
+    default:
+      return "";
+  }
+};
+var getInitialFieldValue = function getInitialFieldValue(_ref4) {
+  var field = _ref4.field,
+    _ref4$fieldValues = _ref4.fieldValues,
+    fieldValues = _ref4$fieldValues === void 0 ? [] : _ref4$fieldValues,
+    _ref4$isIndividualFie = _ref4.isIndividualFieldForm,
+    isIndividualFieldForm = _ref4$isIndividualFie === void 0 ? false : _ref4$isIndividualFie;
   var existingFieldValueData = pure.findBy({
     fieldId: field.id
   }, fieldValues);
+  var keyInData = field.kind === KINDS.multiOption ? "values" : "value";
   var newFieldValueData = {
     fieldId: field.id,
-    data: null
+    data: isIndividualFieldForm ? _defineProperty({}, keyInData, getDefaultInitialValue(field.kind)) : null
   };
   return _defineProperty({}, escapeString("".concat(field.name, "-").concat(field.id)), existingFieldValueData || newFieldValueData);
 };
 var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
   var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return getNonSystemFields(fields).map(function (field) {
-    return getInitialFieldValue(field, fieldValues);
+    return getInitialFieldValue({
+      field: field,
+      fieldValues: fieldValues
+    });
   });
 };
-var mergeInitialValues = function mergeInitialValues(_ref5) {
-  var initialValues = _ref5.initialValues,
-    fields = _ref5.fields;
+var mergeInitialValues = function mergeInitialValues(_ref7) {
+  var initialValues = _ref7.initialValues,
+    fields = _ref7.fields;
   var initialValue = ramda.mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
   return ramda.omit(["fieldValues"], initialValue);
 };
@@ -6617,7 +6661,7 @@ var FIELD_KINDS = {
   single_option: {
     value: "single_option",
     label: t$1("fields.kinds.singleOption"),
-    group: 3
+    group: 12
   },
   multi_option: {
     value: "multi_option",
@@ -7358,7 +7402,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
       inactiveFieldsCount: inactiveFieldsCount,
       handleBlockClick: handleBlockClick
     });
-  }, [activeFieldsCount, inactiveFieldsCount]);
+  }, [activeFieldsCount, inactiveFieldsCount, state]);
   var menuBarItems = React.useMemo(function () {
     return renderMenuBarItems({
       isOwnerBased: isOwnerBased,
@@ -12026,7 +12070,11 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     scrollToErrorField: true,
     className: classnames__default["default"]("flex w-full", className),
     formikProps: {
-      initialValues: getInitialFieldValue(field, fieldValues),
+      initialValues: getInitialFieldValue({
+        field: field,
+        fieldValues: fieldValues,
+        isIndividualFieldForm: true
+      }),
       onSubmit: onSubmit,
       enableReinitialize: true
     }
@@ -12061,9 +12109,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     isRequiredColumnName = _ref.isRequiredColumnName,
-    fieldContainerClassName = _ref.fieldContainerClassName,
     fieldClassName = _ref.fieldClassName,
-    labelClassName = _ref.labelClassName,
     _ref$onMutationSucces = _ref.onMutationSuccess,
     onMutationSuccess = _ref$onMutationSucces === void 0 ? pure.noop : _ref$onMutationSucces;
   var _useTranslation = useTranslation(),
@@ -12111,7 +12157,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   };
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("space-y-3", {
+    className: classnames__default["default"]("space-y-3 py-3", {
       "neeto-ui-border-gray-300 rounded-lg border bg-white px-4 py-2": showBorder
     }, className)
   }, isFieldsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -12123,12 +12169,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     });
     if (Field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classnames__default["default"](fieldContainerClassName, "space-y-1"),
+        className: classnames__default["default"](fieldClassName, "space-y-1"),
         key: field.id
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        className: labelClassName,
-        style: "h5"
-      }, pure.capitalize(field.name)), /*#__PURE__*/React__default["default"].createElement(FieldValueInputWrapper, {
+      }, /*#__PURE__*/React__default["default"].createElement(FieldValueInputWrapper, {
         className: fieldClassName,
         onSubmit: function onSubmit(values) {
           return handleSubmit(field, values);