joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
567 lines (529 loc) • 29 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _constants = require('../constants');
var _core = require('@material-ui/core');
var _Close = require('@material-ui/icons/Close');
var _Close2 = _interopRequireDefault(_Close);
var _request = require('./../utils/request');
var _request2 = _interopRequireDefault(_request);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* 用法：
参数说明：
data的数据结构：{zh:'',en:'',language:''},其中 language若是不传显示的是多语言组的第一个
langArr：是所有的语种，若是不传，默认只显示中文和English
type：传area就是textarea的，否则是input
showLength：input下是否显示输入的字数true显示，false不显示
max：限制的输入的字符的个数
img:字典图标或者别的图标的url
inpNoSearch:true,//input框输入不会调接口获取字典数据，true不会调接口，false会调接口 不传默认为false,
dialogNoSearch:true,//input的类型在中英文弹框中输入信息是否调字典库的接口 true不会调接口，false会调接口 不传默认为false,
1.input类型
<MultilingualCompt data={this.state.obj} url="api/translate/getlist" max="30"
onChange={this.handelChange.bind(this)}/>
2.textarea类型
<MultilingualCompt type="area" data={this.state.obj} url="api/translate/getlist"
onChange={this.handelChangeText.bind(this)}/>
*/
require('./style/index.css');
var TextArea = _core.Input.TextArea;
var styles = {
paper: {
color: 'red',
overflowY: 'visible'
},
scrollBody: {
overflowY: 'visible'
}
};
var defaultLangArr = [{ lang: 'zh', name: '中文' }, { lang: 'en', name: 'English' }];
var MultilingualCompt = function (_React$Component) {
_inherits(MultilingualCompt, _React$Component);
function MultilingualCompt(props) {
_classCallCheck(this, MultilingualCompt);
var _this = _possibleConstructorReturn(this, (MultilingualCompt.__proto__ || Object.getPrototypeOf(MultilingualCompt)).call(this, props));
var langArr = _this.props.langArr || defaultLangArr;
_this.state = {
lang: _this.props.data && _this.props.data.language || langArr[0].lang,
curValue: _this.props.data || {},
langArr: langArr,
max: _this.props.max || 200,
showModal: false,
showLength: _this.props.showLength || false, //控制是否显示输入的字符的个数
showList: false,
showListAll: false,
dataList: []
};
return _this;
}
_createClass(MultilingualCompt, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newP) {
var langArr = newP.langArr || defaultLangArr;
this.setState({
lang: newP.data && newP.data.language || langArr[0].lang,
curValue: newP.data || {},
langArr: langArr,
max: newP.max || 200
});
}
}, {
key: 'handelInput',
value: function handelInput(e, lang, type) {
var _state = this.state,
langArr = _state.langArr,
max = _state.max,
curValue = _state.curValue,
modalCurValue = _state.modalCurValue;
var curObj = type == 'all' ? modalCurValue : curValue;
var value = e.target.value.replace(/^(\s|\u00A0)+/, '');
// this.props.type == 'area' ? "" : this.getData(value, lang);
if (this.props.type != 'area') {
if (type == 'all' && !this.props.dialogNoSearch) {
this.getData(value, lang);
} else if (type != 'all' && !this.props.inpNoSearch) {
this.getData(value, lang);
}
}
if (!this.isOnComposition) {
if ((0, _constants.DataLength)(value) <= max) {
curObj[lang] = value;
} else if (!this.isOnComposition) {
curObj[lang] = (0, _constants.jwSubStr)(value, max);
}
} else {
curObj[lang] = value;
}
if (type == 'all') {
this.setState({
modalCurValue: curObj
});
} else {
curObj.language = lang;
this.setState({
curValue: curObj
});
this.props.onChange && this.props.onChange(curObj);
}
}
}, {
key: 'handelCompositionEnd',
value: function handelCompositionEnd(e, lang, type) {
this.isOnComposition = false;
this.handelInput(e, lang, type);
}
}, {
key: 'getData',
value: function getData(val, lang) {
clearTimeout(this.time);
var self = this;
var obj = {};
obj[lang] = val;
obj.pagesize = 20;
obj.restype = 0;
if (val == '' || !val) {
this.setState({ dataList: [] });
return;
}
this.time = setTimeout(function () {
(0, _request2.default)(self.props.url, {
method: 'GET',
body: obj
}).then(function (resp) {
var newtempDict = resp['data']['JMTranslate'];
if (val == '') {
newtempDict = _.filter(newtempDict, function (i) {
return i[lang] != '';
});
}
self.setState({
dataList: newtempDict || []
});
});
}, 500);
}
}, {
key: 'handelBlur',
value: function handelBlur() {
var self = this;
var _state2 = this.state,
curValue = _state2.curValue,
lang = _state2.lang,
langArr = _state2.langArr;
var curLang = lang;
curValue[curLang] = curValue[curLang] ? curValue[curLang].replace(/(\s|\u00A0)+$/, '') : '';
this.setState({ curValue: curValue });
setTimeout(function () {
self.setState({
showList: false
});
}, 0);
}
}, {
key: 'handelItem',
value: function handelItem(item, lang, type) {
var _state3 = this.state,
curValue = _state3.curValue,
modalCurValue = _state3.modalCurValue,
langArr = _state3.langArr;
var curObj = type == 'all' ? modalCurValue : curValue;
_.each(langArr, function (jItem) {
var keyLang = jItem['id'];
if (lang == keyLang) {
curObj[lang] = item[keyLang];
} else {
curObj[keyLang] = curObj[keyLang] ? curObj[keyLang] : item[keyLang];
}
});
if (type == 'all') {
this.setState({
modalCurValue: curObj,
showListAll: false
});
} else {
curObj.language = lang;
this.setState({
curValue: curObj,
showList: false
});
this.props.onChange && this.props.onChange(curObj);
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var self = this;
var _state4 = this.state,
inpNoSearch = _state4.inpNoSearch,
lang = _state4.lang,
curValue = _state4.curValue,
langArr = _state4.langArr,
max = _state4.max,
showModal = _state4.showModal,
modalCurValue = _state4.modalCurValue,
showLength = _state4.showLength,
dataList = _state4.dataList,
showList = _state4.showList;
if (this.props.type == 'area') {
return _react2.default.createElement(
'div',
null,
this.initTextArea()
);
} else {
return _react2.default.createElement(
'div',
{ className: 'jw-multilingual' },
_react2.default.createElement(
_core.Select,
{
className: 'remark-item-lang',
value: lang,
onChange: function onChange(e) {
_this2.setState({
lang: e.target.value,
dataList: []
});
curValue.language = e.target.value;
_this2.props.onChange && _this2.props.onChange(curValue);
}
},
_.map(langArr, function (item) {
return _react2.default.createElement(
_core.MenuItem,
{ key: item.lang, value: item.lang },
item.name
);
})
),
_react2.default.createElement(
_core.FormControl,
{ className: 'remark-item-input' },
_react2.default.createElement(_core.Input, { placeholder: this.props.placeholder || i18n('label.console.mode.menu.url.placehoder'),
value: curValue[lang] ? curValue[lang] : "",
onFocus: function onFocus() {
inpNoSearch ? _this2.setState({ showList: true }) : "";
},
onChange: function onChange(e) {
return _this2.handelInput(e, lang);
},
onCompositionStart: function onCompositionStart(e) {
_this2.isOnComposition = false;
},
onCompositionUpdate: function onCompositionUpdate(e) {
_this2.isOnComposition = true;
},
onCompositionEnd: function onCompositionEnd(e) {
return _this2.handelCompositionEnd(e, lang);
},
onBlur: function onBlur(e) {
return _this2.handelBlur();
},
endAdornment: _react2.default.createElement(
_core.InputAdornment,
{ position: 'end' },
_react2.default.createElement('img', {
onClick: function onClick() {
return _this2.setState({
showModal: true,
modalCurValue: _extends({}, curValue)
});
},
src: self.props.img || imagePath + '/images/subscribe/input-after.png'
})
),
'aria-describedby': 'standard-weight-helper-text',
inputProps: {
'aria-label': 'weight'
}
}),
showLength ? _react2.default.createElement(
_core.FormHelperText,
{ id: 'standard-weight-helper-text' },
i18n('label.console.application.limit') + ' ' + (lang ? (0, _constants.DataLength)(curValue[lang]) : (0, _constants.DataLength)(curValue[langArr[0].lang])) + '/' + max
) : "",
showList && !!dataList.length ? _react2.default.createElement(
_core.Paper,
{ className: 'jw-data-list', style: { zIndex: 1000 } },
_react2.default.createElement(
_core.MenuList,
null,
_.map(dataList, function (item, i) {
return _react2.default.createElement(
_core.MenuItem,
{ key: item.lang, onClick: function onClick() {
return self.handelItem(item, lang);
} },
item[lang]
);
})
)
) : ""
),
showModal ? this.initDialog() : ""
);
}
}
}, {
key: 'initTextArea',
value: function initTextArea() {
var _this3 = this;
var self = this;
var _state5 = this.state,
langArr = _state5.langArr,
curValue = _state5.curValue,
lang = _state5.lang;
return _react2.default.createElement(
'div',
{ className: 'jw-mulitingArea' },
_react2.default.createElement(
'div',
{ className: 'jw-mulitingArea-header' },
_react2.default.createElement(
_core.Select,
{
className: 'remark-item-lang',
value: lang,
onChange: function onChange(e) {
_this3.setState({
lang: e.target.value,
dataList: []
});
curValue.language = e.target.value;
_this3.props.onChange && _this3.props.onChange(curValue);
}
},
_.map(langArr, function (item) {
return _react2.default.createElement(
_core.MenuItem,
{ key: item.lang, value: item.lang },
item.name
);
})
)
),
_react2.default.createElement(
'div',
{ className: 'jw-multi-content' },
_react2.default.createElement(_core.TextField, { className: 'jw-textarea', value: curValue[lang] ? curValue[lang] : "", multiline: true,
onChange: function onChange(e) {
return _this3.handelInput(e, lang);
},
onCompositionStart: function onCompositionStart(e) {
_this3.isOnComposition = false;
},
onCompositionUpdate: function onCompositionUpdate(e) {
_this3.isOnComposition = true;
},
onCompositionEnd: function onCompositionEnd(e) {
return _this3.handelCompositionEnd(e, lang);
},
onBlur: function onBlur(e) {
return _this3.handelBlur();
} }),
_react2.default.createElement(
'span',
null,
(0, _constants.DataLength)(curValue[lang]),
'/',
this.state.max
)
)
);
}
}, {
key: 'initDialog',
value: function initDialog() {
var _this4 = this;
var self = this;
var classes = this.props.classes;
var _state6 = this.state,
showModal = _state6.showModal,
curValue = _state6.curValue,
lang = _state6.lang,
modalCurValue = _state6.modalCurValue,
langArr = _state6.langArr,
max = _state6.max,
showListAll = _state6.showListAll,
dataList = _state6.dataList;
return _react2.default.createElement(
_core.Dialog,
{ classes: classes,
open: showModal,
onClose: function onClose() {
return _this4.setState({ showModal: false });
},
fullWidth: true,
maxWidth: 'sm',
className: 'multi-modal',
'aria-labelledby': 'form-dialog-title'
},
_react2.default.createElement(
_core.DialogTitle,
{ className: 'setting-modal-title no-line', id: 'form-dialog-title' },
this.props.title || i18n('label.console.application.edit.name'),
_react2.default.createElement(_Close2.default, { onClick: function onClick() {
return _this4.setState({ showModal: false });
} })
),
_react2.default.createElement(
_core.DialogContent,
{ className: 'setting-modal-body' },
_react2.default.createElement(
'div',
{ className: 'text-edit text-edit-title' },
_react2.default.createElement(
'div',
{ className: 'text-edit-label' },
i18n('label.console.application.lang')
),
_react2.default.createElement(
'div',
{ className: 'text-edit-value' },
i18n('label.otis.showtitle') + ' ',
'(',
i18n('label.console.application.limit'),
' ',
max,
')'
)
),
_.map(langArr, function (item, i) {
return _react2.default.createElement(
'div',
{ className: 'text-edit' },
_react2.default.createElement(
'div',
{ className: 'text-edit-label' },
item.name
),
_react2.default.createElement(
'div',
{ className: 'text-edit-value' },
_react2.default.createElement(_core.TextField, {
className: 'text-edit-input',
fullWidth: true,
placeholder: self.props.placeholder || i18n('label.console.mode.menu.url.placehoder'),
value: modalCurValue[item.lang],
onFocus: function onFocus() {
self.setState({ showListAll: item.lang });
},
onChange: function onChange(e) {
return self.handelInput(e, item.lang, 'all');
},
onCompositionStart: function onCompositionStart(e) {
self.isOnComposition = false;
},
onCompositionUpdate: function onCompositionUpdate(e) {
self.isOnComposition = true;
},
onCompositionEnd: function onCompositionEnd(e) {
return self.handelCompositionEnd(e, item.lang, 'all');
},
onBlur: function onBlur(e) {
modalCurValue[item.lang] = modalCurValue[item.lang] ? modalCurValue[item.lang].replace(/(\s|\u00A0)+$/, '') : '';
self.setState({ modalCurValue: modalCurValue, showListAll: false });
}
}),
showListAll && showListAll == item.lang && !!dataList.length ? _react2.default.createElement(
_core.Paper,
{ className: 'jw-data-list', style: { zIndex: 1000 } },
_react2.default.createElement(
_core.MenuList,
null,
_.map(dataList, function (jItem, i) {
return _react2.default.createElement(
_core.MenuItem,
{ key: jItem.lang, onClick: function onClick() {
return self.handelItem(jItem, item.lang, 'all');
} },
jItem[item.lang],
'11111'
);
})
)
) : ""
)
);
})
),
_react2.default.createElement(
_core.DialogActions,
{ className: 'setting-madel-footer' },
_react2.default.createElement(
_core.Button,
_defineProperty({
onClick: function onClick() {
return _this4.setState({ showModal: false });
},
color: 'primary',
variant: 'contained',
className: 'save-button'
}, 'onClick', function onClick() {
var data = _extends({}, curValue, modalCurValue);
_this4.setState({
curValue: data,
showModal: false
});
_this4.props.onChange && _this4.props.onChange(data);
}),
i18n('label.console.base.save')
)
)
);
}
}]);
return MultilingualCompt;
}(_react2.default.Component);
exports.default = (0, _core.withStyles)(styles)(MultilingualCompt);