@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
186 lines • 9.39 kB
JavaScript
var __rest = (this && this.__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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { Button, CompoundButton, compoundButtonClassNames, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
import { capitalizeFirstLetter, isFunction, isNotEmptyString, 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',
textAlign: '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((_a, ref) => {
var { showTitleWithIcon, dontStretch, hideOnPrint, dontCenterText, icon, hoverIcon, hoverTitle, title, 'aria-label': ariaLabel, children, variant, className, onClick, onMouseEnter, onMouseLeave, href, target } = _a, passProps = __rest(_a, ["showTitleWithIcon", "dontStretch", "hideOnPrint", "dontCenterText", "icon", "hoverIcon", "hoverTitle", "title", 'aria-label', "children", "variant", "className", "onClick", "onMouseEnter", "onMouseLeave", "href", "target"]);
const ctx = useKWIZFluentContext();
const [hover, setHover] = React.useState(false);
const trackHover = !isNullOrEmptyString(hoverTitle) || !isNullOrUndefined(hoverIcon);
const myTitle = hover && !isNullOrEmptyString(hoverTitle) ? hoverTitle
: title || ariaLabel;
const myIcon = hover && !isNullOrUndefined(hoverIcon) ? hoverIcon : icon;
let hasIcon = !isNullOrUndefined(myIcon);
let hasText = children || !hasIcon || (hasIcon && showTitleWithIcon === true);
const cssNames = useStyles();
let css = [];
if (isNotEmptyString(variant)) {
switch (variant) {
case "danger":
if (!passProps.disabled)
css.push(cssNames.danger);
break;
case "danger-subtle":
if (!passProps.disabled)
css.push(cssNames.dangerSubtle);
break;
case "primary-subtle":
if (!passProps.disabled)
css.push(cssNames.primarySubtle);
break;
case "success":
css.push(cssNames.success);
break;
}
}
if (hideOnPrint)
PushNoDuplicate(css, KnownClassNames.printHide);
if (dontCenterText)
PushNoDuplicate(css, cssNames.buttonNoCenter);
if (isNullOrUndefined(onClick) && isNotEmptyString(href)) {
onClick = () => {
switch (target) {
case "_top":
window.top.location.href = href;
break;
case "_parent":
window.parent.location.href = href;
break;
case "_blank":
window.open(href);
break;
default:
window.location.href = href;
break;
}
};
}
let btn = _jsx(Button, Object.assign({ ref: ref, appearance: 'subtle' }, passProps, { onClick: onClick, className: mergeClasses(...css, className), "aria-label": myTitle, title: undefined, icon: myIcon, onMouseEnter: trackHover ? (e) => {
setHover(true);
if (isFunction(onMouseEnter))
onMouseEnter(e);
} : onMouseEnter, onMouseLeave: trackHover ? (e) => {
setHover(false);
if (isFunction(onMouseLeave))
onMouseLeave(e);
} : onMouseLeave, children: children ||
//no icon? will show the title by default
(hasText && capitalizeFirstLetter(myTitle)) }));
if (!hasText || children) //icon only or when content is different than props.title
btn = _jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: myTitle, mountNode: ctx.mountNode, children: btn });
return (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, variant: 'danger' }, props, { children: props.children })));
});
export const ButtonEXSuccess = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, variant: "success" }, props, { children: props.children })));
});
export const ButtonEXPrimarySubtle = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, variant: "primary-subtle" }, props, { children: props.children })));
});
export const ButtonEXDangerSubtle = React.forwardRef((props, ref) => {
const cssNames = useStyles();
return (_jsx(ButtonEX, Object.assign({ ref: ref, variant: "danger-subtle" }, 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;
let onClick = props.onClick;
if (isNullOrUndefined(onClick) && isNotEmptyString(props.href)) {
onClick = () => {
switch (props.target) {
case "_top":
window.top.location.href = props.href;
break;
case "_parent":
window.parent.location.href = props.href;
break;
case "_blank":
window.open(props.href);
break;
default:
window.location.href = props.href;
break;
}
};
}
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, { onClick: onClick, "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