@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/admin/components/FieldEditor/useModelFieldEditor.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModelFieldEditor = useModelFieldEditor;
+var _react = require("react");
+var _FieldEditorContext = require("./FieldEditorContext");
+function useModelFieldEditor() {
+  var context = (0, _react.useContext)(_FieldEditorContext.FieldEditorContext);
+  if (!context) {
+    throw Error("FieldEditorContext is missing in the component tree. Are you useing the \"useFieldEditor()\" hook in the right place?");
+  }
+  return context;
+}

package/admin/components/FieldEditor/useModelFieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useModelFieldEditor","context","useContext","FieldEditorContext","Error"],"sources":["useModelFieldEditor.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { FieldEditorContext } from \"./FieldEditorContext\";\n\nexport function useModelFieldEditor() {\n    const context = useContext(FieldEditorContext);\n    if (!context) {\n        throw Error(\n            `FieldEditorContext is missing in the component tree. Are you useing the \"useFieldEditor()\" hook in the right place?`\n        );\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;AAAA;AACA;AAEO,SAASA,mBAAmB,GAAG;EAClC,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,sCAAkB,CAAC;EAC9C,IAAI,CAACF,OAAO,EAAE;IACV,MAAMG,KAAK,yHAEV;EACL;EAEA,OAAOH,OAAO;AAClB"}

package/admin/components/FieldEditor/utils/deleteField.d.ts

@@ -1,7 +1,7 @@
-import { CmsEditorField, CmsModel } from "../../../../types";
+import { CmsModelField, CmsModel } from "../../../../types";
 declare type DeleteFieldParamsData = Pick<CmsModel, "fields" | "layout">;
 interface DeleteFieldParams {
-    field: Pick<CmsEditorField, "id">;
+    field: Pick<CmsModelField, "id">;
     data: DeleteFieldParamsData;
 }
 declare const _default: (params: DeleteFieldParams) => any;

package/admin/components/FieldEditor/utils/deleteField.js

