UNPKG

zent

Version:

一套前端设计语言和基于React的实现

117 lines (116 loc) 4.71 kB
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;