@alifd/next
Version:
A configurable component library for web built on React.
251 lines (214 loc) • 8.93 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _overlay = require('../overlay');
var _overlay2 = _interopRequireDefault(_overlay);
var _configProvider = require('../config-provider');
var _configProvider2 = _interopRequireDefault(_configProvider);
var _util = require('../util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable react/prefer-stateless-function */
/** Loading */
var Loading = (_temp = _class = function (_React$Component) {
(0, _inherits3.default)(Loading, _React$Component);
function Loading() {
(0, _classCallCheck3.default)(this, Loading);
return (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
}
Loading.prototype.render = function render() {
var _classNames2, _classNames3, _classNames4;
var _props = this.props,
tip = _props.tip,
visible = _props.visible,
children = _props.children,
className = _props.className,
style = _props.style,
indicator = _props.indicator,
color = _props.color,
prefix = _props.prefix,
fullScreen = _props.fullScreen,
disableScroll = _props.disableScroll,
onVisibleChange = _props.onVisibleChange,
tipAlign = _props.tipAlign,
size = _props.size,
inline = _props.inline,
rtl = _props.rtl,
safeNode = _props.safeNode;
var indicatorDom = null;
var dotCls = prefix + 'loading-dot';
if (indicator) {
indicatorDom = indicator;
} else {
var _classNames;
var backgroundColor = color;
var fusionReactorCls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'loading-fusion-reactor'] = true, _classNames[prefix + 'loading-medium-fusion-reactor'] = size === 'medium', _classNames));
indicatorDom = _react2.default.createElement(
'div',
{ className: fusionReactorCls, dir: rtl ? 'rtl' : undefined },
_react2.default.createElement('span', { className: dotCls, style: { backgroundColor: backgroundColor } }),
_react2.default.createElement('span', { className: dotCls, style: { backgroundColor: backgroundColor } }),
_react2.default.createElement('span', { className: dotCls, style: { backgroundColor: backgroundColor } }),
_react2.default.createElement('span', { className: dotCls, style: { backgroundColor: backgroundColor } })
);
}
var loadingCls = (0, _classnames2.default)((_classNames2 = {}, _classNames2[prefix + 'loading'] = true, _classNames2[prefix + 'open'] = visible, _classNames2[prefix + 'loading-inline'] = inline, _classNames2[className] = className, _classNames2));
var tipCls = (0, _classnames2.default)((_classNames3 = {}, _classNames3[prefix + 'loading-tip'] = true, _classNames3[prefix + 'loading-tip-fullscreen'] = fullScreen, _classNames3[prefix + 'loading-right-tip'] = tipAlign === 'right', _classNames3));
var others = _util.obj.pickOthers(Loading.propTypes, this.props);
var contentCls = (0, _classnames2.default)((_classNames4 = {}, _classNames4[prefix + 'loading-component'] = visible, _classNames4[prefix + 'loading-wrap'] = true, _classNames4));
return fullScreen ? [children, _react2.default.createElement(
_overlay2.default,
(0, _extends3.default)({
key: 'overlay',
hasMask: true,
align: 'cc cc',
safeNode: safeNode,
disableScroll: disableScroll
}, others, {
className: className,
style: style,
visible: visible,
onRequestClose: onVisibleChange
}),
_react2.default.createElement(
'div',
{ className: tipCls },
_react2.default.createElement(
'div',
{ className: prefix + 'loading-indicator' },
indicatorDom
),
_react2.default.createElement(
'div',
{ className: prefix + 'loading-tip-content' },
tip
),
_react2.default.createElement(
'div',
{ className: prefix + 'loading-tip-placeholder' },
tip
)
)
)] : _react2.default.createElement(
'div',
(0, _extends3.default)({ className: loadingCls, style: style }, others),
visible ? _react2.default.createElement(
'div',
{ className: tipCls },
_react2.default.createElement(
'div',
{ className: prefix + 'loading-indicator' },
indicatorDom
),
_react2.default.createElement(
'div',
{ className: prefix + 'loading-tip-content' },
tip
),
_react2.default.createElement(
'div',
{ className: prefix + 'loading-tip-placeholder' },
tip
)
) : null,
_react2.default.createElement(
'div',
{ className: contentCls },
visible ? _react2.default.createElement('div', { className: prefix + 'loading-masker' }) : null,
children
)
);
};
return Loading;
}(_react2.default.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
/**
* 样式前缀
*/
prefix: _propTypes2.default.string,
/**
* 自定义内容，可以传入string或reactElement
*/
tip: _propTypes2.default.any,
/**
* 自定义内容位置
* @enumdesc 出现在动画右边, 出现在动画下面
*/
tipAlign: _propTypes2.default.oneOf(['right', 'bottom']),
/**
* loading 状态, 默认 true
*/
visible: _propTypes2.default.bool,
/**
* 全屏模式下，loading弹层请求关闭时触发的回调函数
* @param {String} type 弹层关闭的来源
* @param {Object} e DOM 事件
*/
onVisibleChange: _propTypes2.default.func,
/**
* 自定义class
*/
className: _propTypes2.default.string,
/**
* 自定义内联样式
*/
style: _propTypes2.default.object,
/**
* 设置动画尺寸
* @description 仅仅对默认动画效果起作用
* @enumdesc 大号, 中号
*/
size: _propTypes2.default.oneOf(['large', 'medium']),
/**
* 自定义动画
*/
indicator: _propTypes2.default.any,
/**
* 动画颜色
*/
color: _propTypes2.default.string,
/**
* 全屏展示
*/
fullScreen: _propTypes2.default.bool,
/**
* 当点击 document 的时候，如果包含该节点则不会关闭弹层，
* 如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组
* 是否禁用滚动，仅在 fullScreen 模式下生效
*/
disableScroll: _propTypes2.default.bool,
/**
* 安全节点，fullScreen时有效，
*/
safeNode: _propTypes2.default.any,
/**
* 子元素
*/
children: _propTypes2.default.any,
inline: _propTypes2.default.bool,
rtl: _propTypes2.default.bool
}), _class.defaultProps = {
prefix: 'next-',
visible: true,
onVisibleChange: _util.func.noop,
animate: null,
tipAlign: 'bottom',
size: 'large',
inline: true,
disableScroll: false
}, _temp);
Loading.displayName = 'Loading';
exports.default = _configProvider2.default.config(Loading);
module.exports = exports['default'];