@@ -1,30 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-
 var _default = function _default(params) {
   var field = params.field,
-      prev = params.data; // Remove the field from fields list...
-
+    prev = params.data;
+  // Remove the field from fields list...
   var fieldIndex = prev.fields.findIndex(function (item) {
     return item.id === field.id;
   });
+  var data = _dotPropImmutable.default.delete(prev, "fields.".concat(fieldIndex));
 
-  var data = _dotPropImmutable.default.delete(prev, "fields.".concat(fieldIndex)); // ...and rebuild the layout object.
-
-
+  // ...and rebuild the layout object.
   return _dotPropImmutable.default.set(data, "layout", function (layout) {
     if (!layout) {
       return [];
     }
-
     var newLayout = [];
     var currentRowIndex = 0;
     layout.forEach(function (row) {
@@ -32,15 +27,12 @@ var _default = function _default(params) {
         var field = data.fields.find(function (item) {
           return item.id === fieldId;
         });
-
         if (!field) {
           return;
         }
-
         if (!Array.isArray(newLayout[currentRowIndex])) {
           newLayout[currentRowIndex] = [];
         }
-
         newLayout[currentRowIndex].push(fieldId);
       });
       newLayout[currentRowIndex] && newLayout[currentRowIndex].length && currentRowIndex++;
@@ -48,5 +40,4 @@ var _default = function _default(params) {
     return newLayout;
   });
 };
-
 exports.default = _default;

package/admin/components/FieldEditor/utils/deleteField.js.map

@@ -1 +1 @@
-{"version":3,"names":["params","field","prev","data","fieldIndex","fields","findIndex","item","id","dot","delete","set","layout","newLayout","currentRowIndex","forEach","row","fieldId","find","Array","isArray","push","length"],"sources":["deleteField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsEditorField, CmsModel } from \"~/types\";\n\ntype DeleteFieldParamsData = Pick<CmsModel, \"fields\" | \"layout\">;\ninterface DeleteFieldParams {\n    field: Pick<CmsEditorField, \"id\">;\n    data: DeleteFieldParamsData;\n}\nexport default (params: DeleteFieldParams) => {\n    const { field, data: prev } = params;\n    // Remove the field from fields list...\n    const fieldIndex = prev.fields.findIndex(item => item.id === field.id);\n    const data = dot.delete(prev, `fields.${fieldIndex}`) as DeleteFieldParamsData;\n\n    // ...and rebuild the layout object.\n    return dot.set(data, \"layout\", (layout: DeleteFieldParamsData[\"layout\"]) => {\n        if (!layout) {\n            return [];\n        }\n        const newLayout: DeleteFieldParamsData[\"layout\"] = [];\n        let currentRowIndex = 0;\n        layout.forEach(row => {\n            row.forEach(fieldId => {\n                const field = data.fields.find(item => item.id === fieldId);\n                if (!field) {\n                    return;\n                }\n                if (!Array.isArray(newLayout[currentRowIndex])) {\n                    newLayout[currentRowIndex] = [];\n                }\n\n                newLayout[currentRowIndex].push(fieldId);\n            });\n            newLayout[currentRowIndex] && newLayout[currentRowIndex].length && currentRowIndex++;\n        });\n\n        return newLayout;\n    });\n};\n"],"mappings":";;;;;;;;;AAAA;;eAQe,kBAACA,MAAD,EAA+B;EAC1C,IAAQC,KAAR,GAA8BD,MAA9B,CAAQC,KAAR;EAAA,IAAqBC,IAArB,GAA8BF,MAA9B,CAAeG,IAAf,CAD0C,CAE1C;;EACA,IAAMC,UAAU,GAAGF,IAAI,CAACG,MAAL,CAAYC,SAAZ,CAAsB,UAAAC,IAAI;IAAA,OAAIA,IAAI,CAACC,EAAL,KAAYP,KAAK,CAACO,EAAtB;EAAA,CAA1B,CAAnB;;EACA,IAAML,IAAI,GAAGM,yBAAA,CAAIC,MAAJ,CAAWR,IAAX,mBAA2BE,UAA3B,EAAb,CAJ0C,CAM1C;;;EACA,OAAOK,yBAAA,CAAIE,GAAJ,CAAQR,IAAR,EAAc,QAAd,EAAwB,UAACS,MAAD,EAA6C;IACxE,IAAI,CAACA,MAAL,EAAa;MACT,OAAO,EAAP;IACH;;IACD,IAAMC,SAA0C,GAAG,EAAnD;IACA,IAAIC,eAAe,GAAG,CAAtB;IACAF,MAAM,CAACG,OAAP,CAAe,UAAAC,GAAG,EAAI;MAClBA,GAAG,CAACD,OAAJ,CAAY,UAAAE,OAAO,EAAI;QACnB,IAAMhB,KAAK,GAAGE,IAAI,CAACE,MAAL,CAAYa,IAAZ,CAAiB,UAAAX,IAAI;UAAA,OAAIA,IAAI,CAACC,EAAL,KAAYS,OAAhB;QAAA,CAArB,CAAd;;QACA,IAAI,CAAChB,KAAL,EAAY;UACR;QACH;;QACD,IAAI,CAACkB,KAAK,CAACC,OAAN,CAAcP,SAAS,CAACC,eAAD,CAAvB,CAAL,EAAgD;UAC5CD,SAAS,CAACC,eAAD,CAAT,GAA6B,EAA7B;QACH;;QAEDD,SAAS,CAACC,eAAD,CAAT,CAA2BO,IAA3B,CAAgCJ,OAAhC;MACH,CAVD;MAWAJ,SAAS,CAACC,eAAD,CAAT,IAA8BD,SAAS,CAACC,eAAD,CAAT,CAA2BQ,MAAzD,IAAmER,eAAe,EAAlF;IACH,CAbD;IAeA,OAAOD,SAAP;EACH,CAtBM,CAAP;AAuBH,C"}
+{"version":3,"names":["params","field","prev","data","fieldIndex","fields","findIndex","item","id","dot","delete","set","layout","newLayout","currentRowIndex","forEach","row","fieldId","find","Array","isArray","push","length"],"sources":["deleteField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsModelField, CmsModel } from \"~/types\";\n\ntype DeleteFieldParamsData = Pick<CmsModel, \"fields\" | \"layout\">;\ninterface DeleteFieldParams {\n    field: Pick<CmsModelField, \"id\">;\n    data: DeleteFieldParamsData;\n}\nexport default (params: DeleteFieldParams) => {\n    const { field, data: prev } = params;\n    // Remove the field from fields list...\n    const fieldIndex = prev.fields.findIndex(item => item.id === field.id);\n    const data = dot.delete(prev, `fields.${fieldIndex}`) as DeleteFieldParamsData;\n\n    // ...and rebuild the layout object.\n    return dot.set(data, \"layout\", (layout: DeleteFieldParamsData[\"layout\"]) => {\n        if (!layout) {\n            return [];\n        }\n        const newLayout: DeleteFieldParamsData[\"layout\"] = [];\n        let currentRowIndex = 0;\n        layout.forEach(row => {\n            row.forEach(fieldId => {\n                const field = data.fields.find(item => item.id === fieldId);\n                if (!field) {\n                    return;\n                }\n                if (!Array.isArray(newLayout[currentRowIndex])) {\n                    newLayout[currentRowIndex] = [];\n                }\n\n                newLayout[currentRowIndex].push(fieldId);\n            });\n            newLayout[currentRowIndex] && newLayout[currentRowIndex].length && currentRowIndex++;\n        });\n\n        return newLayout;\n    });\n};\n"],"mappings":";;;;;;;AAAA;AAAqC,eAQtB,kBAACA,MAAyB,EAAK;EAC1C,IAAQC,KAAK,GAAiBD,MAAM,CAA5BC,KAAK;IAAQC,IAAI,GAAKF,MAAM,CAArBG,IAAI;EACnB;EACA,IAAMC,UAAU,GAAGF,IAAI,CAACG,MAAM,CAACC,SAAS,CAAC,UAAAC,IAAI;IAAA,OAAIA,IAAI,CAACC,EAAE,KAAKP,KAAK,CAACO,EAAE;EAAA,EAAC;EACtE,IAAML,IAAI,GAAGM,yBAAG,CAACC,MAAM,CAACR,IAAI,mBAAYE,UAAU,EAA4B;;EAE9E;EACA,OAAOK,yBAAG,CAACE,GAAG,CAACR,IAAI,EAAE,QAAQ,EAAE,UAACS,MAAuC,EAAK;IACxE,IAAI,CAACA,MAAM,EAAE;MACT,OAAO,EAAE;IACb;IACA,IAAMC,SAA0C,GAAG,EAAE;IACrD,IAAIC,eAAe,GAAG,CAAC;IACvBF,MAAM,CAACG,OAAO,CAAC,UAAAC,GAAG,EAAI;MAClBA,GAAG,CAACD,OAAO,CAAC,UAAAE,OAAO,EAAI;QACnB,IAAMhB,KAAK,GAAGE,IAAI,CAACE,MAAM,CAACa,IAAI,CAAC,UAAAX,IAAI;UAAA,OAAIA,IAAI,CAACC,EAAE,KAAKS,OAAO;QAAA,EAAC;QAC3D,IAAI,CAAChB,KAAK,EAAE;UACR;QACJ;QACA,IAAI,CAACkB,KAAK,CAACC,OAAO,CAACP,SAAS,CAACC,eAAe,CAAC,CAAC,EAAE;UAC5CD,SAAS,CAACC,eAAe,CAAC,GAAG,EAAE;QACnC;QAEAD,SAAS,CAACC,eAAe,CAAC,CAACO,IAAI,CAACJ,OAAO,CAAC;MAC5C,CAAC,CAAC;MACFJ,SAAS,CAACC,eAAe,CAAC,IAAID,SAAS,CAACC,eAAe,CAAC,CAACQ,MAAM,IAAIR,eAAe,EAAE;IACxF,CAAC,CAAC;IAEF,OAAOD,SAAS;EACpB,CAAC,CAAC;AACN,CAAC;AAAA"}

package/admin/components/FieldEditor/utils/getFieldPosition.d.ts

@@ -1,6 +1,6 @@
-import { CmsEditorField, CmsModel, FieldLayoutPosition } from "../../../../types";
+import { CmsModelField, CmsModel, FieldLayoutPosition } from "../../../../types";
 interface GetFieldPositionParams {
-    field: string | CmsEditorField;
+    field: string | CmsModelField;
     data: Pick<CmsModel, "layout">;
 }
 declare const _default: (params: GetFieldPositionParams) => FieldLayoutPosition | null;

package/admin/components/FieldEditor/utils/getFieldPosition.js

@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _default = function _default(params) {
   var field = params.field,
-      data = params.data;
+    data = params.data;
   var id = typeof field === "string" ? field : field.id;
   var layout = data.layout ? data.layout : [];
-
   for (var i = 0; i < layout.length; i++) {
     var row = layout[i];
-
     for (var j = 0; j < row.length; j++) {
       if (row[j] === id) {
         return {
@@ -23,8 +20,6 @@ var _default = function _default(params) {
       }
     }
   }
-
   return null;
 };
-
 exports.default = _default;

package/admin/components/FieldEditor/utils/getFieldPosition.js.map

@@ -1 +1 @@
-{"version":3,"names":["params","field","data","id","layout","i","length","row","j","index"],"sources":["getFieldPosition.ts"],"sourcesContent":["import { CmsEditorField, CmsModel, FieldLayoutPosition } from \"~/types\";\n\ninterface GetFieldPositionParams {\n    field: string | CmsEditorField;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default (params: GetFieldPositionParams): FieldLayoutPosition | null => {\n    const { field, data } = params;\n    const id = typeof field === \"string\" ? field : field.id;\n    const layout = data.layout ? data.layout : [];\n    for (let i = 0; i < layout.length; i++) {\n        const row = layout[i];\n        for (let j = 0; j < row.length; j++) {\n            if (row[j] === id) {\n                return { row: i, index: j };\n            }\n        }\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;;eAMe,kBAACA,MAAD,EAAgE;EAC3E,IAAQC,KAAR,GAAwBD,MAAxB,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAAwBF,MAAxB,CAAeE,IAAf;EACA,IAAMC,EAAE,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAAK,CAACE,EAArD;EACA,IAAMC,MAAM,GAAGF,IAAI,CAACE,MAAL,GAAcF,IAAI,CAACE,MAAnB,GAA4B,EAA3C;;EACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,MAAM,CAACE,MAA3B,EAAmCD,CAAC,EAApC,EAAwC;IACpC,IAAME,GAAG,GAAGH,MAAM,CAACC,CAAD,CAAlB;;IACA,KAAK,IAAIG,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,GAAG,CAACD,MAAxB,EAAgCE,CAAC,EAAjC,EAAqC;MACjC,IAAID,GAAG,CAACC,CAAD,CAAH,KAAWL,EAAf,EAAmB;QACf,OAAO;UAAEI,GAAG,EAAEF,CAAP;UAAUI,KAAK,EAAED;QAAjB,CAAP;MACH;IACJ;EACJ;;EAED,OAAO,IAAP;AACH,C"}
+{"version":3,"names":["params","field","data","id","layout","i","length","row","j","index"],"sources":["getFieldPosition.ts"],"sourcesContent":["import { CmsModelField, CmsModel, FieldLayoutPosition } from \"~/types\";\n\ninterface GetFieldPositionParams {\n    field: string | CmsModelField;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default (params: GetFieldPositionParams): FieldLayoutPosition | null => {\n    const { field, data } = params;\n    const id = typeof field === \"string\" ? field : field.id;\n    const layout = data.layout ? data.layout : [];\n    for (let i = 0; i < layout.length; i++) {\n        const row = layout[i];\n        for (let j = 0; j < row.length; j++) {\n            if (row[j] === id) {\n                return { row: i, index: j };\n            }\n        }\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;eAMe,kBAACA,MAA8B,EAAiC;EAC3E,IAAQC,KAAK,GAAWD,MAAM,CAAtBC,KAAK;IAAEC,IAAI,GAAKF,MAAM,CAAfE,IAAI;EACnB,IAAMC,EAAE,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGA,KAAK,CAACE,EAAE;EACvD,IAAMC,MAAM,GAAGF,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACE,MAAM,GAAG,EAAE;EAC7C,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,MAAM,CAACE,MAAM,EAAED,CAAC,EAAE,EAAE;IACpC,IAAME,GAAG,GAAGH,MAAM,CAACC,CAAC,CAAC;IACrB,KAAK,IAAIG,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,GAAG,CAACD,MAAM,EAAEE,CAAC,EAAE,EAAE;MACjC,IAAID,GAAG,CAACC,CAAC,CAAC,KAAKL,EAAE,EAAE;QACf,OAAO;UAAEI,GAAG,EAAEF,CAAC;UAAEI,KAAK,EAAED;QAAE,CAAC;MAC/B;IACJ;EACJ;EAEA,OAAO,IAAI;AACf,CAAC;AAAA"}

package/admin/components/FieldEditor/utils/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,11 +28,7 @@ Object.defineProperty(exports, "moveRow", {
     return _moveRow.default;
   }
 });
-
 var _getFieldPosition = _interopRequireDefault(require("./getFieldPosition"));
-
 var _moveField = _interopRequireDefault(require("./moveField"));
-
 var _deleteField = _interopRequireDefault(require("./deleteField"));
-
 var _moveRow = _interopRequireDefault(require("./moveRow"));

package/admin/components/FieldEditor/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as getFieldPosition } from \"./getFieldPosition\";\nexport { default as moveField } from \"./moveField\";\nexport { default as deleteField } from \"./deleteField\";\nexport { default as moveRow } from \"./moveRow\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as getFieldPosition } from \"./getFieldPosition\";\nexport { default as moveField } from \"./moveField\";\nexport { default as deleteField } from \"./deleteField\";\nexport { default as moveRow } from \"./moveRow\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}

package/admin/components/FieldEditor/utils/moveField.d.ts

@@ -1,8 +1,8 @@
-import { CmsEditorField, CmsEditorFieldId, FieldLayoutPosition } from "../../../../types";
+import { CmsModelField, CmsEditorFieldId, CmsModel as BaseCmsModel, FieldLayoutPosition } from "../../../../types";
 interface MoveFieldParams<T> {
-    field: CmsEditorFieldId | Pick<CmsEditorField, "id">;
+    field: CmsEditorFieldId | Pick<CmsModelField, "id">;
     position: FieldLayoutPosition;
     data: T;
 }
-declare const _default: <T extends Required<Pick<import("../../../../types").CmsEditorContentModel, "layout" | "fields">>>(params: MoveFieldParams<T>) => T;
+declare const _default: <T extends Required<Pick<BaseCmsModel, "layout" | "fields">>>(params: MoveFieldParams<T>) => T;
 export default _default;

package/admin/components/FieldEditor/utils/moveField.js

@@ -1,26 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-
 var _getFieldPosition = _interopRequireDefault(require("./getFieldPosition"));
-
 var moveField = function moveField(params) {
   var field = params.field,
-      position = params.position,
-      prev = params.data;
+    position = params.position,
+    prev = params.data;
   var row = position.row,
-      index = position.index;
+    index = position.index;
   var fieldId = typeof field === "string" ? field : field.id;
   var next = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
     layout: prev.layout ? prev.layout || [] : []
@@ -29,17 +23,16 @@ var moveField = function moveField(params) {
     field: fieldId,
     data: prev
   });
-
   if (existingPosition) {
     next = _dotPropImmutable.default.delete(prev, "layout.".concat(existingPosition.row, ".").concat(existingPosition.index));
-  } // Setting a form field into a new non-existing row.
-
+  }
 
+  // Setting a form field into a new non-existing row.
   if (!next.layout[row]) {
     return _dotPropImmutable.default.set(next, "layout.".concat(row), [fieldId]);
-  } // Drop the field at the specified index.
-
+  }
 
+  // Drop the field at the specified index.
   if (index === null) {
     // Create a new row with the new field at the given row index,
     return _dotPropImmutable.default.set(next, "layout", function (layout) {
@@ -48,14 +41,12 @@ var moveField = function moveField(params) {
       return newLayout;
     });
   }
-
   return _dotPropImmutable.default.set(next, "layout.".concat(row), function (layout) {
     var newLayout = (0, _toConsumableArray2.default)(layout);
     newLayout.splice(index, 0, fieldId);
     return newLayout;
   });
 };
-
 var _default = function _default(params) {
   return _dotPropImmutable.default.set(moveField(params), "layout", function (layout) {
     return (0, _toConsumableArray2.default)(layout).filter(function (row) {
@@ -63,5 +54,4 @@ var _default = function _default(params) {
     });
   });
 };
-
 exports.default = _default;

package/admin/components/FieldEditor/utils/moveField.js.map

@@ -1 +1 @@
-{"version":3,"names":["moveField","params","field","position","prev","data","row","index","fieldId","id","next","layout","existingPosition","getFieldPosition","dot","delete","set","newLayout","splice","filter","length"],"sources":["moveField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsModel as BaseCmsModel,\n    FieldLayoutPosition\n} from \"~/types\";\nimport getFieldPosition from \"./getFieldPosition\";\n\ntype CmsModel = Required<Pick<BaseCmsModel, \"fields\" | \"layout\">>;\n\ninterface MoveFieldParams<T> {\n    field: CmsEditorFieldId | Pick<CmsEditorField, \"id\">;\n    position: FieldLayoutPosition;\n    data: T;\n}\n\nconst moveField = <T extends CmsModel>(params: MoveFieldParams<T>) => {\n    const { field, position, data: prev } = params;\n    const { row, index } = position;\n    const fieldId = typeof field === \"string\" ? field : field.id;\n\n    let next: T = {\n        ...prev,\n        layout: prev.layout ? prev.layout || [] : []\n    };\n\n    const existingPosition = getFieldPosition({ field: fieldId, data: prev });\n\n    if (existingPosition) {\n        next = dot.delete(prev, `layout.${existingPosition.row}.${existingPosition.index}`) as T;\n    }\n\n    // Setting a form field into a new non-existing row.\n    if (!next.layout[row]) {\n        return dot.set(next, `layout.${row}`, [fieldId]);\n    }\n\n    // Drop the field at the specified index.\n    if (index === null) {\n        // Create a new row with the new field at the given row index,\n        return dot.set(next, \"layout\", (layout: string[][]) => {\n            const newLayout = [...layout];\n            newLayout.splice(row, 0, [fieldId]);\n            return newLayout;\n        });\n    }\n\n    return dot.set(next, `layout.${row}`, (layout: string[]) => {\n        const newLayout = [...layout];\n        newLayout.splice(index, 0, fieldId);\n        return newLayout;\n    });\n};\n\nexport default <T extends CmsModel>(params: MoveFieldParams<T>): T => {\n    return dot.set(moveField<T>(params), \"layout\", (layout: string[][]) => {\n        return [...layout].filter(row => row.length > 0);\n    });\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAOA;;AAUA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAAqBC,MAArB,EAAoD;EAClE,IAAQC,KAAR,GAAwCD,MAAxC,CAAQC,KAAR;EAAA,IAAeC,QAAf,GAAwCF,MAAxC,CAAeE,QAAf;EAAA,IAA+BC,IAA/B,GAAwCH,MAAxC,CAAyBI,IAAzB;EACA,IAAQC,GAAR,GAAuBH,QAAvB,CAAQG,GAAR;EAAA,IAAaC,KAAb,GAAuBJ,QAAvB,CAAaI,KAAb;EACA,IAAMC,OAAO,GAAG,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAAK,CAACO,EAA1D;EAEA,IAAIC,IAAO,+DACJN,IADI;IAEPO,MAAM,EAAEP,IAAI,CAACO,MAAL,GAAcP,IAAI,CAACO,MAAL,IAAe,EAA7B,GAAkC;EAFnC,EAAX;EAKA,IAAMC,gBAAgB,GAAG,IAAAC,yBAAA,EAAiB;IAAEX,KAAK,EAAEM,OAAT;IAAkBH,IAAI,EAAED;EAAxB,CAAjB,CAAzB;;EAEA,IAAIQ,gBAAJ,EAAsB;IAClBF,IAAI,GAAGI,yBAAA,CAAIC,MAAJ,CAAWX,IAAX,mBAA2BQ,gBAAgB,CAACN,GAA5C,cAAmDM,gBAAgB,CAACL,KAApE,EAAP;EACH,CAdiE,CAgBlE;;;EACA,IAAI,CAACG,IAAI,CAACC,MAAL,CAAYL,GAAZ,CAAL,EAAuB;IACnB,OAAOQ,yBAAA,CAAIE,GAAJ,CAAQN,IAAR,mBAAwBJ,GAAxB,GAA+B,CAACE,OAAD,CAA/B,CAAP;EACH,CAnBiE,CAqBlE;;;EACA,IAAID,KAAK,KAAK,IAAd,EAAoB;IAChB;IACA,OAAOO,yBAAA,CAAIE,GAAJ,CAAQN,IAAR,EAAc,QAAd,EAAwB,UAACC,MAAD,EAAwB;MACnD,IAAMM,SAAS,oCAAON,MAAP,CAAf;MACAM,SAAS,CAACC,MAAV,CAAiBZ,GAAjB,EAAsB,CAAtB,EAAyB,CAACE,OAAD,CAAzB;MACA,OAAOS,SAAP;IACH,CAJM,CAAP;EAKH;;EAED,OAAOH,yBAAA,CAAIE,GAAJ,CAAQN,IAAR,mBAAwBJ,GAAxB,GAA+B,UAACK,MAAD,EAAsB;IACxD,IAAMM,SAAS,oCAAON,MAAP,CAAf;IACAM,SAAS,CAACC,MAAV,CAAiBX,KAAjB,EAAwB,CAAxB,EAA2BC,OAA3B;IACA,OAAOS,SAAP;EACH,CAJM,CAAP;AAKH,CApCD;;eAsCe,kBAAqBhB,MAArB,EAAuD;EAClE,OAAOa,yBAAA,CAAIE,GAAJ,CAAQhB,SAAS,CAAIC,MAAJ,CAAjB,EAA8B,QAA9B,EAAwC,UAACU,MAAD,EAAwB;IACnE,OAAO,iCAAIA,MAAJ,EAAYQ,MAAZ,CAAmB,UAAAb,GAAG;MAAA,OAAIA,GAAG,CAACc,MAAJ,GAAa,CAAjB;IAAA,CAAtB,CAAP;EACH,CAFM,CAAP;AAGH,C"}
+{"version":3,"names":["moveField","params","field","position","prev","data","row","index","fieldId","id","next","layout","existingPosition","getFieldPosition","dot","delete","set","newLayout","splice","filter","length"],"sources":["moveField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport {\n    CmsModelField,\n    CmsEditorFieldId,\n    CmsModel as BaseCmsModel,\n    FieldLayoutPosition\n} from \"~/types\";\nimport getFieldPosition from \"./getFieldPosition\";\n\ntype CmsModel = Required<Pick<BaseCmsModel, \"fields\" | \"layout\">>;\n\ninterface MoveFieldParams<T> {\n    field: CmsEditorFieldId | Pick<CmsModelField, \"id\">;\n    position: FieldLayoutPosition;\n    data: T;\n}\n\nconst moveField = <T extends CmsModel>(params: MoveFieldParams<T>) => {\n    const { field, position, data: prev } = params;\n    const { row, index } = position;\n    const fieldId = typeof field === \"string\" ? field : field.id;\n\n    let next: T = {\n        ...prev,\n        layout: prev.layout ? prev.layout || [] : []\n    };\n\n    const existingPosition = getFieldPosition({ field: fieldId, data: prev });\n\n    if (existingPosition) {\n        next = dot.delete(prev, `layout.${existingPosition.row}.${existingPosition.index}`) as T;\n    }\n\n    // Setting a form field into a new non-existing row.\n    if (!next.layout[row]) {\n        return dot.set(next, `layout.${row}`, [fieldId]);\n    }\n\n    // Drop the field at the specified index.\n    if (index === null) {\n        // Create a new row with the new field at the given row index,\n        return dot.set(next, \"layout\", (layout: string[][]) => {\n            const newLayout = [...layout];\n            newLayout.splice(row, 0, [fieldId]);\n            return newLayout;\n        });\n    }\n\n    return dot.set(next, `layout.${row}`, (layout: string[]) => {\n        const newLayout = [...layout];\n        newLayout.splice(index, 0, fieldId);\n        return newLayout;\n    });\n};\n\nexport default <T extends CmsModel>(params: MoveFieldParams<T>): T => {\n    return dot.set(moveField<T>(params), \"layout\", (layout: string[][]) => {\n        return [...layout].filter(row => row.length > 0);\n    });\n};\n"],"mappings":";;;;;;;;;AAAA;AAOA;AAUA,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAwBC,MAA0B,EAAK;EAClE,IAAQC,KAAK,GAA2BD,MAAM,CAAtCC,KAAK;IAAEC,QAAQ,GAAiBF,MAAM,CAA/BE,QAAQ;IAAQC,IAAI,GAAKH,MAAM,CAArBI,IAAI;EAC7B,IAAQC,GAAG,GAAYH,QAAQ,CAAvBG,GAAG;IAAEC,KAAK,GAAKJ,QAAQ,CAAlBI,KAAK;EAClB,IAAMC,OAAO,GAAG,OAAON,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGA,KAAK,CAACO,EAAE;EAE5D,IAAIC,IAAO,+DACJN,IAAI;IACPO,MAAM,EAAEP,IAAI,CAACO,MAAM,GAAGP,IAAI,CAACO,MAAM,IAAI,EAAE,GAAG;EAAE,EAC/C;EAED,IAAMC,gBAAgB,GAAG,IAAAC,yBAAgB,EAAC;IAAEX,KAAK,EAAEM,OAAO;IAAEH,IAAI,EAAED;EAAK,CAAC,CAAC;EAEzE,IAAIQ,gBAAgB,EAAE;IAClBF,IAAI,GAAGI,yBAAG,CAACC,MAAM,CAACX,IAAI,mBAAYQ,gBAAgB,CAACN,GAAG,cAAIM,gBAAgB,CAACL,KAAK,EAAQ;EAC5F;;EAEA;EACA,IAAI,CAACG,IAAI,CAACC,MAAM,CAACL,GAAG,CAAC,EAAE;IACnB,OAAOQ,yBAAG,CAACE,GAAG,CAACN,IAAI,mBAAYJ,GAAG,GAAI,CAACE,OAAO,CAAC,CAAC;EACpD;;EAEA;EACA,IAAID,KAAK,KAAK,IAAI,EAAE;IAChB;IACA,OAAOO,yBAAG,CAACE,GAAG,CAACN,IAAI,EAAE,QAAQ,EAAE,UAACC,MAAkB,EAAK;MACnD,IAAMM,SAAS,oCAAON,MAAM,CAAC;MAC7BM,SAAS,CAACC,MAAM,CAACZ,GAAG,EAAE,CAAC,EAAE,CAACE,OAAO,CAAC,CAAC;MACnC,OAAOS,SAAS;IACpB,CAAC,CAAC;EACN;EAEA,OAAOH,yBAAG,CAACE,GAAG,CAACN,IAAI,mBAAYJ,GAAG,GAAI,UAACK,MAAgB,EAAK;IACxD,IAAMM,SAAS,oCAAON,MAAM,CAAC;IAC7BM,SAAS,CAACC,MAAM,CAACX,KAAK,EAAE,CAAC,EAAEC,OAAO,CAAC;IACnC,OAAOS,SAAS;EACpB,CAAC,CAAC;AACN,CAAC;AAAC,eAEa,kBAAqBhB,MAA0B,EAAQ;EAClE,OAAOa,yBAAG,CAACE,GAAG,CAAChB,SAAS,CAAIC,MAAM,CAAC,EAAE,QAAQ,EAAE,UAACU,MAAkB,EAAK;IACnE,OAAO,iCAAIA,MAAM,EAAEQ,MAAM,CAAC,UAAAb,GAAG;MAAA,OAAIA,GAAG,CAACc,MAAM,GAAG,CAAC;IAAA,EAAC;EACpD,CAAC,CAAC;AACN,CAAC;AAAA"}

package/admin/components/FieldEditor/utils/moveRow.js

@@ -1,23 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-
 var _default = function _default(_ref) {
   var data = _ref.data,
-      source = _ref.source,
-      destination = _ref.destination;
+    source = _ref.source,
+    destination = _ref.destination;
   return _dotPropImmutable.default.set(data, "layout", function (layout) {
     return source < destination ? [].concat((0, _toConsumableArray2.default)(layout.slice(0, source)), (0, _toConsumableArray2.default)(layout.slice(source + 1, destination)), [layout[source]], (0, _toConsumableArray2.default)(layout.slice(destination))) : [].concat((0, _toConsumableArray2.default)(layout.slice(0, destination)), [layout[source]], (0, _toConsumableArray2.default)(layout.slice(destination, source)), (0, _toConsumableArray2.default)(layout.slice(source + 1)));
   });
 };
-
 exports.default = _default;

package/admin/components/FieldEditor/utils/moveRow.js.map

@@ -1 +1 @@
-{"version":3,"names":["data","source","destination","dot","set","layout","slice"],"sources":["moveRow.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsModel } from \"~/types\";\n\ninterface Params {\n    source: number;\n    destination: number;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default ({ data, source, destination }: Params) => {\n    return dot.set(data, \"layout\", (layout: string[][]) => {\n        return source < destination\n            ? [\n                  ...layout.slice(0, source),\n                  ...layout.slice(source + 1, destination),\n                  layout[source],\n                  ...layout.slice(destination)\n              ]\n            : [\n                  ...layout.slice(0, destination),\n                  layout[source],\n                  ...layout.slice(destination, source),\n                  ...layout.slice(source + 1)\n              ];\n    });\n};\n"],"mappings":";;;;;;;;;;;AAAA;;eAQe,wBAA2C;EAAA,IAAxCA,IAAwC,QAAxCA,IAAwC;EAAA,IAAlCC,MAAkC,QAAlCA,MAAkC;EAAA,IAA1BC,WAA0B,QAA1BA,WAA0B;EACtD,OAAOC,yBAAA,CAAIC,GAAJ,CAAQJ,IAAR,EAAc,QAAd,EAAwB,UAACK,MAAD,EAAwB;IACnD,OAAOJ,MAAM,GAAGC,WAAT,8CAEMG,MAAM,CAACC,KAAP,CAAa,CAAb,EAAgBL,MAAhB,CAFN,oCAGMI,MAAM,CAACC,KAAP,CAAaL,MAAM,GAAG,CAAtB,EAAyBC,WAAzB,CAHN,IAIGG,MAAM,CAACJ,MAAD,CAJT,oCAKMI,MAAM,CAACC,KAAP,CAAaJ,WAAb,CALN,gDAQMG,MAAM,CAACC,KAAP,CAAa,CAAb,EAAgBJ,WAAhB,CARN,IASGG,MAAM,CAACJ,MAAD,CATT,oCAUMI,MAAM,CAACC,KAAP,CAAaJ,WAAb,EAA0BD,MAA1B,CAVN,oCAWMI,MAAM,CAACC,KAAP,CAAaL,MAAM,GAAG,CAAtB,CAXN,EAAP;EAaH,CAdM,CAAP;AAeH,C"}
+{"version":3,"names":["data","source","destination","dot","set","layout","slice"],"sources":["moveRow.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsModel } from \"~/types\";\n\ninterface Params {\n    source: number;\n    destination: number;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default ({ data, source, destination }: Params) => {\n    return dot.set(data, \"layout\", (layout: string[][]) => {\n        return source < destination\n            ? [\n                  ...layout.slice(0, source),\n                  ...layout.slice(source + 1, destination),\n                  layout[source],\n                  ...layout.slice(destination)\n              ]\n            : [\n                  ...layout.slice(0, destination),\n                  layout[source],\n                  ...layout.slice(destination, source),\n                  ...layout.slice(source + 1)\n              ];\n    });\n};\n"],"mappings":";;;;;;;;AAAA;AAAqC,eAQtB,wBAA2C;EAAA,IAAxCA,IAAI,QAAJA,IAAI;IAAEC,MAAM,QAANA,MAAM;IAAEC,WAAW,QAAXA,WAAW;EACvC,OAAOC,yBAAG,CAACC,GAAG,CAACJ,IAAI,EAAE,QAAQ,EAAE,UAACK,MAAkB,EAAK;IACnD,OAAOJ,MAAM,GAAGC,WAAW,8CAEdG,MAAM,CAACC,KAAK,CAAC,CAAC,EAAEL,MAAM,CAAC,oCACvBI,MAAM,CAACC,KAAK,CAACL,MAAM,GAAG,CAAC,EAAEC,WAAW,CAAC,IACxCG,MAAM,CAACJ,MAAM,CAAC,oCACXI,MAAM,CAACC,KAAK,CAACJ,WAAW,CAAC,gDAGzBG,MAAM,CAACC,KAAK,CAAC,CAAC,EAAEJ,WAAW,CAAC,IAC/BG,MAAM,CAACJ,MAAM,CAAC,oCACXI,MAAM,CAACC,KAAK,CAACJ,WAAW,EAAED,MAAM,CAAC,oCACjCI,MAAM,CAACC,KAAK,CAACL,MAAM,GAAG,CAAC,CAAC,EAC9B;EACX,CAAC,CAAC;AACN,CAAC;AAAA"}

package/admin/components/IconPicker.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormComponentProps } from "@webiny/ui/types";
+export interface IconPickerProps extends FormComponentProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const IconPicker: React.FC<IconPickerProps>;

package/admin/{views/contentModelGroups → components}/IconPicker.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
+exports.IconPicker = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var React = _interopRequireWildcard(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _emotion = require("emotion");
-
 var _plugins = require("@webiny/plugins");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _reactVirtualized = require("react-virtualized");
-
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-
 var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
-
 var _Menu = require("@webiny/ui/Menu");
-
 var _Input = require("@webiny/ui/Input");
-
 var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-
 /**
  * Controls the helper text below the checkbox.
  * @type {string}
@@ -39,11 +25,7 @@ var iconPickerLabel = /*#__PURE__*/(0, _emotion.css)({
   marginBottom: 5,
   marginLeft: 2
 }, "label:iconPickerLabel;");
-var MenuWrapper = /*#__PURE__*/(0, _emotion.css)({
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  padding: "16px 8px"
-}, "label:MenuWrapper;");
+var MenuWrapper = /*#__PURE__*/(0, _emotion.css)("color:var(--mdc-theme-text-secondary-on-background);background-color:var(--mdc-theme-on-background);border-bottom:1px solid var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,0.54));padding:16px 8px;cursor:pointer;:hover{border-bottom:1px solid rgba(0,0,0,1);}label:MenuWrapper;");
 var NoResultWrapper = /*#__PURE__*/(0, _emotion.css)({
   width: 640,
   color: "var(--mdc-theme-text-secondary-on-background)",
@@ -100,34 +82,37 @@ var searchInput = /*#__PURE__*/(0, _emotion.css)({
     padding: "20px 12px 20px"
   }
 }, "label:searchInput;");
-var useState = React.useState,
-    useCallback = React.useCallback,
-    useMemo = React.useMemo;
-
+var useState = _react.default.useState,
+  useCallback = _react.default.useCallback,
+  useMemo = _react.default.useMemo;
 var IconPicker = function IconPicker(_ref) {
   var value = _ref.value,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      description = _ref.description,
-      validation = _ref.validation;
-
+    onChange = _ref.onChange,
+    label = _ref.label,
+    description = _ref.description,
+    validation = _ref.validation;
   var _useState = useState(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    filter = _useState2[0],
+    setFilter = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      mustRenderGrid = _useState4[0],
-      setMustRenderGrid = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    mustRenderGrid = _useState4[0],
+    setMustRenderGrid = _useState4[1];
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (mustRenderGrid && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 50);
+  }, [mustRenderGrid]);
   var onFilterChange = useCallback(function (value, cb) {
     setFilter(value);
     cb();
   }, [filter]);
   var allIcons = useMemo(function () {
     var iconPlugins = _plugins.plugins.byType("cms-icons");
-
     return iconPlugins.reduce(function (icons, pl) {
       return icons.concat(pl.getIcons());
     }, []);
@@ -141,16 +126,14 @@ var IconPicker = function IconPicker(_ref) {
     var closeMenu = _ref2.closeMenu;
     return function renderCell(_ref3) {
       var columnIndex = _ref3.columnIndex,
-          key = _ref3.key,
-          rowIndex = _ref3.rowIndex,
-          style = _ref3.style;
+        key = _ref3.key,
+        rowIndex = _ref3.rowIndex,
+        style = _ref3.style;
       var item = icons[rowIndex * COLUMN_COUNT + columnIndex];
-
       if (!item) {
         return null;
       }
-
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         key: key,
         style: style,
         className: gridItem,
@@ -158,37 +141,36 @@ var IconPicker = function IconPicker(_ref) {
           if (onChange) {
             onChange(item.id.join("/"));
           }
-
           closeMenu();
         }
-      }, /*#__PURE__*/React.createElement(_reactFontawesome.FontAwesomeIcon, {
+      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
         icon: item.id,
         size: "2x"
-      }), /*#__PURE__*/React.createElement(_Typography.Typography, {
+      }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
         use: "body2"
       }, item.name));
     };
   }, [icons]);
   var renderGrid = useCallback(function (_ref4) {
     var closeMenu = _ref4.closeMenu;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DelayedOnChange.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
       value: filter,
       onChange: onFilterChange
     }, function (_ref5) {
       var value = _ref5.value,
-          onChange = _ref5.onChange;
-      return /*#__PURE__*/React.createElement(_Input.Input, {
-        autoFocus: true,
+        onChange = _ref5.onChange;
+      return /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        inputRef: inputRef,
         className: searchInput,
         value: value,
         onChange: onChange,
         placeholder: "Search icons..."
       });
-    }), icons.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    }), icons.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
       className: NoResultWrapper
-    }, /*#__PURE__*/React.createElement(_Typography.Typography, {
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "body1"
-    }, "No results found.")) : /*#__PURE__*/React.createElement(_reactVirtualized.Grid, {
+    }, "No results found.")) : /*#__PURE__*/_react.default.createElement(_reactVirtualized.Grid, {
       className: grid,
       cellRenderer: renderCell({
         closeMenu: closeMenu
@@ -202,34 +184,30 @@ var IconPicker = function IconPicker(_ref) {
     }));
   }, [icons]);
   var fontAwesomeIconValue = typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
