@difizen/mana-app
Version:
350 lines (346 loc) • 11 kB
text/typescript
export const TreeViewDecorationStyles = {
CAPTION_HIGHLIGHT_CLASS: 'mana-caption-highlight',
CAPTION_PREFIX_CLASS: 'mana-caption-prefix',
CAPTION_SUFFIX_CLASS: 'mana-caption-suffix',
ICON_WRAPPER_CLASS: 'mana-icon-wrapper',
DECORATOR_SIZE_CLASS: 'mana-decorator-size',
DECORATOR_SIDEBAR_SIZE_CLASS: 'mana-decorator-sidebar-size',
TOP_RIGHT_CLASS: 'mana-top-right',
BOTTOM_RIGHT_CLASS: 'mana-bottom-right',
BOTTOM_RIGHT_SIDEBAR_CLASS: 'mana-bottom-right-sidebar',
BOTTOM_LEFT_CLASS: 'mana-bottom-left',
TOP_LEFT_CLASS: 'mana-top-left',
};
/**
* Enumeration for the quadrant to overlay the image on.
*/
export enum IconOverlayPosition {
/**
* Overlays the top right quarter of the original image.
*/
TOP_RIGHT,
/**
* Overlays the bottom right of the original image.
*/
BOTTOM_RIGHT,
/**
* Overlays the bottom left segment of the original image.
*/
BOTTOM_LEFT,
/**
* Occupies the top left quarter of the original icon.
*/
TOP_LEFT,
}
export namespace IconOverlayPosition {
/**
* Returns with the CSS class style for the enum.
*/
export function getStyle(position: IconOverlayPosition, inSideBar?: boolean): string {
switch (position) {
case IconOverlayPosition.TOP_RIGHT:
return TreeViewDecorationStyles.TOP_RIGHT_CLASS;
case IconOverlayPosition.BOTTOM_RIGHT:
return inSideBar
? TreeViewDecorationStyles.BOTTOM_RIGHT_SIDEBAR_CLASS
: TreeViewDecorationStyles.BOTTOM_RIGHT_CLASS;
case IconOverlayPosition.BOTTOM_LEFT:
return TreeViewDecorationStyles.BOTTOM_LEFT_CLASS;
case IconOverlayPosition.TOP_LEFT:
return TreeViewDecorationStyles.TOP_LEFT_CLASS;
default:
return '';
}
}
}
export namespace CaptionHighlight {
/**
* A pair of offset and length that has to be highlighted as a range.
*/
export type Range = {
/**
* Zero based offset of the highlighted region.
*/
readonly offset: number;
/**
* The length of the highlighted region.
*/
readonly length: number;
};
export namespace Range {
/**
* `true` if the `arg` is contained in the range. The ranges are closed ranges, hence the check is inclusive.
*/
export function contains(arg: number, range: Range): boolean {
return arg >= range.offset && arg <= range.offset + range.length;
}
}
/**
* The result of a caption splitting based on the highlighting information.
*/
export type Fragment = {
/**
* The text data of the fragment.
*/
readonly data: string;
/**
* Has to be highlighted if defined.
*/
readonly highlight?: true;
};
/**
* Splits the `caption` argument based on the ranges from the `highlight` argument.
*/
export function split(caption: string, highlight: CaptionHighlight): Fragment[] {
const result: Fragment[] = [];
const ranges = highlight.ranges.slice();
const containerOf = (index: number) =>
ranges.findIndex((range) => Range.contains(index, range));
let data = '';
for (let i = 0; i < caption.length; i += 1) {
const containerIndex = containerOf(i);
if (containerIndex === -1) {
data += caption[i];
} else {
if (data.length > 0) {
result.push({ data });
}
const { length } = ranges.splice(containerIndex, 1).shift()!;
result.push({ data: caption.substr(i, length), highlight: true });
data = '';
i = i + length - 1;
}
}
if (data.length > 0) {
result.push({ data });
}
if (ranges.length !== 0) {
throw new Error(
'Error occurred when splitting the caption. There was a mismatch between the caption and the corresponding highlighting ranges.',
);
}
return result;
}
}
/**
* The caption highlighting with the highlighted ranges and an optional background color.
*/
export type CaptionHighlight = {
/**
* The ranges to highlight in the caption.
*/
readonly ranges: CaptionHighlight.Range[];
/**
* The optional color of the text data that is being highlighted. Falls back to the default `mark` color values defined under a widget segment class.
*/
readonly color?: TreeViewDecoration.Color;
/**
* The optional background color of the text data that is being highlighted.
*/
readonly backgroundColor?: TreeViewDecoration.Color;
};
/**
* Namespace for the decoration data and the styling refinements for the decorated widgets.
*/
export namespace TreeViewDecoration {
/**
* For the sake of simplicity, we have merged the `font-style`, `font-weight`, and the `text-decoration` together.
*/
export type FontStyle =
| 'normal'
| 'bold'
| 'italic'
| 'oblique'
| 'underline'
| 'line-through';
/**
* A string that could be:
*
* - one of the browser colors, (E.g.: `blue`, `red`, `magenta`),
* - the case insensitive hexadecimal color code, (for instance, `#ee82ee`, `#20B2AA`, `#f09` ), or
* - either the `rgb()` or the `rgba()` functions.
*
* For more details, see: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
*
* Note, it is highly recommended to use one of the predefined colors of Mana, so the desired color will
* look nice with both the `light` and the `dark` theme too.
*/
export type Color = string;
/**
* Encapsulates styling information of the font.
*/
export type FontData = {
/**
* Zero to any font style.
*/
readonly style?: FontStyle | FontStyle[];
/**
* The color of the font.
*/
readonly color?: Color;
};
/**
* Arbitrary information that has to be shown either before or after the caption as a prefix or a suffix.
*/
export type CaptionAffix = {
/**
* The text content of the prefix or the suffix.
*/
readonly data: string;
/**
* Font data for customizing the prefix of the suffix.
*/
readonly fontData?: FontData;
};
export type BaseTailDecoration = {
/**
* Optional tooltip for the tail decoration.
*/
readonly tooltip?: string;
};
/**
* Unlike caption suffixes, tail decorations appears right-aligned after the caption and the caption suffixes (is any).
*/
export type TailDecoration = {
/**
* The text content of the tail decoration.
*/
readonly data: string;
/**
* Font data for customizing the content.
*/
readonly fontData?: FontData;
} & BaseTailDecoration;
export type TailDecorationIcon = {
/**
* This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`.
* For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/.
*/
readonly icon: string;
/**
* The color of the icon.
*/
readonly color?: Color;
} & BaseTailDecoration;
export type TailDecorationIconClass = {
/**
* This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw']
* For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/.
*/
readonly iconClass: string[];
/**
* The color of the icon.
*/
readonly color?: Color;
} & BaseTailDecoration;
/**
* A shape that can be optionally rendered behind the overlay icon. Can be used to further refine colors.
*/
export type IconOverlayBackground = {
/**
* Either `circle` or `square`.
*/
readonly shape: 'circle' | 'square';
/**
* The color of the background shape.
*/
readonly color?: Color;
};
/**
* Has not effect if the widget being decorated has no associated icon.
*/
export type BaseOverlay = {
/**
* The position where the decoration will be placed on the top of the original icon.
*/
readonly position: IconOverlayPosition;
/**
* The color of the overlaying icon. If not specified, then the default icon color will be used.
*/
readonly color?: Color;
/**
* The optional background color of the overlay icon.
*/
readonly background?: IconOverlayBackground;
};
export type IconOverlay = {
/**
* This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`.
* For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/.
*/
readonly icon: string;
} & BaseOverlay;
export type IconClassOverlay = {
/**
* This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw']
* For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/.
*/
readonly iconClass: string[];
} & BaseOverlay;
}
/**
* Encapsulates styling information that has to be applied on the widget which we decorate.
*/
export type TreeViewDecorationData = {
/**
* The higher number has higher priority. If not specified, treated as `0`.
* When multiple decorators are available for the same item, and decoration data cannot be merged together,
* then the higher priority item will be applied on the decorated element and the lower priority will be ignored.
*/
readonly priority?: number;
/**
* The font data for the caption.
*/
readonly fontData?: TreeViewDecoration.FontData;
/**
* The background color of the entire row.
*/
readonly backgroundColor?: TreeViewDecoration.Color;
/**
* Optional, leading prefixes right before the caption.
*/
readonly captionPrefixes?: TreeViewDecoration.CaptionAffix[];
/**
* Suffixes that might come after the caption as an additional information.
*/
readonly captionSuffixes?: TreeViewDecoration.CaptionAffix[];
/**
* Optional right-aligned decorations that appear after the widget caption and after the caption suffixes (is any).
*/
readonly tailDecorations?: (
| TreeViewDecoration.TailDecoration
| TreeViewDecoration.TailDecorationIcon
| TreeViewDecoration.TailDecorationIconClass
)[];
/**
* Custom tooltip for the decorated item. Tooltip will be appended to the original tooltip, if any.
*/
readonly tooltip?: string;
/**
* Sets the color of the icon. Ignored if the decorated item has no icon.
*/
readonly iconColor?: TreeViewDecoration.Color;
/**
* Has not effect if given, but the widget does not have an associated image.
*/
readonly iconOverlay?:
| TreeViewDecoration.IconOverlay
| TreeViewDecoration.IconClassOverlay;
/**
* An array of ranges to highlight the caption.
*/
readonly highlight?: CaptionHighlight;
/**
* A count badge for widgets.
*/
readonly badge?: number;
};
export namespace TreeViewDecorationData {
/**
* Compares the decoration data based on the priority. Lowest priorities come first.
*/
export const comparePriority = (
left: TreeViewDecorationData,
right: TreeViewDecorationData,
): number => (left.priority || 0) - (right.priority || 0);
}