@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.0156a4c312

package/components/FileManager/BottomInfoBar.js

@@ -1,42 +0,0 @@
-import React from "react";
-import mime from "mime/lite";
-import styled from "@emotion/styled";
-import SupportedFileTypes from "./BottomInfoBar/SupportedFileTypes";
-import UploadStatus from "./BottomInfoBar/UploadStatus";
-mime.define({
-  "image/x-icon": ["ico"]
-}, true);
-mime.define({
-  "image/jpg": ["jpg"]
-}, true);
-mime.define({
-  "image/vnd.microsoft.icon": ["ico"]
-}, true);
-var BottomInfoBarWrapper = /*#__PURE__*/styled("div", {
-  target: "el4b0yq0",
-  label: "BottomInfoBarWrapper"
-})({
-  fontSize: "0.8rem",
-  position: "sticky",
-  bottom: 0,
-  height: 30,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  backgroundColor: "var(--mdc-theme-surface)",
-  width: "100%",
-  transform: "translateZ(0)",
-  overflow: "hidden",
-  display: "flex",
-  alignItems: "center",
-  zIndex: 1,
-  "> div": {
-    padding: "0 10px",
-    width: "100%"
-  }
-});
-
-var BottomInfoBar = function BottomInfoBar(props) {
-  return /*#__PURE__*/React.createElement(BottomInfoBarWrapper, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SupportedFileTypes, props), /*#__PURE__*/React.createElement(UploadStatus, props)));
-};
-
-export default BottomInfoBar;

package/components/FileManager/DropFilesHere.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export declare type DropFilesHereProps = {
-    onDragLeave?: (event?: React.DragEvent<HTMLElement>) => void;
-    onDrop?: (event?: React.DragEvent<HTMLElement>) => void;
-    empty?: boolean;
-    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-};
-export default function DropFilesHere({ onDrop, onDragLeave, empty, onClick }: DropFilesHereProps): JSX.Element;

package/components/FileManager/DropFilesHere.js

@@ -1,58 +0,0 @@
-import React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-import { Icon } from "@webiny/ui/Icon";
-import { ReactComponent as UploadIcon } from "@svgr/webpack!./icons/round-cloud_upload-24px.svg";
-var styles = /*#__PURE__*/css({
-  margin: "0 auto",
-  paddingTop: 0,
-  height: "100%",
-  zIndex: 2,
-  width: "100%",
-  position: "absolute",
-  backgroundColor: "var(--mdc-theme-text-hint-on-light)",
-  "&.empty": {
-    backgroundColor: "transparent",
-    "> div": {
-      backgroundColor: "var(--mdc-theme-surface)"
-    }
-  },
-  "> div": {
-    textAlign: "center",
-    width: 300,
-    height: 300,
-    backgroundColor: "var(--mdc-theme-background)",
-    borderRadius: "50%",
-    position: "absolute",
-    left: "50%",
-    top: "50%",
-    transform: "translateX(-50%) translateY(-100%)",
-    "> div": {
-      position: "absolute",
-      top: 90,
-      width: 300,
-      color: "var(--mdc-theme-on-surface)",
-      "svg.mdc-button__icon": {
-        width: 100,
-        display: "inline-block",
-        color: "var(--mdc-theme-on-surface)"
-      }
-    }
-  }
-}, "label:styles;");
-export default function DropFilesHere(_ref) {
-  var onDrop = _ref.onDrop,
-      onDragLeave = _ref.onDragLeave,
-      empty = _ref.empty,
-      onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
-      empty: empty
-    }),
-    onDrop: onDrop,
-    onClick: onClick,
-    onDragLeave: onDragLeave
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(UploadIcon, null)
-  }), /*#__PURE__*/React.createElement("div", null, "Drop files here"))));
-}

