ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
163 lines (162 loc) • 6.96 kB
JavaScript
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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
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) || 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);
};
/* eslint-disable no-nested-ternary */
import React, { Component } from 'react';
import classnames from 'classnames';
import { Call, HasValue, IsFunc } from 'basic-helper';
import { Icon } from '../icon';
import { Button } from '../button';
var controlTypeMapper = {
input: 'text',
pw: 'password',
};
var defaultShowInputTitle = true;
/**
* 通用输入的封装控件
*
* @export
* @class Input
* @extends {Component}
*/
var Input = /** @class */ (function (_super) {
__extends(Input, _super);
function Input(props) {
var _this = _super.call(this, props) || this;
_this.filterVal = function (val) {
var filter = _this.props.filter;
return filter && IsFunc(filter) ? filter(val) : val;
};
var _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, value = props.value;
_this.isControl = props.hasOwnProperty('value');
_this.value = _this.isControl ? value : defaultValue;
_this.state = {
viewClass: HasValue(_this.value) ? 'has-val' : 'normal',
stateVal: _this.value,
focusing: false
};
return _this;
}
Input.prototype.onFocus = function () {
this.setState({
viewClass: 'focusing',
focusing: true
});
};
Input.prototype.onBlur = function () {
this.setState({
viewClass: HasValue(this.getValue()) ? 'has-val' : 'normal',
focusing: false
});
};
Input.prototype.focus = function () {
this.iconInput.focus();
};
Input.prototype.select = function () {
this.iconInput.select();
};
Input.prototype.getValue = function () {
return this.isControl ? this.props.value : this.state.stateVal;
};
/**
* 用于过滤是 number 类型的值
*/
Input.prototype.numberValFilter = function (val) {
var outputType = this.props.outputType;
var _val = HasValue(val) ? val : this.getValue();
switch (outputType) {
case 'number':
_val = HasValue(_val) ? +_val : undefined;
break;
}
return _val;
};
Input.prototype.changeVal = function (val, elem) {
this.value = this.numberValFilter(val);
if (!this.isControl) {
this.setState({
stateVal: val
});
}
Call(this.props.onChange, val, elem);
};
Input.prototype.render = function () {
var _this = this;
var _a = this.props, n = _a.n, s = _a.s, icon = _a.icon, placeholder = _a.placeholder, title = _a.title, inputBtnConfig = _a.inputBtnConfig, _b = _a.type, type = _b === void 0 ? '' : _b, _c = _a.showTitle, showTitle = _c === void 0 ? defaultShowInputTitle : _c, size = _a.size, flowTitle = _a.flowTitle, className = _a.className, children = _a.children, required = _a.required, onFocus = _a.onFocus, onBlur = _a.onBlur, propsForInput = _a.propsForInput;
var _d = this.state, _e = _d.viewClass, viewClass = _e === void 0 ? '' : _e, focusing = _d.focusing;
var value = this.getValue();
var _icon = icon || n;
var hasIcon = !!_icon;
var highlightDOM = required && (React.createElement("span", { className: "form-desc" },
React.createElement("span", { className: "highlight" }, "*")));
var titleDOM = (hasIcon || title) && showTitle && (React.createElement("span", { className: "title" },
hasIcon && (React.createElement(Icon, { n: _icon, s: s })),
React.createElement("span", { className: "text" }, title),
highlightDOM));
var inputBtnDOM = inputBtnConfig && (React.createElement(Button, { className: "input-btn btn " + (inputBtnConfig.color || 'theme') + " " + (inputBtnConfig.className || ''), icon: inputBtnConfig.icon, onClick: function () {
inputBtnConfig.action(_this.iconInput);
} }, inputBtnConfig.text));
var classNames = classnames('input-control', size, viewClass, hasIcon && 'has-icon', inputBtnConfig && 'has-btn', flowTitle && 'flow-title');
return (React.createElement("div", { className: classNames },
React.createElement("div", { className: "input-con" },
React.createElement("span", { className: "input-group", onClick: function (e) { return _this.iconInput.focus(); } },
titleDOM,
React.createElement("input", __assign({ type: controlTypeMapper[type] || type }, propsForInput, { placeholder: flowTitle ? (focusing ? placeholder : '') : placeholder, className: className, value: value, onFocus: function (e) {
_this.onFocus();
Call(onFocus, e);
}, onBlur: function (e) {
_this.onBlur();
var val = _this.numberValFilter();
val = _this.filterVal(val);
if (HasValue(val))
Call(onBlur, val, e);
}, onChange: function (e) {
var val = e.target.value;
// val = IsFunc(filter) ? filter(val) : val;
val = _this.filterVal(val);
_this.changeVal(val, e.target);
}, ref: function (e) { _this.iconInput = e; } }))),
inputBtnDOM),
children));
};
Input.defaultProps = {
required: false,
forceToSelect: false,
className: 'form-control',
type: 'input',
size: 'md',
outputType: 'string',
propsForInput: {},
};
/**
* 设置 input 控件的默认行为
* @public
*/
Input.setConfig = function (_a) {
var showTitle = _a.showTitle;
defaultShowInputTitle = showTitle;
};
return Input;
}(Component));
export default Input;