@megafon/ui-core 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.0.0...@megafon/ui-core@2.1.0) (2021-12-07)
+
+
+### Bug Fixes
+
+* **button:** fix rendering difference on client and server side ([323287e](https://github.com/MegafonWebLab/megafon-ui/commit/323287ea040716b9200bbaa5112f277427015598))
+* **contentarea:** fix prop type ([3e4114d](https://github.com/MegafonWebLab/megafon-ui/commit/3e4114dbd2d8a446a1247528fbf5464706bb4d4a))
+* **textfield:** fix rendering difference on client and server side ([4d26cac](https://github.com/MegafonWebLab/megafon-ui/commit/4d26cac90002692d7c404f9180310261e9a0e567))
+
+
+### Features
+
+* **tabs:** add renderOnlyCurrentPanel props ([0241f6c](https://github.com/MegafonWebLab/megafon-ui/commit/0241f6c9ed4ebb5132b38204612bcff095302822))
+* **ui-core:** fix mixin ([8e0f401](https://github.com/MegafonWebLab/megafon-ui/commit/8e0f401973d758821ee32ca2af1a714f3bca8b01))
+* **ui-core:** fix some mixins and variables ([be0462e](https://github.com/MegafonWebLab/megafon-ui/commit/be0462ed3bdcbc1e72d83b749723cf7b896f0846))
+
+
+
+
+
 # [2.0.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.0.0-beta.169...@megafon/ui-core@2.0.0) (2021-11-30)
 
 

package/dist/es/components/Button/Button.js

@@ -2,6 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.is-array";
 import "core-js/modules/es.object.values";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
@@ -82,9 +83,12 @@ var Button = function Button(_ref) {
       onClick = _ref.onClick,
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
-  var isTouch = React.useMemo(function () {
-    return detectTouch();
-  }, []);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
+
   var ElementType = href ? 'a' : 'button';
   var handleClick = React.useCallback(function (e) {
     if (disabled) {
@@ -167,6 +171,9 @@ var Button = function Button(_ref) {
   };
 
   var classNameValue = Array.isArray(className) ? [].concat(_toConsumableArray(className), [rootClassName]) : [className, rootClassName];
+  React.useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
     className: cn({
       type: type,
@@ -183,7 +190,7 @@ var Button = function Button(_ref) {
       'content-type': contentType
     }, classNameValue),
     href: href,
-    download: href && download,
+    download: !!href && download,
     target: href ? target : undefined,
     rel: setRelAttribute(),
     type: href ? undefined : actionType,

package/dist/es/components/ContentArea/ContentArea.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    WHITE: string;
-    TRANSPARENT: string;
-    GREEN: string;
-    PURPLE: string;
-    SPB_SKY_0: string;
-    SPB_SKY_1: string;
-    SPB_SKY_2: string;
-    FRESH_ASPHALT: string;
-    FULL_BLACK: string;
+    readonly WHITE: "white";
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+    readonly FRESH_ASPHALT: "freshAsphalt";
+    readonly FULL_BLACK: "fullBlack";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

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

@@ -7,6 +7,8 @@ export interface ITabProps extends IFilterDataAttrs {
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */
     renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
 }

package/dist/es/components/Tabs/Tabs.d.ts

@@ -39,6 +39,8 @@ export interface ITabsProps {
     currentIndex?: number;
     /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
     defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/es/components/Tabs/Tabs.js

@@ -64,6 +64,8 @@ var Tabs = function Tabs(_ref) {
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
+      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
@@ -219,11 +221,18 @@ var Tabs = function Tabs(_ref) {
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cn('panel', {
-          current: currentIndex === i
+          current: isCurrentPanel
         })
-      }, child);
+      }, panel);
     });
   }, [children, currentIndex]);
   var handleReachBeginning = React.useCallback(function (swiper) {
@@ -371,6 +380,7 @@ Tabs.propTypes = {
   sticky: PropTypes.bool,
   currentIndex: PropTypes.number,
   defaultIndex: PropTypes.number,
+  renderOnlyCurrentPanel: PropTypes.bool,
   onTabClick: PropTypes.func
 };
 export default Tabs;

package/dist/es/components/TextField/TextField.js

@@ -125,6 +125,11 @@ var TextField = function TextField(_ref) {
       isMaxLimitExceeded = _useState10[0],
       setIsMaxLimitExceeded = _useState10[1];
 
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isTouch = _useState12[0],
+      setTouch = _useState12[1];
+
   var fieldNode = useRef();
   var isPasswordType = useMemo(function () {
     return type === 'password';
@@ -132,9 +137,6 @@ var TextField = function TextField(_ref) {
   var isVisiblePassword = useMemo(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
-  var isTouch = useMemo(function () {
-    return detectTouch();
-  }, []);
   var checkSymbolMaxLimit = useCallback(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -148,6 +150,9 @@ var TextField = function TextField(_ref) {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit]);
+  useEffect(function () {
+    setTouch(detectTouch());
+  }, []);
   var togglePasswordHiding = useCallback(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;

package/dist/lib/components/Button/Button.js

@@ -15,6 +15,8 @@ require("core-js/modules/es.object.values");
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -108,9 +110,10 @@ var Button = function Button(_ref) {
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
 
-  var isTouch = _react["default"].useMemo(function () {
-    return (0, _uiHelpers.detectTouch)();
-  }, []);
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
 
   var ElementType = href ? 'a' : 'button';
 
@@ -201,6 +204,11 @@ var Button = function Button(_ref) {
   };
 
   var classNameValue = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(className), [rootClassName]) : [className, rootClassName];
+
+  _react["default"].useEffect(function () {
+    setTouch((0, _uiHelpers.detectTouch)());
+  }, []);
+
   return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn({
       type: type,
@@ -217,7 +225,7 @@ var Button = function Button(_ref) {
       'content-type': contentType
     }, classNameValue),
     href: href,
-    download: href && download,
+    download: !!href && download,
     target: href ? target : undefined,
     rel: setRelAttribute(),
     type: href ? undefined : actionType,

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    WHITE: string;
-    TRANSPARENT: string;
-    GREEN: string;
-    PURPLE: string;
-    SPB_SKY_0: string;
-    SPB_SKY_1: string;
-    SPB_SKY_2: string;
-    FRESH_ASPHALT: string;
-    FULL_BLACK: string;
+    readonly WHITE: "white";
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+    readonly FRESH_ASPHALT: "freshAsphalt";
+    readonly FULL_BLACK: "fullBlack";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

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

@@ -7,6 +7,8 @@ export interface ITabProps extends IFilterDataAttrs {
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */
     renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
 }

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

@@ -39,6 +39,8 @@ export interface ITabsProps {
     currentIndex?: number;
     /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
     defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

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

@@ -94,6 +94,8 @@ var Tabs = function Tabs(_ref) {
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
+      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
@@ -248,11 +250,18 @@ var Tabs = function Tabs(_ref) {
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cn('panel', {
-          current: currentIndex === i
+          current: isCurrentPanel
         })
-      }, child);
+      }, panel);
     });
   }, [children, currentIndex]);
   var handleReachBeginning = React.useCallback(function (swiper) {
@@ -400,6 +409,7 @@ Tabs.propTypes = {
   sticky: _propTypes["default"].bool,
   currentIndex: _propTypes["default"].number,
   defaultIndex: _propTypes["default"].number,
+  renderOnlyCurrentPanel: _propTypes["default"].bool,
   onTabClick: _propTypes["default"].func
 };
 var _default = Tabs;

package/dist/lib/components/TextField/TextField.js

@@ -150,6 +150,11 @@ var TextField = function TextField(_ref) {
       isMaxLimitExceeded = _useState10[0],
       setIsMaxLimitExceeded = _useState10[1];
 
+  var _useState11 = (0, React.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isTouch = _useState12[0],
+      setTouch = _useState12[1];
+
   var fieldNode = (0, React.useRef)();
   var isPasswordType = (0, React.useMemo)(function () {
     return type === 'password';
@@ -157,9 +162,6 @@ var TextField = function TextField(_ref) {
   var isVisiblePassword = (0, React.useMemo)(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
-  var isTouch = (0, React.useMemo)(function () {
-    return (0, _uiHelpers.detectTouch)();
-  }, []);
   var checkSymbolMaxLimit = (0, React.useCallback)(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -173,6 +175,9 @@ var TextField = function TextField(_ref) {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit]);
+  (0, React.useEffect)(function () {
+    setTouch((0, _uiHelpers.detectTouch)());
+  }, []);
   var togglePasswordHiding = (0, React.useCallback)(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "files": [
     "dist",
     "styles"
@@ -95,5 +95,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "7f552b59c6bfc912d14a39c4564995685c18d4f5"
+  "gitHead": "42bd6840a217196ba9e80c6c77f92f5951881c12"
 }

package/styles/base.less

@@ -1,5 +1,3 @@
-@class-prefix: 'mfui';
-
 // Basic Colors
 @green: #00B956;
 @purple: #731982;
@@ -107,6 +105,20 @@
     font-family: Graphik, Arial, sans-serif;
 }
 
+.fontFamily() {
+    font-family: inherit;
+}
+
+.commonFont() {
+    font-size: 15px;
+    line-height: 24px;
+}
+
+.smallFont() {
+    font-size: 12px;
+    line-height: 16px;
+}
+
 h1,
 h2,
 h3,
@@ -115,6 +127,26 @@ h5 {
     margin: 0;
 }
 
+.h1() {
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: 0.5px;
+
+    @media @mobileB {
+        font-size: 36px;
+        line-height: 40px;
+    }
+    @media @desktop {
+        font-size: 44px;
+        line-height: 48px;
+    }
+    @media @desktopMU {
+        font-size: 52px;
+        line-height: 56px;
+    }
+}
+
 .h2() {
     font-weight: 600;
     font-size: 22px;
@@ -157,7 +189,7 @@ h5 {
     font-weight: 400;
 }
 
-.p-indents() {
+.pIndents() {
     margin-top: 0;
     margin-bottom: 16px;
 
@@ -166,7 +198,7 @@ h5 {
     }
 }
 
-.default-link() {
+.link() {
     color: @link;
     text-decoration: none;
 
@@ -174,17 +206,3 @@ h5 {
         text-decoration: underline;
     }
 }
-
-.fontFamily() {
-    font-family: inherit;
-}
-
-.commonFont() {
-    font-size: 15px;
-    line-height: 24px;
-}
-
-.smallFont() {
-    font-size: 12px;
-    line-height: 16px;
-}