@itcase/forms 1.0.27 → 1.0.28

package/dist/css/form/Field/FileInput/FileInput.css

@@ -29,7 +29,6 @@
       align-content: center;
       align-items: center;
       cursor: pointer;
-      grid-column: span 3;
       &-title {
         padding: 0 0 8px 0;
         margin: 0;
@@ -49,12 +48,27 @@
     }
   }
   &__thumb {
-    display: grid;
-    column-gap: 8px;
-    grid-template-columns: min-content 1fr;
-    grid-template-rows: auto 1fr;
     padding: 8px 16px 8px 8px;
     position: relative;
+    &_direction {
+      &_vertical {
+        display: flex;
+        flex-flow: column nowrap;
+        ^^&-image {
+          width: 100%;
+        }
+      }
+      &_horizontal {
+        column-gap: 8px;
+        display: grid;
+        grid-template-columns: min-content 1fr;
+        grid-template-rows: auto 1fr;
+        ^^&-image {
+          width: 160px;
+          height: 160px;
+        }
+      }
+    }
     &-loader {
       position: absolute;
       left: 0;
@@ -64,8 +78,6 @@
       display: flex;
     }
     &-image {
-      width: 160px;
-      height: 160px;
       grid-column-start: 1;
       grid-row-start: span 2;
       display: flex;
@@ -80,11 +92,13 @@
       }
     }
     &-name {
+      width: 100%;
       padding: 12px 0 0 0;
       grid-column-start: 2;
       align-self: flex-start;
     }
     &-remove {
+      width: 100%;
       grid-column-start: 2;
       align-self: flex-start;
       cursor: pointer;
@@ -125,6 +139,16 @@
     }
   }
 }
+.form-dropzone__dropzone-wrapper_column {
+  @each $count in 1, 2, 3, 4, 5 {
+    &_$(count) {
+      grid-template-columns: repeat($(count), minmax(0, 1fr));
+      & .form-dropzone__hint {
+        grid-column: span $(count);
+      }
+    }
+  }
+}
 :root {
   --fileinput-size-normal-padding: 16px 16px;
   --fileinput-size-normal-shape-rounded: 6px;

package/dist/itcase-forms.cjs.js

@@ -43,6 +43,9 @@ var castArray__default = /*#__PURE__*/_interopDefault(castArray);
 var createDecorator__default = /*#__PURE__*/_interopDefault(createDecorator);
 
 var phoneValidation = function phoneValidation(value, context) {
+  if (!value) {
+    return true;
+  }
   return libphonenumberJs.isPossiblePhoneNumber(value, 'RU');
 };
 var emailValidation = function emailValidation(value, context) {
@@ -484,13 +487,19 @@ var makeValidate = function makeValidate(schema) {
               abortEarly: false
             });
           case 3:
-            _context.next = 8;
+            _context.next = 12;
             break;
           case 5:
             _context.prev = 5;
             _context.t0 = _context["catch"](0);
+            if (!_context.t0.inner) {
+              _context.next = 11;
+              break;
+            }
             return _context.abrupt("return", _context.t0.inner.reduce(setInError, emptyObj));
-          case 8:
+          case 11:
+            console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
+          case 12:
           case "end":
             return _context.stop();
         }
@@ -1199,6 +1208,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     thumbNameTextWeight = props.thumbNameTextWeight,
     hintTitleTextColor = props.hintTitleTextColor,
     hintTitleTextWrap = props.hintTitleTextWrap,
+    thumbColumn = props.thumbColumn,
     hintTitleTextWeight = props.hintTitleTextWeight,
     hintDescriptionTextSize = props.hintDescriptionTextSize,
     hintDescriptionTextColor = props.hintDescriptionTextColor,
@@ -1208,6 +1218,8 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     errorMessageTextWeight = props.errorMessageTextWeight,
     errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
+    maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
     hintDescription = props.hintDescription,
@@ -1242,7 +1254,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
 
   // Create dropzone options
   var _useDropzone = reactDropzone.useDropzone(Object.assign({
-      maxSize: 5242880
+      maxSize: maxSize || 10485760,
+      // 10mb
+      maxFiles: maxFiles || 5
     }, dropzoneProps, {
       getFilesFromEvent: function () {
         var _getFilesFromEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
@@ -1406,6 +1420,10 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     prefix: 'border-width_',
     propsKey: 'thumbBorderWidth'
   });
+  var thumbDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'form-dropzone__thumb_direction_',
+    propsKey: 'thumbDirection'
+  });
   var thumbBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
