zent
Version:
一套前端设计语言和基于React的实现
117 lines (116 loc) • 4.71 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import Button from '../../../button';
import Pop from '../../../pop';
import Icon from '../../../icon';
var DEFAULT_DISABLED_POP_PROPS = {
position: 'top-right',
trigger: 'hover',
centerArrow: true,
};
var ArrowButton = (function (_super) {
__extends(ArrowButton, _super);
function ArrowButton() {
return _super !== null && _super.apply(this, arguments) || this;
}
ArrowButton.prototype.render = function () {
var _a = this.props, direction = _a.direction, double = _a.double, active = _a.active, bordered = _a.bordered, disabledHelp = _a.disabledHelp, rest = __rest(_a, ["direction", "double", "active", "bordered", "disabledHelp"]);
if (double) {
return (_jsx(DoubleArrowButton, __assign({ direction: direction, active: active, bordered: bordered }, rest), void 0));
}
var Arrow = null;
if (direction === 'left') {
Arrow = LeftArrow;
}
else if (direction === 'right') {
Arrow = RightArrow;
}
var btn = (_jsx(Button, __assign({}, rest, { className: cx('zent-pagination-arrow-button', 'zent-pagination-button--layout', {
'zent-pagination-page-button--no-border': !bordered,
}) }, { children: _jsx(Arrow, {}, void 0) }), void 0));
if (disabledHelp && rest.disabled) {
var popProps = __assign(__assign({}, DEFAULT_DISABLED_POP_PROPS), disabledHelp);
if (popProps.trigger === 'hover') {
popProps.fixMouseEventsOnDisabledChildren = true;
}
return _jsx(Pop, __assign({}, popProps, { children: btn }), void 0);
}
return btn;
};
ArrowButton.defaultProps = {
double: false,
active: false,
bordered: true,
};
return ArrowButton;
}(Component));
export { ArrowButton };
var DoubleArrowButton = (function (_super) {
__extends(DoubleArrowButton, _super);
function DoubleArrowButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
showArrow: false,
prevActive: false,
};
_this.onMouseOver = function () {
_this.setState({
showArrow: true,
});
};
_this.onMouseOut = function () {
_this.setState({
showArrow: false,
});
};
return _this;
}
DoubleArrowButton.prototype.render = function () {
var _a = this.props, direction = _a.direction, active = _a.active, bordered = _a.bordered, _ = _a.double, rest = __rest(_a, ["direction", "active", "bordered", "double"]);
var showArrow = this.state.showArrow;
var Arrow = null;
if (direction === 'left') {
Arrow = LeftDoubleArrow;
}
else if (direction === 'right') {
Arrow = RightDoubleArrow;
}
var isActive = showArrow;
return (_jsx(Button, __assign({ className: cx('zent-pagination-arrow-button', 'zent-pagination-arrow-button--double', 'zent-pagination-button--layout', {
'zent-pagination-arrow-button--double-active': isActive,
'zent-pagination-page-button--no-border': !bordered,
}) }, rest, { onMouseOver: active ? undefined : this.onMouseOver, onMouseLeave: active ? undefined : this.onMouseOut }, { children: isActive ? (_jsx(Arrow, {}, void 0)) : (_jsx(Icon, { type: "more", className: "zent-pagination-more" }, void 0)) }), void 0));
};
DoubleArrowButton.getDerivedStateFromProps = function (props, state) {
var active = props.active;
var stateDiff = {
prevActive: active,
showArrow: state.showArrow,
};
if (active !== state.prevActive) {
stateDiff.showArrow = !!active;
}
return stateDiff;
};
DoubleArrowButton.defaultProps = {
double: false,
active: false,
bordered: true,
};
return DoubleArrowButton;
}(Component));
function LeftArrow() {
return _jsx(Icon, { type: "left", className: "zent-pagination-arrow" }, void 0);
}
function RightArrow() {
return _jsx(Icon, { type: "right", className: "zent-pagination-arrow" }, void 0);
}
function LeftDoubleArrow() {
return _jsx(Icon, { type: "double-last", className: "zent-pagination-arrow" }, void 0);
}
function RightDoubleArrow() {
return _jsx(Icon, { type: "double-next", className: "zent-pagination-arrow" }, void 0);
}
export default ArrowButton;