@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/views/contentModelGroups/DelayedOnChange.js

@@ -1,134 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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";
-var _excluded = ["children"];
-import * as React from "react";
-import noop from "lodash/noop";
-/**
- * This component is used to wrap Input and Textarea components to optimize form re-render.
- * These 2 are the only components that trigger form model change on each character input.
- * This means, whenever you type a letter an entire form re-renders.
- * On complex forms you will feel and see a significant delay if this component is not used.
- *
- * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
- * a user stops typing for given period of time (400ms by default).
- */
-
-var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
-  _inherits(DelayedOnChange, _React$Component);
-
-  var _super = _createSuper(DelayedOnChange);
-
-  function DelayedOnChange() {
-    var _this;
-
-    _classCallCheck(this, DelayedOnChange);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "delay", null);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      value: ""
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "applyValue", function (value) {
-      var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-      _this.delay && clearTimeout(_this.delay);
-      _this.delay = null;
-
-      _this.props.onChange(value, callback);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      _this.setState({
-        value: value
-      }, _this.changed);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "changed", function () {
-      _this.delay && clearTimeout(_this.delay);
-      _this.delay = null;
-      _this.delay = setTimeout(function () {
-        return _this.applyValue(_this.state.value);
-      }, _this.props.delay);
-    });
-
-    return _this;
-  }
-
-  _createClass(DelayedOnChange, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setState({
-        value: this.props.value
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          other = _objectWithoutProperties(_this$props, _excluded);
-
-      var newProps = _objectSpread(_objectSpread({}, other), {}, {
-        value: this.state.value,
-        onChange: this.onChange
-      });
-
-      var renderProp = typeof children === "function" ? children : false;
-      var child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
-
-      var props = _objectSpread({}, child.props);
-
-      var realOnKeyDown = props.onKeyDown || noop;
-      var realOnBlur = props.onBlur || noop; // Need to apply value if input lost focus
-
-      props.onBlur = function (e) {
-        e.persist();
-
-        _this2.applyValue(e.target.value, function () {
-          return realOnBlur(e);
-        });
-      }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
-
-
-      props.onKeyDown = function (e) {
-        e.persist();
-
-        if (e.key === "Tab") {
-          _this2.applyValue(e.target.value, function () {
-            return realOnKeyDown(e);
-          });
-        } else if (e.key === "Enter" && props["data-on-enter"]) {
-          _this2.applyValue(e.target.value, function () {
-            return realOnKeyDown(e);
-          });
-        } else {
-          realOnKeyDown(e);
-        }
-      };
-
-      return /*#__PURE__*/React.cloneElement(child, props);
-    }
-  }]);
-
-  return DelayedOnChange;
-}(React.Component);
-
-_defineProperty(DelayedOnChange, "defaultProps", {
-  delay: 400
-});
-
-export default DelayedOnChange;

package/admin/views/contentModelGroups/IconPicker.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-import { FormComponentProps } from "@webiny/ui/types";
-declare const IconPicker: ({ value, onChange, label, description, validation }: FormComponentProps & {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-}) => JSX.Element;
-export default IconPicker;

package/admin/views/contentModelGroups/IconPicker.js

