Skip to content

Commit

Permalink
refactor(app): dynamically load font-awesome
Browse files Browse the repository at this point in the history
  • Loading branch information
BroKun authored and sunshinesmilelk committed Jan 30, 2024
1 parent 143aa4a commit bf81d99
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 63 deletions.
1 change: 0 additions & 1 deletion apps/docs/src/file-tree/file-view/file-view.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { TreeNode } from '@difizen/mana-app';
import { FileTreeViewFactory } from '@difizen/mana-app';
import { TreeViewComponent } from '@difizen/mana-app';
import { isOSX, FileTreeModel } from '@difizen/mana-app';
import {
FileTreeView,
Expand Down
12 changes: 12 additions & 0 deletions packages/mana-app/src/file-tree/file-tree-component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import 'font-awesome/css/font-awesome.min.css';
import 'file-icons-js/css/style.css';
import './file-tree-style.less';

import type { ComponentType } from 'react';

import { TreeViewContent as TreeViewContentInner } from '../tree/view';

export const TreeViewContent: ComponentType<any> = (props: any) => {
return <TreeViewContentInner {...props} />;
};
export default TreeViewContent;
1 change: 1 addition & 0 deletions packages/mana-app/src/file-tree/file-tree-style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import url('~font-awesome/css/font-awesome.min.css');
33 changes: 30 additions & 3 deletions packages/mana-app/src/file-tree/file-tree-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@ import { FileOutlined } from '@ant-design/icons';
import { Disposable, DisposableCollection, isCancelled } from '@difizen/mana-common';
import { URI } from '@difizen/mana-common';
import type { MenuPath } from '@difizen/mana-core';
import { ViewInstance } from '@difizen/mana-core';
import { ManaModule, SelectionService, view } from '@difizen/mana-core';
import { l10n } from '@difizen/mana-l10n'; /* eslint-disable @typescript-eslint/no-unused-vars */
import { useInject } from '@difizen/mana-observable';
import { singleton, inject } from '@difizen/mana-syringe';
import * as React from 'react';
import { forwardRef, lazy, Suspense } from 'react';

import { LabelProvider } from '../label';
import { TreeModel } from '../tree';
Expand All @@ -20,9 +23,6 @@ import { FileTreeModel } from './file-tree-model';
import { FileTreeContextMenuPath, URINode } from './file-tree-protocol';
import { FileStat, FileType } from './files';

import 'font-awesome/css/font-awesome.min.css';
import 'file-icons-js/css/style.css';

export const FILE_TREE_CLASS = 'mana-file-tree';
export const FILE_STAT_NODE_CLASS = 'mana-FileStatNode';
export const DIR_NODE_CLASS = 'mana-DirNode';
Expand All @@ -31,12 +31,39 @@ export const FILE_STAT_ICON_CLASS = 'mana-FileStatIcon';
export const FileTreeViewFactory = 'file-tree-view-fatory';
import './style/file-icon.less';

const LazyTreeComponent = lazy(() =>
import('./file-tree-component.js').then(({ TreeViewContent }) => ({
default: TreeViewContent,
})),
);

export const FileTreeViewComponent = forwardRef<HTMLDivElement>(
function FileTreeViewComponent(_props, ref) {
const treeView = useInject<TreeView>(ViewInstance);

return (
<div
ref={ref}
onContextMenu={(event) => {
treeView.handleContextMenuEvent(event, treeView, undefined);
}}
{...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
>
<Suspense fallback={<div>Loading...</div>}>
<LazyTreeComponent />
</Suspense>
</div>
);
},
);

export const FileTreeViewModule = ManaModule.create()
.register(FileTree, FileTreeModel)
.dependOn(TreeViewModule);
@singleton()
@view(FileTreeViewFactory, FileTreeViewModule)
export class FileTreeView extends TreeView {
override view = FileTreeViewComponent;
override id = FileTreeViewFactory;
override label = (<FileOutlined />);
protected readonly toCancelNodeExpansion = new DisposableCollection();
Expand Down
1 change: 0 additions & 1 deletion packages/mana-app/src/style/index.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable custom-property-pattern */
@import url('~font-awesome/css/font-awesome.min.css');

body,
.mana-app {
Expand Down
125 changes: 67 additions & 58 deletions packages/mana-app/src/tree/view/tree-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,72 +107,81 @@ export const TreeViewRow = (props: TreeViewRowProps) => {
</CellMeasurer>
);
};
export function TreeViewContent() {
const treeView = useInject<TreeView>(ViewInstance);
const listRef = React.createRef<List>();
const cache = React.useMemo(() => {
return new CellMeasurerCache({
fixedWidth: true,
});
}, []);

React.useEffect(() => {
if (listRef && listRef.current) {
if (treeView.isVisible) {
cache.clearAll();
listRef.current.recomputeRowHeights();
} else {
listRef.current.forceUpdateGrid();
}
}
}, [treeView.scrollToRow, treeView.isVisible, listRef, cache]);

const rows = Array.from(treeView.rows.values());
const TreeRow = treeView.treeRowComponent;
return (
<Dropdown
className="mana-tree-node-dropdown"
trigger={['contextMenu']}
visible={!!treeView.contextMenuData}
onVisibleChange={(visible) => {
if (!visible) {
treeView.setContextMenuArgs(undefined);
}
}}
overlay={
<MenuRender
data={treeView.contextMenuData}
menuPath={treeView.contextMenuPath}
/>
}
>
<div className="mana-tree-content">
<List
ref={listRef}
width={treeView.offsetWidth || 100}
height={treeView.offsetHeight || 100}
rowCount={rows.length}
rowHeight={cache.rowHeight}
rowRenderer={(rowProps) => (
<TreeRow {...rowProps} cache={cache} row={rows[rowProps.index]} />
)}
scrollToIndex={treeView.scrollToRow}
onScroll={treeView.handleScroll.bind(treeView)}
tabIndex={-1}
style={{
overflow: 'auto',
}}
/>
</div>
</Dropdown>
);
}

export const TreeViewComponent = forwardRef<HTMLDivElement>(
function TreeViewComponent(_props, ref) {
const treeView = useInject<TreeView>(ViewInstance);
const listRef = React.createRef<List>();
const cache = React.useMemo(() => {
return new CellMeasurerCache({
fixedWidth: true,
});
}, []);

React.useEffect(() => {
if (listRef && listRef.current) {
if (treeView.isVisible) {
cache.clearAll();
listRef.current.recomputeRowHeights();
} else {
listRef.current.forceUpdateGrid();
}
}
}, [treeView.scrollToRow, treeView.isVisible, listRef, cache]);

const rows = Array.from(treeView.rows.values());
const TreeRow = treeView.treeRowComponent;
return (
<Dropdown
className="mana-tree-node-dropdown"
trigger={['contextMenu']}
visible={!!treeView.contextMenuData}
onVisibleChange={(visible) => {
if (!visible) {
treeView.setContextMenuArgs(undefined);
}
<div
ref={ref}
onContextMenu={(event) => {
treeView.handleContextMenuEvent(event, treeView, undefined);
}}
overlay={
<MenuRender
data={treeView.contextMenuData}
menuPath={treeView.contextMenuPath}
/>
}
{...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
>
<div
ref={ref}
onContextMenu={(event) => {
treeView.handleContextMenuEvent(event, treeView, undefined);
}}
{...(treeView.createContainerAttributes() as React.HTMLAttributes<HTMLDivElement>)}
>
<List
ref={listRef}
width={treeView.offsetWidth || 100}
height={treeView.offsetHeight || 100}
rowCount={rows.length}
rowHeight={cache.rowHeight}
rowRenderer={(rowProps) => (
<TreeRow {...rowProps} cache={cache} row={rows[rowProps.index]} />
)}
scrollToIndex={treeView.scrollToRow}
onScroll={treeView.handleScroll.bind(treeView)}
tabIndex={-1}
style={{
overflow: 'auto',
}}
/>
</div>
</Dropdown>
<TreeViewContent />
</div>
);
},
);
Expand Down

0 comments on commit bf81d99

Please sign in to comment.