@wix/patterns 1.39.0 → 1.40.0

package/dist/cjs/components/LoadingRow/LoadingRowState.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.LoadingRowState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _bexCore = require("@wix/bex-core");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class LoadingRowState {
+  constructor() {
+    (0, _defineProperty2.default)(this, "loadingItems", _mobx.observable.map([], {
+      deep: false
+    }));
+    (0, _defineProperty2.default)(this, "animationDuration", 1600);
+    (0, _defineProperty2.default)(this, "animationData", undefined);
+    (0, _defineProperty2.default)(this, "LottieRenderer", undefined);
+    (0, _defineProperty2.default)(this, "loadAnimationAssetsTask", new _bexCore.TaskState());
+    (0, _mobx.makeObservable)(this, {
+      animationData: _mobx.observable.ref,
+      LottieRenderer: _mobx.observable.ref,
+      addLoadingItem: _mobx.action,
+      removeLoadingItem: _mobx.action
+    });
+  }
+  addLoadingItem(id) {
+    this._loadAnimationAssets();
+    this.loadingItems.set(id, {
+      id,
+      startTime: Date.now()
+    });
+    setTimeout(() => {
+      this.removeLoadingItem(id);
+    }, this.animationDuration);
+  }
+  removeLoadingItem(id) {
+    this.loadingItems.delete(id);
+  }
+  isLoading(id) {
+    return this.loadingItems.has(id);
+  }
+  async setLottieRenderer() {
+    if (process.env.NODE_ENV === 'test') {
+      require('jest-canvas-mock');
+    }
+    this.LottieRenderer = (await Promise.resolve().then(() => _interopRequireWildcard(require('lottie-react')))).default;
+  }
+  async setAnimationData() {
+    this.animationData = (await Promise.resolve().then(() => _interopRequireWildcard(require('./aiLoadingLottie')))).aiLoadingLottie;
+  }
+  _loadAnimationAssets() {
+    this.loadAnimationAssetsTask.runOnce(async () => {
+      await Promise.all([this.setLottieRenderer(), this.setAnimationData()]);
+    });
+  }
+}
+exports.LoadingRowState = LoadingRowState;
+//# sourceMappingURL=LoadingRowState.js.map

