@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { matchMediaSSRSafe } from "../../../lib/SSRSafe";
+import { canUseDOM } from "../../../lib/client";
+export var eventListenersMap = new Map();
+export function addResponsiveLayoutListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    addCallbackToMQListener(mediaQuery, callback);
+  } else {
+    createMQListener(mediaQuery, callback);
+  }
+
+  return {
+    remove: function remove() {
+      removeCallbackFromMQListener(mediaQuery, callback);
+    }
+  };
+}
+
+function addCallbackToMQListener(mediaQuery, callback) {
+  var eventListener = eventListenersMap.get(mediaQuery);
+
+  if (eventListener) {
+    eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+      listeners: [].concat(eventListener.listeners, [callback])
+    }));
+  }
+}
+
+function createMQListener(mediaQuery, callback) {
+  var mql = matchMediaSSRSafe(mediaQuery);
+
+  if (mql) {
+    var newMediaQueryInfo = {
+      mql: mql,
+      listeners: [callback]
+    };
+    eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+
+    if (mql.addEventListener) {
+      mql.addEventListener('change', changeCallback);
+    } else {
+      mql.addListener(changeCallback);
+    }
+  }
+}
+
+function removeCallbackFromMQListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    var eventListener = eventListenersMap.get(mediaQuery);
+
+    if (eventListener) {
+      var newListeners = eventListener.listeners.filter(function (listener) {
+        return listener !== callback;
+      });
+
+      if (newListeners.length === 0) {
+        if (eventListener.mql.removeEventListener) {
+          eventListener.mql.removeEventListener('change', changeCallback);
+        } else {
+          eventListener.mql.removeListener(changeCallback);
+        }
+
+        eventListenersMap["delete"](mediaQuery);
+        return;
+      }
+
+      eventListenersMap.set(mediaQuery, _extends({}, eventListener, {
+        listeners: [].concat(newListeners)
+      }));
+    }
+  }
+}
+
+export function checkMatches(mediaQuery) {
+  var _eventListener$mql$ma;
+
+  if (!canUseDOM) {
+    return false;
+  }
+
+  if (!eventListenersMap.has(mediaQuery)) {
+    var _matchMediaSSRSafe;
+
+    return !!((_matchMediaSSRSafe = matchMediaSSRSafe(mediaQuery)) != null && _matchMediaSSRSafe.matches);
+  }
+
+  var eventListener = eventListenersMap.get(mediaQuery);
+  return (_eventListener$mql$ma = eventListener == null ? void 0 : eventListener.mql.matches) != null ? _eventListener$mql$ma : false;
+}
+
+function changeCallback(e) {
+  var eventListener = eventListenersMap.get(e.media);
+
+  if (eventListener) {
+    eventListener.listeners.forEach(function (listener) {
+      listener(e);
+    });
+  }
+}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["matchMediaSSRSafe","canUseDOM","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { matchMediaSSRSafe } from '../../lib/SSRSafe';\nimport { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = matchMediaSSRSafe(mediaQuery);\n  if (mql) {\n    const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n    eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n    if (mql.addEventListener) {\n      mql.addEventListener('change', changeCallback);\n    } else {\n      mql.addListener(changeCallback);\n    }\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!matchMediaSSRSafe(mediaQuery)?.matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}

package/components/ResponsiveLayout/ResponsiveLayoutEvents/package.json

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

package/components/ResponsiveLayout/ResponsiveLayoutEvents.d.ts

@@ -0,0 +1,11 @@
+interface mediaQueryData {
+    mql: MediaQueryList;
+    listeners: Array<(e: MediaQueryListEvent) => void>;
+}
+export interface listenerToken {
+    remove: () => void;
+}
+export declare const eventListenersMap: Map<string, mediaQueryData>;
+export declare function addResponsiveLayoutListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
+export declare function checkMatches(mediaQuery: string): boolean;
+export {};

package/components/ResponsiveLayout/decorator/decorator.js

@@ -0,0 +1,61 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { ResponsiveLayout } from "../ResponsiveLayout";
+export function responsiveLayout(WrappedComp) {
+  var ComponentWithLayout = /*#__PURE__*/function (_WrappedComp) {
+    _inheritsLoose(ComponentWithLayout, _WrappedComp);
+
+    function ComponentWithLayout() {
+      var _this;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _WrappedComp.call.apply(_WrappedComp, [this].concat(args)) || this;
+
+      _this.renderWithLayout = function (currentLayout) {
+        _this.layout = currentLayout;
+        return _WrappedComp.prototype.render.call(_assertThisInitialized(_this));
+      };
+
+      return _this;
+    }
+
+    var _proto = ComponentWithLayout.prototype;
+
+    _proto.render = function render() {
+      return /*#__PURE__*/React.createElement(ResponsiveLayout, null, this.renderWithLayout);
+    };
+
+    _createClass(ComponentWithLayout, [{
+      key: "currentLayout",
+      get: function get() {
+        return this.layout;
+      },
+      set: function set(value) {//
+      }
+    }, {
+      key: "isMobileLayout",
+      get: function get() {
+        return this.layout.isMobile;
+      },
+      set: function set(value) {//
+      }
+    }]);
+
+    return ComponentWithLayout;
+  }(WrappedComp);
+
+  var nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');
+
+  if (!nameDescriptor || nameDescriptor.configurable) {
+    Object.defineProperty(ComponentWithLayout, 'name', {
+      value: WrappedComp.name
+    });
+  }
+
+  return ComponentWithLayout;
+}

package/components/ResponsiveLayout/decorator/decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["decorator.tsx"],"names":["React","ResponsiveLayout","responsiveLayout","WrappedComp","ComponentWithLayout","renderWithLayout","currentLayout","layout","render","value","isMobile","nameDescriptor","Object","getOwnPropertyDescriptor","configurable","defineProperty","name"],"mappings":"8NAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,gBAAT,QAAiC,oBAAjC;;;AAGA,OAAO,SAASC,gBAAT,CAA6EC,WAA7E,EAA6F;AAClG,MAAMC,mBAAmB;;;;;;;;;;;;;;;;;;;AAmBhBC,MAAAA,gBAnBgB,GAmBG,UAACC,aAAD,EAA0C;AAClE,cAAKC,MAAL,GAAcD,aAAd;;AAEA,sCAAaE,MAAb;AACD,OAvBsB;;AAyBhBA,IAAAA,MAzBgB,GAyBvB,kBAAgB;AACd,0BAAO,oBAAC,gBAAD,QAAmB,KAAKH,gBAAxB,CAAP;AACD,KA3BsB,iEAGvB,eAAkD,CAChD,OAAO,KAAKE,MAAZ,CACD,CALsB,OAOvB,aAAyBE,KAAzB,EAAuD,CACrD;AACD,OATsB,kCAWvB,eAAqC,CACnC,OAAO,KAAKF,MAAL,CAAYG,QAAnB,CACD,CAbsB,OAevB,aAA0BD,KAA1B,EAA0C,CACxC;AACD,OAjBsB,kCAAiBN,WAAjB,CAAzB;AA8BA,MAAMQ,cAAc,GAAGC,MAAM,CAACC,wBAAP,CAAgCT,mBAAhC,EAAqD,MAArD,CAAvB;;AAEA,MAAI,CAACO,cAAD,IAAmBA,cAAc,CAACG,YAAtC,EAAoD;AAClDF,IAAAA,MAAM,CAACG,cAAP,CAAsBX,mBAAtB,EAA2C,MAA3C,EAAmD,EAAEK,KAAK,EAAEN,WAAW,CAACa,IAArB,EAAnD;AACD;;AAED,SAAOZ,mBAAP;AACD","sourcesContent":["import React from 'react';\n\nimport { ResponsiveLayout } from './ResponsiveLayout';\nimport { ResponsiveLayoutFlags } from './types';\n\nexport function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T) {\n  const ComponentWithLayout = class extends WrappedComp {\n    public layout!: ResponsiveLayoutFlags;\n\n    public get currentLayout(): ResponsiveLayoutFlags {\n      return this.layout;\n    }\n\n    public set currentLayout(value: ResponsiveLayoutFlags) {\n      //\n    }\n\n    public get isMobileLayout(): boolean {\n      return this.layout.isMobile;\n    }\n\n    public set isMobileLayout(value: boolean) {\n      //\n    }\n\n    public renderWithLayout = (currentLayout: ResponsiveLayoutFlags) => {\n      this.layout = currentLayout;\n\n      return super.render();\n    };\n\n    public render() {\n      return <ResponsiveLayout>{this.renderWithLayout}</ResponsiveLayout>;\n    }\n  };\n\n  const nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');\n\n  if (!nameDescriptor || nameDescriptor.configurable) {\n    Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });\n  }\n\n  return ComponentWithLayout;\n}\n"]}

