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

     1  // Copyright 2019 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 { Modal, Button } from "antd";
    12  import React, { Fragment } from "react";
    13  import "./styles.styl";
    14  import { ModalProps } from "antd/lib/modal";
    15  
    16  interface ICustomModalProps extends ModalProps {
    17    children?: React.ReactNode;
    18    trigger?: React.ReactChildren | React.ReactNode;
    19    triggerStyle?: string;
    20    triggerTitle?: string;
    21  }
    22  
    23  interface ICustomModalState {
    24    visible: boolean;
    25  }
    26  
    27  class CustomModal extends React.Component<ICustomModalProps, ICustomModalState> {
    28    state = { visible: false };
    29  
    30    showModal = () => {
    31      this.setState({
    32        visible: true,
    33      });
    34    }
    35  
    36    handleOk = () => {
    37      this.setState({
    38        visible: false,
    39      });
    40    }
    41  
    42    handleCancel = () => {
    43      this.setState({
    44        visible: false,
    45      });
    46    }
    47  
    48    render() {
    49      const { trigger, visible, children, triggerStyle, triggerTitle } = this.props;
    50      return (
    51        <Fragment>
    52          {trigger ? trigger : <a onClick={this.showModal} className={`${triggerStyle}`}>{triggerTitle}</a>}
    53          <Modal
    54            visible={trigger ? visible : this.state.visible}
    55            onOk={this.handleOk}
    56            onCancel={this.handleCancel}
    57            className="custom--modal"
    58            maskStyle={{
    59              background: "rgba(71, 88, 114, 0.73)",
    60            }}
    61            footer={<Button type="link" className="custom--modal__close--button" onClick={this.handleCancel}>Done</Button>}
    62            {...this.props}
    63          >
    64            {children}
    65          </Modal>
    66        </Fragment>
    67      );
    68    }
    69  }
    70  
    71  export default CustomModal;