@itcase/forms 1.0.23 → 1.0.25

package/dist/css/form/Field/Code/Code.css

@@ -0,0 +1,3 @@
+.form-code {
+  position: relative;
+}

package/dist/css/form/Field/Custom/Custom.css

@@ -1,22 +1,24 @@
-.form-field {
-  &_type_custom {
-    width: 100%;
-    &&_state {
-      &_success {
-        & .input {
-          border: solid 1px var(--color-success-border-primary);
-        }
+.form-custom {
+  &_state {
+    &_success {
+      & .input {
+        border: solid 1px var(--color-success-border-primary);
       }
-      &_error {
-        & .input {
-          border: solid 1px var(--color-error-border-primary);
-        }
+    }
+    &_error {
+      & .input {
+        border: solid 1px var(--color-error-border-primary);
       }
-      &_focus {
-        & .input {
-          background: var(--color-surface-primary);
-        }
+    }
+    &_focus {
+      & .input {
+        background: var(--color-surface-primary);
       }
     }
   }
 }
+.form-field {
+  &_type_custom {
+    width: 100%;
+  }
+}

package/dist/itcase-forms.cjs.js

@@ -12,6 +12,7 @@ var Text = require('@itcase/ui/components/Text');
 var useDeviceTargetClass = require('@itcase/ui/hooks/useDeviceTargetClass');
 var useStyles = require('@itcase/ui/hooks/useStyles');
 var Choice = require('@itcase/ui/components/Choice');
+var Code = require('@itcase/ui/components/Code');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var axios = require('axios');
 var reactDropzone = require('react-dropzone');
@@ -814,6 +815,22 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = React.useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = React.useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
@@ -836,7 +853,8 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
       isMultiple: isMultiple,
       isRequired: isRequired,
       placeholder: placeholder,
-      onChange: change
+      active: activeOption,
+      setActiveSegment: setActiveSegment
     }, inputProps)));
   });
 });
@@ -894,6 +912,53 @@ CustomField.propTypes = {
   inputProps: PropTypes__default.default.object
 };
 
+var CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(props) {
+  var isRequired = props.isRequired,
+    name = props.name,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    classNameGroupItem = props.classNameGroupItem,
+    hideMessage = props.hideMessage;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function (_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
+      autoComplete: "nope",
+      name: input.name,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+CodeField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CodeField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  isRequired: PropTypes__default.default.bool,
+  fieldProps: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object
+};
+
 function DatePickerField(props) {
   var isRequired = props.isRequired,
     fieldProps = props.fieldProps,
@@ -2348,6 +2413,7 @@ var formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2373,6 +2439,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React__default.default.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React__default.default.createElement(SwitchField, Object.assign({
@@ -2718,6 +2790,7 @@ Object.defineProperty(exports, 'useFormState', {
 });
 exports.Checkbox = CheckboxField;
 exports.ChoiceField = ChoiceField;
+exports.CodeField = CodeField;
 exports.CustomField = CustomField;
 exports.DatePickerField = DatePickerField;
 exports.FieldWrapper = FieldWrapper;

package/dist/itcase-forms.esm.js

@@ -11,6 +11,7 @@ import { Text } from '@itcase/ui/components/Text';
 import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
 import { useStyles } from '@itcase/ui/hooks/useStyles';
 import { Choice } from '@itcase/ui/components/Choice';
+import { Code } from '@itcase/ui/components/Code';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import axios from 'axios';
 import { useDropzone } from 'react-dropzone';
@@ -804,6 +805,22 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
@@ -826,7 +843,8 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       isMultiple: isMultiple,
       isRequired: isRequired,
       placeholder: placeholder,
-      onChange: change
+      active: activeOption,
+      setActiveSegment: setActiveSegment
     }, inputProps)));
   });
 });
@@ -884,6 +902,53 @@ CustomField.propTypes = {
   inputProps: PropTypes.object
 };
 
+var CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
+  var isRequired = props.isRequired,
+    name = props.name,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    classNameGroupItem = props.classNameGroupItem,
+    hideMessage = props.hideMessage;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, function (_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
+      autoComplete: "nope",
+      name: input.name,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+CodeField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CodeField.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
 function DatePickerField(props) {
   var isRequired = props.isRequired,
     fieldProps = props.fieldProps,
@@ -2338,6 +2403,7 @@ var formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2363,6 +2429,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React.createElement(SwitchField, Object.assign({
@@ -2694,4 +2766,4 @@ FinalForm.defaultProps = {
   disableFieldsAutoComplete: false
 };
 
-export { CheckboxField as Checkbox, ChoiceField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.6",
-    "@itcase/ui": "^1.0.46",
+    "@itcase/ui": "^1.0.48",
     "axios": "^1.5.0",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",