package/components/ResponsiveLayout/decorator/package.json

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

package/components/ResponsiveLayout/decorator.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ResponsiveLayoutFlags } from './types';
+export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
+    new (...args: any[]): {
+        layout: ResponsiveLayoutFlags;
+        currentLayout: ResponsiveLayoutFlags<import("./types").EmptyObject>;
+        isMobileLayout: boolean;
+        renderWithLayout: (currentLayout: ResponsiveLayoutFlags) => React.ReactNode;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+} & T;

package/components/ResponsiveLayout/index/index.js

@@ -0,0 +1,3 @@
+export * from "../ResponsiveLayout";
+export * from "../useResponsiveLayout";
+export * from "../types";

package/components/ResponsiveLayout/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAd;AACA,cAAc,uBAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './ResponsiveLayout';\nexport * from './useResponsiveLayout';\nexport * from './types';\n"]}

package/components/ResponsiveLayout/index/package.json

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

package/components/ResponsiveLayout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ResponsiveLayout';
+export * from './useResponsiveLayout';
+export * from './types';

package/components/ResponsiveLayout/package.json

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

package/components/ResponsiveLayout/types/package.json

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

package/components/ResponsiveLayout/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/ResponsiveLayout/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/ResponsiveLayout/types.d.ts

@@ -0,0 +1,11 @@
+export declare type MediaQueriesType = Record<string, string>;
+export declare type EmptyObject = Record<never, never>;
+export interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {
+    customMediaQueries?: MQ;
+}
+export declare type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {
+    [K in keyof T]?: boolean;
+} & ResponsiveLayoutFlagsInternal;
+export interface ResponsiveLayoutFlagsInternal {
+    isMobile: boolean;
+}

