remotion
Version:
Make videos programmatically
51 lines (50 loc) • 2.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Folder = exports.FolderContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
const nonce_js_1 = require("./nonce.js");
const truthy_js_1 = require("./truthy.js");
const validate_folder_name_js_1 = require("./validation/validate-folder-name.js");
exports.FolderContext = (0, react_1.createContext)({
folderName: null,
parentName: null,
});
/*
* @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
* @see [Documentation](https://remotion.dev/docs/folder)
*/
const Folder = (props) => {
var _a;
const { name, children } = props;
const parent = (0, react_1.useContext)(exports.FolderContext);
const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
const nonce = (0, nonce_js_1.useNonce)();
const stack = (_a = props.stack) !== null && _a !== void 0 ? _a : null;
(0, validate_folder_name_js_1.validateFolderName)(name);
const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
const value = (0, react_1.useMemo)(() => {
return {
folderName: name,
parentName,
};
}, [name, parentName]);
(0, react_1.useEffect)(() => {
registerFolder(name, parentName, nonce.get(), stack);
return () => {
unregisterFolder(name, parentName);
};
}, [
name,
parent.folderName,
parentName,
registerFolder,
unregisterFolder,
nonce,
stack,
]);
return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
};
exports.Folder = Folder;