All files / src/hocs title.js

100% Statements 9/9
75% Branches 18/24
100% Functions 4/4
100% Lines 9/9

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 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 108 109 110 111 112 113 114 115 116 117 118 119 120 121                  2x   5x         2x                       5x                                             6x             5x   5x       5x         5x                                                                                                      
// @flow
import * as React from 'react';
import {Tooltip, Icon, Alert, Row, Col} from 'antd';
import {HOCContext} from './context';
import {Context} from 'canner-helpers';
import styled from 'styled-components';
import {isEmpty} from 'lodash';
import type {HOCProps} from './types';
 
const Title = styled.div`
  & > span:after {
    content: ${props => props.required && props.title ? '"*"' : '""'};
    color: red;
  }
`;
 
const ErrorMessage = styled.div`
  color: red;
  font-size: 14px;
`;
 
function Label({
  required,
  type,
  imageStorage,
  description,
  title,
}) {
  return (
    <div>
      <Title required={required} title={title} >
        <span>{title}</span>
        {
          title && description && (
            <Tooltip placement="top" title={description}>
              <Icon type="info-circle-o" style={{marginLeft: 12, color: '#aaa'}}/>
            </Tooltip>
          )
        }
      </Title>
      {
        (type === 'image' && isEmpty(imageStorage)) && (
          <Alert style={{margin: '16px 0'}} message="There is no storage config so you can't upload image. Checkout the storage section to know more" type="warning" />
        )
      }
    </div>
  )
}
 
// $FlowFixMe
export default function withTitleAndDescription(Com: React.ComponentType<*>) {
  return class ComponentWithTitleAndDescription extends React.Component<HOCProps> {
    render() {
      const {title, layout, description, hideTitle,
        fetch, subscribe, request, deploy, reset, query,
        renderChildren, renderComponent, renderConfirmButton, renderCancelButton,
        refId, routes, updateQuery, type, imageStorage,
        onDeploy, removeOnDeploy, required, dataChanged, error, errorInfo
      } = this.props;
 
      const labelCol = layout === 'horizontal' ? this.props.labelCol || {
        span: 6
      } : null;
 
      const itemCol = layout === 'horizontal' ?  this.props.itemCol || {
        span: 14
      } : null;
 
      // $FlowFixMe: default funcitons in HOCContext only throw error, so they don't have any arguments
      return <HOCContext.Provider
        value={{
          fetch,
          subscribe,
          request,
          deploy,
          reset,
          query,
          updateQuery,
          onDeploy,
          removeOnDeploy,
          dataChanged
        }}
      >
        <Context.Provider value={{
          renderChildren,
          renderComponent,
          renderConfirmButton,
          renderCancelButton,
          refId,
          routes
        }}>
          <Row
            type={layout === 'horizantal' ? 'flex' : ''}
            style={{marginBottom: 16}}
          >
            <Col {...labelCol}>
              <Label
                required={required}
                type={type}
                imageStorage={imageStorage}
                description={description}
                title={hideTitle ? '' : title}
              />
            </Col>
            <Col {...itemCol}>
              <Com {...this.props} />
              {
                error && (
                  <ErrorMessage>
                    {errorInfo[0].message}
                  </ErrorMessage>
                )
              }
            </Col>
          </Row>
        </Context.Provider>
      </HOCContext.Provider>
    }
  };
}