linear-react-components-ui 1.0.10-beta.27 → 1.0.10-beta.28

package/.gitlab-ci.yml

@@ -4,7 +4,7 @@ stages:
 
 lint:
   stage: lint
-  image: node:12.17
+  image: node:14.21.3
   before_script:
     - npm install
   script:
@@ -12,7 +12,7 @@ lint:
 
 units:
   stage: tests-units
-  image: node:12.17
+  image: node:14.21.3
   before_script:
     - npm install
   script:

package/lib/assets/styles/file.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 @import "effects";
+@import "commons.scss";
+
 ::-webkit-file-upload-button {
     display: none;
 }
@@ -55,6 +57,11 @@
         background-color: #d1f0d7;
         border-color: $success-border-color;
       }
+      > img {
+        width: 50%;
+        object-fit: cover;
+        height: 150px;
+      }
       > label {
         width: 100%;
         display: flex;
@@ -144,6 +151,16 @@
       }
     }
   }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
+  > .-skeletonized {
+    height: 180px !important;
+  }
 }
 
 .input-simple-file-container {
@@ -166,6 +183,13 @@
       opacity: 0.5;
     }
   }
+  > .errormessages {
+    width: 100%;
+    color: red;
+    font-size: 13px!important;
+    line-height: 13px;
+    margin-top: 3px;
+  }
 }
 
 .popovercontainer{
@@ -189,3 +213,12 @@
       }
   }
 }
+
+.-skeletonized {
+  @extend %skeleton-component;
+  color: transparent !important;
+  text-shadow: none;
+  box-shadow: none;
+  border-color: transparent !important;
+  transition: none;
+}

package/lib/hint/index.js

@@ -16,10 +16,26 @@ var Hint = function Hint(_ref) {
     skeletonize = _ref$skeletonize === void 0 ? false : _ref$skeletonize,
     style = _ref.style;
   if (!visible || !description) return null;
+  var showHintList = function showHintList(arrayHint) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "rules-list",
+      style: {
+        padding: '15px 0px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        listStyleType: 'none'
+      }
+    }, arrayHint.map(function (hint, index) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index.toString()
+      }, "- ", hint);
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: style,
     className: "\n        hint-component\n        ".concat(customClass, "\n        ").concat(skeletonize ? '-skeletonized' : '', "\n      ")
-  }, /*#__PURE__*/_react.default.createElement("span", null, description));
+  }, Array.isArray(description) ? showHintList(description) : /*#__PURE__*/_react.default.createElement("span", null, description));
 };
 var _default = Hint;
 exports.default = _default;

