@megafon/ui-core 3.10.1 → 3.12.1

package/dist/lib/components/Notification/Notification.d.ts

@@ -33,6 +33,20 @@ export interface INotificationProps {
     hasCloseButton?: boolean;
     /** Заголовок */
     title?: string;
+    /** Короткий текст, отображаемый при закрытом расхлопе */
+    shortText?: string;
+    /** заголовок закрытого расхлопа */
+    closeCollapseTitle?: string;
+    /** заголовок открытого расхлопа */
+    openCollapseTitle?: string;
+    /** Управление состоянием открыт/закрыт расхлопа "Подробнее" */
+    isCollapseOpened?: boolean;
+    /** Текст кнопки */
+    buttonText?: string;
+    /** Лоадер кнопки */
+    buttonLoader?: boolean;
+    /** Заблокировать кнопку */
+    buttonDisable?: boolean;
     /** Текст ссылки внизу уведомления */
     link?: string;
     /** rel - аргумент тега <a> для ссылки */
@@ -50,11 +64,17 @@ export interface INotificationProps {
         text?: Record<string, string>;
         link?: Record<string, string>;
         close?: Record<string, string>;
+        button?: Record<string, string>;
+        collapseButton?: Record<string, string>;
     };
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */
     onLinkClick?: () => void;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик клика по кнопке расхлопа */
+    onCollapseButtonClick?: (value: boolean) => void;
 }
 declare const Notification: React.FC<INotificationProps>;
 export default Notification;

package/dist/lib/components/Notification/Notification.js

@@ -11,14 +11,20 @@ require("core-js/modules/es.object.values");
 
 require("core-js/modules/es.string.link");
 
+require("core-js/modules/web.timers");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
 var _Header = _interopRequireDefault(require("../Header/Header"));
 
 var _TextLink = _interopRequireDefault(require("../TextLink/TextLink"));
@@ -41,6 +47,26 @@ var ErrorIcon = function ErrorIcon(props) {
   }));
 };
 
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+var ArrowUp = function ArrowUp(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 12H6l4-5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
 var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -83,6 +109,7 @@ var CancelIcon = function CancelIcon(props) {
   }));
 };
 
