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

     1  // Copyright 2018 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 { Drawer, Button, Divider } from "antd";
    13  import { Link } from "react-router-dom";
    14  
    15  interface IDrawerProps {
    16    visible: boolean;
    17    onClose: () => void;
    18    details?: boolean;
    19    children?: React.ReactNode | string;
    20    data: any;
    21  }
    22  
    23  const openDetails = (data: any) => {
    24    const base = data.app && data.app.length > 0 ? `/statements/${data.app}/${data.implicitTxn}` : `/statement/${data.implicitTxn}`;
    25    const link = `${base}/${encodeURIComponent(data.statement)}`;
    26    return (
    27      <Link to={link}>View statement details</Link>
    28    );
    29  };
    30  
    31  // tslint:disable-next-line: variable-name
    32  export const DrawerComponent = ({ visible, onClose, children, data, details, ...props }: IDrawerProps) => (
    33    <Drawer
    34      title={
    35        <div className="__actions">
    36          <Button type="default" ghost block onClick={onClose}>
    37            Close
    38          </Button>
    39          {details && (
    40            <React.Fragment>
    41              <Divider type="vertical" />
    42              {openDetails(data)}
    43            </React.Fragment>
    44          )}
    45        </div>
    46      }
    47      placement="bottom"
    48      closable={false}
    49      onClose={onClose}
    50      visible={visible}
    51      className="drawer--preset-black"
    52      // getContainer={false}
    53      {...props}
    54    >
    55      {children}
    56    </Drawer>
    57  );