@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

package/ui/views/SplitView.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _emotion = require("emotion");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _SplitViewPanelElement = require("./SplitView/SplitViewPanelElement");
+
+var _UIView2 = require("../UIView");
+
+var grid = /*#__PURE__*/(0, _emotion.css)({
+  "&.mdc-layout-grid": {
+    padding: 0,
+    backgroundColor: "var(--mdc-theme-background)",
+    ">.mdc-layout-grid__inner": {
+      gridGap: 0
+    }
+  }
+}, "label:grid;");
+var leftPanel = /*#__PURE__*/(0, _emotion.css)({
+  backgroundColor: "var(--mdc-theme-surface)",
+  ">.webiny-data-list": {
+    display: "flex",
+    flexDirection: "column",
+    height: "calc(100vh - 70px)",
+    ".mdc-list": {
+      overflow: "auto"
+    }
+  },
+  ">.mdc-list": {
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "calc(100vh - 70px)",
+    overflow: "auto"
+  }
+}, "label:leftPanel;");
+var rightPanel = /*#__PURE__*/(0, _emotion.css)({
+  backgroundColor: "var(--mdc-theme-background)",
+  overflow: "auto",
+  height: "calc(100vh - 70px)"
+}, "label:rightPanel;");
+
+var SplitView = /*#__PURE__*/function (_UIView) {
+  (0, _inherits2.default)(SplitView, _UIView);
+
+  var _super = (0, _createSuper2.default)(SplitView);
+
+  function SplitView(id) {
+    var _this;
+
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    (0, _classCallCheck2.default)(this, SplitView);
+    _this = _super.call(this, "SplitView.".concat(id));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_classNames", new Set());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_leftPanel", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_rightPanel", void 0);
+
+    _this.useGrid(false);
+
+    _this.addClassName(grid);
+
+    _this.addClassName("webiny-split-view");
+
+    _this.addElements();
+
+    if (config.leftPanel) {
+      _this.getLeftPanel().addElement(config.leftPanel);
+    }
+
+    if (config.rightPanel) {
+      _this.getRightPanel().addElement(config.rightPanel);
+    }
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SplitView, [{
+    key: "addClassName",
+    value: function addClassName(className) {
+      this._classNames.add(className);
+    }
+  }, {
+    key: "removeClassName",
+    value: function removeClassName(className) {
+      this._classNames.delete(className);
+    }
+  }, {
+    key: "getLeftPanel",
+    value: function getLeftPanel() {
+      return this.getElement("leftPanel");
+    }
+  }, {
+    key: "getRightPanel",
+    value: function getRightPanel() {
+      return this.getElement("rightPanel");
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+        className: (0, _classnames.default)(Array.from(this._classNames.values()))
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(SplitView.prototype), "render", this).call(this, props));
+    }
+  }, {
+    key: "addElements",
+    value: function addElements() {
+      this._leftPanel = new _SplitViewPanelElement.SplitViewPanelElement("leftPanel");
+
+      this._leftPanel.useGrid(false);
+
+      this._leftPanel.setWidth(5);
+
+      this._leftPanel.addClassName(leftPanel);
+
+      this._leftPanel.addClassName("webiny-split-view__left-panel");
+
+      this._rightPanel = new _SplitViewPanelElement.SplitViewPanelElement("rightPanel");
+
+      this._rightPanel.useGrid(false);
+
+      this._rightPanel.setWidth(7);
+
+      this._rightPanel.addClassName(rightPanel);
+
+      this._rightPanel.addClassName("webiny-split-view__right-panel");
+
+      this.addElement(this._leftPanel);
+
+      this._rightPanel.moveAfter(this._leftPanel);
+    }
+  }]);
+  return SplitView;
+}(_UIView2.UIView);
+
+exports.SplitView = SplitView;

