diff --git a/src/web/components/badge/badge.js b/src/web/components/badge/badge.js index 2fe4579824..5b1b629ca8 100644 --- a/src/web/components/badge/badge.js +++ b/src/web/components/badge/badge.js @@ -24,9 +24,9 @@ import {isDefined, hasValue} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const BadgeContainer = styled.div.withConfig(excludePropsConfig('margin'))` +const BadgeContainer = styledExcludeProps(styled.div, ['margin'])` position: relative; display: inline-flex; margin-right: ${props => props.margin}px; @@ -34,9 +34,10 @@ const BadgeContainer = styled.div.withConfig(excludePropsConfig('margin'))` BadgeContainer.displayName = 'BadgeContainer'; -const BadgeIcon = styled.span.withConfig( - excludePropsConfig(['backgroundColor', 'margin']), -)` +const BadgeIcon = styledExcludeProps(styled.span, [ + 'backgroundColor', + 'margin', +])` display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/src/web/components/bar/progressbar.js b/src/web/components/bar/progressbar.js index 1061b8a44a..67774f508a 100644 --- a/src/web/components/bar/progressbar.js +++ b/src/web/components/bar/progressbar.js @@ -21,12 +21,10 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'web/utils/proptypes.js'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme.js'; -const ProgressBarBox = styled.div.withConfig( - excludePropsConfig(['boxBackground']), -)` +const ProgressBarBox = styledExcludeProps(styled.div, ['boxBackground'])` height: 13px; box-sizing: content-box; /* height includes border */ display: inline-block; @@ -66,7 +64,7 @@ export const adjustProgress = progress => { return progress; }; -const Progress = styled.div.withConfig(excludePropsConfig(['progress']))` +const Progress = styledExcludeProps(styled.div, ['progress'])` height: 13px; @media print { diff --git a/src/web/components/dialog/scrollablecontent.js b/src/web/components/dialog/scrollablecontent.js index 58eb095fa8..09dd217864 100644 --- a/src/web/components/dialog/scrollablecontent.js +++ b/src/web/components/dialog/scrollablecontent.js @@ -21,13 +21,11 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Layout from 'web/components/layout/layout'; -const ScrollableContent = styled.div.withConfig( - excludePropsConfig(['maxHeight']), -)` +const ScrollableContent = styledExcludeProps(styled.div, ['maxHeight'])` overflow: auto; padding: 0 15px; width: 100%; diff --git a/src/web/components/folding/folding.js b/src/web/components/folding/folding.js index 2e79817f56..6f7d00e0ee 100644 --- a/src/web/components/folding/folding.js +++ b/src/web/components/folding/folding.js @@ -20,7 +20,7 @@ import React from 'react'; import styled, {keyframes, css} from 'styled-components'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; /** * State used in foldable components @@ -43,7 +43,7 @@ const foldDelay = keyframes` } `; -const Div = styled.div.withConfig(excludePropsConfig(['foldState']))` +const Div = styledExcludeProps(styled.div, ['foldState'])` overflow: hidden; transition: 0.4s; diff --git a/src/web/components/form/field.js b/src/web/components/form/field.js index 8d4c43ced4..777c5fb9bf 100644 --- a/src/web/components/form/field.js +++ b/src/web/components/form/field.js @@ -22,16 +22,14 @@ import PropTypes from 'web/utils/proptypes'; import styled from 'styled-components'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; import withLayout from 'web/components/layout/withLayout'; export const DISABLED_OPACITY = 0.65; -const StyledInput = styled.input.withConfig( - excludePropsConfig(['convert', 'hasError']), -)` +const StyledInput = styledExcludeProps(styled.input, ['convert', 'hasError'])` /* use font and line settings from parents not from browser default */ font-family: inherit; font-size: inherit; diff --git a/src/web/components/form/formgroup.js b/src/web/components/form/formgroup.js index 644fc9e866..b7615e0a56 100644 --- a/src/web/components/form/formgroup.js +++ b/src/web/components/form/formgroup.js @@ -25,7 +25,7 @@ import {parseInt} from 'gmp/parser'; import Layout from 'web/components/layout/layout'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; const COLUMNS = [ '0', @@ -50,9 +50,7 @@ const FormGroupLayout = styled.div` padding-bottom: 10px; `; -const Title = styled.label.withConfig( - excludePropsConfig(['titleSize', 'titleOffset']), -)` +const Title = styledExcludeProps(styled.label, ['titleSize', 'titleOffset'])` display: inline-block; max-width: 100%; font-weight: bold; @@ -63,9 +61,7 @@ const Title = styled.label.withConfig( margin-left: ${props => COLUMNS[props.titleOffset]}; `; -const FormGroupContent = styled(Layout).withConfig( - excludePropsConfig(['size', 'offset']), -)` +const FormGroupContent = styledExcludeProps(styled(Layout), ['size', 'offset'])` ${props => { const ret = {}; if (isDefined(props.size)) { diff --git a/src/web/components/form/loadingbutton.js b/src/web/components/form/loadingbutton.js index 8946b5c7eb..84241d2b58 100644 --- a/src/web/components/form/loadingbutton.js +++ b/src/web/components/form/loadingbutton.js @@ -20,11 +20,9 @@ import styled from 'styled-components'; import Button from 'web/components/form/button'; import Theme from 'web/utils/theme'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const LoadingButton = styled(Button).withConfig( - excludePropsConfig('isLoading'), -)` +const LoadingButton = styledExcludeProps(styled(Button), ['isLoading'])` color: ${props => (props.isLoading ? 'rgba(0, 0, 0, 0.0)' : Theme.darkGray)}; background: ${props => props.isLoading diff --git a/src/web/components/form/radio.js b/src/web/components/form/radio.js index 2639046071..034f48268f 100644 --- a/src/web/components/form/radio.js +++ b/src/web/components/form/radio.js @@ -23,7 +23,7 @@ import {isDefined} from 'gmp/utils/identity'; import compose from 'web/utils/compose'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Divider from 'web/components/layout/divider'; import withLayout from 'web/components/layout/withLayout'; @@ -37,9 +37,7 @@ export const StyledElement = styled.label` ${props => (props.disabled ? {cursor: 'not-allowed'} : undefined)}; `; -export const StyledInput = styled.input.withConfig( - excludePropsConfig(['convert']), -)` +export const StyledInput = styledExcludeProps(styled.input, ['convert'])` /* use font and line settings from parents not from browser default */ font-family: inherit; font-size: inherit; diff --git a/src/web/components/form/select.js b/src/web/components/form/select.js index 7de202a54c..6a931d8eb8 100644 --- a/src/web/components/form/select.js +++ b/src/web/components/form/select.js @@ -44,13 +44,13 @@ import { } from './selectelements'; import {Marker} from './useFormValidation'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; const SingleSelectedValue = styled(SelectedValue)` cursor: default; `; -const Div = styled.div.withConfig(excludePropsConfig(['hasError']))` +const Div = styledExcludeProps(styled.div, ['hasError'])` display: flex; `; diff --git a/src/web/components/form/selectelements.js b/src/web/components/form/selectelements.js index f5e74d9c3b..decc43b124 100644 --- a/src/web/components/form/selectelements.js +++ b/src/web/components/form/selectelements.js @@ -24,13 +24,11 @@ import {isDefined, hasValue} from 'gmp/utils/identity'; import Theme from 'web/utils/theme'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Portal from 'web/components/portal/portal'; -export const Box = styled.div.withConfig( - excludePropsConfig(['hasError', 'isOpen']), -)` +export const Box = styledExcludeProps(styled.div, ['hasError', 'isOpen'])` border: 1px solid ${Theme.inputBorderGray}; border-radius: 2px; display: flex; @@ -62,9 +60,7 @@ export const Input = styled.input` line-height: inherit; `; -export const Item = styled.span.withConfig( - excludePropsConfig(['isActive', 'isSelected']), -)` +export const Item = styledExcludeProps(styled.span, ['isActive', 'isSelected'])` padding: 1px 5px; cursor: pointer; &:hover { @@ -89,7 +85,7 @@ export const ItemContainer = styled.div` flex-direction: column; `; -const MenuContainer = styled.div.withConfig(excludePropsConfig(['position']))` +const MenuContainer = styledExcludeProps(styled.div, ['position'])` outline: 0; border-radius: 0 0 4px 4px; transition: opacity 0.1s ease; diff --git a/src/web/components/form/textarea.js b/src/web/components/form/textarea.js index 83af82fd5f..3bc08942d4 100644 --- a/src/web/components/form/textarea.js +++ b/src/web/components/form/textarea.js @@ -28,11 +28,12 @@ import withLayout from 'web/components/layout/withLayout'; import {DISABLED_OPACITY} from './field'; import {Marker} from './useFormValidation'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const StyledTextArea = styled.textarea.withConfig( - excludePropsConfig(['convert', 'hasError']), -)` +const StyledTextArea = styledExcludeProps(styled.textarea, [ + 'convert', + 'hasError', +])` display: block; height: auto; color: ${Theme.darkGray}; diff --git a/src/web/components/form/useFormValidation.js b/src/web/components/form/useFormValidation.js index 700086deee..2aee67d78a 100644 --- a/src/web/components/form/useFormValidation.js +++ b/src/web/components/form/useFormValidation.js @@ -24,10 +24,10 @@ import {_, _l} from 'gmp/locale/lang'; import {hasValue, isDefined, isFunction} from 'gmp/utils/identity'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; -const StyledMarker = styled.div.withConfig(excludePropsConfig(['isVisible']))` +const StyledMarker = styledExcludeProps(styled.div, ['isVisible'])` color: ${Theme.darkRed}; color: ${props => props.color}; font-weight: bold; diff --git a/src/web/components/icon/svgicon.js b/src/web/components/icon/svgicon.js index d539616cd6..4637120782 100644 --- a/src/web/components/icon/svgicon.js +++ b/src/web/components/icon/svgicon.js @@ -28,15 +28,13 @@ import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; import withIconSize from 'web/components/icon/withIconSize'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; const Anchor = styled.a` display: flex; `; -const Styled = styled.span.withConfig( - excludePropsConfig(['active', 'isLoading']), -)` +const Styled = styledExcludeProps(styled.span, ['active', 'isLoading'])` cursor: ${props => (isDefined(props.onClick) ? 'pointer' : undefined)}; @media print { diff --git a/src/web/components/icon/withIconSize.js b/src/web/components/icon/withIconSize.js index 14a0d14c31..a6b0907e06 100644 --- a/src/web/components/icon/withIconSize.js +++ b/src/web/components/icon/withIconSize.js @@ -26,7 +26,7 @@ import {isArray} from 'gmp/utils/identity'; import {IconSizeContext} from 'web/components/provider/iconsizeprovider'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; export const ICON_SIZE_LARGE_PIXELS = '50px'; export const ICON_SIZE_MEDIUM_PIXELS = '24px'; @@ -35,9 +35,7 @@ export const ICON_SIZE_SMALL_PIXELS = '16px'; const withIconSize = (defaultSize = 'small') => Component => { - const IconSize = styled(Component).withConfig( - excludePropsConfig(['iconSize']), - )` + const IconSize = styledExcludeProps(styled(Component), ['iconSize'])` ${props => { const {iconSize = defaultSize, size = iconSize} = props; diff --git a/src/web/components/label/severityclass.js b/src/web/components/label/severityclass.js index 20691fe26a..84ef917929 100644 --- a/src/web/components/label/severityclass.js +++ b/src/web/components/label/severityclass.js @@ -20,11 +20,12 @@ import React from 'react'; import styled from 'styled-components'; import _ from 'gmp/locale'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const Label = styled.div.withConfig( - excludePropsConfig(['backgroundColor', 'borderColor']), -)` +const Label = styledExcludeProps(styled.div, [ + 'backgroundColor', + 'borderColor', +])` text-align: center; font-weight: normal; font-style: normal; diff --git a/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap b/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap index 668314f21c..53f79c23b6 100644 --- a/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap +++ b/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap @@ -20,39 +20,17 @@ exports[`HorizontalSep tests should allow to wrap 1`] = ` } .c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: start; - justify-content: start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c3 { margin-left: -5px; } -.c3>* { +.c2>* { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c3>* { +.c2>* { margin-left: 5px; } @@ -63,14 +41,14 @@ exports[`HorizontalSep tests should allow to wrap 1`] = ` display: inline-flex; } -.c4 { +.c3 { -webkit-box-flex-wrap: true; -webkit-flex-wrap: true; -ms-flex-wrap: true; flex-wrap: true; } -.c4>*:not(:last-child)::after { +.c3>*:not(:last-child)::after { content: '•'; margin-left: 5px; } @@ -79,7 +57,7 @@ exports[`HorizontalSep tests should allow to wrap 1`] = ` class="c0 c1" >
`; @@ -245,7 +223,6 @@ exports[`HorizontalSep tests should render with spacing 1`] = ` >
`; diff --git a/src/web/components/layout/divider.js b/src/web/components/layout/divider.js index f2a9b3c079..24ecb7e44a 100644 --- a/src/web/components/layout/divider.js +++ b/src/web/components/layout/divider.js @@ -21,15 +21,13 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Layout from './layout'; const DEFAULT_MARGIN = '5px'; -const DividerComponent = styled(Layout).withConfig( - excludePropsConfig('margin'), -)` +const DividerComponent = styledExcludeProps(styled(Layout), ['margin'])` & > * { display: inline-flex; } diff --git a/src/web/components/layout/horizontalsep.js b/src/web/components/layout/horizontalsep.js index 72a6fac8ec..3f4a346f31 100644 --- a/src/web/components/layout/horizontalsep.js +++ b/src/web/components/layout/horizontalsep.js @@ -22,11 +22,13 @@ import {isDefined} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; import Divider from './divider'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const HorizontalSep = styled(Divider).withConfig( - excludePropsConfig('separator', 'spacing', 'wrap'), -)` +const HorizontalSep = styledExcludeProps(styled(Divider), [ + 'separator', + 'spacing', + 'wrap', +])` flex-wrap: ${props => (isDefined(props.wrap) ? props.wrap : null)}; & > *:not(:last-child)::after { content: ${({separator = '•'}) => `'${separator}'`}; diff --git a/src/web/components/panel/infopanel.js b/src/web/components/panel/infopanel.js index dc9a66bcaa..033180b804 100644 --- a/src/web/components/panel/infopanel.js +++ b/src/web/components/panel/infopanel.js @@ -24,7 +24,7 @@ import {isDefined} from 'gmp/utils/identity'; import DeleteIcon from 'web/components/icon/deleteicon'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; @@ -33,16 +33,14 @@ import Layout from 'web/components/layout/layout'; import Button from './button'; -const Panel = styled(Layout).withConfig( - excludePropsConfig(['isWarning', 'noMargin']), -)` +const Panel = styledExcludeProps(styled(Layout), ['isWarning', 'noMargin'])` background-color: ${Theme.white}; border: 1px solid ${props => (props.isWarning ? Theme.darkRed : Theme.lightBlue)}; margin-top: ${props => (props.noMargin ? '0px' : '5px')}; `; -const Heading = styled.div.withConfig(excludePropsConfig(['isWarning']))` +const Heading = styledExcludeProps(styled.div, ['isWarning'])` display: flex; justify-content: space-between; align-items: center; diff --git a/src/web/components/sortable/emptyrow.js b/src/web/components/sortable/emptyrow.js index 2cd8367e73..1ee9481f7b 100644 --- a/src/web/components/sortable/emptyrow.js +++ b/src/web/components/sortable/emptyrow.js @@ -22,13 +22,14 @@ import styled from 'styled-components'; import {Droppable} from 'react-beautiful-dnd'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; -const EmptyGridRow = styled.div.withConfig( - excludePropsConfig(['active', 'isDraggingOver']), -)` +const EmptyGridRow = styledExcludeProps(styled.div, [ + 'active', + 'isDraggingOver', +])` margin: 8px 0px; min-height: 50px; display: ${props => (props.active ? 'flex' : 'none')}; diff --git a/src/web/components/sortable/item.js b/src/web/components/sortable/item.js index abc2af74b3..e674f5a33c 100644 --- a/src/web/components/sortable/item.js +++ b/src/web/components/sortable/item.js @@ -22,7 +22,7 @@ import styled from 'styled-components'; import {Draggable} from 'react-beautiful-dnd'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; export const GRID_ITEM_MARGIN = { top: 5, @@ -31,7 +31,7 @@ export const GRID_ITEM_MARGIN = { right: 8, }; -const GridItem = styled.div.withConfig(excludePropsConfig(['isDragging']))` +const GridItem = styledExcludeProps(styled.div, ['isDragging'])` display: flex; flex-grow: 1; flex-shrink: 1; diff --git a/src/web/components/sortable/row.js b/src/web/components/sortable/row.js index 8062cc2c17..c8740d5e38 100644 --- a/src/web/components/sortable/row.js +++ b/src/web/components/sortable/row.js @@ -25,14 +25,14 @@ import {isDefined} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; import Resizer from './resizer'; const MIN_HEIGHT = 175; -const GridRow = styled.div.withConfig(excludePropsConfig(['isDraggingOver']))` +const GridRow = styledExcludeProps(styled.div, ['isDraggingOver'])` display: flex; height: ${props => props.height}px; min-height: ${MIN_HEIGHT}px; diff --git a/src/web/components/tab/tab.js b/src/web/components/tab/tab.js index ecb1195ced..adc0a3a9d7 100644 --- a/src/web/components/tab/tab.js +++ b/src/web/components/tab/tab.js @@ -23,9 +23,9 @@ import styled from 'styled-components'; import Theme from 'web/utils/theme.js'; import PropTypes from 'web/utils/proptypes.js'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const StyledDiv = styled.div.withConfig(excludePropsConfig(['active']))` +const StyledDiv = styledExcludeProps(styled.div, ['active'])` font-size: 16px; display: flex; align-items: start; diff --git a/src/web/components/table/table.js b/src/web/components/table/table.js index de6e113c4b..f5afbd2b25 100644 --- a/src/web/components/table/table.js +++ b/src/web/components/table/table.js @@ -21,7 +21,7 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; const Table = ({children, className, footer, header}) => { return ( @@ -40,7 +40,7 @@ Table.propTypes = { header: PropTypes.element, }; -export default styled(Table).withConfig(excludePropsConfig(['fixed', 'size']))` +export default styledExcludeProps(styled(Table), ['fixed', 'size'])` border: 0; border-spacing: 0px; font-size: 12px; diff --git a/src/web/entities/table.js b/src/web/entities/table.js index 641b6245b2..dddbabec92 100644 --- a/src/web/entities/table.js +++ b/src/web/entities/table.js @@ -41,7 +41,7 @@ import StripedTable from 'web/components/table/stripedtable'; import PropTypes from 'web/utils/proptypes'; import withComponentDefaults from 'web/utils/withComponentDefaults'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; const exclude_props = [ 'row', @@ -52,9 +52,9 @@ const exclude_props = [ 'children', ]; -const UpdatingStripedTable = styled(StripedTable).withConfig( - excludePropsConfig(['isUpdating']), -)` +const UpdatingStripedTable = styledExcludeProps(styled(StripedTable), [ + 'isUpdating', +])` opacity: ${props => (props.isUpdating ? '0.2' : '1.0')}; `; diff --git a/src/web/pages/performance/performancepage.js b/src/web/pages/performance/performancepage.js index 5557e6bbe5..d41634bbd5 100644 --- a/src/web/pages/performance/performancepage.js +++ b/src/web/pages/performance/performancepage.js @@ -61,7 +61,7 @@ import compose from 'web/utils/compose'; import PropTypes from 'web/utils/proptypes'; import withGmp from 'web/utils/withGmp'; import {renderSelectItems} from 'web/utils/render'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; import StartEndTimeSelection from './startendtimeselection'; @@ -149,9 +149,9 @@ ReportImage.propTypes = { startDate: PropTypes.date, }; -const Selector = withClickHandler()(styled.span.withConfig( - excludePropsConfig('duration'), -)` +const Selector = withClickHandler()(styledExcludeProps(styled.span, [ + 'duration', +])` ${props => { if (props.value !== props.duration) { return { diff --git a/src/web/pages/reports/details/summary.js b/src/web/pages/reports/details/summary.js index 5be18726af..e3c9747ea1 100644 --- a/src/web/pages/reports/details/summary.js +++ b/src/web/pages/reports/details/summary.js @@ -44,11 +44,9 @@ import TableData from 'web/components/table/data'; import {Col} from 'web/entity/page'; import PropTypes from 'web/utils/proptypes'; -import {excludePropsConfig} from 'web/utils/styledConfig'; +import {styledExcludeProps} from 'web/utils/styledConfig'; -const UpdatingTable = styled(Table).withConfig( - excludePropsConfig(['isUpdating']), -)` +const UpdatingTable = styledExcludeProps(styled(Table), ['isUpdating'])` opacity: ${props => (props.isUpdating ? '0.2' : '1.0')}; `; diff --git a/src/web/utils/styledConfig.js b/src/web/utils/styledConfig.js index cfe9465cb5..a059f0e2c9 100644 --- a/src/web/utils/styledConfig.js +++ b/src/web/utils/styledConfig.js @@ -16,10 +16,13 @@ * along with this program. If not, see . */ -export const excludePropsConfig = excludedProps => { +const excludePropsConfig = excludedProps => { return { shouldForwardProp: prop => { return !excludedProps.includes(prop); }, }; }; + +export const styledExcludeProps = (styledComponent, excludedProps) => + styledComponent.withConfig(excludePropsConfig(excludedProps));