@skbkontur/react-ui 0.0.0-dd8159fe6c → 0.0.0-ecefada396

package/components/SidePage/SidePageFooter/SidePageFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["React","LayoutEvents","ThemeContext","CommonWrapper","cx","responsiveLayout","styles","SidePageContext","SidePageFooter","context","isMobileLayout","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","render","renderMain","height","getContentHeight","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","mobileFooterContent","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private wrapper: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()} ref={this.refWrapper}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private refWrapper = (node: HTMLElement | null) => {\n    this.wrapper = node;\n  };\n\n  private setProperStyles = () => {\n    if (this.wrapper && this.content) {\n      const wrapperRect = this.wrapper.getBoundingClientRect();\n      const contentRect = this.content.getBoundingClientRect();\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return this.content.getBoundingClientRect().height;\n  }\n}\n"]}

package/components/SidePage/SidePageFooter/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePageFooter.js",
+  "module": "SidePageFooter",
+  "types": "../SidePageFooter.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePageFooter.d.ts

@@ -1,31 +1,40 @@
-import * as React from 'react';
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { SidePageContextType } from './SidePageContext';
-export interface SidePageFooterProps {
+export interface SidePageFooterProps extends CommonProps {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
-    context?: SidePageContextType;
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    sticky?: boolean;
 }
 /**
- * Футер модального окна.
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
  */
 export declare class SidePageFooter extends React.Component<SidePageFooterProps> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private isMobileLayout;
     state: {
         fixed: boolean;
     };
+    private theme;
     private content;
     private wrapper;
     private layoutSub;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
     componentWillUnmount(): void;
+    getSticky(): boolean;
     render(): JSX.Element;
     update: () => void;
+    private renderMain;
     private refContent;
     private refWrapper;
     private setProperStyles;
     private getContentHeight;
 }
-export declare const SidePageFooterWithContext: (props: SidePageFooterProps) => JSX.Element;
-export default SidePageFooterWithContext;

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { Sticky } from "../../Sticky";
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { isFunction } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { responsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../SidePage.styles";
+import { SidePageContext } from "../SidePageContext";
+export
+/**
+* Шапка сайдпейджа
+*
+* @visibleName SidePage.Header
+*/
+var SidePageHeader = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SidePageHeader, _React$Component);
+
+  function SidePageHeader() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.context = _this.context;
+    _this.isMobileLayout = void 0;
+    _this.state = {
+      isReadyToFix: false,
+      focusedByTab: false
+    };
+    _this.theme = void 0;
+    _this.wrapper = null;
+    _this.lastRegularHeight = 0;
+
+    _this.componentDidMount = function () {
+      window.addEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+    };
+
+    _this.componentWillUnmount = function () {
+      window.removeEventListener('scroll', _this.update, true);
+      _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+    };
+
+    _this.update = function () {
+      _this.updateReadyToFix();
+    };
+
+    _this.renderHeader = function (fixed) {
+      var _cx, _cx2;
+
+      if (fixed === void 0) {
+        fixed = false;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx))
+      }, _this.renderClose(fixed), /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[styles.titleFixed()] = fixed, _cx2))
+      }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children));
+    };
+
+    _this.renderClose = function (fixed) {
+      var _cx3;
+
+      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3))
+      }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
+        var _cx4;
+
+        var requestClose = _ref.requestClose;
+        var button = /*#__PURE__*/React.createElement("button", {
+          className: cx(styles.close(_this.theme), (_cx4 = {}, _cx4[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4[styles.mobileClose(_this.theme)] = _this.isMobileLayout, _cx4)),
+          onFocus: _this.handleFocus,
+          onBlur: _this.handleBlur,
+          onClick: requestClose,
+          "data-tid": "SidePage__close",
+          tabIndex: 0
+        }, /*#__PURE__*/React.createElement(CrossIcon, null));
+
+        if (_this.isMobileLayout) {
+          return button;
+        }
+
+        return /*#__PURE__*/React.createElement(Sticky, {
+          side: "top",
+          offset: stickyOffset
+        }, button);
+      }));
+    };
+
+    _this.updateReadyToFix = function () {
+      if (_this.wrapper) {
+        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
+
+        var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
+
+        _this.setState(function (state) {
+          return state.isReadyToFix !== isReadyToFix ? _extends({}, state, {
+            isReadyToFix: isReadyToFix
+          }) : state;
+        });
+      }
+    };
+
+    _this.wrapperRef = function (el) {
+      _this.wrapper = el;
+    };
+
+    _this.handleFocus = function () {
+      requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
+          _this.setState({
+            focusedByTab: true
+          });
+        }
+      });
+    };
+
+    _this.handleBlur = function () {
+      _this.setState({
+        focusedByTab: false
+      });
+    };
+
+    return _this;
+  }
+
+  var _proto = SidePageHeader.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.getStickyProp = function getStickyProp() {
+    if (typeof this.props.sticky !== 'undefined') {
+      return this.props.sticky;
+    }
+
+    if (this.isMobileLayout) {
+      return false;
+    }
+
+    return true;
+  };
+
+  _proto.renderMain = function renderMain() {
+    var isReadyToFix = this.state.isReadyToFix;
+    var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;
+    var isStickyMobile = this.isMobileLayout && this.getStickyProp();
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+      ref: this.wrapperRef,
+      className: styles.headerWrapper()
+    }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
+      side: "top"
+    }, this.renderHeader) : this.renderHeader()));
+  };
+
+  _createClass(SidePageHeader, [{
+    key: "regularHeight",
+    get: function get() {
+      var isReadyToFix = this.state.isReadyToFix;
+
+      if (!this.wrapper) {
+        return 0;
+      }
+
+      if (!isReadyToFix) {
+        this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;
+      }
+
+      return this.lastRegularHeight;
+    }
+  }, {
+    key: "fixedHeaderHeight",
+    get: function get() {
+      var theme = this.theme;
+      return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;
+    }
+  }]);
+
+  return SidePageHeader;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = SidePageContext, _temp)) || _class;

