sapo-components-ui-rn 1.0.50 → 1.0.51
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/components/Button/index.d.ts +2 -2
- package/dist/components/ButtonIcon/index.d.ts +1 -1
- package/dist/components/View/index.d.ts +7 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +53 -76
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +53 -77
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button/index.tsx +3 -3
- package/src/components/ButtonIcon/index.tsx +6 -2
- package/src/components/SearchInput/index.tsx +1 -1
- package/src/components/View/index.tsx +30 -0
- package/src/index.ts +0 -1
- package/src/index.tsx +0 -1
- package/src/styles/themes/tokens.tsx +1 -1
|
@@ -11,7 +11,6 @@ export interface ButtonProps extends TouchableOpacityProps {
|
|
|
11
11
|
isLoading?: boolean;
|
|
12
12
|
left?: React.ReactNode;
|
|
13
13
|
right?: React.ReactNode;
|
|
14
|
-
small?: boolean;
|
|
15
14
|
margin?: Number;
|
|
16
15
|
textProps?: IText;
|
|
17
16
|
textColor?: string;
|
|
@@ -24,6 +23,7 @@ export interface ButtonProps extends TouchableOpacityProps {
|
|
|
24
23
|
onPress?: (res?: any) => void;
|
|
25
24
|
full?: boolean;
|
|
26
25
|
theme?: ThemeProp;
|
|
26
|
+
buttonSize?: "normal" | "small";
|
|
27
27
|
}
|
|
28
|
-
declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right,
|
|
28
|
+
declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, bold, size, medium, mode, transparent, full, theme: themeOverrides, buttonSize, ...props }: ButtonProps) => React.JSX.Element>;
|
|
29
29
|
export default _default;
|
|
@@ -6,13 +6,13 @@ export interface ButtonIconProps {
|
|
|
6
6
|
onPress?: (val?: any) => void;
|
|
7
7
|
style?: StyleProp<ViewStyle>;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
|
-
size?: number;
|
|
10
9
|
hiddenBackground?: boolean;
|
|
11
10
|
props?: object;
|
|
12
11
|
border?: boolean;
|
|
13
12
|
circle?: boolean;
|
|
14
13
|
backgroundColor?: string;
|
|
15
14
|
borderColor?: string;
|
|
15
|
+
mode?: "normal" | "small";
|
|
16
16
|
}
|
|
17
17
|
declare const _default: React.MemoExoticComponent<React.ComponentType<ButtonIconProps>>;
|
|
18
18
|
export default _default;
|
|
@@ -33,9 +33,15 @@ interface ViewProps {
|
|
|
33
33
|
wrap?: boolean;
|
|
34
34
|
borderBottomWidth?: number;
|
|
35
35
|
borderBottomColor?: string;
|
|
36
|
+
borderTopWidth?: number;
|
|
37
|
+
borderTopColor?: string;
|
|
38
|
+
borderLeftWidth?: number;
|
|
39
|
+
borderLeftColor?: string;
|
|
40
|
+
borderRightWidth?: number;
|
|
41
|
+
borderRightColor?: string;
|
|
36
42
|
borderRadius?: number;
|
|
37
43
|
borderWidth?: number;
|
|
38
44
|
borderColor?: string;
|
|
39
45
|
}
|
|
40
|
-
declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, }: ViewProps) => React.JSX.Element>;
|
|
46
|
+
declare const _default: React.MemoExoticComponent<({ row, full, justifyCenter, justifyBetween, alignCenter, center, color, backgroundColor, width, height, padding, paddingHorizontal, paddingVertical, marginHorizontal, marginVertical, paddingLeft, paddingRight, paddingTop, alignEnd, wrap, borderBottomWidth, borderBottomColor, borderRadius, borderWidth, borderColor, style, onPress, activeOpacity, children, disabled, paddingBottom, marginTop, marginBottom, marginLeft, marginRight, borderTopWidth, borderTopColor, borderLeftWidth, borderLeftColor, borderRightWidth, borderRightColor, }: ViewProps) => React.JSX.Element>;
|
|
41
47
|
export default _default;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export { default as ProgressBar } from "./components/ProgressBar";
|
|
|
11
11
|
export { default as Switch } from "./components/Switch/Switch";
|
|
12
12
|
export { default as TextInput } from "./components/TextInput/TextInput";
|
|
13
13
|
export { default as Button } from "./components/Button";
|
|
14
|
-
export { default as ButtonIcon } from "./components/ButtonIcon";
|
|
15
14
|
export { default as FloatingButton } from "./components/FloatingButton";
|
|
16
15
|
export { default as Text } from "./components/Text";
|
|
17
16
|
export { default as Toast } from "./components/Toast";
|
package/dist/index.esm.js
CHANGED
|
@@ -560,7 +560,7 @@ var CONSTANTS = {
|
|
|
560
560
|
DEVICE_WIDTH: Dimensions.get("window").width,
|
|
561
561
|
HEADER_HEIGHT: 50,
|
|
562
562
|
BUTTON_HEIGHT: 48,
|
|
563
|
-
BUTTON_HEIGHT_SMALL:
|
|
563
|
+
BUTTON_HEIGHT_SMALL: 36,
|
|
564
564
|
RADIO_BUTTON_HEIGHT: 20,
|
|
565
565
|
BUTTON_ICON: 36,
|
|
566
566
|
SPACE_0: 0,
|
|
@@ -1707,7 +1707,7 @@ var ActivityIndicator = function (_a) {
|
|
|
1707
1707
|
height: size / 2,
|
|
1708
1708
|
overflow: "hidden",
|
|
1709
1709
|
};
|
|
1710
|
-
return (React$3.createElement(View$1, __assign({ style: [styles$
|
|
1710
|
+
return (React$3.createElement(View$1, __assign({ style: [styles$h.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
|
|
1711
1711
|
React$3.createElement(Animated.View, { style: [{ width: size, height: size, opacity: fade }], collapsable: false }, [0, 1].map(function (index) {
|
|
1712
1712
|
// Thanks to https://github.com/n4kz/react-native-indicators for the great work
|
|
1713
1713
|
var inputRange = Array.from(new Array(frames), function (_, frameIndex) { return frameIndex / (frames - 1); });
|
|
@@ -1752,7 +1752,7 @@ var ActivityIndicator = function (_a) {
|
|
|
1752
1752
|
borderWidth: size / 10,
|
|
1753
1753
|
borderRadius: size / 2,
|
|
1754
1754
|
};
|
|
1755
|
-
return (React$3.createElement(Animated.View, { key: index, style: [styles$
|
|
1755
|
+
return (React$3.createElement(Animated.View, { key: index, style: [styles$h.layer] },
|
|
1756
1756
|
React$3.createElement(Animated.View, { style: layerStyle },
|
|
1757
1757
|
React$3.createElement(Animated.View, { style: [containerStyle, offsetStyle], collapsable: false },
|
|
1758
1758
|
React$3.createElement(Animated.View, { style: viewportStyle },
|
|
@@ -1760,7 +1760,7 @@ var ActivityIndicator = function (_a) {
|
|
|
1760
1760
|
React$3.createElement(Animated.View, { style: lineStyle })))))));
|
|
1761
1761
|
}))));
|
|
1762
1762
|
};
|
|
1763
|
-
var styles$
|
|
1763
|
+
var styles$h = StyleSheet.create({
|
|
1764
1764
|
container: {
|
|
1765
1765
|
justifyContent: "center",
|
|
1766
1766
|
alignItems: "center",
|
|
@@ -1868,11 +1868,11 @@ var ProgressBar = function (_a) {
|
|
|
1868
1868
|
? {}
|
|
1869
1869
|
: { min: 0, max: 100, now: Math.round(progress * 100) }, testID: testID }),
|
|
1870
1870
|
React$3.createElement(Animated.View, { style: [
|
|
1871
|
-
styles$
|
|
1871
|
+
styles$g.container,
|
|
1872
1872
|
{ backgroundColor: trackTintColor, opacity: fade },
|
|
1873
1873
|
style,
|
|
1874
1874
|
] }, width ? (React$3.createElement(Animated.View, { testID: "".concat(testID, "-fill"), style: [
|
|
1875
|
-
styles$
|
|
1875
|
+
styles$g.progressBar,
|
|
1876
1876
|
{
|
|
1877
1877
|
width: width,
|
|
1878
1878
|
backgroundColor: tintColor,
|
|
@@ -1916,7 +1916,7 @@ var ProgressBar = function (_a) {
|
|
|
1916
1916
|
fillStyle,
|
|
1917
1917
|
] })) : null)));
|
|
1918
1918
|
};
|
|
1919
|
-
var styles$
|
|
1919
|
+
var styles$g = StyleSheet.create({
|
|
1920
1920
|
container: {
|
|
1921
1921
|
height: 4,
|
|
1922
1922
|
overflow: "hidden",
|
|
@@ -1928,7 +1928,7 @@ var styles$h = StyleSheet.create({
|
|
|
1928
1928
|
});
|
|
1929
1929
|
|
|
1930
1930
|
var ViewCustom = function (_a) {
|
|
1931
|
-
var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
1931
|
+
var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom, marginTop = _a.marginTop, marginBottom = _a.marginBottom, marginLeft = _a.marginLeft, marginRight = _a.marginRight, borderTopWidth = _a.borderTopWidth, borderTopColor = _a.borderTopColor, borderLeftWidth = _a.borderLeftWidth, borderLeftColor = _a.borderLeftColor, borderRightWidth = _a.borderRightWidth, borderRightColor = _a.borderRightColor;
|
|
1932
1932
|
var getStyle = function () {
|
|
1933
1933
|
var styleCustom = {};
|
|
1934
1934
|
if (row) {
|
|
@@ -2013,6 +2013,24 @@ var ViewCustom = function (_a) {
|
|
|
2013
2013
|
if (borderBottomColor) {
|
|
2014
2014
|
styleCustom.borderBottomColor = borderBottomColor;
|
|
2015
2015
|
}
|
|
2016
|
+
if (borderTopWidth) {
|
|
2017
|
+
styleCustom.borderTopWidth = borderTopWidth;
|
|
2018
|
+
}
|
|
2019
|
+
if (borderTopColor) {
|
|
2020
|
+
styleCustom.borderTopColor = borderTopColor;
|
|
2021
|
+
}
|
|
2022
|
+
if (borderLeftWidth) {
|
|
2023
|
+
styleCustom.borderLeftWidth = borderLeftWidth;
|
|
2024
|
+
}
|
|
2025
|
+
if (borderLeftColor) {
|
|
2026
|
+
styleCustom.borderLeftColor = borderLeftColor;
|
|
2027
|
+
}
|
|
2028
|
+
if (borderRightWidth) {
|
|
2029
|
+
styleCustom.borderRightWidth = borderRightWidth;
|
|
2030
|
+
}
|
|
2031
|
+
if (borderRightColor) {
|
|
2032
|
+
styleCustom.borderRightColor = borderRightColor;
|
|
2033
|
+
}
|
|
2016
2034
|
if (borderRadius) {
|
|
2017
2035
|
styleCustom.borderRadius = borderRadius;
|
|
2018
2036
|
}
|
|
@@ -2491,7 +2509,7 @@ var TextInputAffix = function (_a) {
|
|
|
2491
2509
|
var textColor = getTextColor({ theme: theme, disabled: disabled });
|
|
2492
2510
|
var content = (React__default.createElement(Text$2, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: "".concat(testID, "-text") }, text));
|
|
2493
2511
|
return (React__default.createElement(Animated.View, { style: [
|
|
2494
|
-
styles$
|
|
2512
|
+
styles$f.container,
|
|
2495
2513
|
style,
|
|
2496
2514
|
{
|
|
2497
2515
|
opacity: (visible === null || visible === void 0 ? void 0 : visible.interpolate({
|
|
@@ -2502,7 +2520,7 @@ var TextInputAffix = function (_a) {
|
|
|
2502
2520
|
], onLayout: onLayout, testID: testID }, onPress ? (React__default.createElement(Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel }, content)) : (content)));
|
|
2503
2521
|
};
|
|
2504
2522
|
TextInputAffix.displayName = "TextInput.Affix";
|
|
2505
|
-
var styles$
|
|
2523
|
+
var styles$f = StyleSheet.create({
|
|
2506
2524
|
container: {
|
|
2507
2525
|
position: "absolute",
|
|
2508
2526
|
justifyContent: "center",
|
|
@@ -2560,13 +2578,13 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
|
|
|
2560
2578
|
}
|
|
2561
2579
|
return (React$3.createElement(Animated.Text, __assign({ ref: ref }, rest, { style: [
|
|
2562
2580
|
font,
|
|
2563
|
-
styles$
|
|
2581
|
+
styles$e.text,
|
|
2564
2582
|
{ writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
|
|
2565
2583
|
style,
|
|
2566
2584
|
] })));
|
|
2567
2585
|
}
|
|
2568
2586
|
});
|
|
2569
|
-
var styles$
|
|
2587
|
+
var styles$e = StyleSheet.create({
|
|
2570
2588
|
text: {
|
|
2571
2589
|
textAlign: "left",
|
|
2572
2590
|
},
|
|
@@ -2637,7 +2655,7 @@ var InputLabel = function (props) {
|
|
|
2637
2655
|
return (
|
|
2638
2656
|
// Position colored placeholder and gray placeholder on top of each other and crossfade them
|
|
2639
2657
|
// This gives the effect of animating the color, but allows us to use native driver
|
|
2640
|
-
React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$
|
|
2658
|
+
React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$d.overflow, styles$d.labelContainer] },
|
|
2641
2659
|
React__default.createElement(Animated.View, { pointerEvents: "none", style: [
|
|
2642
2660
|
StyleSheet.absoluteFill,
|
|
2643
2661
|
Platform.OS !== "web" && { width: width },
|
|
@@ -2675,7 +2693,7 @@ var InputLabel = function (props) {
|
|
|
2675
2693
|
},
|
|
2676
2694
|
], numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, testID: "".concat(testID, "-label-inactive") }, label)))));
|
|
2677
2695
|
};
|
|
2678
|
-
var styles$
|
|
2696
|
+
var styles$d = StyleSheet.create({
|
|
2679
2697
|
overflow: {
|
|
2680
2698
|
overflow: "hidden",
|
|
2681
2699
|
},
|
|
@@ -2688,8 +2706,8 @@ var InputLabel$1 = React__default.memo(InputLabel);
|
|
|
2688
2706
|
var Outline = function (_a) {
|
|
2689
2707
|
var label = _a.label; _a.activeColor; _a.backgroundColor; _a.hasActiveOutline; _a.focused; _a.outlineColor; _a.roundness; var style = _a.style;
|
|
2690
2708
|
return (React$3.createElement(View$1, { testID: "text-input-outline", pointerEvents: "none", style: [
|
|
2691
|
-
styles$
|
|
2692
|
-
!label && styles$
|
|
2709
|
+
styles$c.outline,
|
|
2710
|
+
!label && styles$c.noLabelOutline,
|
|
2693
2711
|
// eslint-disable-next-line react-native/no-inline-styles
|
|
2694
2712
|
{
|
|
2695
2713
|
// backgroundColor,
|
|
@@ -2700,7 +2718,7 @@ var Outline = function (_a) {
|
|
|
2700
2718
|
style,
|
|
2701
2719
|
] }));
|
|
2702
2720
|
};
|
|
2703
|
-
var styles$
|
|
2721
|
+
var styles$c = StyleSheet.create({
|
|
2704
2722
|
outline: {
|
|
2705
2723
|
position: "absolute",
|
|
2706
2724
|
left: 0,
|
|
@@ -2938,7 +2956,7 @@ var TextInputFlat = function (_a) {
|
|
|
2938
2956
|
label: label,
|
|
2939
2957
|
scale: fontScale,
|
|
2940
2958
|
isAndroid: isAndroid,
|
|
2941
|
-
styles: StyleSheet.flatten(dense ? styles$
|
|
2959
|
+
styles: StyleSheet.flatten(dense ? styles$b.inputFlatDense : styles$b.inputFlat),
|
|
2942
2960
|
};
|
|
2943
2961
|
var pad = calculatePadding(paddingSettings);
|
|
2944
2962
|
adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
|
|
@@ -2964,7 +2982,7 @@ var TextInputFlat = function (_a) {
|
|
|
2964
2982
|
onLabelTextLayout: onLabelTextLayout,
|
|
2965
2983
|
placeholderOpacity: placeholderOpacity,
|
|
2966
2984
|
labelError: error,
|
|
2967
|
-
placeholderStyle: styles$
|
|
2985
|
+
placeholderStyle: styles$b.placeholder,
|
|
2968
2986
|
baseLabelTranslateY: baseLabelTranslateY,
|
|
2969
2987
|
baseLabelTranslateX: baseLabelTranslateX,
|
|
2970
2988
|
font: font,
|
|
@@ -3027,7 +3045,7 @@ var TextInputFlat = function (_a) {
|
|
|
3027
3045
|
left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
|
|
3028
3046
|
React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
|
|
3029
3047
|
React$3.createElement(View$1, { onLayout: onInputLayout, style: [
|
|
3030
|
-
styles$
|
|
3048
|
+
styles$b.labelContainer,
|
|
3031
3049
|
{
|
|
3032
3050
|
minHeight: minHeight,
|
|
3033
3051
|
flex: 1,
|
|
@@ -3035,7 +3053,7 @@ var TextInputFlat = function (_a) {
|
|
|
3035
3053
|
] },
|
|
3036
3054
|
label ? (React$3.createElement(InputLabel$1, __assign({ labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height }, labelProps))) : null, render === null || render === void 0 ? void 0 :
|
|
3037
3055
|
render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
|
|
3038
|
-
styles$
|
|
3056
|
+
styles$b.input,
|
|
3039
3057
|
__assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
|
|
3040
3058
|
? textAlign
|
|
3041
3059
|
: I18nManager.getConstants().isRTL
|
|
@@ -3043,13 +3061,13 @@ var TextInputFlat = function (_a) {
|
|
|
3043
3061
|
: "left", marginTop: Platform.OS === "android" ? SPACE_8 : 0 }),
|
|
3044
3062
|
contentStyle,
|
|
3045
3063
|
] }))),
|
|
3046
|
-
!disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$
|
|
3064
|
+
!disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
|
|
3047
3065
|
React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
|
|
3048
3066
|
React$3.createElement(View$1, { style: { flexDirection: "row" } },
|
|
3049
3067
|
right && React$3.createElement(Spacer, { width: SPACE_8 }),
|
|
3050
3068
|
right && React$3.createElement(View$1, { style: { paddingRight: SPACE_12 } }, right))));
|
|
3051
3069
|
};
|
|
3052
|
-
var styles$
|
|
3070
|
+
var styles$b = StyleSheet.create({
|
|
3053
3071
|
placeholder: {
|
|
3054
3072
|
position: "absolute",
|
|
3055
3073
|
left: 0,
|
|
@@ -5691,7 +5709,7 @@ var TextInputDefault = function (_a) {
|
|
|
5691
5709
|
? rest.placeholder
|
|
5692
5710
|
: label
|
|
5693
5711
|
: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
|
|
5694
|
-
styles$
|
|
5712
|
+
styles$a.input,
|
|
5695
5713
|
__assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
|
|
5696
5714
|
? textAlign
|
|
5697
5715
|
: I18nManager.getConstants().isRTL
|
|
@@ -5699,12 +5717,12 @@ var TextInputDefault = function (_a) {
|
|
|
5699
5717
|
: "left", height: height ? height : 44, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
|
|
5700
5718
|
contentStyle,
|
|
5701
5719
|
] }))),
|
|
5702
|
-
!disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$
|
|
5720
|
+
!disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$a.clearButtonMultiline : styles$a.clearButton },
|
|
5703
5721
|
React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
|
|
5704
5722
|
right && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
|
|
5705
5723
|
right && (React$3.createElement(View, { center: true, paddingRight: CONSTANTS.SPACE_12 }, right)))));
|
|
5706
5724
|
};
|
|
5707
|
-
var styles$
|
|
5725
|
+
var styles$a = StyleSheet.create({
|
|
5708
5726
|
input: {
|
|
5709
5727
|
margin: 0,
|
|
5710
5728
|
flex: 1,
|
|
@@ -5984,7 +6002,7 @@ var ScaleButton = function (_a) {
|
|
|
5984
6002
|
var ScaleButton$1 = React__default.memo(ScaleButton);
|
|
5985
6003
|
|
|
5986
6004
|
var Button = function (_a) {
|
|
5987
|
-
var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right
|
|
6005
|
+
var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right; _a.margin; var textStyle = _a.textStyle, textProps = _a.textProps, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.bold, bold = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 16 : _c, _d = _a.medium, medium = _d === void 0 ? false : _d, _e = _a.mode, mode = _e === void 0 ? "contained" : _e; _a.transparent; var _g = _a.full, full = _g === void 0 ? false : _g; _a.theme; var _h = _a.buttonSize, buttonSize = _h === void 0 ? "normal" : _h, props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "bold", "size", "medium", "mode", "transparent", "full", "theme", "buttonSize"]);
|
|
5988
6006
|
var theme = useInternalTheme();
|
|
5989
6007
|
var colors = theme.colors;
|
|
5990
6008
|
var disabledTextStyle = {
|
|
@@ -5993,7 +6011,7 @@ var Button = function (_a) {
|
|
|
5993
6011
|
var renderButtonStyle = function () {
|
|
5994
6012
|
switch (mode) {
|
|
5995
6013
|
case "outlined":
|
|
5996
|
-
return [styles$
|
|
6014
|
+
return [styles$9.border, { borderColor: colors.borderBrandDefault }];
|
|
5997
6015
|
case "contained":
|
|
5998
6016
|
return [{ backgroundColor: colors.surfaceBrandDefault }];
|
|
5999
6017
|
case "transparent":
|
|
@@ -6016,7 +6034,7 @@ var Button = function (_a) {
|
|
|
6016
6034
|
return (React__default.createElement(View, { row: !full },
|
|
6017
6035
|
React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
|
|
6018
6036
|
React__default.createElement(View, { style: [
|
|
6019
|
-
styles$
|
|
6037
|
+
styles$9.button,
|
|
6020
6038
|
{
|
|
6021
6039
|
borderRadius: CONSTANTS.BORDER_RADIUS_6,
|
|
6022
6040
|
},
|
|
@@ -6026,9 +6044,9 @@ var Button = function (_a) {
|
|
|
6026
6044
|
borderColor && { borderColor: borderColor },
|
|
6027
6045
|
backgroundColor && { backgroundColor: backgroundColor },
|
|
6028
6046
|
renderButtonStyle(),
|
|
6029
|
-
small && styles$
|
|
6047
|
+
buttonSize === "small" && styles$9.small,
|
|
6030
6048
|
disabled && [
|
|
6031
|
-
styles$
|
|
6049
|
+
styles$9.disabled,
|
|
6032
6050
|
{
|
|
6033
6051
|
borderColor: colors.borderPrimaryDisabled,
|
|
6034
6052
|
backgroundColor: colors.surfacePrimaryDisabled,
|
|
@@ -6045,7 +6063,7 @@ var Button = function (_a) {
|
|
|
6045
6063
|
!isLoading && right,
|
|
6046
6064
|
React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
|
|
6047
6065
|
};
|
|
6048
|
-
var styles$
|
|
6066
|
+
var styles$9 = StyleSheet.create({
|
|
6049
6067
|
disabled: { opacity: 0.6 },
|
|
6050
6068
|
button: {
|
|
6051
6069
|
height: CONSTANTS.BUTTON_HEIGHT,
|
|
@@ -6062,48 +6080,7 @@ var styles$a = StyleSheet.create({
|
|
|
6062
6080
|
height: CONSTANTS.BUTTON_HEIGHT_SMALL,
|
|
6063
6081
|
},
|
|
6064
6082
|
});
|
|
6065
|
-
var index$
|
|
6066
|
-
|
|
6067
|
-
var ButtonIcon = function (_a) {
|
|
6068
|
-
var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? CONSTANTS.BUTTON_HEIGHT : _c, border = _a.border, children = _a.children, circle = _a.circle, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, props = _a.props;
|
|
6069
|
-
var colors = useInternalTheme().colors;
|
|
6070
|
-
return (React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
|
|
6071
|
-
React__default.createElement(View, __assign({ style: [
|
|
6072
|
-
styles$9.btn,
|
|
6073
|
-
!hiddenBackground
|
|
6074
|
-
? {
|
|
6075
|
-
backgroundColor: backgroundColor || colors.surfaceBrandDefault,
|
|
6076
|
-
}
|
|
6077
|
-
: {
|
|
6078
|
-
backgroundColor: "transparent",
|
|
6079
|
-
},
|
|
6080
|
-
{
|
|
6081
|
-
width: size,
|
|
6082
|
-
height: size,
|
|
6083
|
-
},
|
|
6084
|
-
border && {
|
|
6085
|
-
borderWidth: CONSTANTS.BORDER_WIDTH_1,
|
|
6086
|
-
borderColor: borderColor || colors.borderBrandDefault,
|
|
6087
|
-
backgroundColor: backgroundColor || colors.surfacePrimaryDefault,
|
|
6088
|
-
},
|
|
6089
|
-
circle && {
|
|
6090
|
-
borderRadius: size / 2,
|
|
6091
|
-
},
|
|
6092
|
-
disabled && {
|
|
6093
|
-
borderWidth: 0,
|
|
6094
|
-
backgroundColor: colors.surfaceBrandDisabled,
|
|
6095
|
-
},
|
|
6096
|
-
style,
|
|
6097
|
-
] }, props), isLoading ? React__default.createElement(ActivityIndicator$1, { size: "small" }) : children)));
|
|
6098
|
-
};
|
|
6099
|
-
var styles$9 = StyleSheet.create({
|
|
6100
|
-
btn: {
|
|
6101
|
-
justifyContent: "center",
|
|
6102
|
-
alignItems: "center",
|
|
6103
|
-
borderRadius: CONSTANTS.BORDER_RADIUS_6,
|
|
6104
|
-
},
|
|
6105
|
-
});
|
|
6106
|
-
var index$2 = memoDeepEqual(ButtonIcon);
|
|
6083
|
+
var index$2 = React__default.memo(Button);
|
|
6107
6084
|
|
|
6108
6085
|
var FloatingButton = function (_a) {
|
|
6109
6086
|
var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e, _f = _a.left, left = _f === void 0 ? 0 : _f, _g = _a.bottom, bottom = _g === void 0 ? 0 : _g;
|
|
@@ -6876,7 +6853,7 @@ var SearchInput = function (_a) {
|
|
|
6876
6853
|
return (React__default.createElement(TextInput, { left: React__default.createElement(View, { center: true },
|
|
6877
6854
|
React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, textStyle: textStyle, style: [
|
|
6878
6855
|
{
|
|
6879
|
-
height: height ||
|
|
6856
|
+
height: height || 36,
|
|
6880
6857
|
},
|
|
6881
6858
|
style,
|
|
6882
6859
|
], contentStyle: [
|
|
@@ -6977,5 +6954,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
|
|
|
6977
6954
|
renderToast()));
|
|
6978
6955
|
});
|
|
6979
6956
|
|
|
6980
|
-
export { ActivityIndicator, Avatar, Badge, index$
|
|
6957
|
+
export { ActivityIndicator, Avatar, Badge, index$2 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, SearchInput, index as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
|
|
6981
6958
|
//# sourceMappingURL=index.esm.js.map
|