@difizen/libro-common 0.3.4 → 1.0.0

package/src/app/tree/components/index.tsx

@@ -0,0 +1,22 @@
+import type { TreeNodeComponents } from '../tree';
+import { TreeNodeCaption } from './tree-node-caption';
+import { TreeNodeExpansion } from './tree-node-expansion';
+import { TreeNodeIcon } from './tree-node-icon';
+import { TreeNodeIconDecorator } from './tree-node-icon-decorator';
+import { TreeNodeCaptionAffixes } from './tree-node-caption-affix';
+import { TreeNodeTailDecorations } from './tree-node-tail-decoration';
+import { TreeNodeComponent } from './tree-node';
+import { TreeIdent } from './tree-ident';
+import { TreeSwitchIcon } from './tree-switch-icon';
+
+export const DefaultTreeNodeComponents: TreeNodeComponents = {
+  TreeNodeExpansion,
+  TreeNode: TreeNodeComponent,
+  TreeNodeIcon,
+  TreeNodeCaption,
+  TreeNodeCaptionAffixes,
+  TreeNodeTailDecorations,
+  TreeNodeIconDecorator,
+  TreeIdent,
+  TreeSwitchIcon,
+};

package/src/app/tree/components/tree-ident.tsx

@@ -0,0 +1,44 @@
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import * as React from 'react';
+
+import type { TreeNode, TreeNodeProps } from '../tree.js';
+import { TreeProps, TREE_NODE_INDENT_GUIDE_CLASS } from '../tree-protocol.js';
+import type { TreeView } from '../view/tree-view.js';
+
+type IndentGuides = 'onHover' | 'none' | 'always';
+export const TreeIdent: React.FC<TreeNodeProps> = (props: TreeNodeProps) => {
+  const treeViewHelper = useInject<TreeView>(ViewInstance);
+  const treeProps = useInject<TreeProps>(TreeProps);
+  const renderIndentGuides: IndentGuides = 'onHover' as IndentGuides; // this.corePreferences['workbench.tree.renderIndentGuides'];
+
+  if (renderIndentGuides === 'none') {
+    return null;
+  }
+  const { node, nodeProps } = props;
+  let { depth } = nodeProps;
+
+  const indentDivs: React.ReactNode[] = [];
+  let current: TreeNode | undefined = node;
+  while (current && depth) {
+    const classNames: string[] = [TREE_NODE_INDENT_GUIDE_CLASS];
+    if (treeViewHelper.needsActiveIndentGuideline(current)) {
+      classNames.push('active');
+    } else {
+      classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always');
+    }
+    const paddingLeft = treeProps.leftPadding * depth;
+    indentDivs.unshift(
+      <div
+        key={depth}
+        className={classNames.join(' ')}
+        style={{
+          paddingLeft: `${paddingLeft}px`,
+        }}
+      />,
+    );
+    current = current.parent;
+    depth -= 1;
+  }
+  return <>{indentDivs}</>;
+};

package/src/app/tree/components/tree-node-caption-affix.tsx

