Skip to content

Commit

Permalink
Merge pull request #1 from baoyachi/patch-2
Browse files Browse the repository at this point in the history
Update the-first-extension.md
  • Loading branch information
baoyachi committed Jun 26, 2024
2 parents 3cd4045 + 337ce89 commit 72f0c3c
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions website/docs/the-first-extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar_position: 1
In Molecule, all custom functions are done using [Extension](./guides/extension). Next, let us quickly learn how to write an extended application based on the [molecule-demo][demo-url] project.

:::tip
All the codes are based on the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) project in [Quick Start](./quick-start).
All the codes are based on the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo) project in [Quick Start](./quick-start).
:::

## A simple scene
Expand Down Expand Up @@ -94,7 +94,7 @@ export function handleSelectFolderTree() {
After fetching the data of FolderTree successfully through `API.getFolderTree` ,we use the [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) method to add and display data to the [FolderTree] component; next, monitor **the selected file** through the [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onselectfile) method; finally,open the file through the [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) method.

:::caution
Pay more attention: In reality, the **data type** returned by `API.getFolderTree` is not [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) type, we often need to go through a **conversion** method. The mock data of the `API.getFolderTree` function in the example can be [View](https://github.com/DTStack/molecule-examples/blob/main/packages/molecule-demo/public/mock/folderTree.json). The `transformToEditorTab` in the `handleSelectFolderTree` method is a **transformation** method, which mainly converts `file` to [IEditorTab](./api/interfaces/molecule.model.IEditorTab) type.
Pay more attention: In reality, the **data type** returned by `API.getFolderTree` is not [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) type, we often need to go through a **conversion** method. The mock data of the `API.getFolderTree` function in the example can be [View](https://github.com/DTStack/molecule-examples/blob/main/molecule-demo/public/mock/folderTree.json). The `transformToEditorTab` in the `handleSelectFolderTree` method is a **transformation** method, which mainly converts `file` to [IEditorTab](./api/interfaces/molecule.model.IEditorTab) type.
:::

### Use extension
Expand Down Expand Up @@ -135,6 +135,6 @@ Through it, we can extend many core modules such as [**ColorTheme**](./guides/ex

Please [view][demo-url] the complete source code of **First Extension**

[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/theFirstExtension
[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/theFirstExtension
[foldertree-url]: ./guides/extend-builtin-ui#foldertree
[create-url]: ./api#create

0 comments on commit 72f0c3c

Please sign in to comment.