mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-23 07:32:02 +01:00
Convert dropdown_menu
state to Typescript (#25585)
This commit is contained in:
parent
b93ffb74bb
commit
4b7bc1f07c
9 changed files with 69 additions and 41 deletions
|
@ -1,10 +0,0 @@
|
||||||
export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
|
|
||||||
export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
|
|
||||||
|
|
||||||
export function openDropdownMenu(id, keyboard, scroll_key) {
|
|
||||||
return { type: DROPDOWN_MENU_OPEN, id, keyboard, scroll_key };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function closeDropdownMenu(id) {
|
|
||||||
return { type: DROPDOWN_MENU_CLOSE, id };
|
|
||||||
}
|
|
11
app/javascript/mastodon/actions/dropdown_menu.ts
Normal file
11
app/javascript/mastodon/actions/dropdown_menu.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import { createAction } from '@reduxjs/toolkit';
|
||||||
|
|
||||||
|
export const openDropdownMenu = createAction<{
|
||||||
|
id: string;
|
||||||
|
keyboard: boolean;
|
||||||
|
scrollKey: string;
|
||||||
|
}>('dropdownMenu/open');
|
||||||
|
|
||||||
|
export const closeDropdownMenu = createAction<{ id: string }>(
|
||||||
|
'dropdownMenu/close',
|
||||||
|
);
|
|
@ -4,9 +4,14 @@ import { openDropdownMenu, closeDropdownMenu } from 'mastodon/actions/dropdown_m
|
||||||
import { fetchHistory } from 'mastodon/actions/history';
|
import { fetchHistory } from 'mastodon/actions/history';
|
||||||
import DropdownMenu from 'mastodon/components/dropdown_menu';
|
import DropdownMenu from 'mastodon/components/dropdown_menu';
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {import('mastodon/store').RootState} state
|
||||||
|
* @param {*} props
|
||||||
|
*/
|
||||||
const mapStateToProps = (state, { statusId }) => ({
|
const mapStateToProps = (state, { statusId }) => ({
|
||||||
openDropdownId: state.getIn(['dropdown_menu', 'openId']),
|
openDropdownId: state.dropdownMenu.openId,
|
||||||
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
|
openedViaKeyboard: state.dropdownMenu.keyboard,
|
||||||
items: state.getIn(['history', statusId, 'items']),
|
items: state.getIn(['history', statusId, 'items']),
|
||||||
loading: state.getIn(['history', statusId, 'loading']),
|
loading: state.getIn(['history', statusId, 'loading']),
|
||||||
});
|
});
|
||||||
|
@ -15,11 +20,11 @@ const mapDispatchToProps = (dispatch, { statusId }) => ({
|
||||||
|
|
||||||
onOpen (id, onItemClick, keyboard) {
|
onOpen (id, onItemClick, keyboard) {
|
||||||
dispatch(fetchHistory(statusId));
|
dispatch(fetchHistory(statusId));
|
||||||
dispatch(openDropdownMenu(id, keyboard));
|
dispatch(openDropdownMenu({ id, keyboard }));
|
||||||
},
|
},
|
||||||
|
|
||||||
onClose (id) {
|
onClose (id) {
|
||||||
dispatch(closeDropdownMenu(id));
|
dispatch(closeDropdownMenu({ id }));
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -23,9 +23,14 @@ const MOUSE_IDLE_DELAY = 300;
|
||||||
|
|
||||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {import('mastodon/store').RootState} state
|
||||||
|
* @param {*} props
|
||||||
|
*/
|
||||||
const mapStateToProps = (state, { scrollKey }) => {
|
const mapStateToProps = (state, { scrollKey }) => {
|
||||||
return {
|
return {
|
||||||
preventScroll: scrollKey === state.getIn(['dropdown_menu', 'scroll_key']),
|
preventScroll: scrollKey === state.dropdownMenu.scrollKey,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -7,9 +7,12 @@ import { openModal, closeModal } from '../actions/modal';
|
||||||
import DropdownMenu from '../components/dropdown_menu';
|
import DropdownMenu from '../components/dropdown_menu';
|
||||||
import { isUserTouching } from '../is_mobile';
|
import { isUserTouching } from '../is_mobile';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {import('mastodon/store').RootState} state
|
||||||
|
*/
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
openDropdownId: state.getIn(['dropdown_menu', 'openId']),
|
openDropdownId: state.dropdownMenu.openId,
|
||||||
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
|
openedViaKeyboard: state.dropdownMenu.keyboard,
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
|
const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
|
||||||
|
@ -25,7 +28,7 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
|
||||||
actions: items,
|
actions: items,
|
||||||
onClick: onItemClick,
|
onClick: onItemClick,
|
||||||
},
|
},
|
||||||
}) : openDropdownMenu(id, keyboard, scrollKey));
|
}) : openDropdownMenu({ id, keyboard, scrollKey }));
|
||||||
},
|
},
|
||||||
|
|
||||||
onClose(id) {
|
onClose(id) {
|
||||||
|
@ -33,7 +36,7 @@ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
|
||||||
modalType: 'ACTIONS',
|
modalType: 'ACTIONS',
|
||||||
ignoreFocus: false,
|
ignoreFocus: false,
|
||||||
}));
|
}));
|
||||||
dispatch(closeDropdownMenu(id));
|
dispatch(closeDropdownMenu({ id }));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -79,7 +79,7 @@ const mapStateToProps = state => ({
|
||||||
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
|
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
|
||||||
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
|
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
|
||||||
canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
|
canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
|
||||||
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
|
dropdownMenuIsOpen: state.dropdownMenu.openId !== null,
|
||||||
firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
|
firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
|
||||||
username: state.getIn(['accounts', me, 'username']),
|
username: state.getIn(['accounts', me, 'username']),
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
import Immutable from 'immutable';
|
|
||||||
|
|
||||||
import {
|
|
||||||
DROPDOWN_MENU_OPEN,
|
|
||||||
DROPDOWN_MENU_CLOSE,
|
|
||||||
} from '../actions/dropdown_menu';
|
|
||||||
|
|
||||||
const initialState = Immutable.Map({ openId: null, keyboard: false, scroll_key: null });
|
|
||||||
|
|
||||||
export default function dropdownMenu(state = initialState, action) {
|
|
||||||
switch (action.type) {
|
|
||||||
case DROPDOWN_MENU_OPEN:
|
|
||||||
return state.merge({ openId: action.id, keyboard: action.keyboard, scroll_key: action.scroll_key });
|
|
||||||
case DROPDOWN_MENU_CLOSE:
|
|
||||||
return state.get('openId') === action.id ? state.set('openId', null).set('scroll_key', null) : state;
|
|
||||||
default:
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
}
|
|
33
app/javascript/mastodon/reducers/dropdown_menu.ts
Normal file
33
app/javascript/mastodon/reducers/dropdown_menu.ts
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
import { createReducer } from '@reduxjs/toolkit';
|
||||||
|
|
||||||
|
import { closeDropdownMenu, openDropdownMenu } from '../actions/dropdown_menu';
|
||||||
|
|
||||||
|
interface DropdownMenuState {
|
||||||
|
openId: string | null;
|
||||||
|
keyboard: boolean;
|
||||||
|
scrollKey: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: DropdownMenuState = {
|
||||||
|
openId: null,
|
||||||
|
keyboard: false,
|
||||||
|
scrollKey: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const dropdownMenuReducer = createReducer(initialState, (builder) => {
|
||||||
|
builder
|
||||||
|
.addCase(
|
||||||
|
openDropdownMenu,
|
||||||
|
(state, { payload: { id, keyboard, scrollKey } }) => {
|
||||||
|
state.openId = id;
|
||||||
|
state.keyboard = keyboard;
|
||||||
|
state.scrollKey = scrollKey;
|
||||||
|
},
|
||||||
|
)
|
||||||
|
.addCase(closeDropdownMenu, (state, { payload: { id } }) => {
|
||||||
|
if (state.openId === id) {
|
||||||
|
state.openId = null;
|
||||||
|
state.scrollKey = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -15,7 +15,7 @@ import contexts from './contexts';
|
||||||
import conversations from './conversations';
|
import conversations from './conversations';
|
||||||
import custom_emojis from './custom_emojis';
|
import custom_emojis from './custom_emojis';
|
||||||
import domain_lists from './domain_lists';
|
import domain_lists from './domain_lists';
|
||||||
import dropdown_menu from './dropdown_menu';
|
import { dropdownMenuReducer } from './dropdown_menu';
|
||||||
import filters from './filters';
|
import filters from './filters';
|
||||||
import followed_tags from './followed_tags';
|
import followed_tags from './followed_tags';
|
||||||
import height_cache from './height_cache';
|
import height_cache from './height_cache';
|
||||||
|
@ -46,7 +46,7 @@ import user_lists from './user_lists';
|
||||||
|
|
||||||
const reducers = {
|
const reducers = {
|
||||||
announcements,
|
announcements,
|
||||||
dropdown_menu,
|
dropdownMenu: dropdownMenuReducer,
|
||||||
timelines,
|
timelines,
|
||||||
meta,
|
meta,
|
||||||
alerts,
|
alerts,
|
||||||
|
|
Loading…
Reference in a new issue