discord-embed-visualizer
Version:
<div align="center">
848 lines (830 loc) • 53 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var debounce = require('debounce');
var muiColor = require('mui-color');
var PropTypes = require('prop-types');
var react = require('react');
var ReactMarkdown = require('react-markdown');
var reactSyntaxHighlighter = require('react-syntax-highlighter');
var gfm = require('remark-gfm');
var DeleteForeverIcon = require('@mui/icons-material/DeleteForever');
var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
var lab = require('@mui/lab');
var DateFnsUtils = require('@mui/lab/AdapterDateFns');
var LocalizationProvider = require('@mui/lab/LocalizationProvider');
var Button = require('@mui/material/Button/Button');
var green = require('@mui/material/colors/green');
var Dialog = require('@mui/material/Dialog/Dialog');
var DialogActions = require('@mui/material/DialogActions/DialogActions');
var DialogContent = require('@mui/material/DialogContent/DialogContent');
var DialogContentText = require('@mui/material/DialogContentText/DialogContentText');
var DialogTitle = require('@mui/material/DialogTitle/DialogTitle');
var FormControlLabel = require('@mui/material/FormControlLabel/FormControlLabel');
var Grid = require('@mui/material/Grid/Grid');
var IconButton = require('@mui/material/IconButton/IconButton');
var MenuItem = require('@mui/material/MenuItem/MenuItem');
var Select = require('@mui/material/Select/Select');
var styles$2 = require('@mui/material/styles');
var ThemeProvider = require('@mui/material/styles/ThemeProvider');
var Switch = require('@mui/material/Switch/Switch');
var TextField = require('@mui/material/TextField/TextField');
var Tooltip = require('@mui/material/Tooltip/Tooltip');
var Typography = require('@mui/material/Typography/Typography');
var styles$1 = require('@mui/styles');
var createTheme = require('@mui/material/styles/createTheme');
var material = require('@mui/material');
var dateFns = require('date-fns');
var Link = require('@mui/material/Link/Link');
var Paper = require('@mui/material/Paper/Paper');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
var gfm__default = /*#__PURE__*/_interopDefaultLegacy(gfm);
var DeleteForeverIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteForeverIcon);
var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
var DateFnsUtils__default = /*#__PURE__*/_interopDefaultLegacy(DateFnsUtils);
var LocalizationProvider__default = /*#__PURE__*/_interopDefaultLegacy(LocalizationProvider);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var green__default = /*#__PURE__*/_interopDefaultLegacy(green);
var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
var DialogContentText__default = /*#__PURE__*/_interopDefaultLegacy(DialogContentText);
var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
var ThemeProvider__default = /*#__PURE__*/_interopDefaultLegacy(ThemeProvider);
var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var createTheme__default = /*#__PURE__*/_interopDefaultLegacy(createTheme);
var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(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;
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
var materialDark = {
"code[class*=\"language-\"]": {
"textAlign": "left",
"whiteSpace": "pre",
"wordSpacing": "normal",
"wordBreak": "normal",
"wordWrap": "normal",
"color": "#eee",
"background": "#2f2f2f",
"fontFamily": "Roboto Mono, monospace",
"fontSize": "1em",
"lineHeight": "1.5em",
"MozTabSize": "4",
"OTabSize": "4",
"tabSize": "4",
"WebkitHyphens": "none",
"MozHyphens": "none",
"msHyphens": "none",
"hyphens": "none"
},
"pre[class*=\"language-\"]": {
"textAlign": "left",
"whiteSpace": "pre",
"wordSpacing": "normal",
"wordBreak": "normal",
"wordWrap": "normal",
"color": "#eee",
"background": "#2f2f2f",
"fontFamily": "Roboto Mono, monospace",
"fontSize": "1em",
"lineHeight": "1.5em",
"MozTabSize": "4",
"OTabSize": "4",
"tabSize": "4",
"WebkitHyphens": "none",
"MozHyphens": "none",
"msHyphens": "none",
"hyphens": "none",
"overflow": "auto",
"position": "relative",
"margin": "0.5em 0",
"padding": "1.25em 1em"
},
"code[class*=\"language-\"]::-moz-selection": {
"background": "#363636"
},
"pre[class*=\"language-\"]::-moz-selection": {
"background": "#363636"
},
"code[class*=\"language-\"] ::-moz-selection": {
"background": "#363636"
},
"pre[class*=\"language-\"] ::-moz-selection": {
"background": "#363636"
},
"code[class*=\"language-\"]::selection": {
"background": "#363636"
},
"pre[class*=\"language-\"]::selection": {
"background": "#363636"
},
"code[class*=\"language-\"] ::selection": {
"background": "#363636"
},
"pre[class*=\"language-\"] ::selection": {
"background": "#363636"
},
":not(pre) > code[class*=\"language-\"]": {
"whiteSpace": "normal",
"borderRadius": "0.2em",
"padding": "0.1em"
},
".language-css > code": {
"color": "#fd9170"
},
".language-sass > code": {
"color": "#fd9170"
},
".language-scss > code": {
"color": "#fd9170"
},
"[class*=\"language-\"] .namespace": {
"Opacity": "0.7"
},
"atrule": {
"color": "#c792ea"
},
"attr-name": {
"color": "#ffcb6b"
},
"attr-value": {
"color": "#a5e844"
},
"attribute": {
"color": "#a5e844"
},
"boolean": {
"color": "#c792ea"
},
"builtin": {
"color": "#ffcb6b"
},
"cdata": {
"color": "#80cbc4"
},
"char": {
"color": "#80cbc4"
},
"class": {
"color": "#ffcb6b"
},
"class-name": {
"color": "#f2ff00"
},
"comment": {
"color": "#616161"
},
"constant": {
"color": "#c792ea"
},
"deleted": {
"color": "#ff6666"
},
"doctype": {
"color": "#616161"
},
"entity": {
"color": "#ff6666"
},
"function": {
"color": "#c792ea"
},
"hexcode": {
"color": "#f2ff00"
},
"id": {
"color": "#c792ea",
"fontWeight": "bold"
},
"important": {
"color": "#c792ea",
"fontWeight": "bold"
},
"inserted": {
"color": "#80cbc4"
},
"keyword": {
"color": "#c792ea"
},
"number": {
"color": "#fd9170"
},
"operator": {
"color": "#89ddff"
},
"prolog": {
"color": "#616161"
},
"property": {
"color": "#80cbc4"
},
"pseudo-class": {
"color": "#a5e844"
},
"pseudo-element": {
"color": "#a5e844"
},
"punctuation": {
"color": "#89ddff"
},
"regex": {
"color": "#f2ff00"
},
"selector": {
"color": "#ff6666"
},
"string": {
"color": "#a5e844"
},
"symbol": {
"color": "#c792ea"
},
"tag": {
"color": "#ff6666"
},
"unit": {
"color": "#fd9170"
},
"url": {
"color": "#ff6666"
},
"variable": {
"color": "#ff6666"
}
};
const theme = createTheme__default["default"]({
palette: {
mode: 'dark',
},
typography: {
fontFamily: [
'"Helvetica Neue"',
'Helvetica',
'Arial',
'sans-serif',
].join(','),
},
components: {
MuiTextField: {
defaultProps: {
variant: 'standard',
},
},
MuiButton: {
styleOverrides: {
containedPrimary: {
backgroundColor: 'rgb(114, 137, 218)',
borderColor: 'rgb(114, 137, 218)',
color: 'rgb(255, 255, 255)',
'&:hover': {
backgroundColor: 'rgb(142, 160, 225)',
borderColor: 'rgb(142, 160, 225)',
},
},
},
},
},
});
const Accordion = styles$1.withStyles({
root: {
border: '1px solid rgba(0, 0, 0, .125)',
boxShadow: 'none',
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
margin: 'auto',
},
background: '#2f3136',
},
expanded: {},
})(material.Accordion);
const AccordionSummary = styles$1.withStyles({
root: {
backgroundColor: 'rgba(0, 0, 0, .15)',
borderBottom: '1px solid rgba(0, 0, 0, .125)',
marginBottom: -1,
minHeight: 56,
'&$expanded': {
minHeight: 56,
},
},
content: {
'&$expanded': {
margin: '12px 0',
},
},
expanded: {},
})(material.AccordionSummary);
const AccordionDetails = styles$1.withStyles(theme => ({
root: {
padding: theme.spacing(2),
},
}))(material.AccordionDetails);
const generateExport = (exporter, data) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
switch (exporter) {
case 'discordjs':
default:
return {
title: (_a = data.body) === null || _a === void 0 ? void 0 : _a.title,
type: 'rich',
description: (_b = data.body) === null || _b === void 0 ? void 0 : _b.description,
url: (_c = data.body) === null || _c === void 0 ? void 0 : _c.url,
timestamp: new Date(((_d = data.footer) === null || _d === void 0 ? void 0 : _d.timestamp) || new Date()).toISOString(),
color: data.color != null ? Number(`0x${data.color.charAt(0) === '#' ? data.color.slice(1) : data.color}`) : Number('0xfff'),
footer: {
text: (_e = data.footer) === null || _e === void 0 ? void 0 : _e.text,
icon_url: (_f = data.footer) === null || _f === void 0 ? void 0 : _f.iconUrl,
},
image: {
url: (_g = data.image) === null || _g === void 0 ? void 0 : _g.url,
height: ((_h = data.image) === null || _h === void 0 ? void 0 : _h.height) > 0 ? (_j = data.image) === null || _j === void 0 ? void 0 : _j.height : undefined,
width: ((_k = data.image) === null || _k === void 0 ? void 0 : _k.height) > 0 ? (_l = data.image) === null || _l === void 0 ? void 0 : _l.width : undefined,
},
thumbnail: {
url: (_m = data.image) === null || _m === void 0 ? void 0 : _m.url,
height: ((_o = data.image) === null || _o === void 0 ? void 0 : _o.height) > 0 ? (_p = data.image) === null || _p === void 0 ? void 0 : _p.height : undefined,
width: ((_q = data.image) === null || _q === void 0 ? void 0 : _q.height) > 0 ? (_r = data.image) === null || _r === void 0 ? void 0 : _r.width : undefined,
},
author: {
name: (_s = data.author) === null || _s === void 0 ? void 0 : _s.name,
url: (_t = data.author) === null || _t === void 0 ? void 0 : _t.url,
icon_url: (_u = data.author) === null || _u === void 0 ? void 0 : _u.iconUrl,
},
fields: data.fields,
};
}
};
const copyToClipBoard = function (str, callback) {
return __awaiter(this, void 0, void 0, function* () {
return navigator.permissions.query({ name: 'clipboard-write' })
.then((res) => __awaiter(this, void 0, void 0, function* () {
if (res.state === 'granted' || res.state === 'prompt') {
return navigator.clipboard.writeText(str)
.then(() => callback())
.catch(err => console.error('Failed to write to clipboard', err));
}
}));
});
};
const styles = styles$1.makeStyles((theme) => ({
buttonGroup: {
position: 'absolute',
right: 60,
paddingRight: 8,
top: 4,
},
controlPadding: {
paddingTop: `${theme.spacing(2)} !important`,
},
fieldRoot: {
paddingBottom: theme.spacing(2),
},
exportField: {
userSelect: 'none',
margin: '-8px 0 -12px 0',
'& > div::before': {
display: 'none',
},
'& > pre': {
overflow: 'hidden !important',
},
},
}));
const matDark = materialDark;
const renderers = {
code: (_a) => {
var { node, inline, className, children } = _a, props = __rest(_a, ["node", "inline", "className", "children"]);
return jsxRuntime.jsx(reactSyntaxHighlighter.Prism, Object.assign({ children: String(children).replace(/\n$/, ''), language: "json", PreTag: "div", style: matDark }, props));
},
};
function setEmbedDefaults(incoming) {
return {
author: {
name: incoming.author != null && incoming.author.name != null ? incoming.author.name : '',
iconUrl: incoming.author != null && incoming.author.iconUrl != null ? incoming.author.iconUrl : '',
url: incoming.author != null && incoming.author.url != null ? incoming.author.url : '',
},
color: incoming.color != null && incoming.color != null ? incoming.color : '#fff',
description: incoming.description != null ? incoming.description : '',
fields: incoming.fields != null ? incoming.fields : [],
footer: {
iconUrl: incoming.footer != null && incoming.footer.iconUrl != null ? incoming.footer.iconUrl : '',
text: incoming.footer != null && incoming.footer.text != null ? incoming.footer.text : '',
},
image: {
url: incoming.image != null && incoming.image.url != null ? incoming.image.url : '',
width: incoming.image != null && incoming.image.url != null ? incoming.image.width : 0,
height: incoming.image != null && incoming.image.url != null ? incoming.image.height : 0,
},
thumbnail: {
url: incoming.thumbnail != null && incoming.thumbnail.url != null ? incoming.thumbnail.url : '',
width: incoming.thumbnail != null && incoming.thumbnail.url != null ? incoming.thumbnail.width : 0,
height: incoming.thumbnail != null && incoming.thumbnail.url != null ? incoming.thumbnail.height : 0,
},
timestamp: incoming.timestamp != null ? incoming.timestamp : undefined,
title: incoming.title != null ? incoming.title : '',
url: incoming.url != null ? incoming.url : '',
};
}
function setFieldDefaults(incoming) {
var _a, _b, _c, _d, _e;
return {
author: (_a = incoming === null || incoming === void 0 ? void 0 : incoming.author) !== null && _a !== void 0 ? _a : false,
body: (_b = incoming === null || incoming === void 0 ? void 0 : incoming.body) !== null && _b !== void 0 ? _b : false,
fields: (_c = incoming === null || incoming === void 0 ? void 0 : incoming.fields) !== null && _c !== void 0 ? _c : false,
images: (_d = incoming === null || incoming === void 0 ? void 0 : incoming.images) !== null && _d !== void 0 ? _d : false,
footer: (_e = incoming === null || incoming === void 0 ? void 0 : incoming.footer) !== null && _e !== void 0 ? _e : false,
};
}
function Generator(props) {
var _a, _b, _c, _d;
const { defaultValue, hideFields, showExportSection, onChange } = props;
const defaultWithSet = setEmbedDefaults(defaultValue);
const shouldHideFields = setFieldDefaults(hideFields);
const [expanded, setExpanded] = react.useState(false);
const [fieldExpanded, setFieldExpanded] = react.useState(false);
const [author, setAuthor] = react.useState(Object.assign({}, defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.author));
const [color, setColor] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.color);
const [description, setDescription] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.description);
const [fields, setFields] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.fields);
const [footer, setFooter] = react.useState(Object.assign({}, defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.footer));
const [image, setImage] = react.useState(Object.assign({}, defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.image));
const [thumbnail, setThumbnail] = react.useState(Object.assign({}, defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.thumbnail));
const [timestamp, setTimestamp] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.timestamp);
const [title, setTitle] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.title);
const [url, setUrl] = react.useState(defaultWithSet === null || defaultWithSet === void 0 ? void 0 : defaultWithSet.url);
const [copied, setCopied] = react.useState(false);
const [showExport, setShowExport] = react.useState(false);
const [exporter, setExporter] = react.useState('discordjs');
const classes = styles();
const handleAccordian = (panel) => (_evnt, isExpanded) => setExpanded(isExpanded ? panel : false);
const handleFieldAccordian = (panel) => (_evnt, isExpanded) => setFieldExpanded(isExpanded ? panel : false);
const handleFieldAdd = () => {
if (fields.length > 24) {
return;
}
setFields(preValues => [...preValues, { name: '', value: '', inline: false }]);
};
const handleFieldDelete = (index) => {
const fieldsClone = [...fields];
fieldsClone.splice(index, 1);
setFields(fieldsClone);
};
const handleFieldMove = (index, direction) => {
const fieldsClone = [...fields];
const toMove = Object.assign({}, fieldsClone[index]);
const toReplace = Object.assign({}, fieldsClone[direction === 'up' ? index - 1 : index + 1]);
fieldsClone[index] = toReplace;
fieldsClone[direction === 'up' ? index - 1 : index + 1] = toMove;
setFields(fieldsClone);
};
const exportedData = generateExport(exporter, { author, color, description, fields, footer, image, thumbnail, timestamp, title, url });
const handleExport = () => setShowExport(true);
const sendChanges = debounce__default["default"](onChange, 300);
react.useEffect(() => {
let isLoaded = true;
if (isLoaded && onChange != null) {
sendChanges({ author, color, description, fields, footer, image, thumbnail, timestamp, title, url });
}
return () => {
isLoaded = false;
};
}, [author, color, description, fields, footer, image, thumbnail, timestamp, title, url]);
react.useEffect(() => {
const timer = setTimeout(() => {
setCopied(false);
}, 3000);
return () => clearTimeout(timer);
}, [copied]);
return (jsxRuntime.jsx(ThemeProvider__default["default"], Object.assign({ theme: theme }, { children: jsxRuntime.jsx(styles$2.StyledEngineProvider, Object.assign({ injectFirst: true }, { children: jsxRuntime.jsx(LocalizationProvider__default["default"], Object.assign({ dateAdapter: DateFnsUtils__default["default"] }, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Dialog__default["default"], Object.assign({ open: showExport, onClose: (_, reason) => reason !== 'backdropClick' ? setShowExport(false) : undefined, disableEscapeKeyDown: true, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogTitle__default["default"], { children: [exporter, " Embed Data"] }), jsxRuntime.jsx(DialogContent__default["default"], Object.assign({ dividers: true, style: { padding: 'unset' } }, { children: jsxRuntime.jsx(DialogContentText__default["default"], Object.assign({ component: "div" }, { children: jsxRuntime.jsx(ReactMarkdown__default["default"], Object.assign({ components: renderers, remarkPlugins: [gfm__default["default"]], className: classes.exportField }, { children: '```json\n' +
JSON.stringify(exportedData, null, 2)
+ '\n```' })) })) })), jsxRuntime.jsxs(DialogActions__default["default"], { children: [jsxRuntime.jsx(Button__default["default"], Object.assign({ autoFocus: true, variant: "contained", onClick: () => setShowExport(false) }, { children: "Close" })), jsxRuntime.jsx(Button__default["default"], Object.assign({ color: "primary", style: { backgroundColor: copied && green__default["default"][500] }, variant: "contained", onClick: () => copyToClipBoard(JSON.stringify(exportedData), () => setCopied(true)) }, { children: !copied ? 'Copy To Clipboard' : 'Copied!' }))] })] })), shouldHideFields['author'] === false && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'author', onChange: handleAccordian('author') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Author" })) })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: author.name, onChange: evnt => setAuthor(preValues => { return Object.assign(Object.assign({}, preValues), { name: String(evnt.target.value) }); }), label: `Author ${((_a = author.name) === null || _a === void 0 ? void 0 : _a.length) || 0}/256`, fullWidth: true, error: (((_b = author.name) === null || _b === void 0 ? void 0 : _b.length) || 0) >= 256 }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: author.url, onChange: evnt => setAuthor(preValues => { return Object.assign(Object.assign({}, preValues), { url: String(evnt.target.value) }); }), label: "Author URL", helperText: "Can be a link to your social media or personal website.", fullWidth: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: author.iconUrl, onChange: evnt => setAuthor(preValues => { return Object.assign(Object.assign({}, preValues), { iconUrl: String(evnt.target.value) }); }), label: "Author Icon URL", helperText: "Full path to an image hosted online.", fullWidth: true }) }))] })) })] }))), shouldHideFields['body'] === false && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'body', onChange: handleAccordian('body') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Body" })) })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: title, onChange: evnt => setTitle(String(evnt.target.value)), label: `Title ${(title === null || title === void 0 ? void 0 : title.length) || 0}/256`, fullWidth: true, error: ((title === null || title === void 0 ? void 0 : title.length) || 0) >= 256 }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: description, onChange: evnt => setDescription(String(evnt.target.value)), label: `Description ${(description === null || description === void 0 ? void 0 : description.length) || 0}/2048`, helperText: "Supports Discord Markdown Formatting", fullWidth: true, error: ((description === null || description === void 0 ? void 0 : description.length) || 0) >= 2048, multiline: true, rows: 6 }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: url, onChange: evnt => setUrl(String(evnt.target.value)), label: "URL", helperText: "This will make the title clickable.", fullWidth: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(muiColor.ColorPicker, { value: color, onChange: (newColor) => setColor(String(newColor.hex)), deferred: true }), label: "Colour:", labelPlacement: "start", className: classes.controlPadding }) }))] })) })] }))), shouldHideFields['fields'] === false && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'fields', onChange: handleAccordian('fields') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Fields" })) })), jsxRuntime.jsxs(AccordionDetails, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ container: true, className: classes.fieldRoot }, { children: jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: fields != null && fields.map((field, index) => (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: fieldExpanded === `field-${index}`, onChange: handleFieldAccordian(`field-${index}`) }, { children: [jsxRuntime.jsxs(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: [jsxRuntime.jsxs(Typography__default["default"], Object.assign({ variant: "body1" }, { children: ["Field ", index + 1, " -- ", field.name] })), jsxRuntime.jsxs("div", Object.assign({ className: classes.buttonGroup }, { children: [index !== 0 && (jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: evnt => {
evnt.stopPropagation();
handleFieldMove(index, 'up');
}, onFocus: evnt => evnt.stopPropagation() }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ title: "Move Up" }, { children: jsxRuntime.jsx(ExpandLessIcon__default["default"], {}) })) }))), index !== fields.length - 1 && (jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: evnt => {
evnt.stopPropagation();
handleFieldMove(index, 'down');
}, onFocus: evnt => evnt.stopPropagation() }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ title: "Move Down" }, { children: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) })) }))), jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: evnt => {
evnt.stopPropagation();
handleFieldDelete(index);
}, onFocus: evnt => evnt.stopPropagation() }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ title: "Delete Field" }, { children: jsxRuntime.jsx(DeleteForeverIcon__default["default"], {}) })) }))] }))] })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 10 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: fields[index].name, onChange: evnt => {
setFields(preValues => {
const cloneData = [...preValues];
cloneData[index].name = String(evnt.target.value);
return cloneData;
});
}, label: `Field Name ${fields[index].name.length}/256`, fullWidth: true, error: fields[index].name.length < 1 || fields[index].name.length >= 256, required: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 2, className: classes.controlPadding }, { children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Switch__default["default"], { checked: field.inline, onChange: evnt => {
setFields(preValues => {
const cloneData = [...preValues];
cloneData[index].inline = evnt.target.checked;
return cloneData;
});
} }), label: "Inline" }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: fields[index].value, onChange: evnt => {
setFields(preValues => {
const cloneData = [...preValues];
cloneData[index].value = String(evnt.target.value);
return cloneData;
});
}, label: `Field Value ${fields[index].value.length}/1024`, fullWidth: true, error: fields[index].value.length >= 1024, required: true, multiline: true, rows: 6 }) }))] })) })] }), `field-${index}`))) })) })), jsxRuntime.jsx(Button__default["default"], Object.assign({ variant: "contained", onClick: handleFieldAdd, disabled: fields != null ? fields.length === 25 : false }, { children: "Add Field" }))] })] }))), shouldHideFields['images'] === false && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'image', onChange: handleAccordian('image') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Images" })) })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 8 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: image.url, onChange: evnt => setImage(preValues => { return Object.assign(Object.assign({}, preValues), { url: String(evnt.target.value) }); }), label: "Image URL", fullWidth: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 2 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: image.height, onChange: evnt => setImage(preValues => { return Object.assign(Object.assign({}, preValues), { height: Number(evnt.target.value) }); }), label: "Image Height", fullWidth: true, type: "number", inputProps: {
step: 1,
min: 0
} }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 2 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: image.width, onChange: evnt => setImage(preValues => { return Object.assign(Object.assign({}, preValues), { width: Number(evnt.target.value) }); }), label: "Image Width", fullWidth: true, type: "number", inputProps: {
step: 1,
min: 0
} }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 8 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: thumbnail.url, onChange: evnt => setThumbnail(preValues => { return Object.assign(Object.assign({}, preValues), { url: String(evnt.target.value) }); }), label: "Thumbnail URL", fullWidth: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 2 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: thumbnail.height, onChange: evnt => setThumbnail(preValues => { return Object.assign(Object.assign({}, preValues), { height: Number(evnt.target.value) }); }), label: "Thumbnail Height", fullWidth: true, type: "number", inputProps: {
step: 1,
min: 0
} }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 2 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: thumbnail.width, onChange: evnt => setThumbnail(preValues => { return Object.assign(Object.assign({}, preValues), { width: Number(evnt.target.value) }); }), label: "Thumbnail Width", fullWidth: true, type: "number", inputProps: {
step: 1,
min: 0
} }) }))] })) })] }))), shouldHideFields['footer'] === false && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'footer', onChange: handleAccordian('footer') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Footer" })) })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 12 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: footer.text, onChange: evnt => setFooter(preValues => { return Object.assign(Object.assign({}, preValues), { text: String(evnt.target.value) }); }), label: `Footer ${((_c = footer.text) === null || _c === void 0 ? void 0 : _c.length) || 0}/256`, fullWidth: true, error: (((_d = footer.text) === null || _d === void 0 ? void 0 : _d.length) || 0) >= 256 }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(TextField__default["default"], { value: footer.iconUrl, onChange: evnt => setFooter(preValues => { return Object.assign(Object.assign({}, preValues), { iconUrl: String(evnt.target.value) }); }), label: "Footer Icon URL", helperText: "Full path to an icon to use on the footer.", fullWidth: true }) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(lab.DateTimePicker, { renderInput: props => jsxRuntime.jsx(TextField__default["default"], Object.assign({ fullWidth: true }, props)), value: timestamp, onChange: date => {
if (date != null) {
setTimestamp(new Date(date).toString());
}
}, label: "Timestamp" }) }))] })) })] }))), showExportSection && (jsxRuntime.jsxs(Accordion, Object.assign({ expanded: expanded === 'export', onChange: handleAccordian('export') }, { children: [jsxRuntime.jsx(AccordionSummary, Object.assign({ expandIcon: jsxRuntime.jsx(ExpandMoreIcon__default["default"], {}) }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ variant: "h5" }, { children: "Export" })) })), jsxRuntime.jsx(AccordionDetails, { children: jsxRuntime.jsxs(Grid__default["default"], Object.assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(Select__default["default"], Object.assign({ fullWidth: true, value: exporter, onChange: evnt => setExporter(evnt.target.value) }, { children: jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ value: "discordjs" }, { children: "Discord.js" })) })) })), jsxRuntime.jsx(Grid__default["default"], Object.assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(Button__default["default"], Object.assign({ variant: "contained", onClick: handleExport }, { children: "Export" })) }))] })) })] })))] }) })) })) })));
}
Generator.propTypes = {
defaultValue: PropTypes__default["default"].object.isRequired,
export: PropTypes__default["default"].bool,
onChange: PropTypes__default["default"].func.isRequired,
};
Generator.defaultProps = {
defaultValue: {},
showExportSection: true,
onChange: null,
};
const MAX_FIELDS_PER_ROW = 3;
const FIELD_GRID_SIZE = 12;
const getFieldGridColumn = (fields, fieldIndex) => {
const field = fields[fieldIndex];
if (!field.inline) {
return `1 / ${FIELD_GRID_SIZE + 1}`;
}
let startingField = fieldIndex;
while (startingField > 0 && fields[startingField - 1].inline) {
startingField -= 1;
}
let totalInlineFields = 0;
while (fields.length > startingField + totalInlineFields && fields[startingField + totalInlineFields].inline) {
totalInlineFields += 1;
}
const indexInSequence = fieldIndex - startingField;
const currentRow = indexInSequence / MAX_FIELDS_PER_ROW;
const indexOnRow = indexInSequence % MAX_FIELDS_PER_ROW;
const totalOnLastRow = totalInlineFields % MAX_FIELDS_PER_ROW || MAX_FIELDS_PER_ROW;
const fullRows = (totalInlineFields - totalOnLastRow) / MAX_FIELDS_PER_ROW;
const totalOnRow = currentRow >= fullRows ? totalOnLastRow : MAX_FIELDS_PER_ROW;
const columnSpan = FIELD_GRID_SIZE / totalOnRow;
const start = indexOnRow * columnSpan + 1;
const end = start + columnSpan;
return `${start} / ${end}`;
};
const visualizerStyles = styles$1.makeStyles({
root: {
fontFamily: 'Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif',
},
message: {
padding: '.5rem 1rem .5rem 4.5rem',
},
title: {
display: 'inline-block',
lineHeight: '1.375rem',
minHeight: '1.375rem',
whiteSpace: 'break-spaces',
position: 'relative',
marginLeft: '-4.5rem',
marginBottom: '.3rem',
paddingLeft: '4.5rem',
},
username: {
display: 'inline',
verticalAlign: 'baseline',
margin: '0px .25rem 0px 0px',
color: 'rgb(255, 255, 255)',
fontSize: '1rem',
fontWeight: 500,
lineHeight: '1.375rem',
overflowWrap: 'break-word',
cursor: 'pointer',
},
botBadge: {
position: 'relative',
top: '-0.1rem',
minHeight: '1.275em',
maxHeight: '1.275em',
margin: '.075em .25rem 0px 0px',
padding: '.071875rem .275rem',
borderRadius: '3px',
background: 'rgb(114, 137, 218)',
color: 'rgb(255, 255, 255)',
fontSize: '0.625em',
fontWeight: 500,
lineHeight: 1.3,
verticalAlign: 'baseline',
},
avatar: {
height: '2.5rem',
width: '2.5rem',
position: 'absolute',
left: 0,
top: '0.125rem',
margin: '0 1rem',
borderRadius: '50%',
objectFit: 'cover',
},
});
const embedStyles = styles$1.makeStyles({
root: {
maxWidth: '520px',
borderLeftWidth: '4px',
borderLeftStyle: 'solid',
backgroundColor: '#2F3136',
color: '#FFF',
},
grid: {
padding: '.5rem 1rem 1rem .75rem',
display: 'inline-grid',
gridTemplateColumns: 'auto',
gridTemplateRows: 'row',
},
wrapper: {
minWidth: '0px',
display: 'inline-block',
margin: '8px 0px 0px',
gridColumn: '1 / 2',
},
body: {},
title: {
fontSize: '1rem',
fontWeight: 600,
margin: '8px 0px 0px',
color: 'rgb(255, 255, 255)',
},
url: {
color: '#00b0f4',
},
description: {
minWidth: '0px',
margin: '8px 0px 0px',
gridColumn: '1 / 2',
},
});
const authorAndFooterStyles = styles$1.makeStyles({
root: {
fontSize: '0.875rem',
fontWeight: 500,
minWidth: '0px',
display: 'flex',
boxAlign: 'center',
alignItems: 'center',
gridColumn: '1 / 2',
margin: '8px 0px 0px',
},
icon: {
height: '24px',
width: '24px',
margin: '0px 8px 0px 0px',
objectFit: 'contain',
borderRadius: '50%',
},
url: {
color: 'rgb(255, 255, 255)',
whiteSpace: 'pre-wrap',
display: 'inline-block',
},
});
const fieldStyles = styles$1.makeStyles((theme) => ({
root: {
// minWidth: '0px',
// margin: '8px 0px 0px',
minWidth: 0,
margin: '8px 0px, 0px',
display: 'grid',
gridColumn: 1 / 2,
gridGap: 8,
},
chunk: {
display: 'grid',
},
field: {
minWidth: '0px',
fontSize: '0.875rem',
lineHeight: '1.125rem',
},
name: {
minWidth: '0px',
margin: '0px 0px 1px',
fontSize: '0.875rem',
fontWeight: 600,
color: 'rgb(255, 255, 255)',
whiteSpace: 'pre-wrap',
overflowWrap: 'break-word',
},
value: {
fontSize: '.875rem',
lineHeight: '1.125rem',
color: 'rgb(220, 221, 222)',
whiteSpace: 'pre-line',
'& code': {
backgroundColor: '#202225',
borderRadius: 2,
padding: theme.spacing(.2),
},
'& a': {
color: '#00b0f4',
textDecoration: 'none',
},
},
}));
const imageStyles = styles$1.makeStyles({
root: {
gridColumn: '1 / 2',
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: '1fr 1fr',
gap: '4px',
height: '300px',
marginTop: '16px',
borderRadius: '4px',
overflow: 'hidden',
},
image: {
borderRadius: '4px',
maxWidth: '100%',
userSelect: 'none',
userDrag: 'none',
},
thumbnail: {
maxWidth: 80,
maxHeight: 80,
borderRadius: 4,
margin: '8px 0px 0px 16px',
justifySelf: 'end',
cursor: 'pointer',
gridArea: '1 / 2 / 8 / 3',
userSelect: 'none',
userDrag: 'none',
}
});
function Visualizer(props) {
var _a, _b;
const { bot, embed } = props;
const authorAndFooterClasses = authorAndFooterStyles();
const embedClasses = embedStyles();
const fieldClasses = fieldStyles();
const imageClasses = imageStyles();
const visualizerClasses = visualizerStyles();
return (jsxRuntime.jsx(ThemeProvider__default["default"], Object.assign({ theme: theme }, { children: jsxRuntime.jsx(styles$2.StyledEngineProvider, Object.assign({ injectFirst: true }, { children: jsxRuntime.jsx("div", Object.assign({ className: visualizerClasses.root }, { children: jsxRuntime.jsxs(Paper__default["default"], Object.assign({ className: visualizerClasses.message }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: visualizerClasses.title }, { children: [jsxRuntime.jsx("img", { className: visualizerClasses.avatar, src: bot.iconUrl }), jsxRuntime.jsx("h1", Object.assign({ className: visualizerClasses.username }, { children: bot.name })), jsxRuntime.jsx("span", Object.assign({ className: visualizerClasses.botBadge }, { children: "BOT" }))] })), jsxRuntime.jsx(Paper__default["default"], Object.assign({ elevation: 0, className: embedClasses.root, style: {
borderLeftColor: `#${embed === null || embed === void 0 ? void 0 : embed.color}` || green__default["default"][500],
display: 'grid',
} }, { children: jsxRuntime.jsxs("div", Object.assign({ className: embedClasses.grid }, { children: [embed.author != null && (jsxRuntime.jsxs("div", Object.assign({ className: authorAndFooterClasses.root }, { children: [embed.author.iconUrl && jsxRuntime.jsx("img", { className: authorAndFooterClasses.icon, src: embed.author.iconUrl }), embed.author.url
? jsxRuntime.jsx(Link__default["default"], Object.assign({ className: authorAndFooterClasses.url, href: embed.author.url }, { children: embed.author.name }))
: embed.author.name] }))), jsxRuntime.jsx("span", Object.assign({ className: embedClasses.body }, { children: jsxRuntime.jsx("div", Object.assign({ className: embedClasses.title }, { children: embed.url