joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
414 lines (374 loc) • 14.6 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 _styles = require('@material-ui/core/styles');
var _InputBase = require('@material-ui/core/InputBase/InputBase');
var _InputBase2 = _interopRequireDefault(_InputBase);
var _Popper = require('@material-ui/core/Popper');
var _Popper2 = _interopRequireDefault(_Popper);
var _Fade = require('@material-ui/core/Fade');
var _Fade2 = _interopRequireDefault(_Fade);
var _Paper = require('@material-ui/core/Paper');
var _Paper2 = _interopRequireDefault(_Paper);
var _ClickAwayListener = require('@material-ui/core/ClickAwayListener');
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
var _Chip = require('@material-ui/core/Chip');
var _Chip2 = _interopRequireDefault(_Chip);
var _TagFaces = require('@material-ui/icons/TagFaces');
var _TagFaces2 = _interopRequireDefault(_TagFaces);
var _request = require('./../utils/request');
var _request2 = _interopRequireDefault(_request);
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; }
require('./style/selectTag.css');
var styles = function styles(theme) {
return {
root: {
width: '100%'
},
inputRoot: {
color: 'inherit',
marginLeft: "5px"
},
inputInput: {
transition: theme.transitions.create('width'),
color: "#333",
fontSize: 14,
lineHeight: 1
},
list: {
maxHeight: '300px',
overflowY: 'auto'
}
};
};
var CustomSelect = function (_React$Component) {
_inherits(CustomSelect, _React$Component);
function CustomSelect(props) {
_classCallCheck(this, CustomSelect);
var _this = _possibleConstructorReturn(this, (CustomSelect.__proto__ || Object.getPrototypeOf(CustomSelect)).call(this, props));
_this.state = {
open: false,
loading: false,
list: [],
check: props.checked || [],
anchorEl: null,
value: ''
};
_this.fetchTime = null;
_this.setTime = null;
_this.mainRef = null;
_this.containerRef = null;
_this.inputRef = null;
return _this;
}
_createClass(CustomSelect, [{
key: 'inputChange',
value: function inputChange(e) {
var self = this;
var value = e.target.value;
var target = this.containerRef;
self.setState({
value: value
});
// clearTimeout(this.setTime);
// this.setTime = setTimeout(function(){
// if(self.state.value.trim().length != 0){
// self.choseItem(e,self.state.value.trim());
// }
// },1000)
// clearTimeout(this.fetchTime);
// if(value.length!=0){
// this.fetchTime = setTimeout(function(){
// self.setState({
// loading:true,
// anchorEl:target
// })
// self.setState({
// open:true
// })
// let url = self.props.url.replace('{jw.form.search}',value)
// request(url,{
// method:'GET',
// }).then(function(resp){
// if(resp['data']['success'] && resp['data']['success'] == 0){
// }else{
// self.setState({
// list:resp.data['list'],
// loading:false
// })
// }
// })
// },800)
// $(document).off('click').one('click',function(){
// self.setState({
// open:false,
// })
// })
// }else{
// self.setState({
// open:false,
// list:[],
// loading:false
// })
// }
}
}, {
key: 'onKeyDown',
value: function onKeyDown(e) {
var self = this;
var code = e.keyCode;
// if(code == '38' || code == '40'){
// let item = $('.custom-search-popper .search-item');
// let nowActive = $('.custom-search-popper .search-item.active').eq(0);
// if(nowActive.length!=0){
// let nowIndex = parseInt(nowActive.attr('data-index'));
// item.removeClass('active');
// if(code == '38'){
// nowIndex = nowIndex - 1;
// if(nowIndex==-1){
// $('.custom-search-popper .search-item').eq(item.length-1).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
// }
// }else{
// nowIndex = nowIndex+ 1;
// if(nowIndex==item.length){
// $('.custom-search-popper .search-item').eq(0).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
// }
// }
// }else{
// item.removeClass('active');
// if(code == '38'){
// $('.custom-search-popper .search-item').eq(item.length-1).addClass('active');
// }else{
// $('.custom-search-popper .search-item').eq(0).addClass('active');
// }
// }
// e.preventDefault()
// //上下
// }
if (code == '13') {
//确定
// let index = $('.custom-search-popper .search-item.active').attr('data-index');
// let data = this.state.list[index];
this.choseItem(e, self.state.value);
e.preventDefault();
}
}
}, {
key: 'onMouseOver',
value: function onMouseOver(index) {
var item = $('.custom-search-popper .search-item');
item.removeClass('active');
item.eq(index).addClass('active');
}
}, {
key: 'onMouseOut',
value: function onMouseOut(index) {}
}, {
key: 'handleDelete',
value: function handleDelete(e, data) {
var self = this;
if (typeof this.props.onDelete != 'undefined') {
this.props.onDelete(e);
} else {
var newList = [];
_.each(this.state.check, function (i) {
if (i != data) {
newList.push(i);
}
});
this.setState({
check: newList,
value: ''
});
this.inputFocus();
self.props.onChange && self.props.onChange(newList);
}
}
}, {
key: 'inputFocus',
value: function inputFocus() {
$(this.containerRef).find('input').focus();
}
}, {
key: 'handleClickAway',
value: function handleClickAway() {}
}, {
key: 'choseItem',
value: function choseItem(e, data) {
var self = this;
var check = this.state.check;
if (_.filter(check, function (i) {
return i == data;
}).length != 0) {
this.setState({
value: ''
});
} else {
check.push(data.trim());
this.setState({
check: check,
value: ''
});
}
this.inputFocus();
self.props.onChange && self.props.onChange(check);
}
}, {
key: '_initElement',
value: function _initElement() {
var _this2 = this;
var self = this;
var classes = this.props.classes;
var anchorEl = this.state.anchorEl;
return _react2.default.createElement(
'div',
{ className: 'custom-select-c', ref: function ref(container) {
return _this2.containerRef = container;
}, onClick: function onClick(e) {
return _this2.inputFocus(e);
} },
this.state.value.length != 0 || this.state.check.length != 0 ? '' : _react2.default.createElement(
'div',
{ className: 'custom-select-placeholder' },
this.props.placeholder
),
_react2.default.createElement(
'div',
{ className: 'custom-select-list' },
this.state.check && this.state.check.length != 0 ? _.map(this.state.check, function (i) {
return _react2.default.createElement(_Chip2.default, {
className: 'custom-select-check-i',
key: i,
onDelete: function onDelete(e) {
return self.handleDelete(e, i);
},
label: i
});
}) : '',
this.state.max && this.state.check.length != 0 && this.state.max <= this.state.check.length ? '' : _react2.default.createElement(_InputBase2.default, {
classes: {
root: classes.inputRoot,
input: classes.inputInput
},
className: 'custom-select-search-input',
value: this.state.value,
onChange: function onChange(e) {
return self.inputChange(e);
},
onKeyDown: function onKeyDown(e) {
return self.onKeyDown(e);
},
ref: function ref(input) {
return _this2.inputRef = input;
}
})
)
);
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var self = this;
var classes = this.props.classes;
var anchorEl = this.state.anchorEl;
var icon = _react2.default.createElement(_TagFaces2.default, null);
return _react2.default.createElement(
'div',
{ className: 'custom-select custom-select-tag', ref: function ref(main) {
return _this3.mainRef = main;
} },
self._initElement(),
_react2.default.createElement(
'div',
{ className: 'custom-select-showlist hide' },
_react2.default.createElement(
_ClickAwayListener2.default,
{ onClickAway: function onClickAway() {}, onClick: function onClick(e) {
return self.handleClickAway(e);
} },
_react2.default.createElement(
_Popper2.default,
{
id: 'custom-search-popper',
open: this.state.open,
placement: 'bottom-start',
anchorEl: anchorEl,
modifiers: {},
className: 'custom-search-popper custom-search-selectlist',
style: {
width: $(this.containerRef).width() + 'px',
marginTop: '10px',
marginBottom: "10px"
},
transition: true
},
function (_ref) {
var TransitionProps = _ref.TransitionProps;
return _react2.default.createElement(
_Fade2.default,
_extends({}, TransitionProps, { timeout: 350 }),
self.state.loading ? _react2.default.createElement(
_Paper2.default,
null,
_react2.default.createElement(
'div',
{ className: 'custom-search-loading' },
'\u52A0\u8F7D\u4E2D\u2026'
)
) : _react2.default.createElement(
_Paper2.default,
{ className: classes.list },
self.state.list.length != 0 ? _.map(self.state.list, function (i, index) {
return _react2.default.createElement(
'div',
{ className: "search-item", 'data-index': index, 'data-id': i['id'] || i['key'], onMouseOver: function onMouseOver(e) {
return self.onMouseOver(index);
}, onMouseOut: function onMouseOut(e) {
return self.onMouseOut(index);
}, onClick: function onClick(e) {
return self.choseItem(e, i);
} },
_react2.default.createElement(
'div',
{ className: "search-item-info" },
_react2.default.createElement(
'div',
{ className: 'search-item-info-l' },
_react2.default.createElement(
'div',
{ className: 'search-item-info-i name ellipsis', title: i['name'] || i['label'] },
i['name'] || i['label']
)
)
)
);
}) : _react2.default.createElement(
'div',
{ className: 'custom-search-none' },
'\u6682\u65E0\u6570\u636E'
)
)
);
}
)
)
)
);
}
}]);
return CustomSelect;
}(_react2.default.Component);
exports.default = (0, _styles.withStyles)(styles)(CustomSelect);