package/components/SidePage/SidePageHeader/SidePageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","styles","SidePageContext","SidePageHeader","context","isMobileLayout","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","mobileHeader","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","requestClose","button","close","closeFocus","mobileClose","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","sticky","isStickyDesktop","isStickyMobile","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        <SidePageContext.Consumer>\n          {({ requestClose }) => {\n            const button = (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                  [styles.mobileClose(this.theme)]: this.isMobileLayout,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            );\n\n            if (this.isMobileLayout) {\n              return button;\n            }\n\n            return (\n              <Sticky side=\"top\" offset={stickyOffset}>\n                {button}\n              </Sticky>\n            );\n          }}\n        </SidePageContext.Consumer>\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}

package/components/SidePage/SidePageHeader/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePageHeader.js",
+  "module": "SidePageHeader",
+  "types": "../SidePageHeader.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePageHeader.d.ts

@@ -1,23 +1,40 @@
-import * as React from 'react';
-export interface SidePageHeaderProps {
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageHeaderProps extends CommonProps {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+    sticky?: boolean;
 }
 export interface SidePageHeaderState {
     isReadyToFix: boolean;
+    focusedByTab: boolean;
 }
-export default class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
-    state: {
-        isReadyToFix: boolean;
-    };
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */
+export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private isMobileLayout;
+    state: SidePageHeaderState;
+    private theme;
     private wrapper;
     private lastRegularHeight;
-    readonly regularHeight: number;
+    get regularHeight(): number;
+    get fixedHeaderHeight(): number;
     componentDidMount: () => void;
     componentWillUnmount: () => void;
     update: () => void;
     render(): JSX.Element;
+    getStickyProp(): boolean;
+    private renderMain;
     private renderHeader;
     private renderClose;
     private updateReadyToFix;
     private wrapperRef;
+    private handleFocus;
+    private handleBlur;
 }

package/components/SidePage/index/index.js

@@ -0,0 +1,5 @@
+export * from "../SidePage";
+export * from "../SidePageHeader";
+export * from "../SidePageBody";
+export * from "../SidePageFooter";
+export * from "../SidePageContainer";

package/components/SidePage/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,kBAAd;AACA,cAAc,gBAAd;AACA,cAAc,kBAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './SidePage';\nexport * from './SidePageHeader';\nexport * from './SidePageBody';\nexport * from './SidePageFooter';\nexport * from './SidePageContainer';\n"]}

package/components/SidePage/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/index.d.ts

@@ -1 +1,5 @@
-export { default, SidePageProps, SidePageState } from './SidePage';
+export * from './SidePage';
+export * from './SidePageHeader';
+export * from './SidePageBody';
+export * from './SidePageFooter';
+export * from './SidePageContainer';

package/components/SidePage/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/SidePage/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Spinner/Spinner/Spinner.js

@@ -0,0 +1,97 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { locale } from "../../../lib/locale/decorators";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { SpinnerIcon } from "../../../internal/icons/SpinnerIcon";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Spinner.styles";
+import { SpinnerLocaleHelper } from "../locale";
+var types = {
+  big: 'big',
+  mini: 'mini',
+  normal: 'normal'
+};
+export
+/**
+* DRAFT - инлайн-лоадер
+*/
+var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Spinner, _React$Component);
+
+  function Spinner(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.theme = void 0;
+    _this.locale = void 0;
+
+    _this.renderSpinner = function (type, dimmed, inline) {
+      var circleClassName = dimmed ? styles.circleDimmed(_this.theme) : styles.circle(_this.theme);
+      return /*#__PURE__*/React.createElement(SpinnerIcon, {
+        size: type,
+        className: circleClassName,
+        dimmed: dimmed,
+        inline: inline
+      });
+    };
+
+    _this.renderCaption = function (type, caption) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: cx(styles[type](_this.theme), styles.captionColor(_this.theme))
+      }, caption);
+    };
+
+    return _this;
+  }
+
+  var _proto = Spinner.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this$props = this.props,
+        type = _this$props.type,
+        _this$props$caption = _this$props.caption,
+        caption = _this$props$caption === void 0 ? this.locale.loading : _this$props$caption,
+        dimmed = _this$props.dimmed,
+        inline = _this$props.inline;
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+      className: styles.spinner()
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.inner()
+    }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));
+  };
+
+  return Spinner;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = {
+  /**
+  * Текст рядом с мини-лоадером.
+  *
+  * 'Загрузка' - значение по-умолчанию
+  */
+  caption: PropTypes.node,
+  dimmed: PropTypes.bool,
+
+  /**
+  * Тип спиннера: mini, normal, big
+  *
+  * Значение по-умолчанию - normal
+  *
+  * Spinner.types - все доступные типы
+  */
+  type: PropTypes.oneOf(Object.keys(types))
+}, _class2.defaultProps = {
+  type: 'normal'
+}, _class2.Types = types, _temp)) || _class);