package/lib/hint/types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 
 interface HintProps {
-    description?: string;
+    description?: string | string[];
     visible?: boolean;
     customClass?: string;
     skeletonize?: boolean;

package/lib/icons/helper.d.ts

@@ -111,6 +111,10 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    file_excel: {
+        viewbox: string;
+        paths: string[];
+    };
     search: {
         viewbox: string;
         paths: string[];

package/lib/icons/helper.js

@@ -117,6 +117,10 @@ var _default = {
     viewbox: '0 0 16 16',
     paths: ['M11 4h3.627c-0.078-0.126-0.172-0.266-0.286-0.421-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.155-0.114-0.295-0.208-0.421-0.286v3.627z', 'M10.5 5c-0.276 0-0.5-0.224-0.5-0.5v-4.5h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h11.5c0.689 0 1.25-0.561 1.25-1.25v-9.75h-4.5zM8 15.5l-3.5-3.5h2.5v-5h2v5h2.5l-3.5 3.5z']
   },
+  file_excel: {
+    viewbox: '0 0 16 16',
+    paths: ['M11.61 6h-2.114l-1.496 2.204-1.496-2.204h-2.114l2.534 3.788-2.859 4.212h3.935v-1.431h-0.784l0.784-1.172 1.741 2.603h2.194l-2.859-4.212 2.534-3.788z', 'M14.341 3.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h11.5c0.689 0 1.25-0.561 1.25-1.25v-9.75c0-0.224-0.068-0.615-0.659-1.421v0zM12.271 2.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-11.5c-0.135 0-0.25-0.114-0.25-0.25v-13.5c0-0.135 0.115-0.25 0.25-0.25 0 0 7.749-0 7.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v9.75z']
+  },
   search: {
     viewbox: '0 0 16 16',
     paths: ['M16 13.5l-4.695-4.695c0.444-0.837 0.695-1.792 0.695-2.805 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.013 0 1.968-0.252 2.805-0.695l4.695 4.695 2.5-2.5zM2 6c0-2.209 1.791-4 4-4s4 1.791 4 4-1.791 4-4 4-4-1.791-4-4z']

package/lib/inputs/base/types.d.ts

@@ -57,7 +57,7 @@ interface IBaseProps {
     requiredError?: boolean;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | ((ref: HTMLInputElement | HTMLTextAreaElement | null) => void);
     inputBaseRef?: RefObject<HTMLDivElement> | ((ref: HTMLDivElement) => void);
-    hint?: string;
+    hint?: string | string[];
     textAlign?: TextAlign;
     rounded?: boolean;
     errorMessages?: string[] | undefined;

package/lib/inputs/file/DefaultFile.js

@@ -13,6 +13,7 @@ require("../../assets/styles/file.scss");
 var _buttons = _interopRequireDefault(require("../../buttons"));
 var _icons = _interopRequireDefault(require("../../icons"));
 var _popover = _interopRequireWildcard(require("../../popover"));
+var helperBase = _interopRequireWildcard(require("../base/helpers"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,6 +33,10 @@ var DefaultFile = function DefaultFile(props) {
     onBtnClickRemove = props.onBtnClickRemove,
     inputRef = props.inputRef,
     defaultFiles = props.defaultFiles,
+    _props$hint = props.hint,
+    hint = _props$hint === void 0 ? [] : _props$hint,
+    _props$errorMessages = props.errorMessages,
+    errorMessages = _props$errorMessages === void 0 ? [] : _props$errorMessages,
     onChange = props.onChange;
   var getFilesList = function getFilesList(files) {
     return !(files !== null && files !== void 0 && files.length) ? [] : _lodash.default.map(files, function (file) {
@@ -78,11 +83,12 @@ var DefaultFile = function DefaultFile(props) {
     (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
     var files = getFilesList(e.target.files);
     setFileList(files);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "input-simple-file-container"
   }, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    hint: hint,
     readOnlyClass: "-disabledVisualApply",
     customClassForInputContent: "-absolute -pointEventDisabled -disabledVisualApply",
     type: "file",
@@ -96,7 +102,7 @@ var DefaultFile = function DefaultFile(props) {
         return _onBtnClickInsert();
       }
     })
-  }), popUpDescription(), buttonRemoveFile()));
+  }), popUpDescription(), buttonRemoveFile()), errorMessages && helperBase.getErrorMessages(errorMessages));
 };
 var _default = DefaultFile;
 exports.default = _default;

package/lib/inputs/file/DragDropFile.js

@@ -10,6 +10,8 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _buttons = require("../../buttons");
 var _icons = _interopRequireDefault(require("../../icons"));
 var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+var helperBase = _interopRequireWildcard(require("../base/helpers"));
+var _hint = _interopRequireDefault(require("../../hint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -55,8 +57,16 @@ var DragDropFile = function DragDropFile(props) {
     onDragOver = props.onDragOver,
     onDragLeave = props.onDragLeave,
     onDrop = props.onDrop,
+    _props$showSubtitle = props.showSubtitle,
+    showSubtitle = _props$showSubtitle === void 0 ? true : _props$showSubtitle,
     _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple;
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$hint = props.hint,
+    hint = _props$hint === void 0 ? [] : _props$hint,
+    _props$errorMessages = props.errorMessages,
+    errorMessages = _props$errorMessages === void 0 ? [] : _props$errorMessages,
+    _props$skeletonize = props.skeletonize,
+    skeletonize = _props$skeletonize === void 0 ? false : _props$skeletonize;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     dragActive = _useState2[0],
@@ -165,7 +175,7 @@ var DragDropFile = function DragDropFile(props) {
           return !ids.includes(name, index + 1);
         });
         setFileList(filtered);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
         onDrop === null || onDrop === void 0 ? void 0 : onDrop(e);
       }
     }