@@ -0,0 +1,47 @@
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import * as React from 'react';
+
+import { notEmpty } from '../../../common/index.js';
+import type { TreeNodeCaptionAffixesProps } from '../tree.js';
+import {
+  TREE_NODE_SEGMENT_CLASS,
+  TREE_NODE_SEGMENT_GROW_CLASS,
+} from '../tree-protocol.js';
+import { TreeViewDecorationStyles } from '../tree-view-decoration.js';
+import type { TreeView } from '../view/tree-view.js';
+import { TreeViewDecorator } from '../view/tree-view-decorator.js';
+
+export const TreeNodeCaptionAffixes: React.FC<TreeNodeCaptionAffixesProps> = (
+  props: TreeNodeCaptionAffixesProps,
+) => {
+  const treeViewDecorator = useInject<TreeViewDecorator>(TreeViewDecorator);
+  const treeView = useInject<TreeView>(ViewInstance);
+
+  const { affixKey, node } = props;
+  const suffix = affixKey === 'captionSuffixes';
+  const affixClass = suffix
+    ? TreeViewDecorationStyles.CAPTION_SUFFIX_CLASS
+    : TreeViewDecorationStyles.CAPTION_PREFIX_CLASS;
+  const classes = [TREE_NODE_SEGMENT_CLASS, affixClass];
+  const affixes = treeViewDecorator
+    .getDecorationData(node, affixKey)
+    .filter(notEmpty)
+    .reduce((acc, current) => acc.concat(current), []);
+  const children: React.ReactNode[] = [];
+  for (let i = 0; i < affixes.length; i += 1) {
+    const affix = affixes[i];
+    if (suffix && i === affixes.length - 1) {
+      classes.push(TREE_NODE_SEGMENT_GROW_CLASS);
+    }
+    const style = treeView.applyFontStyles({}, affix.fontData);
+    const className = classes.join(' ');
+    const key = `${node.id}_${i}`;
+    children.push(
+      <div key={key} className={className} style={style}>
+        {affix.data}
+      </div>,
+    );
+  }
+  return <>{children}</>;
+};

package/src/app/tree/components/tree-node-caption.tsx

@@ -0,0 +1,128 @@
+import { notEmpty } from '../../../common/index.js';
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import * as React from 'react';
+
+import type { TreeNodeProps } from '../tree.js';
+import {
+  TREE_NODE_SEGMENT_CLASS,
+  TREE_NODE_SEGMENT_GROW_CLASS,
+} from '../tree-protocol.js';
+import { TreeViewDecorationStyles, CaptionHighlight } from '../tree-view-decoration.js';
+import type { TreeView } from '../view/tree-view.js';
+import { TreeViewDecorator } from '../view/tree-view-decorator.js';
+
+export function TreeNodeCaption(props: TreeNodeProps) {
+  const { node } = props;
+  const treeViewDecorator = useInject<TreeViewDecorator>(TreeViewDecorator);
+  const treeView = useInject<TreeView>(ViewInstance);
+  /**
+   * Determine if the tree node contains trailing suffixes.
+   * @param node the tree node.
+   *
+   * @returns `true` if the tree node contains trailing suffices.
+   */
+  const hasTrailingSuffixes = (): boolean => {
+    return (
+      treeViewDecorator
+        .getDecorationData(node, 'captionSuffixes')
+        .filter(notEmpty)
+        .reduce((acc, current) => acc.concat(current), []).length > 0
+    );
+  };
+  /**
+   * Decorate the tree caption.
+   * @param node the tree node.
+   * @param attrs the additional attributes.
+   */
+  const decorateCaption = (
+    attrs: React.HTMLAttributes<HTMLElement>,
+  ): React.Attributes & React.HTMLAttributes<HTMLElement> => {
+    const style = treeViewDecorator
+      .getDecorationData(node, 'fontData')
+      .filter(notEmpty)
+      .reverse()
+      .map((fontData) => treeView.applyFontStyles({}, fontData))
+      .reduce(
+        (acc, current) => ({
+          ...acc,
+          ...current,
+        }),
+        {},
+      );
+    return {
+      ...attrs,
+      style,
+    };
+  };
+
+  /**
+   * Update the node given the caption and highlight.
+   * @param caption the caption.
+   * @param highlight the tree decoration caption highlight.
+   */
+  const toReactNode = (
+    caption: string,
+    highlight: CaptionHighlight,
+  ): React.ReactNode[] => {
+    let style: React.CSSProperties = {};
+    if (highlight.color) {
+      style = {
+        ...style,
+        color: highlight.color,
+      };
+    }
+    if (highlight.backgroundColor) {
+      style = {
+        ...style,
+        backgroundColor: highlight.backgroundColor,
+      };
+    }
+    const createChildren = (fragment: CaptionHighlight.Fragment, index: number) => {
+      const { data } = fragment;
+      if (fragment.highlight) {
+        return (
+          <mark
+            className={TreeViewDecorationStyles.CAPTION_HIGHLIGHT_CLASS}
+            style={style}
+            key={index}
+          >
+            {data}
+          </mark>
+        );
+      }
+      return data;
+    };
+    return CaptionHighlight.split(caption, highlight).map(createChildren);
+  };
+
+  const tooltip = treeViewDecorator
+    .getDecorationData(node, 'tooltip')
+    .filter(notEmpty)
+    .join(' • ');
+  const classes = [TREE_NODE_SEGMENT_CLASS];
+  if (!hasTrailingSuffixes()) {
+    classes.push(TREE_NODE_SEGMENT_GROW_CLASS);
+  }
+  const className = classes.join(' ');
+  let attrs: React.Attributes & React.HTMLAttributes<HTMLDivElement> = decorateCaption({
+    className,
+    id: node.id,
+  });
+  if (tooltip.length > 0) {
+    attrs = {
+      ...attrs,
+      title: tooltip,
+    };
+  }
+  const children: React.ReactNode[] = [];
+  const caption = treeView.toNodeName(node);
+  const highlight = treeViewDecorator.getDecorationData(node, 'highlight')[0];
+  if (highlight) {
+    children.push(toReactNode(caption, highlight));
+  }
+  if (!highlight) {
+    children.push(caption);
+  }
+  return <div {...attrs}>{children}</div>;
+}

