Page MenuHomePhorge
Files F32562474

D12651.1767339551.diff
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

D12651.1767339551.diff
View Options

diff --git a/native/components/loadable-button.react.js b/native/components/loadable-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/loadable-button.react.js
@@ -0,0 +1,80 @@
+// @flow
+
+import * as React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+
+import Button from './button.react.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+type LoadableContentProps = {
+ +children: React.Node,
+ +isLoading: boolean,
+};
+
+function LoadableContent(props: LoadableContentProps): React.Node {
+ const { children, isLoading } = props;
+
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const buttonContentContainerStyles = React.useMemo(() => {
+ const result = [styles.container];
+
+ if (isLoading) {
+ result.push(styles.containerLoading);
+ }
+
+ return result;
+ }, [isLoading, styles.container, styles.containerLoading]);
+
+ const loadingSpinner = React.useMemo(() => {
+ if (!isLoading) {
+ return null;
+ }
+
+ return (
+ <ActivityIndicator
+ size="small"
+ color={colors.whiteText}
+ style={styles.loadingSpinner}
+ />
+ );
+ }, [colors.whiteText, isLoading, styles.loadingSpinner]);
+
+ return (
+ <>
+ <View style={buttonContentContainerStyles}>{children}</View>
+ {loadingSpinner}
+ </>
+ );
+}
+
+type Props = {
+ ...React.ElementConfig<typeof Button>,
+ +isLoading: boolean,
+};
+
+function LoadableButton(props: Props): React.Node {
+ const { isLoading, children, ...rest } = props;
+
+ return (
+ <Button disabled={isLoading} {...rest}>
+ <LoadableContent isLoading={isLoading}>{props.children}</LoadableContent>
+ </Button>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ containerLoading: {
+ opacity: 0,
+ },
+ loadingSpinner: {
+ position: 'absolute',
+ },
+};
+
+export default LoadableButton;

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 7:39 AM (10 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5874923
Default Alt Text
D12651.1767339551.diff (1 KB)

Event Timeline