@draftbit/core 43.4.5-e035fd.1 → 43.4.6-f4bf57.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/lib/commonjs/components/Elevation.js +3 -14
- package/lib/commonjs/components/Elevation.js.map +1 -1
- package/lib/commonjs/components/FieldSearchBarFull.js.map +1 -1
- package/lib/commonjs/components/NumberInput.js +39 -28
- package/lib/commonjs/components/NumberInput.js.map +1 -1
- package/lib/commonjs/components/Portal/PortalManager.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButton.js +9 -8
- package/lib/commonjs/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +13 -12
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +9 -6
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/index.js +0 -8
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/CheckboxRow.js +1 -1
- package/lib/commonjs/mappings/CheckboxRow.js.map +1 -1
- package/lib/commonjs/mappings/RowBodyIcon.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js.map +1 -1
- package/lib/commonjs/mappings/TextInput.js +7 -2
- package/lib/commonjs/mappings/TextInput.js.map +1 -1
- package/lib/commonjs/utilities.js +13 -0
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/Elevation.js +15 -4
- package/lib/module/components/Elevation.js.map +1 -1
- package/lib/module/components/NumberInput.js +36 -25
- package/lib/module/components/NumberInput.js.map +1 -1
- package/lib/module/components/Picker/PickerComponent.android.js +7 -10
- package/lib/module/components/Picker/PickerComponent.android.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButton.js +8 -8
- package/lib/module/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonGroup.js +12 -12
- package/lib/module/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +10 -7
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/CheckboxRow.js +1 -1
- package/lib/module/mappings/CheckboxRow.js.map +1 -1
- package/lib/module/mappings/LinearGradient.js.map +1 -1
- package/lib/module/mappings/TextInput.js +8 -3
- package/lib/module/mappings/TextInput.js.map +1 -1
- package/lib/module/utilities.js +10 -0
- package/lib/module/utilities.js.map +1 -1
- package/lib/typescript/src/components/NumberInput.d.ts +3 -3
- package/lib/typescript/src/components/RadioButton/RadioButton.d.ts +2 -2
- package/lib/typescript/src/components/RadioButton/RadioButtonGroup.d.ts +2 -2
- package/lib/typescript/src/components/RadioButton/RadioButtonRow.d.ts +1 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/mappings/TextInput.d.ts +38 -38
- package/lib/typescript/src/utilities.d.ts +1 -0
- package/package.json +2 -3
- package/src/components/NumberInput.js +32 -21
- package/src/components/NumberInput.tsx +46 -28
- package/src/components/RadioButton/RadioButton.js +7 -6
- package/src/components/RadioButton/RadioButton.tsx +11 -12
- package/src/components/RadioButton/RadioButtonGroup.js +10 -10
- package/src/components/RadioButton/RadioButtonGroup.tsx +18 -17
- package/src/components/RadioButton/RadioButtonRow.js +8 -5
- package/src/components/RadioButton/RadioButtonRow.tsx +12 -10
- package/src/index.js +0 -1
- package/src/index.tsx +0 -1
- package/src/mappings/CheckboxRow.js +1 -1
- package/src/mappings/CheckboxRow.ts +1 -1
- package/src/mappings/TextInput.js +7 -2
- package/src/mappings/TextInput.ts +7 -1
- package/src/utilities.js +12 -0
- package/src/utilities.ts +11 -0
- package/lib/commonjs/components/Markdown.js +0 -30
- package/lib/commonjs/components/Markdown.js.map +0 -1
- package/lib/commonjs/mappings/Markdown.js +0 -24
- package/lib/commonjs/mappings/Markdown.js.map +0 -1
- package/lib/module/components/Markdown.js +0 -13
- package/lib/module/components/Markdown.js.map +0 -1
- package/lib/module/mappings/Markdown.js +0 -15
- package/lib/module/mappings/Markdown.js.map +0 -1
- package/lib/typescript/src/components/Markdown.d.ts +0 -12
- package/lib/typescript/src/mappings/Markdown.d.ts +0 -9
- package/src/components/Markdown.js +0 -7
- package/src/components/Markdown.tsx +0 -14
- package/src/mappings/Markdown.js +0 -14
- package/src/mappings/Markdown.ts +0 -15
|
@@ -16,3 +16,4 @@ export declare function extractStyles(style: StyleProp<any>): {
|
|
|
16
16
|
* `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
|
|
17
17
|
*/
|
|
18
18
|
export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
|
|
19
|
+
export declare function getValueForRadioButton(value: string | number): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.6-f4bf57.2+f4bf57c8",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -53,7 +53,6 @@
|
|
|
53
53
|
"lodash.isnumber": "^3.0.3",
|
|
54
54
|
"lodash.omit": "^4.5.0",
|
|
55
55
|
"lodash.tonumber": "^4.0.3",
|
|
56
|
-
"react-native-markdown-display": "^7.0.0-alpha.2",
|
|
57
56
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
58
57
|
"react-native-typography": "^1.4.1",
|
|
59
58
|
"react-native-web-swiper": "^2.2.1"
|
|
@@ -81,5 +80,5 @@
|
|
|
81
80
|
]
|
|
82
81
|
]
|
|
83
82
|
},
|
|
84
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "f4bf57c8d33874f42cf4357449cc6c4520e5e9c2"
|
|
85
84
|
}
|
|
@@ -1,28 +1,39 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
import { isString, isNumber } from "lodash";
|
|
4
|
+
const NumberInput = ({ onChangeText, value = "", defaultValue = "", ...props }) => {
|
|
5
|
+
const [isDecimal, setIsDecimal] = useState(value && !Number.isInteger(value));
|
|
6
|
+
const formatValueToString = useCallback((valueToStringify) => {
|
|
7
|
+
if (valueToStringify != null) {
|
|
8
|
+
if (isString(valueToStringify) &&
|
|
9
|
+
/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToStringify)) {
|
|
10
|
+
console.log("is string", value);
|
|
11
|
+
return valueToStringify;
|
|
12
|
+
}
|
|
13
|
+
else if (isNumber(valueToStringify)) {
|
|
14
|
+
return valueToStringify.toString();
|
|
15
|
+
}
|
|
8
16
|
}
|
|
17
|
+
return "";
|
|
9
18
|
}, [value]);
|
|
10
|
-
|
|
11
|
-
if (
|
|
12
|
-
|
|
13
|
-
const number = isNaN(parsedNumber) ? 0 : parsedNumber;
|
|
14
|
-
setIsDecimal(newValue.includes("."));
|
|
15
|
-
onChangeText(number);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (value) {
|
|
21
|
+
setIsDecimal(formatValueToString(value).includes("."));
|
|
16
22
|
}
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
strValue = `${strValue}.`;
|
|
23
|
+
}, [value, formatValueToString]);
|
|
24
|
+
const makeFinalValue = (valueToMakeFinal) => {
|
|
25
|
+
let stringValue = formatValueToString(valueToMakeFinal);
|
|
26
|
+
if (isDecimal && !stringValue.includes(".")) {
|
|
27
|
+
stringValue = `${stringValue}.`;
|
|
23
28
|
}
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
return stringValue;
|
|
30
|
+
};
|
|
31
|
+
const handleChangeText = (newValue) => {
|
|
32
|
+
const parsedNumber = parseFloat(newValue);
|
|
33
|
+
const number = isNaN(parsedNumber) ? 0 : parsedNumber;
|
|
34
|
+
setIsDecimal(newValue.includes("."));
|
|
35
|
+
onChangeText?.(number);
|
|
36
|
+
};
|
|
37
|
+
return (React.createElement(TextInput, { keyboardType: "numeric", ...props, value: makeFinalValue(value), defaultValue: makeFinalValue(defaultValue), onChangeText: handleChangeText }));
|
|
26
38
|
};
|
|
27
39
|
export default NumberInput;
|
|
28
|
-
// comment to try to fix sourcemap issue
|
|
@@ -1,55 +1,73 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
2
2
|
import { TextInput } from "react-native";
|
|
3
|
+
import { isString, isNumber } from "lodash";
|
|
3
4
|
|
|
4
5
|
interface Props {
|
|
5
|
-
value?: number;
|
|
6
|
-
defaultValue?: number;
|
|
7
|
-
onChangeText
|
|
6
|
+
value?: number | string;
|
|
7
|
+
defaultValue?: number | string;
|
|
8
|
+
onChangeText?: (value?: number) => void;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
const NumberInput: React.FC<Props> = ({
|
|
11
12
|
onChangeText,
|
|
12
|
-
value,
|
|
13
|
-
defaultValue,
|
|
13
|
+
value = "",
|
|
14
|
+
defaultValue = "",
|
|
14
15
|
...props
|
|
15
16
|
}) => {
|
|
16
|
-
const [isDecimal, setIsDecimal] =
|
|
17
|
-
|
|
17
|
+
const [isDecimal, setIsDecimal] = useState(value && !Number.isInteger(value));
|
|
18
|
+
|
|
19
|
+
const formatValueToString = useCallback(
|
|
20
|
+
(valueToStringify?: number | string) => {
|
|
21
|
+
if (valueToStringify != null) {
|
|
22
|
+
if (
|
|
23
|
+
isString(valueToStringify) &&
|
|
24
|
+
/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToStringify)
|
|
25
|
+
) {
|
|
26
|
+
console.log("is string", value);
|
|
27
|
+
return valueToStringify;
|
|
28
|
+
} else if (isNumber(valueToStringify)) {
|
|
29
|
+
return valueToStringify.toString();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return "";
|
|
34
|
+
},
|
|
35
|
+
[value]
|
|
18
36
|
);
|
|
19
|
-
|
|
37
|
+
|
|
38
|
+
useEffect(() => {
|
|
20
39
|
if (value) {
|
|
21
|
-
setIsDecimal(value
|
|
40
|
+
setIsDecimal(formatValueToString(value).includes("."));
|
|
22
41
|
}
|
|
23
|
-
}, [value]);
|
|
42
|
+
}, [value, formatValueToString]);
|
|
24
43
|
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
onChangeText(number);
|
|
44
|
+
const makeFinalValue = (valueToMakeFinal?: number | string) => {
|
|
45
|
+
let stringValue = formatValueToString(valueToMakeFinal);
|
|
46
|
+
|
|
47
|
+
if (isDecimal && !stringValue.includes(".")) {
|
|
48
|
+
stringValue = `${stringValue}.`;
|
|
31
49
|
}
|
|
50
|
+
|
|
51
|
+
return stringValue;
|
|
32
52
|
};
|
|
33
53
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
54
|
+
const handleChangeText = (newValue: string) => {
|
|
55
|
+
const parsedNumber = parseFloat(newValue);
|
|
56
|
+
const number = isNaN(parsedNumber) ? 0 : parsedNumber;
|
|
57
|
+
|
|
58
|
+
setIsDecimal(newValue.includes("."));
|
|
59
|
+
onChangeText?.(number);
|
|
60
|
+
};
|
|
41
61
|
|
|
42
62
|
return (
|
|
43
63
|
<TextInput
|
|
44
64
|
keyboardType="numeric"
|
|
45
65
|
{...props}
|
|
46
|
-
value={
|
|
47
|
-
defaultValue={defaultValue
|
|
66
|
+
value={makeFinalValue(value)}
|
|
67
|
+
defaultValue={makeFinalValue(defaultValue)}
|
|
48
68
|
onChangeText={handleChangeText}
|
|
49
69
|
/>
|
|
50
70
|
);
|
|
51
71
|
};
|
|
52
72
|
|
|
53
73
|
export default NumberInput;
|
|
54
|
-
|
|
55
|
-
// comment to try to fix sourcemap issue
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import Config from "../Config";
|
|
3
3
|
import IconButton from "../IconButton";
|
|
4
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
4
5
|
import { useRadioButtonGroupContext } from "./context";
|
|
5
|
-
const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress
|
|
6
|
+
const RadioButton = ({ Icon, disabled = false, color, value = "", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
|
|
6
7
|
const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
|
|
8
|
+
const realValue = getValueForRadioButton(value);
|
|
9
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
10
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
7
11
|
const handlePress = () => {
|
|
8
|
-
onPress
|
|
9
|
-
|
|
10
|
-
onValueChange(value);
|
|
11
|
-
}
|
|
12
|
+
onPress?.(realValue);
|
|
13
|
+
onValueChange?.(realValue);
|
|
12
14
|
};
|
|
13
|
-
const isSelected = selected || (contextValue != null && contextValue === value);
|
|
14
15
|
return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
|
|
15
16
|
};
|
|
16
17
|
export default RadioButton;
|
|
@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
|
|
|
3
3
|
|
|
4
4
|
import Config from "../Config";
|
|
5
5
|
import IconButton from "../IconButton";
|
|
6
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
6
7
|
import { useRadioButtonGroupContext } from "./context";
|
|
7
8
|
|
|
8
9
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
@@ -11,9 +12,9 @@ export type RadioButtonProps = {
|
|
|
11
12
|
selected?: boolean;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
color?: string;
|
|
14
|
-
value?: string;
|
|
15
|
+
value?: string | number;
|
|
15
16
|
unselectedColor?: string;
|
|
16
|
-
onPress?: () => void;
|
|
17
|
+
onPress?: (value?: string) => void;
|
|
17
18
|
style?: StyleProp<ViewStyle>;
|
|
18
19
|
size?: number;
|
|
19
20
|
selectedIcon?: string;
|
|
@@ -24,10 +25,10 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
|
24
25
|
Icon,
|
|
25
26
|
disabled = false,
|
|
26
27
|
color,
|
|
27
|
-
value,
|
|
28
|
+
value = "",
|
|
28
29
|
selected,
|
|
29
30
|
unselectedColor,
|
|
30
|
-
onPress
|
|
31
|
+
onPress,
|
|
31
32
|
size = Config.radioButtonSize,
|
|
32
33
|
selectedIcon = "MaterialIcons/radio-button-checked",
|
|
33
34
|
unselectedIcon = "MaterialIcons/radio-button-unchecked",
|
|
@@ -36,17 +37,15 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
|
36
37
|
}) => {
|
|
37
38
|
const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
|
|
38
39
|
|
|
39
|
-
const
|
|
40
|
-
|
|
40
|
+
const realValue = getValueForRadioButton(value);
|
|
41
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
42
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
41
43
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
const handlePress = () => {
|
|
45
|
+
onPress?.(realValue);
|
|
46
|
+
onValueChange?.(realValue);
|
|
45
47
|
};
|
|
46
48
|
|
|
47
|
-
const isSelected =
|
|
48
|
-
selected || (contextValue != null && contextValue === value);
|
|
49
|
-
|
|
50
49
|
return (
|
|
51
50
|
<IconButton
|
|
52
51
|
Icon={Icon}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
3
4
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
4
5
|
const { Provider } = radioButtonGroupContext;
|
|
5
|
-
const RadioButtonGroup = ({ direction = Direction.Vertical, value
|
|
6
|
-
const [internalValue, setInternalValue] = React.useState(
|
|
6
|
+
const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue = "", style, children, ...rest }) => {
|
|
7
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
7
8
|
React.useEffect(() => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
9
|
+
const realValue = getValueForRadioButton(value);
|
|
10
|
+
setInternalValue(realValue);
|
|
11
11
|
}, [value]);
|
|
12
12
|
React.useEffect(() => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
13
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
14
|
+
setInternalValue(realDefaultValue);
|
|
16
15
|
}, [defaultValue]);
|
|
17
16
|
const handleValueChange = (newValue) => {
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
const realNewValue = getValueForRadioButton(newValue);
|
|
18
|
+
setInternalValue(realNewValue);
|
|
19
|
+
onValueChange?.(realNewValue);
|
|
20
20
|
};
|
|
21
21
|
const _containerStyle = [
|
|
22
22
|
{
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { View, StyleProp, ViewStyle } from "react-native";
|
|
3
3
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
4
|
+
import { getValueForRadioButton } from "../../utilities";
|
|
4
5
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
5
6
|
export interface RadioButtonGroupProps {
|
|
6
7
|
direction?: Direction;
|
|
7
8
|
style?: StyleProp<ViewStyle>;
|
|
8
|
-
value
|
|
9
|
+
value: string;
|
|
9
10
|
onValueChange?: (value: string) => void;
|
|
10
|
-
defaultValue?: string;
|
|
11
|
+
defaultValue?: string | number;
|
|
11
12
|
theme: Theme;
|
|
12
13
|
children: React.ReactNode;
|
|
13
14
|
}
|
|
@@ -16,32 +17,32 @@ const { Provider } = radioButtonGroupContext;
|
|
|
16
17
|
|
|
17
18
|
const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
|
|
18
19
|
direction = Direction.Vertical,
|
|
19
|
-
value,
|
|
20
|
-
onValueChange
|
|
21
|
-
defaultValue,
|
|
20
|
+
value = "",
|
|
21
|
+
onValueChange,
|
|
22
|
+
defaultValue = "",
|
|
22
23
|
style,
|
|
23
24
|
children,
|
|
24
25
|
...rest
|
|
25
26
|
}) => {
|
|
26
|
-
const [internalValue, setInternalValue] = React.useState<string
|
|
27
|
-
value || defaultValue
|
|
28
|
-
);
|
|
27
|
+
const [internalValue, setInternalValue] = React.useState<string>("");
|
|
29
28
|
|
|
30
29
|
React.useEffect(() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
const realValue = getValueForRadioButton(value);
|
|
31
|
+
|
|
32
|
+
setInternalValue(realValue);
|
|
34
33
|
}, [value]);
|
|
35
34
|
|
|
36
35
|
React.useEffect(() => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
const realDefaultValue = getValueForRadioButton(defaultValue);
|
|
37
|
+
|
|
38
|
+
setInternalValue(realDefaultValue);
|
|
40
39
|
}, [defaultValue]);
|
|
41
40
|
|
|
42
|
-
const handleValueChange = (newValue: string) => {
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
const handleValueChange = (newValue: string | number) => {
|
|
42
|
+
const realNewValue = getValueForRadioButton(newValue);
|
|
43
|
+
|
|
44
|
+
setInternalValue(realNewValue);
|
|
45
|
+
onValueChange?.(realNewValue);
|
|
45
46
|
};
|
|
46
47
|
|
|
47
48
|
const _containerStyle: StyleProp<ViewStyle> = [
|
|
@@ -5,7 +5,7 @@ import Text from "../Text";
|
|
|
5
5
|
import { useRadioButtonGroupContext } from "./context";
|
|
6
6
|
import { Direction as GroupDirection } from "./context";
|
|
7
7
|
import Touchable from "../Touchable";
|
|
8
|
-
import { extractStyles } from "../../utilities";
|
|
8
|
+
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
9
9
|
export var Direction;
|
|
10
10
|
(function (Direction) {
|
|
11
11
|
Direction["Row"] = "row";
|
|
@@ -30,11 +30,14 @@ const renderLabel = (value, labelStyle, textStyle) => {
|
|
|
30
30
|
return React.createElement(React.Fragment, null, value);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress
|
|
33
|
+
const RadioButtonRow = ({ Icon, label, value = "", color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
|
|
34
34
|
const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
|
|
35
|
+
const realValue = getValueForRadioButton(value);
|
|
36
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
37
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
35
38
|
const handlePress = () => {
|
|
36
|
-
onPress(
|
|
37
|
-
onValueChange
|
|
39
|
+
onPress?.(realValue);
|
|
40
|
+
onValueChange?.(realValue);
|
|
38
41
|
};
|
|
39
42
|
const { textStyles, viewStyles } = extractStyles(style);
|
|
40
43
|
return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
|
|
@@ -49,7 +52,7 @@ const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress =
|
|
|
49
52
|
flex: 1,
|
|
50
53
|
alignItems: getRadioButtonAlignment(parentDirection, direction),
|
|
51
54
|
} },
|
|
52
|
-
React.createElement(RadioButton, { Icon: Icon, selected:
|
|
55
|
+
React.createElement(RadioButton, { Icon: Icon, selected: isSelected, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
|
|
53
56
|
};
|
|
54
57
|
const styles = StyleSheet.create({
|
|
55
58
|
mainParent: {
|
|
@@ -13,7 +13,7 @@ import { useRadioButtonGroupContext } from "./context";
|
|
|
13
13
|
import type { IconSlot } from "../../interfaces/Icon";
|
|
14
14
|
import { Direction as GroupDirection } from "./context";
|
|
15
15
|
import Touchable from "../Touchable";
|
|
16
|
-
import { extractStyles } from "../../utilities";
|
|
16
|
+
import { extractStyles, getValueForRadioButton } from "../../utilities";
|
|
17
17
|
|
|
18
18
|
export enum Direction {
|
|
19
19
|
Row = "row",
|
|
@@ -22,7 +22,7 @@ export enum Direction {
|
|
|
22
22
|
|
|
23
23
|
export interface RadioButtonRowProps extends Omit<RadioButtonProps, "onPress"> {
|
|
24
24
|
label: string | React.ReactNode;
|
|
25
|
-
value: string; // A string that this radio button row represents when selected
|
|
25
|
+
value: string | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
|
|
26
26
|
color?: string;
|
|
27
27
|
unselectedColor?: string;
|
|
28
28
|
labelContainerStyle: StyleProp<ViewStyle>;
|
|
@@ -60,10 +60,10 @@ const renderLabel = (
|
|
|
60
60
|
const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
61
61
|
Icon,
|
|
62
62
|
label,
|
|
63
|
-
value,
|
|
63
|
+
value = "",
|
|
64
64
|
color,
|
|
65
65
|
unselectedColor,
|
|
66
|
-
onPress
|
|
66
|
+
onPress,
|
|
67
67
|
labelContainerStyle,
|
|
68
68
|
labelStyle,
|
|
69
69
|
radioButtonStyle,
|
|
@@ -79,9 +79,13 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
|
79
79
|
direction: parentDirection,
|
|
80
80
|
} = useRadioButtonGroupContext();
|
|
81
81
|
|
|
82
|
+
const realValue = getValueForRadioButton(value);
|
|
83
|
+
const realContextValue = getValueForRadioButton(contextValue);
|
|
84
|
+
const isSelected = selected ?? realContextValue === realValue;
|
|
85
|
+
|
|
82
86
|
const handlePress = () => {
|
|
83
|
-
onPress(
|
|
84
|
-
onValueChange
|
|
87
|
+
onPress?.(realValue);
|
|
88
|
+
onValueChange?.(realValue);
|
|
85
89
|
};
|
|
86
90
|
|
|
87
91
|
const { textStyles, viewStyles } = extractStyles(style);
|
|
@@ -112,12 +116,10 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
|
|
|
112
116
|
>
|
|
113
117
|
<RadioButton
|
|
114
118
|
Icon={Icon}
|
|
115
|
-
selected={
|
|
116
|
-
|
|
117
|
-
}
|
|
119
|
+
selected={isSelected}
|
|
120
|
+
value={realValue}
|
|
118
121
|
color={color}
|
|
119
122
|
unselectedColor={unselectedColor}
|
|
120
|
-
onPress={handlePress}
|
|
121
123
|
style={radioButtonStyle}
|
|
122
124
|
/>
|
|
123
125
|
</View>
|
package/src/index.js
CHANGED
|
@@ -48,4 +48,3 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
48
48
|
export { default as Slider } from "./components/Slider";
|
|
49
49
|
export { default as Stepper } from "./components/Stepper";
|
|
50
50
|
export { useAuthState } from "./components/useAuthState";
|
|
51
|
-
export { default as Markdown } from "./components/Markdown";
|
package/src/index.tsx
CHANGED
|
@@ -68,4 +68,3 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
68
68
|
export { default as Slider } from "./components/Slider";
|
|
69
69
|
export { default as Stepper } from "./components/Stepper";
|
|
70
70
|
export { useAuthState } from "./components/useAuthState";
|
|
71
|
-
export { default as Markdown } from "./components/Markdown";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, NUMBER_INPUT_PROPS, Triggers, } from "@draftbit/types";
|
|
1
|
+
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, NUMBER_INPUT_PROPS, Triggers, createFieldNameProp, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA_PROPS = {
|
|
3
3
|
style: {
|
|
4
4
|
group: GROUPS.basic,
|
|
@@ -196,8 +196,13 @@ export const SEED_DATA = [
|
|
|
196
196
|
},
|
|
197
197
|
triggers: [Triggers.OnChangeText],
|
|
198
198
|
props: {
|
|
199
|
-
...NUMBER_INPUT_PROPS,
|
|
200
199
|
...SEED_DATA_PROPS,
|
|
200
|
+
...NUMBER_INPUT_PROPS,
|
|
201
|
+
fieldName: createFieldNameProp({
|
|
202
|
+
defaultValue: "numberInputValue",
|
|
203
|
+
valuePropName: "value",
|
|
204
|
+
handlerPropName: "onChangeText",
|
|
205
|
+
}),
|
|
201
206
|
},
|
|
202
207
|
},
|
|
203
208
|
];
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
TEXT_INPUT_PROPS,
|
|
8
8
|
NUMBER_INPUT_PROPS,
|
|
9
9
|
Triggers,
|
|
10
|
+
createFieldNameProp,
|
|
10
11
|
} from "@draftbit/types";
|
|
11
12
|
|
|
12
13
|
export const SEED_DATA_PROPS = {
|
|
@@ -219,8 +220,13 @@ export const SEED_DATA = [
|
|
|
219
220
|
},
|
|
220
221
|
triggers: [Triggers.OnChangeText],
|
|
221
222
|
props: {
|
|
222
|
-
...NUMBER_INPUT_PROPS,
|
|
223
223
|
...SEED_DATA_PROPS,
|
|
224
|
+
...NUMBER_INPUT_PROPS,
|
|
225
|
+
fieldName: createFieldNameProp({
|
|
226
|
+
defaultValue: "numberInputValue",
|
|
227
|
+
valuePropName: "value",
|
|
228
|
+
handlerPropName: "onChangeText",
|
|
229
|
+
}),
|
|
224
230
|
},
|
|
225
231
|
},
|
|
226
232
|
];
|
package/src/utilities.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
+
import { isString, isNumber } from "lodash";
|
|
2
3
|
export function extractStyles(style) {
|
|
3
4
|
const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
|
|
4
5
|
const textStyles = {
|
|
@@ -40,3 +41,14 @@ export function applyStyles(baseStyles, stylesToApply) {
|
|
|
40
41
|
}
|
|
41
42
|
return flattenedStyles;
|
|
42
43
|
}
|
|
44
|
+
export function getValueForRadioButton(value) {
|
|
45
|
+
if (isString(value)) {
|
|
46
|
+
return value;
|
|
47
|
+
}
|
|
48
|
+
else if (isNumber(value)) {
|
|
49
|
+
return String(value);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
throw new Error(`Invalid value: ${value}`);
|
|
53
|
+
}
|
|
54
|
+
}
|
package/src/utilities.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StyleSheet, StyleProp, TextStyle } from "react-native";
|
|
2
|
+
import { isString, isNumber } from "lodash";
|
|
2
3
|
|
|
3
4
|
export function extractStyles(style: StyleProp<any>) {
|
|
4
5
|
const {
|
|
@@ -63,3 +64,13 @@ export function applyStyles(
|
|
|
63
64
|
|
|
64
65
|
return flattenedStyles;
|
|
65
66
|
}
|
|
67
|
+
|
|
68
|
+
export function getValueForRadioButton(value: string | number) {
|
|
69
|
+
if (isString(value)) {
|
|
70
|
+
return value;
|
|
71
|
+
} else if (isNumber(value)) {
|
|
72
|
+
return String(value);
|
|
73
|
+
} else {
|
|
74
|
+
throw new Error(`Invalid value: ${value}`);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var React = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactNativeMarkdownDisplay = _interopRequireDefault(require("react-native-markdown-display"));
|
|
11
|
-
|
|
12
|
-
var _theming = require("../theming");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
-
|
|
18
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
-
|
|
20
|
-
const MarkdownComponent = _ref => {
|
|
21
|
-
let {
|
|
22
|
-
content
|
|
23
|
-
} = _ref;
|
|
24
|
-
return /*#__PURE__*/React.createElement(_reactNativeMarkdownDisplay.default, null, content);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var _default = (0, _theming.withTheme)(MarkdownComponent);
|
|
28
|
-
|
|
29
|
-
exports.default = _default;
|
|
30
|
-
//# sourceMappingURL=Markdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["Markdown.tsx"],"names":["MarkdownComponent","content"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAMA,MAAMA,iBAAkC,GAAG,QAAiB;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC1D,sBAAO,oBAAC,mCAAD,QAAWA,OAAX,CAAP;AACD,CAFD;;eAIe,wBAAUD,iBAAV,C","sourcesContent":["import * as React from \"react\";\nimport Markdown from \"react-native-markdown-display\";\n\nimport { withTheme } from \"../theming\";\n\ntype Props = {\n content?: string;\n};\n\nconst MarkdownComponent: React.FC<Props> = ({ content }) => {\n return <Markdown>{content}</Markdown>;\n};\n\nexport default withTheme(MarkdownComponent);\n"]}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SEED_DATA = void 0;
|
|
7
|
-
|
|
8
|
-
var _types = require("@draftbit/types");
|
|
9
|
-
|
|
10
|
-
const SEED_DATA = {
|
|
11
|
-
name: "Markdown",
|
|
12
|
-
tag: "MarkdownComponent",
|
|
13
|
-
description: "A markdown component",
|
|
14
|
-
category: _types.COMPONENT_TYPES.basic,
|
|
15
|
-
props: {
|
|
16
|
-
content: (0, _types.createTextProp)({
|
|
17
|
-
label: "Markdown Text",
|
|
18
|
-
description: "Markdown Text",
|
|
19
|
-
defaultValue: null
|
|
20
|
-
})
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
exports.SEED_DATA = SEED_DATA;
|
|
24
|
-
//# sourceMappingURL=Markdown.js.map
|