@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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;

package/types.js

@@ -1 +0,0 @@
-export {};