package/components/FileManager/File.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-declare type Props = {
-    file: {
-        [key: string]: any;
-    };
-    selected: boolean;
-    uploadFile: Function;
-    onSelect: (event?: React.MouseEvent) => void;
-    onClick: (event?: React.MouseEvent) => void;
-    options?: Array<{
-        label: string;
-        onClick: (file: Object) => void;
-    }>;
-    children: React.ReactNode;
-    showFileDetails: (event?: React.MouseEvent) => void;
-};
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;

package/components/FileManager/File.js

@@ -1,129 +0,0 @@
-import React from "react";
-import LazyLoad from "react-lazy-load";
-import classNames from "classnames";
-import { css, keyframes } from "emotion";
-import { Ripple } from "@webiny/ui/Ripple";
-import { IconButton } from "@webiny/ui/Button";
-import { ReactComponent as Checked } from "@svgr/webpack!./icons/round-check_box-24px.svg";
-import { ReactComponent as SettingsIcon } from "@svgr/webpack!../../assets/icons/round-settings-24px.svg";
-var COMPONENT_WIDTH = 200;
-var COMPONENT_HEIGHT = 200;
-var grow = /*#__PURE__*/keyframes("0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}label:grow;");
-var styles = /*#__PURE__*/css({
-  display: "inline-block",
-  float: "left",
-  position: "relative",
-  zIndex: 1,
-  margin: 10,
-  cursor: "pointer",
-  width: "100%",
-  maxWidth: COMPONENT_WIDTH,
-  border: "1px solid var(--mdc-theme-on-background)",
-  borderRadius: 2,
-  "> .body": {
-    transition: "200ms ease-in opacity",
-    width: COMPONENT_WIDTH,
-    height: COMPONENT_HEIGHT,
-    overflow: "hidden",
-    "--icon-color": "var(--mdc-theme-on-background)",
-    ".checkedIcon": {
-      color: "var(--mdc-theme-secondary)",
-      position: "absolute",
-      top: 4,
-      left: 4,
-      zIndex: 11
-    },
-    ".infoIcon": {
-      opacity: 0,
-      position: "absolute",
-      top: 0,
-      right: 0,
-      zIndex: 10,
-      transition: "all 150ms ease-in",
-      "& .mdc-icon-button svg": {
-        color: "var(--mdc-theme-secondary)"
-      },
-      "&:hover": {
-        animationName: grow,
-        animationDuration: ".4s",
-        animationTimingFunction: "ease-in",
-        animationDelay: ".2s"
-      }
-    },
-    ".filePreview": {
-      textAlign: "center",
-      position: "relative",
-      backgroundColor: "#fff",
-      width: "100%",
-      height: "100%",
-      ".clickableArea": {
-        position: "absolute",
-        top: 30,
-        left: 0,
-        width: "100%",
-        height: 170,
-        zIndex: 2
-      }
-    },
-    "&:hover .infoIcon": {
-      opacity: 1
-    }
-  },
-  "> .label": {
-    padding: "15px 10px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    fontSize: "0.8rem",
-    color: "var(--mdc-theme-on-surface)",
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&.disable-select": {
-    cursor: "auto"
-  }
-}, "label:styles;");
-export default /*#__PURE__*/React.memo(function File(props) {
-  var file = props.file,
-      selected = props.selected,
-      onSelect = props.onSelect,
-      children = props.children,
-      showFileDetails = props.showFileDetails;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles, {
-      "disable-select": !onSelect
-    }),
-    "data-testid": "fm-list-wrapper-file"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "checkedIcon",
-    onClick: onSelect
-  }, selected ? /*#__PURE__*/React.createElement(Checked, null) : null), /*#__PURE__*/React.createElement("div", {
-    className: "infoIcon"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-    onClick: showFileDetails,
-    "data-testid": "fm-file-wrapper-file-info-icon"
-  })), /*#__PURE__*/React.createElement(LazyLoad, {
-    height: 200,
-    offsetVertical: 300
-  }, /*#__PURE__*/React.createElement(Ripple, null, /*#__PURE__*/React.createElement("div", {
-    className: "filePreview"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "clickableArea",
-    onClick: onSelect
-  }), children)))), /*#__PURE__*/React.createElement("div", {
-    className: "label",
-    onClick: onSelect
-  }, file.name));
-}, function (prev, next) {
-  if (prev.selected !== next.selected) {
-    return false;
-  }
-
-  if (prev.file.name !== next.file.name) {
-    return false;
-  }
-
-  return true;
-});

