micro-ui-y
Version:
273 lines (238 loc) • 11.8 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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _style = require('./style');
var _utils = require('./utils');
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; }
// import {_utils} from '../index';
// let render = 1;
var Dialog = function (_Component) {
_inherits(Dialog, _Component);
function Dialog(props) {
_classCallCheck(this, Dialog);
var _this = _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).call(this, props));
_initialiseProps.call(_this);
_this.state = {
style: _style.style,
transformStyle: _style.transformStyle
};
return _this;
}
_createClass(Dialog, [{
key: 'componentWillMount',
value: function componentWillMount() {
var props = _objectWithoutProperties(this.props, []);
var sty = eval('(' + JSON.stringify(this.state.style) + ')');
// sty.mdBody.padding = props.title ? "0 1.875rem" : "1.5rem";
sty.mdBody.padding = props.title ? "0" : "1.5rem";
sty.mdTitle = props.titleStyle ? (0, _utils.merge)(sty.mdTitle, props.titleStyle) : sty.mdTitle;
sty.mdModal = props.contentStyle ? (0, _utils.merge)(sty.mdModal, props.contentStyle) : sty.mdModal;
sty.mdBody = props.bodyStyle ? (0, _utils.merge)(sty.mdBody, props.bodyStyle) : sty.mdBody;
sty.mdAction = props.actionStyle ? (0, _utils.merge)(sty.mdAction, props.actionStyle) : sty.mdAction;
this.setState({ style: sty });
}
// shouldComponentUpdate(nextProps, nextState) {
// const propsName = [
// "open",
// // "handleClose",
// "title",
// //"actions",
// "bgStyle",
// "contentStyle",
// "titleStyle",
// "bodyStyle",
// "actionStyle"
// ];
//
//
// return _utils._Check.getShouldComponentUpdate(this.props, nextProps, propsName);
//
// }
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var root = document.getElementsByTagName('body')[0];
root.style.cssText = "";
}
}, {
key: 'render',
value: function render() {
var props = _objectWithoutProperties(this.props, []),
amiType = this.amiType(this.props);
var sty = eval('(' + JSON.stringify(this.state.style) + ')');
sty.mdModal = Object.assign(sty.mdModal, props.contentStyle ? props.contentStyle : {}, props.open ? {} : { zIndex: "-1" });
if (props.open) {
var root = document.getElementsByTagName('body')[0];
root.style.cssText = "overflow: hidden;";
} else {
var _root = document.getElementsByTagName('body')[0];
_root.style.cssText = "";
}
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ style: sty.mdModal },
_react2.default.createElement(
'div',
{ style: amiType.mdContent },
_react2.default.createElement(
'div',
null,
props.title && _react2.default.createElement(
'div',
{ style: sty.titBox },
_react2.default.createElement(
'span',
{ style: sty.titSpan },
' '
),
_react2.default.createElement(
'div',
{ style: sty.mdTitle },
props.title
)
),
_react2.default.createElement(
'div',
{ style: sty.mdBody },
props.children
),
props.actions && _react2.default.createElement(
'div',
{ style: sty.mdAction },
props.actions[0] ? props.actions[0] : null,
_react2.default.createElement('div', { style: sty.spanBtn }),
props.actions[1] ? props.actions[1] : null
)
)
)
),
_react2.default.createElement('div', { style: amiType.mdOverlay, onClick: props.handleClose })
);
}
}]);
return Dialog;
}(_react.Component);
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.amiType = function (props) {
var sty = eval('(' + JSON.stringify(_this2.state.style) + ')');
var mdContent = props.open ? (0, _utils.extend)(sty.mdContentTrue, props.type ? _this2.state.transformStyle[props.type].S : _this2.state.transformStyle.SlideInTop.S) : (0, _utils.extend)(sty.mdContentFalse, props.type ? _this2.state.transformStyle[props.type].F : _this2.state.transformStyle.SlideInTop.F);
var mdOverlay = props.bgStyle ? Object.assign(sty.mdOverlay, props.bgStyle) : sty.mdOverlay;
mdOverlay = props.open ? Object.assign(mdOverlay, sty.mdShowOverlay) : mdOverlay;
return { mdContent: mdContent, mdOverlay: mdOverlay };
};
};
Dialog.propTypes = {
open: _propTypes2.default.bool,
handleClose: _propTypes2.default.func,
title: _propTypes2.default.string,
actions: _propTypes2.default.node,
bgStyle: _propTypes2.default.object,
contentStyle: _propTypes2.default.object,
titleStyle: _propTypes2.default.object,
bodyStyle: _propTypes2.default.object,
actionStyle: _propTypes2.default.object
};
exports.default = Dialog;
// Dialog.propTypes = {
//
//
// // 你可以将属性声明为 JS 原生类型，默认情况下
// // 这些属性都是可选的。
// optionalArray: PropTypes.array,
// optionalBool: PropTypes.bool,
// optionalFunc: PropTypes.func,
// optionalNumber: PropTypes.number,
// optionalObject: PropTypes.object,
// optionalString: PropTypes.string,
// optionalSymbol: PropTypes.symbol,
//
// // 任何可被渲染的元素（包括数字、字符串、元素或数组）
// // (或 Fragment) 也包含这些类型。
// optionalNode: PropTypes.node,
//
// // 一个 React 元素。
// optionalElement: PropTypes.element,
//
// // 一个 React 元素类型（即，MyComponent）。
// optionalElementType: PropTypes.elementType,
//
// // 你也可以声明 prop 为类的实例，这里使用
// // JS 的 instanceof 操作符。
// optionalMessage: PropTypes.instanceOf(Message),
//
// // 你可以让你的 prop 只能是特定的值，指定它为
// // 枚举类型。
// optionalEnum: PropTypes.oneOf(['News', 'Photos']),
//
// // 一个对象可以是几种类型中的任意一个类型
// optionalUnion: PropTypes.oneOfType([
// PropTypes.string,
// PropTypes.number,
// PropTypes.instanceOf(Message)
// ]),
//
// // 可以指定一个数组由某一类型的元素组成
// optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
//
// // 可以指定一个对象由某一类型的值组成
// optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//
// // 可以指定一个对象由特定的类型值组成
// optionalObjectWithShape: PropTypes.shape({
// color: PropTypes.string,
// fontSize: PropTypes.number
// }),
//
// // An object with warnings on extra properties
// optionalObjectWithStrictShape: PropTypes.exact({
// name: PropTypes.string,
// quantity: PropTypes.number
// }),
//
// // 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保
// // 这个 prop 没有被提供时，会打印警告信息。
// requiredFunc: PropTypes.func.isRequired,
//
// // 任意类型的数据
// requiredAny: PropTypes.any.isRequired,
//
// // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
// // 请不要使用 `console.warn` 或抛出异常，因为这在 `onOfType` 中不会起作用。
// customProp: function(props, propName, componentName) {
// if (!/matchme/.test(props[propName])) {
// return new Error(
// 'Invalid prop `' + propName + '` supplied to' +
// ' `' + componentName + '`. Validation failed.'
// );
// }
// },
//
// // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
// // 它应该在验证失败时返回一个 Error 对象。
// // 验证器将验证数组或对象中的每个值。验证器的前两个参数
// // 第一个是数组或对象本身
// // 第二个是他们当前的键。
// customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
// if (!/matchme/.test(propValue[key])) {
// return new Error(
// 'Invalid prop `' + propFullName + '` supplied to' +
// ' `' + componentName + '`. Validation failed.'
// );
// }
// })
// };
//# sourceMappingURL=dialog.js.map