@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
96 lines (95 loc) • 4.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.baseClassName = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const icons_1 = require("../icons");
const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
const theme_1 = tslib_1.__importDefault(require("../../theme"));
const Icon_1 = require("../Icon");
exports.baseClassName = 'ab-SimpleButton';
const defaultProps = {
px: null,
py: null,
fontWeight: 'normal',
m: null,
//@ts-ignore
borderRadius: null,
};
const SimpleButton = React.forwardRef((givenProps, theRef) => {
const props = { ...defaultProps, ...givenProps };
let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type, ...buttonProps } = props;
let adaptableSystemIcon;
if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
adaptableSystemIcon = icon;
}
if (typeof icon === 'string' && icons_1.allIcons[icon]) {
adaptableSystemIcon = { name: icon };
}
if (adaptableSystemIcon) {
const iconProps = {
icon: adaptableSystemIcon,
};
if (iconSize) {
iconProps.icon = { ...iconProps.icon, size: iconSize };
}
if (typeof buttonProps.color === 'string') {
iconProps.icon = { ...iconProps.icon, style: { color: buttonProps.color } };
}
icon = React.createElement(Icon_1.IconComponent, { ...iconProps });
}
if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
icon = React.createElement(Icon_1.IconComponent, { icon: icon });
}
if (icon) {
children =
iconPosition === 'start' ? (React.createElement(React.Fragment, null,
icon,
children)) : (React.createElement(React.Fragment, null,
children,
icon));
}
if (buttonProps.as == 'div') {
// we have some cases when we want to nest a SimpleButton inside an html Button
// so the SimpleButton cannot render a <button> tag
// so we want it to be a DIV tag
// but still keep the same keyboard accessibility
buttonProps.tabIndex = buttonProps.tabIndex === undefined ? 0 : buttonProps.tabIndex;
buttonProps.role = buttonProps.role || 'button';
const onKeyDown = buttonProps.onKeyDown;
buttonProps.onKeyDown = (e) => {
const key = e.key;
if (buttonProps.onClick && key === 'Enter') {
buttonProps.onClick(e);
}
if (onKeyDown) {
onKeyDown(e);
}
};
}
if (!buttonProps.as || buttonProps.as === 'button') {
buttonProps.type = type ? type : 'button';
buttonProps.as = 'button';
}
if (accessLevel === 'Hidden') {
return null;
}
if (accessLevel === 'ReadOnly') {
disabled = true;
}
// for whatever reason, even if fontWeight is present in buttonProps
// and sent to rebass, styled-components/rebass does not honour it
// so we had to send it via css
const fontWeight = buttonProps.fontWeight
? theme_1.default[buttonProps.fontWeight] ?? buttonProps.fontWeight ?? 'normal'
: 'normal';
const btn = (React.createElement(rebass_1.Button, { ...buttonProps, "aria-label": buttonProps['aria-label'] ||
buttonProps.label ||
tooltip ||
buttonProps.title ||
`${buttonProps.key}`, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', fontWeight ? `${exports.baseClassName}--font-weight=${fontWeight}` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`), ref: theRef }, children));
return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
});
exports.default = SimpleButton;