package/components/FileManager/FileDetails/Name.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare function Name({ file, canEdit }: {
-    file: any;
-    canEdit: any;
-}): JSX.Element;
-export default Name;

package/components/FileManager/FileDetails/Name.js

@@ -1,113 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _cloneDeep from "lodash/cloneDeep";
-import _get from "lodash/get";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useMemo } from "react";
-import { useApolloClient } from "@apollo/react-hooks";
-import { Input } from "@webiny/ui/Input";
-import { Form } from "@webiny/form";
-import { validation } from "@webiny/validation";
-import { useSnackbar } from "../../../hooks/useSnackbar";
-import { UPDATE_FILE, LIST_FILES } from "./../graphql";
-import { useFileManager } from "./../FileManagerContext";
-
-function Name(_ref) {
-  var file = _ref.file,
-      canEdit = _ref.canEdit;
-  var name = file.name || "";
-
-  var _useSnackbar = useSnackbar(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var client = useApolloClient();
-
-  var _useFileManager = useFileManager(),
-      queryParams = _useFileManager.queryParams;
-
-  var editContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Form, {
-      data: {
-        name: name
-      },
-      onSubmit: /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-          var name;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  name = _ref2.name;
-
-                  if (!(name === file.name)) {
-                    _context.next = 3;
-                    break;
-                  }
-
-                  return _context.abrupt("return");
-
-                case 3:
-                  _context.next = 5;
-                  return client.mutate({
-                    mutation: UPDATE_FILE,
-                    variables: {
-                      id: file.id,
-                      data: {
-                        name: name
-                      }
-                    },
-                    update: function update(cache, updated) {
-                      var newFileData = _get(updated, "data.fileManager.updateFile.data");
-
-                      var data = _cloneDeep(cache.readQuery({
-                        query: LIST_FILES,
-                        variables: queryParams
-                      }));
-
-                      data.fileManager.listFiles.data.forEach(function (item) {
-                        if (item.src === newFileData.src) {
-                          item.name = newFileData.name;
-                        }
-                      });
-                      cache.writeQuery({
-                        query: LIST_FILES,
-                        variables: queryParams,
-                        data: data
-                      });
-                    }
-                  });
-
-                case 5:
-                  showSnackbar("Name successfully updated.");
-
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function (_x) {
-          return _ref3.apply(this, arguments);
-        };
-      }()
-    }, function (_ref4) {
-      var Bind = _ref4.Bind,
-          submit = _ref4.submit;
-      return /*#__PURE__*/React.createElement(Bind, {
-        name: "name",
-        validators: validation.create("required")
-      }, /*#__PURE__*/React.createElement(Input, {
-        disabled: !canEdit(file),
-        autoFocus: true,
-        placeholder: "Enter name",
-        fullwidth: true,
-        onBlur: submit,
-        description: "A descriptive name is easier to remember."
-      }));
-    });
-  }, [name, file.name, canEdit]);
-  return /*#__PURE__*/React.createElement("li-content", null, editContent);
-}
-
-export default Name;

package/components/FileManager/FileDetails/Tags.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare function Tags({ file, canEdit }: {
-    file: any;
-    canEdit: any;
-}): JSX.Element;
-export default Tags;

package/components/FileManager/FileDetails/Tags.js

