@babylonjs/shared-ui-components 8.45.1 → 8.45.2
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/fluent/hoc/propertyLines/hexPropertyLine.d.ts +4 -1
- package/fluent/hoc/propertyLines/hexPropertyLine.js +14 -19
- package/fluent/hoc/propertyLines/hexPropertyLine.js.map +1 -1
- package/fluent/primitives/textInput.d.ts +1 -0
- package/fluent/primitives/textInput.js +14 -5
- package/fluent/primitives/textInput.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import type { FunctionComponent } from "react";
|
|
2
2
|
import type { NumberInputPropertyLineProps } from "./inputPropertyLine.js";
|
|
3
|
+
export type HexPropertyLineProps = NumberInputPropertyLineProps & {
|
|
4
|
+
numBits?: 32 | 24 | 16 | 8;
|
|
5
|
+
};
|
|
3
6
|
/**
|
|
4
7
|
* Takes a number representing a Hex value and converts it to a hex string then wraps the TextInput in a PropertyLine
|
|
5
8
|
* @param props - PropertyLineProps
|
|
6
9
|
* @returns property-line wrapped textbox that converts to/from hex number representation
|
|
7
10
|
*/
|
|
8
|
-
export declare const HexPropertyLine: FunctionComponent<
|
|
11
|
+
export declare const HexPropertyLine: FunctionComponent<HexPropertyLineProps>;
|
|
@@ -2,23 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { PropertyLine } from "./propertyLine.js";
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
4
|
import { TextInput } from "../../primitives/textInput.js";
|
|
5
|
-
// The below conversion functions are taken from old HexLineComponent and can likely be simplified
|
|
6
|
-
const ConvertToHexString = (valueString) => {
|
|
7
|
-
while (valueString.length < 10) {
|
|
8
|
-
valueString += "0";
|
|
9
|
-
}
|
|
10
|
-
return valueString;
|
|
11
|
-
};
|
|
12
5
|
const MaskValidatorFn = (valueString) => {
|
|
13
6
|
if (valueString.substring(0, 2) != "0x") {
|
|
14
7
|
if (valueString.substring(0, 1) != "0") {
|
|
15
8
|
valueString = "0x" + valueString;
|
|
16
9
|
}
|
|
17
10
|
else {
|
|
18
|
-
valueString = "0x" + valueString.
|
|
11
|
+
valueString = "0x" + valueString.substring(1);
|
|
19
12
|
}
|
|
20
13
|
}
|
|
21
|
-
const valueSubstr = valueString.
|
|
14
|
+
const valueSubstr = valueString.substring(2);
|
|
22
15
|
if (valueSubstr != "" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {
|
|
23
16
|
return false;
|
|
24
17
|
}
|
|
@@ -27,14 +20,16 @@ const MaskValidatorFn = (valueString) => {
|
|
|
27
20
|
}
|
|
28
21
|
return true;
|
|
29
22
|
};
|
|
30
|
-
const GetHexValFromNumber = (val) => {
|
|
23
|
+
const GetHexValFromNumber = (val, numBits) => {
|
|
24
|
+
const numDigits = (numBits ?? 32) >> 2;
|
|
31
25
|
let valueAsHex = val.toString(16);
|
|
32
26
|
let hex0String = "";
|
|
33
|
-
for (let i = 0; i <
|
|
27
|
+
for (let i = 0; i < numDigits - valueAsHex.length; i++) {
|
|
34
28
|
// padding the '0's
|
|
35
|
-
hex0String
|
|
29
|
+
hex0String = "0" + hex0String;
|
|
36
30
|
}
|
|
37
|
-
|
|
31
|
+
const finalHexValue = hex0String + valueAsHex;
|
|
32
|
+
valueAsHex = "0x" + finalHexValue.substring(finalHexValue.length - numDigits);
|
|
38
33
|
return valueAsHex;
|
|
39
34
|
};
|
|
40
35
|
/**
|
|
@@ -44,15 +39,15 @@ const GetHexValFromNumber = (val) => {
|
|
|
44
39
|
*/
|
|
45
40
|
export const HexPropertyLine = (props) => {
|
|
46
41
|
HexPropertyLine.displayName = "HexPropertyLine";
|
|
47
|
-
const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value));
|
|
42
|
+
const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value, props.numBits));
|
|
48
43
|
const onStrValChange = (val) => {
|
|
44
|
+
const numBits = props.numBits ?? 32;
|
|
49
45
|
setHexVal(val);
|
|
50
|
-
|
|
51
|
-
props.onChange(parseInt(valueStringAsHex));
|
|
46
|
+
props.onChange(parseInt(val) & (2 ** numBits - 1));
|
|
52
47
|
};
|
|
53
48
|
useEffect(() => {
|
|
54
|
-
setHexVal(GetHexValFromNumber(props.value));
|
|
55
|
-
}, [
|
|
56
|
-
return (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange }) }));
|
|
49
|
+
setHexVal(GetHexValFromNumber(props.value, props.numBits));
|
|
50
|
+
}, []);
|
|
51
|
+
return (_jsx(PropertyLine, { ...props, children: _jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange, validateOnlyOnBlur: true }) }));
|
|
57
52
|
};
|
|
58
53
|
//# sourceMappingURL=hexPropertyLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hexPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"hexPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/hexPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropertyLine } from \"./propertyLine\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\nimport type { NumberInputPropertyLineProps } from \"./inputPropertyLine\";\r\nimport { TextInput } from \"../../primitives/textInput\";\r\n\r\nexport type HexPropertyLineProps = NumberInputPropertyLineProps & {\r\n numBits?: 32 | 24 | 16 | 8;\r\n};\r\n\r\nconst MaskValidatorFn = (valueString: string) => {\r\n if (valueString.substring(0, 2) != \"0x\") {\r\n if (valueString.substring(0, 1) != \"0\") {\r\n valueString = \"0x\" + valueString;\r\n } else {\r\n valueString = \"0x\" + valueString.substring(1);\r\n }\r\n }\r\n\r\n const valueSubstr = valueString.substring(2);\r\n if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n return false;\r\n }\r\n\r\n if (valueString.length > 10) {\r\n return false;\r\n }\r\n\r\n return true;\r\n};\r\n\r\nconst GetHexValFromNumber = (val: number, numBits?: number): string => {\r\n const numDigits = (numBits ?? 32) >> 2;\r\n let valueAsHex = val.toString(16);\r\n let hex0String = \"\";\r\n for (let i = 0; i < numDigits - valueAsHex.length; i++) {\r\n // padding the '0's\r\n hex0String = \"0\" + hex0String;\r\n }\r\n const finalHexValue = hex0String + valueAsHex;\r\n valueAsHex = \"0x\" + finalHexValue.substring(finalHexValue.length - numDigits);\r\n return valueAsHex;\r\n};\r\n\r\n/**\r\n * Takes a number representing a Hex value and converts it to a hex string then wraps the TextInput in a PropertyLine\r\n * @param props - PropertyLineProps\r\n * @returns property-line wrapped textbox that converts to/from hex number representation\r\n */\r\nexport const HexPropertyLine: FunctionComponent<HexPropertyLineProps> = (props) => {\r\n HexPropertyLine.displayName = \"HexPropertyLine\";\r\n const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value, props.numBits));\r\n\r\n const onStrValChange = (val: string) => {\r\n const numBits = props.numBits ?? 32;\r\n setHexVal(val);\r\n props.onChange(parseInt(val) & (2 ** numBits - 1));\r\n };\r\n\r\n useEffect(() => {\r\n setHexVal(GetHexValFromNumber(props.value, props.numBits));\r\n }, []);\r\n\r\n return (\r\n <PropertyLine {...props}>\r\n <TextInput {...props} validator={MaskValidatorFn} value={hexVal} onChange={onStrValChange} validateOnlyOnBlur={true} />\r\n </PropertyLine>\r\n );\r\n};\r\n"]}
|
|
@@ -2,5 +2,6 @@ import type { FunctionComponent } from "react";
|
|
|
2
2
|
import type { PrimitiveProps } from "./primitive.js";
|
|
3
3
|
export type TextInputProps = PrimitiveProps<string> & {
|
|
4
4
|
validator?: (value: string) => boolean;
|
|
5
|
+
validateOnlyOnBlur?: boolean;
|
|
5
6
|
};
|
|
6
7
|
export declare const TextInput: FunctionComponent<TextInputProps>;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useContext, useEffect, useRef, useState } from "react";
|
|
3
3
|
import { Input as FluentInput, mergeClasses, useId } from "@fluentui/react-components";
|
|
4
4
|
import { InfoLabel } from "./infoLabel.js";
|
|
5
|
-
import {
|
|
5
|
+
import { HandleKeyDown, HandleOnBlur, useInputStyles } from "./utils.js";
|
|
6
6
|
import { ToolContext } from "../hoc/fluentToolWrapper.js";
|
|
7
7
|
export const TextInput = (props) => {
|
|
8
8
|
TextInput.displayName = "TextInput";
|
|
@@ -30,15 +30,24 @@ export const TextInput = (props) => {
|
|
|
30
30
|
const handleChange = (event, data) => {
|
|
31
31
|
event.stopPropagation();
|
|
32
32
|
setValue(data.value);
|
|
33
|
-
|
|
33
|
+
if (!props.validateOnlyOnBlur) {
|
|
34
|
+
tryCommitValue(data.value);
|
|
35
|
+
}
|
|
34
36
|
};
|
|
35
37
|
const handleKeyUp = (event) => {
|
|
36
38
|
event.stopPropagation();
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
if (!props.validateOnlyOnBlur) {
|
|
40
|
+
tryCommitValue(event.currentTarget.value);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const handleBlur = (event) => {
|
|
44
|
+
HandleOnBlur(event);
|
|
45
|
+
if (props.validateOnlyOnBlur) {
|
|
46
|
+
tryCommitValue(event.currentTarget.value);
|
|
47
|
+
}
|
|
39
48
|
};
|
|
40
49
|
const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
|
|
41
50
|
const id = useId("input-button");
|
|
42
|
-
return (_jsxs("div", { className: classes.container, children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentInput, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur:
|
|
51
|
+
return (_jsxs("div", { className: classes.container, children: [props.infoLabel && _jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), _jsx(FluentInput, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
|
|
43
52
|
};
|
|
44
53
|
//# sourceMappingURL=textInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/textInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, ChangeEvent, FocusEvent } from \"react\";\r\nimport { useContext, useEffect, useRef, useState } from \"react\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport { Input as FluentInput, mergeClasses, useId } from \"@fluentui/react-components\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { InfoLabel } from \"./infoLabel\";\r\nimport { HandleKeyDown, HandleOnBlur, useInputStyles } from \"./utils\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type TextInputProps = PrimitiveProps<string> & {\r\n validator?: (value: string) => boolean;\r\n validateOnlyOnBlur?: boolean;\r\n};\r\n\r\nexport const TextInput: FunctionComponent<TextInputProps> = (props) => {\r\n TextInput.displayName = \"TextInput\";\r\n const classes = useInputStyles();\r\n const [value, setValue] = useState(props.value);\r\n const lastCommittedValue = useRef(props.value);\r\n const { size } = useContext(ToolContext);\r\n useEffect(() => {\r\n if (props.value !== lastCommittedValue.current) {\r\n setValue(props.value); // Update local state when props.value changes\r\n lastCommittedValue.current = props.value;\r\n }\r\n }, [props.value]);\r\n\r\n const validateValue = (val: string): boolean => {\r\n const failsValidator = props.validator && !props.validator(val);\r\n return !failsValidator;\r\n };\r\n\r\n const tryCommitValue = (currVal: string) => {\r\n // Only commit if valid and different from last committed value\r\n if (validateValue(currVal) && currVal !== lastCommittedValue.current) {\r\n lastCommittedValue.current = currVal;\r\n props.onChange(currVal);\r\n }\r\n };\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {\r\n event.stopPropagation();\r\n setValue(data.value);\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(data.value);\r\n }\r\n };\r\n\r\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\r\n event.stopPropagation();\r\n if (!props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\r\n HandleOnBlur(event);\r\n if (props.validateOnlyOnBlur) {\r\n tryCommitValue(event.currentTarget.value);\r\n }\r\n };\r\n\r\n const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : \"\", props.className);\r\n\r\n const id = useId(\"input-button\");\r\n return (\r\n <div className={classes.container}>\r\n {props.infoLabel && <InfoLabel {...props.infoLabel} htmlFor={id} />}\r\n <FluentInput\r\n {...props}\r\n input={{ className: classes.inputSlot }}\r\n id={id}\r\n size={size}\r\n value={value}\r\n onChange={handleChange}\r\n onKeyUp={handleKeyUp}\r\n onKeyDown={HandleKeyDown}\r\n onBlur={handleBlur}\r\n className={mergedClassName}\r\n />\r\n </div>\r\n );\r\n};\r\n"]}
|