@@ -1,204 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import * as React from "react";
-import { css } from "emotion";
-import { plugins } from "@webiny/plugins";
-import { Typography } from "@webiny/ui/Typography";
-import { Grid } from "react-virtualized";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import DelayedOnChange from "./DelayedOnChange";
-import { Menu } from "@webiny/ui/Menu";
-import { Input } from "@webiny/ui/Input";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-
-var iconPickerLabel = /*#__PURE__*/css({
-  marginBottom: 5,
-  marginLeft: 2
-}, "label:iconPickerLabel;");
-var MenuWrapper = /*#__PURE__*/css({
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  padding: "16px 8px"
-}, "label:MenuWrapper;");
-var NoResultWrapper = /*#__PURE__*/css({
-  width: 640,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  padding: "16px 12px"
-}, "label:NoResultWrapper;");
-var COLUMN_COUNT = 6;
-var gridItem = /*#__PURE__*/css({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  boxSizing: "border-box",
-  paddingTop: 15,
-  alignItems: "center",
-  textAlign: "center",
-  cursor: "pointer",
-  transform: "translateZ(0)",
-  borderRadius: 2,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  transition: "all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "&::after": {
-    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: -1,
-    opacity: 0
-  },
-  "&:hover": {
-    backgroundColor: "var(--mdc-theme-background)",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&::after": {
-      opacity: 1
-    }
-  },
-  ">svg": {
-    width: 42,
-    marginBottom: 5
-  }
-}, "label:gridItem;");
-var grid = /*#__PURE__*/css({
-  padding: 20
-}, "label:grid;");
-var pickIcon = /*#__PURE__*/css({
-  width: 50,
-  textAlign: "center",
-  cursor: "pointer"
-}, "label:pickIcon;");
-var searchInput = /*#__PURE__*/css({
-  input: {
-    padding: "20px 12px 20px"
-  }
-}, "label:searchInput;");
-var useState = React.useState,
-    useCallback = React.useCallback,
-    useMemo = React.useMemo;
-
-var IconPicker = function IconPicker(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      description = _ref.description,
-      validation = _ref.validation;
-
-  var _useState = useState(""),
-      _useState2 = _slicedToArray(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      mustRenderGrid = _useState4[0],
-      setMustRenderGrid = _useState4[1];
-
-  var onFilterChange = useCallback(function (value, cb) {
-    setFilter(value);
-    cb();
-  }, [filter]);
-  var allIcons = useMemo(function () {
-    var iconPlugins = plugins.byType("cms-icons");
-    return iconPlugins.reduce(function (icons, pl) {
-      return icons.concat(pl.getIcons());
-    }, []);
-  }, []);
-  var icons = useMemo(function () {
-    return filter ? allIcons.filter(function (ic) {
-      return ic.name.includes(filter);
-    }) : allIcons;
-  }, [filter]);
-  var renderCell = useCallback(function (_ref2) {
-    var closeMenu = _ref2.closeMenu;
-    return function renderCell(_ref3) {
-      var columnIndex = _ref3.columnIndex,
-          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", {
-        key: key,
-        style: style,
-        className: gridItem,
-        onClick: function onClick() {
-          onChange(item.id.join("/"));
-          closeMenu();
-        }
-      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: item.id,
-        size: "2x"
-      }), /*#__PURE__*/React.createElement(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, {
-      value: filter,
-      onChange: onFilterChange
-    }, function (_ref5) {
-      var value = _ref5.value,
-          onChange = _ref5.onChange;
-      return /*#__PURE__*/React.createElement(Input, {
-        autoFocus: true,
-        className: searchInput,
-        value: value,
-        onChange: onChange,
-        placeholder: "Search icons..."
-      });
-    }), icons.length === 0 ? /*#__PURE__*/React.createElement("div", {
-      className: NoResultWrapper
-    }, /*#__PURE__*/React.createElement(Typography, {
-      use: "body1"
-    }, "No results found.")) : /*#__PURE__*/React.createElement(Grid, {
-      className: grid,
-      cellRenderer: renderCell({
-        closeMenu: closeMenu
-      }),
-      columnCount: COLUMN_COUNT,
-      columnWidth: 100,
-      height: 440,
-      rowCount: Math.ceil(icons.length / COLUMN_COUNT),
-      rowHeight: 100,
-      width: 640
-    }));
-  }, [icons]);
-  var fontAwesomeIconValue = typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
-    className: iconPickerLabel
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "body1"
-  }, label)), /*#__PURE__*/React.createElement("div", {
-    className: MenuWrapper
-  }, /*#__PURE__*/React.createElement(Menu, {
-    onOpen: function onOpen() {
-      return setMustRenderGrid(true);
-    },
-    onClose: function onClose() {
-      return setMustRenderGrid(false);
-    },
-    handle: /*#__PURE__*/React.createElement("div", {
-      className: pickIcon
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: fontAwesomeIconValue,
-      size: "2x"
-    }))
-  }, mustRenderGrid && renderGrid)), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-    error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-};
-
-export default IconPicker;