package/src/app/tree/components/tree-node-expansion.tsx

@@ -0,0 +1,36 @@
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+
+import {
+  BUSY_CLASS,
+  COLLAPSED_CLASS,
+  EXPANSION_TOGGLE_CLASS,
+} from '../../style/style-protocol.js';
+import { TreeNodeComponents } from '../tree.js';
+import type { TreeNodeProps } from '../tree.js';
+import { ExpandableTreeNode } from '../tree-expansion.js';
+import { TREE_NODE_SEGMENT_CLASS } from '../tree-protocol.js';
+import type { TreeView } from '../view/tree-view.js';
+
+export function TreeNodeExpansion(props: TreeNodeProps) {
+  const treeNodeComponents = useInject<TreeNodeComponents>(TreeNodeComponents);
+  const { TreeSwitchIcon } = treeNodeComponents;
+  const treeView = useInject<TreeView>(ViewInstance);
+  const { node } = props;
+  if (!ExpandableTreeNode.is(node)) {
+    return null;
+  }
+  const classes = [TREE_NODE_SEGMENT_CLASS, EXPANSION_TOGGLE_CLASS];
+  if (!node.expanded) {
+    classes.push(COLLAPSED_CLASS);
+  }
+  if (node.busy) {
+    classes.push(BUSY_CLASS);
+  }
+  const className = classes.join(' ');
+  return (
+    <div data-node-id={node.id} className={className} onClick={treeView.toggle}>
+      <TreeSwitchIcon {...props} />
+    </div>
+  );
+}

package/src/app/tree/components/tree-node-icon-decorator.tsx