+var TIMEOUT_DELAY = 400;
 var NotificationTypes = {
   SUCCESS: 'success',
   WARNING: 'warning',
@@ -115,6 +142,18 @@ var Notification = function Notification(_ref) {
       isColored = _ref$isColored === void 0 ? true : _ref$isColored,
       hasCloseButton = _ref.hasCloseButton,
       title = _ref.title,
+      shortText = _ref.shortText,
+      _ref$closeCollapseTit = _ref.closeCollapseTitle,
+      closeCollapseTitle = _ref$closeCollapseTit === void 0 ? 'Подробнее' : _ref$closeCollapseTit,
+      _ref$openCollapseTitl = _ref.openCollapseTitle,
+      openCollapseTitle = _ref$openCollapseTitl === void 0 ? 'Свернуть' : _ref$openCollapseTitl,
+      _ref$isCollapseOpened = _ref.isCollapseOpened,
+      isCollapseOpened = _ref$isCollapseOpened === void 0 ? false : _ref$isCollapseOpened,
+      buttonText = _ref.buttonText,
+      _ref$buttonLoader = _ref.buttonLoader,
+      buttonLoader = _ref$buttonLoader === void 0 ? false : _ref$buttonLoader,
+      _ref$buttonDisable = _ref.buttonDisable,
+      buttonDisable = _ref$buttonDisable === void 0 ? false : _ref$buttonDisable,
       link = _ref.link,
       rel = _ref.rel,
       href = _ref.href,
@@ -122,7 +161,84 @@ var Notification = function Notification(_ref) {
       icon = _ref.icon,
       dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
-      onLinkClick = _ref.onLinkClick;
+      onLinkClick = _ref.onLinkClick,
+      onButtonClick = _ref.onButtonClick,
+      onCollapseButtonClick = _ref.onCollapseButtonClick;
+  var shortTextRef = (0, _react.useRef)(null);
+  var fullTextRef = (0, _react.useRef)(null);
+  var wrapTextRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(isCollapseOpened),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      showFullText = _useState2[0],
+      setShowFullText = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      updateTextHeight = _useState4[0],
+      setUpdateTextHeight = _useState4[1];
+
+  var initialTextClasses = {
+    "short": {
+      hidden: shortText && showFullText
+    },
+    full: {
+      visible: showFullText
+    }
+  };
+
+  var _useState5 = (0, _react.useState)(initialTextClasses),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      textClasses = _useState6[0],
+      setTextClass = _useState6[1];
+
+  var hasBottom = shortText || buttonText || link;
+  var isErrorType = type === NotificationTypes.ERROR;
+  (0, _react.useEffect)(function () {
+    setShowFullText(isCollapseOpened);
+  }, [isCollapseOpened]);
+  (0, _react.useEffect)(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+
+    var visibleElement = showFullText ? shortTextRef.current : fullTextRef.current;
+
+    var _visibleElement$getBo = visibleElement.getBoundingClientRect(),
+        height = _visibleElement$getBo.height;
+
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    return setUpdateTextHeight(!updateTextHeight); // не должен запускаться при изменении флага updateTextHeight;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showFullText]);
+  (0, _react.useEffect)(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+
+    var hiddenElement = showFullText ? fullTextRef.current : shortTextRef.current;
+
+    var _hiddenElement$getBou = hiddenElement.getBoundingClientRect(),
+        height = _hiddenElement$getBou.height;
+
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    setTextClass(initialTextClasses);
+    var timeoutId = setTimeout(function () {
+      if (wrapTextRef.current) {
+        wrapTextRef.current.style.height = 'auto';
+      }
+    }, TIMEOUT_DELAY);
+    return function () {
+      clearTimeout(timeoutId);
+    }; // не должен запускаться при изменении флага showFullText;
+    // запускается по флагу updateTextHeight, который изменяется в предыдущем эффекте.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateTextHeight]);
+
+  var handleCollapseButtonClick = function handleCollapseButtonClick() {
+    setShowFullText(!showFullText);
+    onCollapseButtonClick === null || onCollapseButtonClick === void 0 ? void 0 : onCollapseButtonClick(!showFullText);
+  };
 
   var renderLink = function renderLink() {
     return /*#__PURE__*/_react["default"].createElement(_TextLink["default"], {
@@ -135,10 +251,38 @@ var Notification = function Notification(_ref) {
       href: href,
       target: target
     }, link, /*#__PURE__*/_react["default"].createElement(RightArrow, {
-      className: cn('right-arrow')
+      className: cn('link-arrow')
     }));
   };
 
+  var renderButton = function renderButton() {
+    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      className: cn('button'),
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      sizeAll: "small",
+      sizeMobile: "extra-small",
+      theme: isErrorType && isColored ? 'white' : 'green',
+      showLoader: buttonLoader,
+      disabled: buttonDisable,
+      ellipsis: !buttonLoader,
+      onClick: onButtonClick
+    }, buttonText);
+  };
+
+  var renderCollapseButton = function renderCollapseButton() {
+    return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapseButton), {
+      type: "button",
+      className: cn('collapse-button'),
+      onClick: handleCollapseButtonClick
+    }), showFullText ? openCollapseTitle : closeCollapseTitle, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('collapse-arrow', {
+        close: showFullText
+      })
+    }, showFullText ? /*#__PURE__*/_react["default"].createElement(ArrowUp, null) : /*#__PURE__*/_react["default"].createElement(ArrowDown, null)));
+  };
+
   var renderIcon = function renderIcon() {
     if (icon) {
       return icon;
@@ -179,19 +323,33 @@ var Notification = function Notification(_ref) {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('content', [contentClass])
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('text-container')
   }, title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
     },
     as: "h5",
-    className: cn('title', {
-      'close-padding': hasCloseButton
-    })
-  }, title), /*#__PURE__*/_react["default"].createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('title')
+  }, title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    ref: wrapTextRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       'close-padding': hasCloseButton && !title
     })
