tweak-tools
Version:
Tweak your React projects until awesomeness
63 lines (62 loc) • 3.66 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeWrapper = void 0;
const react_1 = __importStar(require("react"));
const context_1 = require("../../context");
const hooks_1 = require("../../hooks");
const styles_1 = require("../../styles");
const utils_1 = require("../../utils");
const Control_1 = require("../Control");
const tree_1 = require("../Tweak/tree");
const FolderTitle_1 = require("./FolderTitle");
const StyledFolder_1 = require("./StyledFolder");
const Folder = ({ name, path, tree }) => {
const store = (0, context_1.useStoreContext)();
const newPath = (0, utils_1.join)(path, name);
const { collapsed, color } = store.getFolderSettings(newPath);
const [toggled, setToggle] = (0, react_1.useState)(!collapsed);
const folderRef = (0, react_1.useRef)(null);
const widgetColor = (0, styles_1.useTh)('colors', 'folderWidgetColor');
const textColor = (0, styles_1.useTh)('colors', 'folderTextColor');
(0, react_1.useLayoutEffect)(() => {
folderRef.current.style.setProperty('--tweak-colors-folderWidgetColor', color || widgetColor);
folderRef.current.style.setProperty('--tweak-colors-folderTextColor', color || textColor);
}, [color, widgetColor, textColor]);
return (react_1.default.createElement(StyledFolder_1.StyledFolder, { ref: folderRef },
react_1.default.createElement(FolderTitle_1.FolderTitle, { name: name, toggled: toggled, toggle: () => setToggle((t) => !t) }),
react_1.default.createElement(exports.TreeWrapper, { parent: newPath, tree: tree, toggled: toggled })));
};
exports.TreeWrapper = react_1.default.memo(({ isRoot = false, fill = false, flat = false, parent, tree, toggled }) => {
const { wrapperRef, contentRef } = (0, hooks_1.useToggle)(toggled);
const store = (0, context_1.useStoreContext)();
const getOrder = ([key, o]) => {
var _a;
// @ts-ignore
const order = (0, tree_1.isInput)(o) ? (_a = store.getInput(o.path)) === null || _a === void 0 ? void 0 : _a.order : store.getFolderSettings((0, utils_1.join)(parent, key)).order;
return order || 0;
};
const entries = Object.entries(tree).sort((a, b) => getOrder(a) - getOrder(b));
return (react_1.default.createElement(StyledFolder_1.StyledWrapper, { ref: wrapperRef, isRoot: isRoot, fill: fill, flat: flat },
react_1.default.createElement(StyledFolder_1.StyledContent, { ref: contentRef, isRoot: isRoot, toggled: toggled }, entries.map(([key, value]) => (0, tree_1.isInput)(value) ? (
// @ts-expect-error
react_1.default.createElement(Control_1.Control, { key: value.path, valueKey: value.valueKey, path: value.path })) : (react_1.default.createElement(Folder, { key: key, name: key, path: parent, tree: value }))))));
});