@webiny/app-admin 0.0.0-mt-1

package/ui/elements/form/FormFieldElement.js

@@ -0,0 +1,183 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { UIElement } from "../../UIElement";
+export var FormFieldElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(FormFieldElement, _UIElement);
+
+  var _super = _createSuper(FormFieldElement);
+
+  function FormFieldElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, FormFieldElement);
+
+    _this = _super.call(this, id, config);
+
+    _defineProperty(_assertThisInitialized(_this), "_beforeChange", []);
+
+    _defineProperty(_assertThisInitialized(_this), "_afterChange", []);
+
+    if (config.beforeChange) {
+      _this._beforeChange.push(config.beforeChange);
+    }
+
+    if (config.afterChange) {
+      _this._afterChange.push(config.afterChange);
+    }
+
+    _this.applyPlugins(FormFieldElement);
+
+    return _this;
+  }
+
+  _createClass(FormFieldElement, [{
+    key: "getName",
+    value: function getName() {
+      return this.config.name;
+    }
+  }, {
+    key: "getValidators",
+    value: function getValidators(props) {
+      if (!this.config.validators || typeof this.config.validators !== "function") {
+        return function () {
+          return true;
+        };
+      }
+
+      return this.config.validators(props);
+    }
+  }, {
+    key: "getDefaultValue",
+    value: function getDefaultValue(props) {
+      if (typeof this.config.defaultValue === "function") {
+        return this.config.defaultValue(props);
+      }
+
+      return this.config.defaultValue;
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel(props) {
+      if (typeof this.config.label === "function") {
+        return this.config.label(props);
+      }
+
+      return this.config.label;
+    }
+  }, {
+    key: "getDescription",
+    value: function getDescription(props) {
+      if (typeof this.config.description === "function") {
+        return this.config.description(props);
+      }
+
+      return this.config.description;
+    }
+  }, {
+    key: "getPlaceholder",
+    value: function getPlaceholder(props) {
+      if (typeof this.config.placeholder === "function") {
+        return this.config.placeholder(props);
+      }
+
+      return this.config.placeholder;
+    }
+  }, {
+    key: "setLabel",
+    value: function setLabel(label) {
+      this.config.label = label;
+    }
+  }, {
+    key: "setDescription",
+    value: function setDescription(description) {
+      this.config.description = description;
+    }
+  }, {
+    key: "setPlaceholder",
+    value: function setPlaceholder(placeholder) {
+      this.config.placeholder = placeholder;
+    }
+  }, {
+    key: "setDefaultValue",
+    value: function setDefaultValue(value) {
+      this.config.defaultValue = value;
+    }
+  }, {
+    key: "getIsDisabled",
+    value: function getIsDisabled(props) {
+      if (typeof this.config.isDisabled === "function") {
+        return this.config.isDisabled(props);
+      }
+
+      return this.config.isDisabled;
+    }
+  }, {
+    key: "setIsDisabled",
+    value: function setIsDisabled(isDisabled) {
+      this.config.isDisabled = isDisabled;
+    }
+  }, {
+    key: "setValidators",
+    value: function setValidators(validators) {
+      this.config.validators = validators;
+    }
+  }, {
+    key: "onBeforeChange",
+    value: function onBeforeChange(value, cb) {
+      var callbacks = _toConsumableArray(this._beforeChange);
+
+      var next = function next(value) {
+        if (!callbacks.length) {
+          cb(value);
+          return;
+        }
+
+        callbacks.pop()(value, next);
+      };
+
+      next(value);
+    }
+  }, {
+    key: "onAfterChange",
+    value: function onAfterChange(value, form) {
+      var callbacks = _toConsumableArray(this._afterChange);
+
+      var next = function next(value) {
+        if (!callbacks.length) {
+          return;
+        }
+
+        callbacks.pop()(value, form);
+      };
+
+      next(value);
+    }
+  }, {
+    key: "addBeforeChange",
+    value: function addBeforeChange(cb) {
+      this._beforeChange.push(cb);
+    }
+  }, {
+    key: "addAfterChange",
+    value: function addAfterChange(cb) {
+      this._afterChange.push(cb);
+    }
+  }, {
+    key: "setBeforeChange",
+    value: function setBeforeChange(cb) {
+      this._beforeChange = [cb];
+    }
+  }, {
+    key: "setAfterChange",
+    value: function setAfterChange(cb) {
+      this._afterChange = [cb];
+    }
+  }]);
+
+  return FormFieldElement;
+}(UIElement);

