office-ui-fabric-react/lib/components/Keytip/Keytip.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent } from '../../Utilities';
import { mergeOverflows, ktpTargetFromSequences } from '../../utilities/keytips/KeytipUtils';
import { Callout } from '../../Callout';
import { KeytipContent } from './KeytipContent';
import { getCalloutStyles, getCalloutOffsetStyles } from './Keytip.styles';
/**
 * A callout corresponding to another Fabric component to describe a key sequence that will activate that component
 *
 * @export
 * @class Keytip
 * @extends {BaseComponent<IKeytipProps, {}}>}
 */
var Keytip = /** @class */ (function (_super) {
    tslib_1.__extends(Keytip, _super);
    function Keytip() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Keytip.prototype.render = function () {
        var _a = this.props, keySequences = _a.keySequences, offset = _a.offset, overflowSetSequence = _a.overflowSetSequence;
        var calloutProps = this.props.calloutProps;
        var keytipTarget;
        // Take into consideration the overflow sequence
        if (overflowSetSequence) {
            keytipTarget = ktpTargetFromSequences(mergeOverflows(keySequences, overflowSetSequence));
        }
        else {
            keytipTarget = ktpTargetFromSequences(keySequences);
        }
        if (offset) {
            // Set callout to top-left corner, will be further positioned in
            // getCalloutOffsetStyles
            calloutProps = tslib_1.__assign({}, calloutProps, { coverTarget: true, directionalHint: 0 /* topLeftEdge */ });
        }
        if (!calloutProps || calloutProps.directionalHint === undefined) {
            // Default callout directional hint to BottomCenter
            calloutProps = tslib_1.__assign({}, calloutProps, { directionalHint: 5 /* bottomCenter */ });
        }
        return (React.createElement(Callout, tslib_1.__assign({}, calloutProps, { isBeakVisible: false, doNotLayer: true, minPagePadding: 0, styles: offset ? getCalloutOffsetStyles(offset) : getCalloutStyles, preventDismissOnScroll: true, target: keytipTarget }),
            React.createElement(KeytipContent, tslib_1.__assign({}, this.props))));
    };
    return Keytip;
}(BaseComponent));
export { Keytip };
//# sourceMappingURL=Keytip.js.map