github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/emailSubscriptionForm/index.tsx (about)

     1  // Copyright 2020 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { TextInput, Button } from "src/components";
    13  import { isValidEmail } from "src/util/validation/isValidEmail";
    14  
    15  import "./emailSubscriptionForm.styl";
    16  
    17  interface EmailSubscriptionFormState {
    18    emailAddress: string | undefined;
    19    canSubmit: boolean;
    20  }
    21  
    22  interface EmailSubscriptionFormProps {
    23   onSubmit?: (emailAddress: string) => void;
    24  }
    25  
    26  export class EmailSubscriptionForm extends React.Component<EmailSubscriptionFormProps, EmailSubscriptionFormState> {
    27    constructor(props: EmailSubscriptionFormProps) {
    28      super(props);
    29      this.state = {
    30        emailAddress: undefined,
    31        canSubmit: false,
    32      };
    33    }
    34  
    35    handleSubmit = () => {
    36      if (this.state.canSubmit) {
    37        this.props.onSubmit(this.state.emailAddress);
    38        this.setState({
    39          emailAddress: "",
    40          canSubmit: false,
    41        });
    42      }
    43    }
    44  
    45    handleChange = (value: string) => {
    46      this.handleEmailValidation(value);
    47      this.setState({
    48        emailAddress: value,
    49      });
    50    }
    51  
    52    handleEmailValidation = (value: string) => {
    53      const isCorrectEmail = isValidEmail(value);
    54      const isEmpty = value.length === 0;
    55  
    56      this.setState({
    57        canSubmit: isCorrectEmail && !isEmpty,
    58      });
    59  
    60      if (isCorrectEmail || isEmpty) {
    61        return undefined;
    62      }
    63      return "Invalid email address.";
    64    }
    65  
    66    render() {
    67      const { canSubmit, emailAddress } = this.state;
    68      return (
    69        <div className="email-subscription-form">
    70          <TextInput
    71            name="email"
    72            className="email-subscription-form__input"
    73            placeholder="Enter your email"
    74            validate={this.handleEmailValidation}
    75            onChange={this.handleChange}
    76            value={emailAddress}
    77          />
    78          <Button
    79            type={"primary"}
    80            onClick={this.handleSubmit}
    81            disabled={!canSubmit}
    82            className="email-subscription-form__submit-button"
    83          >
    84            Sign up
    85          </Button>
    86        </div>
    87      );
    88    }
    89  }