burdy
Version:
Open Source Headless Platform
172 lines (171 loc) • 9.85 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 react_hook_form_1 = require("react-hook-form");
const react_2 = require("@fluentui/react");
const hoc_1 = require("../helpers/hoc");
const empty_1 = __importDefault(require("../components/empty"));
const assets_context_1 = require("../features/assets/context/assets.context");
const assets_tiles_1 = __importDefault(require("../features/assets/components/assets-tiles"));
const assets_select_panel_1 = __importDefault(require("../features/assets/components/assets-select-panel"));
const dynamic_form_1 = require("./dynamic-form");
const classnames = (0, react_2.mergeStyleSets)({
assetsWrapper: {
minHeight: 174,
overflowY: 'auto',
overflowX: 'hidden',
},
});
const AssetTiles = ({ assets }) => {
var _a;
const { selection, getAssets } = (0, assets_context_1.useAssets)();
const [assetsVal, setAssetsVal] = (0, react_1.useState)([]);
(0, react_1.useEffect)(() => {
const result = [...((getAssets === null || getAssets === void 0 ? void 0 : getAssets.result) || [])];
result.sort((a, b) => {
const aIndex = assets.findIndex((asset) => asset.npath == a.npath);
const bIndex = assets.findIndex((asset) => asset.npath == b.npath);
return aIndex - bIndex;
});
setAssetsVal(result);
}, [getAssets === null || getAssets === void 0 ? void 0 : getAssets.result]);
(0, react_1.useEffect)(() => {
if ((assets === null || assets === void 0 ? void 0 : assets.length) > 0) {
getAssets.execute({
npath: assets.map((asset) => asset === null || asset === void 0 ? void 0 : asset.npath).join(','),
});
}
else {
getAssets.reset();
}
}, [assets]);
return (react_1.default.createElement("div", { className: classnames.assetsWrapper },
react_1.default.createElement(assets_tiles_1.default, { loading: getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading, items: assetsVal, compact: true, selection: selection, onItemInvoked: (item) => {
selection.setAllSelected(false);
selection.setKeySelected(item === null || item === void 0 ? void 0 : item.id, true, false);
} }),
!(getAssets === null || getAssets === void 0 ? void 0 : getAssets.loading) && !(((_a = getAssets === null || getAssets === void 0 ? void 0 : getAssets.result) === null || _a === void 0 ? void 0 : _a.length) > 0) && (react_1.default.createElement(empty_1.default, { compact: true, title: "No assets", image: "files" }))));
};
const DynamicAssets = ({ field, name, mimeTypes, selectionMode = react_2.SelectionMode.single, }) => {
const { control, disabled } = (0, dynamic_form_1.useExtendedFormContext)();
const { selectedAssets, getAssets, selection } = (0, assets_context_1.useAssets)();
const [addAssetOpen, setAddAssetOpen] = (0, react_1.useState)(false);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_hook_form_1.Controller, { name: name, defaultValue: [], control: control, render: ({ field: { onChange, value: fieldValue } }) => {
var _a, _b;
const value = (0, react_1.useMemo)(() => {
let val = [];
try {
val = JSON.parse(fieldValue);
}
catch (_a) {
//
}
return val;
}, [fieldValue]);
const selectedItem = (0, react_1.useMemo)(() => {
if ((selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) === 1) {
return selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets[0];
}
return undefined;
}, [selectedAssets, value]);
const selectedItemIndex = (0, react_1.useMemo)(() => {
return (value || []).findIndex((item) => (item === null || item === void 0 ? void 0 : item.npath) == (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.npath));
}, [value, selectedItem]);
const move = (offset) => {
const items = [
...(value || []).filter((_val, i) => i !== selectedItemIndex),
];
items.splice(selectedItemIndex + offset, 0, {
npath: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.npath,
});
onChange(JSON.stringify(items));
selection.setAllSelected(false);
};
const commandItems = [
{
key: 'addAsset',
text: 'Add',
disabled: disabled ||
(selectionMode === react_2.SelectionMode.single &&
((_a = getAssets === null || getAssets === void 0 ? void 0 : getAssets.result) === null || _a === void 0 ? void 0 : _a.length) > 0),
iconProps: { iconName: 'Add' },
onClick: () => {
setAddAssetOpen(true);
},
},
{
key: 'remove',
text: 'Remove',
disabled: disabled || (selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) === 0,
iconProps: { iconName: 'Delete' },
onClick: () => {
onChange(JSON.stringify((value !== null && value !== void 0 ? value : []).filter((asset) => selectedAssets.every((selected) => (selected === null || selected === void 0 ? void 0 : selected.npath) != (asset === null || asset === void 0 ? void 0 : asset.npath)))));
},
},
{
key: 'moveUp',
disabled: disabled || (selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) !== 1 || selectedItemIndex === 0,
iconProps: { iconName: 'Up' },
onClick: () => {
move(-1);
},
},
{
key: 'moveDown',
disabled: disabled ||
(selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) !== 1 ||
selectedItemIndex >= (value || []).length - 1,
iconProps: { iconName: 'Down' },
onClick: () => {
move(1);
},
},
];
return (react_1.default.createElement("div", null,
((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) > 0 && (react_1.default.createElement(react_2.Label, null, field === null || field === void 0 ? void 0 : field.label)),
react_1.default.createElement(react_2.CommandBar, { styles: {
root: {
padding: 0,
marginBottom: 8,
},
}, items: commandItems }),
react_1.default.createElement(AssetTiles, { assets: value }),
react_1.default.createElement(assets_select_panel_1.default, { isOpen: addAssetOpen, onDismiss: () => {
setAddAssetOpen(false);
}, mimeTypes: mimeTypes, selectionMode: selectionMode, onSubmit: (assets) => {
onChange(JSON.stringify([
...(value || []).filter((val) => !assets.some((asset) => (asset === null || asset === void 0 ? void 0 : asset.npath) == (val === null || val === void 0 ? void 0 : val.npath))),
...(assets || []).map((asset) => ({
npath: asset === null || asset === void 0 ? void 0 : asset.npath,
})),
]));
setAddAssetOpen(false);
} })));
} })));
};
exports.default = (0, hoc_1.composeWrappers)({
assetsContext: assets_context_1.AssetsContextProvider,
})(DynamicAssets);