mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Refactor: replace Immutable.js methods with plain JavaScript equivalents

remove-immutable-compose
danidfra 2024-12-18 17:16:40 -03:00
rodzic 762c3520f0
commit ed629e69fa
4 zmienionych plików z 20 dodań i 20 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

26
src/components/autosuggest-input.tsx
Wyświetl plik

@ -17,7 +17,7 @@ export type AutoSuggestion = string | Emoji;
export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> { export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
value: string; value: string;
suggestions: ImmutableList<any>; suggestions: any[];
disabled?: boolean; disabled?: boolean;
placeholder?: string; placeholder?: string;
onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void; onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void;
@ -81,7 +81,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
const { suggestions, menu, disabled } = this.props; const { suggestions, menu, disabled } = this.props;
const { selectedSuggestion, suggestionsHidden } = this.state; const { selectedSuggestion, suggestionsHidden } = this.state;
const firstIndex = this.getFirstIndex(); const firstIndex = this.getFirstIndex();
const lastIndex = suggestions.size + (menu || []).length - 1; const lastIndex = suggestions.length + (menu || []).length - 1;
if (disabled) { if (disabled) {
e.preventDefault(); e.preventDefault();
@ -96,7 +96,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
switch (e.key) { switch (e.key) {
case 'Escape': case 'Escape':
if (suggestions.size === 0 || suggestionsHidden) { if (suggestions.length === 0 || suggestionsHidden) {
document.querySelector('.ui')?.parentElement?.focus(); document.querySelector('.ui')?.parentElement?.focus();
} else { } else {
e.preventDefault(); e.preventDefault();
@ -105,14 +105,14 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
break; break;
case 'ArrowDown': case 'ArrowDown':
if (!suggestionsHidden && (suggestions.size > 0 || menu)) { if (!suggestionsHidden && (suggestions.length > 0 || menu)) {
e.preventDefault(); e.preventDefault();
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) }); this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) });
} }
break; break;
case 'ArrowUp': case 'ArrowUp':
if (!suggestionsHidden && (suggestions.size > 0 || menu)) { if (!suggestionsHidden && (suggestions.length > 0 || menu)) {
e.preventDefault(); e.preventDefault();
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) }); this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
} }
@ -121,15 +121,15 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
case 'Enter': case 'Enter':
case 'Tab': case 'Tab':
// Select suggestion // Select suggestion
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) { if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.length > 0 || menu)) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.setState({ selectedSuggestion: firstIndex }); this.setState({ selectedSuggestion: firstIndex });
if (selectedSuggestion < suggestions.size) { if (selectedSuggestion < suggestions.length) {
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion)); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions[selectedSuggestion]);
} else if (menu) { } else if (menu) {
const item = menu[selectedSuggestion - suggestions.size]; const item = menu[selectedSuggestion - suggestions.length];
this.handleMenuItemAction(item, e); this.handleMenuItemAction(item, e);
} }
} }
@ -156,7 +156,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => { onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => {
const index = Number(e.currentTarget?.getAttribute('data-index')); const index = Number(e.currentTarget?.getAttribute('data-index'));
const suggestion = this.props.suggestions.get(index); const suggestion = this.props.suggestions[index];
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
this.input?.focus(); this.input?.focus();
e.preventDefault(); e.preventDefault();
@ -164,7 +164,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) { componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
const { suggestions } = this.props; const { suggestions } = this.props;
if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { if (suggestions !== prevProps.suggestions && suggestions.length > 0 && prevState.suggestionsHidden && prevState.focused) {
this.setState({ suggestionsHidden: false }); this.setState({ suggestionsHidden: false });
} }
} }
@ -234,7 +234,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
return menu.map((item, i) => ( return menu.map((item, i) => (
<a // eslint-disable-line jsx-a11y/anchor-is-valid <a // eslint-disable-line jsx-a11y/anchor-is-valid
className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })} className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.length - selectedSuggestion === i })}
href='/' href='/'
role='button' role='button'
tabIndex={0} tabIndex={0}
@ -264,7 +264,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props; const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
const { suggestionsHidden } = this.state; const { suggestionsHidden } = this.state;
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value)); const visible = !suggestionsHidden && (suggestions.length > 0 || (menu && value));
return [ return [
<div key='input' className='relative w-full'> <div key='input' className='relative w-full'>

8
src/components/modal-root.tsx
Wyświetl plik

@ -12,18 +12,18 @@ import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx'; import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event.ts'; import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event.ts';
import type { ReducerCompose } from 'soapbox/reducers/compose.ts'; import type { Compose } from 'soapbox/reducers/compose.ts';
const messages = defineMessages({ const messages = defineMessages({
confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' }, confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' }, cancelEditing: { id: 'confirmations.cancel_editing.confirm', defaultMessage: 'Cancel editing' },
}); });
export const checkComposeContent = (compose?: ReturnType<typeof ReducerCompose>) => { export const checkComposeContent = (compose?: Compose) => {
return !!compose && [ return !!compose && [
compose.editorState && compose.editorState.length > 0, compose.editorState && compose.editorState.length > 0,
compose.spoiler_text.length > 0, compose.spoiler_text.length > 0,
compose.media_attachments.size > 0, compose.media_attachments.length > 0,
compose.poll !== null, compose.poll !== null,
].some(check => check === true); ].some(check => check === true);
}; };
@ -69,7 +69,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
const handleOnClose = () => { const handleOnClose = () => {
dispatch((_, getState) => { dispatch((_, getState) => {
const compose = getState().compose.get('compose-modal'); const compose = getState().compose['compose-modal'];
const hasComposeContent = checkComposeContent(compose); const hasComposeContent = checkComposeContent(compose);
const hasEventComposeContent = checkEventComposeContent(getState().compose_event); const hasEventComposeContent = checkEventComposeContent(getState().compose_event);

2
src/features/compose/components/reply-group-indicator.tsx
Wyświetl plik

@ -16,7 +16,7 @@ const ReplyGroupIndicator = (props: IReplyGroupIndicator) => {
const getStatus = useCallback(makeGetStatus(), []); const getStatus = useCallback(makeGetStatus(), []);
const status = useAppSelector((state) => getStatus(state, { id: state.compose.get(composeId)?.in_reply_to! })); const status = useAppSelector((state) => getStatus(state, { id: state.compose[composeId]?.in_reply_to! }));
const group = status?.group as Group; const group = status?.group as Group;
if (!group) { if (!group) {

4
src/features/compose/components/reply-mentions.tsx
Wyświetl plik

@ -59,14 +59,14 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
); );
} }
const accounts = to.slice(0, 2).map((acct: string) => { const accounts = [...to].slice(0, 2).map((acct: string) => {
const username = acct.split('@')[0]; const username = acct.split('@')[0];
return ( return (
<span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */} <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
@{shortenNostr(username)} @{shortenNostr(username)}
</span> </span>
); );
}).toArray(); });
if (to.size > 2) { if (to.size > 2) {
accounts.push( accounts.push(