@6thquake/react-material
Version:
React components that implement Google's Material Design.
278 lines (228 loc) • 8.22 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _Dialog = _interopRequireDefault(require("../Dialog"));
var _DialogTitle = _interopRequireDefault(require("../DialogTitle"));
var _DialogActions = _interopRequireDefault(require("../DialogActions"));
var _DialogContent = _interopRequireDefault(require("../DialogContent"));
var _icons = require("@material-ui/icons");
var _transitions = require("../transitions");
var _Button = _interopRequireDefault(require("../Button"));
var _Typography = _interopRequireDefault(require("../Typography"));
var _colorManipulator = require("../styles/colorManipulator");
var _Grid = _interopRequireDefault(require("../Grid"));
var styles = function styles(theme) {
return {
title: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
close: {
color: (0, _colorManipulator.fade)(theme.palette.primary.contrastText, 0.68),
'&:hover': {
color: theme.palette.primary.contrastText
}
},
contentRoot: {
padding: '0px 0px'
},
actionRoot: {
margin: 0,
padding: "".concat(theme.spacing(1), "px ").concat(theme.spacing(2), "px ").concat(theme.spacing(1) * 2, "px ").concat(theme.spacing(2), "px")
},
actionRootBtn: {
margin: "0 ".concat(theme.spacing(1), "px 0 ").concat(theme.spacing(1), "px")
},
justifyActions: {
width: '100%',
display: 'flex',
justifyContent: 'space-between'
}
};
};
var Modal =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(Modal, _Component);
function Modal() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Modal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Modal)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.transition = function (props) {
switch (_this.props.animation) {
case 'fade':
return _react.default.createElement(_transitions.Fade, props);
break;
case 'slide':
return _react.default.createElement(_transitions.Slide, (0, _extends2.default)({
direction: "up"
}, props));
break;
case 'collapse':
return _react.default.createElement(_transitions.Collapse, props);
break;
case 'grow':
return _react.default.createElement(_transitions.Grow, props);
break;
case 'zoom':
return _react.default.createElement(_transitions.Zoom, props);
break;
default:
return _react.default.createElement(_transitions.Fade, props);
}
};
return _this;
}
(0, _createClass2.default)(Modal, [{
key: "handleOK",
value: function handleOK() {
this.props.onClose;
}
}, {
key: "renderActions",
value: function renderActions() {
var _this$props = this.props,
actions = _this$props.actions,
onClose = _this$props.onClose,
classes = _this$props.classes;
if (actions === Modal.defaultProps.actions) {
// 没传actions
return actions.map(function (Button) {
return _react.default.cloneElement(Button, {
onClick: onClose,
classes: {
root: classes.actionRootBtn
}
});
});
}
if (actions.indexOf('-') === -1) {
return actions;
}
return this.renderJustifyActions();
}
}, {
key: "renderJustifyActions",
value: function renderJustifyActions() {
var _this$props2 = this.props,
actions = _this$props2.actions,
classes = _this$props2.classes;
var index = actions.indexOf('-');
var left = actions.slice(0, index);
var right = actions.slice(index + 1);
return _react.default.createElement("div", {
className: classes.justifyActions
}, _react.default.createElement("div", {
className: classes.left
}, left), _react.default.createElement("div", {
className: classes.right
}, right));
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
classes = _this$props3.classes,
title = _this$props3.title,
onClose = _this$props3.onClose,
scroll = _this$props3.scroll,
actions = _this$props3.actions,
other = (0, _objectWithoutProperties2.default)(_this$props3, ["classes", "title", "onClose", "scroll", "actions"]);
return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
TransitionComponent: this.transition,
"aria-labelledby": "alert-dialog-slide-title",
"aria-describedby": "alert-dialog-slide-description",
scroll: scroll
}, this.props), _react.default.createElement(_DialogTitle.default, {
className: classes.title,
disableTypography: true
}, _react.default.createElement(_Grid.default, {
container: true,
direction: "row",
justify: "space-between",
alignItems: "center"
}, _react.default.createElement(_Grid.default, {
item: true
}, _react.default.createElement(_Typography.default, {
variant: "title",
color: "inherit"
}, title)), _react.default.createElement(_Grid.default, {
item: true
}, _react.default.createElement(_icons.Clear, {
className: classes.close,
onClick: onClose
})))), _react.default.createElement(_DialogContent.default, {
classes: {
root: classes.contentRoot
}
}, this.props.children), _react.default.createElement(_DialogActions.default, {
classes: {
root: classes.actionRoot
}
}, this.renderActions()));
}
}]);
return Modal;
}(_react.Component);
Modal.propTypes = {
/**
* actions button array
*/
actions: _propTypes.default.array,
/**
* This is usually an animation of open or close the modal,include slide、collapse、fade、grow、zoom
*/
animation: _propTypes.default.oneOf(['slide', 'collapse', 'fade', 'grow', 'zoom']),
/**
* This is the modal's title
*/
label: _propTypes.default.string,
/**
* onClose callback function
*/
onClose: _propTypes.default.func.isRequired,
/**
* Decide modal open or close, If true, the modal is open.
*/
open: _propTypes.default.bool.isRequired,
/**
* scroll type
*/
scroll: _propTypes.default.oneOf(['paper', 'body']),
/**
* @deprecated
* This is the modal's title, please using title instead.
*/
title: _propTypes.default.string
};
Modal.defaultProps = {
open: false,
label: '',
title: '',
animation: 'zoom',
onClose: function onClose() {},
actions: [],
scroll: 'paper'
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMModal'
})(Modal);
exports.default = _default;