@@ -1419,14 +1437,14 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     propsKey: 'thumbBorderType'
   });
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", getRootProps({
-    className: "form-dropzone__dropzone dropzone " + className + " form-dropzone__dropzone_size_" + size + " " + shapeClass
+    className: "form-dropzone__dropzone dropzone " + className + " thumbColumn form-dropzone__dropzone_size_" + size + " " + shapeClass
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && "form-dropzone__dropzone-wrapper_column_" + thumbColumn, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React__default.default.createElement("aside", {
-      className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+      className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
     }, isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-image"
@@ -1558,9 +1576,13 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
     hideMessage = props.hideMessage,
+    thumbDirection = props.thumbDirection,
     hintDescription = props.hintDescription,
     isShowFilename = props.isShowFilename,
     dropzoneProps = props.dropzoneProps,
+    maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
+    thumbColumn = props.thumbColumn,
     isRequired = props.isRequired,
     isPreviews = props.isPreviews,
     onAddFiles = props.onAddFiles,
@@ -1601,9 +1623,13 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
       removeThumbTextHoverColor: removeThumbTextHoverColor,
       fillHover: fillHover,
       className: className,
+      thumbColumn: thumbColumn,
+      thumbDirection: thumbDirection,
       inputName: input.name,
       inputValue: input.value,
       thumbNameTextSize: thumbNameTextSize,
@@ -1637,7 +1663,9 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
 });
 FileInput.defaultProps = {
   errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextPrimary'
+  errorMessageTextColor: 'errorTextPrimary',
+  thumbColumn: 1,
+  thumbDirection: 'vertical'
 };
 FileInput.propTypes = {
   name: PropTypes__default.default.string.isRequired,

package/dist/itcase-forms.esm.js

@@ -33,6 +33,9 @@ import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
 var phoneValidation = function phoneValidation(value, context) {
+  if (!value) {
+    return true;
+  }
   return isPossiblePhoneNumber(value, 'RU');
 };
 var emailValidation = function emailValidation(value, context) {
@@ -474,13 +477,19 @@ var makeValidate = function makeValidate(schema) {
               abortEarly: false
             });
           case 3:
-            _context.next = 8;
+            _context.next = 12;
             break;
           case 5:
             _context.prev = 5;
             _context.t0 = _context["catch"](0);
+            if (!_context.t0.inner) {
+              _context.next = 11;
+              break;
+            }
             return _context.abrupt("return", _context.t0.inner.reduce(setInError, emptyObj));
-          case 8:
+          case 11:
+            console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
+          case 12:
           case "end":
             return _context.stop();
         }
@@ -1189,6 +1198,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     thumbNameTextWeight = props.thumbNameTextWeight,
     hintTitleTextColor = props.hintTitleTextColor,
     hintTitleTextWrap = props.hintTitleTextWrap,
+    thumbColumn = props.thumbColumn,
     hintTitleTextWeight = props.hintTitleTextWeight,
     hintDescriptionTextSize = props.hintDescriptionTextSize,
     hintDescriptionTextColor = props.hintDescriptionTextColor,
@@ -1198,6 +1208,8 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     errorMessageTextWeight = props.errorMessageTextWeight,
     errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
+    maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
     hintDescription = props.hintDescription,
@@ -1232,7 +1244,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
 
   // Create dropzone options
   var _useDropzone = useDropzone(Object.assign({
-      maxSize: 5242880
+      maxSize: maxSize || 10485760,
+      // 10mb
+      maxFiles: maxFiles || 5
     }, dropzoneProps, {
       getFilesFromEvent: function () {
         var _getFilesFromEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
@@ -1396,6 +1410,10 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     prefix: 'border-width_',
     propsKey: 'thumbBorderWidth'
   });
+  var thumbDirectionClass = useDeviceTargetClass(props, {
+    prefix: 'form-dropzone__thumb_direction_',
+    propsKey: 'thumbDirection'
+  });
   var thumbBorderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
@@ -1409,14 +1427,14 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     propsKey: 'thumbBorderType'
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
-    className: "form-dropzone__dropzone dropzone " + className + " form-dropzone__dropzone_size_" + size + " " + shapeClass
+    className: "form-dropzone__dropzone dropzone " + className + " thumbColumn form-dropzone__dropzone_size_" + size + " " + shapeClass
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && "form-dropzone__dropzone-wrapper_column_" + thumbColumn, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React.createElement("aside", {
-      className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+      className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
     }, isPreviews && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
@@ -1548,9 +1566,13 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
     hideMessage = props.hideMessage,
+    thumbDirection = props.thumbDirection,
     hintDescription = props.hintDescription,
     isShowFilename = props.isShowFilename,
     dropzoneProps = props.dropzoneProps,
+    maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
+    thumbColumn = props.thumbColumn,
     isRequired = props.isRequired,
     isPreviews = props.isPreviews,
     onAddFiles = props.onAddFiles,
@@ -1591,9 +1613,13 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
+      maxFiles: maxFiles,
+      maxSize: maxSize,
       removeThumbTextHoverColor: removeThumbTextHoverColor,
       fillHover: fillHover,
       className: className,
+      thumbColumn: thumbColumn,
+      thumbDirection: thumbDirection,
       inputName: input.name,
       inputValue: input.value,
       thumbNameTextSize: thumbNameTextSize,
@@ -1627,7 +1653,9 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
 });
 FileInput.defaultProps = {
   errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextPrimary'
+  errorMessageTextColor: 'errorTextPrimary',
+  thumbColumn: 1,
+  thumbDirection: 'vertical'
 };
 FileInput.propTypes = {
   name: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",