package/components/Spinner/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","styles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","props","theme","renderSpinner","type","dimmed","inline","circleClassName","circleDimmed","circle","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\n  /**\n   * Тип спиннера\n   * @default normal\n   */\n  type: SpinnerType;\n  inline?: boolean;\n}\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n\n  constructor(props: SpinnerProps) {\n    super(props);\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { type, caption = this.locale.loading, dimmed, inline } = this.props;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    const circleClassName = dimmed ? styles.circleDimmed(this.theme) : styles.circle(this.theme);\n\n    return <SpinnerIcon size={type} className={circleClassName} dimmed={dimmed} inline={inline} />;\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}

package/components/Spinner/Spinner/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Spinner/Spinner.js",
+  "module": "Spinner",
+  "types": "../Spinner.d.ts",
+  "sideEffects": false
+}

package/components/Spinner/Spinner.d.ts

@@ -1,19 +1,23 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { types } from './settings';
-export declare const SpinnerConfig: {
-    hasSvgAnimationSupport: boolean;
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+declare const types: Record<SpinnerType, SpinnerType>;
 export declare type SpinnerType = 'mini' | 'normal' | 'big';
-export interface SpinnerProps {
+export interface SpinnerProps extends CommonProps {
     caption?: React.ReactNode;
     dimmed?: boolean;
-    type?: SpinnerType;
+    /**
+     * Тип спиннера
+     * @default normal
+     */
+    type: SpinnerType;
+    inline?: boolean;
 }
 /**
  * DRAFT - инлайн-лоадер
  */
-declare class Spinner extends React.Component<SpinnerProps> {
+export declare class Spinner extends React.Component<SpinnerProps> {
+    static __KONTUR_REACT_UI__: string;
     static propTypes: {
         /**
          * Текст рядом с мини-лоадером.
@@ -31,15 +35,14 @@ declare class Spinner extends React.Component<SpinnerProps> {
          */
         type: PropTypes.Requireable<string>;
     };
-    static defaultProps: {
-        type: SpinnerType;
-    };
+    static defaultProps: SpinnerProps;
     static Types: typeof types;
+    private theme;
     private readonly locale;
+    constructor(props: SpinnerProps);
     render(): JSX.Element;
-    private _renderCloud;
-    private _renderCircle;
-    private _renderSpinner;
-    private _renderCaption;
+    private renderMain;
+    private renderSpinner;
+    private renderCaption;
 }
-export default Spinner;
+export {};

package/components/Spinner/Spinner.md

@@ -0,0 +1,34 @@
+```jsx harmony
+import { Gapped, Spinner } from '@skbkontur/react-ui';
+
+const reactNodeCaption = (
+  <div>
+    <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
+    агрузка ...
+  </div>
+);
+
+<Gapped>
+  <Spinner type="big" caption="big" />
+  <Spinner type="normal" caption="normal" />
+  <Spinner type="mini" caption="mini" />
+  <Spinner type="mini" dimmed caption="mini dimmed" />
+  <Spinner type="big" caption={reactNodeCaption} />
+</Gapped>;
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface SpinnerLocale {
+  loading?: React.ReactNode;
+}
+
+const ru_RU = {
+  loading: 'Загрузка',
+};
+
+const en_GB = {
+  loading: 'Loading',
+};
+```

package/components/Spinner/Spinner.styles/Spinner.styles.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { AnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
+import { isIE11 } from "../../../lib/client";
+export var styles = memoizeStyle({
+  circle: function circle(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite,\n            " + AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
+  },
+  circleDimmed: function circleDimmed(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerDimmedColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite;\n        ");
+  },
+  captionColor: function captionColor(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.spinnerCaptionColor);
+  },
+  inline: function inline() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      font-size: inherit;\n      line-height: inherit;\n    "])));
+  },
+  mini: function mini(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
+  },
+  normal: function normal(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
+  },
+  big: function big(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
+  },
+  spinner: function spinner() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
+  },
+  inner: function inner() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  }
+});