joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
234 lines (200 loc) • 10.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _joywokMaterialComponents = require('joywok-material-components');
var _MenuItem = require('@material-ui/core/MenuItem');
var _MenuItem2 = _interopRequireDefault(_MenuItem);
var _DialogActions = require('@material-ui/core/DialogActions');
var _DialogActions2 = _interopRequireDefault(_DialogActions);
var _DialogContent = require('@material-ui/core/DialogContent');
var _DialogContent2 = _interopRequireDefault(_DialogContent);
var _DialogContentText = require('@material-ui/core/DialogContentText');
var _DialogContentText2 = _interopRequireDefault(_DialogContentText);
var _DialogTitle = require('@material-ui/core/DialogTitle');
var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; } /*
* 名称：中英文组件
* 功能：中英文切换（Select） + 输入框（Input）+ 查看字典（Modal）+ 字符限制
**/
require('./style/index.css');
var MultiLangInput = function (_React$Component) {
_inherits(MultiLangInput, _React$Component);
function MultiLangInput(props) {
_classCallCheck(this, MultiLangInput);
var _this = _possibleConstructorReturn(this, (MultiLangInput.__proto__ || Object.getPrototypeOf(MultiLangInput)).call(this, props));
_this.state = {
open: false, //是否显示字典弹框
langOptions: [//语言下拉列表
{ label: "简体中文", key: '中文' }, { label: "English", key: 'EN' }]
};
return _this;
}
// 改变中英文 onChange
_createClass(MultiLangInput, [{
key: 'changeLang',
value: function changeLang(e) {
console.log("改变当前语言:", e);
}
//改变输入框value
}, {
key: 'changeValue',
value: function changeValue(e) {
console.log("改变输入框Value:", e);
}
// 展示多语言字典弹框
}, {
key: 'showDict',
value: function showDict() {
this.setState({
open: true
});
}
// 关闭多语言字典弹框
}, {
key: 'closeDict',
value: function closeDict() {
this.setState({
open: false
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
'div',
{ className: 'jw-multilang-input ' },
_react2.default.createElement(
_joywokMaterialComponents.Select,
{
className: 'jw-multilang-lang',
value: 'zh',
onChange: function onChange(e) {
return _this2.changeLang(e);
}
},
_react2.default.createElement(
_MenuItem2.default,
{ className: 'jw-multilang-dropdown', value: 'zh' },
'\u7B80\u4F53\u4E2D\u6587'
),
_react2.default.createElement(
_MenuItem2.default,
{ className: 'jw-multilang-dropdown', value: 'en' },
'English'
)
),
_react2.default.createElement(_joywokMaterialComponents.TextField, {
className: 'jw-multilang-value',
placeholder: '\u8BF7\u8F93\u5165',
onChange: function onChange(e) {
return _this2.changeValue(e);
}
}),
_react2.default.createElement('i', { className: 'icon-show-dict', onClick: function onClick() {
return _this2.showDict();
} }),
_react2.default.createElement(
_joywokMaterialComponents.JwDialog,
{
open: this.state.open,
onClose: function onClose() {
return _this2.closeDict();
},
'aria-labelledby': 'alert-dialog-title',
'aria-describedby': 'alert-dialog-description',
className: 'jw-multilang-dialog'
},
_react2.default.createElement(
_DialogTitle2.default,
{ id: 'alert-dialog-title' },
"多语言编辑"
),
_react2.default.createElement('i', { className: 'icon-close', onClick: function onClick() {
return _this2.closeDict();
} }),
_react2.default.createElement(
_DialogContent2.default,
{ className: 'jw-multilang-dialog-content' },
_react2.default.createElement(
_DialogContentText2.default,
{ id: 'alert-dialog-description' },
_react2.default.createElement(
'div',
{ className: 'lang-table' },
_react2.default.createElement(
'p',
{ className: 'lang-table-row' },
_react2.default.createElement(
'span',
{ className: 'table-language' },
'\u8BED\u8A00'
),
_react2.default.createElement(
'span',
{ className: 'table-language-desc' },
'\u663E\u793A\u6807\u9898\uFF08\u5B57\u6570\u9650\u5236 16\uFF09'
)
),
_react2.default.createElement(
'p',
{ className: 'lang-table-row' },
_react2.default.createElement(
'span',
{ className: 'table-lang' },
'\u4E2D\u6587'
),
_react2.default.createElement(_joywokMaterialComponents.TextField, { className: 'table-input',
onChange: function onChange(e, val) {
return _this2.changeDialogValue(e, 1);
},
defaultValue: '',
placeholder: '请输入'
})
),
_react2.default.createElement(
'p',
{ className: 'lang-table-row' },
_react2.default.createElement(
'span',
{ className: 'table-lang' },
'English'
),
_react2.default.createElement(_joywokMaterialComponents.TextField, { className: 'table-input',
onChange: function onChange(e, val) {
return _this2.changeDialogValue(e, 1);
},
defaultValue: '',
placeholder: '请输入'
})
)
)
)
),
_react2.default.createElement(
_DialogActions2.default,
{ className: 'jw-multilang-dialog-save' },
_react2.default.createElement(
_joywokMaterialComponents.Button,
{ onClick: function onClick() {
return _this2.closeDict();
}, color: 'primary', autoFocus: true },
'\u4FDD\u5B58'
)
)
)
);
}
}]);
return MultiLangInput;
}(_react2.default.Component);
exports.default = MultiLangInput;