@corva/ui 0.65.0-0 → 0.65.0-1-test

package/components/GradientManager/GradientList.js

@@ -1 +1,143 @@
-import{__spreadArray as t,__assign as e}from'./../../ext-esm/tslib/tslib.es6.js';import{map as r,snakeCase as n,find as o,some as i,reject as a}from"lodash";import{NAME_IS_MISSING_MESSAGE as s,ALREADY_EXISTS_MESSAGE as d,GRADIENT_NEW_NAME as u}from"./configuration/constants.js";var h=function(){function h(t,e,r){void 0===t&&(t=[]),void 0===e&&(e=[]),this.gradients=t,this.defaultGradients=e,this.onGradientsChange=r}return h.prototype.generateId=function(e){for(var o=new Set(r(t(t([],this.gradients,!0),this.defaultGradients,!0),"id")),i=n(e),a=0;o.has(i+(a?"_".concat(a):""));)a+=1;return i+(a?"_".concat(a):"")},h.prototype.getById=function(t){return o(this.gradients,{id:t})||o(this.defaultGradients,{id:t})},h.prototype.getByName=function(e){var r=(e||"").toLocaleLowerCase();return o(t(t([],this.gradients,!0),this.defaultGradients,!0),(function(t){return t.name.toLocaleLowerCase()===r}))},h.prototype.newName=function(t){void 0===t&&(t=u);for(var e=0;this.getByName(t+(e?" ".concat(e):""));)e+=1;return t+(e?" ".concat(e):"")},h.prototype.isDefault=function(t){return i(this.defaultGradients,{id:t})},h.prototype.getHelperText=function(t){var e=t.name,r=t.allowNoname,n=t.gradientId;if(!r&&!e)return{error:!1,helperText:s};var o=this.getByName(e);return o&&o.id!==n?{error:!0,helperText:d}:null},h.prototype.add=function(e,r){if(!e)throw new Error(s);if(this.gradients.map((function(t){return t.name.toLocaleLowerCase()})).includes(e.toLocaleLowerCase()))throw new Error(d);var n={id:this.generateId(e),name:e,gradientStops:r};return this.onGradientsChange(t(t([],this.gradients,!0),[n],!1)),n},h.prototype.remove=function(t){var e=a(this.gradients,{id:t});return this.onGradientsChange(e),e},h.prototype.update=function(t,r){var n=this.gradients.map((function(n){return n.id===t?e(e({},n),r):n}));return this.onGradientsChange(n),n},h}();export{h as GradientList};
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { map, snakeCase, find, some, reject } from 'lodash';
+import { NAME_IS_MISSING_MESSAGE, ALREADY_EXISTS_MESSAGE, GRADIENT_NEW_NAME } from './configuration/constants.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * An utility class used to manage Custom Gradients
+ */
+var GradientList = /*#__PURE__*/function () {
+  function GradientList() {
+    var gradients = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var defaultGradients = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var onGradientsChange = arguments.length > 2 ? arguments[2] : undefined;
+    _classCallCheck(this, GradientList);
+    _defineProperty(this, "gradients", void 0);
+    _defineProperty(this, "defaultGradients", void 0);
+    _defineProperty(this, "onGradientsChange", void 0);
+    this.gradients = gradients;
+    this.defaultGradients = defaultGradients;
+    this.onGradientsChange = onGradientsChange;
+  }
+  _createClass(GradientList, [{
+    key: "generateId",
+    value: function generateId(name) {
+      var ids = new Set(map([].concat(_toConsumableArray(this.gradients), _toConsumableArray(this.defaultGradients)), 'id'));
+      var id = snakeCase(name);
+      var prefix = 0;
+      while (ids.has(id + (prefix ? "_".concat(prefix) : ''))) {
+        prefix += 1;
+      }
+      return id + (prefix ? "_".concat(prefix) : '');
+    }
+  }, {
+    key: "getById",
+    value: function getById(id) {
+      return find(this.gradients, {
+        id: id
+      }) || find(this.defaultGradients, {
+        id: id
+      });
+    }
+  }, {
+    key: "getByName",
+    value: function getByName(sampleName) {
+      var sample = (sampleName || '').toLocaleLowerCase();
+      return find([].concat(_toConsumableArray(this.gradients), _toConsumableArray(this.defaultGradients)), function (_ref) {
+        var name = _ref.name;
+        return name.toLocaleLowerCase() === sample;
+      });
+    }
+  }, {
+    key: "newName",
+    value: function newName() {
+      var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : GRADIENT_NEW_NAME;
+      var prefix = 0;
+      while (this.getByName(name + (prefix ? " ".concat(prefix) : ''))) {
+        prefix += 1;
+      }
+      return name + (prefix ? " ".concat(prefix) : '');
+    }
+  }, {
+    key: "isDefault",
+    value: function isDefault(id) {
+      return some(this.defaultGradients, {
+        id: id
+      });
+    }
+  }, {
+    key: "getHelperText",
+    value: function getHelperText(_ref2) {
+      var name = _ref2.name,
+        allowNoname = _ref2.allowNoname,
+        gradientId = _ref2.gradientId;
+      var emptyAndNotAllowed = !allowNoname && !name;
+      if (emptyAndNotAllowed) {
+        return {
+          error: false,
+          helperText: NAME_IS_MISSING_MESSAGE
+        };
+      }
+      var existing = this.getByName(name);
+      var nameAlreadyUsed = existing && existing.id !== gradientId;
+      if (nameAlreadyUsed) {
+        return {
+          error: true,
+          helperText: ALREADY_EXISTS_MESSAGE
+        };
+      }
+      return null;
+    }
+  }, {
+    key: "add",
+    value: function add(name, gradientStops) {
+      if (!name) {
+        throw new Error(NAME_IS_MISSING_MESSAGE);
+      }
+      var names = this.gradients.map(function (_ref3) {
+        var name = _ref3.name;
+        return name.toLocaleLowerCase();
+      });
+      if (names.includes(name.toLocaleLowerCase())) {
+        throw new Error(ALREADY_EXISTS_MESSAGE);
+      }
+      var id = this.generateId(name);
+      var gradient = {
+        id: id,
+        name: name,
+        gradientStops: gradientStops
+      };
+      this.onGradientsChange([].concat(_toConsumableArray(this.gradients), [gradient]));
+      return gradient;
+    }
+  }, {
+    key: "remove",
+    value: function remove(id) {
+      var gradients = reject(this.gradients, {
+        id: id
+      });
+      this.onGradientsChange(gradients);
+      return gradients;
+    }
+  }, {
+    key: "update",
+    value: function update(id, _update) {
+      var gradients = this.gradients.map(function (current) {
+        if (current.id === id) {
+          return _objectSpread(_objectSpread({}, current), _update);
+        }
+        return current;
+      });
+      this.onGradientsChange(gradients);
+      return gradients;
+    }
+  }]);
+  return GradientList;
+}();
+
+export { GradientList };
+//# sourceMappingURL=GradientList.js.map