-  }), children), link && renderLink())), hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: shortTextRef,
+    className: cn('short-text', textClasses["short"])
+  }, shortText || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
+    ref: fullTextRef,
+    className: cn('full-text', textClasses.full)
+  }, children))), hasBottom && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('bottom', {
+      'has-button': !!buttonText
+    })
+  }, (buttonText || link) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('bottom-block')
+  }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close'),
     type: "button",
     onClick: onClose
@@ -212,6 +370,13 @@ Notification.propTypes = {
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,
   title: PropTypes.string,
+  shortText: PropTypes.string,
+  closeCollapseTitle: PropTypes.string,
+  openCollapseTitle: PropTypes.string,
+  isCollapseOpened: PropTypes.bool,
+  buttonText: PropTypes.string,
+  buttonLoader: PropTypes.bool,
+  buttonDisable: PropTypes.bool,
   link: PropTypes.string,
   rel: PropTypes.string,
   href: PropTypes.string,
@@ -222,10 +387,14 @@ Notification.propTypes = {
     title: PropTypes.objectOf(PropTypes.string.isRequired),
     text: PropTypes.objectOf(PropTypes.string.isRequired),
     link: PropTypes.objectOf(PropTypes.string.isRequired),
-    close: PropTypes.objectOf(PropTypes.string.isRequired)
+    close: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapseButton: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   onClose: PropTypes.func,
-  onLinkClick: PropTypes.func
+  onLinkClick: PropTypes.func,
+  onButtonClick: PropTypes.func,
+  onCollapseButtonClick: PropTypes.func
 };
 var _default = Notification;
 exports["default"] = _default;

package/dist/lib/components/Tabs/Tab.d.ts

@@ -9,6 +9,7 @@ export interface ITabProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        inner?: Record<string, string>;
     };
     /** Дочерние элементы */
     children?: React.ReactNode;

package/dist/lib/components/Tabs/Tab.js

@@ -25,7 +25,8 @@ var Tab = function Tab(_ref) {
 
 Tab.propTypes = {
   dataAttrs: _propTypes["default"].shape({
-    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    inner: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
   title: _propTypes["default"].string,
   icon: _propTypes["default"].node,

package/dist/lib/components/Tabs/Tabs.js

@@ -299,15 +299,15 @@ var Tabs = function Tabs(_ref) {
     var rootRefNode = rootRef.current;
     rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
   }, [outerObserveContainer]);
-  var renderTab = React.useCallback(function (index, title, icon, href) {
+  var renderTab = React.useCallback(function (index, title, icon, href, attr) {
     var ElementType = href ? 'a' : 'div';
-    return /*#__PURE__*/React.createElement(ElementType, {
+    return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
       href: href,
       className: cn('tab-inner', {
         current: currentIndex === index
       }),
       onClick: handleTabInnerClick(index)
-    }, !!icon && /*#__PURE__*/React.createElement("div", {
+    }, (0, _uiHelpers.filterDataAttrs)(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-icon')
     }, icon), !!title && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-title')
@@ -321,7 +321,7 @@ var Tabs = function Tabs(_ref) {
           href = _child$props.href,
           renderTabWrapper = _child$props.renderTabWrapper,
           data = _child$props.dataAttrs;
-      var tab = renderTab(i, title, icon, href);
+      var tab = renderTab(i, title, icon, href, data === null || data === void 0 ? void 0 : data.inner);
       var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
       return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
         className: cn('slide')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.10.1",
+  "version": "3.12.1",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ab5598d6f428c21c22d939ed586a3795b3d6467a"
+  "gitHead": "d951676f8c48d197b6107b4e90b04ea245cf0649"
 }