sws-frontend
Version:
sws frontend project
202 lines • 12.4 kB
JavaScript
"use strict";
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 react_bootstrap_1 = require("react-bootstrap");
var helpers_1 = require("../commons/helpers");
var bootstrap_1 = require("../commons/bootstrap");
var mentionfield_1 = require("./mentionfield");
var field_1 = require("./field");
var ReactQuill = require("react-quill");
require("../../node_modules/react-quill/dist/quill.snow.css");
var formats = [
'bold', 'italic', 'underline', 'color', 'strike', 'link'
];
exports.defaultLanguage = 'en';
exports.multilangSort = function (lang) {
if (lang === void 0) { lang = exports.defaultLanguage; }
return function (a, b) {
return (a[lang] && b[lang]) && (a[lang].localeCompare(b[lang]));
};
};
exports.buildMultilingual = function (_default) { return ({ en: _default || "" }); };
require("./multilangfield.scss");
// import "material-icon";
////////////////////////////////////////////////////////////////////////////////////////////////////
var langs = { 'en': 'English', 'fr': 'French', 'es': 'Spanish', 'zh': 'Chinese', 'ru': 'Russian', 'ar': 'Arabic' };
var langsLength = Object.keys(langs).length;
////////////////////////////////////////////////////////////////////////////////////////////////////
var MultiValue = (function (_super) {
__extends(MultiValue, _super);
function MultiValue(props) {
var _this = _super.call(this, props) || this;
_this.state = _this.initialState();
_this.onValueChange = _this.onValueChange.bind(_this);
_this.onLanguageSelect = _this.onLanguageSelect.bind(_this);
return _this;
}
MultiValue.prototype.initialState = function () {
return { nextLang: this.nextLang(), uid: helpers_1.uuid() };
};
////////////////////////////////////////////////////////////////////////////////////////
MultiValue.prototype.onValueChange = function (key, e) {
if (e != "") {
var val = helpers_1.merge(this.props.value, (_a = {}, _a[key] = e, _a));
this.props.onChange(val);
}
else {
this.onRemove(key);
}
var _a;
};
MultiValue.prototype.onLanguageSelect = function (lang) {
this.setState(helpers_1.merge(this.state, { nextLang: lang }));
};
MultiValue.prototype.onRemove = function (e) {
var val = helpers_1.deepCopy(this.props.value);
delete val[e];
this.props.onChange(val);
};
MultiValue.prototype.onAdd = function (e) {
var val = helpers_1.merge(this.props.value, (_a = {}, _a[e] = "", _a));
this.props.onChange(val);
var _a;
};
////////////////////////////////////////////////////////////////////////////////////////////////
MultiValue.prototype.nextLangs = function () {
var _this = this;
return Object.keys(langs).filter(function (l) { return Object.keys(_this.props.value).indexOf(l) < 0; });
};
MultiValue.prototype.currentLangs = function () {
var languages = Object.keys(this.props.value).filter(function (l) { return Object.keys(langs).indexOf(l) >= 0; });
if (languages.length > 0) {
return languages;
}
else {
return Object.keys(langs).filter(function (l) { return l == exports.defaultLanguage; });
}
// var languages = [];
// Object.keys(langs).map(l=>{
// this.props.value[l] && languages.push(this.props.value[l]);
// })
// //var languages = Object.keys(this.props.value).filter(l=>Object.keys(langs).indexOf(l) >= 0);
// if(languages.length > 0){
// return languages;
// }else{
// return Object.keys(langs).filter(l=>l == "en");
// }
};
MultiValue.prototype.nextLang = function () {
var nextLangs = this.nextLangs();
return nextLangs.length == 0 ? null : nextLangs[0];
};
MultiValue.prototype.render = function () {
var _this = this;
var p = __rest(this.props, []);
var _a = p, children = _a.children, fieldProps = __rest(_a, ["children"]);
var mentionProps = __rest(p, []);
var uid = this.state.uid;
var type = p.type;
var currentLangs = this.currentLangs();
var nextLangs = this.nextLangs();
var className = p.className;
var getContent = function (key) {
var content;
switch (type) {
case "textarea":
content = (React.createElement("div", { className: "textarea-multilang-group" },
React.createElement(bootstrap_1.InputGroup, { className: "Entry-textarea" },
React.createElement(bootstrap_1.InputGroup.Addon, { className: "LangLabel" }, key),
React.createElement(bootstrap_1.InputGroup.Addon, { className: "empty-placeholder" }),
React.createElement(bootstrap_1.InputGroup.Button, null,
React.createElement(react_bootstrap_1.Button, { className: "Button", disabled: p.disabled, onClick: function (e) { return _this.onRemove(key); } },
React.createElement("i", { className: "material-icons" }, "remove_circle_outline")))),
React.createElement(mentionfield_1.default, __assign({}, mentionProps, { type: "text", className: "Input" + (type === 'textarea' ? '-textarea' : ''), componentClass: type, placeholder: !p.disabled ? "type a " + p.name.toLowerCase() + " in " + langs[key] + "..." : undefined, value: p.value[key], disabled: p.disabled, onChange: function (e) { return _this.onValueChange(key, e.target.value); } }))));
break;
case "html":
var id = 'editor-' + key + '-' + uid;
var modules = {
toolbar: {
container: "#" + id,
}
};
content = (React.createElement("div", { className: "textarea-multilang-group html-multilang-group " },
React.createElement(bootstrap_1.InputGroup, { className: "Entry-textarea" },
React.createElement(bootstrap_1.InputGroup.Addon, { className: "LangLabel" }, key),
React.createElement(bootstrap_1.InputGroup.Addon, { className: "empty-placeholder html-placeholder" },
React.createElement("div", { id: id },
React.createElement("button", { className: "ql-bold" }),
React.createElement("button", { className: "ql-italic" }),
React.createElement("button", { className: "ql-underline" }),
React.createElement("button", { className: "ql-strike" }),
React.createElement("button", { className: "ql-link" }),
React.createElement("select", { className: "ql-color" },
React.createElement("option", { value: "#e91806" }),
React.createElement("option", { value: "#ffe940" }),
React.createElement("option", { value: "#084ec8" }),
React.createElement("option", { value: "#f27b0a" }),
React.createElement("option", { value: "#1cc21c" }),
React.createElement("option", { value: "#d0d1d2" }),
React.createElement("option", { selected: true })))),
React.createElement(bootstrap_1.InputGroup.Button, null,
React.createElement(react_bootstrap_1.Button, { className: "Button", disabled: p.disabled, onClick: function (e) { return _this.onRemove(key); } },
React.createElement("i", { className: "material-icons" }, "remove_circle_outline")))),
React.createElement(ReactQuill, { theme: "snow", value: p.value[key], modules: modules, formats: formats, onChange: function (e) { return _this.onValueChange(key, e); } })));
break;
default:
content = (React.createElement(bootstrap_1.InputGroup, { className: "Entry" },
React.createElement(bootstrap_1.InputGroup.Addon, { className: "LangLabel" }, key),
React.createElement(mentionfield_1.default, __assign({}, mentionProps, { type: "text", className: 'Input', componentClass: type, placeholder: !p.disabled ? "type a " + p.name.toLowerCase() + " in " + langs[key] + "..." : undefined, value: p.value[key] || "", disabled: p.disabled, onChange: function (e) { return _this.onValueChange(key, e.target.value); } })),
React.createElement(bootstrap_1.InputGroup.Button, null,
React.createElement(react_bootstrap_1.Button, { className: "Button", disabled: p.disabled, onClick: function (e) { return _this.onRemove(key); } },
React.createElement("i", { className: "material-icons" }, "remove_circle_outline")))));
break;
}
return content;
};
// onBlur={()=>this.onAdd(nextLangs[0])}
return React.createElement("div", { className: "field form-group multilang-field-wrapper" },
React.createElement(field_1.Field, __assign({}, fieldProps, { className: "field form-group multilang-field " + (className && className) }), currentLangs.map(function (key, index) {
return React.createElement(bootstrap_1.FormGroup, { key: key, style: { position: 'relative', 'zIndex': langsLength - index } }, getContent(key));
})),
nextLangs.length > 0 &&
React.createElement(bootstrap_1.FormGroup, { key: "new", className: "multilang-add-form" },
React.createElement(bootstrap_1.InputGroup, { className: className + "-next" + (type === 'textarea' ? '-textarea' : '') },
React.createElement(bootstrap_1.Dropdown, { disabled: p.disabled, pullRight: true, id: "dropdown-" + p.name.toLowerCase() },
React.createElement(bootstrap_1.Dropdown.Toggle, { disabled: p.disabled, bsSize: "xsmall", className: className + "-new-button" + (type === 'textarea' ? '-textarea' : '') },
React.createElement("i", { className: "material-icons" }, "language"),
"Add in another language"),
React.createElement(bootstrap_1.Dropdown.Menu, null, nextLangs.map(function (opt) { return React.createElement(bootstrap_1.MenuItem, { key: opt, eventKey: opt, onSelect: function (opt) { return _this.onAdd(opt); } },
"+ ",
opt); }))))));
};
return MultiValue;
}(React.Component));
exports.default = MultiValue;
//# sourceMappingURL=multilangfield.js.map