@6thquake/react-material
Version:
React components that implement Google's Material Design.
293 lines (238 loc) • 8.61 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _Dialog = _interopRequireDefault(require("../Dialog"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
var _DialogActions = _interopRequireDefault(require("../DialogActions"));
var _DialogTitle = _interopRequireDefault(require("../DialogTitle"));
var _DialogContent = _interopRequireDefault(require("../DialogContent"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _classnames = _interopRequireDefault(require("classnames"));
var _transitions = require("../transitions");
var _LocaleProvider = require("../LocaleProvider");
var _icons = require("@material-ui/icons");
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
title: {
color: 'white',
fontSize: '1rem',
fontWeight: '700'
},
icon: {
color: 'white',
float: 'right',
'&:hover': {
opacity: 0.5
}
},
contentRoot: {
paddingTop: theme.spacing(3)
},
actionsRoot: {
justifyContent: 'center'
},
head: {},
content: {
marginLeft: theme.spacing(4),
color: 'rgba(0,0,0,.65)',
fontSize: '14px',
marginTop: '8px'
},
info: {
backgroundColor: '#1890ff'
},
done: {
backgroundColor: '#52c41a'
},
cancel: {
backgroundColor: '#f5222d'
},
error: {
backgroundColor: '#faad14'
},
warning: {
backgroundColor: '#faad14'
}
};
};
var ConfirmDialog =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(ConfirmDialog, _Component);
function ConfirmDialog() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, ConfirmDialog);
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)(ConfirmDialog)).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)(ConfirmDialog, [{
key: "render",
value: function render() {
var _classNames;
var _this$props = this.props,
onCancel = _this$props.onCancel,
onOk = _this$props.onOk,
onClose = _this$props.onClose,
zIndex = _this$props.zIndex,
onExited = _this$props.onExited,
open = _this$props.open,
keyboard = _this$props.keyboard,
cancelText = _this$props.cancelText,
okText = _this$props.okText,
closeText = _this$props.closeText,
title = _this$props.title,
content = _this$props.content,
type = _this$props.type,
okType = _this$props.okType,
cancelType = _this$props.cancelType,
variant = _this$props.variant,
size = _this$props.size,
classes = _this$props.classes,
other = (0, _objectWithoutProperties2.default)(_this$props, ["onCancel", "onOk", "onClose", "zIndex", "onExited", "open", "keyboard", "cancelText", "okText", "closeText", "title", "content", "type", "okType", "cancelType", "variant", "size", "classes"]);
var okCancel = 'okCancel' in this.props ? this.props.okCancel : true;
var cancelButton = okCancel && _react.default.createElement(_ActionButton.default, {
actionFn: onCancel,
closeModal: onClose,
type: cancelType,
size: size
}, cancelText);
var classNameColor = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.info, type === 'info'), (0, _defineProperty2.default)(_classNames, classes.done, type === 'done'), (0, _defineProperty2.default)(_classNames, classes.cancel, type === 'cancel'), (0, _defineProperty2.default)(_classNames, classes.error, type === 'error'), (0, _defineProperty2.default)(_classNames, classes.warning, type === 'contact_support'), _classNames));
return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
TransitionComponent: this.transition,
"aria-labelledby": "alert-dialog-slide-title",
"aria-describedby": "alert-dialog-slide-description"
}, this.props), _react.default.createElement(_DialogTitle.default, {
className: "".concat(classes.title, " ").concat(classNameColor),
disableTypography: true
}, title, _react.default.createElement(_icons.Clear, {
className: classes.icon,
onClick: onClose
})), _react.default.createElement(_DialogContent.default, {
classes: {
root: classes.contentRoot
}
}, content), _react.default.createElement(_DialogActions.default, {
classes: {
root: classes.actionsRoot
}
}, cancelButton, _react.default.createElement(_ActionButton.default, {
type: type,
actionFn: onOk,
closeModal: onClose,
variant: variant,
size: size,
autoFocus: true
}, type === 'contact_support' ? okText : closeText)));
}
}]);
return ConfirmDialog;
}(_react.Component);
ConfirmDialog.propTypes = {
/**
* 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']),
/**
* Cancel button text
*/
cancelText: _propTypes.default.string,
/**
*
*/
cancelType: _propTypes.default.string,
/**
* This is modal content
*/
content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/**
* Confirm button text
*/
okText: _propTypes.default.string,
/**
*
*/
okType: _propTypes.default.string,
/**
* Cancel button callback
*/
onCancel: _propTypes.default.func,
/**
* Confirm button callback
*/
onOk: _propTypes.default.func,
/**
* Decide modal open or close, If true, the modal is open.
*/
open: _propTypes.default.bool.isRequired,
/**
*
*/
size: _propTypes.default.string,
/**
* This is modal title
*/
title: _propTypes.default.string,
/**
* The variant to use.
*/
variant: _propTypes.default.string
};
ConfirmDialog.defaultProps = {
open: false,
title: '',
animation: 'fade',
okType: 'success',
cancelType: 'primary',
variant: 'raised',
size: 'small'
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMConfirmDialog'
})((0, _LocaleProvider.withLocale)({
name: 'Confirm'
})(ConfirmDialog));
exports.default = _default;