package/ui/elements/form/HiddenElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FormFieldElement, FormFieldElementConfig, FormFieldElementRenderProps } from "./FormFieldElement";
+export declare class HiddenElement extends FormFieldElement {
+    constructor(id: string, config: FormFieldElementConfig);
+    render(props: FormFieldElementRenderProps): React.ReactNode;
+}

package/ui/elements/form/HiddenElement.js

@@ -0,0 +1,49 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { FormFieldElement } from "./FormFieldElement";
+export var HiddenElement = /*#__PURE__*/function (_FormFieldElement) {
+  _inherits(HiddenElement, _FormFieldElement);
+
+  var _super = _createSuper(HiddenElement);
+
+  function HiddenElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, HiddenElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(HiddenElement);
+
+    return _this;
+  }
+
+  _createClass(HiddenElement, [{
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      if (!props.formProps) {
+        throw Error("HiddenElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        validators: this.getValidators(props),
+        defaultValue: this.getDefaultValue(props),
+        beforeChange: function beforeChange(value, cb) {
+          return _this2.onBeforeChange(value, cb);
+        },
+        afterChange: function afterChange(value, form) {
+          return _this2.onAfterChange(value, form);
+        }
+      });
+    }
+  }]);
+
+  return HiddenElement;
+}(FormFieldElement);

package/ui/elements/form/InputElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FormFieldElement, FormFieldElementConfig, FormFieldElementRenderProps } from "./FormFieldElement";
+export declare class InputElement extends FormFieldElement {
+    constructor(id: string, config: FormFieldElementConfig);
+    render(props: FormFieldElementRenderProps): React.ReactNode;
+}

package/ui/elements/form/InputElement.js

@@ -0,0 +1,55 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { Input } from "@webiny/ui/Input";
+import { FormFieldElement } from "./FormFieldElement";
+export var InputElement = /*#__PURE__*/function (_FormFieldElement) {
+  _inherits(InputElement, _FormFieldElement);
+
+  var _super = _createSuper(InputElement);
+
+  function InputElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, InputElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(InputElement);
+
+    return _this;
+  }
+
+  _createClass(InputElement, [{
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      if (!props.formProps) {
+        throw Error("InputElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        validators: this.getValidators(props),
+        defaultValue: this.getDefaultValue(props),
+        beforeChange: function beforeChange(value, cb) {
+          return _this2.onBeforeChange(value, cb);
+        },
+        afterChange: function afterChange(value, form) {
+          return _this2.onAfterChange(value, form);
+        }
+      }, /*#__PURE__*/React.createElement(Input, {
+        label: this.getLabel(props),
+        placeholder: this.getPlaceholder(props),
+        disabled: this.getIsDisabled(props),
+        description: this.getDescription(props)
+      }));
+    }
+  }]);
+
+  return InputElement;
+}(FormFieldElement);

package/ui/elements/form/PasswordElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { InputElement } from "./InputElement";
+import { FormFieldElementRenderProps } from "./FormFieldElement";
+export declare class PasswordElement extends InputElement {
+    render(props: FormFieldElementRenderProps): React.ReactElement;
+}

package/ui/elements/form/PasswordElement.js

