feat(settings/native): changed FormSectionAccordion.js to FormSection.tsx

react/features/settings/components/native/FormSection.tsx

@@ -0,0 +1,46 @@
+import React, { ReactChildren } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { Text, View } from 'react-native';
+
+import { translate } from '../../../base/i18n/functions';
+
+// @ts-ignore
+import styles from './styles';
+
+
+/**
+ * The type of the React {@code Component} props of {@link FormSection}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The children to be displayed within this Link.
+     */
+    children: ReactChildren;
+
+    /**
+     * The i18n key of the text label of the section.
+     */
+    label: string;
+}
+
+/**
+ * Section accordion on settings form.
+ *
+ * @returns {React$Element<any>}
+ */
+function FormSection({ children, label, t }: IProps) {
+    return (
+        <View>
+            <View
+                style = { styles.formSectionTitleContent }>
+                <Text style = { styles.formSectionTitleText }>
+                    { t(label) }
+                </Text>
+            </View>
+            { children }
+        </View>
+    );
+}
+
+export default translate(FormSection);

react/features/settings/components/native/FormSectionAccordion.js

@@ -1,84 +0,0 @@
-// @flow
-
-import React, { useCallback, useState } from 'react';
-import { List } from 'react-native-paper';
-
-import { translate } from '../../../base/i18n';
-import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
-
-import styles from './styles';
-
-/**
- * The type of the React {@code Component} props of {@link FormSectionAccordion}.
- */
-type Props = {
-
-    /**
-     * Is the section an accordion or not.
-     */
-    accordion: boolean,
-
-    /**
-     * The children to be displayed within this Link.
-     */
-    children: React$Node,
-
-    /**
-     * Whether the accordion is expandable.
-     */
-    expandable: boolean,
-
-    /**
-     * The i18n key of the text label of the section.
-     */
-    label: string,
-
-    /**
-     * An external style object passed to the component.
-     */
-    style: Object,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-}
-
-/**
- * Section accordion on settings form.
- *
- * @returns {React$Element<any>}
- */
-function FormSectionAccordion({ accordion, children, expandable, label, style, t }: Props) {
-    const [ expandSection, setExpandSection ] = useState(false);
-    const onPress = useCallback(() => {
-        setExpandSection(!expandSection);
-    });
-
-    return (
-        <List.Accordion
-            expanded = { expandSection || !expandable }
-            onPress = { onPress }
-            /* eslint-disable-next-line react/jsx-no-bind */
-            right = { props =>
-                accordion && <Icon
-                    { ...props }
-                    src = { expandSection ? IconArrowUp : IconArrowDown }
-                    style = { styles.section } /> }
-            style = { [
-                styles.formSectionTitle,
-                style
-            ] }
-            theme = {{
-                colors: {
-                    background: 'transparent'
-                }
-            }}
-            title = { t(label) }
-            titleStyle = { styles.formSectionTitleText }>
-            { children }
-        </List.Accordion>
-    );
-}
-
-export default translate(FormSectionAccordion);

react/features/settings/components/native/SettingsView.tsx

@@ -37,7 +37,7 @@ import { isServerURLChangeEnabled, normalizeUserInputURL } from '../../functions
 // @ts-ignore
 import FormRow from './FormRow';
 // @ts-ignore
-import FormSectionAccordion from './FormSectionAccordion';
+import FormSection from './FormSection';
 // @ts-ignore
 import styles from './styles';
 
@@ -305,7 +305,8 @@ class SettingsView extends Component<IProps, IState> {
                             participantId = { this.props._localParticipantId }
                             size = { AVATAR_SIZE } />
                     </View>
-                    <FormSectionAccordion
+                    {/* @ts-ignore */}
+                    <FormSection
                         label = 'settingsView.profileSection'>
                         <Input
                             // @ts-ignore
@@ -327,8 +328,9 @@ class SettingsView extends Component<IProps, IState> {
                             placeholder = { t('settingsView.emailPlaceholderText') }
                             textContentType = { 'emailAddress' } // iOS only
                             value = { email } />
-                    </FormSectionAccordion>
+                    </FormSection>
-                    <FormSectionAccordion
+                    {/* @ts-ignore */}
+                    <FormSection
                         label = 'settingsView.conferenceSection'>
                         <Input
                             // @ts-ignore
@@ -375,8 +377,9 @@ class SettingsView extends Component<IProps, IState> {
                                 // @ts-ignore
                                 onChange = { this._onDisableSelfView } />
                         </FormRow>
-                    </FormSectionAccordion>
+                    </FormSection>
-                    <FormSectionAccordion
+                    {/* @ts-ignore */}
+                    <FormSection
                         label = 'settingsView.links'>
                         <Button
                             accessibilityLabel = 'settingsView.help'
@@ -397,17 +400,20 @@ class SettingsView extends Component<IProps, IState> {
                             labelKey = 'settingsView.privacy'
                             onClick = { this._onShowPrivacyPressed }
                             type = { BUTTON_TYPES.TERTIARY } />
-                    </FormSectionAccordion>
+                    </FormSection>
-                    <FormSectionAccordion
+                    {/* @ts-ignore */}
+                    <FormSection
                         label = 'settingsView.buildInfoSection'>
+                        {/* @ts-ignore */}
                         <FormRow
                             label = 'settingsView.version'>
                             <Text style = { styles.text }>
                                 {`${AppInfo.version} build ${AppInfo.buildNumber}`}
                             </Text>
                         </FormRow>
-                    </FormSectionAccordion>
+                    </FormSection>
-                    <FormSectionAccordion
+                    {/* @ts-ignore */}
+                    <FormSection
                         label = 'settingsView.advanced'>
                         { Platform.OS === 'android' && (
                             <>
@@ -441,7 +447,7 @@ class SettingsView extends Component<IProps, IState> {
                                     onChange = { this._onDisableCrashReporting } />
                             </FormRow>
                         )}
-                    </FormSectionAccordion>
+                    </FormSection>
                 </ScrollView>
             </JitsiScreen>
         );

react/features/settings/components/native/styles.js

@@ -91,24 +91,19 @@ export default {
     /**
      * Style for the form section separator titles.
      */
-    formSectionTitle: {
+
+    formSectionTitleContent: {
         backgroundColor: BaseTheme.palette.ui02,
-        paddingBottom: 0,
+        paddingVertical: BaseTheme.spacing[1]
-        paddingTop: 0
     },
 
     formSectionTitleText: {
+        ...BaseTheme.typography.bodyShortRegular,
         color: BaseTheme.palette.text01,
-        fontSize: 14,
         opacity: 0.6,
         textAlign: 'center'
     },
 
-    section: {
-        color: BaseTheme.palette.icon01,
-        fontSize: 14
-    },
-
     /**
      * Global {@code Text} color for the components.
      */