tweak-tools
Version:
Tweak your React projects until awesomeness
84 lines (83 loc) • 5.31 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.Label = void 0;
const react_1 = __importStar(require("react"));
const RadixTooltip = __importStar(require("@radix-ui/react-tooltip"));
const StyledUI_1 = require("./StyledUI");
const context_1 = require("../../context");
const utils_1 = require("../../utils");
function OptionalToggle() {
const { id, disable, disabled } = (0, context_1.useInputContext)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(StyledUI_1.StyledOptionalToggle, { id: id + '__disable', type: "checkbox", checked: !disabled, onChange: () => disable(!disabled) }),
react_1.default.createElement("label", { htmlFor: id + '__disable' })));
}
function RawLabel(props) {
const { id, optional, hint } = (0, context_1.useInputContext)();
const htmlFor = props.htmlFor ? { htmlFor: props.htmlFor } : id ? { htmlFor: id } : {};
// If there's no tooltip, and if the label is of type string, then add a title.
const title = !hint && typeof props.children === 'string' ? { title: props.children } : null;
return (react_1.default.createElement(react_1.default.Fragment, null,
optional && react_1.default.createElement(OptionalToggle, null),
hint !== undefined ? (react_1.default.createElement(RadixTooltip.Root, null,
react_1.default.createElement(RadixTooltip.Trigger, { asChild: true },
react_1.default.createElement(StyledUI_1.StyledLabel, Object.assign({}, (htmlFor || {}), props))),
react_1.default.createElement(RadixTooltip.Content, { side: "top", sideOffset: 2 },
react_1.default.createElement(StyledUI_1.StyledToolTipContent, null,
hint,
react_1.default.createElement(StyledUI_1.ToolTipArrow, null))))) : (react_1.default.createElement(StyledUI_1.StyledLabel, Object.assign({}, htmlFor, title, props)))));
}
function Label(_a) {
var { align } = _a, props = __rest(_a, ["align"]);
const { value, label, key, disabled } = (0, context_1.useInputContext)();
const { hideCopyButton } = (0, context_1.usePanelSettingsContext)();
const copyEnabled = !hideCopyButton && key !== undefined;
const [copied, setCopied] = (0, react_1.useState)(false);
const handleClick = async () => {
try {
await navigator.clipboard.writeText(JSON.stringify({ [key]: value !== null && value !== void 0 ? value : '' }));
setCopied(true);
}
catch (_a) {
console.warn(utils_1.TweakErrors.CLIPBOARD_ERROR);
}
};
return (react_1.default.createElement(StyledUI_1.CopyLabelContainer, { align: align, onPointerLeave: () => setCopied(false) },
react_1.default.createElement(RawLabel, Object.assign({}, props)),
copyEnabled && !disabled && (react_1.default.createElement("div", { title: `Click to copy ${typeof label === 'string' ? label : key} value` }, !copied ? (react_1.default.createElement("svg", { onClick: handleClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" },
react_1.default.createElement("path", { d: "M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" }),
react_1.default.createElement("path", { d: "M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" }))) : (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" },
react_1.default.createElement("path", { d: "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" }),
react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" })))))));
}
exports.Label = Label;