joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
154 lines (117 loc) • 17.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Snackbar = require('@material-ui/core/Snackbar');
var _Snackbar2 = _interopRequireDefault(_Snackbar);
var _OperateToast = require('./OperateToast');
var _OperateToast2 = _interopRequireDefault(_OperateToast);
var _CheckCircle = require('@material-ui/icons/CheckCircle');
var _CheckCircle2 = _interopRequireDefault(_CheckCircle);
var _Error = require('@material-ui/icons/Error');
var _Error2 = _interopRequireDefault(_Error);
var _HighlightOff = require('@material-ui/icons/HighlightOff');
var _HighlightOff2 = _interopRequireDefault(_HighlightOff);
require('./style/index.css');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
*
* @api {} JwToast 基础信息提示控件
*
* @apiParams {centerTop ｜ centerBottom} origin 信息提示控件所显示的位置
* @apiParams {success | error | info } theme 主题
* @apiParams {String} message 信息提示内容
* @apiParams {Element} PrefixIcon 信息提示的前缀 Icon 图标
* @apiParams {Boolean} open 控制显示与隐藏的状态变量
* @apiParams {Function} onClose 关闭 JwToast 的回调函数
* @apiParams {String} className 样式类名
* @apiParams {Object} style 行内样式
*
* @apiSuccessExample {json} 使用案例:
import JwToast from "joywok-material-components/lib/toast"
普通 Toast，居中，中上方位置，3000ms 后自动消失
<JwToast
message="收藏成功"
PrefixIcon={Collections}
open={this.state.open}
onClose={() => this.setState({ open: false })} />
*/
var contentStyle = { minWidth: 200, padding: '0px 10px', borderRadius: '3px', height: 50, background: '#333333', color: '#fff', lineHeight: '50px', textAlign: 'center' };
var iconStyle = { verticalAlign: 'middle', fontSize: 20, marginRight: 10, opacity: 0.8 };
// Toast 位置下属性的映射表
var originMap = {
centerTop: {
anchorOrigin: { horizontal: 'center', vertical: 'top' },
style: { top: 200, minWidth: 220 },
autoHideDuration: 3000
},
centerBottom: {
anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
style: { bottom: 200, minWidth: 220 },
autoHideDuration: 3000
}
// 主题映射表
};var themeMap = {
success: {
ThemeIcon: _CheckCircle2.default
},
error: {
ThemeIcon: _HighlightOff2.default
},
info: {
ThemeIcon: _Error2.default
}
};
var JwToast = function (_React$PureComponent) {
_inherits(JwToast, _React$PureComponent);
function JwToast() {
_classCallCheck(this, JwToast);
return _possibleConstructorReturn(this, (JwToast.__proto__ || Object.getPrototypeOf(JwToast)).apply(this, arguments));
}
_createClass(JwToast, [{
key: 'render',
value: function render() {
var _props = this.props,
origin = _props.origin,
theme = _props.theme,
message = _props.message,
PrefixIcon = _props.PrefixIcon,
className = _props.className,
other = _objectWithoutProperties(_props, ['origin', 'theme', 'message', 'PrefixIcon', 'className']);
var _originMap = originMap[origin || 'centerTop'],
style = _originMap.style,
defaultProps = _objectWithoutProperties(_originMap, ['style']);
PrefixIcon = PrefixIcon || PrefixIcon === null ? PrefixIcon : themeMap[theme || 'success'].ThemeIcon;
style = Object.assign({}, style, this.props.style);
className = className ? 'jw-snackbar ' + className : 'jw-snackbar';
return _react2.default.createElement(
_Snackbar2.default,
_extends({}, defaultProps, other, {
className: className,
style: style,
open: this.props.open }),
_react2.default.createElement(
'div',
{ style: contentStyle },
PrefixIcon && _react2.default.createElement(PrefixIcon, { style: iconStyle }),
_react2.default.createElement(
'span',
{ style: { opacity: 0.8, verticalAlign: 'middle' } },
message
)
)
);
}
}]);
return JwToast;
}(_react2.default.PureComponent);
// 具有操作功能的 Toast
JwToast.OperateToast = _OperateToast2.default;
exports.default = JwToast;