tweak-tools
Version:
Tweak your React projects until awesomeness
78 lines (77 loc) • 5.24 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.Vector = exports.Container = void 0;
const react_1 = __importStar(require("react"));
const context_1 = require("../../context");
const styles_1 = require("../../styles");
const hooks_1 = require("../../hooks");
const utils_1 = require("../../utils");
const Number_1 = require("../Number");
function Coordinate({ value, id, valueKey, settings, onUpdate, innerLabelTrim, }) {
// TODO make this better
const valueRef = (0, react_1.useRef)(value[valueKey]);
valueRef.current = value[valueKey];
const setValue = (0, react_1.useCallback)((newValue) =>
// @ts-expect-error
onUpdate({ [valueKey]: (0, utils_1.sanitizeValue)({ type: 'NUMBER', value: valueRef.current, settings }, newValue) }), [onUpdate, settings, valueKey]);
const number = (0, hooks_1.useInputSetters)({ type: 'NUMBER', value: value[valueKey], settings, setValue });
return (react_1.default.createElement(Number_1.Number, { id: id, label: valueKey, value: value[valueKey], displayValue: number.displayValue, onUpdate: number.onUpdate, onChange: number.onChange, settings: settings, innerLabelTrim: innerLabelTrim }));
}
exports.Container = (0, styles_1.styled)('div', {
display: 'grid',
columnGap: '$colGap',
gridAutoFlow: 'column dense',
alignItems: 'center',
variants: {
withLock: {
true: {
gridTemplateColumns: '10px auto',
'> svg': { cursor: 'pointer' },
},
},
},
});
// TODO increase click area
function Lock(_a) {
var { locked } = _a, props = __rest(_a, ["locked"]);
return (react_1.default.createElement("svg", Object.assign({ width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), locked ? (react_1.default.createElement("path", { d: "M5 4.63601C5 3.76031 5.24219 3.1054 5.64323 2.67357C6.03934 2.24705 6.64582 1.9783 7.5014 1.9783C8.35745 1.9783 8.96306 2.24652 9.35823 2.67208C9.75838 3.10299 10 3.75708 10 4.63325V5.99999H5V4.63601ZM4 5.99999V4.63601C4 3.58148 4.29339 2.65754 4.91049 1.99307C5.53252 1.32329 6.42675 0.978302 7.5014 0.978302C8.57583 0.978302 9.46952 1.32233 10.091 1.99162C10.7076 2.65557 11 3.57896 11 4.63325V5.99999H12C12.5523 5.99999 13 6.44771 13 6.99999V13C13 13.5523 12.5523 14 12 14H3C2.44772 14 2 13.5523 2 13V6.99999C2 6.44771 2.44772 5.99999 3 5.99999H4ZM3 6.99999H12V13H3V6.99999Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })) : (react_1.default.createElement("path", { d: "M9 3.63601C9 2.76044 9.24207 2.11211 9.64154 1.68623C10.0366 1.26502 10.6432 1 11.5014 1C12.4485 1 13.0839 1.30552 13.4722 1.80636C13.8031 2.23312 14 2.84313 14 3.63325H15C15 2.68242 14.7626 1.83856 14.2625 1.19361C13.6389 0.38943 12.6743 0 11.5014 0C10.4294 0 9.53523 0.337871 8.91218 1.0021C8.29351 1.66167 8 2.58135 8 3.63601V6H1C0.447715 6 0 6.44772 0 7V13C0 13.5523 0.447715 14 1 14H10C10.5523 14 11 13.5523 11 13V7C11 6.44772 10.5523 6 10 6H9V3.63601ZM1 7H10V13H1V7Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))));
}
function Vector({ value, onUpdate, settings, innerLabelTrim, }) {
const { id, setSettings } = (0, context_1.useInputContext)();
// TODO atm if lock is explicitly set in settings we show the lock, this can probably be improved with better logic.
const { lock, locked } = settings;
return (react_1.default.createElement(exports.Container, { withLock: lock },
lock && react_1.default.createElement(Lock, { locked: locked, onClick: () => setSettings({ locked: !locked }) }),
Object.keys(value).map((key, i) => (react_1.default.createElement(Coordinate, { id: i === 0 ? id : `${id}.${key}`, key: key, valueKey: key, value: value, settings: settings[key], onUpdate: onUpdate, innerLabelTrim: innerLabelTrim })))));
}
exports.Vector = Vector;