tweak-tools
Version:
Tweak your React projects until awesomeness
104 lines (103 loc) • 6.03 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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TweakRoot = void 0;
const react_1 = __importStar(require("react"));
const tree_1 = require("./tree");
const Folder_1 = require("../Folder");
const hooks_1 = require("../../hooks");
const StyledRoot_1 = require("./StyledRoot");
const styles_1 = require("../../styles");
const context_1 = require("../../context");
const Filter_1 = require("./Filter");
function TweakRoot(_a) {
var { store, hidden = false, theme, collapsed = false } = _a, props = __rest(_a, ["store", "hidden", "theme", "collapsed"]);
const themeContext = (0, hooks_1.useDeepMemo)(() => (0, styles_1.mergeTheme)(theme), [theme]);
// collapsible
const [toggled, setToggle] = (0, react_1.useState)(!collapsed);
const computedToggled = typeof collapsed === 'object' ? !collapsed.collapsed : toggled;
const computedSetToggle = (0, react_1.useMemo)(() => {
if (typeof collapsed === 'object') {
return (value) => {
if (typeof value === 'function') {
collapsed.onChange(!value(!collapsed.collapsed));
}
else {
collapsed.onChange(!value);
}
};
}
return setToggle;
}, [collapsed]);
if (!store || hidden)
return null;
return (react_1.default.createElement(context_1.ThemeContext.Provider, { value: themeContext },
react_1.default.createElement(TweakCore, Object.assign({ store: store }, props, { toggled: computedToggled, setToggle: computedSetToggle, rootClass: themeContext.className }))));
}
exports.TweakRoot = TweakRoot;
const TweakCore = react_1.default.memo(({ store, rootClass, fill = false, flat = false, neverHide = false, oneLineLabels = false, titleBar = {
title: undefined,
drag: true,
filter: true,
position: undefined,
onDrag: undefined,
onDragStart: undefined,
onDragEnd: undefined,
}, hideCopyButton = false, toggled, setToggle, }) => {
var _a, _b;
const paths = (0, hooks_1.useVisiblePaths)(store);
const [filter, setFilter] = (0, react_1.useState)('');
const tree = (0, react_1.useMemo)(() => (0, tree_1.buildTree)(paths, filter), [paths, filter]);
// drag
const [rootRef, set] = (0, hooks_1.useTransform)();
// this generally happens on first render because the store is initialized in useEffect.
const shouldShow = neverHide || paths.length > 0;
const title = typeof titleBar === 'object' ? titleBar.title || undefined : undefined;
const drag = typeof titleBar === 'object' ? (_a = titleBar.drag) !== null && _a !== void 0 ? _a : true : true;
const filterEnabled = typeof titleBar === 'object' ? (_b = titleBar.filter) !== null && _b !== void 0 ? _b : true : true;
const position = typeof titleBar === 'object' ? titleBar.position || undefined : undefined;
const onDrag = typeof titleBar === 'object' ? titleBar.onDrag || undefined : undefined;
const onDragStart = typeof titleBar === 'object' ? titleBar.onDragStart || undefined : undefined;
const onDragEnd = typeof titleBar === 'object' ? titleBar.onDragEnd || undefined : undefined;
react_1.default.useEffect(() => {
set({ x: position === null || position === void 0 ? void 0 : position.x, y: position === null || position === void 0 ? void 0 : position.y });
}, [position, set]);
(0, styles_1.globalStyles)();
return (react_1.default.createElement(context_1.PanelSettingsContext.Provider, { value: { hideCopyButton } },
react_1.default.createElement(StyledRoot_1.StyledRoot, { ref: rootRef, className: rootClass, fill: fill, flat: flat, oneLineLabels: oneLineLabels, hideTitleBar: !titleBar, style: { display: shouldShow ? 'block' : 'none' } },
titleBar && (react_1.default.createElement(Filter_1.TitleWithFilter, { onDrag: (point) => {
set(point);
onDrag === null || onDrag === void 0 ? void 0 : onDrag(point);
}, onDragStart: (point) => onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(point), onDragEnd: (point) => onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(point), setFilter: setFilter, toggle: (flag) => setToggle((t) => flag !== null && flag !== void 0 ? flag : !t), toggled: toggled, title: title, drag: drag, filterEnabled: filterEnabled, from: position })),
shouldShow && (react_1.default.createElement(context_1.StoreContext.Provider, { value: store },
react_1.default.createElement(Folder_1.TreeWrapper, { isRoot: true, fill: fill, flat: flat, tree: tree, toggled: toggled }))))));
});