@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
170 lines (169 loc) • 6.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _context = _interopRequireDefault(require("../configProvider/context"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
var _index = _interopRequireDefault(require("../tooltip/index"));
var _Arrow = _interopRequireDefault(require("./Arrow"));
require("@douyinfe/semi-foundation/lib/cjs/popover/popover.css");
var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
var _utils = require("../_utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
const positionSet = _constants.strings.POSITION_SET;
const triggerSet = _constants.strings.TRIGGER_SET;
class Popover extends _react.default.PureComponent {
constructor(props) {
super(props);
/**
* focus on tooltip trigger
*/
this.focusTrigger = () => {
var _a;
(_a = this.tooltipRef.current) === null || _a === void 0 ? void 0 : _a.focusTrigger();
};
this.renderPopCard = _ref => {
let {
initialFocusRef
} = _ref;
const {
content,
contentClassName,
prefixCls
} = this.props;
const {
direction
} = this.context;
const popCardCls = (0, _classnames.default)(prefixCls, contentClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl'
});
const contentNode = this.renderContentNode({
initialFocusRef,
content
});
return /*#__PURE__*/_react.default.createElement("div", {
className: popCardCls
}, /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-content`
}, contentNode));
};
this.renderContentNode = props => {
const {
initialFocusRef,
content
} = props;
const contentProps = {
initialFocusRef
};
return !(0, _isFunction2.default)(content) ? content : content(contentProps);
};
this.tooltipRef = /*#__PURE__*/_react.default.createRef();
}
render() {
const _a = this.props,
{
children,
prefixCls,
showArrow,
arrowStyle = {},
arrowBounding,
position,
style,
trigger
} = _a,
attr = __rest(_a, ["children", "prefixCls", "showArrow", "arrowStyle", "arrowBounding", "position", "style", "trigger"]);
let {
spacing
} = this.props;
const arrowProps = {
position,
className: '',
popStyle: style,
arrowStyle
};
const arrow = showArrow ? /*#__PURE__*/_react.default.createElement(_Arrow.default, Object.assign({}, arrowProps)) : false;
if ((0, _isNullOrUndefined.default)(spacing)) {
spacing = showArrow ? _constants.numbers.SPACING_WITH_ARROW : _constants.numbers.SPACING;
}
const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
guardFocus: true,
ref: this.tooltipRef
}, attr, {
trigger: trigger,
position: position,
style: style,
content: this.renderPopCard,
prefixCls: prefixCls,
spacing: spacing,
showArrow: arrow,
arrowBounding: arrowBounding,
role: role
}), children);
}
}
Popover.contextType = _context.default;
Popover.propTypes = {
children: _propTypes.default.node,
content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
visible: _propTypes.default.bool,
autoAdjustOverflow: _propTypes.default.bool,
motion: _propTypes.default.bool,
position: _propTypes.default.oneOf(positionSet),
// getPopupContainer: PropTypes.func,
margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
mouseEnterDelay: _propTypes.default.number,
mouseLeaveDelay: _propTypes.default.number,
trigger: _propTypes.default.oneOf(triggerSet).isRequired,
contentClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
onVisibleChange: _propTypes.default.func,
onClickOutSide: _propTypes.default.func,
style: _propTypes.default.object,
spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
zIndex: _propTypes.default.number,
showArrow: _propTypes.default.bool,
arrowStyle: _propTypes.default.shape({
borderColor: _propTypes.default.string,
backgroundColor: _propTypes.default.string,
borderOpacity: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
}),
arrowPointAtCenter: _propTypes.default.bool,
arrowBounding: _propTypes.default.object,
prefixCls: _propTypes.default.string,
guardFocus: _propTypes.default.bool,
disableArrowKeyDown: _propTypes.default.bool
};
Popover.__SemiComponentName__ = "Popover";
Popover.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(Popover.__SemiComponentName__, {
arrowBounding: _constants.numbers.ARROW_BOUNDING,
showArrow: false,
autoAdjustOverflow: true,
zIndex: _constants.numbers.DEFAULT_Z_INDEX,
motion: true,
trigger: 'hover',
cancelText: 'No',
okText: 'Yes',
position: 'bottom',
prefixCls: _constants.cssClasses.PREFIX,
onClickOutSide: _noop2.default,
onEscKeyDown: _noop2.default,
closeOnEsc: true,
returnFocusOnClose: true,
guardFocus: true,
disableFocusListener: true
});
var _default = exports.default = Popover;