diff --git a/.eslintignore b/.eslintignore index e966676c70..6985a3abbf 100644 --- a/.eslintignore +++ b/.eslintignore @@ -407,7 +407,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js packages/app-mobile/components/ScreenHeader.js packages/app-mobile/components/SelectDateTimeDialog.js -packages/app-mobile/components/SideMenu.js packages/app-mobile/components/TextInput.js packages/app-mobile/components/app-nav.js packages/app-mobile/components/biometrics/BiometricPopup.js diff --git a/.eslintrc.js b/.eslintrc.js index 8dd992a447..dd7c141a43 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -42,6 +42,8 @@ module.exports = { 'zxcvbn': 'readonly', 'tinymce': 'readonly', + + 'JSX': 'readonly', }, 'parserOptions': { 'ecmaVersion': 2018, @@ -108,6 +110,9 @@ module.exports = { 'semi': ['error', 'always'], 'eol-last': ['error', 'always'], 'quotes': ['error', 'single'], + + // Note that "indent" only applies to JavaScript files. See + // https://github.com/laurent22/joplin/issues/8360 'indent': ['error', 'tab'], 'comma-dangle': ['error', { 'arrays': 'always-multiline', @@ -184,6 +189,12 @@ module.exports = { 'project': './tsconfig.eslint.json', }, 'rules': { + '@typescript-eslint/indent': ['error', 'tab', { + 'ignoredNodes': [ + // See https://github.com/typescript-eslint/typescript-eslint/issues/1824 + 'TSUnionType', + ], + }], '@typescript-eslint/ban-ts-comment': ['error'], '@typescript-eslint/ban-types': 'error', '@typescript-eslint/explicit-member-accessibility': ['error'], diff --git a/.gitignore b/.gitignore index 2f04098ad1..9c88d4a48b 100644 --- a/.gitignore +++ b/.gitignore @@ -352,6 +352,7 @@ packages/app-mobile/components/CustomButton.js packages/app-mobile/components/Dropdown.js packages/app-mobile/components/ExtendedWebView.js packages/app-mobile/components/FolderPicker.js +packages/app-mobile/components/Modal.js packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js @@ -392,7 +393,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js packages/app-mobile/components/ScreenHeader.js packages/app-mobile/components/SelectDateTimeDialog.js -packages/app-mobile/components/SideMenu.js packages/app-mobile/components/TextInput.js packages/app-mobile/components/app-nav.js packages/app-mobile/components/biometrics/BiometricPopup.js diff --git a/packages/app-mobile/babel.config.js b/packages/app-mobile/babel.config.js index e953058a74..b236089522 100644 --- a/packages/app-mobile/babel.config.js +++ b/packages/app-mobile/babel.config.js @@ -1,3 +1,4 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], + plugins: ['react-native-reanimated/plugin'], }; diff --git a/packages/app-mobile/components/Modal.tsx b/packages/app-mobile/components/Modal.tsx new file mode 100644 index 0000000000..62aed4f0b8 --- /dev/null +++ b/packages/app-mobile/components/Modal.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { Modal, ModalProps, StyleSheet, View, ViewStyle } from 'react-native'; +import { hasNotch } from 'react-native-device-info'; + +interface ModalElementProps extends ModalProps { + children: React.ReactNode; + containerStyle?: ViewStyle; + elevation?: number; +} + +const ModalElement: React.FC = ({ + children, + containerStyle, + ...modalProps +}) => { + return ( + + + {children} + + + ); +}; + +const styleSheet = StyleSheet.create({ + modalContainer: { + marginTop: hasNotch() ? 65 : 15, + marginBottom: hasNotch() ? 35 : 15, + }, +}); + +export default ModalElement; diff --git a/packages/app-mobile/components/ModalDialog.js b/packages/app-mobile/components/ModalDialog.js index 6a716545d3..65495d30a1 100644 --- a/packages/app-mobile/components/ModalDialog.js +++ b/packages/app-mobile/components/ModalDialog.js @@ -1,8 +1,10 @@ const React = require('react'); -const { Text, Modal, View, StyleSheet, Button } = require('react-native'); +const { Text, View, StyleSheet, Button } = require('react-native'); const { themeStyle } = require('./global-style.js'); const { _ } = require('@joplin/lib/locale'); +import Modal from './Modal'; + class ModalDialog extends React.Component { constructor() { super(); @@ -30,6 +32,7 @@ class ModalDialog extends React.Component { margin: 20, padding: 10, borderRadius: 5, + elevation: 10, }, modalContentWrapper2: { flex: 1, @@ -56,17 +59,15 @@ class ModalDialog extends React.Component { return ( - {}}> - - {this.props.title} - {ContentComponent} - - - - - - - + {}} containerStyle={this.styles().modalContentWrapper}> + {this.props.title} + {ContentComponent} + + + + + + diff --git a/packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx b/packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx index e471ed0e6d..36a4d29f48 100644 --- a/packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx +++ b/packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx @@ -3,8 +3,9 @@ const React = require('react'); const { useState, useEffect, useMemo, useRef } = require('react'); const { StyleSheet } = require('react-native'); -const { View, Modal, Text, TextInput, Button } = require('react-native'); +const { View, Text, TextInput, Button } = require('react-native'); +import Modal from '../Modal'; import { themeStyle } from '@joplin/lib/theme'; import { _ } from '@joplin/lib/locale'; import { EditorControl } from './types'; @@ -43,7 +44,6 @@ const EditLinkDialog = (props: LinkDialogProps) => { margin: 15, padding: 30, backgroundColor: theme.backgroundColor, - elevation: 5, shadowOffset: { width: 1, @@ -132,23 +132,22 @@ const EditLinkDialog = (props: LinkDialogProps) => { return ( { props.editorControl.hideLinkDialog(); }}> - - {_('Edit link')} - - {linkTextInput} - {linkURLInput} - -