@webiny/app-file-manager 5.37.0-beta.0 → 5.37.0-beta.2

package/components/FileDetails/Tags.js

@@ -1,191 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _emotion = require("emotion");
-var _Chips = require("@webiny/ui/Chips");
-var _Button = require("@webiny/ui/Button");
-var _AutoComplete = require("@webiny/ui/AutoComplete");
-var _Icon = require("@webiny/ui/Icon");
-var _form = require("@webiny/form");
-var _edit = require("@material-design-icons/svg/outlined/edit.svg");
-var _label = require("@material-design-icons/svg/outlined/label.svg");
-var _appAdmin = require("@webiny/app-admin");
-var _ = require("../..");
-var _appAco = require("@webiny/app-aco");
-var _constants = require("../../constants");
-var _tagsHelpers = require("../../tagsHelpers");
-var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-chip-set": {
-    padding: 0,
-    marginLeft: -4,
-    "& .mdc-chip": {
-      backgroundColor: "var(--mdc-theme-background)"
-    }
-  }
-}, "label:chipsStyle;");
-var iconButtonStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-icon-button svg": {
-    width: 20,
-    height: 20
-  }
-}, "label:iconButtonStyle;");
-var addTagsStyle = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-button:not(:disabled)": {
-    color: "var(--mdc-theme-text-secondary-on-background)",
-    textTransform: "capitalize",
-    letterSpacing: "initial",
-    marginLeft: -8
-  }
-}, "label:addTagsStyle;");
-var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
-  marginTop: 16,
-  "& button:first-child": {
-    marginRight: 16
-  }
-}, "label:actionWrapperStyle;");
-var Tags = function Tags(_ref) {
-  var scope = _ref.scope,
-    own = _ref.own;
-  var _useFile = (0, _.useFile)(),
-    file = _useFile.file;
-  var _useTags = (0, _appAco.useTags)((0, _objectSpread2.default)({
-      type: _constants.ACO_TYPE,
-      tagsModifier: (0, _tagsHelpers.tagsModifier)(scope)
-    }, (0, _tagsHelpers.getTagsInitialParams)({
-      scope: scope,
-      own: own
-    }))),
-    tags = _useTags.tags;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    editing = _useState2[0],
-    setEdit = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    updating = _useState4[0],
-    setUpdating = _useState4[1];
-  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var _useFileManagerApi = (0, _.useFileManagerApi)(),
-    canEdit = _useFileManagerApi.canEdit;
-  var _useFileManagerAcoVie = (0, _.useFileManagerAcoView)(),
-    updateFile = _useFileManagerAcoVie.updateFile;
-  var _useState5 = (0, _react.useState)(file.tags),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    initialTags = _useState6[0],
-    setInitialTags = _useState6[1];
-  var handleEdit = (0, _react.useCallback)(function () {
-    return setEdit(true);
-  }, []);
-  var isEditingAllowed = canEdit(file);
-  var renderHeaderContent = (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
-        className: (0, _classnames.default)("list-item__content", chipsStyle)
-      }, data.tags.map(function (tag) {
-        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
-          key: tag,
-          label: tag
-        });
-      })), isEditingAllowed && /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-        className: iconButtonStyle,
-        icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
-        onClick: handleEdit
-      }));
-    }
-    // Render "add tags" action.
-    return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
-      className: addTagsStyle,
-      onClick: handleEdit,
-      disabled: !isEditingAllowed,
-      "data-testid": "fm.tags.add"
-    }, "Add tags...");
-  }, [editing, isEditingAllowed]);
-  var onSubmit = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
-      var tags;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            tags = _ref3.tags;
-            setUpdating(true);
-            _context.next = 4;
-            return updateFile(file.id, {
-              tags: tags
-            });
-          case 4:
-            setUpdating(false);
-            setInitialTags(tags);
-            setEdit(false);
-            showSnackbar("Tags successfully updated.");
-          case 8:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onSubmit(_x) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/_react.default.createElement(_form.Form, {
-    data: {
-      tags: initialTags
-    },
-    onSubmit: onSubmit
-  }, function (_ref5) {
-    var Bind = _ref5.Bind,
-      data = _ref5.data,
-      setValue = _ref5.setValue,
-      submit = _ref5.submit;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-      className: "list-item__icon",
-      icon: /*#__PURE__*/_react.default.createElement(_label.ReactComponent, null)
-    }), renderHeaderContent({
-      data: data
-    })), editing && /*#__PURE__*/_react.default.createElement("li-content", null, /*#__PURE__*/_react.default.createElement(Bind, {
-      name: "tags"
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, {
-      options: tags.map(function (tagItem) {
-        return tagItem.tag;
-      }),
-      placeholder: "homepage asset",
-      description: "Type in a new tag or select an existing one.",
-      unique: true,
-      allowFreeInput: true,
-      useSimpleValues: true,
-      disabled: updating
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: actionWrapperStyle
-    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      small: true,
-      onClick: submit,
-      "data-testid": "fm.tags.submit"
-    }, "Submit"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-      small: true,
-      onClick: function onClick() {
-        setValue("tags", initialTags);
-        setEdit(false);
-      }
-    }, "Cancel"))));
-  });
-};
-var _default = Tags;
-exports.default = _default;

