tweak-tools
Version:
Tweak your React projects until awesomeness
99 lines (98 loc) • 6.09 kB
JavaScript
"use strict";
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.TitleWithFilter = void 0;
const react_1 = __importStar(require("react"));
const hooks_1 = require("../../hooks");
const utils_1 = require("../../utils");
const UI_1 = require("../UI");
const StyledFilter_1 = require("./StyledFilter");
const FilterInput = react_1.default.forwardRef(({ setFilter, toggle }, ref) => {
const [value, set] = (0, react_1.useState)('');
const debouncedOnChange = (0, react_1.useMemo)(() => (0, utils_1.debounce)(setFilter, 250), [setFilter]);
const clear = () => {
setFilter('');
set('');
};
const _onChange = (e) => {
const v = e.currentTarget.value;
toggle(true);
set(v);
};
(0, react_1.useEffect)(() => {
debouncedOnChange(value);
}, [value, debouncedOnChange]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(StyledFilter_1.StyledFilterInput, { ref: ref, value: value, placeholder: "[Open filter with CMD+SHIFT+L]", onPointerDown: (e) => e.stopPropagation(), onChange: _onChange }),
react_1.default.createElement(StyledFilter_1.Icon, { onClick: () => clear(), style: { visibility: value ? 'visible' : 'hidden' } },
react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "14", width: "14", viewBox: "0 0 20 20", fill: "currentColor" },
react_1.default.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" })))));
});
function TitleWithFilter({ setFilter, onDrag, onDragStart, onDragEnd, toggle, toggled, title, drag, filterEnabled, from, }) {
const [filterShown, setShowFilter] = (0, react_1.useState)(false);
const inputRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
var _a, _b;
if (filterShown)
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
else
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
}, [filterShown]);
const bind = (0, hooks_1.useDrag)(({ offset: [x, y], first, last }) => {
onDrag({ x, y });
if (first) {
onDragStart({ x, y });
}
if (last) {
onDragEnd({ x, y });
}
}, {
filterTaps: true,
from: ({ offset: [x, y] }) => [(from === null || from === void 0 ? void 0 : from.x) || x, (from === null || from === void 0 ? void 0 : from.y) || y],
});
(0, react_1.useEffect)(() => {
const handleShortcut = (event) => {
if (event.key === 'L' && event.shiftKey && event.metaKey) {
setShowFilter((f) => !f);
}
};
window.addEventListener('keydown', handleShortcut);
return () => window.removeEventListener('keydown', handleShortcut);
}, []);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(StyledFilter_1.StyledTitleWithFilter, { mode: drag ? 'drag' : undefined },
react_1.default.createElement(StyledFilter_1.Icon, { active: !toggled, onClick: () => toggle() },
react_1.default.createElement(UI_1.Chevron, { toggled: toggled, width: 12, height: 8 })),
react_1.default.createElement(StyledFilter_1.TitleContainer, Object.assign({}, (drag ? bind() : {}), { drag: drag, filterEnabled: filterEnabled }), title === undefined && drag ? (react_1.default.createElement("svg", { width: "20", height: "10", viewBox: "0 0 28 14", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("circle", { cx: "2", cy: "2", r: "2" }),
react_1.default.createElement("circle", { cx: "14", cy: "2", r: "2" }),
react_1.default.createElement("circle", { cx: "26", cy: "2", r: "2" }),
react_1.default.createElement("circle", { cx: "2", cy: "12", r: "2" }),
react_1.default.createElement("circle", { cx: "14", cy: "12", r: "2" }),
react_1.default.createElement("circle", { cx: "26", cy: "12", r: "2" }))) : (title)),
filterEnabled && (react_1.default.createElement(StyledFilter_1.Icon, { active: filterShown, onClick: () => setShowFilter((f) => !f) },
react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "20", viewBox: "0 0 20 20" },
react_1.default.createElement("path", { d: "M9 9a2 2 0 114 0 2 2 0 01-4 0z" }),
react_1.default.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z", clipRule: "evenodd" }))))),
react_1.default.createElement(StyledFilter_1.FilterWrapper, { toggled: filterShown },
react_1.default.createElement(FilterInput, { ref: inputRef, setFilter: setFilter, toggle: toggle }))));
}
exports.TitleWithFilter = TitleWithFilter;