tweak-tools
Version:
Tweak your React projects until awesomeness
62 lines (61 loc) • 3.38 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.NumberComponent = exports.Number = void 0;
const react_1 = __importStar(require("react"));
const ValueInput_1 = require("../ValueInput");
const UI_1 = require("../UI");
const hooks_1 = require("../../hooks");
const StyledNumber_1 = require("./StyledNumber");
const RangeSlider_1 = require("./RangeSlider");
const context_1 = require("../../context");
const utils_1 = require("../../utils");
const StyledInput_1 = require("../ValueInput/StyledInput");
const DraggableLabel = react_1.default.memo(({ label, onUpdate, step, innerLabelTrim }) => {
const [dragging, setDragging] = (0, react_1.useState)(false);
const bind = (0, hooks_1.useDrag)(({ active, delta: [dx], event, memo = 0 }) => {
setDragging(active);
memo += dx / 2;
if (Math.abs(memo) >= 1) {
onUpdate((v) => parseFloat(v) + Math.floor(memo) * step * (0, utils_1.multiplyStep)(event));
memo = 0;
}
return memo;
});
return (react_1.default.createElement(StyledInput_1.InnerNumberLabel, Object.assign({ dragging: dragging, title: label.length > 1 ? label : '' }, bind()), label.slice(0, innerLabelTrim)));
});
function Number({ label, id, displayValue, onUpdate, onChange, settings, innerLabelTrim = 1, }) {
const InnerLabel = innerLabelTrim > 0 && (react_1.default.createElement(DraggableLabel, { label: label, step: settings.step, onUpdate: onUpdate, innerLabelTrim: innerLabelTrim }));
return (react_1.default.createElement(ValueInput_1.NumberInput, { id: id, value: String(displayValue), onUpdate: onUpdate, onChange: onChange, innerLabel: InnerLabel }));
}
exports.Number = Number;
function NumberComponent() {
const props = (0, context_1.useInputContext)();
const { label, value, onUpdate, settings, id } = props;
const { min, max } = settings;
const hasRange = max !== Infinity && min !== -Infinity;
return (react_1.default.createElement(UI_1.Row, { input: true },
react_1.default.createElement(UI_1.Label, null, label),
react_1.default.createElement(StyledNumber_1.RangeGrid, { hasRange: hasRange },
hasRange && react_1.default.createElement(RangeSlider_1.RangeSlider, Object.assign({ value: parseFloat(value), onDrag: onUpdate }, settings)),
react_1.default.createElement(Number, Object.assign({}, props, { id: id, label: "value", innerLabelTrim: hasRange ? 0 : 1 })))));
}
exports.NumberComponent = NumberComponent;