-
   var _ref6 = validation || {},
-      validationIsValid = _ref6.isValid,
-      validationMessage = _ref6.message;
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    validationIsValid = _ref6.isValid,
+    validationMessage = _ref6.message;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
     className: iconPickerLabel
-  }, /*#__PURE__*/React.createElement(_Typography.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "body1"
-  }, label)), /*#__PURE__*/React.createElement("div", {
-    className: MenuWrapper
-  }, /*#__PURE__*/React.createElement(_Menu.Menu, {
+  }, label)), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
     onOpen: function onOpen() {
       return setMustRenderGrid(true);
     },
     onClose: function onClose() {
       return setMustRenderGrid(false);
     },
-    handle: /*#__PURE__*/React.createElement("div", {
+    handle: /*#__PURE__*/_react.default.createElement("div", {
+      className: MenuWrapper
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: pickIcon
-    }, /*#__PURE__*/React.createElement(_reactFontawesome.FontAwesomeIcon, {
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
       icon: fontAwesomeIconValue,
       size: "2x"
-    }))
-  }, mustRenderGrid && renderGrid)), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
+    })))
+  }, mustRenderGrid && renderGrid), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
 };
-
-var _default = IconPicker;
-exports.default = _default;
+exports.IconPicker = IconPicker;

package/admin/components/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconPickerLabel","css","marginBottom","marginLeft","MenuWrapper","NoResultWrapper","width","color","padding","COLUMN_COUNT","gridItem","display","flexDirection","justifyContent","boxSizing","paddingTop","alignItems","textAlign","cursor","transform","borderRadius","transition","boxShadow","content","position","top","left","height","zIndex","opacity","backgroundColor","grid","pickIcon","searchInput","input","useState","React","useCallback","useMemo","IconPicker","value","onChange","label","description","validation","filter","setFilter","mustRenderGrid","setMustRenderGrid","inputRef","useRef","useEffect","setTimeout","current","focus","onFilterChange","cb","allIcons","iconPlugins","plugins","byType","reduce","icons","pl","concat","getIcons","ic","name","includes","renderCell","closeMenu","columnIndex","key","rowIndex","style","item","id","join","renderGrid","length","Math","ceil","fontAwesomeIconValue","split","validationIsValid","isValid","validationMessage","message"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { css } from \"emotion\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Grid } from \"react-virtualized\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport DelayedOnChange from \"./DelayedOnChange\";\nimport { Menu } from \"@webiny/ui/Menu\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsIcon, CmsIconsPlugin } from \"~/types\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { GridCellProps } from \"react-virtualized/dist/es/Grid\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });\n\nconst MenuWrapper = css`\n    color: var(--mdc-theme-text-secondary-on-background);\n    background-color: var(--mdc-theme-on-background);\n    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));\n    padding: 16px 8px;\n    cursor: pointer;\n    :hover {\n        border-bottom: 1px solid rgba(0, 0, 0, 1);\n    }\n`;\n\nconst NoResultWrapper = css({\n    width: 640,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    padding: \"16px 12px\"\n});\n\nconst COLUMN_COUNT = 6;\n\nconst gridItem = css({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"flex-start\",\n    boxSizing: \"border-box\",\n    paddingTop: 15,\n    alignItems: \"center\",\n    textAlign: \"center\",\n    cursor: \"pointer\",\n    transform: \"translateZ(0)\",\n    borderRadius: 2,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    transition: \"all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n    \"&::after\": {\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    },\n    \">svg\": {\n        width: 42,\n        marginBottom: 5\n    }\n});\n\nconst grid = css({\n    padding: 20\n});\n\nconst pickIcon = css({\n    width: 50,\n    textAlign: \"center\",\n    cursor: \"pointer\"\n});\n\nconst searchInput = css({\n    input: {\n        padding: \"20px 12px 20px\"\n    }\n});\n\nconst { useState, useCallback, useMemo } = React;\n\nexport interface IconPickerProps extends FormComponentProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\nexport const IconPicker: React.FC<IconPickerProps> = ({\n    value,\n    onChange,\n    label,\n    description,\n    validation\n}) => {\n    const [filter, setFilter] = useState(\"\");\n    const [mustRenderGrid, setMustRenderGrid] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (mustRenderGrid && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [mustRenderGrid]);\n\n    const onFilterChange = useCallback(\n        (value, cb) => {\n            setFilter(value);\n            cb();\n        },\n        [filter]\n    );\n\n    const allIcons: CmsIcon[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<CmsIcon>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const icons = useMemo(() => {\n        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;\n    }, [filter]);\n\n    const renderCell = useCallback(\n        ({ closeMenu }) => {\n            return function renderCell({\n                columnIndex,\n                key,\n                rowIndex,\n                style\n            }: GridCellProps): React.ReactNode {\n                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];\n                if (!item) {\n                    return null;\n                }\n\n                return (\n                    <div\n                        key={key}\n                        style={style}\n                        className={gridItem}\n                        onClick={() => {\n                            if (onChange) {\n                                onChange(item.id.join(\"/\"));\n                            }\n                            closeMenu();\n                        }}\n                    >\n                        <FontAwesomeIcon icon={item.id} size={\"2x\"} />\n                        <Typography use={\"body2\"}>{item.name}</Typography>\n                    </div>\n                );\n            };\n        },\n        [icons]\n    );\n\n    const renderGrid = useCallback(\n        ({ closeMenu }) => {\n            return (\n                <>\n                    <DelayedOnChange value={filter} onChange={onFilterChange}>\n                        {({ value, onChange }) => (\n                            <Input\n                                inputRef={inputRef}\n                                className={searchInput}\n                                value={value}\n                                onChange={onChange}\n                                placeholder={\"Search icons...\"}\n                            />\n                        )}\n                    </DelayedOnChange>\n                    {icons.length === 0 ? (\n                        <div className={NoResultWrapper}>\n                            <Typography use=\"body1\">No results found.</Typography>\n                        </div>\n                    ) : (\n                        <Grid\n                            className={grid}\n                            cellRenderer={renderCell({ closeMenu })}\n                            columnCount={COLUMN_COUNT}\n                            columnWidth={100}\n                            height={440}\n                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}\n                            rowHeight={100}\n                            width={640}\n                        />\n                    )}\n                </>\n            );\n        },\n        [icons]\n    );\n\n    const fontAwesomeIconValue: any =\n        typeof value === \"string\" && value.includes(\"/\") ? value.split(\"/\") : [\"fas\", \"star\"];\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <>\n            {label && (\n                <div className={iconPickerLabel}>\n                    <Typography use={\"body1\"}>{label}</Typography>\n                </div>\n            )}\n\n            <Menu\n                onOpen={() => setMustRenderGrid(true)}\n                onClose={() => setMustRenderGrid(false)}\n                handle={\n                    <div className={MenuWrapper}>\n                        <div className={pickIcon}>\n                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={\"2x\"} />\n                        </div>\n                    </div>\n                }\n            >\n                {mustRenderGrid && renderGrid}\n            </Menu>\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}