package/components/GradientManager/GradientList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientList.js","sources":["../../../src/components/GradientManager/GradientList.ts"],"sourcesContent":["import { find, map, reject, snakeCase, some } from 'lodash';\nimport {\n  ALREADY_EXISTS_MESSAGE,\n  GRADIENT_NEW_NAME,\n  NAME_IS_MISSING_MESSAGE,\n} from './configuration/constants';\nimport type { CustomGradient, GradientFillStop } from '~/types';\n\n/**\n * An utility class used to manage Custom Gradients\n */\nexport class GradientList {\n\n  gradients: CustomGradient[];\n  defaultGradients: CustomGradient[];\n  onGradientsChange: (gradients: CustomGradient[]) => void;\n\n  constructor(\n    gradients: CustomGradient[] = [],\n    defaultGradients: CustomGradient[] = [],\n    onGradientsChange: (gradients: CustomGradient[]) => void\n  ) {\n    this.gradients = gradients;\n    this.defaultGradients = defaultGradients;\n    this.onGradientsChange = onGradientsChange;\n  }\n\n  generateId(name: string) {\n    const ids = new Set(map([...this.gradients, ...this.defaultGradients], 'id'));\n    const id = snakeCase(name);\n    let prefix = 0;\n    while (ids.has(id + (prefix ? `_${prefix}` : ''))) {\n      prefix += 1;\n    }\n\n    return id + (prefix ? `_${prefix}` : '');\n  }\n\n  public getById(id: string) {\n    return find(this.gradients, { id }) || find(this.defaultGradients, { id });\n  }\n\n  public getByName(sampleName: string) {\n    const sample = (sampleName || '').toLocaleLowerCase();\n    return find(\n      [...this.gradients, ...this.defaultGradients],\n      ({ name }) => name.toLocaleLowerCase() === sample\n    );\n  }\n\n  newName(name = GRADIENT_NEW_NAME) {\n    let prefix = 0;\n    while (this.getByName(name + (prefix ? ` ${prefix}` : ''))) {\n      prefix += 1;\n    }\n    return name + (prefix ? ` ${prefix}` : '');\n  }\n\n  public isDefault(id: string) {\n    return some(this.defaultGradients, { id });\n  }\n\n  public getHelperText({ name, allowNoname, gradientId }) {\n    const emptyAndNotAllowed = !allowNoname && !name;\n\n    if (emptyAndNotAllowed) {\n      return {\n        error: false,\n        helperText: NAME_IS_MISSING_MESSAGE,\n      };\n    }\n\n    const existing = this.getByName(name);\n\n    const nameAlreadyUsed = existing && existing.id !== gradientId;\n    if (nameAlreadyUsed) {\n      return {\n        error: true,\n        helperText: ALREADY_EXISTS_MESSAGE,\n      };\n    }\n\n    return null;\n  };\n\n  public add(name: string, gradientStops: GradientFillStop[]) {\n    if (!name) {\n      throw new Error(NAME_IS_MISSING_MESSAGE);\n    }\n    const names = this.gradients.map(({ name }) => name.toLocaleLowerCase());\n    if (names.includes(name.toLocaleLowerCase())) {\n      throw new Error(ALREADY_EXISTS_MESSAGE);\n    }\n\n    const id = this.generateId(name);\n    const gradient = { id, name, gradientStops };\n    this.onGradientsChange([...this.gradients, gradient]);\n    return gradient;\n  }\n\n  public remove(id: string) {\n    const gradients = reject(this.gradients, { id });\n    this.onGradientsChange(gradients);\n    return gradients;\n  }\n\n  public update(id: string, update: Partial<CustomGradient>) {\n    const gradients =  this.gradients.map(current => {\n      if (current.id === id) {\n        return {\n          ...current,\n          ...update,\n        };\n      }\n      return current;\n    });\n    this.onGradientsChange(gradients);\n    return gradients;\n  }\n}\n"],"names":["GradientList","gradients","defaultGradients","onGradientsChange","name","ids","Set","map","id","snakeCase","prefix","has","find","sampleName","sample","toLocaleLowerCase","GRADIENT_NEW_NAME","getByName","some","allowNoname","gradientId","emptyAndNotAllowed","error","helperText","NAME_IS_MISSING_MESSAGE","existing","nameAlreadyUsed","ALREADY_EXISTS_MESSAGE","gradientStops","Error","names","includes","generateId","gradient","reject","update","current"],"mappings":";;;;;;;;;AAQA;AACA;AACA;AACA,IAAaA,YAAY,gBAAA,YAAA;EAMvB,SAIE,YAAA,GAAA;IAAA,IAHAC,SAA2B,uEAAG,EAAE,CAAA;IAAA,IAChCC,gBAAkC,uEAAG,EAAE,CAAA;AAAA,IAAA,IACvCC,iBAAwD,GAAA,SAAA,CAAA,MAAA,GAAA,CAAA,GAAA,SAAA,CAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;IAExD,IAAI,CAACF,SAAS,GAAGA,SAAS,CAAA;IAC1B,IAAI,CAACC,gBAAgB,GAAGA,gBAAgB,CAAA;IACxC,IAAI,CAACC,iBAAiB,GAAGA,iBAAiB,CAAA;AAC5C,GAAA;AAAC,EAAA,YAAA,CAAA,YAAA,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,YAAA;IAAA,KAED,EAAA,SAAA,UAAA,CAAWC,IAAY,EAAE;AACvB,MAAA,IAAMC,GAAG,GAAG,IAAIC,GAAG,CAACC,GAAG,CAAK,EAAA,CAAA,MAAA,CAAA,kBAAA,CAAA,IAAI,CAACN,SAAS,sBAAK,IAAI,CAACC,gBAAgB,CAAG,CAAA,EAAA,IAAI,CAAC,CAAC,CAAA;AAC7E,MAAA,IAAMM,EAAE,GAAGC,SAAS,CAACL,IAAI,CAAC,CAAA;MAC1B,IAAIM,MAAM,GAAG,CAAC,CAAA;AACd,MAAA,OAAOL,GAAG,CAACM,GAAG,CAACH,EAAE,IAAIE,MAAM,GAAA,GAAA,CAAA,MAAA,CAAOA,MAAM,CAAA,GAAK,EAAE,CAAC,CAAC,EAAE;AACjDA,QAAAA,MAAM,IAAI,CAAC,CAAA;AACb,OAAA;AAEA,MAAA,OAAOF,EAAE,IAAIE,MAAM,cAAOA,MAAM,CAAA,GAAK,EAAE,CAAC,CAAA;AAC1C,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,SAAA;IAAA,KAED,EAAA,SAAA,OAAA,CAAeF,EAAU,EAAE;AACzB,MAAA,OAAOI,IAAI,CAAC,IAAI,CAACX,SAAS,EAAE;AAAEO,QAAAA,EAAE,EAAFA,EAAAA;AAAG,OAAC,CAAC,IAAII,IAAI,CAAC,IAAI,CAACV,gBAAgB,EAAE;AAAEM,QAAAA,EAAE,EAAFA,EAAAA;AAAG,OAAC,CAAC,CAAA;AAC5E,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,WAAA;IAAA,KAED,EAAA,SAAA,SAAA,CAAiBK,UAAkB,EAAE;MACnC,IAAMC,MAAM,GAAG,CAACD,UAAU,IAAI,EAAE,EAAEE,iBAAiB,EAAE,CAAA;MACrD,OAAOH,IAAI,8BACL,IAAI,CAACX,SAAS,CAAK,EAAA,kBAAA,CAAA,IAAI,CAACC,gBAAgB,CAC5C,CAAA,EAAA,UAAA,IAAA,EAAA;QAAA,IAAGE,IAAI,QAAJA,IAAI,CAAA;AAAA,QAAA,OAAOA,IAAI,CAACW,iBAAiB,EAAE,KAAKD,MAAM,CAAA;OAClD,CAAA,CAAA;AACH,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,SAAA;AAAA,IAAA,KAAA,EAED,SAAkC,OAAA,GAAA;MAAA,IAA1BV,IAAI,uEAAGY,iBAAiB,CAAA;MAC9B,IAAIN,MAAM,GAAG,CAAC,CAAA;AACd,MAAA,OAAO,IAAI,CAACO,SAAS,CAACb,IAAI,IAAIM,MAAM,GAAA,GAAA,CAAA,MAAA,CAAOA,MAAM,CAAA,GAAK,EAAE,CAAC,CAAC,EAAE;AAC1DA,QAAAA,MAAM,IAAI,CAAC,CAAA;AACb,OAAA;AACA,MAAA,OAAON,IAAI,IAAIM,MAAM,cAAOA,MAAM,CAAA,GAAK,EAAE,CAAC,CAAA;AAC5C,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,WAAA;IAAA,KAED,EAAA,SAAA,SAAA,CAAiBF,EAAU,EAAE;AAC3B,MAAA,OAAOU,IAAI,CAAC,IAAI,CAAChB,gBAAgB,EAAE;AAAEM,QAAAA,EAAE,EAAFA,EAAAA;AAAG,OAAC,CAAC,CAAA;AAC5C,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,eAAA;AAAA,IAAA,KAAA,EAED,SAAwD,aAAA,CAAA,KAAA,EAAA;MAAA,IAAjCJ,IAAI,SAAJA,IAAI;AAAEe,QAAAA,WAAW,SAAXA,WAAW;AAAEC,QAAAA,UAAU,SAAVA,UAAU,CAAA;AAClD,MAAA,IAAMC,kBAAkB,GAAG,CAACF,WAAW,IAAI,CAACf,IAAI,CAAA;AAEhD,MAAA,IAAIiB,kBAAkB,EAAE;QACtB,OAAO;AACLC,UAAAA,KAAK,EAAE,KAAK;AACZC,UAAAA,UAAU,EAAEC,uBAAAA;SACb,CAAA;AACH,OAAA;AAEA,MAAA,IAAMC,QAAQ,GAAG,IAAI,CAACR,SAAS,CAACb,IAAI,CAAC,CAAA;MAErC,IAAMsB,eAAe,GAAGD,QAAQ,IAAIA,QAAQ,CAACjB,EAAE,KAAKY,UAAU,CAAA;AAC9D,MAAA,IAAIM,eAAe,EAAE;QACnB,OAAO;AACLJ,UAAAA,KAAK,EAAE,IAAI;AACXC,UAAAA,UAAU,EAAEI,sBAAAA;SACb,CAAA;AACH,OAAA;AAEA,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,KAAA;AAAA,IAAA,KAAA,EAED,SAAWvB,GAAAA,CAAAA,IAAY,EAAEwB,aAAiC,EAAE;MAC1D,IAAI,CAACxB,IAAI,EAAE;AACT,QAAA,MAAM,IAAIyB,KAAK,CAACL,uBAAuB,CAAC,CAAA;AAC1C,OAAA;AACA,MAAA,IAAMM,KAAK,GAAG,IAAI,CAAC7B,SAAS,CAACM,GAAG,CAAC,UAAA,KAAA,EAAA;QAAA,IAAGH,IAAI,SAAJA,IAAI,CAAA;QAAA,OAAOA,IAAI,CAACW,iBAAiB,EAAE,CAAA;OAAC,CAAA,CAAA;MACxE,IAAIe,KAAK,CAACC,QAAQ,CAAC3B,IAAI,CAACW,iBAAiB,EAAE,CAAC,EAAE;AAC5C,QAAA,MAAM,IAAIc,KAAK,CAACF,sBAAsB,CAAC,CAAA;AACzC,OAAA;AAEA,MAAA,IAAMnB,EAAE,GAAG,IAAI,CAACwB,UAAU,CAAC5B,IAAI,CAAC,CAAA;AAChC,MAAA,IAAM6B,QAAQ,GAAG;AAAEzB,QAAAA,EAAE,EAAFA,EAAE;AAAEJ,QAAAA,IAAI,EAAJA,IAAI;AAAEwB,QAAAA,aAAa,EAAbA,aAAAA;OAAe,CAAA;MAC5C,IAAI,CAACzB,iBAAiB,CAAK,EAAA,CAAA,MAAA,CAAA,kBAAA,CAAA,IAAI,CAACF,SAAS,CAAA,EAAA,CAAEgC,QAAQ,CAAE,CAAA,CAAA,CAAA;AACrD,MAAA,OAAOA,QAAQ,CAAA;AACjB,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,QAAA;IAAA,KAED,EAAA,SAAA,MAAA,CAAczB,EAAU,EAAE;AACxB,MAAA,IAAMP,SAAS,GAAGiC,MAAM,CAAC,IAAI,CAACjC,SAAS,EAAE;AAAEO,QAAAA,EAAE,EAAFA,EAAAA;AAAG,OAAC,CAAC,CAAA;AAChD,MAAA,IAAI,CAACL,iBAAiB,CAACF,SAAS,CAAC,CAAA;AACjC,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;AAAC,GAAA,EAAA;AAAA,IAAA,GAAA,EAAA,QAAA;AAAA,IAAA,KAAA,EAED,SAAcO,MAAAA,CAAAA,EAAU,EAAE2B,OAA+B,EAAE;MACzD,IAAMlC,SAAS,GAAI,IAAI,CAACA,SAAS,CAACM,GAAG,CAAC,UAAA6B,OAAO,EAAI;AAC/C,QAAA,IAAIA,OAAO,CAAC5B,EAAE,KAAKA,EAAE,EAAE;UACrB,OACK4B,aAAAA,CAAAA,aAAAA,CAAAA,EAAAA,EAAAA,OAAO,GACPD,OAAM,CAAA,CAAA;AAEb,SAAA;AACA,QAAA,OAAOC,OAAO,CAAA;AAChB,OAAC,CAAC,CAAA;AACF,MAAA,IAAI,CAACjC,iBAAiB,CAACF,SAAS,CAAC,CAAA;AACjC,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;AAAC,GAAA,CAAA,CAAA,CAAA;AAAA,EAAA,OAAA,YAAA,CAAA;AAAA,CAAA;;;;"}

