From 7c01aa877a3647aa6283626740267e62f9fa2d68 Mon Sep 17 00:00:00 2001
From: AkiraFukushima
Date: Wed, 10 Apr 2019 21:18:22 +0900
Subject: [PATCH] refs #850 Replace ImageViewer with typescript
---
src/renderer/store/TimelineSpace/Modals.ts | 5 +-
.../store/TimelineSpace/Modals/ImageViewer.js | 78 -------------
.../store/TimelineSpace/Modals/ImageViewer.ts | 108 ++++++++++++++++++
3 files changed, 111 insertions(+), 80 deletions(-)
delete mode 100644 src/renderer/store/TimelineSpace/Modals/ImageViewer.js
create mode 100644 src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
diff --git a/src/renderer/store/TimelineSpace/Modals.ts b/src/renderer/store/TimelineSpace/Modals.ts
index 65ae9d9e..4fc079de 100644
--- a/src/renderer/store/TimelineSpace/Modals.ts
+++ b/src/renderer/store/TimelineSpace/Modals.ts
@@ -1,5 +1,5 @@
import NewToot from './Modals/NewToot'
-import ImageViewer from './Modals/ImageViewer'
+import ImageViewer, { ImageViewerState } from './Modals/ImageViewer'
import Jump, { JumpState } from './Modals/Jump'
import ListMembership from './Modals/ListMembership'
import AddListMember, { AddListMemberState } from './Modals/AddListMember'
@@ -13,7 +13,8 @@ export interface ModalsState {}
export interface ModalsModuleState extends ModalsState {
Jump: JumpState,
- AddListMember: AddListMemberState
+ AddListMember: AddListMemberState,
+ ImageViewer: ImageViewerState
}
const state = (): ModalsState => ({})
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.js b/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
deleted file mode 100644
index d0cd2d7b..00000000
--- a/src/renderer/store/TimelineSpace/Modals/ImageViewer.js
+++ /dev/null
@@ -1,78 +0,0 @@
-const ImageViewer = {
- namespaced: true,
- state: {
- modalOpen: false,
- currentIndex: -1,
- mediaList: [],
- loading: false
- },
- mutations: {
- changeModal (state, value) {
- state.modalOpen = value
- },
- changeCurrentIndex (state, currentIndex) {
- state.currentIndex = currentIndex
- },
- changeMedliaList (state, mediaList) {
- state.mediaList = mediaList
- },
- incrementIndex (state) {
- state.currentIndex++
- },
- decrementIndex (state) {
- state.currentIndex--
- },
- loading (state, value) {
- state.loading = value
- }
- },
- actions: {
- openModal ({ commit }, { currentIndex, mediaList }) {
- commit('changeModal', true)
- commit('changeCurrentIndex', currentIndex)
- commit('changeMedliaList', mediaList)
- commit('loading', true)
- },
- closeModal ({ commit }) {
- commit('changeModal', false)
- commit('changeCurrentIndex', -1)
- commit('changeMedliaList', [])
- commit('loading', false)
- },
- incrementIndex ({ commit }) {
- commit('incrementIndex')
- commit('loading', true)
- },
- decrementIndex ({ commit }) {
- commit('decrementIndex')
- commit('loading', true)
- },
- async loaded ({ commit }) {
- commit('loading', false)
- }
- },
- getters: {
- imageURL (state) {
- if (state.currentIndex >= 0) {
- return state.mediaList[state.currentIndex].url
- }
- },
- imageType (state) {
- if (state.currentIndex >= 0) {
- return state.mediaList[state.currentIndex].type
- }
- },
- showLeft (state) {
- const notFirst = (state.currentIndex > 0)
- const isManyItem = (state.mediaList.length > 1)
- return (notFirst && isManyItem)
- },
- showRight (state) {
- const notLast = (state.currentIndex < (state.mediaList.length - 1))
- const isManyItem = (state.mediaList.length > 1)
- return (notLast && isManyItem)
- }
- }
-}
-
-export default ImageViewer
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
new file mode 100644
index 00000000..8fd7270b
--- /dev/null
+++ b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
@@ -0,0 +1,108 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
+import { Attachment } from 'megalodon'
+import { RootState } from '@/store';
+
+export interface ImageViewerState {
+ modalOpen: boolean,
+ currentIndex: number,
+ mediaList: Array,
+ loading: boolean
+}
+
+const state = (): ImageViewerState => ({
+ modalOpen: false,
+ currentIndex: -1,
+ mediaList: [],
+ loading: false
+})
+
+export const MUTATION_TYPES = {
+ CHANGE_MODAL: 'changeModal',
+ CHANGE_CURRENT_INDEX: 'changeCurrentIndex',
+ CHANGE_MEDIA_LIST: 'changeMediaList',
+ INCREMENT_INDEX: 'incrementIndex',
+ DECREMENT_INDEX: 'decrementIndex',
+ CHANGE_LOADING: 'changeLoading'
+}
+
+const mutations: MutationTree = {
+ [MUTATION_TYPES.CHANGE_MODAL]: (state, value: boolean) => {
+ state.modalOpen = value
+ },
+ [MUTATION_TYPES.CHANGE_CURRENT_INDEX]: (state, currentIndex: number) => {
+ state.currentIndex = currentIndex
+ },
+ [MUTATION_TYPES.CHANGE_MEDIA_LIST]: (state, mediaList: Array) => {
+ state.mediaList = mediaList
+ },
+ [MUTATION_TYPES.INCREMENT_INDEX]: (state) => {
+ state.currentIndex++
+ },
+ [MUTATION_TYPES.DECREMENT_INDEX]: (state) => {
+ state.currentIndex--
+ },
+ [MUTATION_TYPES.CHANGE_LOADING]: (state, value: boolean) => {
+ state.loading = value
+ }
+}
+
+const actions: ActionTree = {
+ openModal: ({ commit }, { currentIndex, mediaList }) => {
+ commit(MUTATION_TYPES.CHANGE_MODAL, true)
+ commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, currentIndex as number)
+ commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, mediaList as Array)
+ commit(MUTATION_TYPES.CHANGE_LOADING, true)
+ },
+ closeModal: ({ commit }) => {
+ commit(MUTATION_TYPES.CHANGE_MODAL, false)
+ commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, -1)
+ commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, [])
+ commit(MUTATION_TYPES.CHANGE_LOADING, false)
+ },
+ incrementIndex: ({ commit }) => {
+ commit(MUTATION_TYPES.INCREMENT_INDEX)
+ commit(MUTATION_TYPES.CHANGE_LOADING, true)
+ },
+ decrementIndex: ({ commit }) => {
+ commit(MUTATION_TYPES.DECREMENT_INDEX)
+ commit(MUTATION_TYPES.CHANGE_LOADING, true)
+ },
+ loaded: ({ commit }) => {
+ commit(MUTATION_TYPES.CHANGE_LOADING, false)
+ }
+}
+
+const getters: GetterTree = {
+ imageURL: (state): string | null => {
+ if (state.currentIndex >= 0) {
+ return state.mediaList[state.currentIndex].url
+ }
+ return null
+ },
+ imageType: (state): string | null => {
+ if (state.currentIndex >= 0) {
+ return state.mediaList[state.currentIndex].type
+ }
+ return null
+ },
+ showLeft: (state): boolean => {
+ const notFirst = (state.currentIndex > 0)
+ const isManyItem = (state.mediaList.length > 1)
+ return (notFirst && isManyItem)
+ },
+ showRight: (state): boolean => {
+ const notLast = (state.currentIndex < (state.mediaList.length - 1))
+ const isManyItem = (state.mediaList.length > 1)
+ return (notLast && isManyItem)
+ }
+}
+
+const ImageViewer: Module = {
+ namespaced: true,
+ state: state,
+ mutations: mutations,
+ actions: actions,
+ getters: getters
+}
+
+export default ImageViewer