@@ -0,0 +1,75 @@
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import * as React from 'react';
+
+import { notEmpty } from '../../../common/index.js';
+import type { TreeNodeIconDecoratorProps } from '../tree.js';
+import type { TreeViewDecoration } from '../tree-view-decoration.js';
+import {
+  IconOverlayPosition,
+  TreeViewDecorationStyles,
+} from '../tree-view-decoration.js';
+import type { TreeView } from '../view/tree-view.js';
+import { TreeViewDecorator } from '../view/tree-view-decorator.js';
+
+export const TreeNodeIconDecorator: React.FC<TreeNodeIconDecoratorProps> = (
+  props: TreeNodeIconDecoratorProps,
+) => {
+  const treeViewDecorator = useInject<TreeViewDecorator>(TreeViewDecorator);
+  const treeView = useInject<TreeView>(ViewInstance);
+  const { icon, node } = props;
+  if (icon === null) {
+    return null;
+  }
+
+  const overlayIcons: React.ReactNode[] = [];
+  new Map(
+    treeViewDecorator
+      .getDecorationData(node, 'iconOverlay')
+      .reverse()
+      .filter(notEmpty)
+      .map(
+        (overlay) =>
+          [overlay.position, overlay] as [
+            IconOverlayPosition,
+            TreeViewDecoration.IconOverlay | TreeViewDecoration.IconClassOverlay,
+          ],
+      ),
+  ).forEach((overlay, position) => {
+    const iconClasses = [
+      TreeViewDecorationStyles.DECORATOR_SIZE_CLASS,
+      IconOverlayPosition.getStyle(position),
+    ];
+    const style = (color?: string) => (color === undefined ? {} : { color });
+    if (overlay.background) {
+      overlayIcons.push(
+        <span
+          key={`${node.id}bg`}
+          className={treeView.getIconClass(overlay.background.shape, iconClasses)}
+          style={style(overlay.background.color)}
+        ></span>,
+      );
+    }
+    const overlayIcon =
+      (overlay as TreeViewDecoration.IconOverlay).icon ||
+      (overlay as TreeViewDecoration.IconClassOverlay).iconClass;
+    overlayIcons.push(
+      <span
+        key={node.id}
+        className={treeView.getIconClass(overlayIcon, iconClasses)}
+        style={style(overlay.color)}
+      ></span>,
+    );
+  });
+
+  if (overlayIcons.length > 0) {
+    return (
+      <div className={TreeViewDecorationStyles.ICON_WRAPPER_CLASS}>
+        {icon}
+        {overlayIcons}
+      </div>
+    );
+  }
+
+  return icon as React.ReactElement;
+};

package/src/app/tree/components/tree-node-icon.tsx

@@ -0,0 +1,3 @@
+export function TreeNodeIcon() {
+  return null;
+}

package/src/app/tree/components/tree-node-tail-decoration.tsx

@@ -0,0 +1,59 @@
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import * as React from 'react';
+
+import { notEmpty } from '../../../common/index.js';
+import type { TreeNodeProps } from '../tree.js';
+import { TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS } from '../tree-protocol.js';
+import type { TreeViewDecoration } from '../tree-view-decoration.js';
+import type { TreeView } from '../view/tree-view.js';
+import { TreeViewDecorator } from '../view/tree-view-decorator.js';
+
+export function TreeNodeTailDecorations(props: TreeNodeProps) {
+  const { node } = props;
+  const treeViewDecorator = useInject<TreeViewDecorator>(TreeViewDecorator);
+  const treeView = useInject<TreeView>(ViewInstance);
+  return (
+    <React.Fragment>
+      {treeViewDecorator
+        .getDecorationData(node, 'tailDecorations')
+        .filter(notEmpty)
+        .reduce((acc, current) => acc.concat(current), [])
+        .map((decoration, index) => {
+          const { tooltip } = decoration;
+          const { data, fontData } = decoration as TreeViewDecoration.TailDecoration;
+          const { color } = decoration as TreeViewDecoration.TailDecorationIcon;
+          const icon =
+            (decoration as TreeViewDecoration.TailDecorationIcon).icon ||
+            (decoration as TreeViewDecoration.TailDecorationIconClass).iconClass;
+          const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS].join(' ');
+          // eslint-disable-next-line no-nested-ternary
+          const style = fontData
+            ? treeView.applyFontStyles({}, fontData)
+            : color
+              ? { color }
+              : undefined;
+          const content =
+            data ||
+            (icon ? (
+              <span
+                key={`${node.id}icon${index}`}
+                className={treeView.getIconClass(icon)}
+              ></span>
+            ) : (
+              ''
+            ));
+          return (
+            <div
+              key={node.id + className + index}
+              className={className}
+              style={style}
+              title={tooltip}
+            >
+              {content}
+            </div>
+          );
+        })}
+    </React.Fragment>
+  );
+}

