All files / src/components/views/Schemas ViewSchemaButton.tsx

0% Statements 0/10
0% Branches 0/6
0% Functions 0/4
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44                                                                                       
import * as React from "react";
import styled from "styled-components";
import { SchemaDataResponse } from "./types";
import { Button } from "rimble-ui";
import { ModalContent, ModalFooter, ModalWithX } from "../../elements/Modals";
import { SchemaDetail } from "./SchemaDetail";
 
const Wrapper = styled.span`
  cursor: pointer;
  &:hover {
    opacity: 0.75;
  }
`;
 
export interface ViewSchemaButtonProps {
  schema?: SchemaDataResponse;
  hideIssueVcInDetail?: boolean;
}
 
export const ViewSchemaButton: React.FunctionComponent<ViewSchemaButtonProps> = (props) => {
  const { schema, hideIssueVcInDetail } = props;
  const [modalOpen, setModalOpen] = React.useState(false);
 
  if (!schema) {
    return <>{props.children}</>;
  }
 
  return (
    <>
      <Wrapper onClick={() => setModalOpen(true)}>
        {props.children || <Button.Outline size="small">View</Button.Outline>}
      </Wrapper>
      <ModalWithX isOpen={modalOpen} close={() => setModalOpen(false)} minWidth={9} maxWidth={10}>
        <ModalContent>{modalOpen && <SchemaDetail schema={schema} hideIssueVc={hideIssueVcInDetail} />}</ModalContent>
        <ModalFooter mt={3}>
          <Button width="100%" onClick={() => setModalOpen(false)}>
            Close
          </Button>
        </ModalFooter>
      </ModalWithX>
    </>
  );
};