package/components/GradientManager/GradientManager.js

@@ -1 +1,281 @@
-import{__assign as t}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as n,Fragment as i}from"react/jsx-runtime";import{Grid as a,TextField as o,Box as r}from"@material-ui/core";import{noop as d,isEmpty as l,trim as s}from"lodash";import{useState as c,useEffect as m}from"react";import u from"@material-ui/icons/Check";import g from"@material-ui/icons/Close";import p from"@material-ui/icons/Edit";import f from"@material-ui/icons/Delete";import{DEFAULT_GRADIENTS as v,DEFAULT_GRADIENT_STOPS as h,TEMP_GRADIENT_ID as S,GRADIENT_MAX_NAME_LENGTH as I}from"./configuration/constants.js";import{GradientList as b}from"./GradientList.js";import C from"../IconButton/index.js";import{GradientSelect as G}from"./GradientSelect.js";import{GradientPicker as y}from"../GradientPicker/GradientPicker.js";import{useStyles as B}from"./GradientManager.styles.js";var N=function(N){var k,x=N.gradientId,j=N.onGradientEditStateChange,w=void 0===j?d:j,P=N.onChange,D=void 0===P?d:P,E=N.defaultGradients,F=void 0===E?v:E,M=N.defaultGradientStops,T=void 0===M?h:M,L=N.allowNoname,A=N.scaleOptions,H=void 0===A?{scaleFrom:0,scaleTo:100}:A,K=B(),O=new b(N.gradients||[],F,N.onGradientsChange),R=c(null),U=R[0],V=R[1],W=N.disableGradientsManagement||!N.onGradientsChange,_=O.getHelperText({name:null==U?void 0:U.name,allowNoname:L,gradientId:x});m((function(){w(Boolean(U))}),[Boolean(U)]);var q=(null===(k=O.getById(x))||void 0===k?void 0:k.gradientStops)||N.gradientStops||T,z=function(){if(l(_)){var t=U.gradientStops,e=s(U.name);if(V(null),e){if(O.getById(U.id||x))return O.update(x,{gradientStops:t,name:e}),void D({gradientId:x,gradientStops:t});var n=O.add(e,t);D({gradientId:null==n?void 0:n.id,gradientStops:t})}else L&&D({gradientStops:t,gradientId:null})}},J=function(t){t===x&&(D({gradientId:null,gradientStops:q}),V(null)),O.remove(t)},Q=function(e){var n=e.trimStart().substring(0,I);V(t(t({},U),{name:n}))};return e(a,t({container:!0},{children:[n(a,t({item:!0,xs:6},{children:U?n(o,t({className:K.customGradientName,label:"Gradient Name",value:U.name,onChange:function(t){return Q(t.target.value)},onFocus:function(t){t.target.select()},onKeyDown:function(t){var e;if("Enter"===t.key){var n=null===(e=t.target)||void 0===e?void 0:e.value;n&&(Q(n),z())}},autoFocus:!0,fullWidth:!0},_)):n(G,{value:x,gradients:N.gradients||[],onChange:function(t){var e,n=O.getById(t);D({gradientId:t,gradientStops:null!==(e=null==n?void 0:n.gradientStops)&&void 0!==e?e:T})},defaultGradients:F,onAction:function(t,e){switch(t){case"add":V({name:"",gradientStops:T,id:S});break;case"delete":J(e)}},readonly:W})})),n(a,t({item:!0,xs:6},{children:n(r,t({display:"flex",alignItems:"center",height:"100%"},{children:n(r,t({display:"flex",paddingLeft:1},{children:e(i,U?{children:[n(C,t({"data-testid":"save-gradient-btn",className:K.iconButton,onClick:z,tooltipProps:{title:"Save"},disabled:!!_||W},{children:n(u,{})})),n(C,t({"data-testid":"cancel-edit-btn",className:K.iconButton,onClick:function(){V(null)},tooltipProps:{title:"Cancel"}},{children:n(g,{})}))]}:{children:[n(C,t({"data-testid":"edit-gradient-btn",className:K.iconButton,onClick:function(){var t;O.isDefault(x)?V({name:O.newName(),gradientStops:q,id:S}):V({name:(null===(t=O.getById(x))||void 0===t?void 0:t.name)||"",gradientStops:q})},tooltipProps:{title:"Edit"},disabled:W},{children:n(p,{})})),!!O.getById(x)&&!O.isDefault(x)&&n(C,t({"data-testid":"delete-gradient-btn",className:K.iconButton,onClick:function(){return J(x)},tooltipProps:{title:"Remove"},disabled:W},{children:n(f,{})}))]})}))}))})),n(a,t({item:!0,xs:12},{children:n(y,{from:null==H?void 0:H.scaleFrom,to:null==H?void 0:H.scaleTo,unit:null==H?void 0:H.scaleUnit,noScale:!0,gradientStops:(null==U?void 0:U.gradientStops)||q,onChange:function(e){V(t(t({},U),{gradientStops:e}))},readonly:!U,isMoveInputVisible:!0})}))]}))};export{N as GradientManager};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Grid, TextField, Box } from '@material-ui/core';
+import { noop, isEmpty, trim } from 'lodash';
+import { useState, useEffect } from 'react';
+import CheckIcon from '@material-ui/icons/Check';
+import CloseIcon from '@material-ui/icons/Close';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { DEFAULT_GRADIENTS, DEFAULT_GRADIENT_STOPS, TEMP_GRADIENT_ID, GRADIENT_MAX_NAME_LENGTH } from './configuration/constants.js';
+import { GradientList } from './GradientList.js';
+import IconButton from '../IconButton/index.js';
+import { GradientSelect } from './GradientSelect.js';
+import { GradientPicker } from '../GradientPicker/GradientPicker.js';
+import { useStyles } from './GradientManager.styles.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var GradientManager = function GradientManager(props) {
+  var _gradientList$getById;
+  var gradientId = props.gradientId,
+    _props$onGradientEdit = props.onGradientEditStateChange,
+    onGradientEditStateChange = _props$onGradientEdit === void 0 ? noop : _props$onGradientEdit,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? noop : _props$onChange,
+    _props$defaultGradien = props.defaultGradients,
+    defaultGradients = _props$defaultGradien === void 0 ? DEFAULT_GRADIENTS : _props$defaultGradien,
+    _props$defaultGradien2 = props.defaultGradientStops,
+    defaultGradientStops = _props$defaultGradien2 === void 0 ? DEFAULT_GRADIENT_STOPS : _props$defaultGradien2,
+    allowNoname = props.allowNoname,
+    _props$scaleOptions = props.scaleOptions,
+    scaleOptions = _props$scaleOptions === void 0 ? {
+      scaleFrom: 0,
+      scaleTo: 100
+    } : _props$scaleOptions;
+  var classes = useStyles();
+  var gradientList = new GradientList(props.gradients || [], defaultGradients, props.onGradientsChange);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentlyEdited = _useState2[0],
+    setCurrentlyEdited = _useState2[1];
+  var disableGradientsManagement = props.disableGradientsManagement || !props.onGradientsChange;
+  var validationResult = gradientList.getHelperText({
+    name: currentlyEdited === null || currentlyEdited === void 0 ? void 0 : currentlyEdited.name,
+    allowNoname: allowNoname,
+    gradientId: gradientId
+  });
+
+  /**
+   * Calls editStateChange handler when gradient edit starts or ends.
+   * Will be called with false on component mount
+   */
+  useEffect(function () {
+    onGradientEditStateChange(Boolean(currentlyEdited));
+  }, [Boolean(currentlyEdited)]);
+
+  /**
+   * Use stops from the stored gradient first, then fallback to stored in the trace
+   * and finally, use defaultGradientStops if none of above is available
+   */
+  var gradientStops = ((_gradientList$getById = gradientList.getById(gradientId)) === null || _gradientList$getById === void 0 ? void 0 : _gradientList$getById.gradientStops) || props.gradientStops || defaultGradientStops;
+  var cancelEdit = function cancelEdit() {
+    setCurrentlyEdited(null);
+  };
+  var startAddGradient = function startAddGradient() {
+    setCurrentlyEdited({
+      name: '',
+      gradientStops: defaultGradientStops,
+      id: TEMP_GRADIENT_ID
+    });
+  };
+  var startEditGradient = function startEditGradient() {
+    var _gradientList$getById2;
+    if (gradientList.isDefault(gradientId)) {
+      setCurrentlyEdited({
+        name: gradientList.newName(),
+        gradientStops: gradientStops,
+        id: TEMP_GRADIENT_ID
+      });
+      return;
+    }
+    setCurrentlyEdited({
+      name: ((_gradientList$getById2 = gradientList.getById(gradientId)) === null || _gradientList$getById2 === void 0 ? void 0 : _gradientList$getById2.name) || '',
+      gradientStops: gradientStops
+    });
+  };
+  var saveChanges = function saveChanges() {
+    if (!isEmpty(validationResult)) {
+      return;
+    }
+    var gradientStops = currentlyEdited.gradientStops;
+    var name = trim(currentlyEdited.name);
+    setCurrentlyEdited(null);
+
+    // No name - no need to create a gradient. Saving stops to the trace.
+    if (!name) {
+      if (allowNoname) {
+        onChange({
+          gradientStops: gradientStops,
+          gradientId: null
+        });
+      }
+      return;
+    }
+
+    /**
+     * Gradient exists - Updating
+     * simple check that gradientId is not null is NOT enough because
+     * Deleted gradients have gradientId but should be handles as non-existing ones.
+     */
+    if (gradientList.getById(currentlyEdited.id || gradientId)) {
+      gradientList.update(gradientId, {
+        gradientStops: gradientStops,
+        name: name
+      });
+      onChange({
+        gradientId: gradientId,
+        gradientStops: gradientStops
+      });
+      return;
+    }
+
+    // Creating a new gradient
+    var newGradient = gradientList.add(name, gradientStops);
+    onChange({
+      gradientId: newGradient === null || newGradient === void 0 ? void 0 : newGradient.id,
+      gradientStops: gradientStops
+    });
+  };
+  var deleteGradient = function deleteGradient(id) {
+    if (id === gradientId) {
+      onChange({
+        gradientId: null,
+        gradientStops: gradientStops
+      });
+      setCurrentlyEdited(null);
+    }
+    gradientList.remove(id);
+  };
+  var handleNameChange = function handleNameChange(value) {
+    var name = value.trimStart().substring(0, GRADIENT_MAX_NAME_LENGTH);
+    setCurrentlyEdited(_objectSpread(_objectSpread({}, currentlyEdited), {}, {
+      name: name
+    }));
+  };
+  var handleGradientAction = function handleGradientAction(type, id) {
+    switch (type) {
+      case 'add':
+        startAddGradient();
+        break;
+      case 'delete':
+        {
+          deleteGradient(id);
+          break;
+        }
+    }
+  };
+  var handleGradientSelect = function handleGradientSelect(id) {
+    var _gradient$gradientSto;
+    var gradient = gradientList.getById(id);
+    onChange({
+      gradientId: id,
+      gradientStops: (_gradient$gradientSto = gradient === null || gradient === void 0 ? void 0 : gradient.gradientStops) !== null && _gradient$gradientSto !== void 0 ? _gradient$gradientSto : defaultGradientStops
+    });
+  };
+  var handleGradientChange = function handleGradientChange(gradientStops) {
+    setCurrentlyEdited(_objectSpread(_objectSpread({}, currentlyEdited), {}, {
+      gradientStops: gradientStops
+    }));
+  };
+  var handleNameKeyDown = function handleNameKeyDown(evt) {
+    if (evt.key === 'Enter') {
+      var _evt$target;
+      // @ts-ignore
+      var value = (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.value;
+      if (value) {
+        handleNameChange(value);
+        saveChanges();
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs(Grid, {
+    container: true,
+    children: [/*#__PURE__*/jsx(Grid, {
+      item: true,
+      xs: 6,
+      children: currentlyEdited ? /*#__PURE__*/jsx(TextField, _objectSpread({
+        className: classes.customGradientName,
+        label: "Gradient Name",
+        value: currentlyEdited.name,
+        onChange: function onChange(evt) {
+          return handleNameChange(evt.target.value);
+        },
+        onFocus: function onFocus(event) {
+          event.target.select();
+        },
+        onKeyDown: handleNameKeyDown,
+        autoFocus: true,
+        fullWidth: true
+      }, validationResult)) : /*#__PURE__*/jsx(GradientSelect, {
+        value: gradientId,
+        gradients: props.gradients || [],
+        onChange: handleGradientSelect,
+        defaultGradients: defaultGradients,
+        onAction: handleGradientAction,
+        readonly: disableGradientsManagement
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      item: true,
+      xs: 6,
+      children: /*#__PURE__*/jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        height: "100%",
+        children: /*#__PURE__*/jsx(Box, {
+          display: "flex",
+          paddingLeft: 1,
+          children: currentlyEdited ? /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(IconButton, {
+              "data-testid": "save-gradient-btn",
+              className: classes.iconButton,
+              onClick: saveChanges,
+              tooltipProps: {
+                title: 'Save'
+              },
+              disabled: !!validationResult || disableGradientsManagement,
+              children: /*#__PURE__*/jsx(CheckIcon, {})
+            }), /*#__PURE__*/jsx(IconButton, {
+              "data-testid": "cancel-edit-btn",
+              className: classes.iconButton,
+              onClick: cancelEdit,
+              tooltipProps: {
+                title: 'Cancel'
+              },
+              children: /*#__PURE__*/jsx(CloseIcon, {})
+            })]
+          }) : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(IconButton, {
+              "data-testid": "edit-gradient-btn",
+              className: classes.iconButton,
+              onClick: startEditGradient,
+              tooltipProps: {
+                title: 'Edit'
+              },
+              disabled: disableGradientsManagement,
+              children: /*#__PURE__*/jsx(EditIcon, {})
+            }), !!gradientList.getById(gradientId) && !gradientList.isDefault(gradientId) && /*#__PURE__*/jsx(IconButton, {
+              "data-testid": "delete-gradient-btn",
+              className: classes.iconButton,
+              onClick: function onClick() {
+                return deleteGradient(gradientId);
+              },
+              tooltipProps: {
+                title: 'Remove'
+              },
+              disabled: disableGradientsManagement,
+              children: /*#__PURE__*/jsx(DeleteIcon, {})
+            })]
+          })
+        })
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/jsx(GradientPicker, {
+        from: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleFrom,
+        to: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleTo,
+        unit: scaleOptions === null || scaleOptions === void 0 ? void 0 : scaleOptions.scaleUnit,
+        noScale: true,
+        gradientStops: (currentlyEdited === null || currentlyEdited === void 0 ? void 0 : currentlyEdited.gradientStops) || gradientStops,
+        onChange: handleGradientChange,
+        readonly: !currentlyEdited,
+        isMoveInputVisible: true
+      })
+    })]
+  });
+};
+
+export { GradientManager };
+//# sourceMappingURL=GradientManager.js.map

