sws-frontend
Version:
sws frontend project
107 lines • 6.5 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;
};
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)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var field_1 = require("./field");
var mentionfield_1 = require("./mentionfield");
var react_color_1 = require("react-color");
var react_bootstrap_1 = require("react-bootstrap");
var TextField = (function (_super) {
__extends(TextField, _super);
function TextField(p) {
var _this = _super.call(this, p) || this;
_this.state = {
openColor: false
};
return _this;
}
TextField.prototype.colourIsLight = function (r, g, b) {
// Counting the perceptive luminance
// human eye favors green color...
var a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return (a < 0.5);
};
TextField.prototype.componentToHex = function (c) {
var hex = c && c.toString(16);
return (hex && hex.length == 1) ? "0" + hex : hex;
};
TextField.prototype.rgbToHex = function (r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
};
TextField.prototype.hexToRgb = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
TextField.prototype.render = function () {
var _this = this;
var _a = this.props, type = _a.type, icon = _a.icon, p = __rest(_a, ["type", "icon"]);
var _b = p, children = _b.children, fieldProps = __rest(_b, ["children"]);
var mentionProps = __rest(p, []);
var rgbValue = this.hexToRgb(p.value);
var isLight = rgbValue ? this.colourIsLight(rgbValue.r, rgbValue.g, rgbValue.b) : true;
var fieldType = 'text';
switch (type) {
case 'color':
fieldType = 'text';
break;
default:
fieldType = type;
break;
}
return (React.createElement("div", { className: 'fieldtype-' + (type && type || 'text') },
React.createElement(field_1.Field, __assign({}, fieldProps),
type == 'color' ?
React.createElement("form", { onSubmit: function (e) { return e.preventDefault(); }, onBlur: function () { return _this.setState({ openColor: false }); } },
React.createElement(react_bootstrap_1.FormGroup, null,
React.createElement(react_bootstrap_1.InputGroup, null,
React.createElement(react_bootstrap_1.InputGroup.Addon, null,
React.createElement("i", { className: "material-icons" }, icon ? icon : 'color_lens')),
React.createElement(mentionfield_1.default, __assign({}, mentionProps, { className: isLight ? 'light-background' : 'dark-background', value: p && p.value ? p.value : "", onChange: function (e) { return p.onChange(e.target.value); }, type: "text", style: { background: p.value } }))),
React.createElement("span", { onClick: function (e) { return _this.setState({ openColor: !_this.state.openColor }); }, className: "color-picker-button " + (isLight ? 'light-background' : 'dark-background') },
React.createElement("i", { className: "material-icons" }, this.state.openColor ? 'close' : 'colorize'))))
:
icon ?
React.createElement(react_bootstrap_1.FormGroup, null,
React.createElement(react_bootstrap_1.InputGroup, null,
React.createElement(react_bootstrap_1.InputGroup.Addon, null,
React.createElement("i", { className: "material-icons" }, icon)),
React.createElement(mentionfield_1.default, __assign({}, mentionProps, { value: p && p.value ? p.value : "", placeholder: !p.disabled ? (p.placeholder || "type a " + p.name.toLowerCase() + "...") : undefined, onChange: function (e) { return p.onChange(e.target.value); }, type: fieldType && fieldType || 'text', disabled: p.disabled || false, componentClass: p.componentClass }))))
:
React.createElement(mentionfield_1.default, __assign({}, mentionProps, { type: fieldType && fieldType || 'text', componentClass: p.componentClass, placeholder: !p.disabled ? (p.placeholder || "type a " + p.name.toLowerCase() + "...") : undefined, disabled: p.disabled || false, onChange: function (e) { return p.onChange(e.target.value); }, value: p && p.value ? p.value : "" })),
type == 'color' && this.state.openColor &&
React.createElement(react_color_1.TwitterPicker, { colors: ['#FF6900', '#FCB900', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#FFFFFF', '#9900EF', '#000000'], triangle: 'top-right', onChangeComplete: function (color) { return _this.setState({ openColor: false }, function () { return p.onChange(color.hex); }); } }))));
};
return TextField;
}(React.Component));
exports.default = TextField;
//# sourceMappingURL=textfield.js.map