@@ -190,7 +200,7 @@ var DragDropFile = function DragDropFile(props) {
         return !ids.includes(name, index + 1);
       });
       setFileList(filesFiltered);
-      onChange === null || onChange === void 0 ? void 0 : onChange(e);
+      onChange === null || onChange === void 0 ? void 0 : onChange(files, e);
     }
   };
   var onButtonClickRemoveAll = function onButtonClickRemoveAll() {
@@ -205,16 +215,19 @@ var DragDropFile = function DragDropFile(props) {
   };
   var generateListArray = function generateListArray() {
     if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) === 1) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "image-preview-solo"
-      }, (fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png') && /*#__PURE__*/_react.default.createElement("img", {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' ? /*#__PURE__*/_react.default.createElement("img", {
         alt: fileList[0].name,
         src: URL.createObjectURL(fileList[0])
-      }), fileList[0].name && /*#__PURE__*/_react.default.createElement("div", {
+      }) : /*#__PURE__*/_react.default.createElement(_icons.default, {
+        size: 64,
+        name: "file_excel"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "image-preview-solo"
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "description-file"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "subtitle"
-      }, fileList[0].name)));
+      }, fileList[0].name))));
     }
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: "file-list"
@@ -253,16 +266,19 @@ var DragDropFile = function DragDropFile(props) {
       return e.preventDefault();
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-content"
+    className: "drag-content ".concat(skeletonize ? '-skeletonized' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(message.class, " content")
+    className: "".concat(message.class, " ").concat(!skeletonize ? 'content' : '')
   }, message.error || fileList.length === 0 ? /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: id
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: "title"
-  }, message.text), /*#__PURE__*/_react.default.createElement("p", {
+    className: "title",
+    style: {
+      paddingBottom: '20px'
+    }
+  }, message.text), showSubtitle && /*#__PURE__*/_react.default.createElement("p", {
     className: "subtitle"
-  }, message.subtitle), /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+  }, message.subtitle), !skeletonize && /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     onClick: onBtnClickInsert,
     label: labelButton
   })) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, generateListArray(), /*#__PURE__*/_react.default.createElement("footer", {
@@ -299,7 +315,11 @@ var DragDropFile = function DragDropFile(props) {
     onDragLeave: handleDragLeave,
     onDragOver: handleDragOver,
     onDrop: handleDrop
-  })));
+  })), errorMessages && helperBase.getErrorMessages(errorMessages), /*#__PURE__*/_react.default.createElement(_hint.default, {
+    visible: !!hint,
+    customClass: "hint",
+    description: hint
+  }));
 };
 var _default = DragDropFile;
 exports.default = _default;

package/lib/inputs/file/types.d.ts

@@ -19,7 +19,7 @@ interface IFileProps {
     required?: boolean;
     readOnly?: boolean;
     name?: string;
-    onChange?: (e?: CustomInputEvent | DragEvent) => void;
+    onChange?: (files: File[], e?: CustomInputEvent | DragEvent) => void;
     size?: Size;
     accept?: string;
     labelButton?: string;
@@ -29,6 +29,9 @@ interface IFileProps {
     onDragOver?: (e?: DragEvent) => void;
     onDrop?: (e?: DragEvent) => void;
     onDragLeave?: (e?: DragEvent) => void;
+    errorMessages?: string[];
+    skeletonize?: boolean;
+    showSubtitle?: boolean;
 }
 interface IDefaultFileProps extends IFileProps {
     onBtnClickInsert: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.0.10-beta.27",
+  "version": "1.0.10-beta.28",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",