react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
189 lines • 8.22 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 core_1 = require("@material-ui/core");
var React = require("react");
var __1 = require("../../");
var common_1 = require("../../utils/common");
var enums_1 = require("../../utils/enums");
var web_1 = require("../../utils/web");
var TextInput_utils_1 = require("./TextInput.utils");
var styles = function () { return ({
input: {
backgroundColor: 'transparent',
color: __1.appTheme.textColor,
fontSize: __1.appTheme.fontSizeM,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: __1.appTheme.textColor,
outline: 0,
marginBottom: 1,
paddingTop: 4,
paddingBottom: 4,
resize: 'vertical',
},
inputError: {
color: __1.appTheme.errorColor,
},
inputFocused: {
borderBottomWidth: 2,
borderBottomStyle: 'solid',
borderBottomColor: __1.appTheme.primaryColor,
marginBottom: 0,
},
label: {
color: __1.appTheme.textColor,
fontSize: __1.appTheme.fontSizeS,
},
labelError: {
color: __1.appTheme.errorColor,
},
labelFocused: {
color: __1.appTheme.primaryColor,
},
error: {
color: __1.appTheme.errorColor,
fontSize: __1.appTheme.fontSizeS,
},
errorFocused: {},
}); };
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.state = {
focused: false,
};
_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.onBlur = function (ev) {
var onBlur = this.props.onBlur;
this.setState(__assign({}, this.state, { focused: false }));
if (!!onBlur) {
onBlur(ev);
}
};
CTextInput.prototype.onFocus = function (ev) {
var onFocus = this.props.onFocus;
this.setState(__assign({}, this.state, { focused: true }));
if (!!onFocus) {
onFocus(ev);
}
};
CTextInput.prototype.onChange = function (ev) {
var onChange = this.props.onChange;
var rawValue = ev.target.value;
var dbValue = this.getDbValue(rawValue);
this._rawValue = rawValue;
this.forceUpdate();
var fieldError = this.getError(rawValue);
if (!!onChange) {
onChange && onChange(!!fieldError ? { value: dbValue, error: fieldError } : dbValue);
}
};
CTextInput.prototype.getCommonProps = function () {
var _this = this;
var _a = this.props, classes = _a.classes, inputStyle = _a.inputStyle, error = _a.error, placeholder = _a.placeholder, id = _a.id, focused = this.state.focused;
return __assign({}, web_1.getStyleProps([
classes.input,
!!inputStyle && inputStyle.input,
focused && classes.inputFocused,
focused && !!inputStyle && inputStyle.inputFocused,
!!error && classes.inputError,
!!error && !!inputStyle && inputStyle.inputError,
]), { id: id, placeholder: placeholder || '', value: this._rawValue, onChange: function (ev) { return _this.onChange(ev); }, onBlur: function (ev) { return _this.onBlur(ev); }, onFocus: function (ev) { return _this.onFocus(ev); } });
};
CTextInput.prototype.getSingleLineTextInput = function () {
var inputType = this.props.inputType;
return (React.createElement("input", __assign({ type: TextInput_utils_1.getKeyboardType(inputType) }, this.getCommonProps(), __1.getTestProps(this.props.testId))));
};
CTextInput.prototype.getMultilineInput = function () {
return (React.createElement("textarea", __assign({}, this.getCommonProps(), { rows: 10 }, __1.getTestProps(this.props.testId))));
};
CTextInput.prototype.render = function () {
var _a = this.props, title = _a.title, error = _a.error, multiline = _a.multiline, classes = _a.classes, _b = _a.inputStyle, inputStyle = _b === void 0 ? {} : _b;
var focused = this.state.focused;
return (React.createElement(core_1.FormControl, { fullWidth: true },
title && React.createElement(__1.Text, { style: [
classes.label,
inputStyle.label,
focused && classes.labelFocused,
focused && inputStyle.labelFocused,
!!error && classes.labelError,
!!error && inputStyle.labelError,
] }, title),
multiline
? this.getMultilineInput()
: this.getSingleLineTextInput(),
error && React.createElement(__1.Text, { style: [
classes.error,
inputStyle.error,
focused && classes.errorFocused,
focused && inputStyle.errorFocused,
] }, error)));
};
return CTextInput;
}(React.PureComponent));
exports.CTextInput = CTextInput;
exports.TextInput = __1.createStyles(styles, 'TextInput')(CTextInput);
//# sourceMappingURL=TextInput.js.map