[Y2K-1134] Add block team checkbox to leave team modal (keybase#22239)

* refactor confirm modal to use a stateless function * refactor really leave team modal to accepted style * Make description optional to allow content to be specified in lieu of description * Make leave team work * Storyshots
Ast-x64 · Jan 28, 2020 · 369ad8e · 369ad8e
1 parent 809f784
commit 369ad8e
Show file tree

Hide file tree

Showing 5 changed files with 321 additions and 140 deletions.
diff --git a/shared/common-adapters/confirm-modal/index.tsx b/shared/common-adapters/confirm-modal/index.tsx
@@ -13,7 +13,7 @@ import {IconType} from '../icon.constants-gen'
 export type Props = {
   confirmText?: string
   content?: React.ReactNode
-  description: string
+  description?: string
   error?: string
   header?: React.ReactNode
   icon?: IconType
@@ -25,98 +25,96 @@ export type Props = {
   waitingKey?: string
 }
 
-class ConfirmModal extends React.PureComponent<Props> {
-  render() {
-    return (
-      <Modal
-        header={
-          Styles.isMobile
-            ? {
-                leftButton: (
-                  <Text type="BodyBigLink" onClick={this.props.onCancel}>
-                    Cancel
-                  </Text>
-                ),
-              }
-            : undefined
-        }
-        banners={
-          this.props.error
-            ? [
-                <Banner key="error" color="red">
-                  <BannerParagraph bannerColor="red" content={this.props.error} />
-                </Banner>,
-              ]
-            : []
-        }
-        footer={{
-          content: (
-            <ButtonBar direction="row" fullWidth={true} style={styles.buttonBar}>
-              {!Styles.isMobile && (
-                <WaitingButton
-                  key="cancel"
-                  disabled={!this.props.onCancel}
-                  type="Dim"
-                  label="Cancel"
-                  onClick={this.props.onCancel}
-                  style={styles.button}
-                  waitingKey={this.props.waitingKey || null}
-                />
-              )}
-              <WaitingButton
-                key="confirm"
-                disabled={this.props.onConfirmDeactivated || !this.props.onConfirm}
-                type="Danger"
-                label={this.props.confirmText || 'Confirm'}
-                onClick={this.props.onConfirm}
-                style={styles.button}
-                waitingKey={this.props.waitingKey || null}
-              />
-            </ButtonBar>
-          ),
-          hideBorder: true,
-        }}
-        onClose={this.props.onCancel || undefined}
-        mode="Wide"
-      >
-        <Box2
-          alignItems="center"
-          direction="vertical"
-          centerChildren={true}
-          fullWidth={true}
-          style={styles.container}
-          noShrink={true}
-        >
-          {this.props.icon && (
-            <Icon
-              boxStyle={styles.icon}
-              color={this.props.iconColor ? this.props.iconColor : Styles.globalColors.black_50}
-              fontSize={Styles.isMobile ? 64 : 48}
-              style={styles.icon}
-              type={this.props.icon}
+const ConfirmModal = (props: Props) => (
+  <Modal
+    header={
+      Styles.isMobile
+        ? {
+            leftButton: (
+              <Text type="BodyBigLink" onClick={props.onCancel}>
+                Cancel
+              </Text>
+            ),
+          }
+        : undefined
+    }
+    banners={
+      props.error
+        ? [
+            <Banner key="error" color="red">
+              <BannerParagraph bannerColor="red" content={props.error} />
+            </Banner>,
+          ]
+        : []
+    }
+    footer={{
+      content: (
+        <ButtonBar direction="row" fullWidth={true} style={styles.buttonBar}>
+          {!Styles.isMobile && (
+            <WaitingButton
+              key="cancel"
+              disabled={!props.onCancel}
+              type="Dim"
+              label="Cancel"
+              onClick={props.onCancel}
+              style={styles.button}
+              waitingKey={props.waitingKey || null}
             />
           )}
-          {this.props.header && (
-            <Box2 alignItems="center" direction="vertical" style={styles.icon} noShrink={true}>
-              {this.props.header}
-            </Box2>
-          )}
-          {typeof this.props.prompt === 'string' ? (
-            <Text center={true} style={styles.text} type="HeaderBig" lineClamp={2}>
-              {this.props.prompt}
-            </Text>
-          ) : (
-            this.props.prompt
-          )}
-          <Text center={true} style={styles.text} type="Body">
-            {this.props.description}
-          </Text>
-          {this.props.content}
+          <WaitingButton
+            key="confirm"
+            disabled={props.onConfirmDeactivated || !props.onConfirm}
+            type="Danger"
+            label={props.confirmText || 'Confirm'}
+            onClick={props.onConfirm}
+            style={styles.button}
+            waitingKey={props.waitingKey || null}
+          />
+        </ButtonBar>
+      ),
+      hideBorder: true,
+    }}
+    onClose={props.onCancel || undefined}
+    mode="Wide"
+  >
+    <Box2
+      alignItems="center"
+      direction="vertical"
+      centerChildren={true}
+      fullWidth={true}
+      style={styles.container}
+      noShrink={true}
+    >
+      {props.icon && (
+        <Icon
+          boxStyle={styles.icon}
+          color={props.iconColor ? props.iconColor : Styles.globalColors.black_50}
+          fontSize={Styles.isMobile ? 64 : 48}
+          style={styles.icon}
+          type={props.icon}
+        />
+      )}
+      {props.header && (
+        <Box2 alignItems="center" direction="vertical" style={styles.icon} noShrink={true}>
+          {props.header}
         </Box2>
-      </Modal>
-    )
-  }
-}
+      )}
+      {typeof props.prompt === 'string' ? (
+        <Text center={true} style={styles.text} type="HeaderBig" lineClamp={2}>
+          {props.prompt}
+        </Text>
+      ) : (
+        props.prompt
+      )}
+      {props.description && (
+        <Text center={true} style={styles.text} type="Body">
+          {props.description}
+        </Text>
+      )}
+      {props.content}
+    </Box2>
+  </Modal>
+)
 
 const styles = Styles.styleSheetCreate(() => ({
   button: {