@difizen/libro-common 0.3.3 → 1.0.0

package/es/react/tabs/styles/position.less

@@ -0,0 +1,217 @@
+@import '../../styles/variables.less';
+
+@tab-prefix-cls: ~'@{mana-prefix}-tabs';
+
+.@{tab-prefix-cls} {
+  // ========================== Top & Bottom ==========================
+  &-top,
+  &-bottom {
+    flex-direction: column;
+
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      margin: 0;
+      background-color: var(--mana-sideBar-background);
+
+      &::before {
+        position: absolute;
+        right: 0;
+        left: 0;
+        border-bottom: 0;
+        content: '';
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        height: 2px;
+
+        &-animated {
+          transition:
+            width 0.3s,
+            left 0.3s,
+            right 0.3s;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-wrap {
+        &::before,
+        &::after {
+          top: 0;
+          bottom: 0;
+          width: 30px;
+        }
+
+        &::before {
+          left: 0;
+        }
+
+        &::after {
+          right: 0;
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &-top {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      &::before {
+        top: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        top: 0;
+      }
+    }
+  }
+
+  &-bottom {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      order: 1;
+
+      &::before {
+        bottom: 0;
+      }
+
+      .@{tab-prefix-cls}-ink-bar {
+        bottom: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+      background-color: var(--mana-editor-background);
+    }
+  }
+
+  // ========================== Left & Right ==========================
+  &-left,
+  &-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      flex-direction: column;
+      min-width: 50px;
+      padding: 8px 0;
+      background-color: var(--mana-activityBar-background);
+      border-right: 1px solid var(--mana-activityBar-border);
+
+      // >>>>>>>>>>> Tab
+      .@{tab-prefix-cls}-tab {
+        justify-content: center;
+        width: 48px;
+        max-width: 48px;
+        height: 48px;
+        padding: 0;
+        text-align: center;
+      }
+
+      .@{tab-prefix-cls}-tab-btn {
+        color: var(--mana-activityBar-inactiveForeground);
+
+        &:hover {
+          color: var(--mana-activityBar-foreground);
+        }
+
+        .anticon {
+          font-size: 24px;
+        }
+      }
+
+      .anticon {
+        margin: 0;
+        font-size: var(--mana-sidebar-icon-size);
+      }
+
+      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
+        margin: 0;
+      }
+
+      // >>>>>>>>>>> Nav
+      .@{tab-prefix-cls}-nav-wrap {
+        flex-direction: column;
+
+        &::before,
+        &::after {
+          right: 0;
+          left: 0;
+          height: 30px;
+        }
+
+        &::before {
+          top: 0;
+        }
+
+        &::after {
+          bottom: 0;
+        }
+
+        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
+          opacity: 1;
+        }
+        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
+          opacity: 1;
+        }
+      }
+
+      // >>>>>>>>>>> Ink Bar
+      .@{tab-prefix-cls}-ink-bar {
+        width: 3px;
+
+        &-animated {
+          transition:
+            height 0.3s,
+            top 0.3s;
+        }
+      }
+
+      .@{tab-prefix-cls}-nav-list,
+      .@{tab-prefix-cls}-nav-operations {
+        flex: 1 0 auto; // fix safari scroll problem
+        flex-direction: column;
+      }
+    }
+  }
+
+  &-left {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-ink-bar {
+        left: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      margin-left: -1px;
+      background-color: var(--mana-sideBar-background);
+      border-left: 1px solid hsv(0, 0, 94%);
+    }
+  }
+
+  &-right {
+    > .@{tab-prefix-cls}-nav,
+    > div > .@{tab-prefix-cls}-nav {
+      order: 1;
+
+      .@{tab-prefix-cls}-ink-bar {
+        right: 0;
+      }
+    }
+
+    > .@{tab-prefix-cls}-content-holder,
+    > div > .@{tab-prefix-cls}-content-holder {
+      order: 0;
+      margin-right: -1px;
+      background-color: var(--mana-sideBar-background);
+      border-right: 1px solid hsv(0, 0, 94%);
+    }
+  }
+}

package/es/react/typings/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css';
+declare module '*.png';
+declare module '*.less';
+declare module 'rc-util/lib/Dom/addEventListener';
+declare module 'rc-util/lib/React/render';

package/es/react/util.d.ts

@@ -0,0 +1,2 @@
+export declare const getPrefixCls: (suffixCls?: string) => string;
+//# sourceMappingURL=util.d.ts.map

package/es/react/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/react/util.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,eAAgB,MAAM,WAE9C,CAAC"}

package/es/react/util.js

@@ -0,0 +1,4 @@
+import { defaultPrefixCls } from "./constant";
+export var getPrefixCls = function getPrefixCls(suffixCls) {
+  return suffixCls ? "".concat(defaultPrefixCls, "-").concat(suffixCls) : defaultPrefixCls;
+};

package/es/url.js

@@ -10,7 +10,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { isWeb } from '@difizen/mana-app';
+import { isWeb } from "./app";
 import { posix } from 'path-browserify';
 import urlparse from 'url-parse';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-common",
