sapo-components-ui-rn 1.0.55 → 1.0.57
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/TextInput/TextInput.d.ts +1 -0
- package/dist/components/TextInput/TextInputDefault.d.ts +1 -1
- package/dist/components/TextInput/TextInputFlat.d.ts +1 -1
- package/dist/components/TextInput/types.d.ts +1 -0
- package/dist/index.esm.js +80 -49
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +80 -49
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TextInput/TextInput.tsx +1 -0
- package/src/components/TextInput/TextInputDefault.tsx +34 -4
- package/src/components/TextInput/TextInputFlat.tsx +137 -114
- package/src/components/TextInput/types.tsx +1 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ChildTextInputProps } from "./types";
|
|
3
|
-
declare const TextInputDefault: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayout, left, right, placeholderTextColor, clearButton, contentStyle, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
|
|
3
|
+
declare const TextInputDefault: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayout, left, right, placeholderTextColor, clearButton, contentStyle, value, textError, ...rest }: ChildTextInputProps) => React.JSX.Element;
|
|
4
4
|
export default TextInputDefault;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ChildTextInputProps } from "./types";
|
|
3
|
-
declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, prefix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
|
|
3
|
+
declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, prefix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, ...rest }: ChildTextInputProps) => React.JSX.Element;
|
|
4
4
|
export default TextInputFlat;
|
package/dist/index.esm.js
CHANGED
|
@@ -5382,7 +5382,7 @@ var Text = function (props) {
|
|
|
5382
5382
|
var Text$1 = memoDeepEqual(Text);
|
|
5383
5383
|
|
|
5384
5384
|
var TextInputFlat = function (_a) {
|
|
5385
|
-
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value"]);
|
|
5385
|
+
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError"]);
|
|
5386
5386
|
var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
|
|
5387
5387
|
React$3.useEffect(function () {
|
|
5388
5388
|
setInputValue(value || "");
|
|
@@ -5529,6 +5529,9 @@ var TextInputFlat = function (_a) {
|
|
|
5529
5529
|
else if (parentState.focused) {
|
|
5530
5530
|
return activeColor;
|
|
5531
5531
|
}
|
|
5532
|
+
else if (error) {
|
|
5533
|
+
return theme.colors.borderErrorDefault;
|
|
5534
|
+
}
|
|
5532
5535
|
else {
|
|
5533
5536
|
return theme.colors.borderPrimaryDefault;
|
|
5534
5537
|
}
|
|
@@ -5552,48 +5555,55 @@ var TextInputFlat = function (_a) {
|
|
|
5552
5555
|
}
|
|
5553
5556
|
return React$3.createElement(View$1, null);
|
|
5554
5557
|
};
|
|
5555
|
-
return (React$3.createElement(View$1,
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
|
|
5559
|
-
|
|
5560
|
-
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5568
|
-
|
|
5569
|
-
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
|
|
5573
|
-
|
|
5574
|
-
|
|
5575
|
-
|
|
5576
|
-
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5581
|
-
|
|
5582
|
-
|
|
5583
|
-
|
|
5584
|
-
|
|
5585
|
-
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5589
|
-
|
|
5590
|
-
|
|
5591
|
-
|
|
5592
|
-
|
|
5593
|
-
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5558
|
+
return (React$3.createElement(View$1, null,
|
|
5559
|
+
React$3.createElement(View$1, { style: {
|
|
5560
|
+
flexDirection: "row",
|
|
5561
|
+
alignItems: "center",
|
|
5562
|
+
borderRadius: BORDER_RADIUS_6,
|
|
5563
|
+
borderWidth: 1,
|
|
5564
|
+
borderColor: getBorderColor(),
|
|
5565
|
+
height: 48,
|
|
5566
|
+
overflow: "hidden",
|
|
5567
|
+
backgroundColor: disabled
|
|
5568
|
+
? theme.colors.surfacePrimaryDisabled
|
|
5569
|
+
: theme.colors.surfacePrimaryDefault,
|
|
5570
|
+
} },
|
|
5571
|
+
React$3.createElement(View$1, { style: { flexDirection: "row", height: "100%" } },
|
|
5572
|
+
left && React$3.createElement(View$1, { style: { paddingLeft: SPACE_12 } }, left),
|
|
5573
|
+
left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
|
|
5574
|
+
React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
|
|
5575
|
+
React$3.createElement(View$1, { onLayout: onInputLayout, style: [
|
|
5576
|
+
styles$b.labelContainer,
|
|
5577
|
+
{
|
|
5578
|
+
minHeight: minHeight,
|
|
5579
|
+
flex: 1,
|
|
5580
|
+
},
|
|
5581
|
+
] },
|
|
5582
|
+
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,
|
|
5583
|
+
React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
|
|
5584
|
+
renderPrefix(), render === null || render === void 0 ? void 0 :
|
|
5585
|
+
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: [
|
|
5586
|
+
styles$b.input,
|
|
5587
|
+
__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
|
|
5588
|
+
? textAlign
|
|
5589
|
+
: I18nManager.getConstants().isRTL
|
|
5590
|
+
? "right"
|
|
5591
|
+
: "left", marginTop: Platform.OS === "android" ? SPACE_8 : 0 }),
|
|
5592
|
+
contentStyle,
|
|
5593
|
+
] })))),
|
|
5594
|
+
!disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
|
|
5595
|
+
React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
|
|
5596
|
+
React$3.createElement(View$1, { style: {
|
|
5597
|
+
flexDirection: "row",
|
|
5598
|
+
height: "100%",
|
|
5599
|
+
paddingBottom: SPACE_6,
|
|
5600
|
+
} },
|
|
5601
|
+
right && !clearButton && React$3.createElement(Spacer, { width: SPACE_8 }),
|
|
5602
|
+
right && (React$3.createElement(View$1, { style: {
|
|
5603
|
+
paddingRight: SPACE_12,
|
|
5604
|
+
} }, right)))),
|
|
5605
|
+
error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$b.vError },
|
|
5606
|
+
React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
|
|
5597
5607
|
};
|
|
5598
5608
|
var styles$b = StyleSheet.create({
|
|
5599
5609
|
placeholder: {
|
|
@@ -5629,11 +5639,15 @@ var styles$b = StyleSheet.create({
|
|
|
5629
5639
|
clearButton: {
|
|
5630
5640
|
padding: SPACE_8,
|
|
5631
5641
|
},
|
|
5642
|
+
vError: {
|
|
5643
|
+
paddingTop: SPACE_4,
|
|
5644
|
+
paddingHorizontal: SPACE_12,
|
|
5645
|
+
},
|
|
5632
5646
|
});
|
|
5633
5647
|
|
|
5634
5648
|
var TextInputDefault = function (_a) {
|
|
5635
5649
|
var _b;
|
|
5636
|
-
var _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.editable, editable = _d === void 0 ? true : _d, label = _a.label, _e = _a.error, error = _e === void 0 ? false : _e, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _f = _a.render, render = _f === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, contentStyle = _a.contentStyle, _j = _a.value, value = _j === void 0 ? "" : _j, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "value"]);
|
|
5650
|
+
var _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.editable, editable = _d === void 0 ? true : _d, label = _a.label, _e = _a.error, error = _e === void 0 ? false : _e, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _f = _a.render, render = _f === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, placeholderTextColor = _a.placeholderTextColor, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, contentStyle = _a.contentStyle, _j = _a.value, value = _j === void 0 ? "" : _j, textError = _a.textError, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "placeholderTextColor", "clearButton", "contentStyle", "value", "textError"]);
|
|
5637
5651
|
var colors = theme.colors;
|
|
5638
5652
|
var font = theme.fonts.bodyLarge;
|
|
5639
5653
|
var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, fontWeight = _k.fontWeight, lineHeightStyle = _k.lineHeight, height = _k.height, _l = _k.backgroundColor; _l === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _l; var textAlign = _k.textAlign; _k.minHeight; var viewStyle = __rest(_k, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
|
|
@@ -5671,6 +5685,9 @@ var TextInputDefault = function (_a) {
|
|
|
5671
5685
|
else if (parentState.focused) {
|
|
5672
5686
|
return activeColor;
|
|
5673
5687
|
}
|
|
5688
|
+
else if (error) {
|
|
5689
|
+
return theme.colors.borderErrorDefault;
|
|
5690
|
+
}
|
|
5674
5691
|
else {
|
|
5675
5692
|
return theme.colors.borderPrimaryDefault;
|
|
5676
5693
|
}
|
|
@@ -5690,17 +5707,26 @@ var TextInputDefault = function (_a) {
|
|
|
5690
5707
|
var _a;
|
|
5691
5708
|
if (parentState.focused ||
|
|
5692
5709
|
(parentState.value !== undefined && ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "")) {
|
|
5693
|
-
return (React$3.createElement(View, { paddingTop: CONSTANTS.
|
|
5710
|
+
return (React$3.createElement(View, { paddingTop: CONSTANTS.SPACE_6 },
|
|
5694
5711
|
React$3.createElement(Text$1, { color: getLabelColor(), size: MINIMIZED_LABEL_FONT_SIZE }, label)));
|
|
5695
5712
|
}
|
|
5696
5713
|
return React$3.createElement(View, null);
|
|
5697
5714
|
};
|
|
5698
5715
|
var getPaddingTopValue = function () {
|
|
5716
|
+
var _a, _b;
|
|
5699
5717
|
if (multiline) {
|
|
5700
5718
|
if (Platform.OS === "ios") {
|
|
5701
|
-
|
|
5719
|
+
if (parentState.focused ||
|
|
5720
|
+
(parentState.value !== undefined &&
|
|
5721
|
+
((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ""))
|
|
5722
|
+
return CONSTANTS.SPACE_4;
|
|
5723
|
+
return CONSTANTS.SPACE_8;
|
|
5702
5724
|
}
|
|
5703
|
-
|
|
5725
|
+
if (parentState.focused ||
|
|
5726
|
+
(parentState.value !== undefined &&
|
|
5727
|
+
((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) !== ""))
|
|
5728
|
+
return CONSTANTS.SPACE_4;
|
|
5729
|
+
return CONSTANTS.SPACE_8;
|
|
5704
5730
|
}
|
|
5705
5731
|
return 0;
|
|
5706
5732
|
};
|
|
@@ -5746,9 +5772,10 @@ var TextInputDefault = function (_a) {
|
|
|
5746
5772
|
right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
|
|
5747
5773
|
right && (React$3.createElement(View, { style: {
|
|
5748
5774
|
height: "100%",
|
|
5749
|
-
paddingBottom: CONSTANTS.SPACE_12,
|
|
5750
5775
|
paddingRight: CONSTANTS.SPACE_12,
|
|
5751
|
-
} }, right)))
|
|
5776
|
+
} }, right))),
|
|
5777
|
+
error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View, { style: styles$a.vError },
|
|
5778
|
+
React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
|
|
5752
5779
|
};
|
|
5753
5780
|
var styles$a = StyleSheet.create({
|
|
5754
5781
|
input: {
|
|
@@ -5767,6 +5794,10 @@ var styles$a = StyleSheet.create({
|
|
|
5767
5794
|
justifyContent: "center",
|
|
5768
5795
|
paddingHorizontal: CONSTANTS.SPACE_8,
|
|
5769
5796
|
},
|
|
5797
|
+
vError: {
|
|
5798
|
+
paddingTop: CONSTANTS.SPACE_4,
|
|
5799
|
+
paddingHorizontal: CONSTANTS.SPACE_12,
|
|
5800
|
+
},
|
|
5770
5801
|
});
|
|
5771
5802
|
|
|
5772
5803
|
var roundLayoutSize = function (size) {
|