package/components/FileDetails/Tags.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","scope","own","useFile","file","useTags","type","ACO_TYPE","tagsModifier","getTagsInitialParams","tags","useState","editing","setEdit","updating","setUpdating","useSnackbar","showSnackbar","useFileManagerApi","canEdit","useFileManagerAcoView","updateFile","initialTags","setInitialTags","handleEdit","useCallback","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","map","tag","onSubmit","id","Bind","setValue","submit","tagItem"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as LabelIcon } from \"@material-design-icons/svg/outlined/label.svg\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFile, useFileManagerApi, useFileManagerAcoView } from \"~/index\";\nimport { useTags } from \"@webiny/app-aco\";\nimport { ACO_TYPE } from \"~/constants\";\nimport { getTagsInitialParams, tagsModifier } from \"~/tagsHelpers\";\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsFormData {\n    tags: string[];\n}\n\ninterface TagsProps {\n    scope?: string;\n    own?: boolean;\n}\n\nconst Tags: React.VFC<TagsProps> = ({ scope, own }) => {\n    const { file } = useFile();\n    const { tags } = useTags({\n        type: ACO_TYPE,\n        tagsModifier: tagsModifier(scope),\n        ...getTagsInitialParams({ scope, own })\n    });\n    const [editing, setEdit] = useState(false);\n    const [updating, setUpdating] = useState(false);\n    const { showSnackbar } = useSnackbar();\n    const { canEdit } = useFileManagerApi();\n    const { updateFile } = useFileManagerAcoView();\n    const [initialTags, setInitialTags] = useState(file.tags);\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: TagsFormData }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags.map(tag => {\n                                return <Chip key={tag} label={tag} />;\n                            })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                    data-testid=\"fm.tags.add\"\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    const onSubmit: FormOnSubmit<TagsFormData> = async ({ tags }) => {\n        setUpdating(true);\n        await updateFile(file.id, { tags });\n        setUpdating(false);\n        setInitialTags(tags);\n        setEdit(false);\n        showSnackbar(\"Tags successfully updated.\");\n    };\n\n    return (\n        <Form<TagsFormData> data={{ tags: initialTags }} onSubmit={onSubmit}>\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({ data })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind name={\"tags\"}>\n                                <MultiAutoComplete\n                                    options={tags.map(tagItem => tagItem.tag)}\n                                    placeholder={\"homepage asset\"}\n                                    description={\"Type in a new tag or select an existing one.\"}\n                                    unique={true}\n                                    allowFreeInput={true}\n                                    useSimpleValues={true}\n                                    disabled={updating}\n                                />\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={submit}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/modules/FileManagerRenderer/AcoRenderer/FileManagerAcoView.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { FilesRules } from "react-butterfiles";
-export interface FileManagerAcoViewProps {
-    onChange?: Function;
-    onClose?: () => void;
-    files?: FilesRules;
-    multiple?: boolean;
-    accept: Array<string>;
-    maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onUploadCompletion?: Function;
-    tags?: string[];
-    scope?: string;
-    own?: boolean;
-}
-declare const _default: React.FunctionComponent<FileManagerAcoViewProps>;
-export default _default;