-  "version": "0.3.3",
+  "version": "1.0.0",
   "description": "",
   "keywords": [
     "libro",
@@ -8,19 +8,38 @@
   ],
   "repository": "git@github.com:difizen/libro.git",
   "license": "MIT",
-  "type": "module",
   "exports": {
     ".": {
       "typings": "./es/index.d.ts",
       "default": "./es/index.js"
     },
-    "./mock": {
-      "typings": "./es/mock/index.d.ts",
-      "default": "./es/mock/index.js"
+    "./common": {
+      "typings": "./es/common/index.js",
+      "default": "./es/common/index.js"
     },
-    "./es/mock": {
-      "typings": "./es/mock/index.d.ts",
-      "default": "./es/mock/index.js"
+    "./react": {
+      "typings": "./es/react/index.js",
+      "default": "./es/react/index.js"
+    },
+    "./l10n": {
+      "typings": "./es/l10n/index.js",
+      "default": "./es/l10n/index.js"
+    },
+    "./ioc": {
+      "typings": "./es/ioc/index.js",
+      "default": "./es/ioc/index.js"
+    },
+    "./observable": {
+      "typings": "./es/observable/index.js",
+      "default": "./es/observable/index.js"
+    },
+    "./core": {
+      "typings": "./es/core/index.js",
+      "default": "./es/core/index.js"
+    },
+    "./app": {
+      "typings": "./es/app/index.js",
+      "default": "./es/app/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -32,16 +51,41 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/mana-app": "latest",
     "path-browserify": "^1.0.0",
     "sanitize-html": "^2.7.2",
-    "url-parse": "^1.5.10"
+    "url-parse": "^1.5.10",
+    "@ant-design/icons": "^5.1.0",
+    "classnames": "^2.3.2",
+    "rc-dropdown": "^3.2.0",
+    "rc-motion": "^2.9.2",
+    "rc-notification": "^5.6.0",
+    "rc-tabs": "^11.10.1",
+    "rc-util": "^4.21.1",
+    "inversify": "^5.1.1",
+    "reflect-metadata": "^0.1.13",
+    "ajv": "^8.12.0",
+    "debug": "^4.3.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "vscode-uri": "^2.1.1",
+    "@types/lodash.debounce": "4.0.3",
+    "@types/react-virtualized": "^9.21.22",
+    "file-icons-js": "~1.0.3",
+    "font-awesome": "^4.7.0",
+    "lodash.debounce": "^4.0.8",
+    "perfect-scrollbar": "^1.5.5",
+    "rc-tooltip": "^5.1.1",
+    "react-virtualized": "^9.22.5",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.4",
+    "rimraf": "latest",
     "@types/path-browserify": "^1.0.0",
     "@types/sanitize-html": "^2.6.2",
-    "@types/url-parse": "^1.4.8"
+    "@types/url-parse": "^1.4.8",
+    "@types/debug": "^4.1.8",
+    "@types/uuid": "^9.0.2"
   },
   "peerDependencies": {
     "react": ">=16"

package/src/app/app.tsx

@@ -0,0 +1,23 @@
+import { ApplicationContribution, localStorageService } from '../core/index.js';
+import { inject, singleton } from '../ioc/index.js';
+
+import { NotificationService } from './notification/service.js';
+
+@singleton({ contrib: [ApplicationContribution] })
+export class ManaApplication implements ApplicationContribution {
+  @inject(NotificationService) notificationService: NotificationService;
+  initialize() {
+    localStorageService.onDiskQuotaExceeded(() => {
+      const toDispose = this.notificationService.info({
+        message: '浏览器缓存已满',
+        description: <div>是否现在清理</div>,
+        actions: [{ key: 'confirm', label: '确认' }],
+        onAction: () => {
+          localStorage.clear();
+          toDispose.dispose();
+        },
+        duration: null,
+      });
+    });
+  }
+}

package/src/app/file-tree/file-selection.ts

@@ -0,0 +1,33 @@
+import type { SelectionService } from '../../core/index.js';
+
+import { FileStat } from './files.js';
+import { SelectionCommandHandler } from './selection-command-handler.js';
+
+export interface FileSelection {
+  fileStat: FileStat;
+}
+export namespace FileSelection {
+  export function is(arg: Record<any, any> | undefined): arg is FileSelection {
+    return (
+      typeof arg === 'object' && 'fileStat' in arg && FileStat.is((arg as any).fileStat)
+    );
+  }
+  export class CommandHandler extends SelectionCommandHandler<FileSelection> {
+    protected override readonly selectionService: SelectionService;
+    protected override readonly options: SelectionCommandHandler.Options<FileSelection>;
+
+    constructor(
+      selectionService: SelectionService,
+      options: SelectionCommandHandler.Options<FileSelection>,
+    ) {
+      super(
+        selectionService,
+        (arg: Record<any, any> | undefined) =>
+          FileSelection.is(arg) ? arg : undefined,
+        options,
+      );
+      this.selectionService = selectionService;
+      this.options = options;
+    }
+  }
+}

package/src/app/file-tree/file-service.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Emitter } from '../../common/index.js';
+import type { URI } from '../../common/index.js';
+import { singleton } from '../../ioc/index.js';
+
+import type {
+  CopyFileOptions,
+  MoveFileOptions,
+  ResolveFileOptions,
+  FileChangesEvent,
+  FileOperationEvent,
+  FileStatWithMetadata,
+} from './files.js';
+
+const defaultFileMeta = {
+  mtime: 0,
+  ctime: 0,
+  etag: '',
+  size: 0,
+  isFile: false,
+  isDirectory: false,
+  isSymbolicLink: false,
+};
+@singleton()
+export class FileService {
+  // #region File Watching
+
+  private onDidFilesChangeEmitter = new Emitter<FileChangesEvent>();
+  /**
+   * An event that is emitted when files are changed on the disk.
+   */
+  readonly onDidFilesChange = this.onDidFilesChangeEmitter.event;
+
+  // #endregion
+
+  private onDidRunOperationEmitter = new Emitter<FileOperationEvent>();
+  /**
+   * An event that is emitted when operation is finished.
+   * This event is triggered by user gestures and programmatically.
+   */
+  readonly onDidRunOperation = this.onDidRunOperationEmitter.event;
+
+  async copy(
+    source: URI,
+    _target: URI,
+    _options?: CopyFileOptions,
+  ): Promise<FileStatWithMetadata> {
+    return this.resolve(source);
+  }
+  async move(
+    source: URI,
+    _target: URI,
+    _options?: MoveFileOptions,
+  ): Promise<FileStatWithMetadata> {
+    return this.resolve(source);
+  }
+  async resolve(
+    resource: URI,
+    _options?: ResolveFileOptions | undefined,
+  ): Promise<FileStatWithMetadata> {
+    return {
+      ...defaultFileMeta,
+      resource,
+      name: resource.path.base,
+    };
+  }
+}

package/src/app/file-tree/file-tree-component.tsx

@@ -0,0 +1,11 @@
+import 'font-awesome/css/font-awesome.min.css';
+import 'file-icons-js/css/style.css';
+
+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;

package/src/app/file-tree/file-tree-icon.tsx

@@ -0,0 +1,15 @@
+import { ViewInstance } from '../../core/index.js';
+import { useInject } from '../../observable/index.js';
+import type { TreeNodeProps } from '../tree/tree.js';
+
+import type { FileTreeView } from './file-tree-view.js';
+
+export function TreeNodeIcon(props: TreeNodeProps) {
+  const fileTree = useInject<FileTreeView>(ViewInstance);
+  const { node } = props;
+  const icon = fileTree.toNodeIcon(node);
+  if (icon) {
+    return <div className={`${icon} file-icon`} />;
+  }
+  return null;
+}

package/src/app/file-tree/file-tree-label-provider.ts

@@ -0,0 +1,54 @@
+import type { URI } from '../../common/index.js';
+import { singleton, inject } from '../../ioc/index.js';
+
+import type { DidChangeLabelEvent } from '../label/index.js';
+import {
+  LabelProvider,
+  LabelProviderContribution,
+  URIIconReference,
+} from '../label/index.js';
+import { TreeLabelProvider } from '../tree/tree-label-provider.js';
+
+import { FileStatNode } from './file-tree.js';
+import type { FileStat } from './files.js';
+
+@singleton({ contrib: LabelProviderContribution })
+export class FileTreeLabelProvider implements LabelProviderContribution {
+  protected readonly labelProvider: LabelProvider;
+  protected readonly treeLabelProvider: TreeLabelProvider;
+
+  constructor(
+    @inject(LabelProvider)
+    labelProvider: LabelProvider,
+    @inject(TreeLabelProvider)
+    treeLabelProvider: TreeLabelProvider,
+  ) {
+    this.labelProvider = labelProvider;
+    this.treeLabelProvider = treeLabelProvider;
+  }
+  protected asURIIconReference(element: FileStat): URI | URIIconReference {
+    return URIIconReference.create(
+      element.isDirectory ? 'folder' : 'file',
+      element.resource,
+    );
+  }
+  canHandle(element: object): number {
+    return FileStatNode.is(element) ? this.treeLabelProvider.canHandle(element) + 1 : 0;
+  }
+
+  getIcon(node: FileStatNode): string {
+    return this.labelProvider.getIcon(this.asURIIconReference(node.fileStat));
+  }
+
+  getName(node: FileStatNode): string {
+    return this.labelProvider.getName(this.asURIIconReference(node.fileStat));
+  }
+
+  getDescription(node: FileStatNode): string {
+    return this.labelProvider.getLongName(this.asURIIconReference(node.fileStat));
+  }
+
+  affects(node: FileStatNode, event: DidChangeLabelEvent): boolean {
+    return event.affects(node.fileStat);
+  }
+}