@6thquake/react-material
Version:
React components that implement Google's Material Design.
318 lines (290 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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 _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Popover = _interopRequireDefault(require("../../Popover"));
var _Chip = _interopRequireDefault(require("../../Chip"));
var _Grid = _interopRequireDefault(require("../../Grid"));
var _Button = _interopRequireDefault(require("../../Button"));
var _TextField = _interopRequireDefault(require("../../TextField"));
var _CrossTabulationDragSource = _interopRequireDefault(require("./CrossTabulationDragSource"));
var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
var _styles = require("../../styles");
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
container: {
display: 'inline-block'
},
box: {
width: '300px',
backgroundColor: '#fff',
textAlign: 'center',
userSelect: 'none',
minHeight: '100px',
padding: '8px',
margin: '0px'
},
input: {
color: '#506784',
padding: '0 3px',
fontSize: '14px',
'&:focus': {}
},
p: {
padding: '2px 0px',
margin: '0px'
},
h4: {
margin: '2px'
},
button: {
color: '#2a3f5f',
margin: '0px'
},
closeX: {
fontSize: '18px',
cursor: 'pointer',
textDecoration: 'none !important'
},
filter: {
textAlign: 'left',
fontSize: '14px',
whiteSpace: 'nowrap',
overflowY: 'scroll',
width: '100%',
maxHeight: '30vh'
},
item: {
margin: '0',
marginBottom: '1px',
padding: '4px 4px 4px 32px',
cursor: 'default',
'&:hover': {
background: '#f2f7ff'
}
},
selectedItem: {
margin: '0',
marginBottom: '1px',
padding: '4px 4px 4px 32px',
cursor: 'default',
background: '#ebf0f8',
'&:before': {
content: '"√"',
fontSize: '12px',
position: 'absolute',
left: '12px'
}
},
only: {
display: 'none',
width: '35px',
float: 'left',
fontSize: '12px',
paddingLeft: '5px',
cursor: 'pointer'
},
onlySpacer: {
display: 'block',
width: '35px',
float: 'left'
},
filtered: {
fontStyle: 'italic'
}
};
};
/**
* @ignore - internal component.
*/
var CrossCrossTabulationColumn =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(CrossCrossTabulationColumn, _React$Component);
function CrossCrossTabulationColumn(props) {
var _this;
(0, _classCallCheck2.default)(this, CrossCrossTabulationColumn);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CrossCrossTabulationColumn).call(this, props));
_this.state = {
open: false,
top: 0,
left: 0,
filterText: ''
};
return _this;
}
(0, _createClass2.default)(CrossCrossTabulationColumn, [{
key: "toggleValue",
value: function toggleValue(value) {
if (value in this.props.valueFilter) {
this.props.removeValuesFromFilter(this.props.name, [value]);
} else {
this.props.addValuesToFilter(this.props.name, [value]);
}
}
}, {
key: "matchesFilter",
value: function matchesFilter(x) {
return x.toLowerCase().trim().includes(this.state.filterText.toLowerCase().trim());
}
}, {
key: "selectOnly",
value: function selectOnly(e, value) {
e.stopPropagation();
this.props.setValuesInFilter(this.props.name, Object.keys(this.props.attrValues).filter(function (y) {
return y !== value;
}));
}
}, {
key: "getFilterBox",
value: function getFilterBox() {
var _this2 = this;
var classes = this.props.classes;
var showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit;
var values = Object.keys(this.props.attrValues);
var shown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
return _react.default.createElement(_Popover.default, {
open: !!this.state.anchorEl && this.state.open,
anchorEl: this.state.anchorEl,
anchorReference: 'anchorEl',
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left'
},
transformOrigin: {
vertical: 'top',
horizontal: 'left'
}
}, _react.default.createElement("div", {
className: classes.box,
style: {
cursor: 'initial'
}
}, _react.default.createElement(_Grid.default, {
container: true,
spacing: 0
}, _react.default.createElement(_Grid.default, {
item: true,
xs: 1
}, _react.default.createElement("span", null, "\u2630")), _react.default.createElement(_Grid.default, {
item: true,
xs: 10
}, _react.default.createElement("h4", {
className: classes.h4
}, this.props.name)), _react.default.createElement(_Grid.default, {
item: true,
xs: 1
}, _react.default.createElement("a", {
onClick: function onClick() {
return _this2.setState({
open: false
});
},
className: classes.closeX
}, "\xD7"))), showMenu || _react.default.createElement("p", null, "(too many values to show)"), showMenu && _react.default.createElement("p", {
className: classes.p
}, _react.default.createElement(_TextField.default, {
label: "Filter",
placeholder: "Filter values",
className: classes.input,
value: this.state.filterText,
fullWidth: true,
margin: "normal",
InputLabelProps: {
shrink: true
},
onChange: function onChange(e) {
return _this2.setState({
filterText: e.target.value
});
}
}), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
role: "button",
className: classes.button,
onClick: function onClick() {
return _this2.props.removeValuesFromFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
}
}, "Select ", values.length === shown.length ? 'All' : shown.length), ' ', _react.default.createElement(_Button.default, {
role: "button",
className: classes.button,
onClick: function onClick() {
return _this2.props.addValuesToFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
}
}, "Deselect ", values.length === shown.length ? 'All' : shown.length)), showMenu && _react.default.createElement("div", {
className: classes.filter
}, shown.map(function (x) {
return _react.default.createElement("p", {
key: x,
onClick: function onClick() {
return _this2.toggleValue(x);
},
className: x in _this2.props.valueFilter ? classes.item : classes.selectedItem
}, _react.default.createElement("a", {
className: classes.only,
onClick: function onClick(e) {
return _this2.selectOnly(e, x);
}
}, "only"), _react.default.createElement("a", {
className: classes.onlySpacer
}, "\xA0"), x === '' ? _react.default.createElement("em", null, "null") : x);
}))));
}
}, {
key: "toggleFilterBox",
value: function toggleFilterBox(event) {
this.setState({
open: !this.state.open,
anchorEl: event.target
});
}
}, {
key: "render",
value: function render() {
var classes = this.props.classes;
var filtered = Object.keys(this.props.valueFilter).length !== 0 ? classes.filtered : null;
var _this$props = this.props,
connectDragSource = _this$props.connectDragSource,
isDragging = _this$props.isDragging;
return _react.default.createElement(_CrossTabulationDragSource.default, this.props, _react.default.createElement("div", {
className: classes.container,
"data-id": this.props.name
}, _react.default.createElement(_Chip.default, {
label: this.props.name,
onDelete: this.toggleFilterBox.bind(this),
className: filtered,
deleteIcon: _react.default.createElement(_KeyboardArrowDown.default, null)
}), this.state.open ? this.getFilterBox() : null));
}
}]);
return CrossCrossTabulationColumn;
}(_react.default.Component);
CrossCrossTabulationColumn.defaultProps = {
valueFilter: {}
};
CrossCrossTabulationColumn.propTypes = {
addValuesToFilter: _propTypes.default.func.isRequired,
attrValues: _propTypes.default.objectOf(_propTypes.default.number).isRequired,
menuLimit: _propTypes.default.number,
name: _propTypes.default.string.isRequired,
removeValuesFromFilter: _propTypes.default.func.isRequired,
sorter: _propTypes.default.func.isRequired,
valueFilter: _propTypes.default.objectOf(_propTypes.default.bool),
zIndex: _propTypes.default.number
};
var _default = (0, _styles.withStyles)(styles, {
name: 'RMCrossCrossTabulationColumn'
})(CrossCrossTabulationColumn);
exports.default = _default;