@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
166 lines (165 loc) • 8.81 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var helpers_1 = require("../helpers");
var helpers_2 = require("../helpers");
var Icon_1 = require("../Icon");
var renderText = function (content, defaultProps, style) {
return (0, helpers_1.renderNode)(react_native_1.Text, content, __assign(__assign({}, defaultProps), { style: react_native_1.StyleSheet.flatten([style, defaultProps && defaultProps.style]) }));
};
var Input = (function (_super) {
__extends(Input, _super);
function Input() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.shakeAnimationValue = new react_native_1.Animated.Value(0);
_this.shake = function () {
var shakeAnimationValue = _this.shakeAnimationValue;
shakeAnimationValue.setValue(0);
react_native_1.Animated.timing(shakeAnimationValue, {
duration: 375,
toValue: 3,
easing: react_native_1.Easing.bounce,
useNativeDriver: true,
}).start();
};
return _this;
}
Input.prototype.focus = function () {
this.input.focus();
};
Input.prototype.blur = function () {
this.input.blur();
};
Input.prototype.clear = function () {
this.input.clear();
};
Input.prototype.isFocused = function () {
return this.input.isFocused();
};
Input.prototype.setNativeProps = function (nativeProps) {
this.input.setNativeProps(nativeProps);
};
Input.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e;
var _f = this.props, containerStyle = _f.containerStyle, disabled = _f.disabled, disabledInputStyle = _f.disabledInputStyle, inputContainerStyle = _f.inputContainerStyle, leftIcon = _f.leftIcon, leftIconContainerStyle = _f.leftIconContainerStyle, rightIcon = _f.rightIcon, rightIconContainerStyle = _f.rightIconContainerStyle, _g = _f.InputComponent, InputComponent = _g === void 0 ? react_native_1.TextInput : _g, inputStyle = _f.inputStyle, errorProps = _f.errorProps, errorStyle = _f.errorStyle, errorMessage = _f.errorMessage, label = _f.label, labelStyle = _f.labelStyle, labelProps = _f.labelProps, _h = _f.theme, theme = _h === void 0 ? helpers_1.defaultTheme : _h, _j = _f.renderErrorMessage, renderErrorMessage = _j === void 0 ? true : _j, style = _f.style, attributes = __rest(_f, ["containerStyle", "disabled", "disabledInputStyle", "inputContainerStyle", "leftIcon", "leftIconContainerStyle", "rightIcon", "rightIconContainerStyle", "InputComponent", "inputStyle", "errorProps", "errorStyle", "errorMessage", "label", "labelStyle", "labelProps", "theme", "renderErrorMessage", "style"]);
var translateX = this.shakeAnimationValue.interpolate({
inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
outputRange: [0, -15, 0, 15, 0, -15, 0],
});
var hideErrorMessage = !renderErrorMessage && !errorMessage;
return (react_1.default.createElement(react_native_1.View, { testID: "RNE__Input__view-wrapper", style: react_native_1.StyleSheet.flatten([styles.container, containerStyle]) },
renderText(label, __assign({ style: labelStyle }, labelProps), __assign({ fontSize: 16, color: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey3 }, react_native_1.Platform.select({
android: __assign({}, helpers_2.fonts.android.bold),
default: {
fontWeight: 'bold',
},
}))),
react_1.default.createElement(react_native_1.Animated.View, { style: react_native_1.StyleSheet.flatten([
{
flexDirection: 'row',
borderBottomWidth: 1,
alignItems: 'center',
borderColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey3,
},
inputContainerStyle,
{ transform: [{ translateX: translateX }] },
]) },
leftIcon && (react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.flatten([
styles.iconContainer,
leftIconContainerStyle,
]) }, (0, helpers_1.renderNode)(Icon_1.Icon, leftIcon))),
react_1.default.createElement(InputComponent, __assign({ testID: "RNE__Input__text-input", underlineColorAndroid: "transparent", editable: !disabled, ref: function (ref) {
_this.input = ref;
}, style: react_native_1.StyleSheet.flatten([
{
color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.black,
fontSize: 18,
flex: 1,
minHeight: 40,
},
inputStyle,
disabled && styles.disabledInput,
disabled && disabledInputStyle,
style,
]), placeholderTextColor: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.grey3 }, (0, helpers_1.patchWebProps)(attributes))),
rightIcon && (react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.flatten([
styles.iconContainer,
rightIconContainerStyle,
]) }, (0, helpers_1.renderNode)(Icon_1.Icon, rightIcon)))),
react_1.default.createElement(react_native_1.Text, __assign({}, errorProps, { style: react_native_1.StyleSheet.flatten([
{
margin: 5,
fontSize: 12,
color: (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.error,
},
errorStyle && errorStyle,
hideErrorMessage && {
height: 0,
margin: 0,
padding: 0,
},
]) }), errorMessage)));
};
Input.displayName = 'Input';
return Input;
}(react_1.default.Component));
exports.Input = Input;
var styles = react_native_1.StyleSheet.create({
container: {
width: '100%',
paddingHorizontal: 10,
},
disabledInput: {
opacity: 0.5,
},
iconContainer: {
height: 40,
justifyContent: 'center',
alignItems: 'center',
paddingRight: 4,
marginVertical: 4,
},
});