From eaa0dd4cea821cebbb85417556934f0cababf3fd Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Sun, 13 Aug 2017 02:10:51 -0500 Subject: [PATCH 1/4] Clean up (Row|Column)RenderProperties types --- src/module.d.ts | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/src/module.d.ts b/src/module.d.ts index 7a80bee4..db8e26f1 100644 --- a/src/module.d.ts +++ b/src/module.d.ts @@ -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, @@ -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; - customHeadingComponent?: GriddleComponent; +interface ColumnRenderProperties extends components.ColumnDefinitionProps { } export interface GriddleRenderProperties { From 0cc64ea6b65a0c8381a37d9a93971817adf7d863 Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Sun, 13 Aug 2017 03:09:16 -0500 Subject: [PATCH 2/4] Set initialState from extra Griddle props --- src/index.js | 42 +++++++++++++++++++++++++++++------------- src/module.d.ts | 25 ++++++++++++++++--------- stories/index.tsx | 14 ++++++++++++++ 3 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/index.js b/src/index.js index 18ad6ea6..4212656b 100644 --- a/src/index.js +++ b/src/index.js @@ -65,7 +65,19 @@ class Griddle extends Component { constructor(props) { super(props); - const { plugins=[], data, children:rowPropertiesComponent, events={}, sortProperties={}, styleConfig={}, pageProperties:importedPageProperties, components:userComponents, renderProperties:userRenderProperties={}, settingsComponentObjects:userSettingsComponentObjects } = props; + const { + plugins=[], + data, + children:rowPropertiesComponent, + events={}, + sortProperties={}, + styleConfig={}, + pageProperties:importedPageProperties, + components:userComponents, + renderProperties:userRenderProperties={}, + settingsComponentObjects:userSettingsComponentObjects, + ...userInitialState + } = props; const rowProperties = getRowProperties(rowPropertiesComponent); const columnProperties = getColumnProperties(rowPropertiesComponent); @@ -98,19 +110,23 @@ 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: { + settingsToggle: 'Settings' + }, }, - styleConfig: mergedStyleConfig, - }); + ...plugins.map(p => p.initialState), + userInitialState, + { + data, + pageProperties, + renderProperties, + sortProperties, + styleConfig: mergedStyleConfig, + } + ); this.store = createStore( reducers, diff --git a/src/module.d.ts b/src/module.d.ts index db8e26f1..80712870 100644 --- a/src/module.d.ts +++ b/src/module.d.ts @@ -367,27 +367,34 @@ interface SettingsComponentObject { component?: GriddleComponent; } -export interface GriddlePlugin { +interface GriddleExtensibility { components?: GriddleComponents, events?: GriddleEvents; - renderProperties?: GriddleRenderProperties; - initialState?: PropertyBag, reducer?: PropertyBag, + renderProperties?: GriddleRenderProperties; selectors?: PropertyBag, settingsComponentObjects?: PropertyBag, styleConfig?: GriddleStyleConfig, } -export interface GriddleProps { +interface GriddleInitialState { + enableSettings?: boolean; + textProperties?: { + settingsToggle?: string, + } + + [x: string]: any; +} + +export interface GriddlePlugin extends GriddleExtensibility { + initialState?: GriddleInitialState; +} + +export interface GriddleProps extends GriddlePlugin, GriddleInitialState { plugins?: GriddlePlugin[]; data?: T[]; - events?: GriddleEvents; sortProperties?: GriddleSortKey[]; - styleConfig?: GriddleStyleConfig; pageProperties?: GriddlePageProperties; - components?: GriddleComponents; - renderProperties?: GriddleRenderProperties; - settingsComponentObjects?: PropertyBag; } declare class Griddle extends React.Component, any> { diff --git a/stories/index.tsx b/stories/index.tsx index 20556ca5..cb9cb0b6 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -1214,6 +1214,20 @@ storiesOf('Settings', module) ); }) + .add('disable settings', () => { + return ( + + ); + }) + .add('change settings toggle button text', () => { + return ( + + ); + }) .add('remove built-in settings', () => { const plugin = { components: { From edea14902b9e7f0b269df7ea52591ffb6a556424 Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Sun, 13 Aug 2017 03:16:28 -0500 Subject: [PATCH 3/4] Get default sortMethod from root state --- src/module.d.ts | 1 + src/plugins/local/selectors/localSelectors.js | 7 +++++-- stories/index.tsx | 13 +++++++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/module.d.ts b/src/module.d.ts index 80712870..44ee3f15 100644 --- a/src/module.d.ts +++ b/src/module.d.ts @@ -379,6 +379,7 @@ interface GriddleExtensibility { interface GriddleInitialState { enableSettings?: boolean; + sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number; textProperties?: { settingsToggle?: string, } diff --git a/src/plugins/local/selectors/localSelectors.js b/src/plugins/local/selectors/localSelectors.js index 5cd743d0..dbc86f32 100644 --- a/src/plugins/local/selectors/localSelectors.js +++ b/src/plugins/local/selectors/localSelectors.js @@ -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; @@ -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); diff --git a/stories/index.tsx b/stories/index.tsx index cb9cb0b6..11df1607 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -164,6 +164,19 @@ storiesOf('Griddle main', module) ) }) + .add('with custom default sort', () => { + return ( +
+ Sorts all columns by second character + + + + + + +
+ ); + }) .add('with custom sort on name', () => { return (
From 579b0c2c1b7468595786d2a4ee35077f28b22eec Mon Sep 17 00:00:00 2001 From: Keith Dahlby Date: Mon, 14 Aug 2017 14:51:40 -0500 Subject: [PATCH 4/4] Get Next/Previous text from state textProperties --- src/components/NextButtonContainer.js | 4 ++-- src/components/PreviousButtonContainer.js | 4 ++-- src/index.js | 2 ++ src/module.d.ts | 2 ++ src/plugins/local/components/NextButtonContainer.js | 6 +++--- src/plugins/local/components/PreviousButtonContainer.js | 6 +++--- src/plugins/local/selectors/localSelectors.js | 1 + stories/index.tsx | 6 ++++++ 8 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/NextButtonContainer.js b/src/components/NextButtonContainer.js index 519e7f90..12c272e3 100644 --- a/src/components/NextButtonContainer.js +++ b/src/components/NextButtonContainer.js @@ -1,10 +1,10 @@ import React from 'react'; import { connect } from 'react-redux'; -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'), diff --git a/src/components/PreviousButtonContainer.js b/src/components/PreviousButtonContainer.js index 54d5b21e..66dd7bc8 100644 --- a/src/components/PreviousButtonContainer.js +++ b/src/components/PreviousButtonContainer.js @@ -1,9 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; -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'), diff --git a/src/index.js b/src/index.js index 4212656b..26fce1ef 100644 --- a/src/index.js +++ b/src/index.js @@ -114,6 +114,8 @@ class Griddle extends Component { { enableSettings: true, textProperties: { + next: 'Next', + previous: 'Previous', settingsToggle: 'Settings' }, }, diff --git a/src/module.d.ts b/src/module.d.ts index 44ee3f15..8886e6bc 100644 --- a/src/module.d.ts +++ b/src/module.d.ts @@ -381,6 +381,8 @@ interface GriddleInitialState { enableSettings?: boolean; sortMethod?: (data: any[], column: string, sortAscending?: boolean) => number; textProperties?: { + next?: string, + previous?: string, settingsToggle?: string, } diff --git a/src/plugins/local/components/NextButtonContainer.js b/src/plugins/local/components/NextButtonContainer.js index 94111cb1..b9364bce 100644 --- a/src/plugins/local/components/NextButtonContainer.js +++ b/src/plugins/local/components/NextButtonContainer.js @@ -1,11 +1,11 @@ import React from 'react'; import { connect } from 'react-redux'; -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'), @@ -13,6 +13,6 @@ const enhance = OriginalComponent => connect(state => ({ { getNext } -)(props => ); +)(props => ); export default enhance; diff --git a/src/plugins/local/components/PreviousButtonContainer.js b/src/plugins/local/components/PreviousButtonContainer.js index b9378828..3da75f87 100644 --- a/src/plugins/local/components/PreviousButtonContainer.js +++ b/src/plugins/local/components/PreviousButtonContainer.js @@ -1,11 +1,11 @@ import React from 'react'; import { connect } from 'react-redux'; -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'), @@ -13,6 +13,6 @@ const enhance = OriginalComponent => connect(state => ({ { getPrevious } -)(props => ); +)(props => ); export default enhance; diff --git a/src/plugins/local/selectors/localSelectors.js b/src/plugins/local/selectors/localSelectors.js index dbc86f32..2ae6a8b8 100644 --- a/src/plugins/local/selectors/localSelectors.js +++ b/src/plugins/local/selectors/localSelectors.js @@ -193,3 +193,4 @@ export const classNamesForComponentSelector = dataSelectors.classNamesForCompone export const rowPropertiesSelector = dataSelectors.rowPropertiesSelector; export const cellPropertiesSelector = dataSelectors.cellPropertiesSelector; +export const textSelector = dataSelectors.textSelector; diff --git a/stories/index.tsx b/stories/index.tsx index 11df1607..ee5c4ee5 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -1381,6 +1381,12 @@ storiesOf('Settings', module)
), }, + initialState: { + textProperties: { + next: '▶', + previous: '◀', + }, + }, }; return (