Skip to content

Commit 8583673

Browse files
achou11achou11
committed
dx: use shared FloatingActionButton component everywhere
1 parent bcd032d commit 8583673

15 files changed

Lines changed: 104 additions & 179 deletions

File tree

‎src/frontend/components/FloatingActionButton.ts‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,22 @@ import {Palette} from '~frontend/global-styles/palette';
1313
import {withTitle} from './withTitle';
1414

1515
const FIXED_PROPS: IFloatingActionProps = {
16-
distanceToEdge: {
17-
vertical:
18-
Dimensions.verticalSpaceTiny + Dimensions.verticalSpaceNormal + 24,
19-
horizontal: Dimensions.horizontalSpaceBig,
20-
},
2116
iconHeight: Dimensions.iconSizeNormal,
2217
iconWidth: Dimensions.iconSizeNormal,
2318
overlayColor: Palette.transparencyDark,
19+
overrideWithAction: true,
2420
};
2521

2622
export interface Props
27-
extends Omit<
28-
IFloatingActionProps,
29-
| 'distanceToEdge'
30-
| 'iconHeight'
31-
| 'iconWidth'
32-
| 'overlayColor'
33-
| 'overrideWithAction'
34-
> {
23+
extends Pick<
24+
IFloatingActionProps,
25+
| 'color'
26+
| 'distanceToEdge'
27+
| 'floatingIcon'
28+
| 'overrideWithAction'
29+
| 'visible'
30+
>,
31+
Required<Pick<IFloatingActionProps, 'actions'>> {
3532
sel: string;
3633
title: string;
3734
}

‎src/frontend/screens/central/connections-tab/fab.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -7,18 +7,15 @@ import {Palette} from '~frontend/global-styles/palette';
77
import {Dimensions} from '~frontend/global-styles/dimens';
88
import {Images} from '~frontend/global-styles/images';
99
import {t} from '~frontend/drivers/localization';
10-
import {FabProps} from '../fab';
10+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1111
import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
1212

1313
export default function floatingAction(): Stream<FabProps> {
14-
return xs.of({
14+
return xs.of<FabProps>({
1515
sel: 'fab',
1616
color: Palette.backgroundCTA,
1717
visible: false,
1818
actions: [],
19-
iconHeight: 24,
20-
iconWidth: 24,
21-
overlayColor: Palette.transparencyDark,
2219
title: t('connections.floating_action_button.add_connection'),
2320
distanceToEdge: {
2421
vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,

‎src/frontend/screens/central/connections-tab/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2021-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -7,6 +7,7 @@ import {ReactElement} from 'react';
77
import {Reducer, StateSource} from '@cycle/state';
88
import {ReactSource} from '@cycle/react';
99
import {Command, NavSource} from 'cycle-native-navigation';
10+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1011
import {State as AppState} from '~frontend/drivers/appstate';
1112
import {NetworkSource} from '~frontend/drivers/network';
1213
import {SSBSource} from '~frontend/drivers/ssb';
@@ -18,7 +19,6 @@ import view from './view';
1819
import navigation from './navigation';
1920
import floatingAction from './fab';
2021
import model from './model';
21-
import {FabProps} from '../fab';
2222

2323
export interface Sources {
2424
screen: ReactSource;

‎src/frontend/screens/central/fab.d.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/frontend/screens/central/private-tab/fab.ts‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -8,32 +8,30 @@ import {Palette} from '~frontend/global-styles/palette';
88
import {Dimensions} from '~frontend/global-styles/dimens';
99
import {t} from '~frontend/drivers/localization';
1010
import {Images} from '~frontend/global-styles/images';
11-
import {FabProps} from '../fab';
11+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1212
import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
1313

1414
export default function floatingAction(
1515
state$: Stream<State>,
1616
): Stream<FabProps> {
17-
return state$.map((state) => ({
18-
sel: 'fab',
19-
color: Palette.backgroundCTA,
20-
visible: !!state.getPrivateFeedReadable,
21-
actions: [
22-
{
23-
color: Palette.backgroundCTA,
24-
name: 'recipients-input',
25-
icon: Images.messagePlus,
26-
text: t('private.floating_action_button.compose'),
17+
return state$.map(
18+
(state): FabProps => ({
19+
sel: 'fab',
20+
color: Palette.backgroundCTA,
21+
visible: !!state.getPrivateFeedReadable,
22+
actions: [
23+
{
24+
color: Palette.backgroundCTA,
25+
name: 'recipients-input',
26+
icon: Images.messagePlus,
27+
text: t('private.floating_action_button.compose'),
28+
},
29+
],
30+
title: t('private.floating_action_button.compose'),
31+
distanceToEdge: {
32+
vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
33+
horizontal: Dimensions.horizontalSpaceBig,
2734
},
28-
],
29-
title: t('private.floating_action_button.compose'),
30-
overrideWithAction: true,
31-
iconHeight: 24,
32-
iconWidth: 24,
33-
overlayColor: Palette.transparencyDark,
34-
distanceToEdge: {
35-
vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
36-
horizontal: Dimensions.horizontalSpaceBig,
37-
},
38-
}));
35+
}),
36+
);
3937
}

‎src/frontend/screens/central/private-tab/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2020-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2020-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -7,14 +7,14 @@ import {ReactElement} from 'react';
77
import {ReactSource} from '@cycle/react';
88
import {StateSource, Reducer} from '@cycle/state';
99
import {Command, NavSource} from 'cycle-native-navigation';
10+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1011
import {SSBSource} from '~frontend/drivers/ssb';
1112
import {State} from './model';
1213
import model from './model';
1314
import view from './view';
1415
import intent from './intent';
1516
import navigation from './navigation';
1617
import floatingAction from './fab';
17-
import {FabProps} from '../fab';
1818

1919
export interface Sources {
2020
screen: ReactSource;

‎src/frontend/screens/central/public-tab/fab.ts‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -8,34 +8,32 @@ import {Palette} from '~frontend/global-styles/palette';
88
import {Dimensions} from '~frontend/global-styles/dimens';
99
import {t} from '~frontend/drivers/localization';
1010
import {Images} from '~frontend/global-styles/images';
11-
import {FabProps} from '../fab';
11+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1212
import {FAB_VERTICAL_DISTANCE_TO_EDGE} from '../styles';
1313

1414
export default function floatingAction(
1515
state$: Stream<State>,
1616
): Stream<FabProps> {
17-
return state$.map((state) => ({
18-
sel: 'fab',
19-
color: state.hasComposeDraft
20-
? Palette.backgroundWarningAction
21-
: Palette.backgroundCTA,
22-
visible: !!state.selfFeedId && state.canPublishSSB,
23-
actions: [
24-
{
25-
color: Palette.backgroundCTA,
26-
name: 'compose',
27-
icon: Images.pencil,
28-
text: t('public.floating_action_button.compose'),
17+
return state$.map(
18+
(state): FabProps => ({
19+
sel: 'fab',
20+
color: state.hasComposeDraft
21+
? Palette.backgroundWarningAction
22+
: Palette.backgroundCTA,
23+
visible: !!state.selfFeedId && state.canPublishSSB,
24+
actions: [
25+
{
26+
color: Palette.backgroundCTA,
27+
name: 'compose',
28+
icon: Images.pencil,
29+
text: t('public.floating_action_button.compose'),
30+
},
31+
],
32+
title: t('profile.floating_action_button.compose'),
33+
distanceToEdge: {
34+
vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
35+
horizontal: Dimensions.horizontalSpaceBig,
2936
},
30-
],
31-
title: t('profile.floating_action_button.compose'),
32-
overrideWithAction: true,
33-
iconHeight: 24,
34-
iconWidth: 24,
35-
overlayColor: Palette.transparencyDark,
36-
distanceToEdge: {
37-
vertical: FAB_VERTICAL_DISTANCE_TO_EDGE,
38-
horizontal: Dimensions.horizontalSpaceBig,
39-
},
40-
}));
37+
}),
38+
);
4139
}

‎src/frontend/screens/central/public-tab/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {Command as AlertCommand, DialogSource} from '~frontend/drivers/dialogs';
1414
import {Toast} from '~frontend/drivers/toast';
1515
import messageEtc from '~frontend/components/messageEtc';
1616
import messageShare from '~frontend/components/messageShare';
17+
import {Props as FabProps} from '~frontend/components/FloatingActionButton';
1718
import {timestampAlert} from '~frontend/drivers/dialogs/sharedCommands';
1819
import intent from './intent';
1920
import view from './view';
@@ -22,7 +23,6 @@ import ssb from './ssb';
2223
import floatingAction from './fab';
2324
import asyncStorage from './asyncstorage';
2425
import navigation from './navigation';
25-
import {FabProps} from '../fab';
2626

2727
export interface Sources {
2828
screen: ReactSource;

‎src/frontend/screens/central/styles.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -122,10 +122,4 @@ export const styles = StyleSheet.create({
122122
color: Palette.textBrand,
123123
textAlign: 'center',
124124
},
125-
126-
desktopFabContainer: {
127-
position: 'absolute',
128-
bottom: 0,
129-
right: `calc(50vw - ${Dimensions.desktopMiddleWidth.px} * 0.5)`,
130-
},
131125
});

‎src/frontend/screens/central/view.ts‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// SPDX-FileCopyrightText: 2018-2022 The Manyverse Authors
1+
// SPDX-FileCopyrightText: 2018-2023 The Manyverse Authors
22
//
33
// SPDX-License-Identifier: MPL-2.0
44

@@ -22,13 +22,15 @@ import {
2222
TouchableOpacityProps,
2323
} from 'react-native';
2424
import {h} from '@cycle/react';
25-
import {FloatingAction} from 'react-native-floating-action';
25+
import {
26+
Props as FabProps,
27+
FloatingActionButton,
28+
} from '~frontend/components/FloatingActionButton';
2629
import {t} from '~frontend/drivers/localization';
2730
import PublicTabIcon from '~frontend/components/tab-buttons/PublicTabIcon';
2831
import PrivateTabIcon from '~frontend/components/tab-buttons/PrivateTabIcon';
2932
import ActivityTabIcon from '~frontend/components/tab-buttons/ActivityTabIcon';
3033
import ConnectionsTabIcon from '~frontend/components/tab-buttons/ConnectionsTabIcon';
31-
import {withTitle} from '~frontend/components/withTitle';
3234
import ProgressBar from '~frontend/components/ProgressBar';
3335
import StatusBarBlank from '~frontend/components/StatusBarBlank';
3436
import {
@@ -39,7 +41,6 @@ import {
3941
PROGRESS_BAR_HEIGHT,
4042
} from './styles';
4143
import {State} from './model';
42-
import {FabProps} from './fab';
4344

4445
class CurrentTabPage extends PureComponent<{
4546
currentTab: State['currentTab'];
@@ -65,17 +66,7 @@ class CurrentTabPage extends PureComponent<{
6566
const isActivity = currentTab === 'activity';
6667
const isConnections = currentTab === 'connections';
6768

68-
const fabSection =
69-
Platform.OS === 'web'
70-
? h(
71-
withTitle(View),
72-
{
73-
style: styles.desktopFabContainer,
74-
title: fab.title,
75-
},
76-
[h(FloatingAction, fab)],
77-
)
78-
: h(FloatingAction, fab);
69+
const fabSection = FloatingActionButton(fab);
7970

8071
return h(Fragment, [
8172
h(View, {style: [isPublic ? shown : hidden]}, [

0 commit comments

Comments
 (0)