From 98754fd8ef78060baeab7e0b2a4f8ac44c5c7462 Mon Sep 17 00:00:00 2001 From: Talha Abbas Date: Wed, 26 Jan 2022 10:13:17 +0500 Subject: [PATCH] feature/WMS-8-tile (#26) * Recreated tile component with proper naming conventions * Cleaned code, renamed variables, removed unnecessary code * Added TODO note Co-authored-by: Llewellyn Dsouza --- src/assets/images/ArrowRightIcon.js | 28 +++++++ src/assets/images/SetupIcon.js | 44 +++++++++++ src/components/TileComponent/Tile/index.js | 61 ++++++++++++++ src/components/TileComponent/Tile/styles.js | 88 +++++++++++++++++++++ src/components/TileComponent/TileGrid.js | 78 ++++++++++++++++++ 5 files changed, 299 insertions(+) create mode 100644 src/assets/images/ArrowRightIcon.js create mode 100644 src/assets/images/SetupIcon.js create mode 100644 src/components/TileComponent/Tile/index.js create mode 100644 src/components/TileComponent/Tile/styles.js create mode 100644 src/components/TileComponent/TileGrid.js diff --git a/src/assets/images/ArrowRightIcon.js b/src/assets/images/ArrowRightIcon.js new file mode 100644 index 0000000..cf56837 --- /dev/null +++ b/src/assets/images/ArrowRightIcon.js @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types'; + +const ArrowRightIcon = ({ width = 50, height = 24, color = '#007AFF', ...props }) => ( + + + + +); +export default ArrowRightIcon; + +ArrowRightIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/assets/images/SetupIcon.js b/src/assets/images/SetupIcon.js new file mode 100644 index 0000000..b3cfed6 --- /dev/null +++ b/src/assets/images/SetupIcon.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types'; + +const SetupIcon = ({ width = 25, height = 24, color = '#292D32', ...props }) => ( + + + + + + + + +); +export default SetupIcon; + +SetupIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/components/TileComponent/Tile/index.js b/src/components/TileComponent/Tile/index.js new file mode 100644 index 0000000..fc89335 --- /dev/null +++ b/src/components/TileComponent/Tile/index.js @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; +import ArrowRightIcon from 'assets/images/ArrowRightIcon'; + +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import useStyles from './styles'; +import LOGGER from 'services/Logger'; + +export default function Tile({ data, children }) { + let [expand, setExpand] = useState(false); + const classes = useStyles(); + return ( + { + LOGGER.log(data.path); + }} + > + { + setExpand((expand = !expand)); + LOGGER.log(expand); + }} + > + + {children}{' '} + {data.name} + + + + + Update {data.name} {' '} + + + Add New {data.name} {' '} + + + Cycle Count {' '} + + + {data.name} List {' '} + + + + ); +} + +Tile.propTypes = { + data: PropTypes.object, + children: PropTypes.node +}; diff --git a/src/components/TileComponent/Tile/styles.js b/src/components/TileComponent/Tile/styles.js new file mode 100644 index 0000000..b5d8f07 --- /dev/null +++ b/src/components/TileComponent/Tile/styles.js @@ -0,0 +1,88 @@ +import { makeStyles } from '@mui/styles'; + +const useStyles = makeStyles({ + root: { + backgroundColor: 'white', + borderRadius: '8px', + boxShadow: '0px 4px 24px #0000000d' + }, + hoverChange: { + '&:hover': { + backgroundColor: '#007aff', + color: 'white', + '& svg': { + '& path': { + fill: '#fff' + } + } + } + }, + row1: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '8px', + textAlign: 'center', + margin: '0 auto', + '& svg': { + marginBottom: '12px' + } + }, + column: { + flexDirection: 'column' + }, + row2: { + display: 'grid', + opacity: '1', + gridTemplateColumns: ' repeat(2, 1fr)', + gridTemplateRows: ' repeat(2, 1fr)', + fontSize: '14px' + }, + box: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '13px 0 13px 10px', + borderTop: '1px solid lightgray', + '& svg': { + opacity: '0' + }, + '&:hover': { + color: '#007aff', + cursor: 'pointer', + '& svg': { + opacity: '1' + } + } + }, + boxEven: { + borderLeft: ' 1px solid lightgray' + }, + content: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + fontSize: '25px' + }, + name: { + marginLeft: '5px', + fontSize: '20px' + }, + row1Svg: { + alignItems: 'unset', + position: 'relative', + top: '15px', + '& svg': { + width: '30px', + height: '30px' + } + }, + fullHeight: { + height: '230px' + }, + remove: { + display: 'none' + } +}); + +export default useStyles; diff --git a/src/components/TileComponent/TileGrid.js b/src/components/TileComponent/TileGrid.js new file mode 100644 index 0000000..73d3ddc --- /dev/null +++ b/src/components/TileComponent/TileGrid.js @@ -0,0 +1,78 @@ +import React, { useEffect, useRef } from 'react'; +import Box from '@mui/material/Box'; +import { makeStyles } from '@mui/styles'; + +import SetupIcon from 'assets/images/SetupIcon'; +import Tile from './Tile'; + +const useStyles = makeStyles({ + menu: { + display: 'grid', + gap: '1.75rem', + backgroundColor: '#f9f9f9', + padding: '24px 48px', + '@media (max-width: 900px)': { + gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important' + }, + '@media (max-width: 690px)': { + gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important' + } + } +}); + + +// TODO: When using this component, please use props here instead. +// The below code was left as a sample for testing. +// Please also remove this comment when the above are complete +export default function TileGrid() { + const classes = useStyles(); + // to make the grid adjust its elemnts: + const myContainer = useRef(null); + let gridColumns = 2; + useEffect(() => { + const grid = myContainer.current; + const gridChild = grid.childElementCount; + gridColumns = Math.floor(Math.sqrt(gridChild)); + grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`; + }); + return ( + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + {' '} + + + + ); +}