mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-12 08:54:00 +02:00
369 lines
7.6 KiB
TypeScript
369 lines
7.6 KiB
TypeScript
// Displays a find/replace dialog
|
|
|
|
const React = require('react');
|
|
const { useMemo, useState, useEffect } = require('react');
|
|
const MaterialCommunityIcon = require('react-native-vector-icons/MaterialCommunityIcons').default;
|
|
|
|
import { SearchControl, SearchState, EditorSettings } from './types';
|
|
import { _ } from '@joplin/lib/locale';
|
|
import { BackHandler, TextInput, View, Text, StyleSheet, ViewStyle } from 'react-native';
|
|
import { Theme } from '@joplin/lib/themes/type';
|
|
import CustomButton from '../CustomButton';
|
|
|
|
const buttonSize = 48;
|
|
|
|
type OnChangeCallback = (text: string)=> void;
|
|
type Callback = ()=> void;
|
|
|
|
export const defaultSearchState: SearchState = {
|
|
useRegex: false,
|
|
caseSensitive: false,
|
|
|
|
searchText: '',
|
|
replaceText: '',
|
|
dialogVisible: false,
|
|
};
|
|
|
|
export interface SearchPanelProps {
|
|
searchControl: SearchControl;
|
|
searchState: SearchState;
|
|
editorSettings: EditorSettings;
|
|
}
|
|
|
|
interface ActionButtonProps {
|
|
styles: any;
|
|
themeId: number;
|
|
iconName: string;
|
|
title: string;
|
|
onPress: Callback;
|
|
}
|
|
|
|
const ActionButton = (
|
|
props: ActionButtonProps
|
|
) => {
|
|
return (
|
|
<CustomButton
|
|
themeId={props.themeId}
|
|
style={props.styles.button}
|
|
onPress={props.onPress}
|
|
description={props.title}
|
|
>
|
|
<MaterialCommunityIcon name={props.iconName} style={props.styles.buttonText}/>
|
|
</CustomButton>
|
|
);
|
|
};
|
|
|
|
interface ToggleButtonProps {
|
|
styles: any;
|
|
themeId: number;
|
|
iconName: string;
|
|
title: string;
|
|
active: boolean;
|
|
onToggle: Callback;
|
|
}
|
|
|
|
const ToggleButton = (props: ToggleButtonProps) => {
|
|
const active = props.active;
|
|
|
|
return (
|
|
<CustomButton
|
|
themeId={props.themeId}
|
|
style={{
|
|
...props.styles.toggleButton,
|
|
...(active ? props.styles.toggleButtonActive : {}),
|
|
}}
|
|
onPress={props.onToggle}
|
|
|
|
accessibilityState={{
|
|
checked: props.active,
|
|
}}
|
|
description={props.title}
|
|
accessibilityRole='switch'
|
|
>
|
|
<MaterialCommunityIcon name={props.iconName} style={
|
|
active ? props.styles.activeButtonText : props.styles.buttonText
|
|
}/>
|
|
</CustomButton>
|
|
);
|
|
};
|
|
|
|
|
|
const useStyles = (theme: Theme) => {
|
|
return useMemo(() => {
|
|
const buttonStyle: ViewStyle = {
|
|
width: buttonSize,
|
|
height: buttonSize,
|
|
backgroundColor: theme.backgroundColor4,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 1,
|
|
};
|
|
const buttonTextStyle = {
|
|
color: theme.color4,
|
|
fontSize: 30,
|
|
};
|
|
|
|
return StyleSheet.create({
|
|
button: buttonStyle,
|
|
toggleButton: {
|
|
...buttonStyle,
|
|
},
|
|
toggleButtonActive: {
|
|
...buttonStyle,
|
|
backgroundColor: theme.backgroundColor3,
|
|
},
|
|
input: {
|
|
flexGrow: 1,
|
|
height: buttonSize,
|
|
backgroundColor: theme.backgroundColor4,
|
|
color: theme.color4,
|
|
},
|
|
buttonText: buttonTextStyle,
|
|
activeButtonText: {
|
|
...buttonTextStyle,
|
|
color: theme.color4,
|
|
},
|
|
text: {
|
|
color: theme.color,
|
|
},
|
|
labeledInput: {
|
|
flexGrow: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: 10,
|
|
},
|
|
});
|
|
}, [theme]);
|
|
};
|
|
|
|
export const SearchPanel = (props: SearchPanelProps) => {
|
|
const theme = props.editorSettings.themeData;
|
|
const placeholderColor = theme.color3;
|
|
const styles = useStyles(theme);
|
|
|
|
const [showingAdvanced, setShowAdvanced] = useState(false);
|
|
|
|
const state = props.searchState;
|
|
const control = props.searchControl;
|
|
|
|
const updateSearchState = (changedData: any) => {
|
|
const newState = { ...state, ...changedData };
|
|
control.setSearchState(newState);
|
|
};
|
|
|
|
// Creates a TextInut with the given parameters
|
|
const createInput = (
|
|
placeholder: string, value: string, onChange: OnChangeCallback, autoFocus: boolean
|
|
) => {
|
|
return (
|
|
<TextInput
|
|
style={styles.input}
|
|
autoFocus={autoFocus}
|
|
onChangeText={onChange}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={placeholderColor}
|
|
returnKeyType='search'
|
|
blurOnSubmit={false}
|
|
onSubmitEditing={control.findNext}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// Close the search dialog on back button press
|
|
useEffect(() => {
|
|
// Only register the listener if the dialog is visible
|
|
if (!state.dialogVisible) {
|
|
return () => {};
|
|
}
|
|
|
|
const backListener = BackHandler.addEventListener('hardwareBackPress', () => {
|
|
control.hideSearch();
|
|
return true;
|
|
});
|
|
|
|
return () => backListener.remove();
|
|
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
|
|
}, [state.dialogVisible]);
|
|
|
|
|
|
const themeId = props.editorSettings.themeId;
|
|
const closeButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="close"
|
|
onPress={control.hideSearch}
|
|
title={_('Close')}
|
|
/>
|
|
);
|
|
|
|
const showDetailsButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="menu-down"
|
|
onPress={() => setShowAdvanced(true)}
|
|
title={_('Show advanced')}
|
|
/>
|
|
);
|
|
|
|
const hideDetailsButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="menu-up"
|
|
onPress={() => setShowAdvanced(false)}
|
|
title={_('Hide advanced')}
|
|
/>
|
|
);
|
|
|
|
const searchTextInput = createInput(
|
|
_('Search for...'),
|
|
state.searchText,
|
|
(newText: string) => {
|
|
updateSearchState({
|
|
searchText: newText,
|
|
});
|
|
},
|
|
|
|
// Autofocus
|
|
true
|
|
);
|
|
|
|
const replaceTextInput = createInput(
|
|
_('Replace with...'),
|
|
state.replaceText,
|
|
(newText: string) => {
|
|
updateSearchState({
|
|
replaceText: newText,
|
|
});
|
|
},
|
|
|
|
// Don't autofocus
|
|
false
|
|
);
|
|
|
|
const labeledSearchInput = (
|
|
<View style={styles.labeledInput} accessible>
|
|
<Text style={styles.text}>{_('Find: ')}</Text>
|
|
{ searchTextInput }
|
|
</View>
|
|
);
|
|
|
|
const labeledReplaceInput = (
|
|
<View style={styles.labeledInput} accessible>
|
|
<Text style={styles.text}>{_('Replace: ')}</Text>
|
|
{ replaceTextInput }
|
|
</View>
|
|
);
|
|
|
|
const toNextButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="menu-right"
|
|
onPress={control.findNext}
|
|
title={_('Next match')}
|
|
/>
|
|
);
|
|
|
|
const toPrevButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="menu-left"
|
|
onPress={control.findPrevious}
|
|
title={_('Previous match')}
|
|
/>
|
|
);
|
|
|
|
const replaceButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="swap-horizontal"
|
|
onPress={control.replaceCurrent}
|
|
title={_('Replace')}
|
|
/>
|
|
);
|
|
|
|
const replaceAllButton = (
|
|
<ActionButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="reply-all"
|
|
onPress={control.replaceAll}
|
|
title={_('Replace all')}
|
|
/>
|
|
);
|
|
|
|
const regexpButton = (
|
|
<ToggleButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="regex"
|
|
onToggle={() => {
|
|
updateSearchState({
|
|
useRegex: !state.useRegex,
|
|
});
|
|
}}
|
|
active={state.useRegex}
|
|
title={_('Regular expression')}
|
|
/>
|
|
);
|
|
|
|
const caseSensitiveButton = (
|
|
<ToggleButton
|
|
themeId={themeId}
|
|
styles={styles}
|
|
iconName="format-letter-case"
|
|
onToggle={() => {
|
|
updateSearchState({
|
|
caseSensitive: !state.caseSensitive,
|
|
});
|
|
}}
|
|
active={state.caseSensitive}
|
|
title={_('Case sensitive')}
|
|
/>
|
|
);
|
|
|
|
const simpleLayout = (
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{ closeButton }
|
|
{ searchTextInput }
|
|
{ showDetailsButton }
|
|
{ toPrevButton }
|
|
{ toNextButton }
|
|
</View>
|
|
);
|
|
|
|
const advancedLayout = (
|
|
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{ closeButton }
|
|
{ labeledSearchInput }
|
|
{ hideDetailsButton }
|
|
{ toPrevButton }
|
|
{ toNextButton }
|
|
</View>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{ regexpButton }
|
|
{ caseSensitiveButton }
|
|
{ labeledReplaceInput }
|
|
{ replaceButton }
|
|
{ replaceAllButton }
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
if (!state.dialogVisible) {
|
|
return null;
|
|
}
|
|
|
|
return showingAdvanced ? advancedLayout : simpleLayout;
|
|
};
|
|
|
|
export default SearchPanel;
|