@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
71 lines • 4.64 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (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());
});
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, Switch, tokens } from '@fluentui/react-components';
import { ImageSparkleRegular } from '@fluentui/react-icons';
import { DiagramOptions, stockUrl } from '@kwiz/common';
import React from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { useStateEX } from '../helpers';
import { ButtonEXPrimarySubtle } from './button';
import { Horizontal } from './horizontal';
import { Section } from './section';
const useStyles = makeStyles({
dialog: {
maxWidth: '70vw',
width: '70vw',
},
dialogBody: {
maxHeight: '60vh',
},
diagramWrapper: {
justifyContent: "center",
alignContent: "center"
},
diagram: {
border: `1px solid ${tokens.colorNeutralStroke1}`,
padding: tokens.spacingHorizontalS,
"&:hover": Object.assign({}, shorthands.borderColor(tokens.colorBrandBackground)),
"&>img": {
width: "180px"
},
},
});
export const DiagramPicker = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
const classes = useStyles();
const [isOpen, setIsOpen] = useStateEX(false);
const [hiRes, setHiRes] = useStateEX(props.hiRes);
let options = (hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
if (props.onlyTransparent)
options = options.filter(o => o.name.endsWith(', transparent'));
return (_jsxs(Dialog, { open: isOpen, onOpenChange: (e, data) => {
setIsOpen(data.open);
}, children: [_jsx(DialogTrigger, { disableButtonEnhancement: true, children: props.trigger || _jsx(ButtonEXPrimarySubtle, { icon: _jsx(ImageSparkleRegular, {}), title: 'Open gallery', showTitleWithIcon: true, dontCenterText: true }) }), _jsx(DialogSurface, { mountNode: ctx.mountNode, className: classes.dialog, children: _jsxs(DialogBody, { className: classes.dialogBody, children: [_jsx(DialogTitle, { children: "Choose a diagram" }), _jsxs(DialogContent, { children: [_jsx(Switch, { checked: hiRes === true, onChange: (e, data) => {
setHiRes(data.checked === true);
}, label: "High resolution diagrams" }), _jsx(Horizontal, { main: true, wrap: true, css: [classes.diagramWrapper], children: options
.map(diagram => _jsx(Section, { css: [classes.diagram], title: diagram.name, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
var _a;
const fullUrl = `${stockUrl}/${diagram.url}`;
(_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, { name: diagram.name, url: fullUrl });
if (props.onSelectBase64) {
const result = yield fetch(fullUrl);
const blob = yield result.blob();
const reader = new FileReader();
reader.onload = function () {
var _a;
(_a = props.onSelectBase64) === null || _a === void 0 ? void 0 : _a.call(props, reader.result);
};
reader.readAsDataURL(blob);
}
setIsOpen(false);
}), children: _jsx("img", { src: `${stockUrl}/${diagram.url}` }) }, diagram.name)) })] })] }) })] }));
});
//# sourceMappingURL=diagram-picker.js.map