react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
153 lines • 7.32 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var __1 = require("../../");
var TextInput_utils_1 = require("../../nativeComponents/TextInput/TextInput.utils");
var platform_1 = require("../../primitives/platform/platform");
var common_1 = require("../../utils/common");
var enums_1 = require("../../utils/enums");
var styles = function () {
var _a, _b;
return ({
containerLeft: (_a = {
flexDirection: 'row'
},
_a[__1.ios] = {
height: __1.appTheme.inputHeight,
},
_a.alignItems = 'center',
_a),
containerTop: {
// flex: 1,
flexDirection: 'column',
},
leftLabel: {
fontWeight: '500',
minWidth: 150,
color: __1.appTheme.textInputLabelColor,
},
topLabel: {
color: __1.appTheme.textInputLabelColor,
},
leftText: (_b = {
flex: 1,
height: __1.appTheme.inputHeight,
color: __1.appTheme.textColor
},
_b[__1.android] = {
// textAlignVertical: 'top',
fontSize: 16,
},
_b),
error: {
marginTop: -5,
zIndex: 0,
color: __1.appTheme.errorColor,
},
});
};
var getKeyboardType = function (inputType) {
switch (inputType) {
case enums_1.TEXT_INPUT_TYPES.EMAIL:
return 'email-address';
case enums_1.TEXT_INPUT_TYPES.PHONE:
return 'phone-pad';
default:
return 'default';
}
};
var CTextInput = /** @class */ (function (_super) {
__extends(CTextInput, _super);
function CTextInput(props) {
var _this = _super.call(this, props) || this;
_this._rawValue = '';
var value = _this.props.value;
_this._rawValue = (value !== null && value !== undefined)
? _this.getRawValue(value)
: '';
return _this;
}
CTextInput.prototype.getRawValue = function (dbValue) {
var _a = this.props, dbToRaw = _a.dbToRaw, _b = _a.inputType, inputType = _b === void 0 ? enums_1.TEXT_INPUT_TYPES.TEXT : _b;
return !!dbToRaw
? dbToRaw(dbValue)
: TextInput_utils_1.defaultDbToRaw(inputType, dbValue);
};
CTextInput.prototype.getDbValue = function (rawValue) {
var _a = this.props, rawToDb = _a.rawToDb, _b = _a.inputType, inputType = _b === void 0 ? enums_1.TEXT_INPUT_TYPES.TEXT : _b;
return !!rawToDb
? rawToDb(rawValue)
: TextInput_utils_1.defaultRawToDb(inputType, rawValue);
};
CTextInput.prototype.getError = function (rawValue) {
var _a = this.props, extraErrorChecker = _a.extraErrorChecker, inputType = _a.inputType, _b = _a.maxDecimals, maxDecimals = _b === void 0 ? TextInput_utils_1.DEFAULT_MAX_DECIMALS : _b;
return !!extraErrorChecker
? extraErrorChecker(rawValue)
: TextInput_utils_1.defaultGetError(inputType, rawValue, maxDecimals);
};
CTextInput.prototype.componentWillReceiveProps = function (nextProps) {
var value = nextProps.value, dbValue = (value !== null && value !== undefined && value.value !== null && value.value !== undefined)
? value.value
: value, parsedRawValue = this.getDbValue(this._rawValue);
var shouldChangeRawValue = (typeof parsedRawValue !== typeof dbValue);
if (typeof parsedRawValue == typeof dbValue) {
if (typeof dbValue === 'object') {
shouldChangeRawValue = !common_1.shallowEqual(parsedRawValue, dbValue);
}
else {
shouldChangeRawValue = parsedRawValue !== dbValue;
}
}
if (shouldChangeRawValue) {
// this.props.field == 'theme' && console.log("SHOULD CHANGE RAW VALUE 'CUZ Y NOT");
this._rawValue = (dbValue !== null && dbValue !== undefined)
? this.getRawValue(dbValue)
: '';
}
};
CTextInput.prototype.render = function () {
var _this = this;
var _a = this.props, classes = _a.classes, error = _a.error, inputType = _a.inputType, labelPositionLeft = _a.labelPositionLeft, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, placeholder = _a.placeholder, title = _a.title, inputStyle = _a.inputStyle;
return (React.createElement(react_native_1.TouchableWithoutFeedback, __assign({ onPress: function () { return _this.inputRef.focus(); } }, __1.getTestProps(this.props.testId)),
React.createElement(__1.View, null,
React.createElement(__1.View, { style: labelPositionLeft ? classes.containerLeft : classes.containerTop },
React.createElement(__1.Text, { style: [
labelPositionLeft ? classes.leftLabel : classes.topLabel,
inputStyle && inputStyle.label,
] }, title),
React.createElement(react_native_1.TextInput, { autoCapitalize: 'none', autoCorrect: false, keyboardType: getKeyboardType(inputType), onChangeText: function (rawValue) {
var dbValue = _this.getDbValue(rawValue);
_this._rawValue = rawValue;
_this.forceUpdate();
var fieldError = _this.getError(rawValue);
onChange && onChange(!!fieldError ? { value: dbValue, error: fieldError } : dbValue);
}, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, selectionColor: __1.appTheme.cursorColor, placeholderTextColor: __1.appTheme.placeholderColor, ref: function (input) { return _this.inputRef = input; }, secureTextEntry: inputType === enums_1.TEXT_INPUT_TYPES.PASSWORD, style: classes.leftText, underlineColorAndroid: error ? __1.appTheme.errorColor : __1.appTheme.textInputUnderlineColor, value: this._rawValue })),
!!error && React.createElement(__1.Text, { style: classes.error }, error))));
};
CTextInput.defaultProps = {
labelPositionLeft: platform_1.isIOS,
};
return CTextInput;
}(React.PureComponent));
var componentName = 'TextInput';
exports.TextInput = __1.createStyles(styles, componentName)(CTextInput);
//# sourceMappingURL=TextInput.native.js.map