@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

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 {};