@6thquake/react-material
Version:
React components that implement Google's Material Design.
365 lines (298 loc) • 9.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.styles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Popover = _interopRequireDefault(require("../Popover"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _TextField = _interopRequireDefault(require("../TextField"));
var _CascadeOption = _interopRequireDefault(require("./CascadeOption"));
var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
var _InputAdornment = _interopRequireDefault(require("../InputAdornment"));
var styles = function styles(theme) {
return {
root: {
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'column'
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
minWidth: 200
},
arrowDown: {
color: 'rgba(0, 0, 0, 0.54)'
},
menuBox: {
// width: 200,
display: 'flex',
flexDirection: 'row'
},
noData: {
padding: theme.spacing(1),
minWidth: 200
}
};
};
exports.styles = styles;
var CascadeSelect =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(CascadeSelect, _React$Component);
function CascadeSelect(props) {
var _this;
(0, _classCallCheck2.default)(this, CascadeSelect);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CascadeSelect).call(this, props));
_this.state = {
open: false,
opens: [true, false, false, false, false],
data: [_this.props.options],
textFieldValue: '',
checkes: [-1, -1, -1, -1, -1]
};
_this.handleChange = function (name) {
return function (event) {
_this.setState((0, _defineProperty2.default)({}, name, event.target.value));
};
};
_this.handleInputClick = function (e) {
_this.setState({
open: true,
anchorEl: e.currentTarget
});
};
_this.handlePopOverClose = function () {
_this.setState({
open: false
});
};
_this.handelMenuChange = function (e) {
var level = e.level,
next = e.next;
_this.updateSeries(e);
_this.updateMenuData(next, level);
_this.updateNextMenu(e);
_this.setTextFieldValue();
_this.checkChange(e); // 将信息传给父组件
_this.props.onChange && _this.props.onChange(_this.series);
};
_this.updateSeries = function (e) {
// 清空当前级之后的数据 并更新当前级数据
var item = e.item,
level = e.level,
index = e.index;
_this.series.splice(level);
_this.series[level] = item[index];
};
_this.updateMenuData = function (next, level) {
var opens = _this.state.opens;
for (var i = level; i < opens.length - 1; i++) {
opens[i + 1] = false;
}
_this.setState({
opens: opens
});
};
_this.updateNextMenu = function (e) {
var level = e.level,
next = e.next;
var data = next;
if (_this.state.opens[level + 1] === false && data.length > 0) {
var opens = _this.state.opens;
opens[level + 1] = true;
var items = _this.state.data;
items[level + 1] = data;
_this.setState({
opens: opens,
data: items
});
}
};
_this.setTextFieldValue = function () {
var mapper = _this.props.mapper;
var selections = _this.series.map(function (item, index) {
var label = item.label,
value = item.value;
if (typeof mapper.label === 'function') {
label = mapper.label(item, index);
}
return {
value: value,
label: label
};
});
var node = _this.renderSelections(selections);
_this.setState({
textFieldValue: node
});
};
_this.renderSelections = function (list) {
var _this$props = _this.props,
separator = _this$props.separator,
renderValue = _this$props.renderValue;
if (renderValue) {
return renderValue(list);
}
return list.map(function (item) {
return item.label;
}).join(" ".concat(separator, " "));
};
_this.series = [];
return _this;
}
(0, _createClass2.default)(CascadeSelect, [{
key: "checkChange",
value: function checkChange(e) {
var level = e.level,
index = e.index;
var checkes = this.state.checkes;
for (var i = level; i < checkes.length - 1; i++) {
checkes[i + 1] = -1;
}
checkes[level] = index;
this.setState({
checkes: checkes
});
}
}, {
key: "renderMenuItems",
value: function renderMenuItems() {
var _this2 = this;
var levels = [0, 1, 2, 3, 4];
var _this$props2 = this.props,
children = _this$props2.children,
mapper = _this$props2.mapper;
var list = levels.map(function (item, index) {
return _react.default.createElement(_CascadeOption.default, {
children: children,
key: item,
level: item,
open: _this2.state.opens[item],
options: _this2.state.data[item],
onChange: _this2.handelMenuChange,
checkedIndex: _this2.state.checkes[item],
mapper: mapper
});
});
return list;
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
classes = _this$props3.classes,
label = _this$props3.label,
options = _this$props3.options,
notFound = _this$props3.notFound,
width = _this$props3.width;
var _this$state = this.state,
open = _this$state.open,
anchorEl = _this$state.anchorEl;
var hasData = options && options.length > 0;
var t = _react.default.createElement("div", {
className: classes.noData
}, notFound);
return _react.default.createElement("div", {
className: classes.root
}, _react.default.createElement("div", {
className: classes.inputBox
}, _react.default.createElement(_TextField.default, {
InputProps: {
endAdornment: _react.default.createElement(_InputAdornment.default, {
position: "end"
}, _react.default.createElement(_ArrowDropDown.default, {
className: classes.arrowDown
}))
},
style: {
width: width
},
onClick: this.handleInputClick,
id: "select",
label: label,
className: classes.textField,
value: this.state.textFieldValue,
onChange: this.handleChange(),
margin: "normal"
})), _react.default.createElement(_Popover.default, {
anchorEl: anchorEl,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left'
},
transformOrigin: {
vertical: 'top',
horizontal: 'left'
},
open: open,
onClose: this.handlePopOverClose
}, _react.default.createElement("div", {
className: classes.menuBox
}, hasData ? this.renderMenuItems() : t)));
}
}]);
return CascadeSelect;
}(_react.default.Component);
CascadeSelect.propTypes = {
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* The label content.
*/
label: _propTypes.default.node,
/**
* render maps,
*/
mapper: _propTypes.default.shape({
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
}),
/**
* Callback when finishing cascader select
*/
onChange: _propTypes.default.func,
/**
* data options of cascade
*/
options: _propTypes.default.array.isRequired,
/**
* Render the selected item.
*
* @param {array} list The selected items `array`.
* @returns {String}
*/
renderValue: _propTypes.default.func,
/**
* The separator between different levels
*/
separator: _propTypes.default.string,
/**
* The width of cascader
*/
width: _propTypes.default.number
};
CascadeSelect.defaultProps = {
mapper: {
label: 'label',
value: 'value'
},
width: 150,
separator: '/'
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMCascadeSelect'
})(CascadeSelect);
exports.default = _default;