@megafon/ui-shared 9.0.0-alpha.9 → 9.0.0

package/dist/lib/components/CardsOnBackground/components/CardOnBackground.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _setRelAttribute = require("../../../helpers/setRelAttribute");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-9-card-on-background');
+var CardOnBackground = function CardOnBackground(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    imageSrc = _ref.imageSrc,
+    _ref$imageAlt = _ref.imageAlt,
+    imageAlt = _ref$imageAlt === void 0 ? '' : _ref$imageAlt,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    headerHeight = _ref.headerHeight,
+    headerRef = _ref.headerRef,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
+  var isLink = !!href && !showButtons;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
+  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
+    className: cn({
+      active: isLink
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
+    href: href,
+    target: target,
+    rel: currentRel
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('header-wrapper')
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
+    style: {
+      minHeight: headerHeight
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('header'),
+    ref: headerRef
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
+    as: "h3",
+    align: "center"
+  }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!description && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('description')
+  }, (0, _uiHelpers.convert)(description, _uiHelpers.textConvertConfig)))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('image-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    alt: imageAlt
+  })), showButtons && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('buttons')
+  }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('button')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    className: classes.button,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    theme: "green",
+    fullWidth: true,
+    href: button.href,
+    target: button.target,
+    rel: (0, _setRelAttribute.setRelAttribute)(button.rel, button.target),
+    onClick: button.onClick
+  }, button.title)), !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('button')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    className: classes.extraButton,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+    },
+    theme: "gray",
+    fullWidth: true,
+    href: extraButton.href,
+    target: extraButton.target,
+    rel: (0, _setRelAttribute.setRelAttribute)(extraButton.rel, extraButton.target),
+    onClick: extraButton.onClick
+  }, extraButton.title)))));
+};
+var _default = exports["default"] = CardOnBackground;

package/dist/lib/components/CardsOnBackground/types.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type CardDataType = {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description?: string;
+    /** Изображение */
+    imageSrc: string;
+    /** Значение тега alt для изображения */
+    imageAlt?: string;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare const BackgroundColor: {
+    readonly GRAY: "gray";
+    readonly GREEN: "green";
+    readonly BLUE: "blue";
+    readonly VIOLET: "violet";
+};
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+export declare const SingleCardAlign: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export type SingleCardAlignType = (typeof SingleCardAlign)[keyof typeof SingleCardAlign];
+export {};

package/dist/lib/components/CardsOnBackground/types.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleCardAlign = exports.BackgroundColor = void 0;
+var BackgroundColor = exports.BackgroundColor = {
+  GRAY: 'gray',
+  GREEN: 'green',
+  BLUE: 'blue',
+  VIOLET: 'violet'
+};
+var SingleCardAlign = exports.SingleCardAlign = {
+  LEFT: 'left',
+  CENTER: 'center'
+};

package/dist/lib/components/CardsOnBackground/useUniformHeights.d.ts

@@ -0,0 +1,9 @@
+type UseUniformHeightsOptions = {
+    disabled?: boolean;
+};
+type UseUniformHeightsReturnType = {
+    maxHeight: number;
+    getRef: (index: number) => (element: HTMLElement | null) => void;
+};
+declare const useUniformHeights: (itemsCount: number, options?: UseUniformHeightsOptions) => UseUniformHeightsReturnType;
+export default useUniformHeights;

package/dist/lib/components/CardsOnBackground/useUniformHeights.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _react = _interopRequireDefault(require("react"));
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../hooks/useIsomorphicLayoutEffect"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var useUniformHeights = function useUniformHeights(itemsCount) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$disabled = options.disabled,
+    disabled = _options$disabled === void 0 ? false : _options$disabled;
+  var _React$useState = _react["default"].useState(0),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    maxHeight = _React$useState2[0],
+    setMaxHeight = _React$useState2[1];
+  var refs = _react["default"].useRef([]);
+  var observerRef = _react["default"].useRef(null);
+  var maxHeightRef = _react["default"].useRef(maxHeight);
+  var updateMaxHeight = _react["default"].useCallback(function () {
+    if (disabled) {
+      return;
+    }
+    var heights = refs.current.map(function (ref) {
+      return (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0;
+    });
+    var newMaxHeight = Math.ceil(Math.max.apply(Math, (0, _toConsumableArray2["default"])(heights).concat([0])));
+    if (newMaxHeight !== maxHeightRef.current) {
+      maxHeightRef.current = newMaxHeight;
+      setMaxHeight(newMaxHeight);
+    }
+  }, [disabled]);
+  (0, _useIsomorphicLayoutEffect["default"])(function () {
+    if (disabled) {
+      return undefined;
+    }
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver(function () {
+        requestAnimationFrame(function () {
+          updateMaxHeight();
+        });
+      });
+    }
+    return function () {
+      var _a;
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+    };
+  }, [disabled, updateMaxHeight]);
+  (0, _useIsomorphicLayoutEffect["default"])(function () {
+    var _a;
+    if (disabled) {
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+      maxHeightRef.current = 0;
+      setMaxHeight(0);
+      return;
+    }
+    var observer = observerRef.current;
+    if (!observer) {
+      return;
+    }
+    observer.disconnect();
+    refs.current.forEach(function (ref) {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+    updateMaxHeight();
+  }, [itemsCount, disabled, updateMaxHeight]);
+  var getRef = _react["default"].useCallback(function (index) {
+    return function (element) {
+      var observer = observerRef.current;
+      var oldElement = refs.current[index];
+      if (oldElement && observer) {
+        observer.unobserve(oldElement);
+      }
+      refs.current[index] = element;
+      if (element && observer && !disabled) {
+        observer.observe(element);
+      }
+    };
+  }, [disabled]);
+  return {
+    maxHeight: maxHeight,
+    getRef: getRef
+  };
+};
+var _default = exports["default"] = useUniformHeights;