package/components/ResponsiveLayout/useResponsiveLayout/package.json

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

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { addResponsiveLayoutListener, checkMatches } from "../ResponsiveLayoutEvents";
+export function useResponsiveLayout(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      customMediaQueries = _ref.customMediaQueries;
+
+  var theme = useContext(ThemeContext);
+  var allMediaQueries = Object.entries(_extends({
+    isMobile: theme.mobileMediaQuery
+  }, customMediaQueries)).map(function (_ref2) {
+    var key = _ref2[0],
+        value = _ref2[1];
+    return {
+      flag: key,
+      query: value,
+      ref: /*#__PURE__*/createRef()
+    };
+  });
+
+  var getLayoutFromGlobal = function getLayoutFromGlobal() {
+    return allMediaQueries.reduce(function (result, mediaQuery) {
+      var _Object$assign;
+
+      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(mediaQuery.query), _Object$assign));
+    }, {});
+  };
+
+  var _useState = useState(getLayoutFromGlobal()),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var prepareMediaQueries = useCallback(function () {
+    if (!theme) {
+      return;
+    }
+
+    allMediaQueries.forEach(function (mediaQuery) {
+      return mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries);
+    }); // Checking for SSR use case
+
+    var globalLayout = getLayoutFromGlobal();
+    var hasChangedQuery = Object.entries(globalLayout).find(function (_ref3) {
+      var key = _ref3[0],
+          value = _ref3[1];
+      return state[key] !== value;
+    });
+
+    if (hasChangedQuery) {
+      setState(globalLayout);
+    }
+  }, [theme]);
+  var checkLayoutsMediaQueries = useCallback(function (e) {
+    if (!theme) {
+      return;
+    }
+
+    allMediaQueries.forEach(function (mediaQuery) {
+      if (e.media === mediaQuery.query) {
+        setState(function (prevState) {
+          var _extends2;
+
+          return _extends({}, prevState, (_extends2 = {}, _extends2[mediaQuery.flag] = e.matches, _extends2));
+        });
+      }
+    });
+  }, [theme]);
+  useEffect(function () {
+    prepareMediaQueries();
+    return function () {
+      allMediaQueries.forEach(function (mediaQuery) {
+        var _mediaQuery$ref$curre;
+
+        return (_mediaQuery$ref$curre = mediaQuery.ref.current) == null ? void 0 : _mediaQuery$ref$curre.remove();
+      });
+    };
+  }, []);
+  return state;
+}

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useResponsiveLayout.ts"],"names":["createRef","useCallback","useContext","useEffect","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","customMediaQueries","theme","allMediaQueries","Object","entries","isMobile","mobileMediaQuery","map","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","assign","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","e","media","prevState","matches","remove"],"mappings":"0DAAA,SAAgBA,SAAhB,EAA2BC,WAA3B,EAAwCC,UAAxC,EAAoDC,SAApD,EAA+DC,QAA/D,QAA+E,OAA/E;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,2BAAT,EAAsCC,YAAtC,QAA0D,0BAA1D;;AAEA,OAAO,SAASC,mBAAT;;AAE6B,+BAAJ,EAAI,SADlCC,kBACkC,QADlCA,kBACkC;AAClC,MAAMC,KAAK,GAAGR,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMM,eAAe,GAAGC,MAAM,CAACC,OAAP;AACtBC,IAAAA,QAAQ,EAAEJ,KAAK,CAACK,gBADM;AAEnBN,EAAAA,kBAFmB;AAGrBO,EAAAA,GAHqB,CAGjB,sBAAEC,GAAF,YAAOC,KAAP,mBAAmB;AACxBC,MAAAA,IAAI,EAAEF,GADkB;AAExBG,MAAAA,KAAK,EAAEF,KAFiB;AAGxBG,MAAAA,GAAG,eAAErB,SAAS,EAHU,EAAnB,EAHiB,CAAxB;;;AASA,MAAMsB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAgC;AAC1D,WAAOX,eAAe,CAACY,MAAhB;AACL,cAACC,MAAD,EAASC,UAAT,6BAAwBb,MAAM,CAACc,MAAP,CAAcF,MAAd,uCAAyBC,UAAU,CAACN,IAApC,IAA2CZ,YAAY,CAACkB,UAAU,CAACL,KAAZ,CAAvD,kBAAxB,EADK;AAEL,MAFK,CAAP;;AAID,GALD;;AAOA,kBAA0BhB,QAAQ,CAACkB,mBAAmB,EAApB,CAAlC,CAAOK,KAAP,gBAAcC,QAAd;;AAEA,MAAMC,mBAAmB,GAAG5B,WAAW,CAAC,YAAM;AAC5C,QAAI,CAACS,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB;AACE,cAACL,UAAD;AACGA,QAAAA,UAAU,CAACJ,GAAX,CAAeU,OAAf,GAAyBzB,2BAA2B,CAACmB,UAAU,CAACL,KAAZ,EAAmBY,wBAAnB,CADvD,GADF;;;AAKA;AACA,QAAMC,YAAY,GAAGX,mBAAmB,EAAxC;AACA,QAAMY,eAAe,GAAGtB,MAAM,CAACC,OAAP,CAAeoB,YAAf,EAA6BE,IAA7B,CAAkC,sBAAElB,GAAF,YAAOC,KAAP,mBAAkBS,KAAK,CAACV,GAAD,CAAL,KAAeC,KAAjC,EAAlC,CAAxB;;AAEA,QAAIgB,eAAJ,EAAqB;AACnBN,MAAAA,QAAQ,CAACK,YAAD,CAAR;AACD;AACF,GAjBsC,EAiBpC,CAACvB,KAAD,CAjBoC,CAAvC;;AAmBA,MAAMsB,wBAAwB,GAAG/B,WAAW;AAC1C,YAACmC,CAAD,EAA4B;AAC1B,QAAI,CAAC1B,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,EAAgB;AACtC,UAAIW,CAAC,CAACC,KAAF,KAAYZ,UAAU,CAACL,KAA3B,EAAkC;AAChCQ,QAAAA,QAAQ,CAAC,UAACU,SAAD;AACJA,UAAAA,SADI;AAENb,UAAAA,UAAU,CAACN,IAFL,IAEYiB,CAAC,CAACG,OAFd,eAAD,CAAR;;AAID;AACF,KAPD;AAQD,GAdyC;AAe1C,GAAC7B,KAAD,CAf0C,CAA5C;;;AAkBAP,EAAAA,SAAS,CAAC,YAAM;AACd0B,IAAAA,mBAAmB;;AAEnB,WAAO,YAAM;AACXlB,MAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,6DAAgBA,UAAU,CAACJ,GAAX,CAAeU,OAA/B,qBAAgB,sBAAwBS,MAAxB,EAAhB,EAAxB;AACD,KAFD;AAGD,GANQ,EAMN,EANM,CAAT;;AAQA,SAAOb,KAAP;AACD","sourcesContent":["import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({\n  customMediaQueries,\n}: ResponsiveLayoutOptions<T> = {}) {\n  const theme = useContext(ThemeContext);\n\n  const allMediaQueries = Object.entries({\n    isMobile: theme.mobileMediaQuery,\n    ...customMediaQueries,\n  }).map(([key, value]) => ({\n    flag: key,\n    query: value,\n    ref: createRef() as React.MutableRefObject<{ remove: () => void } | null>,\n  }));\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags<T> => {\n    return allMediaQueries.reduce(\n      (result, mediaQuery) => Object.assign(result, { [mediaQuery.flag]: checkMatches(mediaQuery.query) }),\n      {},\n    ) as ResponsiveLayoutFlags<T>;\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    allMediaQueries.forEach(\n      (mediaQuery) =>\n        (mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries)),\n    );\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n    const hasChangedQuery = Object.entries(globalLayout).find(([key, value]) => state[key] !== value);\n\n    if (hasChangedQuery) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      allMediaQueries.forEach((mediaQuery) => {\n        if (e.media === mediaQuery.query) {\n          setState((prevState: ResponsiveLayoutFlags<T>) => ({\n            ...prevState,\n            [mediaQuery.flag]: e.matches,\n          }));\n        }\n      });\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      allMediaQueries.forEach((mediaQuery) => mediaQuery.ref.current?.remove());\n    };\n  }, []);\n\n  return state;\n}\n"]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

@@ -0,0 +1,2 @@
+import { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';
+export declare function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({ customMediaQueries, }?: ResponsiveLayoutOptions<T>): ResponsiveLayoutFlags<T>;