package/src/app/tree/components/tree-node.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ViewInstance } from '../../../core/index.js';
+import { useInject } from '../../../observable/index.js';
+import type { TreeNodeProps } from '../tree.js';
+import { TreeNode, TreeNodeComponents } from '../tree.js';
+import { TREE_NODE_CONTENT_CLASS } from '../tree-protocol.js';
+import type { TreeView } from '../view/tree-view.js';
+
+export const TreeNodeComponent: React.FC<TreeNodeProps> = (props: TreeNodeProps) => {
+  const treeNodeComponents = useInject<TreeNodeComponents>(TreeNodeComponents);
+  const treeView = useInject<TreeView>(ViewInstance);
+  const {
+    TreeNodeIconDecorator,
+    TreeNodeCaptionAffixes,
+    TreeNodeExpansion,
+    TreeNodeIcon,
+    TreeNodeTailDecorations,
+    TreeNodeCaption,
+  } = treeNodeComponents;
+
+  const { node } = props;
+  if (!TreeNode.isVisible(node)) {
+    return null;
+  }
+  const attrs = treeView.createNodeAttributes(node, props.nodeProps);
+  return (
+    <div {...(attrs as React.Attributes & React.HTMLAttributes<HTMLDivElement>)}>
+      <div className={TREE_NODE_CONTENT_CLASS}>
+        <TreeNodeExpansion {...props} />
+        <TreeNodeIconDecorator {...props} icon={<TreeNodeIcon {...props} />} />
+        <TreeNodeCaptionAffixes {...props} affixKey="captionPrefixes" />
+        <TreeNodeCaption {...props} />
+        <TreeNodeCaptionAffixes {...props} affixKey="captionSuffixes" />
+        <TreeNodeTailDecorations {...props} />
+      </div>
+    </div>
+  );
+};

package/src/app/tree/components/tree-switch-icon.tsx

@@ -0,0 +1,13 @@
+import { DownOutlined } from '@ant-design/icons';
+import * as React from 'react';
+
+import type { TreeNodeProps } from '../tree';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const TreeSwitchIcon: React.FC<TreeNodeProps> = (_props: TreeNodeProps) => {
+  return (
+    <span className="tree-switcher">
+      <DownOutlined style={{ fontSize: 12 }} />
+    </span>
+  );
+};

package/src/app/tree/index.ts

@@ -0,0 +1,15 @@
+export * from './module';
+export * from './view';
+export * from './tree-model';
+export * from './tree-impl';
+export * from './tree-selection-impl';
+export * from './tree-expansion';
+export * from './tree-navigation';
+export * from './tree-decorator';
+export * from './tree';
+export * from './components';
+export * from './tree-protocol';
+export * from './tree-selection';
+export * from './tree-label-provider';
+export * from './tree-iterator';
+export * from './tree-view-decoration';

package/src/app/tree/module.ts

@@ -0,0 +1,30 @@
+import { ManaModule } from '../../core/index.js';
+
+import { DefaultTreeNodeComponents } from './components/index.js';
+import { DefaultTreeProps, TreeNodeComponents } from './tree.js';
+import { NoopTreeDecoratorService } from './tree-decorator.js';
+import { TreeExpansionServiceImpl } from './tree-expansion.js';
+import { TreeLabelProvider } from './tree-label-provider.js';
+import { TreeNavigationService } from './tree-navigation.js';
+import { TreeProps } from './tree-protocol.js';
+import { TreeSelectionServiceImpl } from './tree-selection-impl.js';
+import { TreeView } from './view/index.js';
+import './style/index.less';
+import './style/tree-decorator.less';
+
+export const TreeModule = ManaModule.create().register(
+  TreeView,
+  TreeLabelProvider,
+  TreeSelectionServiceImpl,
+  TreeExpansionServiceImpl,
+  TreeNavigationService,
+  NoopTreeDecoratorService,
+  {
+    token: TreeProps,
+    useValue: DefaultTreeProps,
+  },
+  {
+    token: TreeNodeComponents,
+    useValue: DefaultTreeNodeComponents,
+  },
+);