@@ -0,0 +1,50 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { InputElement } from "./InputElement";
+import { Input } from "@webiny/ui/Input";
+export var PasswordElement = /*#__PURE__*/function (_InputElement) {
+  _inherits(PasswordElement, _InputElement);
+
+  var _super = _createSuper(PasswordElement);
+
+  function PasswordElement() {
+    _classCallCheck(this, PasswordElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(PasswordElement, [{
+    key: "render",
+    value: function render(props) {
+      var _this = this;
+
+      if (!props.formProps) {
+        throw Error("PasswordElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        validators: this.getValidators(props),
+        defaultValue: this.getDefaultValue(props),
+        beforeChange: function beforeChange(value, cb) {
+          return _this.onBeforeChange(value, cb);
+        },
+        afterChange: function afterChange(value, form) {
+          return _this.onAfterChange(value, form);
+        }
+      }, /*#__PURE__*/React.createElement(Input, {
+        type: "password",
+        label: this.getLabel(props),
+        placeholder: this.getPlaceholder(props),
+        disabled: this.getIsDisabled(props),
+        description: this.getDescription(props)
+      }));
+    }
+  }]);
+
+  return PasswordElement;
+}(InputElement);

package/ui/elements/form/README.md

@@ -0,0 +1,2 @@
+This folder (`elements/form`) contains elements that are specifically designed to work within a `FormElement`.
+They assume that there is a [Form](../../../../../form/src/Form.tsx) component sitting somewhere above them in the component hierarchy, and will throw errors if `formProps` are not found in the `props` of their `render()` method.

package/ui/elements/form/SelectElement.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FormFieldElement, FormFieldElementConfig, FormFieldElementRenderProps } from "./FormFieldElement";
+export interface SelectElementOption {
+    value: string;
+    label: string;
+}
+export interface SelectElementConfig extends FormFieldElementConfig {
+    options?: SelectElementOption[];
+}
+export declare class SelectElement extends FormFieldElement<SelectElementConfig> {
+    constructor(id: string, config: SelectElementConfig);
+    setOptions(options: SelectElementOption[]): void;
+    getOptions(): SelectElementOption[];
+    render(props: FormFieldElementRenderProps): React.ReactNode;
+}

package/ui/elements/form/SelectElement.js

@@ -0,0 +1,71 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { Select } from "@webiny/ui/Select";
+import { FormFieldElement } from "./FormFieldElement";
+export var SelectElement = /*#__PURE__*/function (_FormFieldElement) {
+  _inherits(SelectElement, _FormFieldElement);
+
+  var _super = _createSuper(SelectElement);
+
+  function SelectElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, SelectElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(SelectElement);
+
+    return _this;
+  }
+
+  _createClass(SelectElement, [{
+    key: "setOptions",
+    value: function setOptions(options) {
+      this.config.options = options;
+    }
+  }, {
+    key: "getOptions",
+    value: function getOptions() {
+      return this.config.options;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      if (!props.formProps) {
+        throw Error("SelectElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        validators: this.getValidators(props),
+        defaultValue: this.getDefaultValue(props),
+        beforeChange: function beforeChange(value, cb) {
+          return _this2.onBeforeChange(value, cb);
+        },
+        afterChange: function afterChange(value, form) {
+          return _this2.onAfterChange(value, form);
+        }
+      }, /*#__PURE__*/React.createElement(Select, {
+        label: this.getLabel(props),
+        disabled: this.getIsDisabled(props),
+        description: this.getDefaultValue(props)
+      }, this.getOptions().map(function (_ref) {
+        var value = _ref.value,
+            label = _ref.label;
+        return /*#__PURE__*/React.createElement("option", {
+          key: value,
+          value: value
+        }, label);
+      })));
+    }
+  }]);
+
+  return SelectElement;
+}(FormFieldElement);

package/ui/elements/form/TextareaElement.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FormRenderPropParams } from "@webiny/form";
+import { FormFieldElement, FormFieldElementConfig } from "./FormFieldElement";
+export interface TextareaElementRenderProps {
+    formProps: FormRenderPropParams;
+}
+export interface TextareaElementConfig extends FormFieldElementConfig {
+    rows: number;
+}
+export declare class TextareaElement extends FormFieldElement<TextareaElementConfig> {
+    constructor(id: string, config: TextareaElementConfig);
+    setRows(rows: number): void;
+    getRows(): number;
+    render(props: TextareaElementRenderProps): React.ReactNode;
+}

