@6thquake/react-material
Version:
React components that implement Google's Material Design.
374 lines (331 loc) • 10.1 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 _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../Button"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _Typography = _interopRequireDefault(require("../Typography"));
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
var _recompose = require("recompose");
/**
* @ignore - internal component.
*/
var tagStyle = function tagStyle(theme) {
return {
root: {
display: 'flex',
padding: "".concat(theme.spacing(0.25), "px ").concat(theme.spacing(1), "px"),
justifyContent: 'center',
alignItems: 'center'
}
};
};
var Tag = function Tag(_ref) {
var classes = _ref.classes,
color = _ref.color,
theme = _ref.theme,
children = _ref.children;
var paletteColor = theme.palette[color];
var c = paletteColor ? paletteColor.main : theme.palette.grey[200];
var style = {
borderRadius: "".concat(theme.shape.borderRadius / 2, "px"),
border: "1px solid ".concat(c)
};
return _react.default.createElement(_Typography.default, {
className: classes.root,
color: color,
style: style
}, children);
};
Tag = (0, _withStyles.default)(tagStyle, {
withTheme: true
})(Tag);
var styles = function styles(theme) {
return {
root: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch',
position: 'relative',
height: '100vh',
minHeight: '100vh',
width: '100%',
flex: 1,
// paddingLeft: theme.spacing(2),
// paddingRight: theme.spacing(2),
boxSizing: 'border-box'
},
filters: {
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
overflow: 'auto',
flex: 1,
padding: "".concat(theme.spacing(2), "px")
},
options: {
paddingBottom: theme.spacing(1.5),
paddingTop: theme.spacing(1.5),
'&:not(:first-child)': {
borderTop: "1px solid ".concat(theme.palette.grey[200])
}
},
tags: {
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingBottom: theme.spacing(1.5),
paddingTop: theme.spacing(1.5)
},
spacing: {
flex: 1,
minWidth: '31%',
maxWidth: '31%'
},
tag: {
flex: 1,
minWidth: '31%',
maxWidth: '31%',
paddingBottom: theme.spacing(1),
paddingTop: theme.spacing(1)
},
actions: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center'
},
buttonBox: {
width: '50%',
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-end',
'&.primary': {
background: theme.palette.primary.main
}
},
button: {
width: '100%',
boxShadow: 'none',
borderRadius: '0px',
height: theme.spacing(6)
}
};
};
var ActionFilter =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(ActionFilter, _React$Component);
function ActionFilter(props) {
var _this;
(0, _classCallCheck2.default)(this, ActionFilter);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ActionFilter).call(this, props));
_this.state = {
data: []
};
_this.handleOkClick = function () {
var options = _this.state.data;
var onOk = _this.props.onOk;
var selections = options.map(function (item) {
var label = item.label,
value = item.value,
data = item.data;
var activeTag = data.filter(function (d) {
return d.active;
});
return {
label: label,
value: value,
data: (0, _cloneDeep.default)(activeTag)
};
}).filter(function (item) {
return item.data.length > 0;
});
onOk(selections);
};
_this.handleResetClick = function () {
var _this$props = _this.props,
data = _this$props.data,
onReset = _this$props.onReset,
onChange = _this$props.onChange;
var _data = (0, _cloneDeep.default)(data);
var selections = _data.map(function (item) {
var label = item.label,
value = item.value;
var activeTag = item.data.filter(function (d) {
return d.active;
});
return {
label: label,
value: value,
data: (0, _cloneDeep.default)(activeTag)
};
}).filter(function (item) {
return item.data.length > 0;
});
_this.setState({
data: _data
}, function () {
onChange((0, _cloneDeep.default)(_data));
onReset(selections);
});
};
_this.state.data = props.data;
return _this;
}
(0, _createClass2.default)(ActionFilter, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var data = this.props.data;
if (nextProps.data !== data) {
this.setState({
data: nextProps.data
});
}
}
}, {
key: "handleClick",
value: function handleClick(i, j, immediately) {
var _this2 = this;
var onChange = this.props.onChange;
var data = this.state.data;
var options = (0, _cloneDeep.default)(data);
var option = options[i];
if (option.single) {
option.data.forEach(function (item, index) {
if (index !== j) {
item.active = false;
}
});
}
var tag = option.data[j];
tag.active = !tag.active;
if (option.required) {
var ops = option.data.filter(function (item) {
return item.active;
});
if (ops.length <= 0) {
tag.active = true;
}
}
this.setState({
data: options
}, function () {
onChange((0, _cloneDeep.default)(options));
immediately && _this2.handleOkClick();
});
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props2 = this.props,
classes = _this$props2.classes,
width = _this$props2.width;
var options = this.state.data;
var filtersStyle = {
width: width
};
return _react.default.createElement("div", {
className: classes.root
}, _react.default.createElement("div", {
style: filtersStyle,
className: classes.filters
}, _react.default.createElement("div", {
className: classes.box
}, options && options.map(function (option, i) {
var label = option.label,
value = option.value,
data = option.data;
return _react.default.createElement("div", {
key: value,
className: classes.option
}, _react.default.createElement("div", {
className: classes.title
}, _react.default.createElement(_Typography.default, {
variant: "body2"
}, label)), _react.default.createElement("div", {
className: classes.tags
}, data.map(function (item, j) {
return _react.default.createElement("div", {
onClick: _this3.handleClick.bind(_this3, i, j, false),
key: item.value,
className: classes.tag
}, _react.default.createElement(Tag, {
color: item.active ? 'primary' : 'default'
}, _react.default.createElement(_Typography.default, {
color: "inherit",
variant: "body1"
}, item.label)));
}), _react.default.createElement("div", {
className: classes.spacing
})));
}))), _react.default.createElement("div", {
className: classes.actions
}, _react.default.createElement("div", {
className: classes.buttonBox
}, _react.default.createElement(_Button.default, {
className: classes.button,
color: "default",
variant: "text",
onClick: this.handleResetClick,
size: "normal"
}, "\u91CD\u7F6E")), _react.default.createElement("div", {
className: classes.buttonBox
}, _react.default.createElement(_Button.default, {
className: classes.button,
color: "primary",
variant: "contained",
onClick: this.handleOkClick,
size: "normal"
}, "\u786E\u5B9A"))));
}
}]);
return ActionFilter;
}(_react.default.Component);
ActionFilter.propTypes = {
/**
* data of action filter
*/
data: _propTypes.default.array,
/**
* Callback fired when the selected value to be changed.
*/
onChange: _propTypes.default.func,
/**
* Callback fired when the confirm button to be clicked.
*/
onOk: _propTypes.default.func,
/**
* Callback fired when the reset button to be clicked.
*/
onReset: _propTypes.default.func,
/**
* the width of action filter.
*/
width: _propTypes.default.width
};
ActionFilter.defaultProps = {
onOk: function onOk() {},
onChange: function onChange() {},
onReset: function onReset() {},
data: [],
width: 300
};
var _default = (0, _recompose.compose)((0, _withStyles.default)(styles, {
name: 'RMActionFilter',
withTheme: true
}))(ActionFilter);
exports.default = _default;