@sap-ux/ui-components
Version:
SAP UI Components Library
125 lines • 5.07 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICallout = exports.getCalloutStyle = exports.UICalloutContentPadding = exports.CALLOUT_STYLES = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const utilities_1 = require("../../utilities");
require("../../styles/_shadows.scss");
exports.CALLOUT_STYLES = {
background: 'var(--vscode-editorWidget-background)',
boxShadow: 'var(--ui-box-shadow-small)',
borderColor: 'var(--vscode-editorWidget-border)',
text: 'var(--vscode-editorWidget-foreground)',
font: 'var(--vscode-font-family)',
borderRadius: 2
};
var UICalloutContentPadding;
(function (UICalloutContentPadding) {
UICalloutContentPadding["None"] = "None";
UICalloutContentPadding["Standard"] = "Standard";
})(UICalloutContentPadding || (exports.UICalloutContentPadding = UICalloutContentPadding = {}));
// Control content padding with different states to avoid different hardcoded values across extensions
const CALLOUT_CONTENT_PADDING = new Map([[UICalloutContentPadding.Standard, 8]]);
/**
* Method receives callout style and extracts into raw styles object.
*
* @param {IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined} styles Callout styles.
* @param {keyof ICalloutContentStyles} name Callout style type.
* @returns {IRawStyle} Raw style object.
*/
const extractRawStyles = (styles, name) => {
if (typeof styles === 'object' && typeof styles[name] === 'object') {
return styles[name];
}
return {};
};
const getCalloutStyle = (props) => {
return {
root: {
boxShadow: exports.CALLOUT_STYLES.boxShadow,
backgroundColor: exports.CALLOUT_STYLES.background,
borderRadius: exports.CALLOUT_STYLES.borderRadius,
border: `1px solid ${exports.CALLOUT_STYLES.borderColor}`,
...extractRawStyles(props.styles, 'root')
},
beak: {
backgroundColor: exports.CALLOUT_STYLES.background,
boxShadow: exports.CALLOUT_STYLES.boxShadow,
...extractRawStyles(props.styles, 'beak')
},
beakCurtain: {
backgroundColor: exports.CALLOUT_STYLES.background,
borderRadius: exports.CALLOUT_STYLES.borderRadius,
...extractRawStyles(props.styles, 'beakCurtain')
},
calloutMain: {
backgroundColor: 'transparent',
color: exports.CALLOUT_STYLES.text,
fontFamily: exports.CALLOUT_STYLES.font,
borderRadius: exports.CALLOUT_STYLES.borderRadius,
minWidth: props.calloutMinWidth ?? 300,
boxSizing: 'border-box',
padding: CALLOUT_CONTENT_PADDING.get(props.contentPadding ?? UICalloutContentPadding.None),
...extractRawStyles(props.styles, 'calloutMain')
},
container: extractRawStyles(props.styles, 'container')
};
};
exports.getCalloutStyle = getCalloutStyle;
/**
* UICallout component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
*
* @exports
* @class UICallout
* @extends {React.Component<ICalloutProps, {}>}
*/
class UICallout extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {UICalloutProps} props
*/
constructor(props) {
super(props);
this.onKeyDown = this.onKeyDown.bind(this);
}
/**
* Method handles keydown event.
* If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
* then method tries to focus next/previous sibling based on target.
*
* @param event Keydown event
*/
onKeyDown(event) {
const { onKeyDown, focusTargetSiblingOnTabPress, target } = this.props;
if (focusTargetSiblingOnTabPress && event.key === 'Tab' && target) {
let targetRef = null;
if (typeof target === 'string') {
const currentDoc = (0, react_2.getDocument)();
targetRef = currentDoc?.querySelector(target);
}
else if ('getBoundingClientRect' in target && (0, utilities_1.isHTMLElement)(target)) {
targetRef = target;
}
if (targetRef && (0, utilities_1.focusToSibling)(targetRef, !event.shiftKey)) {
// Stop event bubbling to avoid default browser behavior
event.stopPropagation();
event.preventDefault();
}
}
// Call external subscriber
onKeyDown?.(event);
}
/**
* @returns {JSX.Element}
*/
render() {
return (react_1.default.createElement(react_2.Callout, { ...this.props, onKeyDown: this.onKeyDown, styles: (0, exports.getCalloutStyle)(this.props) }, this.props.children));
}
}
exports.UICallout = UICallout;
//# sourceMappingURL=UICallout.js.map