media-manager-next/lib/MediaManager.js

Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const axios_hooks_1 = __importDefault(require("axios-hooks"));
const material_1 = require("@mui/material");
const ramda_1 = require("ramda");
const MediaModalNavBar_1 = __importDefault(require("./components/MediaModalNavBar"));
const MediaModalContent_1 = __importDefault(require("./components/MediaModalContent"));
const MediaModalRightPanel_1 = __importDefault(require("./components/MediaModalRightPanel"));
const MediaManager = ({ onSelect, onClose, selectedDefaultId, t, locale, selectedItemForm }) => {
    const [{ data, loading, error }, refetchList] = (0, axios_hooks_1.default)(`/api/media/all?language=${locale}`);
    const [, editMediaItem] = (0, axios_hooks_1.default)({
        url: `/api/media/edit?language=${locale}`,
        method: 'POST',
    }, { manual: true });
    const [, deleteMediaItem] = (0, axios_hooks_1.default)({
        url: '/api/media/delete',
        method: 'POST',
    }, { manual: true });
    const [initialItemState, setInitialItemState] = (0, react_1.useState)(null);
    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
    const handleSetSelectedItem = (0, react_1.useCallback)((item) => {
        setInitialItemState(item);
        setSelectedItem(item);
    }, [setInitialItemState, setSelectedItem]);
    const handleOnChangeValue = (0, react_1.useCallback)((key, value) => {
        const newSelectedItem = (0, ramda_1.assoc)(key, value, selectedItem);
        setSelectedItem(newSelectedItem);
    }, [selectedItem, setSelectedItem]);
    const handleSubmitAction = (type) => {
        if (type === 'SAVE') {
            editMediaItem({ data: selectedItem }).then(({ data }) => {
                refetchList();
                handleSetSelectedItem(data);
            });
        }
        else if (type === 'CANCEL') {
            setSelectedItem(initialItemState);
        }
        else if (type === 'DELETE') {
            deleteMediaItem({ data: selectedItem }).then(() => {
                refetchList();
                handleSetSelectedItem(null);
            });
        }
        else if (type === 'SELECT') {
            onSelect(selectedItem);
            onClose();
        }
    };
    const drawerWidth = 300;
    return (react_1.default.createElement(material_1.Dialog, { onClose: onClose, open: true, maxWidth: "xl", fullWidth: true },
        react_1.default.createElement(MediaModalNavBar_1.default, { t: t }),
        react_1.default.createElement(material_1.Box, { sx: {
                display: 'flex',
                overflowX: 'hidden',
            } },
            react_1.default.createElement(MediaModalContent_1.default, { data: data, drawerWidth: drawerWidth, error: error, loading: loading, selectedItemId: selectedItem?.id || selectedDefaultId, setSelectedItem: handleSetSelectedItem }),
            react_1.default.createElement(MediaModalRightPanel_1.default, { drawerWidth: drawerWidth, onChangeValue: handleOnChangeValue, onSubmitAction: handleSubmitAction, selectedItem: selectedItem, selectedItemChanged: !(0, ramda_1.equals)(selectedItem, initialItemState), selectedItemForm: selectedItemForm, t: t, updateList: refetchList }))));
};
exports.default = MediaManager;
//# sourceMappingURL=MediaManager.js.map