Añadir plantilla

Base para front

1 files changed, 158 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/UiElements/Icons.js b/front/odiparpack/app/containers/UiElements/Icons.js
new file mode 100644
index 0000000..f207d29
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Icons.js
@@ -0,0 +1,158 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import Axios from 'axios';
+import { withStyles } from '@material-ui/core/styles';
+import { PapperBlock } from 'ba-components';
+import { Typography, IconButton, Icon, LinearProgress } from '@material-ui/core';
+import DetailIcon from './IconGallery/DetailIcon';
+import SearchIcons from './IconGallery/SearchIcons';
+const url = '/api/icons?src=';
+
+const styles = theme => ({
+  hide: {
+    display: 'none'
+  },
+  iconsList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    [theme.breakpoints.down('xs')]: {
+      justifyContent: 'center',
+    },
+    overflow: 'auto',
+    maxHeight: 1000,
+    position: 'relative'
+  },
+  iconWrap: {
+    position: 'relative',
+    width: 120,
+    margin: 20,
+    [theme.breakpoints.down('xs')]: {
+      margin: 10,
+    },
+    textAlign: 'center'
+  },
+  btn: {
+    display: 'block',
+    textAlign: 'center',
+    margin: '0 auto',
+  },
+  icon: {
+    fontSize: 48,
+  },
+  preloader: {
+    width: '100%'
+  },
+});
+
+class Icons extends React.Component {
+  state = {
+    raws: [],
+    loading: false,
+    openDetail: false,
+    iconName: '',
+    iconCode: '',
+    filterText: ''
+  };
+
+  componentDidMount = () => {
+    const name = 'material-icon-cheat.txt';
+    this.setState({ loading: true }, () => {
+      Axios.get(url + name)
+        .then(response => response.data.records[0].source)
+        .then(data => {
+          const namesAndCodes = data.split('\n');
+          const icons = namesAndCodes.map(nameAndCode => {
+            const parts = nameAndCode.split(' ');
+            return {
+              name: parts[0],
+              code: parts[1]
+            };
+          });
+          return icons;
+        })
+        .then(icons => {
+          this.setState({
+            raws: icons,
+            loading: false
+          });
+        });
+    });
+  }
+
+  handleOpenDetail = (name, code) => {
+    this.setState({
+      openDetail: true,
+      iconName: name,
+      iconCode: code,
+    });
+  };
+
+  handleCloseDetail = () => {
+    this.setState({ openDetail: false });
+  };
+
+  handleSearch = (event) => {
+    event.persist();
+    // Show result base on keyword
+    this.setState({ filterText: event.target.value.toLowerCase() });
+  }
+
+  render() {
+    const title = brand.name + ' - UI Elements';
+    const description = brand.desc;
+    const {
+      raws,
+      loading,
+      openDetail,
+      iconName,
+      iconCode,
+      filterText
+    } = this.state;
+    const { classes } = this.props;
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Material Icons" desc="Material icons are delightful, beautifully crafted symbols for common actions and items. System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.">
+          <div>
+            {loading
+              && <LinearProgress color="secondary" className={classes.preloader} />
+            }
+            <SearchIcons filterText={filterText} handleSearch={(event) => this.handleSearch(event)} />
+            <div className={classes.iconsList}>
+              {raws.map((raw, index) => {
+                if (raw.name.toLowerCase().indexOf(filterText) === -1) {
+                  return false;
+                }
+                return (
+                  <div className={classes.iconWrap} key={index.toString()}>
+                    <IconButton title="Click to see detail" onClick={() => this.handleOpenDetail(raw.name, raw.code)} className={classes.btn}>
+                      <Icon className={classes.icon}>{raw.name}</Icon>
+                    </IconButton>
+                    <Typography gutterBottom noWrap>{raw.name}</Typography>
+                  </div>
+                );
+              })}
+              <DetailIcon closeDetail={this.handleCloseDetail} isOpenDetail={openDetail} iconName={iconName} iconCode={iconCode} />
+            </div>
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+Icons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Icons);