linear-react-components-ui 0.4.76 → 0.4.77-beta.3

package/lib/assets/styles/dropdown.scss

@@ -1,5 +1,6 @@
 @import "commons.scss";
 @import "effects.scss";
+@import "colors.scss";
 .dropdown-component {
   min-width: 200px;
   position: absolute;
@@ -76,12 +77,31 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenuitem {
+    > .floatmenuitem,
+    > .floatsubmenu .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenuitem .-items {
+    > .floatmenuitem,
+    > .floatsubmenu {
+      position: relative;
+      animation: slideWithPositionRightToLeft 0.4s;
+    }
+    > .floatsubmenu {
+      > .submenuheader {
+        color: $font-color-soft;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 10px;
+        span {
+          font-weight: 500;
+        }
+      }
+    }
+    > .floatmenuitem .-items,
+    > .floatsubmenu .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;

package/lib/assets/styles/effects.scss

@@ -732,6 +732,17 @@
   }
 }
 
+@keyframes slideWithPositionRightToLeft {
+  from {
+    left: 100%;
+    opacity: 0;
+  }
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
 @keyframes slideRightToLeftWithFade {
   from {
     opacity: 0;

package/lib/dropdown/withDropdown.js

@@ -73,10 +73,10 @@ var withDropdown = function withDropdown(WrappedComponent) {
       setPrevOpened(dropdownOpened);
     }
 
-    var onClickOutside = function onClickOutside(_ref) {
-      var target = _ref.target;
+    var onClickOutside = function onClickOutside(event) {
+      var target = event.target;
 
-      if (popupRef && popupRef.current && target !== popupRef.current && !popupRef.current.contains(target) && wrappedComponentRef.current !== target) {
+      if (popupRef.current && target !== popupRef.current && !event.path.includes(popupRef.current) && wrappedComponentRef.current !== target) {
         setOpened(false);
       }
     };

package/lib/menus/float/MenuItem.js

@@ -33,17 +33,28 @@ var MenuItem = function MenuItem(_ref) {
       iconName = _ref.iconName,
       iconColor = _ref.iconColor,
       iconSize = _ref.iconSize,
-      dropdownMenu = _ref.dropdownMenu;
+      dropdownMenu = _ref.dropdownMenu,
+      onClick = _ref.onClick;
 
   var _useContext = (0, _react.useContext)(_helpers["default"]),
       customClassMenuItem = _useContext.customClassMenuItem;
 
   var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
+
+  var handleOnClick = function handleOnClick() {
+    if (onClick) {
+      onClick(dropdownContext && dropdownContext.handleDropdownClose);
+      return;
+    }
+
+    if (dropdownContext) dropdownContext.handleDropdownClose();
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "floatmenuitem"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(customClassMenuItem, " -items")
-  }, !_lodash["default"].isEmpty(dropdownMenu) && /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+  }, !_lodash["default"].isEmpty(dropdownMenu) && !onClick && /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
     customClass: "floatmenudropdown",
     iconName: "more1",
     transparent: true,
@@ -54,10 +65,11 @@ var MenuItem = function MenuItem(_ref) {
   }, dropdownMenu), /*#__PURE__*/_react["default"].createElement("a", {
     className: "floatmenulink",
     target: "_blank",
-    onClick: function onClick() {
-      if (dropdownContext) dropdownContext.handleDropdownClose();
-    },
+    onClick: handleOnClick,
     href: url,
+    style: {
+      cursor: onClick ? 'pointer' : undefined
+    },
     rel: "noreferrer"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "iconcontainer"
@@ -74,12 +86,12 @@ var MenuItem = function MenuItem(_ref) {
 MenuItem.propTypes = {
   title: _propTypes["default"].string,
   url: _propTypes["default"].string,
-  urlHref: _propTypes["default"].string,
   iconName: _propTypes["default"].string,
   iconColor: _propTypes["default"].string,
   iconSize: _propTypes["default"].number,
   customClass: _propTypes["default"].string,
-  dropdownMenu: _propTypes["default"].element
+  dropdownMenu: _propTypes["default"].element,
+  onClick: _propTypes["default"].func
 };
 MenuItem.defaultProps = {
   iconColor: 'gray',
@@ -88,8 +100,8 @@ MenuItem.defaultProps = {
   iconName: '',
   customClass: '',
   url: undefined,
-  urlHref: undefined,
-  dropdownMenu: undefined
+  dropdownMenu: undefined,
+  onClick: undefined
 };
 var _default = MenuItem;
 exports["default"] = _default;

package/lib/menus/float/SubMenuContainer.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icons = _interopRequireDefault(require("../../icons"));
+
+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; }
+
+var SubMenuContainer = function SubMenuContainer(_ref) {
+  var title = _ref.title,
+      customClass = _ref.customClass,
+      children = _ref.children,
+      handlerGoBack = _ref.handlerGoBack;
+  (0, _react.useEffect)(function () {
+    return function () {
+      handlerGoBack();
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "floatsubmenu ".concat(customClass)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "submenuheader"
+  }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    onClick: handlerGoBack,
+    name: "arrowBack",
+    pointerEvents: "all",
+    style: {
+      cursor: 'pointer'
+    }
+  }), title && /*#__PURE__*/_react["default"].createElement("span", null, title)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "submenucontent"
+  }, children));
+};
+
+SubMenuContainer.propTypes = {
+  children: _propTypes["default"].element.isRequired,
+  handlerGoBack: _propTypes["default"].func.isRequired,
+  title: _propTypes["default"].string,
+  customClass: _propTypes["default"].string
+};
+SubMenuContainer.defaultProps = {
+  title: undefined,
+  customClass: undefined
+};
+var _default = SubMenuContainer;
+exports["default"] = _default;

package/lib/menus/float/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "MenuItem", {
     return _MenuItem["default"];
   }
 });
+Object.defineProperty(exports, "SubMenuContainer", {
+  enumerable: true,
+  get: function get() {
+    return _SubMenuContainer["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,6 +23,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
 
+var _SubMenuContainer = _interopRequireDefault(require("./SubMenuContainer"));
+
 var _buttons = _interopRequireDefault(require("../../buttons"));
 
 var _icons = _interopRequireDefault(require("../../icons"));
@@ -39,7 +47,9 @@ var FloatMenu = function FloatMenu(props) {
       customClassMenuItem = props.customClassMenuItem;
 
   var getSpinner = function getSpinner() {
-    if (isLoading) return /*#__PURE__*/_react["default"].createElement(_spinner["default"], null);
+    if (isLoading) return /*#__PURE__*/_react["default"].createElement(_spinner["default"], {
+      delayTime: 0
+    });
     return spinner;
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "0.4.76",
+  "version": "0.4.77-beta.3",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "scripts": {

package/lib/inputs/date/helper.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var getCalendarDropdownStyle = function getCalendarDropdownStyle(_ref) {
-  var topPosition = _ref.topPosition,
-      leftPosition = _ref.leftPosition,
-      width = _ref.width;
-  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width:").concat(width, "px");
-};
-
-var _default = getCalendarDropdownStyle;
-exports["default"] = _default;