From 3b8d4bbb92271c42626e6c738a73a0df85665f1d Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Sat, 22 Jul 2017 10:39:39 -0500 Subject: [PATCH 1/2] Extract getSortIconProps util --- src/components/TableHeadingCellContainer.js | 18 +++++---------- .../components/TableHeadingCellContainer.js | 22 ++++++------------- src/utils/sortUtils.js | 17 ++++++++++++++ 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/components/TableHeadingCellContainer.js b/src/components/TableHeadingCellContainer.js index f3d06df5..172d2602 100644 --- a/src/components/TableHeadingCellContainer.js +++ b/src/components/TableHeadingCellContainer.js @@ -6,6 +6,7 @@ import mapProps from 'recompose/mapProps'; import getContext from 'recompose/getContext'; import { sortPropertyByIdSelector, iconsForComponentSelector, classNamesForComponentSelector, stylesForComponentSelector, customHeadingComponentSelector, cellPropertiesSelector } from '../selectors/dataSelectors'; +import { getSortIconProps } from '../utils/sortUtils'; import { valueOrResult } from '../utils/valueUtils'; const DefaultTableHeadingCellContent = ({title, icon}) => ( @@ -15,15 +16,6 @@ const DefaultTableHeadingCellContent = ({title, icon}) => ( ) -function getIcon({sortProperty, sortAscendingIcon, sortDescendingIcon}) { - if (sortProperty) { - return sortProperty.sortAscending ? sortAscendingIcon : sortDescendingIcon; - } - - // return null so we don't render anything if no sortProperty - return null; -} - const EnhancedHeadingCell = OriginalComponent => compose( getContext({ selectors: PropTypes.object, @@ -39,10 +31,10 @@ const EnhancedHeadingCell = OriginalComponent => compose( }) ), mapProps(props => { - const icon = getIcon(props); + const iconProps = getSortIconProps(props); const title = props.customHeadingComponent ? - : - ; + : + ; const className = valueOrResult(props.cellProperties.headerCssClassName, props) || props.className; const style = { ...(props.cellProperties.sortable === false || { cursor: 'pointer' }), @@ -52,7 +44,7 @@ const EnhancedHeadingCell = OriginalComponent => compose( return { ...props.cellProperties.extraData, ...props, - icon, + ...iconProps, title, style, className diff --git a/src/plugins/local/components/TableHeadingCellContainer.js b/src/plugins/local/components/TableHeadingCellContainer.js index 88b9a271..58179bc7 100644 --- a/src/plugins/local/components/TableHeadingCellContainer.js +++ b/src/plugins/local/components/TableHeadingCellContainer.js @@ -7,24 +7,16 @@ import getContext from 'recompose/getContext'; import withHandlers from 'recompose/withHandlers'; import { sortPropertyByIdSelector, iconsForComponentSelector, customHeadingComponentSelector, stylesForComponentSelector, classNamesForComponentSelector, cellPropertiesSelector } from '../../../selectors/dataSelectors'; import { setSortColumn } from '../../../actions'; -import { setSortProperties } from '../../../utils/sortUtils'; +import { getSortIconProps, setSortProperties } from '../../../utils/sortUtils'; import { valueOrResult } from '../../../utils/valueUtils'; -const DefaultTableHeadingCellContent = ({title, icon}) => ( +const DefaultTableHeadingCellContent = ({title, icon, iconClassName}) => ( { title } - { icon && {icon} } + { icon && {icon} } ) -function getIcon({sortProperty, sortAscendingIcon, sortDescendingIcon}) { - if (sortProperty) { - return sortProperty.sortAscending ? sortAscendingIcon : sortDescendingIcon; - } - - // return null so we don't render anything if no sortProperty - return null; -} const EnhancedHeadingCell = OriginalComponent => compose( getContext({ events: PropTypes.object, @@ -48,10 +40,10 @@ const EnhancedHeadingCell = OriginalComponent => compose( })), //TODO: use with props on change or something more performant here mapProps(props => { - const icon = getIcon(props); + const iconProps = getSortIconProps(props); const title = props.customHeadingComponent ? - : - ; + : + ; const className = valueOrResult(props.cellProperties.headerCssClassName, props) || props.className; const style = { ...(props.cellProperties.sortable === false || { cursor: 'pointer' }), @@ -61,7 +53,7 @@ const EnhancedHeadingCell = OriginalComponent => compose( return { ...props.cellProperties.extraData, ...props, - icon, + ...iconProps, title, style, className diff --git a/src/utils/sortUtils.js b/src/utils/sortUtils.js index a85bed02..582d37b6 100644 --- a/src/utils/sortUtils.js +++ b/src/utils/sortUtils.js @@ -39,3 +39,20 @@ export function setSortProperties({ setSortColumn, sortProperty, columnId }) { setSortColumn(newSortProperty); }; } + +export function getSortIconProps(props) { + const { sortProperty, sortAscendingIcon, sortDescendingIcon } = props; + + if (sortProperty) { + return sortProperty.sortAscending ? + { + icon: sortAscendingIcon, + } : + { + icon: sortDescendingIcon, + }; + } + + // return null so we don't render anything if no sortProperty + return null; +} From d63cd3eead5e34bbd012f9f0a718b267cba5ef47 Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Sat, 22 Jul 2017 10:40:52 -0500 Subject: [PATCH 2/2] Apply sort icon class names --- src/plugins/local/components/TableHeadingCellContainer.js | 2 ++ src/utils/sortUtils.js | 3 +++ stories/index.tsx | 6 +++++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/plugins/local/components/TableHeadingCellContainer.js b/src/plugins/local/components/TableHeadingCellContainer.js index 58179bc7..58ee041c 100644 --- a/src/plugins/local/components/TableHeadingCellContainer.js +++ b/src/plugins/local/components/TableHeadingCellContainer.js @@ -27,6 +27,8 @@ const EnhancedHeadingCell = OriginalComponent => compose( customHeadingComponent: customHeadingComponentSelector(state, props), cellProperties: cellPropertiesSelector(state, props), className: classNamesForComponentSelector(state, 'TableHeadingCell'), + sortAscendingClassName: classNamesForComponentSelector(state, 'TableHeadingCellAscending'), + sortDescendingClassName: classNamesForComponentSelector(state, 'TableHeadingCellDescending'), style: stylesForComponentSelector(state, 'TableHeadingCell'), ...iconsForComponentSelector(state, 'TableHeadingCell'), }), diff --git a/src/utils/sortUtils.js b/src/utils/sortUtils.js index 582d37b6..3bfa8911 100644 --- a/src/utils/sortUtils.js +++ b/src/utils/sortUtils.js @@ -42,14 +42,17 @@ export function setSortProperties({ setSortColumn, sortProperty, columnId }) { export function getSortIconProps(props) { const { sortProperty, sortAscendingIcon, sortDescendingIcon } = props; + const { sortAscendingClassName, sortDescendingClassName } = props; if (sortProperty) { return sortProperty.sortAscending ? { icon: sortAscendingIcon, + iconClassName: sortAscendingClassName, } : { icon: sortDescendingIcon, + iconClassName: sortDescendingClassName, }; } diff --git a/stories/index.tsx b/stories/index.tsx index f20cab04..3581b3d9 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -53,7 +53,7 @@ function getRandomFakeData() { } const GreenLeftSortIconComponent = (props) => ( - {props.icon && {props.icon}} + {props.icon && {props.icon}} {props.title} ) @@ -441,6 +441,10 @@ storiesOf('Griddle main', module) .add('with custom heading component', () => { return (
+ Name should have a green heading component -- sort icon should show up on the left of the title