diff options
author | wxiaoguang <wxiaoguang@gmail.com> | 2023-04-12 08:44:26 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-04-11 20:44:26 -0400 |
commit | 6892e2b8efff4465acd702e702d16f7aadd07187 (patch) | |
tree | f29fdbd56f7bcb79127eed8f09c4ee69917a0172 | |
parent | 1380b873115c85ca9e758789b0757ae5a6610a1e (diff) | |
download | gitea-6892e2b8efff4465acd702e702d16f7aadd07187.tar.gz gitea-6892e2b8efff4465acd702e702d16f7aadd07187.zip |
Use reactive store to share data between components (#23996)
Follow #23947
* Use reactive store to share data between components
* Remove no-op `this.hashListener = window.addEventListener()` because
`addEventListener` returns void/undefined.
Reference:
https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api
Screenshot (the same as before):
<details>
<img width="565" alt="image"
src="https://user-images.githubusercontent.com/2114189/230701282-bd61bfa3-7786-433b-9ad8-a88591112a02.png">
</details>
---------
Co-authored-by: silverwind <me@silverwind.io>
-rw-r--r-- | web_src/js/components/DiffFileTree.vue | 11 | ||||
-rw-r--r-- | web_src/js/components/DiffFileTreeItem.vue | 14 | ||||
-rw-r--r-- | web_src/js/modules/stores.js | 5 |
3 files changed, 15 insertions, 15 deletions
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 1ead1458e9..9fc08af1fc 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -5,7 +5,7 @@ > <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <div class="ui list"> - <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/> + <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> </div> <div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2"> <span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a> @@ -17,6 +17,7 @@ import DiffFileTreeItem from './DiffFileTreeItem.vue'; import {doLoadMoreFiles} from '../features/repo-diff.js'; import {toggleElem} from '../utils/dom.js'; +import {DiffTreeStore} from '../modules/stores.js'; const {pageData} = window.config; const LOCAL_STORAGE_KEY = 'diff_file_tree_visible'; @@ -28,7 +29,7 @@ export default { pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible; return { ...pageData.diffFileInfo, - selectedFile: '' + store: DiffTreeStore, }; }, computed: { @@ -102,10 +103,10 @@ export default { document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); this.hashChangeListener = () => { - this.selectedFile = window.location.hash; + this.store.selectedItem = window.location.hash; }; - this.hashListener = window.addEventListener('hashchange', this.hashChangeListener); - this.selectedFile = window.location.hash; + this.hashChangeListener(); + window.addEventListener('hashchange', this.hashChangeListener); }, unmounted() { document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility); diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index 9fdb78875d..baaa01b782 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -1,7 +1,7 @@ <template> <div v-show="show" :title="item.name"> <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"--> - <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']"> + <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']"> <!-- Files --> <SvgIcon v-if="item.isFile" @@ -32,7 +32,7 @@ <span class="gt-ellipsis">{{ item.name }}</span> </div> <div v-show="!collapsed"> - <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/> + <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/> </div> </div> </div> @@ -40,6 +40,7 @@ <script> import {SvgIcon} from '../svg.js'; +import {DiffTreeStore} from '../modules/stores.js'; export default { components: {SvgIcon}, @@ -53,13 +54,9 @@ export default { required: false, default: true }, - selectedFile: { - type: String, - default: '', - required: true - } }, data: () => ({ + store: DiffTreeStore, collapsed: false, }), methods: { @@ -79,9 +76,6 @@ export default { }; return diffTypes[pType]; }, - genCompleteFileHash(hash) { - return `#diff-${hash}`; - } }, }; </script> diff --git a/web_src/js/modules/stores.js b/web_src/js/modules/stores.js new file mode 100644 index 0000000000..24b913ce11 --- /dev/null +++ b/web_src/js/modules/stores.js @@ -0,0 +1,5 @@ +import {reactive} from 'vue'; + +export const DiffTreeStore = reactive({ + selectedItem: '', +}); |