github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/modal/modal.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 { Modal as AntModal } from "antd";
    13  import { Button, Text, TextTypes } from "src/components";
    14  import "./modal.styl";
    15  
    16  export interface ModalProps {
    17    title?: string;
    18    onOk?: () => void;
    19    onCancel?: () => void;
    20    okText?: string;
    21    cancelText?: string;
    22    visible: boolean;
    23  }
    24  
    25  // tslint:disable-next-line:variable-name
    26  export const Modal: React.FC<ModalProps> = (props) => {
    27    const {
    28      children,
    29      onOk,
    30      onCancel,
    31      okText,
    32      cancelText,
    33      visible,
    34      title,
    35    } = props;
    36    return (
    37      <AntModal
    38        title={title && (<Text textType={TextTypes.Heading3}>{title}</Text>)}
    39        className="crl-modal"
    40        visible={visible}
    41        closeIcon={
    42          <div
    43            className="crl-modal__close-icon"
    44            onClick={onCancel}
    45          >
    46            &times;
    47          </div>
    48        }
    49        footer={[
    50          <Button
    51            onClick={onCancel}
    52            type="secondary"
    53            key="cancelButton"
    54          >
    55            { cancelText }
    56          </Button>,
    57          <Button
    58            onClick={onOk}
    59            type="primary"
    60            key="okButton"
    61          >
    62            { okText }
    63          </Button>,
    64        ]}
    65      >
    66        { children }
    67      </AntModal>
    68    );
    69  };