package/ui/views/SplitView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["grid","css","padding","backgroundColor","gridGap","leftPanel","display","flexDirection","height","overflow","maxHeight","rightPanel","SplitView","id","config","Set","useGrid","addClassName","addElements","getLeftPanel","addElement","getRightPanel","className","_classNames","add","delete","getElement","props","classNames","Array","from","values","_leftPanel","SplitViewPanelElement","setWidth","_rightPanel","moveAfter","UIView"],"sources":["SplitView.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SplitViewPanelElement } from \"./SplitView/SplitViewPanelElement\";\nimport { UIView } from \"../UIView\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 70px)\",\n        overflow: \"auto\"\n    }\n});\n\nconst rightPanel = css({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 70px)\"\n});\n\ninterface SplitViewConfig {\n    leftPanel?: UIElement;\n    rightPanel?: UIElement;\n}\n\nexport class SplitView extends UIView {\n    private _classNames = new Set<string>();\n    private _leftPanel?: SplitViewPanelElement;\n    private _rightPanel?: SplitViewPanelElement;\n\n    public constructor(id: string, config: SplitViewConfig = {}) {\n        super(`SplitView.${id}`);\n\n        this.useGrid(false);\n        this.addClassName(grid);\n        this.addClassName(\"webiny-split-view\");\n        this.addElements();\n\n        if (config.leftPanel) {\n            this.getLeftPanel().addElement(config.leftPanel);\n        }\n\n        if (config.rightPanel) {\n            this.getRightPanel().addElement(config.rightPanel);\n        }\n    }\n\n    public addClassName(className: string): void {\n        this._classNames.add(className);\n    }\n\n    public removeClassName(className: string): void {\n        this._classNames.delete(className);\n    }\n\n    public getLeftPanel(): SplitViewPanelElement {\n        return this.getElement(\"leftPanel\") as SplitViewPanelElement;\n    }\n\n    public getRightPanel(): SplitViewPanelElement {\n        return this.getElement(\"rightPanel\") as SplitViewPanelElement;\n    }\n\n    public override render(props?: any): React.ReactNode {\n        return (\n            <Grid className={classNames(Array.from(this._classNames.values()))}>\n                {super.render(props)}\n            </Grid>\n        );\n    }\n\n    private addElements(): void {\n        this._leftPanel = new SplitViewPanelElement(\"leftPanel\");\n        this._leftPanel.useGrid(false);\n        this._leftPanel.setWidth(5);\n        this._leftPanel.addClassName(leftPanel);\n        this._leftPanel.addClassName(\"webiny-split-view__left-panel\");\n\n        this._rightPanel = new SplitViewPanelElement(\"rightPanel\");\n        this._rightPanel.useGrid(false);\n        this._rightPanel.setWidth(7);\n        this._rightPanel.addClassName(rightPanel);\n        this._rightPanel.addClassName(\"webiny-split-view__right-panel\");\n\n        this.addElement(this._leftPanel);\n        this._rightPanel.moveAfter(this._leftPanel);\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,IAAI,gBAAG,IAAAC,YAAA,EAAI;EACb,qBAAqB;IACjBC,OAAO,EAAE,CADQ;IAEjBC,eAAe,EAAE,6BAFA;IAGjB,4BAA4B;MACxBC,OAAO,EAAE;IADe;EAHX;AADR,CAAJ,gBAAb;AAUA,IAAMC,SAAS,gBAAG,IAAAJ,YAAA,EAAI;EAClBE,eAAe,EAAE,0BADC;EAElB,sBAAsB;IAClBG,OAAO,EAAE,MADS;IAElBC,aAAa,EAAE,QAFG;IAGlBC,MAAM,EAAE,oBAHU;IAIlB,aAAa;MACTC,QAAQ,EAAE;IADD;EAJK,CAFJ;EAUlB,cAAc;IACVH,OAAO,EAAE,MADC;IAEVC,aAAa,EAAE,QAFL;IAGVG,SAAS,EAAE,oBAHD;IAIVD,QAAQ,EAAE;EAJA;AAVI,CAAJ,qBAAlB;AAkBA,IAAME,UAAU,gBAAG,IAAAV,YAAA,EAAI;EACnBE,eAAe,EAAE,6BADE;EAEnBM,QAAQ,EAAE,MAFS;EAGnBD,MAAM,EAAE;AAHW,CAAJ,sBAAnB;;IAWaI,S;;;;;EAKT,mBAAmBC,EAAnB,EAA6D;IAAA;;IAAA,IAA9BC,MAA8B,uEAAJ,EAAI;IAAA;IACzD,8CAAmBD,EAAnB;IADyD,0FAJvC,IAAIE,GAAJ,EAIuC;IAAA;IAAA;;IAGzD,MAAKC,OAAL,CAAa,KAAb;;IACA,MAAKC,YAAL,CAAkBjB,IAAlB;;IACA,MAAKiB,YAAL,CAAkB,mBAAlB;;IACA,MAAKC,WAAL;;IAEA,IAAIJ,MAAM,CAACT,SAAX,EAAsB;MAClB,MAAKc,YAAL,GAAoBC,UAApB,CAA+BN,MAAM,CAACT,SAAtC;IACH;;IAED,IAAIS,MAAM,CAACH,UAAX,EAAuB;MACnB,MAAKU,aAAL,GAAqBD,UAArB,CAAgCN,MAAM,CAACH,UAAvC;IACH;;IAdwD;EAe5D;;;;WAED,sBAAoBW,SAApB,EAA6C;MACzC,KAAKC,WAAL,CAAiBC,GAAjB,CAAqBF,SAArB;IACH;;;WAED,yBAAuBA,SAAvB,EAAgD;MAC5C,KAAKC,WAAL,CAAiBE,MAAjB,CAAwBH,SAAxB;IACH;;;WAED,wBAA6C;MACzC,OAAO,KAAKI,UAAL,CAAgB,WAAhB,CAAP;IACH;;;WAED,yBAA8C;MAC1C,OAAO,KAAKA,UAAL,CAAgB,YAAhB,CAAP;IACH;;;WAED,gBAAuBC,KAAvB,EAAqD;MACjD,oBACI,6BAAC,UAAD;QAAM,SAAS,EAAE,IAAAC,mBAAA,EAAWC,KAAK,CAACC,IAAN,CAAW,KAAKP,WAAL,CAAiBQ,MAAjB,EAAX,CAAX;MAAjB,qGACkBJ,KADlB,EADJ;IAKH;;;WAED,uBAA4B;MACxB,KAAKK,UAAL,GAAkB,IAAIC,4CAAJ,CAA0B,WAA1B,CAAlB;;MACA,KAAKD,UAAL,CAAgBhB,OAAhB,CAAwB,KAAxB;;MACA,KAAKgB,UAAL,CAAgBE,QAAhB,CAAyB,CAAzB;;MACA,KAAKF,UAAL,CAAgBf,YAAhB,CAA6BZ,SAA7B;;MACA,KAAK2B,UAAL,CAAgBf,YAAhB,CAA6B,+BAA7B;;MAEA,KAAKkB,WAAL,GAAmB,IAAIF,4CAAJ,CAA0B,YAA1B,CAAnB;;MACA,KAAKE,WAAL,CAAiBnB,OAAjB,CAAyB,KAAzB;;MACA,KAAKmB,WAAL,CAAiBD,QAAjB,CAA0B,CAA1B;;MACA,KAAKC,WAAL,CAAiBlB,YAAjB,CAA8BN,UAA9B;;MACA,KAAKwB,WAAL,CAAiBlB,YAAjB,CAA8B,gCAA9B;;MAEA,KAAKG,UAAL,CAAgB,KAAKY,UAArB;;MACA,KAAKG,WAAL,CAAiBC,SAAjB,CAA2B,KAAKJ,UAAhC;IACH;;;EA7D0BK,e"}