package/ui/elements/form/TextareaElement.js

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { Input } from "@webiny/ui/Input";
+import { FormFieldElement } from "./FormFieldElement";
+export var TextareaElement = /*#__PURE__*/function (_FormFieldElement) {
+  _inherits(TextareaElement, _FormFieldElement);
+
+  var _super = _createSuper(TextareaElement);
+
+  function TextareaElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, TextareaElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(TextareaElement);
+
+    return _this;
+  }
+
+  _createClass(TextareaElement, [{
+    key: "setRows",
+    value: function setRows(rows) {
+      this.config.rows = rows;
+    }
+  }, {
+    key: "getRows",
+    value: function getRows() {
+      return this.config.rows;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      if (!props.formProps) {
+        throw Error("TextareaElement must be placed inside of a FormElement.");
+      }
+
+      var Bind = props.formProps.Bind;
+      return /*#__PURE__*/React.createElement(Bind, {
+        name: this.getName(),
+        validators: this.getValidators(props)
+      }, /*#__PURE__*/React.createElement(Input, {
+        label: this.getLabel(props),
+        disabled: this.getIsDisabled(props),
+        rows: this.getRows(),
+        description: this.getDescription(props)
+      }));
+    }
+  }]);
+
+  return TextareaElement;
+}(FormFieldElement);

package/ui/views/AdminView/ContentElement.d.ts

@@ -0,0 +1,4 @@
+import { UIElement } from "../../UIElement";
+export declare class ContentElement extends UIElement {
+    constructor(id: string);
+}

package/ui/views/AdminView/ContentElement.js

@@ -0,0 +1,62 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import styled from "@emotion/styled";
+import { UIElement } from "../../UIElement";
+import { UIRenderer } from "../../UIRenderer";
+var ContentWrapper = /*#__PURE__*/styled("div", {
+  target: "enpnxwx0",
+  label: "ContentWrapper"
+})({
+  width: "100%",
+  paddingTop: 67
+});
+
+var ContentElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(ContentElementRenderer, _UIRenderer);
+
+  var _super = _createSuper(ContentElementRenderer);
+
+  function ContentElementRenderer() {
+    _classCallCheck(this, ContentElementRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ContentElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var next = _ref.next,
+          props = _ref.props;
+      return /*#__PURE__*/React.createElement(ContentWrapper, null, props.children ? props.children : next());
+    }
+  }]);
+
+  return ContentElementRenderer;
+}(UIRenderer);
+
+export var ContentElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(ContentElement, _UIElement);
+
+  var _super2 = _createSuper(ContentElement);
+
+  function ContentElement(id) {
+    var _this;
+
+    _classCallCheck(this, ContentElement);
+
+    _this = _super2.call(this, id);
+
+    _this.useGrid(false);
+
+    _this.addRenderer(new ContentElementRenderer());
+
+    _this.applyPlugins(ContentElement);
+
+    return _this;
+  }
+
+  return ContentElement;
+}(UIElement);

package/ui/views/AdminView/HeaderElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UIElement } from "../../UIElement";
+import { HeaderSectionLeftElement } from "./HeaderSectionLeftElement";
+import { HeaderSectionCenterElement } from "./HeaderSectionCenterElement";
+import { HeaderSectionRightElement } from "./HeaderSectionRightElement";
+export declare class HeaderElement extends UIElement {
+    constructor(id: string);
+    getLeftSection(): HeaderSectionLeftElement;
+    getCenterSection(): HeaderSectionCenterElement;
+    getRightSection(): HeaderSectionRightElement;
+    setLogo(logo: React.ReactElement): void;
+    setMenuButton(menuButton: React.ReactElement): void;
+}