@kwiz/fluentui 1.0.67 → 1.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/controls/field-editor.d.ts +1 -0
- package/dist/controls/field-editor.js +3 -3
- package/dist/controls/field-editor.js.map +1 -1
- package/dist/controls/input.d.ts +12 -0
- package/dist/controls/input.js +38 -15
- package/dist/controls/input.js.map +1 -1
- package/package.json +2 -2
- package/src/controls/field-editor.tsx +7 -5
- package/src/controls/input.tsx +50 -14
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Field, mergeClasses
|
|
2
|
+
import { Field, mergeClasses } from '@fluentui/react-components';
|
|
3
3
|
import { isNullOrUndefined } from '@kwiz/common';
|
|
4
4
|
import { GetLogger } from '../_modules/config';
|
|
5
|
-
import { InputEx } from './input';
|
|
5
|
+
import { InputEx, TextAreaEx } from './input';
|
|
6
6
|
const logger = GetLogger('FieldEditor');
|
|
7
7
|
export const FieldEditor = (props) => {
|
|
8
8
|
if (isNullOrUndefined(props.value)) {
|
|
9
9
|
logger.error(`${props.label}: value should not be null`);
|
|
10
10
|
}
|
|
11
11
|
return (_jsx(Field, { required: props.required, validationMessage: props.error || props.description, validationState: props.error ? "error" : "none", children: props.type === "multiline"
|
|
12
|
-
? _jsx(
|
|
12
|
+
? _jsx(TextAreaEx, { className: props.css && mergeClasses(...props.css), required: props.required, placeholder: props.label, value: props.value || "", allowTab: props.allowTab, onValueChange: (e, data) => props.onChange(data.value) })
|
|
13
13
|
: _jsx(InputEx, { className: props.css && mergeClasses(...props.css), required: props.required, placeholder: props.label, value: props.value || "", onChange: (e, data) => props.onChange(data.value) }) }));
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=field-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor.js","sourceRoot":"","sources":["../../src/controls/field-editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"field-editor.js","sourceRoot":"","sources":["../../src/controls/field-editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAaxC,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,4BAA4B,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,CACH,KAAC,KAAK,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAC3B,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,EACnD,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAC9C,KAAK,CAAC,IAAI,KAAK,WAAW;YACvB,CAAC,CAAC,KAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EAC5D,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GACxD;YACF,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,EACzD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,GACzD,CACX,CAAC;AACN,CAAC,CAAA"}
|
package/dist/controls/input.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { InputProps, TextareaProps } from '@fluentui/react-components';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
interface IProps extends InputProps {
|
|
4
|
+
/** fire on enter */
|
|
4
5
|
onOK?: () => void;
|
|
6
|
+
/** fire on escape */
|
|
5
7
|
onCancel?: () => void;
|
|
6
8
|
tokens?: {
|
|
7
9
|
title: string;
|
|
@@ -13,7 +15,17 @@ interface IProps extends InputProps {
|
|
|
13
15
|
export declare const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
|
|
14
16
|
interface IPropsTextArea extends TextareaProps {
|
|
15
17
|
fullSize?: boolean;
|
|
18
|
+
/** recalc the height to grow to show all text */
|
|
16
19
|
growNoShrink?: boolean;
|
|
20
|
+
allowTab?: boolean;
|
|
21
|
+
/** fire on enter */
|
|
22
|
+
onOK?: () => void;
|
|
23
|
+
/** fire on escape */
|
|
24
|
+
onCancel?: () => void;
|
|
25
|
+
onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
|
|
26
|
+
value: string;
|
|
27
|
+
elm: HTMLTextAreaElement;
|
|
28
|
+
}) => void;
|
|
17
29
|
}
|
|
18
30
|
export declare const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>>;
|
|
19
31
|
interface INumberProps extends Omit<IProps, "value" | "onChange" | "defaultValue" | "inputMode"> {
|
package/dist/controls/input.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Input, Label, Link, makeStyles, mergeClasses, Textarea } from '@fluentui/react-components';
|
|
3
|
-
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
|
|
4
|
+
import React, { useCallback, useEffect } from 'react';
|
|
5
|
+
import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
|
|
5
6
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
6
7
|
import { useCommonStyles } from '../styles/styles';
|
|
7
8
|
import { Horizontal } from './horizontal';
|
|
@@ -12,10 +13,11 @@ export const InputEx = (props) => {
|
|
|
12
13
|
const ctx = useKWIZFluentContext();
|
|
13
14
|
const input = _jsx(Input, Object.assign({ appearance: ctx.inputAppearance }, props, { onKeyDown: isFunction(props.onOK) || isFunction(props.onCancel)
|
|
14
15
|
? e => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
var _a, _b;
|
|
17
|
+
if (e.key === "Enter")
|
|
18
|
+
(_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
19
|
+
if (e.key === "Escape")
|
|
20
|
+
(_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
|
|
19
21
|
}
|
|
20
22
|
: undefined }));
|
|
21
23
|
return (isNotEmptyArray(props.tokens)
|
|
@@ -50,18 +52,39 @@ export const TextAreaEx = (props) => {
|
|
|
50
52
|
let css = [];
|
|
51
53
|
if (props.fullSize)
|
|
52
54
|
css.push(cssNames.fullSizeTextArea);
|
|
53
|
-
const textAreaRef =
|
|
55
|
+
const textAreaRef = useRefWithState(null);
|
|
54
56
|
const recalcHeight = React.useCallback(() => {
|
|
55
|
-
if (textAreaRef.current && props.growNoShrink) {
|
|
56
|
-
if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
|
|
57
|
-
textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
|
|
57
|
+
if (textAreaRef.ref.current && props.growNoShrink) {
|
|
58
|
+
if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
|
|
59
|
+
textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
|
|
58
60
|
}
|
|
59
|
-
},
|
|
61
|
+
}, useEffectOnlyOnMount);
|
|
62
|
+
useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
|
|
63
|
+
const onChange = useCallback((e, d) => {
|
|
64
|
+
var _a;
|
|
65
|
+
(_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, e, { value: d.value, elm: textAreaRef.ref.current });
|
|
66
|
+
recalcHeight();
|
|
67
|
+
}, [props.onChange]);
|
|
68
|
+
const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
|
|
60
69
|
let style = Object.assign({ height: '100%' }, props.style);
|
|
61
|
-
return (_jsx(Textarea, Object.assign({ ref: textAreaRef, className: mergeClasses(...css) }, props, { style: style,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
70
|
+
return (_jsx(Textarea, Object.assign({ ref: textAreaRef.set, className: mergeClasses(...css) }, props, { style: style, onKeyDown: needOnKeyDown ? (e) => {
|
|
71
|
+
var _a, _b, _c;
|
|
72
|
+
if (props.allowTab && e.key === "Tab") {
|
|
73
|
+
stopEvent(e);
|
|
74
|
+
const textArea = e.target;
|
|
75
|
+
pasteTextAtCursor(textArea, "\t");
|
|
76
|
+
onChange(e, { value: textArea.value });
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
if (e.key === "Enter")
|
|
80
|
+
(_a = props.onOK) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
81
|
+
if (e.key === "Escape")
|
|
82
|
+
(_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
|
|
83
|
+
(_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, e);
|
|
84
|
+
} : props.onKeyDown, onChange: (e, d) => {
|
|
85
|
+
var _a;
|
|
86
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e, d);
|
|
87
|
+
onChange(e, d);
|
|
65
88
|
} })));
|
|
66
89
|
};
|
|
67
90
|
export const InputNumberEx = (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/controls/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,KAAK,EAAiC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/controls/input.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kwiz/fluentui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.68",
|
|
4
4
|
"description": "KWIZ common controls for FluentUI",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@fluentui/react-datepicker-compat": "^0.4.53",
|
|
62
62
|
"@fluentui/react-timepicker-compat": "^0.2.42",
|
|
63
|
-
"@kwiz/common": "^1.0.
|
|
63
|
+
"@kwiz/common": "^1.0.120",
|
|
64
64
|
"@mismerge/core": "^1.2.1",
|
|
65
65
|
"@mismerge/react": "^1.0.1",
|
|
66
66
|
"esbuild": "^0.19.12",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Field, mergeClasses
|
|
1
|
+
import { Field, mergeClasses } from '@fluentui/react-components';
|
|
2
2
|
import { isNullOrUndefined } from '@kwiz/common';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { GetLogger } from '../_modules/config';
|
|
5
|
-
import { InputEx } from './input';
|
|
5
|
+
import { InputEx, TextAreaEx } from './input';
|
|
6
6
|
|
|
7
7
|
const logger = GetLogger('FieldEditor');
|
|
8
8
|
|
|
@@ -14,7 +14,8 @@ interface IProps {
|
|
|
14
14
|
css: string[];
|
|
15
15
|
label: string;
|
|
16
16
|
description?: string;
|
|
17
|
-
type?: "text" | "multiline"
|
|
17
|
+
type?: "text" | "multiline";
|
|
18
|
+
allowTab?: boolean;
|
|
18
19
|
}
|
|
19
20
|
export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
|
|
20
21
|
if (isNullOrUndefined(props.value)) {
|
|
@@ -25,11 +26,12 @@ export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
|
|
|
25
26
|
validationMessage={props.error || props.description}
|
|
26
27
|
validationState={props.error ? "error" : "none"}>
|
|
27
28
|
{props.type === "multiline"
|
|
28
|
-
? <
|
|
29
|
+
? <TextAreaEx className={props.css && mergeClasses(...props.css)}
|
|
29
30
|
required={props.required}
|
|
30
31
|
placeholder={props.label}
|
|
31
32
|
value={props.value || ""}
|
|
32
|
-
|
|
33
|
+
allowTab={props.allowTab}
|
|
34
|
+
onValueChange={(e, data) => props.onChange(data.value)}
|
|
33
35
|
/>
|
|
34
36
|
: <InputEx className={props.css && mergeClasses(...props.css)}
|
|
35
37
|
required={props.required}
|
package/src/controls/input.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
|
|
2
|
-
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
|
|
3
|
-
import React from 'react';
|
|
1
|
+
import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaOnChangeData, TextareaProps } from '@fluentui/react-components';
|
|
2
|
+
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
|
|
3
|
+
import React, { useCallback, useEffect } from 'react';
|
|
4
|
+
import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
|
|
4
5
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
5
6
|
import { useCommonStyles } from '../styles/styles';
|
|
6
7
|
import { Horizontal } from './horizontal';
|
|
@@ -10,7 +11,9 @@ import { Vertical } from './vertical';
|
|
|
10
11
|
|
|
11
12
|
|
|
12
13
|
interface IProps extends InputProps {
|
|
14
|
+
/** fire on enter */
|
|
13
15
|
onOK?: () => void;
|
|
16
|
+
/** fire on escape */
|
|
14
17
|
onCancel?: () => void;
|
|
15
18
|
tokens?: { title: string; value: string; replace?: boolean; }[];
|
|
16
19
|
tokenMenuLabel?: string;
|
|
@@ -20,8 +23,8 @@ export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
20
23
|
const input = <Input appearance={ctx.inputAppearance} {...props}
|
|
21
24
|
onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
|
|
22
25
|
? e => {
|
|
23
|
-
if (
|
|
24
|
-
|
|
26
|
+
if (e.key === "Enter") props.onOK?.();
|
|
27
|
+
if (e.key === "Escape") props.onCancel?.();
|
|
25
28
|
}
|
|
26
29
|
: undefined
|
|
27
30
|
}
|
|
@@ -69,27 +72,60 @@ const useStyles = makeStyles({
|
|
|
69
72
|
|
|
70
73
|
interface IPropsTextArea extends TextareaProps {
|
|
71
74
|
fullSize?: boolean;
|
|
75
|
+
/** recalc the height to grow to show all text */
|
|
72
76
|
growNoShrink?: boolean;
|
|
77
|
+
allowTab?: boolean;
|
|
78
|
+
/** fire on enter */
|
|
79
|
+
onOK?: () => void;
|
|
80
|
+
/** fire on escape */
|
|
81
|
+
onCancel?: () => void;
|
|
82
|
+
onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
|
|
83
|
+
value: string;
|
|
84
|
+
elm: HTMLTextAreaElement;
|
|
85
|
+
}) => void;
|
|
73
86
|
}
|
|
74
87
|
export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
|
|
75
88
|
const cssNames = useStyles();
|
|
76
89
|
let css: string[] = [];
|
|
77
90
|
|
|
78
91
|
if (props.fullSize) css.push(cssNames.fullSizeTextArea);
|
|
79
|
-
const textAreaRef =
|
|
92
|
+
const textAreaRef = useRefWithState<HTMLTextAreaElement>(null);
|
|
80
93
|
const recalcHeight = React.useCallback(() => {
|
|
81
|
-
if (textAreaRef.current && props.growNoShrink) {
|
|
82
|
-
if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
|
|
83
|
-
textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
|
|
94
|
+
if (textAreaRef.ref.current && props.growNoShrink) {
|
|
95
|
+
if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
|
|
96
|
+
textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
|
|
84
97
|
}
|
|
85
|
-
},
|
|
98
|
+
}, useEffectOnlyOnMount);
|
|
99
|
+
|
|
100
|
+
useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
|
|
101
|
+
|
|
102
|
+
const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: TextareaOnChangeData) => {
|
|
103
|
+
props.onValueChange?.(e, { value: d.value, elm: textAreaRef.ref.current });
|
|
104
|
+
recalcHeight();
|
|
105
|
+
}, [props.onChange]);
|
|
106
|
+
|
|
107
|
+
const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
|
|
86
108
|
|
|
87
109
|
let style: React.CSSProperties = { height: '100%', ...props.style };
|
|
110
|
+
|
|
88
111
|
return (
|
|
89
|
-
<Textarea ref={textAreaRef} className={mergeClasses(...css)} {...props} style={style}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
112
|
+
<Textarea ref={textAreaRef.set} className={mergeClasses(...css)} {...props} style={style}
|
|
113
|
+
onKeyDown={needOnKeyDown ? (e) => {
|
|
114
|
+
if (props.allowTab && e.key === "Tab") {
|
|
115
|
+
stopEvent(e);
|
|
116
|
+
const textArea = e.target as HTMLTextAreaElement;
|
|
117
|
+
pasteTextAtCursor(textArea, "\t");
|
|
118
|
+
onChange(e, { value: textArea.value });
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
if (e.key === "Enter") props.onOK?.();
|
|
122
|
+
if (e.key === "Escape") props.onCancel?.();
|
|
123
|
+
props.onKeyDown?.(e);
|
|
124
|
+
} : props.onKeyDown}
|
|
125
|
+
onChange={(e, d) => {
|
|
126
|
+
props.onChange?.(e, d);
|
|
127
|
+
onChange(e, d);
|
|
128
|
+
}} />
|
|
93
129
|
);
|
|
94
130
|
}
|
|
95
131
|
|