Skip to content

Default sortMethod (plus: initialState from extra props) #718

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 5 commits into from
Aug 17, 2017
Merged

Default sortMethod (plus: initialState from extra props) #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eaa0dd4
Clean up (Row|Column)RenderProperties types
dahlbyk Aug 13, 2017
0cc64ea
Set initialState from extra Griddle props
dahlbyk Aug 13, 2017
edea149
Get default sortMethod from root state
dahlbyk Aug 13, 2017
579b0c2
Get Next/Previous text from state textProperties
dahlbyk Aug 14, 2017
7ecddf1
Merge branch 'master' into default-sortMethod
dahlbyk Aug 15, 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
4 changes: 2 additions & 2 deletions src/components/NextButtonContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { connect } from '../utils/griddleConnect';

import { hasNextSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/dataSelectors';
import { textSelector, hasNextSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/dataSelectors';

const enhance = OriginalComponent => connect((state, props) => ({
text: 'Next', // TODO: Get this from the store
text: textSelector(state, { key: 'next' }),
hasNext: hasNextSelector(state, props),
className: classNamesForComponentSelector(state, 'NextButton'),
style: stylesForComponentSelector(state, 'NextButton'),
Expand Down
4 changes: 2 additions & 2 deletions src/components/PreviousButtonContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { connect } from '../utils/griddleConnect';
import { hasPreviousSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/dataSelectors';
import { textSelector, hasPreviousSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/dataSelectors';

const enhance = OriginalComponent => connect((state, props) => ({
text: 'Previous', // TODO: Get this from the store
text: textSelector(state, { key: 'previous' }),
hasPrevious: hasPreviousSelector(state, props),
className: classNamesForComponentSelector(state, 'PreviousButton'),
style: stylesForComponentSelector(state, 'PreviousButton'),
Expand Down
31 changes: 19 additions & 12 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ class Griddle extends Component {
renderProperties:userRenderProperties={},
settingsComponentObjects:userSettingsComponentObjects,
storeKey = 'store',
...userInitialState
} = props;

const rowProperties = getRowProperties(rowPropertiesComponent);
Expand Down Expand Up @@ -111,19 +112,25 @@ class Griddle extends Component {
}, ...plugins.map(p => p.renderProperties), userRenderProperties);

// TODO: Make this its own method
const initialState = plugins.reduce((combined, plugin) => {
return !!plugin.initialState ? { ...combined, ...plugin.initialState } : combined;
}, {
renderProperties,
data,
enableSettings: true,
pageProperties,
sortProperties,
textProperties: {
settingsToggle: 'Settings'
const initialState = _.merge(
{
enableSettings: true,
textProperties: {
next: 'Next',
previous: 'Previous',
settingsToggle: 'Settings'
},
},
styleConfig: mergedStyleConfig,
});
...plugins.map(p => p.initialState),
userInitialState,
{
data,
pageProperties,
renderProperties,
sortProperties,
styleConfig: mergedStyleConfig,
}
);

this.store = createStore(
reducers,
Expand Down
49 changes: 24 additions & 25 deletions src/module.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ export interface ColumnDefinitionProps {
//Can this column be sorted
sortable?: boolean,

//What sort method this column uses
sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number;

// TODO: Unused?
//What sort type this column uses - magic string :shame:
sortType?: string,
Expand Down Expand Up @@ -345,24 +348,10 @@ export interface GriddlePageProperties {
recordCount?: number;
}

interface RowRenderProperties {
rowKey?: string;
childColumnName?: string;
cssClassName?: string | ((props: any) => string);
props?: {
children: components.ColumnDefinition[];
};
interface RowRenderProperties extends components.RowDefinitionProps {
}

interface ColumnRenderProperties {
id: string;
title?: string;
isMetadata?: boolean;
order?: number;
sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number;
visible?: boolean;
customComponent?: GriddleComponent<any>;
customHeadingComponent?: GriddleComponent<any>;
interface ColumnRenderProperties extends components.ColumnDefinitionProps {
}

export interface GriddleRenderProperties {
Expand All @@ -378,27 +367,37 @@ interface SettingsComponentObject {
component?: GriddleComponent<any>;
}

export interface GriddlePlugin {
interface GriddleExtensibility {
components?: GriddleComponents,
events?: GriddleEvents;
renderProperties?: GriddleRenderProperties;
initialState?: PropertyBag<any>,
reducer?: PropertyBag<Reducer>,
renderProperties?: GriddleRenderProperties;
selectors?: PropertyBag<Selector>,
settingsComponentObjects?: PropertyBag<SettingsComponentObject>,
styleConfig?: GriddleStyleConfig,
}

export interface GriddleProps<T> {
interface GriddleInitialState {
enableSettings?: boolean;
sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number;
textProperties?: {
next?: string,
previous?: string,
settingsToggle?: string,
}

[x: string]: any;
}

export interface GriddlePlugin extends GriddleExtensibility {
initialState?: GriddleInitialState;
}

export interface GriddleProps<T> extends GriddlePlugin, GriddleInitialState {
plugins?: GriddlePlugin[];
data?: T[];
events?: GriddleEvents;
sortProperties?: GriddleSortKey[];
styleConfig?: GriddleStyleConfig;
pageProperties?: GriddlePageProperties;
components?: GriddleComponents;
renderProperties?: GriddleRenderProperties;
settingsComponentObjects?: PropertyBag<SettingsComponentObject>;
storeKey?: string;
}

Expand Down
6 changes: 3 additions & 3 deletions src/plugins/local/components/NextButtonContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react';
import { connect } from '../../../utils/griddleConnect';
import { createStructuredSelector } from 'reselect';

import { hasNextSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/localSelectors';
import { textSelector, hasNextSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/localSelectors';
import { getNext } from '../../../actions';

const enhance = OriginalComponent => connect(state => ({
text: textSelector(state, { key: 'next' }),
hasNext: hasNextSelector(state),
className: classNamesForComponentSelector(state, 'NextButton'),
style: stylesForComponentSelector(state, 'NextButton'),
}),
{
getNext
}
)(props => <OriginalComponent {...props} onClick={props.getNext} text="Next" />);
)(props => <OriginalComponent {...props} onClick={props.getNext} />);

export default enhance;
6 changes: 3 additions & 3 deletions src/plugins/local/components/PreviousButtonContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react';
import { connect } from '../../../utils/griddleConnect';
import { createStructuredSelector } from 'reselect';

import { hasPreviousSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/localSelectors';
import { textSelector, hasPreviousSelector, classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/localSelectors';
import { getPrevious } from '../../../actions';

const enhance = OriginalComponent => connect(state => ({
text: textSelector(state, { key: 'previous' }),
hasPrevious: hasPreviousSelector(state),
className: classNamesForComponentSelector(state, 'PreviousButton'),
style: stylesForComponentSelector(state, 'PreviousButton'),
}),
{
getPrevious
}
)(props => <OriginalComponent {...props} onClick={props.getPrevious} text="Previous" />);
)(props => <OriginalComponent {...props} onClick={props.getPrevious} />);

export default enhance;
8 changes: 6 additions & 2 deletions src/plugins/local/selectors/localSelectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export const filterSelector = state => (state.get('filter') || '');

export const sortPropertiesSelector = state => (state.get('sortProperties'));

export const sortMethodSelector = state => state.get('sortMethod');

export const renderPropertiesSelector = state => (state.get('renderProperties'));

export const metaDataColumnsSelector = dataSelectors.metaDataColumnsSelector;
Expand Down Expand Up @@ -105,13 +107,14 @@ export const sortedDataSelector = createSelector(
filteredDataSelector,
sortPropertiesSelector,
renderPropertiesSelector,
(filteredData, sortProperties, renderProperties) => {
sortMethodSelector,
(filteredData, sortProperties, renderProperties, sortMethod = defaultSort) => {
if (!sortProperties) { return filteredData; }

return sortProperties.reverse().reduce((data, sortColumnOptions) => {
const columnProperties = renderProperties && renderProperties.get('columnProperties').get(sortColumnOptions.get('id'));

const sortFunction = (columnProperties && columnProperties.get('sortMethod')) || defaultSort;
const sortFunction = (columnProperties && columnProperties.get('sortMethod')) || sortMethod;

return sortFunction(data, sortColumnOptions.get('id'), sortColumnOptions.get('sortAscending'));
}, filteredData);
Expand Down Expand Up @@ -190,3 +193,4 @@ export const classNamesForComponentSelector = dataSelectors.classNamesForCompone

export const rowPropertiesSelector = dataSelectors.rowPropertiesSelector;
export const cellPropertiesSelector = dataSelectors.cellPropertiesSelector;
export const textSelector = dataSelectors.textSelector;
33 changes: 33 additions & 0 deletions stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,19 @@ storiesOf('Griddle main', module)
)
})

.add('with custom default sort', () => {
return (

@ryanlanciaux ryanlanciaux Aug 16, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this have the sortProperties set like the previous story?

const sortProperties = [
  { id: 'name', sortAscending: true }
];
...
<Griddle
  ...
  sortProperties={sortProperties}
  sortMethod={sortBySecondCharacter}>

@dahlbyk dahlbyk Aug 16, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this grid needs to be pre-sorted, no. This test is derived from the test that follows.

@ryanlanciaux ryanlanciaux Aug 17, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it - sorry about my confusion. 👍

<div>
<small>Sorts all columns by second character</small>
<Griddle data={fakeData} plugins={[LocalPlugin]} sortMethod={sortBySecondCharacter}>
<RowDefinition>
<ColumnDefinition id="name" order={2} />
<ColumnDefinition id="state" order={1} />
</RowDefinition>
</Griddle>
</div>
);
})
.add('with custom sort on name', () => {
return (
<div>
Expand Down Expand Up @@ -1282,6 +1295,20 @@ storiesOf('Settings', module)
<Settings settingsComponents={components} />
);
})
.add('disable settings', () => {
return (
<Griddle data={fakeData} plugins={[LocalPlugin]}
enableSettings={false}
/>
);
})
.add('change settings toggle button text', () => {
return (
<Griddle data={fakeData} plugins={[LocalPlugin]}
textProperties={{ settingsToggle: 'Toggle!' }}
/>
);
})
.add('remove built-in settings', () => {
const plugin = {
components: {
Expand Down Expand Up @@ -1422,6 +1449,12 @@ storiesOf('Settings', module)
</div>
),
},
initialState: {
textProperties: {
next: '▶',
previous: '◀',
},
},
};

return (
Expand Down