Skip to content

Sort Icon Classes #699

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanlanciaux merged 2 commits into from
Jul 23, 2017
Merged

Sort Icon Classes #699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b8d4bb
Extract getSortIconProps util
dahlbyk Jul 22, 2017
d63cd3e
Apply sort icon class names
dahlbyk Jul 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 5 additions & 13 deletions src/components/TableHeadingCellContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => (
Expand All @@ -15,15 +16,6 @@ const DefaultTableHeadingCellContent = ({title, icon}) => (
</span>
)

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,
Expand All @@ -39,10 +31,10 @@ const EnhancedHeadingCell = OriginalComponent => compose(
})
),
mapProps(props => {
const icon = getIcon(props);
const iconProps = getSortIconProps(props);
const title = props.customHeadingComponent ?
<props.customHeadingComponent {...props.cellProperties.extraData} {...props} icon={icon} /> :
<DefaultTableHeadingCellContent title={props.title} icon={icon} />;
<props.customHeadingComponent {...props.cellProperties.extraData} {...props} {...iconProps} /> :
<DefaultTableHeadingCellContent title={props.title} {...iconProps} />;
const className = valueOrResult(props.cellProperties.headerCssClassName, props) || props.className;
const style = {
...(props.cellProperties.sortable === false || { cursor: 'pointer' }),
Expand All @@ -52,7 +44,7 @@ const EnhancedHeadingCell = OriginalComponent => compose(
return {
...props.cellProperties.extraData,
...props,
icon,
...iconProps,
title,
style,
className
Expand Down
24 changes: 9 additions & 15 deletions src/plugins/local/components/TableHeadingCellContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => (
<span>
{ title }
{ icon && <span>{icon}</span> }
{ icon && <span className={iconClassName}>{icon}</span> }
</span>
)

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,
Expand All @@ -35,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'),
}),
Expand All @@ -48,10 +42,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 ?
<props.customHeadingComponent {...props.cellProperties.extraData} {...props} icon={icon} /> :
<DefaultTableHeadingCellContent title={props.title} icon={icon} />;
<props.customHeadingComponent {...props.cellProperties.extraData} {...props} {...iconProps} /> :
<DefaultTableHeadingCellContent title={props.title} {...iconProps} />;
const className = valueOrResult(props.cellProperties.headerCssClassName, props) || props.className;
const style = {
...(props.cellProperties.sortable === false || { cursor: 'pointer' }),
Expand All @@ -61,7 +55,7 @@ const EnhancedHeadingCell = OriginalComponent => compose(
return {
...props.cellProperties.extraData,
...props,
icon,
...iconProps,
title,
style,
className
Expand Down
20 changes: 20 additions & 0 deletions src/utils/sortUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,23 @@ export function setSortProperties({ setSortColumn, sortProperty, columnId }) {
setSortColumn(newSortProperty);
};
}

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,
};
}

// return null so we don't render anything if no sortProperty
return null;
}
6 changes: 5 additions & 1 deletion stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function getRandomFakeData() {
}
const GreenLeftSortIconComponent = (props) => (
<span style={{ color: "#00ff00" }}>
{props.icon && <span>{props.icon}</span>}
{props.icon && <span className={props.iconClassName}>{props.icon}</span>}
{props.title}
</span>
)
Expand Down Expand Up @@ -441,6 +441,10 @@ storiesOf('Griddle main', module)
.add('with custom heading component', () => {
return (
<div>
<style type="text/css">{`
.griddle-heading-ascending:before { content: '↑'; }
.griddle-heading-descending:before { content: '↓'; }
`}</style>
<small>Name should have a green heading component -- sort icon should show up on the left of the title</small>
<Griddle data={fakeData} plugins={[LocalPlugin]}>
<RowDefinition>
Expand Down