@kwiz/fluentui 1.0.55 → 1.0.56
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/canvas/DrawPad.js +14 -11
- package/dist/controls/canvas/DrawPad.js.map +1 -1
- package/dist/controls/date.d.ts +2 -0
- package/dist/controls/date.js +1 -1
- package/dist/controls/date.js.map +1 -1
- package/dist/controls/horizontal.d.ts +3 -0
- package/dist/controls/horizontal.js +6 -1
- package/dist/controls/horizontal.js.map +1 -1
- package/dist/controls/html-editor/editor.js +8 -4
- package/dist/controls/html-editor/editor.js.map +1 -1
- package/dist/controls/progress-bar.d.ts +16 -0
- package/dist/controls/progress-bar.js +89 -0
- package/dist/controls/progress-bar.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.d.ts +1 -0
- package/dist/styles/styles.js +1 -0
- package/dist/styles/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/canvas/DrawPad.tsx +23 -13
- package/src/controls/date.tsx +3 -1
- package/src/controls/horizontal.tsx +9 -1
- package/src/controls/html-editor/editor.tsx +9 -4
- package/src/controls/progress-bar.tsx +110 -0
- package/src/index.ts +2 -1
- package/src/styles/styles.ts +1 -0
|
@@ -25,11 +25,13 @@ export const DrawPadUserName = {
|
|
|
25
25
|
get: () => { return _userName; },
|
|
26
26
|
set: (userName) => { _userName = userName; }
|
|
27
27
|
};
|
|
28
|
+
const fontName = "Dancing Script";
|
|
29
|
+
let fontLoading = null;
|
|
30
|
+
let fontReady = false;
|
|
28
31
|
export const DrawPad = (props) => {
|
|
29
32
|
const [LineColor, setLineColor] = useStateEX(props.LineColor || tokens.colorBrandForeground1);
|
|
30
33
|
const [manager, setmanager] = useStateEX(null);
|
|
31
34
|
const [canUndo, setcanUndo] = useStateEX(false, { skipUpdateIfSame: true });
|
|
32
|
-
const [loadedFontNames, setloadedFontNames] = useStateEX([]);
|
|
33
35
|
const [signed, setSigned] = useStateEX(false);
|
|
34
36
|
const [fullscreen, setFullscreen] = useStateEX(false);
|
|
35
37
|
const onChangeRef = React.useRef(props.OnChange);
|
|
@@ -48,20 +50,21 @@ export const DrawPad = (props) => {
|
|
|
48
50
|
}, [props.allowSigning]);
|
|
49
51
|
//load font for sign as text, if needed
|
|
50
52
|
React.useEffect(() => {
|
|
51
|
-
if (props.allowSigning &&
|
|
52
|
-
let DancingScriptFont = new FontFace(
|
|
53
|
+
if (props.allowSigning && !fontLoading) {
|
|
54
|
+
let DancingScriptFont = new FontFace(fontName, "url(https://fonts.gstatic.com/s/dancingscript/v25/If2RXTr6YS-zF4S-kcSWSVi_szLgiuE.woff2) format('woff2')", {
|
|
53
55
|
style: "normal",
|
|
54
56
|
weight: "400 700",
|
|
55
57
|
display: "swap",
|
|
56
58
|
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
|
|
57
59
|
});
|
|
58
|
-
DancingScriptFont.load().then((loadedFont) => __awaiter(void 0, void 0, void 0, function* () {
|
|
60
|
+
fontLoading = DancingScriptFont.load().then((loadedFont) => __awaiter(void 0, void 0, void 0, function* () {
|
|
59
61
|
document.fonts.add(loadedFont);
|
|
60
62
|
yield document.fonts.ready;
|
|
61
|
-
|
|
63
|
+
fontReady = true;
|
|
64
|
+
return true;
|
|
62
65
|
}));
|
|
63
66
|
}
|
|
64
|
-
}, [props.allowSigning
|
|
67
|
+
}, [props.allowSigning]);
|
|
65
68
|
//setup manager
|
|
66
69
|
React.useEffect(() => {
|
|
67
70
|
if (!props.ReadOnly && canvasArea.current && !canvasArea.current["canvas_initialized"]) {
|
|
@@ -73,7 +76,7 @@ export const DrawPad = (props) => {
|
|
|
73
76
|
//because this is used in an addEventListener - need to have a ref to get the most up to date onChange
|
|
74
77
|
if (onChangeRef.current) {
|
|
75
78
|
let canvasValue = manager.toPng();
|
|
76
|
-
setcanUndo(true);
|
|
79
|
+
setcanUndo(true);
|
|
77
80
|
onChangeRef.current(canvasValue);
|
|
78
81
|
}
|
|
79
82
|
});
|
|
@@ -124,7 +127,6 @@ export const DrawPad = (props) => {
|
|
|
124
127
|
setSigned(true);
|
|
125
128
|
let height = canvas.clientHeight;
|
|
126
129
|
let width = canvas.clientWidth;
|
|
127
|
-
let fontName = loadedFontNames[0];
|
|
128
130
|
let ctx = canvas.getContext("2d");
|
|
129
131
|
ctx.fillStyle = getCSSVariableValue(LineColor, canvasArea.current);
|
|
130
132
|
let fontSize = 0.6 * height;
|
|
@@ -148,7 +150,7 @@ export const DrawPad = (props) => {
|
|
|
148
150
|
if (isNullOrUndefined(DrawPadUserName.get())) {
|
|
149
151
|
//prompt user to type his name - then continue
|
|
150
152
|
alerts.promptEX({
|
|
151
|
-
mountNode: canvasContainerDiv.current,
|
|
153
|
+
//mountNode: canvasContainerDiv.current, this lets other content on the form cover the dialog
|
|
152
154
|
title: "Sign as name",
|
|
153
155
|
children: _jsx(Field, { label: "Signing as", hint: "Please type in your name", required: true, children: _jsx(InputEx, { onChange: (e, data) => DrawPadUserName.set(data.value) }) }),
|
|
154
156
|
onCancel: () => {
|
|
@@ -200,7 +202,7 @@ export const DrawPad = (props) => {
|
|
|
200
202
|
border: tokens.colorBrandStroke1
|
|
201
203
|
} }), !signed
|
|
202
204
|
&& !isNullOrEmptyString(props.allowSigning)
|
|
203
|
-
&& !isNullOrEmptyArray(
|
|
205
|
+
&& !isNullOrEmptyArray(fontReady)
|
|
204
206
|
&& _jsx(ButtonEX, { style: {
|
|
205
207
|
position: "absolute",
|
|
206
208
|
bottom: 0,
|
|
@@ -210,7 +212,8 @@ export const DrawPad = (props) => {
|
|
|
210
212
|
height: 16
|
|
211
213
|
}, disabled: props.disabled, icon: _jsx(CalligraphyPenRegular, {}), title: `Sign as ${props.allowSigning === true ? "..." : props.allowSigning}`, onClick: () => {
|
|
212
214
|
onSignAs();
|
|
213
|
-
} })] }) }), !props.ReadOnly && !HideButtons && _jsxs(Vertical, { nogap: true, children: [props.HideColorPicker || _jsx(ColorPickerEx
|
|
215
|
+
} })] }) }), !props.ReadOnly && !HideButtons && _jsxs(Vertical, { nogap: true, children: [props.HideColorPicker || _jsx(ColorPickerEx //mountNode={canvasContainerDiv.current} this lets other content on the form cover the dialog
|
|
216
|
+
, { disabled: props.disabled, buttonOnly: true, value: props.LineColor, onChange: newColor => {
|
|
214
217
|
setLineColor(newColor);
|
|
215
218
|
} }), props.HideClear || _jsx(ButtonEX, { disabled: props.disabled || isNullOrEmptyString(props.Value), title: "Clear", icon: _jsx(DismissRegular, {}), onClick: () => {
|
|
216
219
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawPad.js","sourceRoot":"","sources":["../../../src/controls/canvas/DrawPad.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC9I,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtK,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,cAAc,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"DrawPad.js","sourceRoot":"","sources":["../../../src/controls/canvas/DrawPad.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/date.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ interface IProps {
|
|
|
7
7
|
showTime?: boolean;
|
|
8
8
|
datePickerProps?: DatePickerProps;
|
|
9
9
|
timePickerProps?: TimePickerProps;
|
|
10
|
+
/** don't allow to clear the value */
|
|
11
|
+
required?: boolean;
|
|
10
12
|
}
|
|
11
13
|
export declare const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
|
|
12
14
|
export {};
|
package/dist/controls/date.js
CHANGED
|
@@ -12,7 +12,7 @@ export const DatePickerEx = (props) => {
|
|
|
12
12
|
//time value will always have a value even when clearing the date
|
|
13
13
|
const [timeValue, setTimeValue] = useStateEX(isDate(props.value) ? props.value : new Date());
|
|
14
14
|
const { showClear, dateValue } = React.useMemo(() => {
|
|
15
|
-
const showClear = isDate(props.value);
|
|
15
|
+
const showClear = !props.required && isDate(props.value);
|
|
16
16
|
const dateValue = props.value;
|
|
17
17
|
return { showClear, dateValue };
|
|
18
18
|
}, [props.value]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAmB,MAAM,mCAAmC,CAAC;AAEhF,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,10 @@ import { ISectionProps } from './section';
|
|
|
3
3
|
interface IProps extends ISectionProps {
|
|
4
4
|
wrap?: boolean;
|
|
5
5
|
nogap?: boolean;
|
|
6
|
+
/** vertical align center */
|
|
6
7
|
centered?: boolean;
|
|
8
|
+
/** horizontal centered */
|
|
9
|
+
hCentered?: boolean;
|
|
7
10
|
}
|
|
8
11
|
export declare const Horizontal: React.ForwardRefExoticComponent<IProps & {
|
|
9
12
|
children?: React.ReactNode | undefined;
|
|
@@ -10,7 +10,10 @@ const useStyles = makeStyles({
|
|
|
10
10
|
nogap: mixins.nogap,
|
|
11
11
|
centered: {
|
|
12
12
|
alignItems: "center"
|
|
13
|
-
}
|
|
13
|
+
},
|
|
14
|
+
hCentered: {
|
|
15
|
+
justifyContent: "center"
|
|
16
|
+
},
|
|
14
17
|
});
|
|
15
18
|
export const Horizontal = React.forwardRef((props, ref) => {
|
|
16
19
|
const cssNames = useStyles();
|
|
@@ -22,6 +25,8 @@ export const Horizontal = React.forwardRef((props, ref) => {
|
|
|
22
25
|
css.push(cssNames.nogap);
|
|
23
26
|
if (props.centered)
|
|
24
27
|
css.push(cssNames.centered);
|
|
28
|
+
if (props.hCentered)
|
|
29
|
+
css.push(cssNames.hCentered);
|
|
25
30
|
if (isNotEmptyArray(props.css))
|
|
26
31
|
css.push(...props.css);
|
|
27
32
|
return (_jsx(Section, Object.assign({}, props, { css: css })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,QAAQ,EAAE;QACN,UAAU,EAAE,QAAQ;KACvB;CACJ,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,QAAQ,EAAE;QACN,UAAU,EAAE,QAAQ;KACvB;IACD,SAAS,EAAE;QACP,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAA;AAUF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,QAAQ;QACd,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,KAAK,CAAC,SAAS;QACf,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACnC,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -15,6 +15,10 @@ const useStyles = makeStyles({
|
|
|
15
15
|
minHeight: `100px`
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
const saveIcon = IconToSVG(_jsx(Save16Regular, { title: 'Save' }));
|
|
19
|
+
const cancelIcon = IconToSVG(_jsx(Dismiss16Regular, { title: 'Cancel' }));
|
|
20
|
+
const maxIcon = IconToSVG(_jsx(ArrowMaximize16Regular, { title: 'Maximize' }));
|
|
21
|
+
const minIcon = IconToSVG(_jsx(ArrowMinimize16Regular, { title: 'Minimize' }));
|
|
18
22
|
export const HtmlEditor = (props) => {
|
|
19
23
|
const classes = useStyles();
|
|
20
24
|
const [active, setActive] = React.useState(false);
|
|
@@ -38,7 +42,7 @@ export const HtmlEditor = (props) => {
|
|
|
38
42
|
fullScreen: true
|
|
39
43
|
} : props;
|
|
40
44
|
Jodit.defaultOptions.controls.save = {
|
|
41
|
-
template: () =>
|
|
45
|
+
template: () => saveIcon,
|
|
42
46
|
exec: (view) => {
|
|
43
47
|
var _a, _b, _c, _d;
|
|
44
48
|
(_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, view.value);
|
|
@@ -47,7 +51,7 @@ export const HtmlEditor = (props) => {
|
|
|
47
51
|
}
|
|
48
52
|
};
|
|
49
53
|
Jodit.defaultOptions.controls.cancel = {
|
|
50
|
-
template: () =>
|
|
54
|
+
template: () => cancelIcon,
|
|
51
55
|
exec: (view) => {
|
|
52
56
|
var _a, _b;
|
|
53
57
|
(_b = (_a = view.kwizInstance.props).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
@@ -55,7 +59,7 @@ export const HtmlEditor = (props) => {
|
|
|
55
59
|
}
|
|
56
60
|
};
|
|
57
61
|
Jodit.defaultOptions.controls.maximize = {
|
|
58
|
-
template: () =>
|
|
62
|
+
template: () => maxIcon,
|
|
59
63
|
exec: (view) => {
|
|
60
64
|
var _a, _b;
|
|
61
65
|
(_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, view.value); //pass value from smaller editor to bigger one
|
|
@@ -63,7 +67,7 @@ export const HtmlEditor = (props) => {
|
|
|
63
67
|
}
|
|
64
68
|
};
|
|
65
69
|
Jodit.defaultOptions.controls.minimize = {
|
|
66
|
-
template: () =>
|
|
70
|
+
template: () => minIcon,
|
|
67
71
|
exec: (view) => {
|
|
68
72
|
var _a, _b;
|
|
69
73
|
(_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, view.value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../src/controls/html-editor/editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAiB,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,0CAA0C;AAE1C,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,OAAO,EAAE;QACL,MAAM,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,4BAA4B,EAAE;QAChF,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,SAAS,EAAE,OAAO;KACrB;CACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../src/controls/html-editor/editor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { DividerProps } from '@fluentui/react-components';
|
|
2
|
+
import { FluentIcon } from '@fluentui/react-icons';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
interface IProps extends DividerProps {
|
|
5
|
+
steps: number;
|
|
6
|
+
step: number;
|
|
7
|
+
stepLabel?: string;
|
|
8
|
+
css?: string[];
|
|
9
|
+
/** optional, send an icon instead of the step number */
|
|
10
|
+
stepIcons?: FluentIcon[];
|
|
11
|
+
onStepClick?: (step: number) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const ProgressBarEX: React.ForwardRefExoticComponent<IProps & {
|
|
14
|
+
children?: React.ReactNode | undefined;
|
|
15
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
|
|
3
|
+
import { CheckmarkRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { isFunction, isNotEmptyString } from '@kwiz/common';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { KnownClassNames } from '../styles/styles';
|
|
7
|
+
import { Horizontal } from './horizontal';
|
|
8
|
+
import { Section } from './section';
|
|
9
|
+
import { Vertical } from './vertical';
|
|
10
|
+
const useStyles = makeStyles({
|
|
11
|
+
root: {
|
|
12
|
+
position: "relative"
|
|
13
|
+
},
|
|
14
|
+
stepNumber: {
|
|
15
|
+
border: `2px solid ${tokens.colorNeutralStroke1}`,
|
|
16
|
+
borderRadius: tokens.borderRadiusCircular,
|
|
17
|
+
width: '24px',
|
|
18
|
+
height: '24px',
|
|
19
|
+
position: 'relative',
|
|
20
|
+
display: 'inline-flex',
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
24
|
+
},
|
|
25
|
+
stepLabel: {
|
|
26
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
27
|
+
position: "absolute",
|
|
28
|
+
top: '-10px',
|
|
29
|
+
left: 0,
|
|
30
|
+
right: 0,
|
|
31
|
+
"& > span": {
|
|
32
|
+
whiteSpace: "nowrap",
|
|
33
|
+
overflow: "hidden",
|
|
34
|
+
textOverflow: "ellipsis",
|
|
35
|
+
display: "inline-block"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
stepNumberCurrent: {
|
|
39
|
+
border: `2px solid ${tokens.colorBrandBackground}`,
|
|
40
|
+
},
|
|
41
|
+
stepNumberCompleted: {
|
|
42
|
+
border: `2px solid ${tokens.colorBrandBackground}`,
|
|
43
|
+
backgroundColor: tokens.colorBrandBackground,
|
|
44
|
+
color: tokens.colorNeutralBackground1,
|
|
45
|
+
},
|
|
46
|
+
stepNumberClickable: {
|
|
47
|
+
cursor: "pointer"
|
|
48
|
+
},
|
|
49
|
+
stepTitle: {
|
|
50
|
+
fontSize: tokens.fontSizeBase400,
|
|
51
|
+
lineHeight: tokens.lineHeightBase400,
|
|
52
|
+
},
|
|
53
|
+
progressBar: {
|
|
54
|
+
position: "absolute",
|
|
55
|
+
top: "14px"
|
|
56
|
+
},
|
|
57
|
+
stepSpacer: {
|
|
58
|
+
position: "relative"
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
export const ProgressBarEX = React.forwardRef((props, ref) => {
|
|
62
|
+
var _a, _b;
|
|
63
|
+
const classes = useStyles();
|
|
64
|
+
let stepLabels = [];
|
|
65
|
+
for (let i = 0; i < props.steps; i++) {
|
|
66
|
+
const stepClasses = [classes.stepNumber];
|
|
67
|
+
let addLabel = false;
|
|
68
|
+
let canClick = false;
|
|
69
|
+
if (props.step === i) {
|
|
70
|
+
stepClasses.push(classes.stepNumberCurrent);
|
|
71
|
+
if (isNotEmptyString(props.stepLabel))
|
|
72
|
+
addLabel = true;
|
|
73
|
+
}
|
|
74
|
+
else if (props.step > i) {
|
|
75
|
+
stepClasses.push(classes.stepNumberCompleted);
|
|
76
|
+
canClick = isFunction(props.onStepClick);
|
|
77
|
+
if (canClick)
|
|
78
|
+
stepClasses.push(classes.stepNumberClickable);
|
|
79
|
+
}
|
|
80
|
+
let StepIcon = (_a = props.stepIcons) === null || _a === void 0 ? void 0 : _a[i];
|
|
81
|
+
stepLabels.push(_jsx(Section, { css: stepClasses, onClick: canClick ? () => props.onStepClick(i) : undefined, children: StepIcon ? _jsx(StepIcon, {}) : `${i + 1}` }, `step${i}`));
|
|
82
|
+
stepLabels.push(_jsx(Section, { main: true, css: [classes.stepSpacer], children: addLabel && _jsx(Horizontal, { hCentered: true, css: [classes.stepLabel, KnownClassNames.progressBarStepLabel], children: _jsx("span", { children: props.stepLabel }) }, "label") }, `step${i}Spacer`));
|
|
83
|
+
}
|
|
84
|
+
let StepIcon = (_b = props.stepIcons) === null || _b === void 0 ? void 0 : _b[props.steps];
|
|
85
|
+
//add last submit step
|
|
86
|
+
stepLabels.push(_jsx("span", { className: mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted), children: StepIcon ? _jsx(StepIcon, {}) : _jsx(CheckmarkRegular, {}) }, 'stepSubmit'));
|
|
87
|
+
return (_jsxs(Vertical, { css: [classes.root, ...(props.css || [])], children: [_jsx(ProgressBar, { className: classes.progressBar, value: (props.step * 2) + 1, max: props.steps * 2 }), _jsxs(Horizontal, { css: [classes.stepTitle], children: [...stepLabels] })] }));
|
|
88
|
+
});
|
|
89
|
+
//# sourceMappingURL=progress-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/controls/progress-bar.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export * from './controls/list';
|
|
|
20
20
|
export * from './controls/loading';
|
|
21
21
|
export * from './controls/menu';
|
|
22
22
|
export * from './controls/please-wait';
|
|
23
|
+
export * from './controls/progress-bar';
|
|
23
24
|
export * from './controls/prompt';
|
|
24
25
|
export * from './controls/qrcode';
|
|
25
26
|
export * from './controls/search';
|
|
@@ -32,4 +33,4 @@ export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
|
|
|
32
33
|
export type { iKWIZFluentContext } from './helpers/context';
|
|
33
34
|
export * from './helpers/drag-drop/exports';
|
|
34
35
|
export * from './helpers/hooks';
|
|
35
|
-
export {
|
|
36
|
+
export { commonSizes, KnownClassNames } from './styles/styles';
|
package/dist/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export * from './controls/list';
|
|
|
20
20
|
export * from './controls/loading';
|
|
21
21
|
export * from './controls/menu';
|
|
22
22
|
export * from './controls/please-wait';
|
|
23
|
+
export * from './controls/progress-bar';
|
|
23
24
|
export * from './controls/prompt';
|
|
24
25
|
export * from './controls/qrcode';
|
|
25
26
|
export * from './controls/search';
|
|
@@ -31,5 +32,5 @@ export * from './controls/vertical-content';
|
|
|
31
32
|
export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
|
|
32
33
|
export * from './helpers/drag-drop/exports';
|
|
33
34
|
export * from './helpers/hooks';
|
|
34
|
-
export {
|
|
35
|
+
export { commonSizes, KnownClassNames } from './styles/styles';
|
|
35
36
|
//# sourceMappingURL=index.js.map
|
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,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,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,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,
|
|
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,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,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,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,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,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/styles/styles.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export declare const KnownClassNames: {
|
|
|
19
19
|
accordionBody: string;
|
|
20
20
|
accordionBodyWrapper: string;
|
|
21
21
|
isOpen: string;
|
|
22
|
+
progressBarStepLabel: string;
|
|
22
23
|
};
|
|
23
24
|
export declare const useCommonStyles: () => Record<"printShow" | "printHide" | "hintLabel" | "validationLabel" | "fullscreen", string>;
|
|
24
25
|
export declare const commonSizes: {
|
package/dist/styles/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,gBAAgB;IAC3B,eAAe,EAAE,uBAAuB;IACxC,aAAa,EAAE,qBAAqB;IACpC,oBAAoB,EAAE,6BAA6B;IACnD,MAAM,EAAE,WAAW;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -27,6 +27,7 @@ interface iProps {
|
|
|
27
27
|
ReadOnly?: boolean;
|
|
28
28
|
HideUpload?: boolean;
|
|
29
29
|
HideClear?: boolean;
|
|
30
|
+
//HideUndo?: boolean;
|
|
30
31
|
HideColorPicker?: boolean;
|
|
31
32
|
disabled?: boolean;
|
|
32
33
|
/** true - will prompt user for his name, string will just sign as that string */
|
|
@@ -38,11 +39,14 @@ export const DrawPadUserName = {
|
|
|
38
39
|
get: () => { return _userName },
|
|
39
40
|
set: (userName: string) => { _userName = userName }
|
|
40
41
|
};
|
|
42
|
+
|
|
43
|
+
const fontName = "Dancing Script";
|
|
44
|
+
let fontLoading: Promise<boolean> = null;
|
|
45
|
+
let fontReady = false;
|
|
41
46
|
export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
42
47
|
const [LineColor, setLineColor] = useStateEX<string>(props.LineColor || tokens.colorBrandForeground1);
|
|
43
48
|
const [manager, setmanager] = useStateEX<DrawPadManager>(null);
|
|
44
49
|
const [canUndo, setcanUndo] = useStateEX<boolean>(false, { skipUpdateIfSame: true });
|
|
45
|
-
const [loadedFontNames, setloadedFontNames] = useStateEX<string[]>([]);
|
|
46
50
|
const [signed, setSigned] = useStateEX<boolean>(false);
|
|
47
51
|
const [fullscreen, setFullscreen] = useStateEX<boolean>(false);
|
|
48
52
|
const onChangeRef = React.useRef(props.OnChange);
|
|
@@ -63,9 +67,9 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
63
67
|
|
|
64
68
|
//load font for sign as text, if needed
|
|
65
69
|
React.useEffect(() => {
|
|
66
|
-
if (props.allowSigning &&
|
|
70
|
+
if (props.allowSigning && !fontLoading) {
|
|
67
71
|
let DancingScriptFont = new FontFace(
|
|
68
|
-
|
|
72
|
+
fontName,
|
|
69
73
|
"url(https://fonts.gstatic.com/s/dancingscript/v25/If2RXTr6YS-zF4S-kcSWSVi_szLgiuE.woff2) format('woff2')",
|
|
70
74
|
{
|
|
71
75
|
style: "normal",
|
|
@@ -75,13 +79,14 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
75
79
|
}
|
|
76
80
|
);
|
|
77
81
|
|
|
78
|
-
DancingScriptFont.load().then(async loadedFont => {
|
|
82
|
+
fontLoading = DancingScriptFont.load().then(async loadedFont => {
|
|
79
83
|
document.fonts.add(loadedFont);
|
|
80
84
|
await document.fonts.ready;
|
|
81
|
-
|
|
85
|
+
fontReady = true;
|
|
86
|
+
return true;
|
|
82
87
|
});
|
|
83
88
|
}
|
|
84
|
-
}, [props.allowSigning
|
|
89
|
+
}, [props.allowSigning]);
|
|
85
90
|
|
|
86
91
|
//setup manager
|
|
87
92
|
React.useEffect(() => {
|
|
@@ -94,7 +99,7 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
94
99
|
//because this is used in an addEventListener - need to have a ref to get the most up to date onChange
|
|
95
100
|
if (onChangeRef.current) {
|
|
96
101
|
let canvasValue = manager.toPng();
|
|
97
|
-
setcanUndo(true)
|
|
102
|
+
setcanUndo(true);
|
|
98
103
|
onChangeRef.current(canvasValue);
|
|
99
104
|
}
|
|
100
105
|
});
|
|
@@ -145,7 +150,6 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
145
150
|
|
|
146
151
|
let height = canvas.clientHeight;
|
|
147
152
|
let width = canvas.clientWidth;
|
|
148
|
-
let fontName = loadedFontNames[0];
|
|
149
153
|
|
|
150
154
|
let ctx = canvas.getContext("2d");
|
|
151
155
|
ctx.fillStyle = getCSSVariableValue(LineColor, canvasArea.current);
|
|
@@ -174,7 +178,7 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
174
178
|
if (isNullOrUndefined(DrawPadUserName.get())) {
|
|
175
179
|
//prompt user to type his name - then continue
|
|
176
180
|
alerts.promptEX({
|
|
177
|
-
mountNode: canvasContainerDiv.current,
|
|
181
|
+
//mountNode: canvasContainerDiv.current, this lets other content on the form cover the dialog
|
|
178
182
|
title: "Sign as name",
|
|
179
183
|
children: <Field label="Signing as" hint="Please type in your name" required>
|
|
180
184
|
<InputEx onChange={(e, data) => DrawPadUserName.set(data.value)} />
|
|
@@ -237,7 +241,7 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
237
241
|
}} />
|
|
238
242
|
{!signed
|
|
239
243
|
&& !isNullOrEmptyString(props.allowSigning)
|
|
240
|
-
&& !isNullOrEmptyArray(
|
|
244
|
+
&& !isNullOrEmptyArray(fontReady)
|
|
241
245
|
&& <ButtonEX
|
|
242
246
|
style={{
|
|
243
247
|
position: "absolute",
|
|
@@ -258,9 +262,15 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
|
|
|
258
262
|
}
|
|
259
263
|
</div>
|
|
260
264
|
{!props.ReadOnly && !HideButtons && <Vertical nogap>
|
|
261
|
-
{props.HideColorPicker || <ColorPickerEx mountNode={canvasContainerDiv.current}
|
|
262
|
-
|
|
263
|
-
|
|
265
|
+
{props.HideColorPicker || <ColorPickerEx //mountNode={canvasContainerDiv.current} this lets other content on the form cover the dialog
|
|
266
|
+
disabled={props.disabled} buttonOnly value={props.LineColor} onChange={newColor => {
|
|
267
|
+
setLineColor(newColor);
|
|
268
|
+
}} />}
|
|
269
|
+
{/* todo: undo isn't working properly
|
|
270
|
+
{props.HideUndo || <ButtonEX disabled={!canUndo} title="Undo" icon={<ArrowUndoRegular />} onClick={() => {
|
|
271
|
+
manager.undoLast();
|
|
272
|
+
setcanUndo(manager.canUndo());
|
|
273
|
+
}} />} */}
|
|
264
274
|
{props.HideClear || <ButtonEX disabled={props.disabled || isNullOrEmptyString(props.Value)} title="Clear" icon={<DismissRegular />} onClick={() => {
|
|
265
275
|
//can call clear on the canvas, or can call the onchange which will cause a re-draw
|
|
266
276
|
setSigned(false);
|
package/src/controls/date.tsx
CHANGED
|
@@ -14,6 +14,8 @@ interface IProps {
|
|
|
14
14
|
showTime?: boolean;
|
|
15
15
|
datePickerProps?: DatePickerProps;
|
|
16
16
|
timePickerProps?: TimePickerProps;
|
|
17
|
+
/** don't allow to clear the value */
|
|
18
|
+
required?: boolean;
|
|
17
19
|
}
|
|
18
20
|
export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
|
|
19
21
|
const ctx = useKWIZFluentContext();
|
|
@@ -21,7 +23,7 @@ export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProp
|
|
|
21
23
|
//time value will always have a value even when clearing the date
|
|
22
24
|
const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
|
|
23
25
|
const { showClear, dateValue } = React.useMemo(() => {
|
|
24
|
-
const showClear = isDate(props.value);
|
|
26
|
+
const showClear = !props.required && isDate(props.value);
|
|
25
27
|
const dateValue = props.value;
|
|
26
28
|
return { showClear, dateValue };
|
|
27
29
|
}, [props.value]);
|
|
@@ -13,13 +13,19 @@ const useStyles = makeStyles({
|
|
|
13
13
|
nogap: mixins.nogap,
|
|
14
14
|
centered: {
|
|
15
15
|
alignItems: "center"
|
|
16
|
-
}
|
|
16
|
+
},
|
|
17
|
+
hCentered: {
|
|
18
|
+
justifyContent: "center"
|
|
19
|
+
},
|
|
17
20
|
})
|
|
18
21
|
|
|
19
22
|
interface IProps extends ISectionProps {
|
|
20
23
|
wrap?: boolean;
|
|
21
24
|
nogap?: boolean;
|
|
25
|
+
/** vertical align center */
|
|
22
26
|
centered?: boolean;
|
|
27
|
+
/** horizontal centered */
|
|
28
|
+
hCentered?: boolean;
|
|
23
29
|
}
|
|
24
30
|
export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
|
|
25
31
|
const cssNames = useStyles();
|
|
@@ -32,6 +38,8 @@ export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildr
|
|
|
32
38
|
css.push(cssNames.nogap);
|
|
33
39
|
if (props.centered)
|
|
34
40
|
css.push(cssNames.centered);
|
|
41
|
+
if (props.hCentered)
|
|
42
|
+
css.push(cssNames.hCentered);
|
|
35
43
|
|
|
36
44
|
if (isNotEmptyArray(props.css)) css.push(...props.css);
|
|
37
45
|
|
|
@@ -52,6 +52,11 @@ type JoditExpanded = Jodit & {//& IViewBased<IViewOptions>
|
|
|
52
52
|
setShowFullScreen: (value: boolean) => void;
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
+
|
|
56
|
+
const saveIcon = IconToSVG(<Save16Regular title='Save' />);
|
|
57
|
+
const cancelIcon = IconToSVG(<Dismiss16Regular title='Cancel' />);
|
|
58
|
+
const maxIcon = IconToSVG(<ArrowMaximize16Regular title='Maximize' />);
|
|
59
|
+
const minIcon = IconToSVG(<ArrowMinimize16Regular title='Minimize' />);
|
|
55
60
|
export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
|
|
56
61
|
const classes = useStyles();
|
|
57
62
|
const [active, setActive] = React.useState(false);
|
|
@@ -82,7 +87,7 @@ export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>
|
|
|
82
87
|
|
|
83
88
|
|
|
84
89
|
Jodit.defaultOptions.controls.save = {
|
|
85
|
-
template: () =>
|
|
90
|
+
template: () => saveIcon,
|
|
86
91
|
exec: (view: JoditExpanded) => {
|
|
87
92
|
view.kwizInstance.props.onChange?.(view.value);
|
|
88
93
|
view.kwizInstance.props.onSave?.(view.value);
|
|
@@ -90,21 +95,21 @@ export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>
|
|
|
90
95
|
}
|
|
91
96
|
};
|
|
92
97
|
Jodit.defaultOptions.controls.cancel = {
|
|
93
|
-
template: () =>
|
|
98
|
+
template: () => cancelIcon,
|
|
94
99
|
exec: (view: JoditExpanded) => {
|
|
95
100
|
view.kwizInstance.props.onCancel?.();
|
|
96
101
|
view.kwizInstance.setShowFullScreen(false);
|
|
97
102
|
}
|
|
98
103
|
};
|
|
99
104
|
Jodit.defaultOptions.controls.maximize = {
|
|
100
|
-
template: () =>
|
|
105
|
+
template: () => maxIcon,
|
|
101
106
|
exec: (view: JoditExpanded) => {
|
|
102
107
|
view.kwizInstance.props.onChange?.(view.value);//pass value from smaller editor to bigger one
|
|
103
108
|
view.kwizInstance.setShowFullScreen(true);
|
|
104
109
|
}
|
|
105
110
|
};
|
|
106
111
|
Jodit.defaultOptions.controls.minimize = {
|
|
107
|
-
template: () =>
|
|
112
|
+
template: () => minIcon,
|
|
108
113
|
exec: (view: JoditExpanded) => {
|
|
109
114
|
view.kwizInstance.props.onChange?.(view.value);
|
|
110
115
|
view.kwizInstance.setShowFullScreen(false);
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { DividerProps, makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
|
|
2
|
+
import { CheckmarkRegular, FluentIcon } from '@fluentui/react-icons';
|
|
3
|
+
import { isFunction, isNotEmptyString } from '@kwiz/common';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { KnownClassNames } from '../styles/styles';
|
|
6
|
+
import { Horizontal } from './horizontal';
|
|
7
|
+
import { Section } from './section';
|
|
8
|
+
import { Vertical } from './vertical';
|
|
9
|
+
|
|
10
|
+
const useStyles = makeStyles({
|
|
11
|
+
root: {
|
|
12
|
+
position: "relative"
|
|
13
|
+
},
|
|
14
|
+
stepNumber: {
|
|
15
|
+
border: `2px solid ${tokens.colorNeutralStroke1}`,
|
|
16
|
+
borderRadius: tokens.borderRadiusCircular,
|
|
17
|
+
width: '24px',
|
|
18
|
+
height: '24px',
|
|
19
|
+
position: 'relative',
|
|
20
|
+
display: 'inline-flex',
|
|
21
|
+
alignItems: 'center',
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
24
|
+
},
|
|
25
|
+
stepLabel: {
|
|
26
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
27
|
+
position: "absolute",
|
|
28
|
+
top: '-10px',
|
|
29
|
+
left: 0,
|
|
30
|
+
right: 0,
|
|
31
|
+
"& > span": {
|
|
32
|
+
whiteSpace: "nowrap",
|
|
33
|
+
overflow: "hidden",
|
|
34
|
+
textOverflow: "ellipsis",
|
|
35
|
+
display: "inline-block"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
stepNumberCurrent: {
|
|
39
|
+
border: `2px solid ${tokens.colorBrandBackground}`,
|
|
40
|
+
},
|
|
41
|
+
stepNumberCompleted: {
|
|
42
|
+
border: `2px solid ${tokens.colorBrandBackground}`,
|
|
43
|
+
backgroundColor: tokens.colorBrandBackground,
|
|
44
|
+
color: tokens.colorNeutralBackground1,
|
|
45
|
+
},
|
|
46
|
+
stepNumberClickable: {
|
|
47
|
+
cursor: "pointer"
|
|
48
|
+
},
|
|
49
|
+
stepTitle: {
|
|
50
|
+
fontSize: tokens.fontSizeBase400,
|
|
51
|
+
lineHeight: tokens.lineHeightBase400,
|
|
52
|
+
},
|
|
53
|
+
progressBar: {
|
|
54
|
+
position: "absolute",
|
|
55
|
+
top: "14px"
|
|
56
|
+
},
|
|
57
|
+
stepSpacer: {
|
|
58
|
+
position: "relative"
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
interface IProps extends DividerProps {
|
|
62
|
+
steps: number;
|
|
63
|
+
step: number;
|
|
64
|
+
stepLabel?: string;
|
|
65
|
+
css?: string[];
|
|
66
|
+
/** optional, send an icon instead of the step number */
|
|
67
|
+
stepIcons?: FluentIcon[];
|
|
68
|
+
onStepClick?: (step: number) => void;
|
|
69
|
+
}
|
|
70
|
+
export const ProgressBarEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
|
|
71
|
+
const classes = useStyles();
|
|
72
|
+
|
|
73
|
+
let stepLabels: JSX.Element[] = [];
|
|
74
|
+
for (let i = 0; i < props.steps; i++) {
|
|
75
|
+
const stepClasses = [classes.stepNumber];
|
|
76
|
+
let addLabel = false;
|
|
77
|
+
let canClick = false;
|
|
78
|
+
if (props.step === i) {
|
|
79
|
+
stepClasses.push(classes.stepNumberCurrent);
|
|
80
|
+
if (isNotEmptyString(props.stepLabel))
|
|
81
|
+
addLabel = true;
|
|
82
|
+
}
|
|
83
|
+
else if (props.step > i) {
|
|
84
|
+
stepClasses.push(classes.stepNumberCompleted);
|
|
85
|
+
canClick = isFunction(props.onStepClick);
|
|
86
|
+
if (canClick)
|
|
87
|
+
stepClasses.push(classes.stepNumberClickable);
|
|
88
|
+
}
|
|
89
|
+
let StepIcon = props.stepIcons?.[i];
|
|
90
|
+
stepLabels.push(<Section key={`step${i}`} css={stepClasses} onClick={canClick ? () => props.onStepClick(i) : undefined}>{StepIcon ? <StepIcon /> : `${i + 1}`}</Section>);
|
|
91
|
+
stepLabels.push(<Section main key={`step${i}Spacer`} css={[classes.stepSpacer]}>
|
|
92
|
+
{addLabel && <Horizontal key="label" hCentered css={[classes.stepLabel, KnownClassNames.progressBarStepLabel]}>
|
|
93
|
+
<span>{props.stepLabel}</span>
|
|
94
|
+
</Horizontal>}
|
|
95
|
+
</Section>);
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
let StepIcon = props.stepIcons?.[props.steps];
|
|
100
|
+
//add last submit step
|
|
101
|
+
stepLabels.push(<span key='stepSubmit' className={mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted)}>{StepIcon ? <StepIcon /> : <CheckmarkRegular />}</span>);
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<Vertical css={[classes.root, ...(props.css || [])]}>
|
|
105
|
+
{/* progress bar first so labels will cover it without the need for zindex */}
|
|
106
|
+
<ProgressBar className={classes.progressBar} value={(props.step * 2) + 1} max={props.steps * 2} />
|
|
107
|
+
<Horizontal css={[classes.stepTitle]}>{...stepLabels}</Horizontal>
|
|
108
|
+
</Vertical >
|
|
109
|
+
);
|
|
110
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -20,6 +20,7 @@ export * from './controls/list';
|
|
|
20
20
|
export * from './controls/loading';
|
|
21
21
|
export * from './controls/menu';
|
|
22
22
|
export * from './controls/please-wait';
|
|
23
|
+
export * from './controls/progress-bar';
|
|
23
24
|
export * from './controls/prompt';
|
|
24
25
|
export * from './controls/qrcode';
|
|
25
26
|
export * from './controls/search';
|
|
@@ -32,5 +33,5 @@ export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
|
|
|
32
33
|
export type { iKWIZFluentContext } from './helpers/context';
|
|
33
34
|
export * from './helpers/drag-drop/exports';
|
|
34
35
|
export * from './helpers/hooks';
|
|
35
|
-
export {
|
|
36
|
+
export { commonSizes, KnownClassNames } from './styles/styles';
|
|
36
37
|
|
package/src/styles/styles.ts
CHANGED