self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-16 00:14:34 +02:00
Code Issues Releases Activity

Chore: Mobile: Refactor markdown toolbar (#9708)

Browse Source
This commit is contained in:
Henry Heino
2024-01-18 03:22:20 -08:00
committed by GitHub
parent bc1165be46
commit 4636d1539c
14 changed files with 454 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarButton.tsx
View File

@ -1,8 +1,9 @@
import React = require('react');
import { useCallback } from 'react';
import { Text, TextStyle } from 'react-native';
import * as React from 'react';
import { useCallback, useMemo } from 'react';
import { TextStyle, StyleSheet } from 'react-native';
import { ButtonSpec, StyleSheetData } from './types';
import CustomButton from '../../CustomButton';
import Icon from '../../Icon';
export const buttonSize = 54;
@ -13,28 +14,39 @@ interface ToolbarButtonProps {
onActionComplete?: ()=> void;
}
const useStyles = (baseStyleSheet: any, baseButtonStyle: any, buttonSpec: ButtonSpec, visible: boolean, disabled: boolean) => {
return useMemo(() => {
const activatedStyle = buttonSpec.active ? baseStyleSheet.buttonActive : {};
const disabledStyle = disabled ? baseStyleSheet.buttonDisabled : {};
const activatedTextStyle = buttonSpec.active ? baseStyleSheet.buttonActiveContent : {};
const disabledTextStyle = disabled ? baseStyleSheet.buttonDisabledContent : {};
return StyleSheet.create({
iconStyle: {
...activatedTextStyle,
...disabledTextStyle,
...baseStyleSheet.text,
},
buttonStyle: {
...baseStyleSheet.button,
...activatedStyle,
...disabledStyle,
...baseButtonStyle,
...(!visible ? { opacity: 0 } : null),
},
});
}, [
baseStyleSheet.button, baseStyleSheet.text, baseButtonStyle, baseStyleSheet.buttonActive,
baseStyleSheet.buttonDisabled, baseStyleSheet.buttonActiveContent, baseStyleSheet.buttonDisabledContent,
buttonSpec.active, visible, disabled,
]);
};
const ToolbarButton = ({ styleSheet, spec, onActionComplete, style }: ToolbarButtonProps) => {
const visible = spec.visible ?? true;
const disabled = (spec.disabled ?? false) && visible;
const styles = styleSheet.styles;
// Additional styles if activated
const activatedStyle = spec.active ? styles.buttonActive : {};
const activatedTextStyle = spec.active ? styles.buttonActiveContent : {};
const disabledStyle = disabled ? styles.buttonDisabled : {};
const disabledTextStyle = disabled ? styles.buttonDisabledContent : {};
let content;
if (typeof spec.icon === 'string') {
content = (
<Text style={{ ...styles.text, ...activatedTextStyle, ...disabledTextStyle }}>
{spec.icon}
</Text>
);
} else {
content = spec.icon;
}
const styles = useStyles(styleSheet.styles, style, spec, visible, disabled);
const sourceOnPress = spec.onPress;
const onPress = useCallback(() => {
@ -46,17 +58,14 @@ const ToolbarButton = ({ styleSheet, spec, onActionComplete, style }: ToolbarBut
return (
<CustomButton
style={{
...styles.button, ...activatedStyle, ...disabledStyle, ...style,
...(!visible ? { opacity: 0 } : null),
}}
style={styles.buttonStyle}
themeId={styleSheet.themeId}
onPress={onPress}
description={ spec.description }
accessibilityRole="button"
disabled={ disabled }
>
{ content }
<Icon name={spec.icon} style={styles.iconStyle} accessibilityLabel={null}/>
</CustomButton>
);
};