@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
164 lines • 10.4 kB
JavaScript
"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var classnames = require("classnames");
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var TypeStringControl_1 = require("../_Common/Validation/TypeStringControl");
var SvgIcon_1 = require("../../Display/SvgIcon");
var icons_1 = require("../../../Common/theming/icons");
var withTheme_1 = require("../../../Common/theming/withTheme");
var styles_1 = require("../_Common/Styled/Input/styles");
var theming_1 = require("../../../Common/theming/");
var utils_1 = require("../../../Common/utils");
var LoadingIndicator_1 = require("../../Display/LoadingIndicator");
var UpLigne_1 = require("../../Display/Ligne/UpLigne");
var typestyle_1 = require("typestyle");
var styles_2 = require("./styles");
exports.RequiredMark = function (_a) {
var markStyle = _a.markStyle;
return (React.createElement(UpLigne_1.default, { className: typestyle_1.style(markStyle) }, "*"));
};
var BaseInput = function (props) {
var name = props.name, autocomplete = props.autocomplete, className = props.className, type = props.type, iconPosition = props.iconPosition, placeholder = props.placeholder, disabled = props.disabled, readonly = props.readonly, maxLength = props.maxLength, dataFor = props.dataFor, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, autoFocus = props.autoFocus, hasClearOption = props.hasClearOption, onClear = props.onClear, value = props.value, isLoading = props.isLoading, showValidationStatus = props.showValidationStatus, tabindex = props.tabIndex;
var iconName = props.iconName;
var icon = null;
var RightIcon = null;
var size = 20;
var showClearIcon = hasClearOption && !!value && (type === 'search' || props.focused);
if (props.hasError && props.showError && type !== 'search' && showValidationStatus) {
iconName = "x";
size = 8;
}
else if (!props.hasError && !utils_1.isEmpty(value) && props.showSuccess && type !== 'search' && showValidationStatus) {
iconName = "check";
size = 8;
}
if (iconName) {
icon = (React.createElement(SvgIcon_1.default, { iconName: iconName, width: size, height: size, color: props.color }));
}
if (showClearIcon) {
RightIcon = React.createElement(SvgIcon_1.default, { iconName: 'x-circle', width: size, height: size, className: 'clear-icon', onClick: onClear });
}
if (hasClearOption && !!value && isLoading) {
RightIcon = React.createElement(LoadingIndicator_1.default, { isLoading: isLoading, loaderSize: 30 });
}
var tooltipProps = {};
if (dataFor) {
tooltipProps = {
"data-tip": "tooltip",
"data-for": dataFor
};
}
var id = props.id || utils_1.generateId();
return (React.createElement("div", { className: classnames(styles_1.getStyles(props), className) },
React.createElement("div", { className: classnames('up-input-group', {
'up-input-focused': props.focused && type !== 'search',
'up-input-valued': value != null && value != '' && type !== 'search',
'up-input-search': type === 'search'
}) },
iconPosition === 'left' && iconName && icon,
iconPosition === 'left' && props.floatingLabel && (React.createElement("label", { className: className, htmlFor: id },
props.floatingLabel,
props.isRequired && React.createElement(exports.RequiredMark, { markStyle: styles_2.starStyle }))),
React.createElement("input", tslib_1.__assign({ id: id, autoComplete: autocomplete, name: name, value: value, onChange: onChange, onFocus: onFocus, onBlur: function (event) {
event.persist();
setTimeout(onBlur.bind(_this, event), 100);
}, tabIndex: tabindex, className: classnames('up-input', className), type: type, placeholder: props.floatingLabel ? '' : placeholder, dir: 'auto', disabled: disabled, readOnly: readonly, maxLength: maxLength }, tooltipProps, { autoFocus: autoFocus })),
iconPosition === 'right' && props.floatingLabel && (React.createElement("label", { className: className, htmlFor: id },
props.floatingLabel,
props.isRequired ? (React.createElement(UpLigne_1.default, { className: typestyle_1.style(styles_2.starStyle) }, "*")) : (''))),
iconPosition === 'right' && !readonly && iconName && icon,
RightIcon)));
};
var UpInput = (function (_super) {
tslib_1.__extends(UpInput, _super);
function UpInput(p, c) {
var _this = _super.call(this, p, c) || this;
_this.inputHandleChangeEvent = function (event) {
event.persist();
_this.handleChangeEvent(event, undefined);
};
_this.clearValue = function () {
debugger;
_this.handleClearEvent("");
};
var _self = _this;
if (_this.props.validation && _this.props.validation.length > 0) {
_this.props.validation.map(function (value, index) {
if (value && value.pattern) {
_self._validationManager.addControl(new TypeStringControl_1.default(value.pattern, value.errorMessage));
}
});
}
return _this;
}
UpInput.prototype.getValue = function (event) {
return (event == null) ? null :
event.target != null ? event.target.value
: event;
};
UpInput.prototype.showError = function () {
return this.props.showError !== undefined
? this.props.showError
: this.hasError && !this.isFocused && this.isTouched;
};
UpInput.prototype.showSuccess = function () {
return this.props.showSuccess !== undefined
? this.props.showSuccess
: !this.hasError && !this.isFocused && this.isTouched && !utils_1.isEmpty(this.currentValue);
};
UpInput.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var shouldUpdate = this.props.value !== nextProps.value
|| this.props.error !== nextProps.error
|| this.props.errorDisplayMode !== nextProps.errorDisplayMode
|| this.props.floatingLabel !== nextProps.floatingLabel
|| this.props.iconName !== nextProps.iconName
|| this.props.iconPosition !== nextProps.iconPosition
|| this.props.isRequired !== nextProps.isRequired
|| this.props.placeholder !== nextProps.placeholder
|| this.props.readonly !== nextProps.readonly
|| this.props.disabled !== nextProps.disabled
|| this.props.rounded !== nextProps.rounded
|| this.props.showError !== nextProps.showError
|| this.props.showSuccess !== nextProps.showSuccess
|| this.props.touched !== nextProps.touched
|| this.props.tooltip !== nextProps.tooltip
|| this.props.hasError !== nextProps.hasError
|| this.props.maxLength !== nextProps.maxLength
|| this.props.name !== nextProps.name
|| this.props.theme !== nextProps.theme
|| this.props.type !== nextProps.type
|| this.state.error !== nextState.error
|| this.state.value !== nextState.value
|| this.props.isLoading !== nextProps.isLoading
|| !utils_1.shallowEqual(this.state.extra, nextState.extra);
return shouldUpdate;
};
UpInput.prototype.renderControl = function () {
var _this = this;
var _a = this.props, id = _a.id, name = _a.name, autocomplete = _a.autocomplete, touched = _a.touched, hasClearOption = _a.hasClearOption, type = _a.type, onChange = _a.onChange, value = _a.value, validation = _a.validation, errorDisplayMode = _a.errorDisplayMode, hasError = _a.hasError, iconName = _a.iconName, iconPosition = _a.iconPosition, width = _a.width, disabled = _a.disabled, readonly = _a.readonly, tooltip = _a.tooltip, maxLength = _a.maxLength, placeholder = _a.placeholder, floatingLabel = _a.floatingLabel, theme = _a.theme, others = tslib_1.__rest(_a, ["id", "name", "autocomplete", "touched", "hasClearOption", "type", "onChange", "value", "validation", "errorDisplayMode", "hasError", "iconName", "iconPosition", "width", "disabled", "readonly", "tooltip", "maxLength", "placeholder", "floatingLabel", "theme"]);
var realIconName = iconName;
if (realIconName == null && type != null) {
if (type === "time") {
realIconName = undefined;
}
else if (icons_1.ArcheIconNames.indexOf(type) != -1) {
realIconName = type;
}
}
return (React.createElement(BaseInput, { name: name, hasClearOption: hasClearOption, id: id, rounded: this.props.rounded, value: this.currentValue == null ? "" : this.currentValue, iconName: realIconName, iconPosition: iconPosition, width: width, autocomplete: autocomplete, disabled: disabled, readonly: readonly, tooltip: tooltip, theme: theme, maxLength: maxLength, placeholder: placeholder, floatingLabel: floatingLabel, type: type || "text", hasError: this.hasError, showError: this.showError(), showSuccess: this.showSuccess(), onFocus: this.onFocus, focused: this.isFocused, touched: touched, onChange: this.inputHandleChangeEvent, onBlur: function (e) { return setTimeout(_this.onBlur.bind(null, e), 200); }, autoFocus: this.props.autoFocus, onClear: this.clearValue, isLoading: this.props.isLoading, className: this.props.className, showValidationStatus: this.props.showValidationStatus, tabIndex: this.props.tabIndex, isRequired: this.props.isRequired }, this.props.children));
};
UpInput.defaultProps = {
theme: theming_1.default,
width: 'fill',
iconPosition: 'right',
hasClearOption: false,
showValidationStatus: true,
};
return UpInput;
}(BaseControl_1.BaseControlComponent));
exports.UpInput = UpInput;
exports.default = withTheme_1.default(UpInput);
//# sourceMappingURL=UpInput.js.map