communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
36 lines • 3.58 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { DefaultButton, concatStyleSets, KeyCodes } from '@fluentui/react';
import { controlButtonStyles } from './styles/ControlBar.styles';
import { ControlButtonTooltip } from './ControlButtonTooltip';
const DefaultRenderIcon = (props) => {
return (props === null || props === void 0 ? void 0 : props.checked)
? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
? props === null || props === void 0 ? void 0 : props.onRenderOnIcon()
: null
: (props === null || props === void 0 ? void 0 : props.onRenderOffIcon)
? props === null || props === void 0 ? void 0 : props.onRenderOffIcon()
: null;
};
/**
* Default button styled for the {@link ControlBar}.
*
* Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.
*
* @public
*/
export const ControlBarButton = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
: (props === null || props === void 0 ? void 0 : props.checked)
? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
: (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
return (React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, "aria-describedby": tooltipId, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
};
//# sourceMappingURL=ControlBarButton.js.map