@@ -1,241 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useState } from "react";
-import classNames from "classnames";
-import { css } from "emotion";
-import { useApolloClient, useQuery } from "@apollo/react-hooks";
-import set from "lodash/set";
-import get from "lodash/get";
-import cloneDeep from "lodash/cloneDeep";
-import { Chips, Chip } from "@webiny/ui/Chips";
-import { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from "@webiny/ui/Button";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
-import { Icon } from "@webiny/ui/Icon";
-import { Form } from "@webiny/form";
-import { useSnackbar } from "../../../hooks/useSnackbar";
-import { useFileManager } from "./../FileManagerContext";
-import { UPDATE_FILE, LIST_FILES, LIST_TAGS } from "./../graphql";
-import { ReactComponent as EditIcon } from "@svgr/webpack!./../icons/round-edit-24px.svg";
-import { ReactComponent as LabelIcon } from "@svgr/webpack!./../icons/round-label-24px.svg";
-var chipsStyle = /*#__PURE__*/css({
-  "&.mdc-chip-set": {
-    padding: 0,
-    marginLeft: -4,
-    "& .mdc-chip": {
-      backgroundColor: "var(--mdc-theme-background)"
-    }
-  }
-}, "label:chipsStyle;");
-var iconButtonStyle = /*#__PURE__*/css({
-  "&.mdc-icon-button svg": {
-    width: 20,
-    height: 20
-  }
-}, "label:iconButtonStyle;");
-var addTagsStyle = /*#__PURE__*/css({
-  "&.mdc-button:not(:disabled)": {
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    textTransform: "capitalize",
-    letterSpacing: "initial",
-    marginLeft: -8
-  }
-}, "label:addTagsStyle;");
-var actionWrapperStyle = /*#__PURE__*/css({
-  marginTop: 16,
-  "& button:first-child": {
-    marginRight: 16
-  }
-}, "label:actionWrapperStyle;");
-
-function Tags(_ref) {
-  var file = _ref.file,
-      canEdit = _ref.canEdit;
-  var client = useApolloClient();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      editing = _useState2[0],
-      setEdit = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      saving = _useState4[0],
-      setSaving = _useState4[1];
-
-  var _useState5 = useState(Array.isArray(file.tags) ? _toConsumableArray(file.tags) : []),
-      _useState6 = _slicedToArray(_useState5, 2),
-      initialTags = _useState6[0],
-      setInitialTags = _useState6[1];
-
-  var _useSnackbar = useSnackbar(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var _useFileManager = useFileManager(),
-      queryParams = _useFileManager.queryParams;
-
-  var handleEdit = useCallback(function () {
-    return setEdit(true);
-  }, []);
-  var listTagsQuery = useQuery(LIST_TAGS);
-  var allTags = get(listTagsQuery, "data.fileManager.listTags") || [];
-  var isEditingAllowed = canEdit(file);
-  var renderHeaderContent = useCallback(function (_ref2) {
-    var data = _ref2.data;
-
-    if (editing) {
-      return null;
-    }
-
-    var hasTags = data.tags.length > 0;
-
-    if (hasTags) {
-      // Render existing tags and "edit tags" action.
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Chips, {
-        className: classNames("list-item__content", chipsStyle)
-      }, data.tags.map(function (tag, index) {
-        var label = typeof tag === "string" ? tag : tag.name;
-        return /*#__PURE__*/React.createElement(Chip, {
-          key: label + index,
-          label: label
-        });
-      })), isEditingAllowed && /*#__PURE__*/React.createElement(IconButton, {
-        className: iconButtonStyle,
-        icon: /*#__PURE__*/React.createElement(EditIcon, null),
-        onClick: handleEdit
-      }));
-    } // Render "add tags" action.
-
-
-    return /*#__PURE__*/React.createElement(ButtonDefault, {
-      className: addTagsStyle,
-      onClick: handleEdit,
-      disabled: !isEditingAllowed
-    }, "Add tags...");
-  }, [editing, isEditingAllowed]);
-  return /*#__PURE__*/React.createElement(Form, {
-    data: {
-      tags: initialTags
-    },
-    onSubmit: /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-        var tags;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                tags = _ref3.tags;
-                setSaving(true);
-                client.mutate({
-                  mutation: UPDATE_FILE,
-                  variables: {
-                    id: file.id,
-                    data: {
-                      tags: tags
-                    }
-                  },
-                  update: function update(cache, updated) {
-                    var newFileData = get(updated, "data.fileManager.updateFile.data"); // 1. Update files list cache
-
-                    var data = cloneDeep(cache.readQuery({
-                      query: LIST_FILES,
-                      variables: queryParams
-                    }));
-                    data.fileManager.listFiles.data.forEach(function (item) {
-                      if (item.key === newFileData.key) {
-                        item.tags = newFileData.tags;
-                      }
-                    });
-                    cache.writeQuery({
-                      query: LIST_FILES,
-                      variables: queryParams,
-                      data: data
-                    }); // 2. Update "LIST_TAGS" cache
-
-                    if (Array.isArray(newFileData.tags)) {
-                      // Get list tags data
-                      var listTagsData = cloneDeep(cache.readQuery({
-                        query: LIST_TAGS
-                      })); // Add new tag in list
-
-                      var updatedTagsList = _toConsumableArray(newFileData.tags);
-
-                      if (Array.isArray(listTagsData.fileManager.listTags)) {
-                        listTagsData.fileManager.listTags.forEach(function (tag) {
-                          if (!updatedTagsList.includes(tag)) {
-                            updatedTagsList.push(tag);
-                          }
-                        });
-                      }
-
-                      set(listTagsData, "fileManager.listTags", updatedTagsList); // Write it to cache
-
-                      cache.writeQuery({
-                        query: LIST_TAGS,
-                        data: listTagsData
-                      });
-                    }
-                  }
-                }).then(function () {
-                  setInitialTags(tags);
-                  setSaving(false);
-                  setEdit(false);
-                  showSnackbar("Tags successfully updated.");
-                });
-
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref4.apply(this, arguments);
-      };
-    }()
-  }, function (_ref5) {
-    var Bind = _ref5.Bind,
-        data = _ref5.data,
-        setValue = _ref5.setValue,
-        submit = _ref5.submit;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
-      className: "list-item__icon",
-      icon: /*#__PURE__*/React.createElement(LabelIcon, null)
-    }), renderHeaderContent({
-      data: data
-    })), editing && /*#__PURE__*/React.createElement("li-content", null, /*#__PURE__*/React.createElement(Bind, {
-      name: "tags",
-      beforeChange: function beforeChange(tags, baseOnChange) {
-        var formattedTags = tags.map(function (tag) {
-          return tag.toLowerCase();
-        });
-        baseOnChange(formattedTags);
-      }
-    }, /*#__PURE__*/React.createElement(MultiAutoComplete, {
-      options: allTags,
-      placeholder: "homepage asset",
-      description: "Type in a new tag or select an existing one.",
-      unique: true,
-      allowFreeInput: true,
-      useSimpleValues: true,
-      disabled: saving
-    })), /*#__PURE__*/React.createElement("div", {
-      className: actionWrapperStyle
-    }, /*#__PURE__*/React.createElement(ButtonPrimary, {
-      small: true,
-      onClick: submit,
-      "data-testid": "fm.tags.submit"
-    }, "Submit"), /*#__PURE__*/React.createElement(ButtonSecondary, {
-      small: true,
-      onClick: function onClick() {
-        setValue("tags", initialTags);
-        setEdit(false);
-      }
-    }, "Cancel"))));
-  });
-}
-
-export default Tags;

package/components/FileManager/FileDetails.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "li-title": {
-                children?: React.ReactNode;
-            };
-            "li-content": {
-                children?: React.ReactNode;
-            };
-        }
-    }
-}
-declare type FileDetailsProps = {
-    canEdit: (item: any) => boolean;
-    file: {
-        name: string;
-        [key: string]: any;
-    };
-    [key: string]: any;
-};
-export default function FileDetails(props: FileDetailsProps): JSX.Element;
-export {};