@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
128 lines (127 loc) • 4.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSecondaryContextMenuTriggerStyle = exports.getMultiActionButtonAutoCollapseMode = exports.getMinimumPrimaryLabelVisibleWidth = exports.getMinimumMultiActionButtonIconsWidth = exports.MultiActionButtonAutoCollapseMode = exports.MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = exports.MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = exports.MULTI_ACTION_BUTTON_LABEL_GAP_PX = void 0;
let MultiActionButtonAutoCollapseMode = exports.MultiActionButtonAutoCollapseMode = /*#__PURE__*/function (MultiActionButtonAutoCollapseMode) {
MultiActionButtonAutoCollapseMode["Expanded"] = "expanded";
MultiActionButtonAutoCollapseMode["IconsOnly"] = "icons-only";
MultiActionButtonAutoCollapseMode["PrimaryOnly"] = "primary-only";
return MultiActionButtonAutoCollapseMode;
}({});
const AUTO_COLLAPSE_HYSTERESIS_PX = 12;
const MULTI_ACTION_BUTTON_LABEL_GAP_PX = exports.MULTI_ACTION_BUTTON_LABEL_GAP_PX = 6;
const MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = exports.MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX = 18;
const MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = exports.MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX = 1;
const getMinimumMultiActionButtonIconsWidth = ({
hasSecondaryAction,
height
}) => {
const minimumPrimaryActionWidth = height;
if (!hasSecondaryAction) {
return minimumPrimaryActionWidth;
}
return minimumPrimaryActionWidth * 2 + 1;
};
exports.getMinimumMultiActionButtonIconsWidth = getMinimumMultiActionButtonIconsWidth;
const getMinimumPrimaryLabelVisibleWidth = ({
hasVisibleSecondaryAction,
height
}) => {
const minimumPrimaryIconWidth = height;
const minimumPrimaryLabelWidth = MULTI_ACTION_BUTTON_LABEL_GAP_PX + MULTI_ACTION_BUTTON_LABEL_RIGHT_PADDING_PX;
const minimumSecondaryWidth = hasVisibleSecondaryAction ? height + MULTI_ACTION_BUTTON_SEPARATOR_WIDTH_PX : 0;
return minimumPrimaryIconWidth + minimumPrimaryLabelWidth + minimumSecondaryWidth;
};
exports.getMinimumPrimaryLabelVisibleWidth = getMinimumPrimaryLabelVisibleWidth;
const getMultiActionButtonAutoCollapseMode = ({
availableWidth,
expandedWidth,
hasSecondaryAction,
height,
previousMode = MultiActionButtonAutoCollapseMode.Expanded
}) => {
if (!availableWidth || expandedWidth <= 0) {
return MultiActionButtonAutoCollapseMode.Expanded;
}
const minimumIconsWidth = getMinimumMultiActionButtonIconsWidth({
hasSecondaryAction,
height
});
if (!hasSecondaryAction) {
if (availableWidth < expandedWidth) {
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
}
if (previousMode === MultiActionButtonAutoCollapseMode.PrimaryOnly && availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
}
return MultiActionButtonAutoCollapseMode.Expanded;
}
if (previousMode === MultiActionButtonAutoCollapseMode.Expanded) {
if (availableWidth < minimumIconsWidth) {
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
}
if (availableWidth < expandedWidth) {
return MultiActionButtonAutoCollapseMode.IconsOnly;
}
return MultiActionButtonAutoCollapseMode.Expanded;
}
if (previousMode === MultiActionButtonAutoCollapseMode.IconsOnly) {
if (availableWidth < minimumIconsWidth) {
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
}
if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
return MultiActionButtonAutoCollapseMode.IconsOnly;
}
return MultiActionButtonAutoCollapseMode.Expanded;
}
if (availableWidth < minimumIconsWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
return MultiActionButtonAutoCollapseMode.PrimaryOnly;
}
if (availableWidth < expandedWidth) {
return MultiActionButtonAutoCollapseMode.IconsOnly;
}
if (availableWidth < expandedWidth + AUTO_COLLAPSE_HYSTERESIS_PX) {
return MultiActionButtonAutoCollapseMode.IconsOnly;
}
return MultiActionButtonAutoCollapseMode.Expanded;
};
exports.getMultiActionButtonAutoCollapseMode = getMultiActionButtonAutoCollapseMode;
const getSecondaryContextMenuTriggerStyle = ({
height,
isCollapsed,
isExpanded,
shouldUseContentWidth
}) => {
if (isCollapsed) {
return {
display: 'inline-flex',
minWidth: 0,
opacity: 0,
pointerEvents: 'none',
width: 0
};
}
if (shouldUseContentWidth) {
return {
display: 'inline-flex',
flex: '0 1 auto',
minWidth: 0
};
}
if (isExpanded) {
return {
display: 'inline-flex',
flex: '1 1 auto',
minWidth: 0
};
}
return {
display: 'inline-flex',
flex: '0 0 auto',
minWidth: 0,
width: height
};
};
exports.getSecondaryContextMenuTriggerStyle = getSecondaryContextMenuTriggerStyle;
//# sourceMappingURL=MultiActionButton.utils.js.map