@kwiz/fluentui 1.0.44 → 1.0.45
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/diagram-picker.d.ts +15 -0
- package/dist/controls/diagram-picker.js +68 -0
- package/dist/controls/diagram-picker.js.map +1 -0
- package/dist/controls/file-upload.d.ts +2 -2
- package/dist/controls/file-upload.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/controls/diagram-picker.tsx +90 -0
- package/src/controls/file-upload.tsx +3 -3
- package/src/index.ts +1 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface iProps {
|
|
3
|
+
onSelect?: (diagram: {
|
|
4
|
+
url: string;
|
|
5
|
+
name: string;
|
|
6
|
+
}) => void;
|
|
7
|
+
onSelectBase64?: (diagram: string) => void;
|
|
8
|
+
trigger?: JSX.Element;
|
|
9
|
+
hiRes?: boolean;
|
|
10
|
+
onlyTransparent?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const DiagramPicker: React.ForwardRefExoticComponent<iProps & {
|
|
13
|
+
children?: React.ReactNode | undefined;
|
|
14
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, tokens } from '@fluentui/react-components';
|
|
12
|
+
import { ImageSparkleRegular } from '@fluentui/react-icons';
|
|
13
|
+
import { DiagramOptions, stockUrl } from '@kwiz/common';
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import { useKWIZFluentContext } from '../helpers/context';
|
|
16
|
+
import { useStateEX } from '../helpers/hooks';
|
|
17
|
+
import { ButtonEXPrimarySubtle } from './button';
|
|
18
|
+
import { Horizontal } from './horizontal';
|
|
19
|
+
import { Section } from './section';
|
|
20
|
+
const useStyles = makeStyles({
|
|
21
|
+
dialog: {
|
|
22
|
+
maxWidth: '70vw',
|
|
23
|
+
width: '70vw',
|
|
24
|
+
},
|
|
25
|
+
dialogBody: {
|
|
26
|
+
maxHeight: '60vh',
|
|
27
|
+
},
|
|
28
|
+
diagramWrapper: {
|
|
29
|
+
justifyContent: "center",
|
|
30
|
+
alignContent: "center"
|
|
31
|
+
},
|
|
32
|
+
diagram: {
|
|
33
|
+
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
|
34
|
+
padding: tokens.spacingHorizontalS,
|
|
35
|
+
"&:hover": Object.assign({}, shorthands.borderColor(tokens.colorBrandBackground)),
|
|
36
|
+
"&>img": {
|
|
37
|
+
width: "180px"
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
export const DiagramPicker = React.forwardRef((props, ref) => {
|
|
42
|
+
const ctx = useKWIZFluentContext();
|
|
43
|
+
const classes = useStyles();
|
|
44
|
+
const [isOpen, setIsOpen] = useStateEX(false);
|
|
45
|
+
let options = (props.hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
|
|
46
|
+
if (props.onlyTransparent)
|
|
47
|
+
options = options.filter(o => o.name.endsWith(', transparent'));
|
|
48
|
+
return (_jsxs(Dialog, { open: isOpen, onOpenChange: (e, data) => {
|
|
49
|
+
setIsOpen(data.open);
|
|
50
|
+
}, 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" }), _jsx(DialogContent, { children: _jsx(Horizontal, { main: true, wrap: true, css: [classes.diagramWrapper], children: options
|
|
51
|
+
.map(diagram => _jsx(Section, { css: [classes.diagram], title: diagram.name, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
52
|
+
var _a;
|
|
53
|
+
const fullUrl = `${stockUrl}/${diagram.url}`;
|
|
54
|
+
(_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, { name: diagram.name, url: fullUrl });
|
|
55
|
+
if (props.onSelectBase64) {
|
|
56
|
+
const result = yield fetch(fullUrl);
|
|
57
|
+
const blob = yield result.blob();
|
|
58
|
+
const reader = new FileReader();
|
|
59
|
+
reader.onload = function () {
|
|
60
|
+
var _a;
|
|
61
|
+
(_a = props.onSelectBase64) === null || _a === void 0 ? void 0 : _a.call(props, reader.result);
|
|
62
|
+
};
|
|
63
|
+
reader.readAsDataURL(blob);
|
|
64
|
+
}
|
|
65
|
+
setIsOpen(false);
|
|
66
|
+
}), children: _jsx("img", { src: `${stockUrl}/${diagram.url}` }) }, diagram.name)) }) })] }) })] }));
|
|
67
|
+
});
|
|
68
|
+
//# sourceMappingURL=diagram-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"diagram-picker.js","sourceRoot":"","sources":["../../src/controls/diagram-picker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonProps } from "@fluentui/react-components";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
import { ButtonEXProps } from "./button";
|
|
3
3
|
type base64Result = {
|
|
4
4
|
base64: string;
|
|
5
5
|
filename: string;
|
|
@@ -14,7 +14,7 @@ interface iProps {
|
|
|
14
14
|
icon?: JSX.Element;
|
|
15
15
|
onChange?: (newFile: File | File[], errors: string[]) => void;
|
|
16
16
|
asBase64?: (files: base64Result[], errors: string[]) => void;
|
|
17
|
-
buttonProps?:
|
|
17
|
+
buttonProps?: Partial<ButtonEXProps>;
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
/** limit file size in MB, for the asBase64 */
|
|
20
20
|
fileSizeLimit?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../src/controls/file-upload.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../src/controls/file-upload.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './controls/canvas/DrawPad';
|
|
|
4
4
|
export * from './controls/centered';
|
|
5
5
|
export * from './controls/ColorPickerDialog';
|
|
6
6
|
export * from './controls/date';
|
|
7
|
+
export * from './controls/diagram-picker';
|
|
7
8
|
export * from './controls/divider';
|
|
8
9
|
export * from './controls/dropdown';
|
|
9
10
|
export * from './controls/error-boundary';
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export * from './controls/canvas/DrawPad';
|
|
|
4
4
|
export * from './controls/centered';
|
|
5
5
|
export * from './controls/ColorPickerDialog';
|
|
6
6
|
export * from './controls/date';
|
|
7
|
+
export * from './controls/diagram-picker';
|
|
7
8
|
export * from './controls/divider';
|
|
8
9
|
export * from './controls/dropdown';
|
|
9
10
|
export * from './controls/error-boundary';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kwiz/fluentui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.45",
|
|
4
4
|
"description": "KWIZ common controls for FluentUI",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"typescript": "^5.3.3"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@kwiz/common": "^1.0.
|
|
59
|
+
"@kwiz/common": "^1.0.93",
|
|
60
60
|
"esbuild": "^0.19.12",
|
|
61
61
|
"get-tsconfig": "^4.7.2",
|
|
62
62
|
"jodit": "^4.2.47",
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, tokens } from '@fluentui/react-components';
|
|
2
|
+
import { ImageSparkleRegular } from '@fluentui/react-icons';
|
|
3
|
+
import { DiagramOptions, stockUrl } from '@kwiz/common';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
|
+
import { useStateEX } from '../helpers/hooks';
|
|
7
|
+
import { ButtonEXPrimarySubtle } from './button';
|
|
8
|
+
import { Horizontal } from './horizontal';
|
|
9
|
+
import { Section } from './section';
|
|
10
|
+
|
|
11
|
+
const useStyles = makeStyles({
|
|
12
|
+
dialog: {
|
|
13
|
+
maxWidth: '70vw',
|
|
14
|
+
width: '70vw',
|
|
15
|
+
},
|
|
16
|
+
dialogBody: {
|
|
17
|
+
maxHeight: '60vh',
|
|
18
|
+
},
|
|
19
|
+
diagramWrapper: {
|
|
20
|
+
justifyContent: "center",
|
|
21
|
+
alignContent: "center"
|
|
22
|
+
},
|
|
23
|
+
diagram: {
|
|
24
|
+
border: `1px solid ${tokens.colorNeutralStroke1}`,
|
|
25
|
+
padding: tokens.spacingHorizontalS,
|
|
26
|
+
"&:hover": {
|
|
27
|
+
...shorthands.borderColor(tokens.colorBrandBackground),
|
|
28
|
+
},
|
|
29
|
+
"&>img": {
|
|
30
|
+
width: "180px"
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
interface iProps {
|
|
36
|
+
onSelect?: (diagram: { url: string; name: string; }) => void;
|
|
37
|
+
onSelectBase64?: (diagram: string) => void;
|
|
38
|
+
trigger?: JSX.Element;
|
|
39
|
+
hiRes?: boolean;
|
|
40
|
+
onlyTransparent?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export const DiagramPicker = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<iProps>)>((props, ref) => {
|
|
43
|
+
const ctx = useKWIZFluentContext();
|
|
44
|
+
const classes = useStyles();
|
|
45
|
+
const [isOpen, setIsOpen] = useStateEX(false);
|
|
46
|
+
let options = (props.hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
|
|
47
|
+
if (props.onlyTransparent) options = options.filter(o => o.name.endsWith(', transparent'));
|
|
48
|
+
return (
|
|
49
|
+
<Dialog open={isOpen} onOpenChange={(e, data) => {
|
|
50
|
+
setIsOpen(data.open);
|
|
51
|
+
}}>
|
|
52
|
+
<DialogTrigger disableButtonEnhancement>
|
|
53
|
+
{props.trigger || <ButtonEXPrimarySubtle icon={<ImageSparkleRegular />} title='Open gallery' showTitleWithIcon dontCenterText />}
|
|
54
|
+
</DialogTrigger>
|
|
55
|
+
<DialogSurface mountNode={ctx.mountNode} className={classes.dialog}>
|
|
56
|
+
<DialogBody className={classes.dialogBody}>
|
|
57
|
+
<DialogTitle>Choose a diagram</DialogTitle>
|
|
58
|
+
<DialogContent>
|
|
59
|
+
<Horizontal main wrap css={[classes.diagramWrapper]}>
|
|
60
|
+
{options
|
|
61
|
+
.map(diagram => <Section key={diagram.name} css={[classes.diagram]}
|
|
62
|
+
title={diagram.name}
|
|
63
|
+
onClick={async () => {
|
|
64
|
+
const fullUrl = `${stockUrl}/${diagram.url}`;
|
|
65
|
+
props.onSelect?.({ name: diagram.name, url: fullUrl });
|
|
66
|
+
if (props.onSelectBase64) {
|
|
67
|
+
const result = await fetch(fullUrl);
|
|
68
|
+
const blob = await result.blob();
|
|
69
|
+
const reader = new FileReader();
|
|
70
|
+
reader.onload = function () {
|
|
71
|
+
props.onSelectBase64?.(reader.result as string);
|
|
72
|
+
};
|
|
73
|
+
reader.readAsDataURL(blob);
|
|
74
|
+
}
|
|
75
|
+
setIsOpen(false);
|
|
76
|
+
}}>
|
|
77
|
+
<img src={`${stockUrl}/${diagram.url}`} />
|
|
78
|
+
</Section>)}
|
|
79
|
+
</Horizontal>
|
|
80
|
+
</DialogContent>
|
|
81
|
+
{/* <DialogActions>
|
|
82
|
+
<DialogTrigger disableButtonEnhancement>
|
|
83
|
+
<Button appearance="secondary">Cancel</Button>
|
|
84
|
+
</DialogTrigger>
|
|
85
|
+
<Button appearance="primary">Save</Button>
|
|
86
|
+
</DialogActions> */}
|
|
87
|
+
</DialogBody>
|
|
88
|
+
</DialogSurface>
|
|
89
|
+
</Dialog>);
|
|
90
|
+
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
|
|
2
2
|
import { ArrowUploadRegular } from "@fluentui/react-icons";
|
|
3
3
|
import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { useDragDropContext } from "../helpers/drag-drop/drag-drop-context";
|
|
6
6
|
import { dropFiles } from "../helpers/drag-drop/exports";
|
|
7
7
|
import { useEffectOnlyOnMount } from "../helpers/hooks";
|
|
8
|
-
import { ButtonEX, CompoundButtonEXSecondary } from "./button";
|
|
8
|
+
import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
|
|
9
9
|
|
|
10
10
|
const useStyles = makeStyles({
|
|
11
11
|
addRowIsOver: {
|
|
@@ -24,7 +24,7 @@ interface iProps {
|
|
|
24
24
|
icon?: JSX.Element;
|
|
25
25
|
onChange?: (newFile: File | File[], errors: string[]) => void;
|
|
26
26
|
asBase64?: (files: base64Result[], errors: string[]) => void;
|
|
27
|
-
buttonProps?:
|
|
27
|
+
buttonProps?: Partial<ButtonEXProps>;
|
|
28
28
|
disabled?: boolean;
|
|
29
29
|
/** limit file size in MB, for the asBase64 */
|
|
30
30
|
fileSizeLimit?: number;
|
package/src/index.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './controls/canvas/DrawPad';
|
|
|
4
4
|
export * from './controls/centered';
|
|
5
5
|
export * from './controls/ColorPickerDialog';
|
|
6
6
|
export * from './controls/date';
|
|
7
|
+
export * from './controls/diagram-picker';
|
|
7
8
|
export * from './controls/divider';
|
|
8
9
|
export * from './controls/dropdown';
|
|
9
10
|
export * from './controls/error-boundary';
|