package/components/GradientManager/GradientManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientManager.js","sources":["../../../src/components/GradientManager/GradientManager.tsx"],"sourcesContent":["import { Box, Grid, TextField } from '@material-ui/core';\nimport { isEmpty, trim, noop } from 'lodash';\nimport { useEffect, useState } from 'react';\n\nimport CheckIcon from '@material-ui/icons/Check';\nimport CloseIcon from '@material-ui/icons/Close';\nimport EditIcon from '@material-ui/icons/Edit';\nimport DeleteIcon from '@material-ui/icons/Delete';\n\nimport { DEFAULT_GRADIENT_STOPS, GRADIENT_MAX_NAME_LENGTH, DEFAULT_GRADIENTS, TEMP_GRADIENT_ID } from './configuration/constants';\nimport { GradientList } from './GradientList';\nimport type { CustomGradient, GradientFillStop } from '~/types';\nimport IconButton from '../IconButton';\nimport { GradientSelect } from './GradientSelect';\nimport { GradientPicker } from '../GradientPicker';\nimport { GradientManagerProps } from './GradientManagerProps';\n\nimport { useStyles } from './GradientManager.styles';\n\nexport const GradientManager: React.FC<GradientManagerProps> = (props) => {\n  const {\n    gradientId,\n    onGradientEditStateChange = noop,\n    onChange = noop,\n    defaultGradients = DEFAULT_GRADIENTS,\n    defaultGradientStops = DEFAULT_GRADIENT_STOPS,\n    allowNoname,\n    scaleOptions = { scaleFrom: 0, scaleTo: 100 },\n  } = props;\n\n  const classes = useStyles();\n  const gradientList = new GradientList(\n    props.gradients || [],\n    defaultGradients,\n    props.onGradientsChange\n  );\n  const [currentlyEdited, setCurrentlyEdited] = useState<Partial<CustomGradient>>(null);\n  const disableGradientsManagement = props.disableGradientsManagement || !props.onGradientsChange;\n  const validationResult = gradientList.getHelperText({ name: currentlyEdited?.name, allowNoname, gradientId });\n\n  /**\n   * Calls editStateChange handler when gradient edit starts or ends.\n   * Will be called with false on component mount\n   */\n  useEffect(() => {\n    onGradientEditStateChange(Boolean(currentlyEdited));\n  }, [Boolean(currentlyEdited)]);\n\n  /**\n   * Use stops from the stored gradient first, then fallback to stored in the trace\n   * and finally, use defaultGradientStops if none of above is available\n   */\n  const gradientStops =\n    gradientList.getById(gradientId)?.gradientStops ||\n    props.gradientStops ||\n    defaultGradientStops;\n\n  const cancelEdit = () => {\n    setCurrentlyEdited(null);\n  };\n\n  const startAddGradient = () => {\n    setCurrentlyEdited({\n      name: '',\n      gradientStops: defaultGradientStops,\n      id: TEMP_GRADIENT_ID,\n    });\n  };\n\n  const startEditGradient = () => {\n    if (gradientList.isDefault(gradientId)) {\n      setCurrentlyEdited({\n        name: gradientList.newName(),\n        gradientStops,\n        id: TEMP_GRADIENT_ID,\n      });\n      return;\n    }\n\n    setCurrentlyEdited({\n      name: gradientList.getById(gradientId)?.name || '',\n      gradientStops,\n    });\n  };\n\n  const saveChanges = () => {\n    if (!isEmpty(validationResult)) {\n      return;\n    }\n\n    const gradientStops = currentlyEdited.gradientStops;\n    const name = trim(currentlyEdited.name);\n\n    setCurrentlyEdited(null);\n\n    // No name - no need to create a gradient. Saving stops to the trace.\n    if (!name) {\n      if (allowNoname) {\n        onChange({ gradientStops, gradientId: null });\n      }\n      return;\n    }\n\n    /**\n     * Gradient exists - Updating\n     * simple check that gradientId is not null is NOT enough because\n     * Deleted gradients have gradientId but should be handles as non-existing ones.\n     */\n    if (gradientList.getById(currentlyEdited.id || gradientId)) {\n      gradientList.update(gradientId, {\n        gradientStops,\n        name,\n      });\n      onChange({\n        gradientId,\n        gradientStops,\n      });\n      return;\n    }\n\n    // Creating a new gradient\n    const newGradient = gradientList.add(name, gradientStops);\n    onChange({\n      gradientId: newGradient?.id,\n      gradientStops,\n    });\n  };\n\n  const deleteGradient = (id: string) => {\n    if (id === gradientId) {\n      onChange({\n        gradientId: null,\n        gradientStops,\n      });\n      setCurrentlyEdited(null);\n    }\n    gradientList.remove(id);\n  };\n\n  const handleNameChange = (value: string) => {\n    const name = value.trimStart().substring(0, GRADIENT_MAX_NAME_LENGTH);\n    setCurrentlyEdited({ ...currentlyEdited, name });\n  };\n\n  const handleGradientAction = (type: 'delete' | 'add', id: string) => {\n    switch (type) {\n      case 'add':\n        startAddGradient();\n        break;\n      case 'delete': {\n        deleteGradient(id);\n        break;\n      }\n      default:\n    }\n  };\n\n  const handleGradientSelect = (id: string) => {\n    const gradient = gradientList.getById(id);\n    onChange({\n      gradientId: id,\n      gradientStops: gradient?.gradientStops ?? defaultGradientStops,\n    });\n  };\n\n  const handleGradientChange = (gradientStops: GradientFillStop[]) => {\n    setCurrentlyEdited({\n      ...currentlyEdited,\n      gradientStops,\n    });\n  };\n\n  const handleNameKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {\n    if (evt.key === 'Enter') {\n      // @ts-ignore\n      const value = evt.target?.value;\n      if (value) {\n        handleNameChange(value);\n        saveChanges();\n      }\n    }\n  };\n\n  return (\n    <Grid container>\n      <Grid item xs={6}>\n        {currentlyEdited ? (\n          <TextField\n            className={classes.customGradientName}\n            label=\"Gradient Name\"\n            value={currentlyEdited.name}\n            onChange={evt => handleNameChange(evt.target.value)}\n            onFocus={event => {\n              event.target.select();\n            }}\n            onKeyDown={handleNameKeyDown}\n            autoFocus\n            fullWidth\n            {...validationResult}\n          />\n        ) : (\n          <GradientSelect\n            value={gradientId}\n            gradients={props.gradients || []}\n            onChange={handleGradientSelect}\n            defaultGradients={defaultGradients}\n            onAction={handleGradientAction}\n            readonly={disableGradientsManagement}\n          />\n        )}\n      </Grid>\n      <Grid item xs={6}>\n        <Box display=\"flex\" alignItems=\"center\" height=\"100%\">\n          {/* Control panel */}\n          <Box display=\"flex\" paddingLeft={1}>\n            {currentlyEdited ? (\n              <>\n                <IconButton\n                  data-testid=\"save-gradient-btn\"\n                  className={classes.iconButton}\n                  onClick={saveChanges}\n                  tooltipProps={{ title: 'Save' }}\n                  disabled={!!validationResult || disableGradientsManagement}\n                >\n                  <CheckIcon />\n                </IconButton>\n                <IconButton\n                  data-testid=\"cancel-edit-btn\"\n                  className={classes.iconButton}\n                  onClick={cancelEdit}\n                  tooltipProps={{ title: 'Cancel' }}\n                  >\n                  <CloseIcon />\n                </IconButton>\n              </>\n            ) : (\n              <>\n                <IconButton\n                  data-testid=\"edit-gradient-btn\"\n                  className={classes.iconButton}\n                  onClick={startEditGradient}\n                  tooltipProps={{ title: 'Edit' }}\n                  disabled={disableGradientsManagement}\n                >\n                  <EditIcon />\n                </IconButton>\n                {!!gradientList.getById(gradientId) && !gradientList.isDefault(gradientId) && (\n                  <IconButton\n                    data-testid=\"delete-gradient-btn\"\n                    className={classes.iconButton}\n                    onClick={() => deleteGradient(gradientId)}\n                    tooltipProps={{ title: 'Remove' }}\n                    disabled={disableGradientsManagement}\n                  >\n                    <DeleteIcon />\n                  </IconButton>\n                )}\n              </>\n            )}\n          </Box>\n        </Box>\n      </Grid>\n      <Grid item xs={12}>\n        <GradientPicker\n          from={scaleOptions?.scaleFrom}\n          to={scaleOptions?.scaleTo}\n          unit={scaleOptions?.scaleUnit}\n          noScale\n          gradientStops={currentlyEdited?.gradientStops || gradientStops}\n          onChange={handleGradientChange}\n          readonly={!currentlyEdited}\n          isMoveInputVisible\n        />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["GradientManager","props","gradientId","onGradientEditStateChange","noop","onChange","defaultGradients","DEFAULT_GRADIENTS","defaultGradientStops","DEFAULT_GRADIENT_STOPS","allowNoname","scaleOptions","scaleFrom","scaleTo","classes","useStyles","gradientList","GradientList","gradients","onGradientsChange","useState","currentlyEdited","setCurrentlyEdited","disableGradientsManagement","validationResult","getHelperText","name","useEffect","Boolean","gradientStops","getById","cancelEdit","startAddGradient","id","TEMP_GRADIENT_ID","startEditGradient","isDefault","newName","saveChanges","isEmpty","trim","update","newGradient","add","deleteGradient","remove","handleNameChange","value","trimStart","substring","GRADIENT_MAX_NAME_LENGTH","handleGradientAction","type","handleGradientSelect","gradient","handleGradientChange","handleNameKeyDown","evt","key","target","_jsxs","_jsx","customGradientName","event","select","_Fragment","iconButton","title","scaleUnit"],"mappings":"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"}

package/components/GradientManager/GradientManager.styles.js

@@ -1 +1,16 @@
-import{makeStyles as r}from"@material-ui/core";var t=r({customGradientName:{minWidth:175,marginBottom:20},iconButton:{"&:hover":{background:"transparent"}}});export{t as useStyles};
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles({
+  customGradientName: {
+    minWidth: 175,
+    marginBottom: 20
+  },
+  iconButton: {
+    '&:hover': {
+      background: 'transparent'
+    }
+  }
+});
+
+export { useStyles };
+//# sourceMappingURL=GradientManager.styles.js.map

package/components/GradientManager/GradientManager.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientManager.styles.js","sources":["../../../src/components/GradientManager/GradientManager.styles.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\n\nexport const useStyles = makeStyles({\n  customGradientName: {\n    minWidth: 175,\n    marginBottom: 20,\n  },\n  iconButton: {\n    '&:hover': {\n      background: 'transparent',\n    },\n  },\n});\n"],"names":["useStyles","makeStyles","customGradientName","minWidth","marginBottom","iconButton","background"],"mappings":";;AAEaA,IAAAA,SAAS,GAAGC,UAAU,CAAC;AAClCC,EAAAA,kBAAkB,EAAE;AAClBC,IAAAA,QAAQ,EAAE,GAAG;AACbC,IAAAA,YAAY,EAAE,EAAA;GACf;AACDC,EAAAA,UAAU,EAAE;AACV,IAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE,aAAA;AACd,KAAA;AACF,GAAA;AACF,CAAC;;;;"}

package/components/GradientManager/GradientPreview/GradientPreview.js

@@ -1 +1,31 @@
-import{jsx as r}from"react/jsx-runtime";import{makeStyles as e}from"@material-ui/core";import i from"tinygradient";var o=e({gradientPreview:{background:"red",width:32,height:16,borderRadius:4}}),t=function(e){var t=e.gradientStops,a=i(t.map((function(r){return{color:r.color,pos:r.pos/100}}))).css("linear","90deg"),n=o();return r("div",{className:n.gradientPreview,style:{background:a}})};export{t as GradientPreview};
+import { makeStyles } from '@material-ui/core';
+import tinygradient from 'tinygradient';
+import { jsx } from 'react/jsx-runtime';
+
+var useStyles = makeStyles({
+  gradientPreview: {
+    background: 'red',
+    width: 32,
+    height: 16,
+    borderRadius: 4
+  }
+});
+var GradientPreview = function GradientPreview(_ref) {
+  var gradientStops = _ref.gradientStops;
+  var linearGradient = tinygradient(gradientStops.map(function (item) {
+    return {
+      color: item.color,
+      pos: item.pos / 100
+    };
+  })).css('linear', '90deg');
+  var styles = useStyles();
+  return /*#__PURE__*/jsx("div", {
+    className: styles.gradientPreview,
+    style: {
+      background: linearGradient
+    }
+  });
+};
+
+export { GradientPreview };
+//# sourceMappingURL=GradientPreview.js.map

package/components/GradientManager/GradientPreview/GradientPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientPreview.js","sources":["../../../../src/components/GradientManager/GradientPreview/GradientPreview.tsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport tinygradient from 'tinygradient';\nimport type { GradientFillStop } from '~/types';\n\ninterface GradientPreviewProps {\n  gradientStops: GradientFillStop[];\n}\n\nconst useStyles = makeStyles({\n  gradientPreview: {\n    background: 'red',\n    width: 32,\n    height: 16,\n    borderRadius: 4,\n  },\n});\n\nexport const GradientPreview: React.FC<GradientPreviewProps> = ({ gradientStops }) => {\n  const linearGradient = tinygradient(\n    gradientStops.map(item => ({\n      color: item.color,\n      pos: item.pos / 100,\n    }))\n  ).css('linear', '90deg');\n\n  const styles = useStyles();\n  return <div className={styles.gradientPreview} style={{ background: linearGradient }} />;\n};\n"],"names":["useStyles","makeStyles","gradientPreview","background","width","height","borderRadius","GradientPreview","gradientStops","linearGradient","tinygradient","map","item","color","pos","css","styles","_jsx"],"mappings":";;;;AAQA,IAAMA,SAAS,GAAGC,UAAU,CAAC;AAC3BC,EAAAA,eAAe,EAAE;AACfC,IAAAA,UAAU,EAAE,KAAK;AACjBC,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,MAAM,EAAE,EAAE;AACVC,IAAAA,YAAY,EAAE,CAAA;AAChB,GAAA;AACF,CAAC,CAAC,CAAA;AAEWC,IAAAA,eAA+C,GAAG,SAAlDA,eAA+C,CAA0B,IAAA,EAAA;EAAA,IAApBC,aAAa,QAAbA,aAAa,CAAA;EAC7E,IAAMC,cAAc,GAAGC,YAAY,CACjCF,aAAa,CAACG,GAAG,CAAC,UAAAC,IAAI,EAAA;IAAA,OAAK;MACzBC,KAAK,EAAED,IAAI,CAACC,KAAK;AACjBC,MAAAA,GAAG,EAAEF,IAAI,CAACE,GAAG,GAAG,GAAA;KACjB,CAAA;GAAC,CAAC,CACJ,CAACC,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;EAExB,IAAMC,MAAM,GAAGhB,SAAS,EAAE,CAAA;EAC1B,oBAAOiB,GAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAED,MAAM,CAACd,eAAgB;AAAC,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAEM,cAAAA;AAAe,KAAA;GAAK,CAAA,CAAA;AAC1F;;;;"}