DocumentationSection.tsx 6.52 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
import * as React from 'react';
2
import {translate} from 'react-i18next';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
3 4 5 6 7 8 9 10 11 12 13 14
import withStyles from '@material-ui/core/styles/withStyles';

import ADoc from 'model/cms/ADoc';

import Grid from '@material-ui/core/Grid';
import GridContainer from 'ui/layout/GridContainer';

const styles = (theme) => ({
  /*tslint:disable*/
  root: {
    width: '100%',
    minHeight: 'calc(100vh - 365px)',
Oleksii Savran's avatar
Oleksii Savran committed
15
    margin: 0,
Oleksii Savran's avatar
Oleksii Savran committed
16
    direction: 'ltr' as 'ltr',
Oleksii Savran's avatar
Oleksii Savran committed
17 18
  },
  text: {
Matija Obreza's avatar
Matija Obreza committed
19 20
    fontFamily: 'Roboto-Light',
    fontSize: '18px',
Oleksii Savran's avatar
Oleksii Savran committed
21
    '& p': {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
      color: '#4d4c46',
Matija Obreza's avatar
Matija Obreza committed
23 24 25 26 27
      lineHeight: '1.5em',
      margin: '0 0 1.5em 0',
    },
    '& > p:first-child': {
      fontSize: '22px',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
28
    },
Oleksii Savran's avatar
Oleksii Savran committed
29
    '& h2, h3, h4': {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
      fontSize: '24px',
Oleksii Savran's avatar
Oleksii Savran committed
31 32
      marginTop: '-78px',
      paddingTop: '100px',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
33 34 35 36
    },
    '& > ul': {
      marginTop: '30px',
      padding: 0,
Oleksii Savran's avatar
Oleksii Savran committed
37
      // 'html[dir="ltr"] &': {
Oleksii Savran's avatar
Oleksii Savran committed
38
        paddingLeft: '11px',
Oleksii Savran's avatar
Oleksii Savran committed
39 40 41 42
      // },
      // 'html[dir="rtl"] &': {
      //   paddingRight: '11px',
      // },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
43 44 45 46 47 48 49 50 51 52 53 54 55
    },
    '& > ul > li': {
      fontSize: '18px',
      lineHeight: '30px',
    },
    '& > div': {
      width: '100%',
    },
    '& table': {
      wordWrap: 'break-word' as 'break-word',
      tableLayout: 'fixed' as 'fixed',
      '& th': {
        textAlign: 'left' as 'left',
Oleksii Savran's avatar
Oleksii Savran committed
56 57 58
        // 'html[dir="rtl"] &': {
        //   textAlign: 'right' as 'right',
        // },
Oleksii Savran's avatar
Oleksii Savran committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
      },
      '& code': {
        [theme.breakpoints.down('sm')]: {
          // overflowWrap: 'break-word' as 'break-word',
          wordBreak: 'break-all' as 'break-all',
          hyphens: 'auto' as 'auto',
          // wordWrap: 'anywhere' as 'anywhere,'
        },
      },
      '& td': {
        '& > p': {
          [theme.breakpoints.down('xs')]: {
            wordBreak: 'break-word' as 'break-word',
            wordWrap: 'break-word' as 'break-word',
            hyphens: 'auto' as 'auto',
          },
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
      }
Oleksii Savran's avatar
Oleksii Savran committed
77 78
    }
    ,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
79 80 81 82 83
    '& caption': {
      paddingTop: '8px',
      paddingBottom: '8px',
      color: '#777777',
      textAlign: 'left' as 'left',
Oleksii Savran's avatar
Oleksii Savran committed
84 85 86
      // 'html[dir="rtl"] &': {
      //   textAlign: 'right' as 'right',
      // },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
87 88 89 90 91 92 93 94
    },
    '& code': {
      padding: '2px 4px',
      fontSize: '90%',
      color: '#c7254e',
      backgroundColor: '#f9f2f4',
      borderRadius: '4px',
      fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
Oleksii Savran's avatar
Oleksii Savran committed
95 96 97
      [theme.breakpoints.down('xs')]: {
        wordBreak: 'break-all' as 'break-all',
      },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
    },
    '& pre': {
      display: 'block' as 'block',
      padding: '10.5px',
      margin: '0 0 11px',
      fontSize: '15px',
      lineHeight: '1.428571429',
      wordBreak: 'break-all' as 'break-all',
      wordWrap: 'break-word' as 'break-word',
      color: '#333333',
      backgroundColor: '#f5f5f5',
      border: 'none',
      overflow: 'auto' as 'auto',
      fontFamily: ' Menlo, Monaco, Consolas, "Courier New", monospace',
      '& > code': {
        padding: 0,
        color: 'inherit' as 'inherit',
        whiteSpace: 'pre-wrap' as 'pre-wrap',
        backgroundColor: 'transparent' as 'transparent',
      },
      '& .key': {
        color: '#808 !important',
        '& .delimeter': {
          color: '#606 !important',
        },
      },
      '& .string': {
        color: '#d20 !important',
        '& .delimeter': {
          color: '#d1 !important',
        },
      },
      '& .value': {
        color: '#088 !important',
      },
      '& .integer, & .float': {
        color: '#099 !important',
      },
    },
Oleksii Savran's avatar
Oleksii Savran committed
137 138 139 140 141 142 143 144 145 146 147 148 149
  },
  white: {
    backgroundColor: 'white',
    padding: '33px 40px 49px 40px',
    // height: '100%',
    boxSizing: 'border-box' as 'border-box',
    [theme.breakpoints.down('xs')]: {
      padding: '33px 15px 49px 15px',
    },
  },
  header: {
    fontSize: '75%',
    marginBottom: '4em',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
150
  },
151 152 153 154 155 156 157
  tocContainer: {
    padding: '0 .5rem',
  },
  tocHeader: {
    overflow: 'hidden' as 'hidden',
    marginTop: 0,
    marginBottom: '.8rem',
Oleksii Savran's avatar
Oleksii Savran committed
158
    fontSize: '1.6em',
159
  },
Oleksii Savran's avatar
Oleksii Savran committed
160
  tocWrapper: {
161
    padding: '1.25em 1em',
Oleksii Savran's avatar
Oleksii Savran committed
162 163
  },
  toc: {
164
    '& ul': {
Oleksii Savran's avatar
Oleksii Savran committed
165 166
      fontSize: '16px',
      lineHeight: '1.4em',
167
      marginLeft: 0,
Oleksii Savran's avatar
Oleksii Savran committed
168 169 170
      // 'html[dir="rtl"] &': {
      //   marginRight: 0,
      // },
171 172
      listStyleType: 'none' as 'none',
      '& ul': {
Oleksii Savran's avatar
Oleksii Savran committed
173
        // 'html[dir="ltr"] &': {
Oleksii Savran's avatar
Oleksii Savran committed
174
          paddingLeft: '0.8em',
Oleksii Savran's avatar
Oleksii Savran committed
175 176 177 178
        // },
        // 'html[dir="rtl"] &': {
        //   paddingRight: '0.8em',
        // },
179 180 181
      },
    },
    '& > ul': {
Oleksii Savran's avatar
Oleksii Savran committed
182 183
      fontSize: '16px',
      lineHeight: '1.4em',
Oleksii Savran's avatar
Oleksii Savran committed
184
      // 'html[dir="ltr"] &': {
Oleksii Savran's avatar
Oleksii Savran committed
185
        marginLeft: '.125em',
Oleksii Savran's avatar
Oleksii Savran committed
186 187 188 189
      // },
      // 'html[dir="rtl"] &': {
      //   marginRight: '.125em',
      // },
190 191 192 193 194 195 196 197
      padding: 0,
    },
    '& a': {
      textDecoration: 'none' as 'none',
      fontFamily: 'Roboto-Regular',
      color: '#006db4',
    },
  },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
198 199 200 201 202 203
  /*tslint:enable*/
});

interface IDocumentationSectionProps extends React.ClassAttributes<any> {
  documentation: ADoc;
  classes: any;
204
  t: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
205 206 207 208
}

class DocumentationSection extends React.Component<IDocumentationSectionProps> {

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
209 210 211 212
  public state = {
    basePath: '',
  };

213
  private replaceImgSrc = (content) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232
    return content.split('<img src="images').join('<img src="/proxy/api/v1/cms/d/images');
  }

  public componentWillReceiveProps(nextProps) {
    if (typeof document !== 'undefined') {
      this.setState({basePath: document.location.pathname});
    }
  }

  public componentWillUpdate(nextProps, nextState) {
    if (typeof document !== 'undefined' && nextState.basePath !== this.state.basePath) {
      this.setState({basePath: document.location.pathname});
    }
  }

  public componentDidMount() {
    if (typeof document !== 'undefined') {
      this.setState({basePath: document.location.pathname});
    }
233 234
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
235
  public render() {
236
    const {documentation, classes, t} = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
237 238
    return(
      <GridContainer className={ `${classes.root} container-spacing-vertical` }>
Oleksii Savran's avatar
Oleksii Savran committed
239
        <Grid item xs={ 12 } md={ 9 } className={ classes.white } >
240
          <div className={ classes.header } dangerouslySetInnerHTML={ {__html: documentation.header} }/>
Oleksii Savran's avatar
Oleksii Savran committed
241
          <div className={ classes.text } dangerouslySetInnerHTML={ {__html: this.replaceImgSrc(documentation.content)} }/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
242
        </Grid>
Oleksii Savran's avatar
Oleksii Savran committed
243 244
        <Grid item xs={ 12 } md={ 3 }>
          <div className={ classes.tocWrapper }>
245
            <div className={ classes.tocHeader }>{ t('cms.public.c.documentationSection.toc') }</div>
Oleksii Savran's avatar
Oleksii Savran committed
246
            <div className={ classes.toc } dangerouslySetInnerHTML={ {__html: documentation.toc.split('href="#').join(`href="${this.state.basePath}#`)} }/>
247
          </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
248 249 250 251 252 253 254
        </Grid>
      </GridContainer>
    );
  }

}

255
export default translate()(withStyles(styles)(DocumentationSection));