sapo-components-ui-rn 1.0.56 → 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 +69 -47
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +69 -47
- 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 +19 -2
- 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,7 +5707,7 @@ 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);
|
|
@@ -5755,9 +5772,10 @@ var TextInputDefault = function (_a) {
|
|
|
5755
5772
|
right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
|
|
5756
5773
|
right && (React$3.createElement(View, { style: {
|
|
5757
5774
|
height: "100%",
|
|
5758
|
-
paddingBottom: CONSTANTS.SPACE_12,
|
|
5759
5775
|
paddingRight: CONSTANTS.SPACE_12,
|
|
5760
|
-
} }, 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)))));
|
|
5761
5779
|
};
|
|
5762
5780
|
var styles$a = StyleSheet.create({
|
|
5763
5781
|
input: {
|
|
@@ -5776,6 +5794,10 @@ var styles$a = StyleSheet.create({
|
|
|
5776
5794
|
justifyContent: "center",
|
|
5777
5795
|
paddingHorizontal: CONSTANTS.SPACE_8,
|
|
5778
5796
|
},
|
|
5797
|
+
vError: {
|
|
5798
|
+
paddingTop: CONSTANTS.SPACE_4,
|
|
5799
|
+
paddingHorizontal: CONSTANTS.SPACE_12,
|
|
5800
|
+
},
|
|
5779
5801
|
});
|
|
5780
5802
|
|
|
5781
5803
|
var roundLayoutSize = function (size) {
|