joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
309 lines (280 loc) • 33.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _core = require('@material-ui/core');
var _Slide = require('@material-ui/core/Slide');
var _Slide2 = _interopRequireDefault(_Slide);
var _Fade = require('@material-ui/core/Fade');
var _Fade2 = _interopRequireDefault(_Fade);
var _Button = require('@material-ui/core/Button');
var _Button2 = _interopRequireDefault(_Button);
var _constants = require('../constants');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 {} 自定义模态框
* @apiName 自定义弹框，搭配 DialogFD 使用，可以通过 children 在内容区放入自己的 想要展示的组件
* @apiGroup 组件使用
* @apiParam {String} className 自定义样式名，用于自定义样式时使用
* @apiParam {String} colorSystem 色系，gray 灰色按钮； 默认为绿色
* @apiParam {Bool} saveBtnDisabled 保存按钮是否禁用，true 禁用；false 不禁用（可点击）
* @apiParam {React Component} children react组件，你的弹框主要内容。 比如 <SubscribeCreate />
*
* @apiSuccessExample {json} 使用案例:
* 以创建订阅号为例
import { DialogFD, CustomModal } from 'joywok-material-components';
import SubscribeCreate from '../../components/subscribe/subscribeCreat/Create';
Create(){ // 自己页面中的某个方法
let a = DialogFD({
app: window.dvaApp,
data: {
dialogType: 'custom',
open: true,
title: i18n("label.list.setting"),
hasclose: true,
className: "custom-dialog",
manualCloase: true,
colorSystem: 'gray', // 色系，gray 灰色按钮； 默认为绿色
children: <SubscribeCreate></SubscribeCreate>
},
manualCloase: true,
component: CustomModal,
})
a.events.on('save', function (components) {
// todo 保存数据请求
console.log('save:')
// 保存数据请求回来之后，调用关闭方法
a.close()
})
a.events.on('close', function (components,) {
console.log('close')
a.close()
})
}
*
*
*/
var styles = function styles(theme) {
return {
buttonItem: {
minWidth: window.unit * 7.8,
height: window.unit * 3,
lineHeight: window.unit * 3 + 'px',
padding: 0,
minHeight: 0
},
// 绿色按钮 默认是绿色
agreeBtn: Underscore.extend({
minWidth: window.unit * 7.8 + 'px ',
background: "#00C78B",
color: '#ffffff',
"&:hover": {
background: "#00C78B"
},
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * 1.2 + 'px '
}),
cancelBtn: {
minWidth: window.unit * 7.8 + 'px ',
background: "#ffffff",
color: '#00C78B',
"&:hover": {
background: "#ffffff"
},
border: '1px solid #00C78B',
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * 1.2 + 'px '
},
// 灰色按钮
agreeBtnGray: Underscore.extend({
minWidth: window.unit * 7.8 + 'px ',
background: "#404A53",
color: '#ffffff',
"&:hover": {
background: "#404A53"
},
"&[disabled]": {
background: "#EEEEEE",
color: "#B0B0B0"
},
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * 1.2 + 'px '
}),
cancelBtnGray: {
minWidth: window.unit * 7.8 + 'px ',
background: "#ffffff",
color: '#404A53',
"&:hover": {
background: "#ffffff"
},
"&[disabled]": {
border: "1px solid #E0E0E0",
color: "#B0B0B0"
},
border: '1px solid #404A53',
borderRadius: 3,
marginRight: 0,
marginLeft: window.unit * 1.2 + 'px '
}
};
};
require('./style/CustomModal.css');
var CustomModal = function (_React$Component) {
_inherits(CustomModal, _React$Component);
function CustomModal(props) {
_classCallCheck(this, CustomModal);
var _this = _possibleConstructorReturn(this, (CustomModal.__proto__ || Object.getPrototypeOf(CustomModal)).call(this, props));
_this.state = {
open: true,
colorSystem: props.colorSystem || 'green',
saveBtnDisabled: typeof props.saveBtnDisabled == "boolean" ? props.saveBtnDisabled : false,
saveBtnText: props.saveBtnText || (0, _constants.COMPONENT_DICT)('label.business.save'),
savingBtnText: props.savingBtnText || (0, _constants.COMPONENT_DICT)('label.business.saving')
};
return _this;
}
_createClass(CustomModal, [{
key: 'removeCustomDialog',
value: function removeCustomDialog() {
var self = this;
setTimeout(function () {
$('#root-' + self.props.containerId).remove();
$('body').removeClass('overflowhidden');
}, 350);
}
}, {
key: 'handleClose',
value: function handleClose(e) {
this.setState({ open: false });
this.props.onClose && this.props.onClose();
if (typeof this.props.dialogType != 'undefined') {
this.props.events.emit('close', this);
}
this.removeCustomDialog();
}
}, {
key: 'handleDialogClose',
value: function handleDialogClose() {
this.setState({ open: false });
this.removeCustomDialog();
}
}, {
key: 'agreeClick',
value: function agreeClick() {
this.props.onSave && this.props.onSave();
if (typeof this.props.dialogType != 'undefined') {
this.props.events.emit('save', this);
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
console.log('custommodal::', this.state);
var classes = this.props.classes;
var data = this.props;
var self = this;
var cancelBtn = this.state.colorSystem == 'gray' ? classes.cancelBtnGray : classes.cancelBtn;
var agreeBtn = this.state.colorSystem == 'gray' ? classes.agreeBtnGray : classes.agreeBtn;
return _react2.default.createElement(
'div',
{ ref: 'asdasdasd', className: "zzzzzzzz " + this.props.className },
_react2.default.createElement(
'div',
{ className: 'jw-custom-modal' },
_react2.default.createElement(
_Fade2.default,
{ 'in': this.state.open },
_react2.default.createElement('div', { className: 'jw-custom-modal-bg' })
),
_react2.default.createElement(
_Slide2.default,
{ direction: 'up', 'in': this.state.open },
_react2.default.createElement(
'div',
{ className: "jw-custom-modal-w", onClick: function onClick(e) {
e.nativeEvent.stopImmediatePropagation();e.stopPropagation();
} },
_react2.default.createElement(
'div',
{ className: "jw-custom-modal-c" },
_react2.default.createElement(
'div',
{ className: 'jw-custom-modal-h' },
_react2.default.createElement('i', { className: 'icon-dialog-close', onClick: function onClick(e) {
return self.handleClose(e);
} }),
_react2.default.createElement(
'span',
null,
this.props.title || ""
)
),
_react2.default.createElement(
'div',
{ className: 'jw-custom-modal-main' },
this.props.children
),
this.props.btns ? this.props.btns : _react2.default.createElement(
'div',
{ className: 'jw-custom-modal-btn' },
_react2.default.createElement(
_Button2.default,
{ onClick: function onClick(e) {
return _this2.handleClose(e);
}, className: classes.buttonItem + ' ' + cancelBtn },
i18n("btn.cancel")
),
this.state.saveBtnDisabled == true || this.state.saveBtnDisabled == 'saving' ?
// 禁用
_react2.default.createElement(
_Button2.default,
{ disabled: true, className: classes.buttonItem + ' ' + agreeBtn },
this.state.saveBtnDisabled == 'saving' ? this.state.savingBtnText : this.state.saveBtnText
) :
// 不禁用
_react2.default.createElement(
_Button2.default,
{ onClick: function onClick(e) {
return _this2.agreeClick(e);
}, className: classes.buttonItem + ' ' + agreeBtn },
i18n("btn.save")
)
)
)
)
)
)
);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var self = this;
$('body').addClass('overflowhidden');
var fdEvents = this.props.events;
// true 或 false 或 'saving'
fdEvents.on('saveBtnDisabled', function (value) {
if (self.state.saveBtnDisabled != value) {
self.setState({
saveBtnDisabled: value
});
}
});
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {}
}]);
return CustomModal;
}(_react2.default.Component);
exports.default = (0, _core.withStyles)(styles)(CustomModal);