From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../app/components/SourceReader/SourceReader.js | 114 +++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 front/odiparpack/app/components/SourceReader/SourceReader.js (limited to 'front/odiparpack/app/components/SourceReader') diff --git a/front/odiparpack/app/components/SourceReader/SourceReader.js b/front/odiparpack/app/components/SourceReader/SourceReader.js new file mode 100644 index 0000000..e1303a0 --- /dev/null +++ b/front/odiparpack/app/components/SourceReader/SourceReader.js @@ -0,0 +1,114 @@ +import React, { Component } from 'react'; +import { PropTypes } from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Axios from 'axios'; +import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'; +import jsx from 'react-syntax-highlighter/languages/prism/jsx'; +import themeSource from 'react-syntax-highlighter/styles/prism/xonokai'; +import classNames from 'classnames'; +import Code from '@material-ui/icons/Code'; +import Close from '@material-ui/icons/Close'; +import { Button, LinearProgress, Icon } from '@material-ui/core'; +import codePreview from '../../config/codePreview'; + + +const url = '/api/docs?src='; + +const styles = theme => ({ + button: { + margin: '8px 5px', + }, + iconSmall: { + fontSize: 20, + }, + leftIcon: { + marginRight: theme.spacing(1), + }, + source: { + overflow: 'hidden', + height: 0, + position: 'relative', + transition: 'all .5s', + margin: '0 -10px' + }, + preloader: { + position: 'absolute', + top: 36, + left: 0, + width: '100%' + }, + open: { + height: 'auto', + }, + src: { + textAlign: 'center', + margin: 10, + fontFamily: 'monospace', + '& span': { + fontSize: 14, + marginRight: 5, + top: 3, + position: 'relative' + } + } +}); + +class SourceReader extends Component { + state = { raws: [], open: false, loading: false }; + + sourceOpen = () => { + const name = this.props.componentName; + this.setState({ loading: true }, () => { + Axios.get(url + name).then(result => this.setState({ + raws: result.data.records, + loading: false + })); + this.setState({ open: !this.state.open }); + }); + }; + + render() { + const { raws, open, loading } = this.state; + const { classes } = this.props; + registerLanguage('jsx', jsx); + if (codePreview.enable) { + return ( +
+ +
+

+ description + src/app/ + {this.props.componentName} +

+ {loading + && + } + {raws.map((raw, index) => ([ +
+ + {raw.source.toString()} + +
+ ]) + )} +
+
+ ); + } + return false; + } +} + +SourceReader.propTypes = { + componentName: PropTypes.string.isRequired, + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SourceReader); -- cgit v1.2.3