@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
118 lines • 6.76 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Button, CompoundButton, compoundButtonClassNames, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
import React from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { commonSizes, KnownClassNames } from '../styles/styles';
;
const useStyles = makeStyles({
buttonNoCenter: {
justifyContent: 'flex-start',
'& *': {
/* a button with no center that has content of a vertical, or multiple labels */
alignItems: 'flex-start'
}
},
danger: {
backgroundColor: tokens.colorStatusDangerBackground1,
color: tokens.colorStatusWarningForeground2,
[`& .${compoundButtonClassNames.secondaryContent}`]: {
color: tokens.colorStatusWarningForeground1
}
},
success: {
color: tokens.colorStatusSuccessForeground1,
[`& .${compoundButtonClassNames.secondaryContent}`]: {
color: tokens.colorStatusSuccessForeground1,
}
},
primarySubtle: {
color: tokens.colorBrandForeground1,
[`& .${compoundButtonClassNames.secondaryContent}`]: {
color: tokens.colorBrandForeground1,
}
},
dangerSubtle: {
color: tokens.colorStatusWarningForeground2,
[`& .${compoundButtonClassNames.secondaryContent}`]: {
color: tokens.colorStatusWarningForeground1
}
}
});
export const ButtonEX = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
const [hover, setHover] = React.useState(false);
const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
: props.title || props['aria-label'];
const icon = hover && !isNullOrUndefined(props.hoverIcon) ? props.hoverIcon : props.icon;
let hasIcon = !isNullOrUndefined(icon);
let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
const cssNames = useStyles();
let css = [];
if (props.hideOnPrint)
PushNoDuplicate(css, KnownClassNames.printHide);
if (props.dontCenterText)
PushNoDuplicate(css, cssNames.buttonNoCenter);
let btn = _jsx(Button, Object.assign({ ref: ref, appearance: 'subtle' }, props, { className: mergeClasses(...css, props.className), "aria-label": title, title: undefined, icon: icon, onMouseEnter: trackHover ? (e) => {
setHover(true);
if (isFunction(props.onMouseEnter))
props.onMouseEnter(e);
} : props.onMouseEnter, onMouseLeave: trackHover ? (e) => {
setHover(false);
if (isFunction(props.onMouseLeave))
props.onMouseLeave(e);
} : props.onMouseLeave, children: props.children ||
//no icon? will show the title by default
(hasText && capitalizeFirstLetter(title)) }));
if (!hasText || props.children) //icon only or when content is different than props.title
btn = _jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: title, mountNode: ctx.mountNode, children: btn });
return (props.dontStretch ? _jsx("div", { children: btn }) : btn);
});
export const ButtonEXSecondary = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
return (_jsx(ButtonEX, Object.assign({ ref: ref, appearance: 'secondary', shape: ctx.buttonShape }, props)));
});
/** to be used in MessageBarActions for prominent actions. Otherwise use ButtonEX or ButtonEXDangerSubtle */
export const ButtonEXMessageBarAction = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
return (_jsx(ButtonEX, Object.assign({ ref: ref, appearance: 'secondary', hideOnPrint: true }, props)));
});
export const ButtonEXPrimary = React.forwardRef((props, ref) => {
return (_jsx(ButtonEXSecondary, Object.assign({ ref: ref, appearance: 'primary' }, props, { children: props.children })));
});
export const ButtonEXDanger = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEXSecondary, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.danger }, props, { children: props.children })));
});
export const ButtonEXSuccess = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: cssNames.success }, props, { children: props.children })));
});
export const ButtonEXPrimarySubtle = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.primarySubtle }, props, { children: props.children })));
});
export const ButtonEXDangerSubtle = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.dangerSubtle }, props, { children: props.children })));
});
export const CompoundButtonEX = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
let title = props.title || props['aria-label'];
let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
let max = typeof (props.width) === "undefined" ? commonSizes.widthMedium : props.width;
return (_jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: tooltip, mountNode: ctx.mountNode, children: _jsx(CompoundButton, Object.assign({ ref: ref, appearance: 'subtle', style: { justifyContent: "flex-start", maxWidth: max } }, props, { "aria-label": tooltip, title: undefined, children: props.children || capitalizeFirstLetter(title) })) }));
});
export const CompoundButtonEXSecondary = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
return (_jsx(CompoundButtonEX, Object.assign({ ref: ref, appearance: 'secondary', shape: ctx.buttonShape }, props)));
});
export const CompoundButtonEXPrimary = React.forwardRef((props, ref) => {
return (_jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref, appearance: 'primary' }, props, { children: props.children })));
});
export const CompoundButtonEXDanger = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref, className: cssNames.danger }, props, { children: props.children })));
});
//# sourceMappingURL=button.js.map