diff --git a/src/components/NextButtonContainer.js b/src/components/NextButtonContainer.js index 61bf956a..278d9eb6 100644 --- a/src/components/NextButtonContainer.js +++ b/src/components/NextButtonContainer.js @@ -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'), diff --git a/src/components/PreviousButtonContainer.js b/src/components/PreviousButtonContainer.js index 6d2cc500..628e227c 100644 --- a/src/components/PreviousButtonContainer.js +++ b/src/components/PreviousButtonContainer.js @@ -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'), diff --git a/src/index.js b/src/index.js index afaa5c53..ea65dbb3 100644 --- a/src/index.js +++ b/src/index.js @@ -78,6 +78,7 @@ class Griddle extends Component { renderProperties:userRenderProperties={}, settingsComponentObjects:userSettingsComponentObjects, storeKey = 'store', + ...userInitialState } = props; const rowProperties = getRowProperties(rowPropertiesComponent); @@ -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, diff --git a/src/module.d.ts b/src/module.d.ts index 4058ef04..b90afea9 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 { @@ -378,27 +367,37 @@ 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; + 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 extends GriddlePlugin, GriddleInitialState { plugins?: GriddlePlugin[]; data?: T[]; - events?: GriddleEvents; sortProperties?: GriddleSortKey[]; - styleConfig?: GriddleStyleConfig; pageProperties?: GriddlePageProperties; - components?: GriddleComponents; - renderProperties?: GriddleRenderProperties; - settingsComponentObjects?: PropertyBag; storeKey?: string; } diff --git a/src/plugins/local/components/NextButtonContainer.js b/src/plugins/local/components/NextButtonContainer.js index 98c12c0a..2f872dc0 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 '../../../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'), @@ -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 38dad4c9..54af2b14 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 '../../../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'), @@ -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 5cd743d0..2ae6a8b8 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); @@ -190,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 6623c87d..eac2228b 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -178,6 +178,19 @@ storiesOf('Griddle main', module) ) }) + .add('with custom default sort', () => { + return ( +
+ Sorts all columns by second character + + + + + + +
+ ); + }) .add('with custom sort on name', () => { return (
@@ -1282,6 +1295,20 @@ storiesOf('Settings', module) ); }) + .add('disable settings', () => { + return ( + + ); + }) + .add('change settings toggle button text', () => { + return ( + + ); + }) .add('remove built-in settings', () => { const plugin = { components: { @@ -1422,6 +1449,12 @@ storiesOf('Settings', module)
), }, + initialState: { + textProperties: { + next: '▶', + previous: '◀', + }, + }, }; return (