migrate Button to function

Emurgo · Oct 14, 2021 · ad7934b · ad7934b
1 parent fb76a24
commit ad7934b
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 94 deletions.
diff --git a/src/components/UiKit/Button.js b/src/components/UiKit/Button.js
@@ -1,12 +1,73 @@
 // @flow
 
-import React from 'react'
+import React, {type ElementConfig} from 'react'
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {type PressEvent} from 'react-native/Libraries/Types/CoreEventTypes'
 
 import {colors} from '../../styles/config'
 import Text from './Text'
 
+type Props = {|
+  ...ElementConfig<typeof TouchableOpacity>,
+  title: string,
+  outline?: boolean,
+  outlineOnLight?: boolean,
+  containerStyle?: Object,
+  block?: boolean,
+  iconImage?: number,
+  withoutBackground?: boolean,
+  shelleyTheme?: boolean,
+  outlineShelley?: boolean,
+|}
+
+export const Button = (props: Props) => {
+  const {
+    onPress,
+    title,
+    block,
+    style,
+    containerStyle,
+    outline,
+    outlineOnLight,
+    iconImage,
+    withoutBackground,
+    shelleyTheme,
+    outlineShelley,
+    ...rest
+  } = props
+
+  return (
+    <TouchableOpacity onPress={onPress} style={[block && styles.block, containerStyle]} activeOpacity={0.5} {...rest}>
+      <View
+        style={[
+          styles.button,
+          outline && styles.buttonOutline,
+          outlineOnLight && styles.buttonOutlineOnLight,
+          props.disabled && styles.buttonDisabled,
+          withoutBackground && styles.buttonTransparent,
+          outlineShelley && styles.buttonOutlineShelley,
+          shelleyTheme && styles.shelleyTheme,
+          outlineOnLight && shelleyTheme && styles.shelleyOutlineOnLight,
+          style,
+        ]}
+      >
+        {iconImage != null && <Image source={iconImage} />}
+        <Text
+          style={[
+            styles.text,
+            outlineOnLight && styles.textOutlineOnLight,
+            outlineOnLight && shelleyTheme && styles.textShelleyOutlineOnLight,
+            outlineShelley && styles.textOutlineShelley,
+          ]}
+        >
+          {title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export default Button
+
 const buttonOutline = {
   borderWidth: 1,
   borderColor: '#fff',
@@ -45,6 +106,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     padding: 8,
     fontSize: 14,
+    textTransform: 'uppercase',
   },
   textOutlineOnLight: {
     color: colors.buttonBackground,
@@ -68,85 +130,3 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 })
-
-type ButtonProps = {
-  title: string,
-  onPress: (event: PressEvent) => mixed,
-  color?: ?string,
-  accessibilityLabel?: ?string,
-  disabled?: ?boolean,
-  outline?: boolean,
-  outlineOnLight?: boolean,
-  style?: Object,
-  containerStyle?: Object,
-  block?: boolean,
-  iconImage?: number,
-  withoutBackground?: boolean,
-  shelleyTheme?: boolean,
-  outlineShelley?: boolean,
-  testID?: string,
-}
-
-// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
-class Button extends React.Component<ButtonProps> {
-  render() {
-    const {
-      accessibilityLabel,
-      onPress,
-      title,
-      disabled,
-      block,
-      style,
-      containerStyle,
-      outline,
-      outlineOnLight,
-      iconImage,
-      withoutBackground,
-      shelleyTheme,
-      outlineShelley,
-      testID,
-    } = this.props
-
-    const formattedTitle = title && title.toUpperCase()
-
-    return (
-      <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="button"
-        disabled={disabled}
-        onPress={onPress}
-        style={[block === true && styles.block, containerStyle]}
-        activeOpacity={0.5}
-        testID={testID}
-      >
-        <View
-          style={[
-            styles.button,
-            outline === true && styles.buttonOutline,
-            outlineOnLight === true && styles.buttonOutlineOnLight,
-            disabled === true && styles.buttonDisabled,
-            withoutBackground === true && styles.buttonTransparent,
-            outlineShelley === true && styles.buttonOutlineShelley,
-            shelleyTheme === true && styles.shelleyTheme,
-            outlineOnLight === true && shelleyTheme === true && styles.shelleyOutlineOnLight,
-            style,
-          ]}
-        >
-          {iconImage != null && <Image source={iconImage} />}
-          <Text
-            style={[
-              styles.text,
-              outlineOnLight === true && styles.textOutlineOnLight,
-              outlineOnLight === true && shelleyTheme === true && styles.textShelleyOutlineOnLight,
-              outlineShelley === true && styles.textOutlineShelley,
-            ]}
-          >
-            {formattedTitle}
-          </Text>
-        </View>
-      </TouchableOpacity>
-    )
-  }
-}
-
-export default Button
diff --git a/src/components/UiKit/Button.stories.js b/src/components/UiKit/Button.stories.js
@@ -3,19 +3,50 @@
 import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {ScrollView, StyleSheet, View} from 'react-native'
 
+import icon from '../../assets/img/icon/dashboard.png'
 import Button from './Button'
 
+storiesOf('Button', module).add('default', () => (
+  <ScrollView>
+    <Row>
+      <Button onPress={() => action('onPress')()} title="Submit" />
+    </Row>
+
+    <Row>
+      <Button block onPress={() => action('onPress')()} title="submit" />
+    </Row>
+
+    <Row>
+      <Button block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
+    </Row>
+
+    <Row>
+      <Button outlineOnLight block shelleyTheme onPress={() => action('onPress')()} title="Submit" />
+    </Row>
+
+    <Row>
+      <Button outlineOnLight block onPress={() => action('onPress')()} title="Submit" />
+    </Row>
+
+    <Row>
+      <Button outlineShelley withoutBackground shelleyTheme block onPress={() => action('onPress')()} title="Submit" />
+    </Row>
+
+    <Row>
+      <Button block shelleyTheme iconImage={icon} onPress={() => action('onPress')()} title="Submit, with image" />
+    </Row>
+  </ScrollView>
+))
+
+const Row = (props) => <View {...props} style={styles.row} />
+
 const styles = StyleSheet.create({
-  button: {
+  row: {
     flexDirection: 'row',
-    marginTop: 12,
-    marginHorizontal: 10,
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
   },
 })
-
-storiesOf('Button', module)
-  .addDecorator((getStory) => <View style={styles.button}>{getStory()}</View>)
-  .add('with Shelley theme', () => <Button block shelleyTheme onPress={() => action('clicked')()} title="Okay" />)
-  .add('with Byron theme', () => <Button block onPress={() => action('clicked')()} title="Okay" />)
diff --git a/src/components/WalletInit/WalletNameForm.js b/src/components/WalletInit/WalletNameForm.js
@@ -35,7 +35,7 @@ type Props = {|
     totalSteps: number,
   },
   containerStyle?: ViewStyleProp,
-  buttonStyle?: TextStyleProp,
+  buttonStyle?: ViewStyleProp,
   topContent?: React$Node,
   bottomContent?: React$Node,
   isWaiting?: boolean,