From 581791e518bb59a9ce7c3601004e06a84bc89495 Mon Sep 17 00:00:00 2001 From: Sampath Kumar Krishnan Date: Sat, 28 Mar 2020 12:26:28 +0530 Subject: [PATCH] fix: Refactored styled components so that they do not get created multiple times in render method - Fix warnings related to creation of styled components in render method - Created separate component files and wrapped the styled components in them - src: https://github.com/styled-components/styled-components/issues/3015#issuecomment-585346714 --- components/FilterPanel/FilterContainer.js | 21 ++++++++++++ components/FilterPanel/FilterHeader.js | 19 +++++++++++ components/FilterPanel/FilterIcon.js | 9 +++++ components/FilterPanel/FilterName.js | 10 ++++++ components/FilterPanel/index.js | 40 ++++------------------- components/SidePanel/CellContainer.js | 15 +++++++++ components/SidePanel/Name.js | 12 +++++++ components/SidePanel/datagrid.js | 19 +++-------- 8 files changed, 96 insertions(+), 49 deletions(-) create mode 100644 components/FilterPanel/FilterContainer.js create mode 100644 components/FilterPanel/FilterHeader.js create mode 100644 components/FilterPanel/FilterIcon.js create mode 100644 components/FilterPanel/FilterName.js create mode 100644 components/SidePanel/CellContainer.js create mode 100644 components/SidePanel/Name.js diff --git a/components/FilterPanel/FilterContainer.js b/components/FilterPanel/FilterContainer.js new file mode 100644 index 0000000..0b27514 --- /dev/null +++ b/components/FilterPanel/FilterContainer.js @@ -0,0 +1,21 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledFilterContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + height: '20vh'; + user-select: none; + background-color: ${props => (props.selected ? '#d6d6d6' : '#F2F2F2')}; + transition: all 0.2s ease-out; + cursor: pointer; + &:hover { + background-color: #d7d7d7; + } + ` +const FilterContainer = (props) => {props.children} + +export default FilterContainer; + diff --git a/components/FilterPanel/FilterHeader.js b/components/FilterPanel/FilterHeader.js new file mode 100644 index 0000000..f32d388 --- /dev/null +++ b/components/FilterPanel/FilterHeader.js @@ -0,0 +1,19 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledFilterHeader = styled.div` + text-align: center; + text-transform: uppercase; + font-size: 14px; + + @media screen and (max-width: 768px) { + display: flex; + align-items: center; + justify-content: center; + } +` + +const FilterHeader = (props) => {props.children} + +export default FilterHeader; + diff --git a/components/FilterPanel/FilterIcon.js b/components/FilterPanel/FilterIcon.js new file mode 100644 index 0000000..7edb464 --- /dev/null +++ b/components/FilterPanel/FilterIcon.js @@ -0,0 +1,9 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledFilterIcon = styled.img` + width: 40px; +` +const FilterIcon = (props) => {props.children} + +export default FilterIcon; diff --git a/components/FilterPanel/FilterName.js b/components/FilterPanel/FilterName.js new file mode 100644 index 0000000..d726e35 --- /dev/null +++ b/components/FilterPanel/FilterName.js @@ -0,0 +1,10 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledFilterName = styled.div` + text-transform: uppercase; + font-size: 11px; +` +const FilterName = (props) => {props.children} + +export default FilterName; diff --git a/components/FilterPanel/index.js b/components/FilterPanel/index.js index a1e0896..ac84697 100644 --- a/components/FilterPanel/index.js +++ b/components/FilterPanel/index.js @@ -1,6 +1,11 @@ import React from 'react' import styled from 'styled-components' +import FilterHeader from './FilterHeader'; +import FilterContainer from './FilterContainer'; +import FilterName from './FilterName'; +import FilterIcon from './FilterIcon'; + import { connect } from 'react-redux' import _ from 'lodash' @@ -63,29 +68,6 @@ const FilterMenuContainer = styled.div` ` const FilterCategory = ({ filter, onClick, selected }) => { - const FilterContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - height: '20vh'; - user-select: none; - background-color: ${props => (props.selected ? '#d6d6d6' : '#F2F2F2')}; - transition: all 0.2s ease-out; - cursor: pointer; - &:hover { - background-color: #d7d7d7; - } - ` - const FilterName = styled.div` - text-transform: uppercase; - font-size: 11px; - ` - - const FilterIcon = styled.img` - width: 40px; - ` - return ( @@ -119,23 +101,13 @@ const FilterPanel = ({ console.log(newGraph) updateGraph(newGraph) } - const FilterHeader = styled.div` - text-align: center; - text-transform: uppercase; - font-size: 14px; - - @media screen and (max-width: 768px) { - display: flex; - align-items: center; - justify-content: center; - } - ` return ( Cluster Filter {filters.map(filterItem => ( changeGraph(filterItem.name)} selected={filter === filterItem.name ? true : false} diff --git a/components/SidePanel/CellContainer.js b/components/SidePanel/CellContainer.js new file mode 100644 index 0000000..3e4e4f9 --- /dev/null +++ b/components/SidePanel/CellContainer.js @@ -0,0 +1,15 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledCellContainer = styled.div` + font-family: 'Lato', sans-serif; + background: #fff; + border-radius: 5px; + border: 1px solid #e7e7e7; + padding: 15px 20px; + ` + +const CellContainer = (props) => {props.children} + +export default CellContainer; + diff --git a/components/SidePanel/Name.js b/components/SidePanel/Name.js new file mode 100644 index 0000000..0b361fb --- /dev/null +++ b/components/SidePanel/Name.js @@ -0,0 +1,12 @@ +import React from 'react' +import styled from 'styled-components' + +const StyledName = styled.div` + font-weight: 600; + text-transform: uppercase; + margin-bottom: 10px; + ` + + const Name = (props) => {props.children} + +export default Name; diff --git a/components/SidePanel/datagrid.js b/components/SidePanel/datagrid.js index 7a14702..68d944a 100644 --- a/components/SidePanel/datagrid.js +++ b/components/SidePanel/datagrid.js @@ -2,6 +2,9 @@ import React from 'react' import styled from 'styled-components' import _ from 'lodash' +import CellContainer from './CellContainer'; +import Name from './Name'; + const Container = styled.div` font-size: 16px; display: grid; @@ -21,20 +24,6 @@ const A = styled.a` ` function Cell({ name, children }) { - const CellContainer = styled.div` - font-family: 'Lato', sans-serif; - background: #fff; - border-radius: 5px; - border: 1px solid #e7e7e7; - padding: 15px 20px; - ` - - const Name = styled.div` - font-weight: 600; - text-transform: uppercase; - margin-bottom: 10px; - ` - return ( {name} @@ -82,7 +71,7 @@ export default function DataGrid(patient) { href={source} target="_blank" rel="noopener noreferer" - key={i} + key={`link_${i}`} > {_.truncate(source, { length: 40,