package/dist/cjs/components/LoadingRow/LoadingRowState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_bexCore","_getRequireWildcardCache","e","WeakMap","r","t","_interopRequireWildcard","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LoadingRowState","constructor","_defineProperty2","observable","map","deep","undefined","TaskState","makeObservable","animationData","ref","LottieRenderer","addLoadingItem","action","removeLoadingItem","id","_loadAnimationAssets","loadingItems","startTime","Date","now","setTimeout","animationDuration","delete","isLoading","setLottieRenderer","process","env","NODE_ENV","Promise","resolve","then","setAnimationData","aiLoadingLottie","loadAnimationAssetsTask","runOnce","all","exports"],"sources":["../../../../src/components/LoadingRow/LoadingRowState.ts"],"sourcesContent":["import { action, makeObservable, observable } from 'mobx';\nimport { TaskState } from '@wix/bex-core';\n\nexport interface LoadingRow {\n  id: string;\n  startTime: number;\n}\n\nexport class LoadingRowState {\n  readonly loadingItems = observable.map<string, LoadingRow>([], {\n    deep: false,\n  });\n  animationDuration = 1600;\n\n  animationData = undefined as { layers: any[] } | undefined;\n  LottieRenderer = undefined as\n    | typeof import('lottie-react').default\n    | undefined;\n\n  loadAnimationAssetsTask = new TaskState();\n\n  constructor() {\n    makeObservable(this, {\n      animationData: observable.ref,\n      LottieRenderer: observable.ref,\n      addLoadingItem: action,\n      removeLoadingItem: action,\n    });\n  }\n\n  addLoadingItem(id: string) {\n    this._loadAnimationAssets();\n    this.loadingItems.set(id, {\n      id,\n      startTime: Date.now(),\n    });\n\n    setTimeout(() => {\n      this.removeLoadingItem(id);\n    }, this.animationDuration);\n  }\n\n  removeLoadingItem(id: string) {\n    this.loadingItems.delete(id);\n  }\n\n  isLoading(id: string): boolean {\n    return this.loadingItems.has(id);\n  }\n\n  async setLottieRenderer() {\n    if (process.env.NODE_ENV === 'test') {\n      require('jest-canvas-mock');\n    }\n    this.LottieRenderer = (await import('lottie-react')).default;\n  }\n\n  async setAnimationData() {\n    this.animationData = (await import('./aiLoadingLottie')).aiLoadingLottie;\n  }\n\n  _loadAnimationAssets() {\n    this.loadAnimationAssetsTask.runOnce(async () => {\n      await Promise.all([this.setLottieRenderer(), this.setAnimationData()]);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/LoadingRow/LoadingRowTD.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.LoadingRowTD = void 0;
+var _designSystem = require("@wix/design-system");
+var _react = _interopRequireDefault(require("react"));
+var _LoadingRowStCss = require("./LoadingRow.st.css.js");
+var _AILoadingLottiePoster = require("./AILoadingLottiePoster");
+var _mobxReactLite = require("mobx-react-lite");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/LoadingRow/LoadingRowTD.tsx";
+function _LoadingRowTD({
+  state
+}) {
+  return /*#__PURE__*/_react.default.createElement("td", {
+    style: {
+      width: 0,
+      padding: 0
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      left: 0,
+      top: 0,
+      right: 0,
+      zIndex: 2,
+      position: 'absolute',
+      height: '100%'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "center",
+    verticalAlign: "middle",
+    width: "100%",
+    height: "100%",
+    dataHook: "table-loading-row",
+    className: (0, _LoadingRowStCss.st)(_LoadingRowStCss.classes.root),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 22,
+      columnNumber: 9
+    }
+  }, state.LottieRenderer && state.animationData ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: "loading-row-lottie",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(state.LottieRenderer, {
+    style: {
+      width: '20px',
+      height: '20px'
+    },
+    animationData: state.animationData,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 32,
+      columnNumber: 15
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_AILoadingLottiePoster.AILoadingLottiePoster, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 13
+    }
+  }))));
+}
+const LoadingRowTD = exports.LoadingRowTD = (0, _mobxReactLite.observer)(_LoadingRowTD);
+//# sourceMappingURL=LoadingRowTD.js.map

package/dist/cjs/components/LoadingRow/LoadingRowTD.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_designSystem","require","_react","_interopRequireDefault","_LoadingRowStCss","_AILoadingLottiePoster","_mobxReactLite","_jsxFileName","_LoadingRowTD","state","default","createElement","style","width","padding","__self","__source","fileName","lineNumber","columnNumber","left","top","right","zIndex","position","height","Box","align","verticalAlign","dataHook","className","st","classes","root","LottieRenderer","animationData","AILoadingLottiePoster","LoadingRowTD","exports","observer"],"sources":["../../../../src/components/LoadingRow/LoadingRowTD.tsx"],"sourcesContent":["import { Box } from '@wix/design-system';\nimport React from 'react';\nimport { st, classes } from './LoadingRow.st.css.js';\nimport { LoadingRowState } from './LoadingRowState';\nimport { AILoadingLottiePoster } from './AILoadingLottiePoster';\nimport { observer } from 'mobx-react-lite';\n\nfunction _LoadingRowTD({ state }: { state: LoadingRowState }) {\n  return (\n    <td style={{ width: 0, padding: 0 }}>\n      <div\n        style={{\n          width: '100%',\n          left: 0,\n          top: 0,\n          right: 0,\n          zIndex: 2,\n          position: 'absolute',\n          height: '100%',\n        }}\n      >\n        <Box\n          align=\"center\"\n          verticalAlign=\"middle\"\n          width=\"100%\"\n          height=\"100%\"\n          dataHook=\"table-loading-row\"\n          className={st(classes.root)}\n        >\n          {state.LottieRenderer && state.animationData ? (\n            <Box dataHook=\"loading-row-lottie\">\n              <state.LottieRenderer\n                style={{ width: '20px', height: '20px' }}\n                animationData={state.animationData}\n              />\n            </Box>\n          ) : (\n            <AILoadingLottiePoster />\n          )}\n        </Box>\n      </div>\n    </td>\n  );\n}\n\nexport const LoadingRowTD = observer(_LoadingRowTD);\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAEA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAA2C,IAAAM,YAAA;AAE3C,SAASC,aAAaA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAC5D,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA;IAAIC,KAAK,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClCjB,MAAA,CAAAQ,OAAA,CAAAC,aAAA;IACEC,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbO,IAAI,EAAE,CAAC;MACPC,GAAG,EAAE,CAAC;MACNC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE;IACV,CAAE;IAAAV,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEFjB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACX,aAAA,CAAA0B,GAAG;IACFC,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAC,QAAQ;IACtBf,KAAK,EAAC,MAAM;IACZY,MAAM,EAAC,MAAM;IACbI,QAAQ,EAAC,mBAAmB;IAC5BC,SAAS,EAAE,IAAAC,mBAAE,EAACC,wBAAO,CAACC,IAAI,CAAE;IAAAlB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE3BV,KAAK,CAACyB,cAAc,IAAIzB,KAAK,CAAC0B,aAAa,gBAC1CjC,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACX,aAAA,CAAA0B,GAAG;IAACG,QAAQ,EAAC,oBAAoB;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAChCjB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACF,KAAK,CAACyB,cAAc;IACnBtB,KAAK,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEY,MAAM,EAAE;IAAO,CAAE;IACzCU,aAAa,EAAE1B,KAAK,CAAC0B,aAAc;IAAApB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,CACpC,CACE,CAAC,gBAENjB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,sBAAA,CAAA+B,qBAAqB;IAAArB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAV,YAAA;MAAAW,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAEvB,CACF,CACH,CAAC;AAET;AAEO,MAAMkB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAAC/B,aAAa,CAAC","ignoreList":[]}