All files / add-report/components/Modal index.jsx

81.82% Statements 9/11
0% Branches 0/2
16.67% Functions 1/6
81.82% Lines 9/11
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107                  1x       1x                         1x             1x                             1x   2x     2x                                                       1x               1x                                  
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Text from '@bufferapp/components/Text';
import Button from '@bufferapp/analyze-shared-components/Button';
import Modal from '@bufferapp/analyze-shared-components/Modal';
 
import { ReportList } from '@bufferapp/report-list';
 
const Content = styled.section`
  padding: 0 .75rem;
`;
 
const Section = styled.section`
  margin-top: 1rem;
  max-height: 18rem;
  overflow-y: scroll;
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D5E3EF;
  min-height: 12rem;
  padding: 1rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05) inset;
  z-index: 9;
`;
 
const InputWrapper = styled.section`
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
`;
 
const Input = styled.input.attrs({
  placeholder: 'Enter report title here',
  type: 'text',
})`
  border: 1px solid #b8b8b8;
  border-radius: 3px;
  box-sizing: border-box;
  width: 466px;
  outline: none;
  font-size: 0.8rem !important;
  font-weight: 400;
  padding: 0.75rem 1rem;
  font-family: 'Roboto', sans-serif;
`;
 
const AddReportModal = ({ open, addReport, toggle, selectReport, translations, reports }) => {
  let textInput;
  const onClick = () => {
    addReport(textInput.value === '' ? 'Untitled' : textInput.value);
  };
  return (
    <Modal open={open} toggle={toggle}>
      <Content>
        <Text color="sidebarBackgroundBlue" weight="medium">{translations.addReportTitle}</Text>
        <InputWrapper>
          <Input
            placeholder={translations.addReportPlaceholder}
            innerRef={(input) => { textInput = input; }}
          />
          <Button onClick={onClick}>
            <Text color="sidebarBackgroundBlue" size="small" weight="medium">{translations.createReport}</Text>
          </Button>
        </InputWrapper>
        <div>
          <Text color="sidebarBackgroundBlue" weight="medium">Or, add to an existing report</Text>
        </div>
        <Section>
          <ReportList
            reports={reports}
            selectReport={selectReport}
            small
          />
        </Section>
      </Content>
    </Modal>
  );
};
 
AddReportModal.defaultProps = {
  open: false,
  addReport: () => {},
  selectReport: () => {},
  toggle: () => {},
  reports: [],
};
 
AddReportModal.propTypes = {
  open: PropTypes.bool,
  addReport: PropTypes.func,
  selectReport: PropTypes.func,
  translations: PropTypes.shape({
    addReportTitle: PropTypes.string,
    createReport: PropTypes.string,
    addReportPlaceholder: PropTypes.string,
  }).isRequired,
  toggle: PropTypes.func,
  reports: PropTypes.arrayOf(PropTypes.shape({
    updated_at: PropTypes.number,
    name: PropTypes.string,
  })),
};
 
export default AddReportModal;