fix: scrollY未定义

This commit is contained in:
liushaozhen 2020-06-12 13:33:27 +08:00
parent b08ee805bc
commit 00da5516d5
3 changed files with 246 additions and 122 deletions

293
dist/demo.js vendored
View File

@ -6163,25 +6163,24 @@
var notificationStyle_copy = {};
var messageStyle_copy = {};
var positionType = ['topRight', 'bottomRight', 'top', 'bottom', 'topLeft', 'bottomLeft', ''];
var defaultStyle = {};
var positionObj = {
"top": {
messageStyle: {
transform: 'translateX( -50%)'
},
messageStyle: {},
notificationStyle: {
top: defaultTop,
left: '50%'
left: '50%',
transform: 'translateX( -50%)'
},
transitionName: 'top'
},
"bottom": {
messageStyle: {
transform: 'translateX( -50%)'
},
messageStyle: {},
notificationStyle: {
bottom: defaultBottom,
left: '50%'
left: '50%',
transform: 'translateX( -50%)'
},
transitionName: 'bottom'
},
@ -6264,7 +6263,7 @@
var instanceObj = {
clsPrefix: clsPrefix,
transitionName: clsPrefix + '-' + positionObj[position].transitionName,
style: style, // 覆盖原来的样式
style: _extends({}, style, defaultStyle), // 覆盖原来的样式
position: position
};
if (typeof keyboard === 'boolean') {
@ -6279,7 +6278,7 @@
});
}
function notice(content, duration_arg, type, onClose, position, style, keyboard, onEscapeKeyUp, showIcon) {
function notice(content, duration_arg, type, onClose, position, style, keyboard, onEscapeKeyUp, showIcon, icon, props) {
if (positionType.findIndex(function (item) {
return item === position;
}) < 0) {
@ -6305,8 +6304,9 @@
}[type];
var positionStyle = JSON.stringify(messageStyle_copy) == "{}" ? positionObj[position].messageStyle : messageStyle_copy;
defaultStyle = _extends({}, positionStyle, style);
getMessageInstance(position, function (instance) {
instance.notice({
instance.notice(_extends({}, props, {
key: key,
duration: duration,
color: type,
@ -6317,7 +6317,7 @@
showIcon ? _react2["default"].createElement(
'div',
{ className: clsPrefix + '-notice-description-icon' },
_react2["default"].createElement('i', { className: (0, _classnames2["default"])(iconType) })
icon ? _react2["default"].createElement('i', { className: (0, _classnames2["default"])('' + icon) }) : _react2["default"].createElement('i', { className: (0, _classnames2["default"])(iconType) })
) : null,
_react2["default"].createElement(
'div',
@ -6326,7 +6326,7 @@
)
),
onClose: onClose
});
}));
}, keyboard, onEscapeKeyUp);
return function () {
var target = key++;
@ -6350,8 +6350,9 @@
var onClose = obj.onClose || noop;
var position = obj.position || "top";
var style = obj.style || {};
var showIcon = obj.showIcon || true;
return notice(content, duration, color, onClose, position, style, obj.keyboard, obj.onEscapeKeyUp, showIcon);
var showIcon = obj.hasOwnProperty('showIcon') ? obj.showIcon : true;
var icon = obj.hasOwnProperty('icon') ? obj.icon : false;
return notice(content, duration, color, onClose, position, style, obj.keyboard, obj.onEscapeKeyUp, showIcon, icon, obj);
},
config: function config(options) {
if (options.top !== undefined) {
@ -6378,6 +6379,16 @@
if (messageInstance) {
messageInstance.destroy();
messageInstance = null;
defaultDuration = 1.5;
newDuration = undefined;
defaultTop = 24;
defaultBottom = 48;
bottom = 90;
padding = 30;
width = 240;
notificationStyle_copy = null;
messageStyle_copy = null;
defaultStyle = null;
}
}
};
@ -7456,6 +7467,8 @@
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 _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
@ -7478,6 +7491,8 @@
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; }
@ -7550,7 +7565,12 @@
style = _props.style,
children = _props.children,
color = _props.color,
title = _props.title;
title = _props.title,
content = _props.content,
onEnd = _props.onEnd,
onClose = _props.onClose,
duration = _props.duration,
others = _objectWithoutProperties(_props, ['closable', 'clsPrefix', 'className', 'style', 'children', 'color', 'title', 'content', 'onEnd', 'onClose', 'duration']);
var componentClass = clsPrefix + '-notice';
var classes = (_classes = {}, _defineProperty(_classes, '' + componentClass, 1), _defineProperty(_classes, componentClass + '-closable', closable), _defineProperty(_classes, className, !!className), _classes);
@ -7559,7 +7579,7 @@
}
return _react2["default"].createElement(
'div',
{ className: (0, _classnames2["default"])(classes), style: style, onClick: this.close },
_extends({ className: (0, _classnames2["default"])(classes), style: style, onClick: this.close }, others),
_react2["default"].createElement(
'div',
{ className: componentClass + '-content' },
@ -7703,6 +7723,12 @@
var deselectCurrent = __webpack_require__(82);
var clipboardToIE11Formatting = {
"text/plain": "Text",
"text/html": "Url",
"default": "Text"
}
var defaultMessage = "Copy to clipboard: #{key}, Enter";
function format(message) {
@ -7745,6 +7771,23 @@
mark.style.userSelect = "text";
mark.addEventListener("copy", function(e) {
e.stopPropagation();
if (options.format) {
e.preventDefault();
if (typeof e.clipboardData === "undefined") { // IE 11
debug && console.warn("unable to use e.clipboardData");
debug && console.warn("trying IE specific stuff");
window.clipboardData.clearData();
var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"]
window.clipboardData.setData(format, text);
} else { // all other browsers
e.clipboardData.clearData();
e.clipboardData.setData(options.format, text);
}
}
if (options.onCopy) {
e.preventDefault();
options.onCopy(e.clipboardData);
}
});
document.body.appendChild(mark);
@ -7761,7 +7804,8 @@
debug && console.error("unable to copy using execCommand: ", err);
debug && console.warn("trying IE specific stuff");
try {
window.clipboardData.setData("text", text);
window.clipboardData.setData(options.format || "text", text);
options.onCopy && options.onCopy(window.clipboardData);
success = true;
} catch (err) {
debug && console.error("unable to copy using clipboardData: ", err);
@ -11208,7 +11252,7 @@
/**
* 相对目标元素显示上下左右的位置
*/
placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left']),
placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']),
/**
* 绝对定位上边距.
@ -11234,25 +11278,32 @@
clsPrefix: 'u-tooltip'
};
function OverlayNode(props) {
var className = props.className,
var id = props.id,
className = props.className,
classNames = props.classNames,
style = props.style,
overlay = props.overlay,
arrowOffsetTop = props.arrowOffsetTop,
arrowOffsetLeft = props.arrowOffsetLeft;
overlayStyle = props.overlayStyle,
otherProps = props.otherProps;
// style 包含用户传入的自定义样式,以及 bee-overlay 计算返回的样式。
// overlayStyle 是用户传入的自定义样式。
if (overlayStyle && overlayStyle.width) {
style.width = overlayStyle.width;
} else {
delete style.width;
}
return _react2["default"].createElement(
'div',
{
_extends({
id: id,
role: 'tooltip',
className: (0, _classnames2["default"])(className, classNames),
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
style: style
},
overlay ? _react2["default"].createElement('div', { className: 'tooltip-arrow', style: {
top: arrowOffsetTop,
left: arrowOffsetLeft
} }) : '',
}, otherProps),
overlay ? _react2["default"].createElement('div', { className: 'tooltip-arrow' }) : '',
overlay ? _react2["default"].createElement(
'div',
{ className: 'tooltip-inner' },
@ -11270,17 +11321,29 @@
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.onMouseEnter = function () {
var trigger = _this.props.trigger;
if (trigger === 'click') return;
_this.setState({
isHoverShow: true
});
};
_this.onMouseLeave = function () {
var trigger = _this.props.trigger;
if (trigger === 'click') return;
_this.setState({
isHoverShow: false
});
};
_this.handleOnHide = function () {
var onHide = _this.props.onHide;
onHide && onHide(false);
};
var initState = {
isHoverShow: false
};
@ -11322,8 +11385,7 @@
var _props2 = this.props,
placement = _props2.placement,
positionTop = _props2.positionTop,
positionLeft = _props2.positionLeft,
id = _props2.id,
arrowOffsetTop = _props2.arrowOffsetTop,
arrowOffsetLeft = _props2.arrowOffsetLeft,
className = _props2.className,
@ -11332,15 +11394,18 @@
clsPrefix = _props2.clsPrefix,
overlay = _props2.overlay,
inverse = _props2.inverse,
others = _objectWithoutProperties(_props2, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'className', 'style', 'children', 'clsPrefix', 'overlay', 'inverse']);
trigger = _props2.trigger,
onVisibleChange = _props2.onVisibleChange,
onHide = _props2.onHide,
rootClose = _props2.rootClose,
visible = _props2.visible,
defaultOverlayShown = _props2.defaultOverlayShown,
positionTop = _props2.positionTop,
positionLeft = _props2.positionLeft,
others = _objectWithoutProperties(_props2, ['placement', 'id', 'arrowOffsetTop', 'arrowOffsetLeft', 'className', 'style', 'children', 'clsPrefix', 'overlay', 'inverse', 'trigger', 'onVisibleChange', 'onHide', 'rootClose', 'visible', 'defaultOverlayShown', 'positionTop', 'positionLeft']);
var classes = (_classes = {}, _defineProperty(_classes, placement, true), _defineProperty(_classes, 'inverse', inverse), _classes);
var outerStyle = _extends({
top: positionTop,
left: positionLeft
}, style);
var arrowStyle = {
top: arrowOffsetTop,
left: arrowOffsetLeft
@ -11349,26 +11414,53 @@
var classNames = (0, _classnames2["default"])(clsPrefix, classes);
var overlayNode = _react2["default"].createElement(OverlayNode, {
id: id,
className: className,
classNames: classNames,
overlay: overlay,
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
style: true,
arrowOffsetTop: true,
arrowOffsetLeft: true
style: style,
overlayStyle: style // 用户自定义样式
, arrowOffsetTop: arrowOffsetTop,
arrowOffsetLeft: arrowOffsetLeft,
otherProps: others
});
return 'visible' in this.props ? _react2["default"].createElement(
_OverlayTrigger2["default"],
_extends({ visible: this.state.visible, ref: function ref(_ref) {
_extends({}, others, {
visible: this.state.visible,
ref: function ref(_ref) {
return _this2.trigger = _ref;
}, shouldUpdatePosition: true, placement: placement }, others, { overlay: overlayNode }),
},
shouldUpdatePosition: true,
placement: placement,
overlay: overlayNode,
onHide: this.handleOnHide,
rootClose: rootClose,
defaultOverlayShown: defaultOverlayShown,
positionTop: positionTop,
positionLeft: positionLeft,
trigger: trigger
}),
children
) : _react2["default"].createElement(
_OverlayTrigger2["default"],
_extends({ isHoverShow: this.state.isHoverShow, ref: function ref(_ref2) {
_extends({}, others, {
isHoverShow: this.state.isHoverShow,
ref: function ref(_ref2) {
return _this2.trigger = _ref2;
}, shouldUpdatePosition: true, placement: placement }, others, { overlay: overlayNode }),
},
shouldUpdatePosition: true,
placement: placement,
overlay: overlayNode,
onHide: this.handleOnHide,
rootClose: rootClose,
defaultOverlayShown: defaultOverlayShown,
positionTop: positionTop,
positionLeft: positionLeft,
trigger: trigger
}),
children
);
};
@ -13982,12 +14074,12 @@
'close': '关闭',
'en-us': {
'copy': 'copy',
'cut': 'cut',
'copyReady': 'copied',
'cutReady': 'cut',
'copyToClipboard': 'copy to clipboard',
'close': 'close'
'copy': 'Copy',
'cut': 'Cut',
'copyReady': 'Copied',
'cutReady': 'Cut',
'copyToClipboard': 'Copy to Clipboard',
'close': 'Close'
},
'zh-tw': {
'copy': '複製',
@ -33898,6 +33990,7 @@
value: value
};
_this.input = {};
_this.clickClearBtn = false;
return _this;
}
@ -33957,23 +34050,30 @@
};
this.clearValue = function () {
var onChange = _this2.props.onChange;
var _props = _this2.props,
onChange = _props.onChange,
showClose = _props.showClose;
_this2.setState({
showSearch: true,
value: ""
});
if (_this2.e && _this2.e.target) _this2.e.target.value = "";
if (onChange) {
onChange("");
onChange("", _this2.e);
}
if (showClose) {
_this2.blurTime && clearTimeout(_this2.blurTime);
_this2.blurTime = null;
}
_this2.input.focus();
};
this.handleKeyDown = function (e) {
var _props = _this2.props,
onSearch = _props.onSearch,
type = _props.type,
onKeyDown = _props.onKeyDown;
var _props2 = _this2.props,
onSearch = _props2.onSearch,
type = _props2.type,
onKeyDown = _props2.onKeyDown;
if (e.keyCode === 13 && type === "search") {
if (onSearch) {
@ -33991,11 +34091,19 @@
this.handleBlur = function (e) {
var value = _this2.state.value;
var onBlur = _this2.props.onBlur;
var _props3 = _this2.props,
onBlur = _props3.onBlur,
showClose = _props3.showClose;
var _e = _extends({}, e);
_this2.e = _e;
if (onBlur) {
onBlur(value, e);
if (showClose && _this2.clickClearBtn) {
_this2.clickClearBtn = false;
onBlur(value, _e, true);
} else {
onBlur(value, _e);
}
}
};
@ -34011,21 +34119,25 @@
}
};
this.onClearBtnMouseDown = function () {
_this2.clickClearBtn = true;
};
this.renderInput = function () {
var _props2 = _this2.props,
Component = _props2.componentClass,
type = _props2.type,
className = _props2.className,
size = _props2.size,
clsPrefix = _props2.clsPrefix,
onChange = _props2.onChange,
onSearch = _props2.onSearch,
onBlur = _props2.onBlur,
showClose = _props2.showClose,
focusSelect = _props2.focusSelect,
prefix = _props2.prefix,
suffix = _props2.suffix,
others = _objectWithoutProperties(_props2, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'onChange', 'onSearch', 'onBlur', 'showClose', 'focusSelect', 'prefix', 'suffix']);
var _props4 = _this2.props,
Component = _props4.componentClass,
type = _props4.type,
className = _props4.className,
size = _props4.size,
clsPrefix = _props4.clsPrefix,
onChange = _props4.onChange,
onSearch = _props4.onSearch,
onBlur = _props4.onBlur,
showClose = _props4.showClose,
focusSelect = _props4.focusSelect,
prefix = _props4.prefix,
suffix = _props4.suffix,
others = _objectWithoutProperties(_props4, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'onChange', 'onSearch', 'onBlur', 'showClose', 'focusSelect', 'prefix', 'suffix']);
// input[type="file"] 不应该有类名 .form-control.
@ -34063,10 +34175,10 @@
onFocus: _this2.handleFocus,
className: (0, _classnames2["default"])(classNames)
})),
showClose ? _react2["default"].createElement(
showClose && value ? _react2["default"].createElement(
'div',
{ className: clsPrefix + '-suffix' },
value ? _react2["default"].createElement(_beeIcon2["default"], { onClick: _this2.clearValue, type: 'uf-close-c' }) : ''
{ className: clsPrefix + '-suffix has-close', onMouseDown: _this2.onClearBtnMouseDown, onClick: _this2.clearValue },
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-close-c' })
) : '',
suffix ? _react2["default"].createElement(
'span',
@ -34090,16 +34202,16 @@
};
this.renderSearch = function () {
var _props3 = _this2.props,
Component = _props3.componentClass,
type = _props3.type,
className = _props3.className,
size = _props3.size,
clsPrefix = _props3.clsPrefix,
onChange = _props3.onChange,
onSearch = _props3.onSearch,
onBlur = _props3.onBlur,
others = _objectWithoutProperties(_props3, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'onChange', 'onSearch', 'onBlur']);
var _props5 = _this2.props,
Component = _props5.componentClass,
type = _props5.type,
className = _props5.className,
size = _props5.size,
clsPrefix = _props5.clsPrefix,
onChange = _props5.onChange,
onSearch = _props5.onSearch,
onBlur = _props5.onBlur,
others = _objectWithoutProperties(_props5, ['componentClass', 'type', 'className', 'size', 'clsPrefix', 'onChange', 'onSearch', 'onBlur']);
// input[type="file"] 不应该有类名 .form-control.
@ -36842,7 +36954,16 @@
};
_this.handleScrollY = function () {
var rowHeight = _this.props.store.getState().rowHeight;
var store = _this.props.store;
var parentElement = _this.getParentElement(_this.scrollComponent);
if (!parentElement) {
return;
}
var scrollEl = parentElement;
var scrollY = scrollEl && scrollEl.clientHeight;
var rowHeight = store.getState().rowHeight;
//默认显示20条rowsInView根据定高算的。在非固定高下这个只是一个大概的值。
_this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : _config2['default'].defaultRowsInView;

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -194,12 +194,15 @@ export default class InfiniteScroll extends Component {
* @description 根据返回的scrollTop计算当前的索引
*/
handleScrollY = () => {
const { store } = this.props;
const parentElement = this.getParentElement(this.scrollComponent);
if (!parentElement) {
return;
}
let scrollEl = parentElement;
let scrollY = scrollEl && scrollEl.clientHeight;
let rowHeight = store.getState().rowHeight;
//默认显示20条rowsInView根据定高算的。在非固定高下这个只是一个大概的值。
this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : CONFIG.defaultRowsInView;