49 | {this.props.filters.filter(filter => filter.active).map(this.renderFilter)}
50 |
51 | )
52 | }
53 | }
54 |
55 | export default FiltersContainer
56 |
--------------------------------------------------------------------------------
/src/actions-filters/FiltersContainer.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react'
3 | import { withInfo } from '@storybook/addon-info'
4 | import { action } from '@storybook/addon-actions'
5 |
6 | import FiltersContainer from './FiltersContainer'
7 | import * as importedFilters from '../filters'
8 |
9 | const filters = Object.entries(importedFilters).map(([name, filter]) => {
10 | const props = {}
11 | switch (name) {
12 | case 'RemoteChoiceFilter':
13 | case 'RemoteMultiChoiceFilter':
14 | props.loadOptions = action('loadOptions')
15 | break
16 | case 'DayFilter':
17 | props.name = null
18 | break
19 | }
20 |
21 | return {
22 | Renderer: filter,
23 | filterKey: name,
24 | active: true,
25 | name,
26 | ...props,
27 | }
28 | })
29 |
30 | storiesOf('object-list/FiltersContainer', module)
31 | .addDecorator((story, context) => withInfo(
32 | 'Container to render all the filters underneath eachother'
33 | )(story)(context))
34 | .add('default view', () => (
35 | handleRowClick(event, row, itemOnClick) : null}
56 | />
57 | )
58 | })
59 | }
60 |
61 | render() {
62 | return (
63 |
64 |
65 |
66 | {this.renderListRows()}
67 |
68 |
{props.data.header}
37 | {props.data.user}
38 |
39 | {props.data.item !== null ? props.data.item : 'N/A'}
40 |
41 |
42 | )
43 | }
44 |
45 | storiesOf('object-list/Data Renderers/List Renderer', module)
46 | .addDecorator((story, context) => withInfo(
47 | 'Component used for displaying list items'
48 | )(story)(context))
49 | .add('default Renderer', () => {
50 | const columns = [
51 | {
52 | dataKey: '1',
53 | header: 'Item 1',
54 | sortable: false,
55 | optional: false,
56 | },
57 | {
58 | dataKey: '2',
59 | header: 'Item 2',
60 | sortable: false,
61 | optional: false,
62 | },
63 | {
64 | dataKey: '3',
65 | header: 'Item 3',
66 | sortable: false,
67 | optional: true,
68 | },
69 | ]
70 |
71 | const data = [
72 | {
73 | '1': 'Lorem Ipsum is simply dummy text',
74 | '2': 'Lorem Ipsum is simply dummy text',
75 | '3': 'Should not display',
76 | url: 'https://uptickhq.com',
77 | },
78 | {
79 | '1': 'Lorem Ipsum is simply dummy text (card 2)',
80 | '2': 'Lorem Ipsum is simply dummy text (card 2)',
81 | '3': 'Should not display',
82 | },
83 | ]
84 |
85 | return
86 | })
87 | .add('single item', () => {
88 | const singleItem = data.slice(0, 1)
89 | return
90 | })
91 | .add('loading', () => {
92 | return
93 | })
94 | .add('multiple items', () => {
95 | return
96 | })
97 |
--------------------------------------------------------------------------------
/src/data-renderers/ListCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { getValueFromAccessor } from './utils'
4 |
5 | /**
6 | * The component that is to be displayed within ListRenderer
7 | * if a custom Renderer is not provided
8 | */
9 | export default class ListCard extends Component {
10 | static propTypes = {
11 | columns: PropTypes.array,
12 | data: PropTypes.object,
13 | onClick: PropTypes.func,
14 | }
15 |
16 | static defaultProps = {
17 | columns: [],
18 | data: {},
19 | }
20 |
21 | renderItemRows = () => {
22 | const {columns, data} = this.props
23 | return columns.map((column, idx) => {
24 | const col = Array.isArray(column) ? column : [column]
25 | return (
26 |
27 |
{col.map(c => c.header).join(' ')}:
28 |
{col.map(c => getValueFromAccessor(data, c.dataKey)).join(' ')}
29 |
Hello
71 | const instance = shallow().instance()
72 | const header = instance._renderHeader()
73 | expect(header).toEqual(jasmine.any(Object))
74 | snapshotTest(header)
75 | })
76 | it('is a string', () => {
77 | const headerText = 'Yellow Brick Road'
78 | const instance = shallow().instance()
79 | expect(instance._renderHeader()).toBe(headerText)
80 | })
81 | it('is a string when nothing is passed in', () => {
82 | const instance = shallow().instance()
83 | expect(instance._renderHeader()).toBe('')
84 | })
85 | it('is something else', () => {
86 | spyOn(console, 'error')
87 | const headerThing = 99
88 | const instance = shallow().instance()
89 | expect(instance._renderHeader()).toBe('')
90 | expect(console.error).toHaveBeenCalled()
91 | expect(console.error.calls.mostRecent().args[0]).toContain('Failed prop type: Invalid prop `header` supplied to `HeaderField`.')
92 | })
93 | })
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/List.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import List from '../List'
5 |
6 | jest.mock('../../utils/functions', () => ({
7 | getVisibleColumns: (a, b) => [...a, ...b],
8 | setColumnLabels: input => input,
9 | }))
10 | jest.mock('../Overlay', () => 'Overlay')
11 |
12 | const props = {
13 | itemOnClick: jest.fn(),
14 | columns: [
15 | {
16 | dataKey: 'name',
17 | header: 'Name',
18 | item: ({row: {attributes: {name}}}) => name,
19 | optional: false,
20 | sortKey: '🎂',
21 | },
22 | [{
23 | dataKey: 'age',
24 | header: 'Age',
25 | item: ({row: {attributes: {age}}, key}) => ({age}),
26 | optional: false,
27 | sortKey: '🥧',
28 | },
29 | {
30 | dataKey: 'gender',
31 | header: 'Gender',
32 | item: ({row: {attributes: {gender}}}) => gender,
33 | optional: false,
34 | sortKey: '🍩',
35 | }],
36 | ],
37 | data: [
38 | {id: 1, type: 'Person', attributes: {name: 'Sam', age: '25', gender: 'M'}},
39 | {id: 2, type: 'Person', attributes: {name: 'Mary', age: '12', gender: 'F'}},
40 | {id: 3, type: 'Person', attributes: {name: 'Q', age: '3', gender: '?'}},
41 | {id: 4, type: 'Person', attributes: {name: 'Peter', age: '111', gender: 'FM'}},
42 | {id: 5, type: 'Person', attributes: {name: 'Amy', age: '32', gender: 'Confused'}},
43 | ],
44 | }
45 |
46 | describe('List', () => {
47 | describe('Lifecycle', () => {
48 | it('componentWillReceiveProps', () => {
49 | const newProps = {
50 | columns: [{dataKey: 'a'}, {dataKey: 'b'}],
51 | meta: {
52 | extraColumns: [{dataKey: 'c'}, {dataKey: 'd'}],
53 | },
54 | }
55 | const instance = shallow(
)
56 | instance.instance().setState({columns: []})
57 | instance.setProps(newProps)
58 | expect(instance.instance().state.columns).toEqual([...newProps.columns, ...newProps.meta.extraColumns])
59 | })
60 | })
61 | describe('Snapshots', () => {
62 | it('can click on items', () => {
63 | snapshotTest(
)
64 | })
65 | })
66 | })
67 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/Overlay.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { snapshotTest } from 'utils/tests'
3 | import Overlay from '../Overlay'
4 |
5 | describe('Overlay', () => {
6 | describe('Snapshots', () => {
7 | it('not loading', () => {
8 | snapshotTest()
9 | })
10 | it('loading', () => {
11 | snapshotTest()
12 | })
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/TableHeader.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import TableHeader from '../TableHeader'
5 |
6 | jest.mock('../HeaderField', () => 'HeaderField')
7 |
8 | describe('Table Header', () => {
9 | const headerItem = {
10 | dataKey: 'header_sort_key',
11 | header: 'Header Text',
12 | item: jest.fn(),
13 | sortKey: '🍬',
14 | optional: false,
15 | }
16 | describe('Snapshots', () => {
17 | it('renders correctly', () => {
18 | const props = {
19 | headerItems: {...headerItem},
20 | setSort: jest.fn(),
21 | }
22 | snapshotTest()
23 | })
24 | it('renders correctly with multiple header items', () => {
25 | const props = {
26 | headerItems: [{...headerItem}, {...headerItem, header: 'Header Two Text', dataKey: 'header_two_key'}],
27 | setSort: jest.fn(),
28 | }
29 | snapshotTest()
30 | })
31 | })
32 |
33 | describe('Functions', () => {
34 | it('will recieve props as array', () => {
35 | const props = {
36 | headerItems: headerItem,
37 | }
38 | const nextProps = {
39 | headerItems: [{...headerItem, dataKey: 'somethingelse'}],
40 | }
41 | const instance = shallow().instance()
42 | instance.componentWillReceiveProps(nextProps)
43 | expect(instance.state.headerItems).toEqual([{...headerItem, dataKey: 'somethingelse'}])
44 | })
45 | it('will recieve props as non-array', () => {
46 | const props = {
47 | headerItems: headerItem,
48 | }
49 | const nextProps = {
50 | headerItems: {...headerItem, dataKey: 'somethingelse'},
51 | }
52 | const instance = shallow().instance()
53 | instance.componentWillReceiveProps(nextProps)
54 | expect(instance.state.headerItems).toEqual([{...headerItem, dataKey: 'somethingelse'}])
55 | })
56 | it('will recieve same props', () => {
57 | const props = {
58 | headerItems: headerItem,
59 | }
60 | const nextProps = {
61 | headerItems: headerItem,
62 | }
63 | const instance = shallow().instance()
64 | instance.componentWillReceiveProps(nextProps)
65 | expect(instance.state.headerItems).toEqual([headerItem])
66 | })
67 | it('saves width', () => {
68 | const props = {
69 | saveWidth: jasmine.createSpy(),
70 | label: 'something',
71 | }
72 | const instance = shallow().instance()
73 | instance.setState({width: 10})
74 | instance.saveWidth()
75 | expect(props.saveWidth).toHaveBeenCalledWith(props.label, 10)
76 | })
77 | })
78 |
79 | describe('sets width', () => {
80 | let instance
81 | beforeEach(() => {
82 | instance = shallow().instance()
83 | instance.setState({width: 50})
84 | })
85 | it('width > 20', () => {
86 | instance.setWidth(50)
87 | expect(instance.state.width).toBe(100)
88 | })
89 | it('width < 20', () => {
90 | instance.setWidth('-40')
91 | expect(instance.state.width).toBe(50)
92 | })
93 | })
94 | })
95 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/__snapshots__/HeaderField.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`HeaderField Functions renders header is a function 1`] = `
4 |
5 | Hello
6 |
7 | `;
8 |
9 | exports[`HeaderField Snapshots renders not sortable 1`] = `
10 |
11 | Header Text
12 |
13 | `;
14 |
15 | exports[`HeaderField Snapshots renders sortable 1`] = `
16 |
21 | Header Text
22 |
25 |
26 |
27 |
28 | `;
29 |
30 | exports[`HeaderField Snapshots renders sorted asc 1`] = `
31 |
36 | Header Text
37 |
40 |
41 | ̭
42 |
43 |
44 | `;
45 |
46 | exports[`HeaderField Snapshots renders sorted desc 1`] = `
47 |
52 | Header Text
53 |
56 |
57 | ̬
58 |
59 |
60 | `;
61 |
62 | exports[`HeaderField Snapshots renders with empty header 1`] = `
63 |
68 |
69 |
72 |
73 |
74 |
75 | `;
76 |
77 | exports[`HeaderField Snapshots renders with fa-sort icon 1`] = `
78 |
83 | Header Text
84 |
87 |
88 |
89 |
90 | `;
91 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/__snapshots__/Overlay.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Overlay Snapshots loading 1`] = `
4 |
7 | `;
8 |
9 | exports[`Overlay Snapshots not loading 1`] = `
10 |
13 | `;
14 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/__snapshots__/TableHeader.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Table Header Snapshots renders correctly 1`] = `
4 |
10 |
22 | |
23 | `;
24 |
25 | exports[`Table Header Snapshots renders correctly with multiple header items 1`] = `
26 |
32 |
44 |
56 | |
57 | `;
58 |
--------------------------------------------------------------------------------
/src/data-renderers/__tests__/__snapshots__/WidthHandle.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`WidthHandle Snapshots default 1`] = `
4 |
10 | `;
11 |
--------------------------------------------------------------------------------
/src/data-renderers/index.js:
--------------------------------------------------------------------------------
1 | export Table from './Table'
2 | export List from './List'
3 |
--------------------------------------------------------------------------------
/src/data-renderers/utils/__tests__/functions.test.js:
--------------------------------------------------------------------------------
1 | import { getValueFromAccessor, handleRowClick } from '../functions'
2 |
3 | describe('getValueFromAccessor', () => {
4 | it('returns value for a simple key/row', () => {
5 | expect(getValueFromAccessor({a: 'b'}, ['a'])).toBe('b')
6 | })
7 | it('returns value for a nested row/mutiple keys', () => {
8 | expect(getValueFromAccessor({a: {b: 'c'}}, ['a', 'b'])).toBe('c')
9 | })
10 | it('returns value for a nested row/dotted key', () => {
11 | expect(getValueFromAccessor({a: {b: 'c'}}, 'a.b')).toBe('c')
12 | })
13 | it('returns null for incorrect key', () => {
14 | expect(getValueFromAccessor({a: {b: 'c'}}, 'a.c')).toBe(null)
15 | })
16 | })
17 |
18 | describe('handle row click', () => {
19 | const currentTarget = {}
20 | const testTarget = (target, shouldTrigger = false) => {
21 | const itemOnClick = jasmine.createSpy()
22 | const row = {}
23 | const mockEvent = {
24 | currentTarget,
25 | target,
26 | persist: jasmine.createSpy(),
27 | preventDefault: jasmine.createSpy(),
28 | stopPropagation: jasmine.createSpy(),
29 | }
30 | handleRowClick(mockEvent, row, itemOnClick)
31 | expect(mockEvent.persist).toHaveBeenCalled()
32 | if (shouldTrigger) {
33 | expect(mockEvent.preventDefault).toHaveBeenCalled()
34 | expect(mockEvent.stopPropagation).toHaveBeenCalled()
35 | expect(itemOnClick).toHaveBeenCalledWith(row)
36 | } else {
37 | expect(mockEvent.preventDefault).not.toHaveBeenCalled()
38 | expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
39 | expect(itemOnClick).not.toHaveBeenCalled()
40 | }
41 | }
42 | it('handles clicking on row', () => {
43 | const target = {
44 | parentElement: currentTarget,
45 | tagName: 'TD',
46 | }
47 | testTarget(target, true)
48 | })
49 | it('handles clicking on a link in a row', () => {
50 | const target = {
51 | parentElement: currentTarget,
52 | tagName: 'A',
53 | }
54 | testTarget(target)
55 | })
56 | it('handles clicking on a button in a row', () => {
57 | const target = {
58 | parentElement: currentTarget,
59 | tagName: 'BUTTON',
60 | }
61 | testTarget(target)
62 | })
63 | it('handles clicking on an input in a row', () => {
64 | const target = {
65 | parentElement: currentTarget,
66 | tagName: 'INPUT',
67 | }
68 | testTarget(target)
69 | })
70 | it('handles clicking on a textarea in a row', () => {
71 | const target = {
72 | parentElement: currentTarget,
73 | tagName: 'TEXTAREA',
74 | }
75 | testTarget(target)
76 | })
77 | })
78 |
--------------------------------------------------------------------------------
/src/data-renderers/utils/functions.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gets the value of the cell from the row and keys provided
3 | * @param {Object} row Row supplied
4 | * @param {Array|string} keys List of keys used to access the value
5 | * @return {(Object|string|number)} Value from row, or row itself if no keys
6 | */
7 | const getValueFromAccessor = (row, keys) => {
8 | if (!Array.isArray(keys)) keys = keys.split('.')
9 | let value = row
10 | const cloneKeys = [...keys]
11 | while (value && cloneKeys.length) {
12 | const thisKey = cloneKeys.shift()
13 | if (thisKey in value) {
14 | value = value[thisKey]
15 | } else {
16 | return null
17 | }
18 | }
19 | return value
20 | }
21 |
22 | const handleRowClick = (event, row, itemOnClick) => {
23 | event.persist()
24 | let target = event.target
25 | while (target !== event.currentTarget) {
26 | if (['a', 'button', 'input', 'textarea'].includes(target.tagName.toLowerCase())) {
27 | return
28 | }
29 | target = target.parentElement
30 | }
31 | event.preventDefault()
32 | event.stopPropagation()
33 | itemOnClick(row)
34 | }
35 |
36 | export {
37 | getValueFromAccessor,
38 | handleRowClick,
39 | }
40 |
--------------------------------------------------------------------------------
/src/data-renderers/utils/index.js:
--------------------------------------------------------------------------------
1 | export {
2 | getValueFromAccessor,
3 | handleRowClick,
4 | } from './functions'
5 |
--------------------------------------------------------------------------------
/src/filters/ChoiceFilter.js:
--------------------------------------------------------------------------------
1 | import {Choice} from './types'
2 | import {makeFilter} from './utils'
3 |
4 | /**
5 | * Filter used to select from a list of options
6 | */
7 | const ChoiceFilter = makeFilter(Choice)
8 | ChoiceFilter.defaultProps = {
9 | comparisonOptions: [
10 | {value: 'is', label: 'Is'},
11 | {value: 'is_not', label: 'Is not'},
12 | ],
13 | comparison: 'is',
14 | multi: false,
15 | }
16 |
17 | export default ChoiceFilter
18 |
--------------------------------------------------------------------------------
/src/filters/CurrencyFilter.js:
--------------------------------------------------------------------------------
1 | import {Currency} from './types'
2 | import {makeFilter} from './utils'
3 |
4 | /**
5 | * Filter used to filter by a monetary value
6 | */
7 | const CurrencyFilter = makeFilter(Currency)
8 | CurrencyFilter.defaultProps = {
9 | comparisonOptions: [
10 | {value: 'exact', label: 'Exact'},
11 | {value: 'gt', label: 'Greater than'},
12 | {value: 'lt', label: 'Less than'},
13 | {value: 'gte', label: 'Greater than or equal'},
14 | {value: 'lte', label: 'Less than or equal'},
15 | ],
16 | }
17 |
18 | export default CurrencyFilter
19 |
--------------------------------------------------------------------------------
/src/filters/DateFilter.js:
--------------------------------------------------------------------------------
1 | import {Date} from './types'
2 | import {makeFilter} from './utils'
3 |
4 | const fixedComparison = {value: 'fixed', label: 'Fixed Date'}
5 | const relativeComparison = {value: 'relative', label: 'Relative to Now'}
6 |
7 | /**
8 | * Filter used to select a date
9 | */
10 | const DateFilter = makeFilter(Date)
11 | DateFilter.defaultProps = {
12 | fixedComparison: fixedComparison,
13 | relativeComparison: relativeComparison,
14 | comparisonOptions: [fixedComparison, relativeComparison],
15 | comparison: relativeComparison.value,
16 | }
17 |
18 | export default DateFilter
19 |
--------------------------------------------------------------------------------
/src/filters/DayFilter.js:
--------------------------------------------------------------------------------
1 | import {makeFilter} from './utils'
2 | import {Day} from './types'
3 |
4 | /**
5 | * Filter used to move between days
6 | */
7 | const DayFilter = makeFilter(Day)
8 | DayFilter.defaultProps = {
9 | comparisonOptions: [],
10 | permanent: true,
11 | name: null,
12 | }
13 |
14 | export default DayFilter
15 |
--------------------------------------------------------------------------------
/src/filters/MultiChoiceFilter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ChoiceFilter from './ChoiceFilter'
3 |
4 | /**
5 | * Variation of ChoiceFilter with multiple options select enabled
6 | */
7 | class MultiChoiceFilter extends React.Component {
8 | static defaultProps = {
9 | ...ChoiceFilter.defaultProps,
10 | multi: true,
11 | options: [],
12 | }
13 | render() {
14 | return ()
15 | }
16 | }
17 | export default MultiChoiceFilter
18 |
--------------------------------------------------------------------------------
/src/filters/NumberSliderFilter.js:
--------------------------------------------------------------------------------
1 | import {NumberSlider} from './types'
2 | import {makeFilter} from './utils'
3 |
4 | /**
5 | * Filter used to select a range of numbers
6 | */
7 | const NumberSliderFilter = makeFilter(NumberSlider)
8 | NumberSliderFilter.defaultProps = {
9 | comparisonOptions: [
10 | {value: 'exact', label: 'Exact'},
11 | {value: 'gt', label: 'Greater than'},
12 | {value: 'lt', label: 'Less than'},
13 | {value: 'gte', label: 'Greater than or equal'},
14 | {value: 'lte', label: 'Less than or equal'},
15 | ],
16 | comparison: 'exact',
17 | }
18 |
19 | export default NumberSliderFilter
20 |
--------------------------------------------------------------------------------
/src/filters/RemoteChoiceFilter.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 |
3 | import {Choice} from './types'
4 | import {makeFilter} from './utils'
5 |
6 | const RemoteChoiceFilter = makeFilter(Choice)
7 | RemoteChoiceFilter.defaultProps = {
8 | ...RemoteChoiceFilter.defaultProps,
9 | remote: true,
10 | autoload: true,
11 | options: undefined,
12 | }
13 | RemoteChoiceFilter.propTypes = {
14 | ...RemoteChoiceFilter.propTypes,
15 | loadOptions: PropTypes.func.isRequired,
16 | }
17 |
18 | export default RemoteChoiceFilter
19 |
--------------------------------------------------------------------------------
/src/filters/RemoteMultiChoiceFilter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import RemoteChoiceFilter from './RemoteChoiceFilter'
3 |
4 | /**
5 | * A variation on RemoteChoiceFilter with multiple choices enabled
6 | * Allows lookup through the API of choices
7 | */
8 | export default class RemoteMultiChoiceFilter extends React.Component {
9 | static defaultProps = {
10 | ...RemoteMultiChoiceFilter.defaultProps,
11 | multi: true,
12 | comparisonOptions: [
13 | {value: 'is', label: 'Is'},
14 | {value: 'is_not', label: 'Is not'},
15 | ],
16 | }
17 | render() {
18 | return (
19 | )
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/filters/SearchFilter.js:
--------------------------------------------------------------------------------
1 | import {makeFilter} from './utils'
2 | import {Search} from './types'
3 |
4 | /**
5 | * Filter used to search text
6 | */
7 | const SearchFilter = makeFilter(Search)
8 | SearchFilter.defaultProps = {
9 | comparisonOptions: [],
10 | permanent: true,
11 | name: null,
12 | }
13 |
14 | export default SearchFilter
15 |
--------------------------------------------------------------------------------
/src/filters/TextContainsFilter.js:
--------------------------------------------------------------------------------
1 | import {makeFilter} from './utils'
2 | import {Search} from './types'
3 |
4 | /**
5 | * Filter used to search text containing
6 | */
7 | const TextContainsFilter = makeFilter(Search)
8 | TextContainsFilter.defaultProps = {
9 | comparisonOptions: [
10 | {value: 'contains', label: 'Contains'},
11 | {value: 'not_contains', label: 'Does Not Contain'},
12 | ],
13 | comparison: 'contains',
14 | }
15 |
16 | export default TextContainsFilter
17 |
--------------------------------------------------------------------------------
/src/filters/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | Boolean,
3 | Month,
4 | } from './types'
5 | import {makeFilter} from './utils'
6 |
7 | const BooleanFilter = makeFilter(Boolean)
8 | const MonthFilter = makeFilter(Month)
9 |
10 | export { BooleanFilter, MonthFilter }
11 | export CurrencyFilter from './CurrencyFilter'
12 | export ChoiceFilter from './ChoiceFilter'
13 | export DateFilter from './DateFilter'
14 | export DayFilter from './DayFilter'
15 | export MultiChoiceFilter from './MultiChoiceFilter'
16 | export NumberSliderFilter from './NumberSliderFilter'
17 | export SearchFilter from './SearchFilter'
18 | export TextContainsFilter from './TextContainsFilter'
19 |
20 | export RemoteChoiceFilter from './RemoteChoiceFilter'
21 | export RemoteMultiChoiceFilter from './RemoteMultiChoiceFilter'
22 |
--------------------------------------------------------------------------------
/src/filters/types/Boolean.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Choice from './Choice'
4 |
5 | /**
6 | * Filter input used to pass boolean values
7 | */
8 | export default class Boolean extends React.Component {
9 | static propTypes = {
10 | /** Label used for true option */
11 | trueLabel: PropTypes.string,
12 | /** Label used for false option */
13 | falseLabel: PropTypes.string,
14 | /** Function called when value changed */
15 | onChange: PropTypes.func,
16 | /** Current value of filter */
17 | value: PropTypes.string,
18 | /** Object of custom react-select styles */
19 | selectStyles: PropTypes.object,
20 | }
21 |
22 | static defaultProps = {
23 | trueLabel: 'Yes',
24 | falseLabel: 'No',
25 | selectStyles: {},
26 | }
27 |
28 | onValueChange = newValue => {
29 | this.props.onChange(newValue.value)
30 | }
31 |
32 | render() {
33 | const {trueLabel, falseLabel, value, selectStyles} = this.props
34 | const trueOption = {value: 'True', label: trueLabel}
35 | const falseOption = {value: 'False', label: falseLabel}
36 | // TODO: The next line is here to be sure no matter what we pass in we use
37 | // the correct value. However the real issue is probably elsewhere i.e. we
38 | // should pass in the object, not True or False.
39 | const mappedValue = (value === 'True') ? trueOption : ((value === 'False') ? falseOption : null)
40 | return (
41 |
47 | )
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/filters/types/Currency.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Filter input used to pass currency values
6 | */
7 | class Currency extends React.Component {
8 | static propTypes = {
9 | /** Current value of filter */
10 | value: PropTypes.string,
11 | /** Currency symbol to be displayed */
12 | currencySymbol: PropTypes.string,
13 | /** Function called when value changed */
14 | onChange: PropTypes.func,
15 | }
16 |
17 | static defaultProps = {
18 | currencySymbol: '$',
19 | }
20 |
21 | /**
22 | * Handles value change and calls onChange with new value
23 | */
24 | handleValueChange = () => {
25 | this.props.onChange(this.refs.input.value)
26 | }
27 |
28 | render() {
29 | const {value, currencySymbol} = this.props
30 | return (
31 |
32 | {currencySymbol}
33 |
40 | .00
41 |
42 | )
43 | }
44 | }
45 |
46 | export default Currency
47 |
--------------------------------------------------------------------------------
/src/filters/types/Date.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { format } from 'date-fns'
4 |
5 | import Select from '../../utils/Select'
6 | import { Date as DateInput } from 'mireco'
7 | import { ISO_8601_DATE_FORMAT } from 'mireco/constants'
8 |
9 | /**
10 | * Filter input used to pass date values either fixed
11 | * or relative to the current date
12 | */
13 | export default class DateComponent extends React.Component {
14 | static propTypes = {
15 | /** Function to be called when value changes */
16 | onChange: PropTypes.func,
17 | /** Current filter value */
18 | value: PropTypes.oneOfType([
19 | PropTypes.string,
20 | PropTypes.shape({value: PropTypes.string, label: PropTypes.string}),
21 | ]),
22 | /** Selected comparison */
23 | comparison: PropTypes.string.isRequired,
24 | /** Comparison used for fixed date */
25 | fixedComparison: PropTypes.shape({
26 | /** Value passed back */
27 | value: PropTypes.any,
28 | /** Value shown to user */
29 | label: PropTypes.string,
30 | }),
31 | /** Valid options for relative dates */
32 | relativeDateOptions: PropTypes.arrayOf(PropTypes.shape({
33 | /** Value passed back */
34 | value: PropTypes.string,
35 | /** Value shown to user */
36 | label: PropTypes.string,
37 | })),
38 | /** Object of custom react-select styles */
39 | selectStyles: PropTypes.object,
40 | }
41 |
42 | static defaultProps = {
43 | relativeDateOptions: [
44 | {value: 'today', label: 'Today'},
45 | {value: 'week_start', label: 'Beginning of this week'},
46 | {value: 'month_start', label: 'Beginning of this month'},
47 | {value: 'year_start', label: 'Beginning of this year'},
48 | ],
49 | selectStyles: {},
50 | }
51 |
52 | /**
53 | * Handles relative date value changes.
54 | * Calls onChange with new value if valid
55 | * @param {Object} newValue Relative date option to change to
56 | */
57 | handleDateRelativeChange = (newValue) => {
58 | if (Array.isArray(newValue)) { return }
59 | this.props.onChange(newValue)
60 | }
61 |
62 | render() {
63 | const { value, relativeDateOptions, comparison, fixedComparison, selectStyles } = this.props
64 | let date
65 | if (value === null) {
66 | date = null
67 | } else if (value instanceof Date && value.isValid()) {
68 | date = format(value, ISO_8601_DATE_FORMAT)
69 | } else if (typeof value === 'string') {
70 | date = value
71 | }
72 | let dateChoice
73 | if (comparison === fixedComparison.value) {
74 | dateChoice = (
75 |
82 | )
83 | } else {
84 | dateChoice = (
85 |
93 | )
94 | }
95 | return dateChoice
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/filters/types/Day.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Moment from 'moment'
4 |
5 | /**
6 | * Filter input used to pass specific dates
7 | */
8 | class Day extends React.Component {
9 | static propTypes = {
10 | /** Format used to send/read the date from the API */
11 | format: PropTypes.string,
12 | /** Function called when value changed */
13 | onChange: PropTypes.func,
14 | /** Current filter value */
15 | value: PropTypes.instanceOf(Moment),
16 | }
17 |
18 | static defaultProps = {
19 | format: 'DD-MM-YYYY',
20 | value: Moment(),
21 | }
22 |
23 | /**
24 | * Handles clicking on previous day button.
25 | * Calls onChange with the previous day.
26 | * @param {MouseEvent} event onClick event
27 | */
28 | handlePreviousClick = (event) => {
29 | event.preventDefault()
30 | const newValue = this.props.value.clone().subtract(1, 'days')
31 | this.props.onChange(newValue)
32 | }
33 |
34 | /**
35 | * Handles clicking on next day button.
36 | * Calls onChange with the next day.
37 | * @param {MouseEvent} event onClick event
38 | */
39 | handleNextClick = (event) => {
40 | event.preventDefault()
41 | const newValue = this.props.value.clone().add(1, 'days')
42 | this.props.onChange(newValue)
43 | }
44 |
45 | render() {
46 | return (
47 |
48 |
51 |
{this.props.value.format('dddd MMMM Do YYYY')}
52 |
55 |
56 | )
57 | }
58 | }
59 |
60 | export default Day
61 |
--------------------------------------------------------------------------------
/src/filters/types/Search.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Filter input used to pass text values,
6 | * customised for a single search field
7 | */
8 | class Search extends React.Component {
9 | static propTypes = {
10 | /** Current value of filter */
11 | value: PropTypes.string,
12 | /** Function to call on change */
13 | onChange: PropTypes.func,
14 | /** ms to wait after typing stops to send request */
15 | updateDelay: PropTypes.number,
16 | }
17 |
18 | static defaultProps = {
19 | updateDelay: 400,
20 | value: '',
21 | }
22 |
23 | state = {
24 | currentValue: this.props.value || '',
25 | updateScheduled: null,
26 | }
27 |
28 | componentWillReceiveProps(nextProps, nextState) {
29 | if (nextProps.value !== this.props.value) {
30 | this.setState(() => ({currentValue: nextProps.value}))
31 | }
32 | }
33 |
34 | /**
35 | * Debounce call to get result until user has stopped typing
36 | */
37 | scheduleUpdate() {
38 | if (this.state.updateScheduled) {
39 | clearTimeout(this.state.updateScheduled)
40 | }
41 | this.setState(() => ({
42 | updateScheduled: setTimeout(
43 | // eslint-disable-next-line
44 | () => this.props.onChange(this.state.currentValue), this.props.updateDelay
45 | ),
46 | }))
47 | }
48 |
49 | /**
50 | * Handles value change and calls scheduleUpdate
51 | */
52 | handleValueChange = (event) => {
53 | const newValue = event.target.value
54 | this.setState(() => ({
55 | currentValue: newValue,
56 | }), this.scheduleUpdate())
57 | }
58 |
59 | render() {
60 | return (
61 |
68 | )
69 | }
70 | }
71 |
72 | export default Search
73 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Boolean.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { snapshotTest } from 'utils/tests'
3 | import { shallow } from 'enzyme'
4 | import Boolean from '../Boolean'
5 |
6 | jest.mock('../Choice', () => 'Choice')
7 |
8 | describe('Boolean', () => {
9 | const baseProps = {
10 | onChange: jest.fn(),
11 | value: 'True',
12 | }
13 | describe('Snapshots', () => {
14 | it('renders true', () => {
15 | snapshotTest()
16 | })
17 | it('renders false', () => {
18 | snapshotTest()
19 | })
20 | it('has custom labels', () => {
21 | snapshotTest()
22 | })
23 | })
24 | describe('Functions', () => {
25 | let instance
26 | beforeEach(() => {
27 | spyOn(baseProps, 'onChange')
28 | instance = shallow().instance()
29 | })
30 | it('handles value change', () => {
31 | const mockValue = {value: 'False', key: '1'}
32 | instance.onValueChange(mockValue)
33 | expect(baseProps.onChange).lastCalledWith('False')
34 | })
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Currency.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import Currency from '../Currency'
5 |
6 | describe('Currency', () => {
7 | const baseProps = {
8 | onChange: jest.fn(),
9 | value: '25.08',
10 | }
11 | describe('Snapshots', () => {
12 | it('renders default', () => {
13 | snapshotTest()
14 | })
15 | it('renders with custom currency symbol', () => {
16 | snapshotTest()
17 | })
18 | })
19 | describe('Functions', () => {
20 | it('handles value changing', () => {
21 | spyOn(baseProps, 'onChange')
22 | const instance = shallow().instance()
23 | instance.refs = {
24 | input: {
25 | value: '145.98',
26 | },
27 | }
28 | instance.handleValueChange()
29 | expect(baseProps.onChange).toHaveBeenCalledWith('145.98')
30 | })
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Date.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import DateComponent from '../Date'
5 |
6 | describe('Date', () => {
7 | const baseProps = {
8 | onChange: jest.fn(),
9 | fixedComparison: {value: 'fixed', label: 'Exact'},
10 | comparison: 'fixed',
11 | }
12 | describe('Snapshots', () => {
13 | it('renders default', () => {
14 | snapshotTest()
15 | })
16 | it('renders with relative comparison', () => {
17 | snapshotTest()
18 | })
19 | it('has custom input format', () => {
20 | snapshotTest()
21 | })
22 | it('has custom relative date options', () => {
23 | snapshotTest()
28 | })
29 | it('has null value', () => {
30 | snapshotTest()
31 | })
32 | })
33 | describe('Functions', () => {
34 | describe('handles fixed date changing', () => {
35 | let instance
36 | beforeEach(() => {
37 | spyOn(baseProps, 'onChange')
38 | instance = shallow().instance()
39 | })
40 | it('handles valid date', () => {
41 | const newValue = Date()
42 | instance.props.onChange(newValue)
43 | expect(baseProps.onChange).toHaveBeenCalledWith(newValue)
44 | })
45 | })
46 | describe('handles relative date changing', () => {
47 | let instance
48 | beforeEach(() => {
49 | spyOn(baseProps, 'onChange')
50 | instance = shallow().instance()
51 | })
52 | it('handles array passed', () => {
53 | const newValue = ['now']
54 | instance.handleDateRelativeChange(newValue)
55 | expect(baseProps.onChange).not.toHaveBeenCalled()
56 | })
57 | it('handles single value', () => {
58 | const newValue = 'now'
59 | instance.handleDateRelativeChange(newValue)
60 | expect(baseProps.onChange).toHaveBeenCalledWith(newValue)
61 | })
62 | })
63 | })
64 | })
65 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Day.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Moment from 'moment'
3 | import { shallow } from 'enzyme'
4 | import { snapshotTest } from 'utils/tests'
5 | import Day from '../Day'
6 |
7 | describe('Day', () => {
8 | const baseProps = {
9 | onChange: jest.fn(),
10 | value: Moment(),
11 | }
12 | describe('Snapshots', () => {
13 | it('renders default', () => {
14 | snapshotTest()
15 | })
16 | })
17 | describe('Functions', () => {
18 | let instance
19 | let mockEvent
20 | beforeEach(() => {
21 | spyOn(baseProps, 'onChange')
22 | instance = shallow().instance()
23 | mockEvent = {
24 | preventDefault: jasmine.createSpy(),
25 | }
26 | })
27 | it('handles previous click', () => {
28 | instance.handlePreviousClick(mockEvent)
29 | expect(mockEvent.preventDefault).toHaveBeenCalled()
30 | const expectedValue = instance.props.value.clone().subtract(1, 'days')
31 | expect(baseProps.onChange).toHaveBeenCalledWith(expectedValue)
32 | })
33 | it('handles next click', () => {
34 | instance.handleNextClick(mockEvent)
35 | expect(mockEvent.preventDefault).toHaveBeenCalled()
36 | const expectedValue = instance.props.value.clone().add(1, 'days')
37 | expect(baseProps.onChange).toHaveBeenCalledWith(expectedValue)
38 | })
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Month.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Moment from 'moment'
3 | import { shallow } from 'enzyme'
4 | import { snapshotTest } from 'utils/tests'
5 | import Month from '../Month'
6 |
7 | jest.mock('react-month-picker', () => 'MonthPicker')
8 |
9 | describe('Month', () => {
10 | const baseProps = {
11 | onChange: jest.fn(),
12 | value: Moment(),
13 | minYear: 2000,
14 | maxYear: 2050,
15 | }
16 | describe('Snapshots', () => {
17 | it('renders default', () => {
18 | snapshotTest()
19 | })
20 | it('has format', () => {
21 | snapshotTest()
22 | })
23 | it('has minYear', () => {
24 | snapshotTest()
25 | })
26 | it('has maxYear', () => {
27 | snapshotTest()
28 | })
29 | it('has null value', () => {
30 | snapshotTest()
31 | })
32 | it('has undefined value', () => {
33 | snapshotTest()
34 | })
35 | })
36 | describe('Lifecycle', () => {
37 | it('componentWillReceiveProps', () => {
38 | const newProps = {
39 | value: Moment('2018-02-01'),
40 | }
41 | const wrapper = shallow()
42 | wrapper.setProps(newProps)
43 | expect(wrapper.instance().state.textValue).toEqual(newProps.value.format(Month.defaultProps.format))
44 | })
45 | })
46 | describe('Functions', () => {
47 | let instance
48 | beforeEach(() => {
49 | spyOn(baseProps, 'onChange')
50 | instance = shallow().instance()
51 | })
52 | describe('handleTextChange', () => {
53 | it('handles valid month', () => {
54 | instance.refs = {
55 | textInput: {
56 | value: 'Jan 2016',
57 | },
58 | }
59 | const monthValue = Moment(instance.refs.textInput.value, instance.props.format, true) // strict=true
60 | instance.handleTextChange()
61 | expect(instance.state.textValue).toBe(instance.refs.textInput.value)
62 | expect(baseProps.onChange).toHaveBeenCalledWith(monthValue)
63 | })
64 | it('handles invalid month', () => {
65 | instance.refs = {
66 | textInput: {
67 | value: 'Jemima puddle duck',
68 | },
69 | }
70 | instance.handleTextChange()
71 | expect(instance.state.textValue).toBe(instance.refs.textInput.value)
72 | expect(baseProps.onChange).toHaveBeenCalledWith(null)
73 | })
74 | })
75 | it('handles click', () => {
76 | instance = shallow().instance()
77 | instance.refs = {
78 | monthPicker: {
79 | show: jest.fn(),
80 | },
81 | }
82 | spyOn(instance.refs.monthPicker, 'show')
83 | instance.handleClick()
84 | expect(instance.refs.monthPicker.show).toHaveBeenCalled()
85 | })
86 | it('handles value change', () => {
87 | const mockYear = Math.floor(Math.random() * 50) + 2000
88 | const mockMonth = Math.floor(Math.random() * 12)
89 | const date = Moment({year: mockYear, month: mockMonth})
90 | instance.handleValueChange(mockYear, mockMonth + 1)
91 | expect(instance.state.textValue).toBe(date.format(instance.props.format))
92 | const arg = baseProps.onChange.calls.mostRecent().args
93 | expect(arg.toString()).toEqual(date.toString())
94 | })
95 | })
96 | })
97 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/NumberSlider.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import NumberSlider from '../NumberSlider'
5 |
6 | describe('NumberSlider', () => {
7 | const baseProps = {
8 | onChange: jest.fn(),
9 | value: 50,
10 | precision: 1,
11 | }
12 | describe('Snapshots', () => {
13 | it('renders default', () => {
14 | snapshotTest()
15 | })
16 | it('custom min', () => {
17 | snapshotTest()
18 | })
19 | it('custom max', () => {
20 | snapshotTest()
21 | })
22 | })
23 | describe('Lifecycle', () => {
24 | it('componentWillReceiveProps', () => {
25 | const newProps = {
26 | value: 3128907234589789,
27 | }
28 | const wrapper = shallow()
29 | wrapper.setProps(newProps)
30 | expect(wrapper.instance().state.currentValue).toEqual(newProps.value)
31 | })
32 | })
33 | describe('Functions', () => {
34 | let instance
35 | beforeEach(() => {
36 | spyOn(baseProps, 'onChange')
37 | instance = shallow().instance()
38 | })
39 | it('handles slider value change', () => {
40 | const mockValue = Math.floor(Math.random() * 100) + 1
41 | const mockEvent = {
42 | target: {
43 | value: mockValue,
44 | },
45 | }
46 | instance.handleSliderValueChange(mockEvent)
47 | expect(instance.state.currentValue).toBe(mockValue)
48 | expect(baseProps.onChange).not.toHaveBeenCalled()
49 | })
50 | it('handles value change', () => {
51 | const mockValue = Math.floor(Math.random() * 100) + 1
52 | const mockEvent = {
53 | target: {
54 | value: mockValue,
55 | },
56 | }
57 | instance.handleValueChange(mockEvent)
58 | expect(instance.state.currentValue).toBe(mockValue)
59 | expect(baseProps.onChange).toHaveBeenCalledWith(mockValue.toFixed(1))
60 | })
61 | it('handles slider value finalise', () => {
62 | const mockValue = Math.floor(Math.random() * 100) + 1
63 | const mockEvent = {
64 | target: {
65 | value: mockValue,
66 | },
67 | }
68 | instance.handleSliderValueFinalise(mockEvent)
69 | expect(instance.state.currentValue).toBe(mockValue)
70 | expect(baseProps.onChange).toHaveBeenCalledWith(mockValue.toFixed(1))
71 | })
72 | it('handles logarithmic translation', () => {
73 | const mockValue = Math.floor(Math.random() * 100) + 1
74 | instance = shallow().instance()
75 | const actualValue = instance.getValueFromSlider(mockValue)
76 | expect(instance.getValueForSlider(actualValue)).toBeCloseTo(mockValue, 10)
77 | })
78 | })
79 | })
80 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/Search.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import Search from '../Search'
5 |
6 | jest.useFakeTimers()
7 |
8 | describe('Search', () => {
9 | const baseProps = {
10 | onChange: jest.fn(),
11 | value: 'Kittens',
12 | updateDelay: 1234,
13 | }
14 | describe('Snapshots', () => {
15 | it('renders default', () => {
16 | snapshotTest()
17 | })
18 | it('has new value', () => {
19 | snapshotTest(, {currentValue: 21})
20 | })
21 | })
22 | describe('Lifecycle', () => {
23 | it('componentWillReceiveProps', () => {
24 | const newProps = {
25 | value: 'Hello my fluffies 🐈🐈',
26 | }
27 | const wrapper = shallow()
28 | wrapper.setProps(newProps)
29 | expect(wrapper.instance().state.currentValue).toEqual(newProps.value)
30 | })
31 | })
32 | describe('Functions', () => {
33 | let instance
34 | beforeEach(() => {
35 | spyOn(baseProps, 'onChange')
36 | instance = shallow().instance()
37 | })
38 | it('handles value change', () => {
39 | const mockValue = 'Some search term'
40 | const mockEvent = {
41 | target: {
42 | value: mockValue,
43 | },
44 | }
45 | spyOn(instance, 'scheduleUpdate')
46 | instance.handleValueChange(mockEvent)
47 | expect(instance.state.currentValue).toBe(mockValue)
48 | expect(instance.scheduleUpdate).toHaveBeenCalled()
49 | expect(baseProps.onChange).not.toHaveBeenCalled()
50 | })
51 | it('schedules update', () => {
52 | instance.setState({currentValue: 'Bob', updateScheduled: null})
53 | instance.scheduleUpdate()
54 | expect(setTimeout).toHaveBeenCalledTimes(2)
55 | expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), baseProps.updateDelay)
56 | expect(typeof instance.state.updateScheduled).toBe('number')
57 | expect(instance.state.updateScheduled % 1).toBe(0)
58 | instance.scheduleUpdate()
59 | expect(clearTimeout).toHaveBeenCalledTimes(1)
60 | instance.setState({currentValue: 'Not Bob'})
61 | jest.runOnlyPendingTimers()
62 | expect(baseProps.onChange).toHaveBeenCalledWith('Not Bob')
63 | })
64 | })
65 | })
66 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/__snapshots__/Boolean.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Boolean Snapshots has custom labels 1`] = `
4 |
26 | `;
27 |
28 | exports[`Boolean Snapshots renders false 1`] = `
29 |
51 | `;
52 |
53 | exports[`Boolean Snapshots renders true 1`] = `
54 |
76 | `;
77 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/__snapshots__/Currency.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Currency Snapshots renders default 1`] = `
4 |
7 |
10 | $
11 |
12 |
18 |
21 | .00
22 |
23 |
24 | `;
25 |
26 | exports[`Currency Snapshots renders with custom currency symbol 1`] = `
27 |
30 |
33 | %
34 |
35 |
41 |
44 | .00
45 |
46 |
47 | `;
48 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/__snapshots__/Day.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Day Snapshots renders default 1`] = `
4 |
7 |
13 |
16 | Saturday July 15th 2017
17 |
18 |
24 |
25 | `;
26 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/__snapshots__/NumberSlider.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`NumberSlider Snapshots custom max 1`] = `
4 |
7 |
16 |
26 |
27 | `;
28 |
29 | exports[`NumberSlider Snapshots custom min 1`] = `
30 |
33 |
42 |
52 |
53 | `;
54 |
55 | exports[`NumberSlider Snapshots renders default 1`] = `
56 |
59 |
68 |
78 |
79 | `;
80 |
--------------------------------------------------------------------------------
/src/filters/types/__tests__/__snapshots__/Search.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Search Snapshots has new value 1`] = `
4 |
11 | `;
12 |
13 | exports[`Search Snapshots renders default 1`] = `
14 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/filters/types/index.js:
--------------------------------------------------------------------------------
1 | export Boolean from './Boolean'
2 | export Choice from './Choice'
3 | export Currency from './Currency'
4 | export Date from './Date'
5 | export Day from './Day'
6 | export Month from './Month'
7 | export NumberSlider from './NumberSlider'
8 | export Search from './Search'
9 |
--------------------------------------------------------------------------------
/src/filters/utils/FilterComparison.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Select from '../../utils/Select'
4 |
5 | class FilterComparison extends React.Component {
6 | static propTypes = {
7 | options: PropTypes.arrayOf(PropTypes.shape({
8 | label: PropTypes.string,
9 | value: Select.propTypes.value,
10 | })),
11 | value: Select.propTypes.value,
12 | onChange: PropTypes.func.isRequired,
13 | /** Object of custom react-select styles */
14 | selectStyles: PropTypes.object,
15 | }
16 |
17 | static defaultProps = {
18 | selectStyles: {},
19 | }
20 |
21 | handleChange = newValue => this.props.onChange(newValue.value)
22 |
23 | render() {
24 | const {options, value, selectStyles} = this.props
25 | return (
26 |
27 |
35 | )
36 | }
37 | }
38 |
39 | export default FilterComparison
40 |
--------------------------------------------------------------------------------
/src/filters/utils/FilterLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Component to render label for filters
6 | */
7 | class FilterLabel extends React.Component {
8 | static propTypes = {
9 | /** Text to render in the label */
10 | label: PropTypes.string.isRequired,
11 | }
12 | render() {
13 | return (
14 |
15 | )
16 | }
17 | }
18 |
19 | export default FilterLabel
20 |
--------------------------------------------------------------------------------
/src/filters/utils/RemoveFilter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Component to render button used to remove a filter
6 | */
7 | class RemoveFilter extends React.Component {
8 | static propTypes = {
9 | /** Function to be called to remove filter */
10 | onClick: PropTypes.func.isRequired,
11 | /** Icon to be rendered in button */
12 | Icon: PropTypes.element,
13 | }
14 |
15 | static defaultProps = {
16 | Icon: ⊖,
17 | }
18 |
19 | render() {
20 | const {Icon, onClick} = this.props
21 | return (
22 |
29 | )
30 | }
31 | }
32 |
33 | export default RemoveFilter
34 |
--------------------------------------------------------------------------------
/src/filters/utils/__mocks__/FilterComparison.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const MockFilterComparison = props => React.createElement('FilterComparison', props)
4 | const RealFilterComparison = require.requireActual('../FilterComparison').default
5 | /* eslint-disable-next-line */
6 | MockFilterComparison.propTypes = RealFilterComparison.propTypes
7 |
8 | export default MockFilterComparison
9 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/FilterComparison.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { shallow } from 'enzyme'
3 | import { snapshotTest } from 'utils/tests'
4 | import FilterComparison from '../FilterComparison'
5 |
6 | describe('FilterComparison', () => {
7 | const baseProps = {
8 | onChange: jest.fn(),
9 | value: 'test',
10 | options: [{value: 'test', label: 'Test This'}],
11 | }
12 | describe('Snapshots', () => {
13 | it('renders default', () => {
14 | snapshotTest()
15 | })
16 | })
17 | describe('Functions', () => {
18 | it('handles change', () => {
19 | spyOn(baseProps, 'onChange')
20 | const instance = shallow().instance()
21 | instance.handleChange({value: 42})
22 | expect(baseProps.onChange).toHaveBeenCalledWith(42)
23 | })
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/FilterLabel.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { snapshotTest } from 'utils/tests'
3 | import FilterLabel from '../FilterLabel'
4 |
5 | describe('FilterLabel', () => {
6 | const baseProps = {
7 | label: 'test',
8 | }
9 | describe('Snapshots', () => {
10 | it('renders default', () => {
11 | snapshotTest()
12 | })
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/RemoveFilter.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { snapshotTest } from 'utils/tests'
3 | import RemoveFilter from '../RemoveFilter'
4 |
5 | describe('RemoveFilter', () => {
6 | const baseProps = {
7 | onClick: jest.fn(),
8 | }
9 | describe('Snapshots', () => {
10 | it('renders default', () => {
11 | snapshotTest()
12 | })
13 | })
14 | })
15 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/__snapshots__/FilterComparison.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`FilterComparison Snapshots renders default 1`] = `
4 |
7 |
34 |
35 | `;
36 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/__snapshots__/FilterLabel.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`FilterLabel Snapshots renders default 1`] = `
4 |
10 | `;
11 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/__snapshots__/RemoveFilter.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`RemoveFilter Snapshots renders default 1`] = `
4 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/filters/utils/__tests__/__snapshots__/makeFilter.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`makeFilter Snapshots has a name 1`] = `
4 |
7 |
10 |
11 | 44 tests
12 |
13 |
17 |
24 |
25 | 44 tests
26 |
27 |
31 |
38 |
60 |
61 | 44 tests
62 |
63 |
67 |
74 |
96 |
97 | 44 tests
98 |
99 |
103 |
110 |
111 | 44 tests
112 |
113 |
84 |
85 | {`Showing page ${page} of ${Math.max(totalPages, 1)} out of ${count} total ${itemPluralName}.`}
86 |
87 |
88 | )
89 | } else {
90 | totals = (
91 |
92 |
93 | {LoadingIcon} Loading {itemPluralName} ...
94 |
95 |
96 | )
97 | }
98 | return (
99 |
100 |
101 | {prevLink}
102 | {pages}
103 | {nextLink}
104 |
105 | {totals}
106 |
Loading
9 | const defaultProps = {
10 | goToPage: jest.fn(),
11 | page: 1,
12 | perPage: 10,
13 | maxPages: 10,
14 | count: 100,
15 | itemPluralName: 'snakes',
16 | }
17 | describe('Snapshots', () => {
18 | it('has one page', () => {
19 | snapshotTest()
20 | })
21 | it('is on first page', () => {
22 | snapshotTest()
23 | })
24 | it('is on last page', () => {
25 | snapshotTest()
26 | })
27 | it('is loading', () => {
28 | snapshotTest()
29 | })
30 | it('has loading icon', () => {
31 | snapshotTest()
32 | })
33 | it('has more than maxPages', () => {
34 | snapshotTest()
35 | })
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/src/pagination/__tests__/__snapshots__/Page.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Page Snapshots has label 1`] = `
4 |
8 |
12 | New page please
13 |
14 |
15 | `;
16 |
17 | exports[`Page Snapshots has page number 1`] = `
18 |
22 |
26 | 4
27 |
28 |
29 | `;
30 |
31 | exports[`Page Snapshots is active 1`] = `
32 |
36 |
40 | 4
41 |
42 |
43 | `;
44 |
45 | exports[`Page Snapshots is active and disabled 1`] = `
46 |
50 |
54 | 4
55 |
56 |
57 | `;
58 |
59 | exports[`Page Snapshots is disabled 1`] = `
60 |
64 |
68 | 4
69 |
70 |
71 | `;
72 |
--------------------------------------------------------------------------------
/src/pagination/index.js:
--------------------------------------------------------------------------------
1 | export Pagination from './Pagination'
2 |
--------------------------------------------------------------------------------
/src/readme.md:
--------------------------------------------------------------------------------
1 | # Instructions for porting over object-list from workforce
2 |
3 | ## Snapshot testing
4 | Insetad of
5 | ```javascript
6 | import { snapshotTest } from 'utils/tests'
7 |
8 |
9 | it('snapshots!', () => {
10 | snapshotTest(This works!
)
11 | })
12 | ```
13 | Use
14 | ```javascript
15 | import { snapshotTest } from 'utils/tests'
16 | it('snapshots!', () => {
17 | snapshotTest(This works!
)
18 | })
19 | ```
20 |
21 | ## Generate CSS styling
22 | Recommend to import css styles into the `index.js` file
23 | ```javascript
24 | import './api-list.sass'
25 | ```
26 | This will generate the complete styles in the `dist` folder when running `yarn build`
27 |
--------------------------------------------------------------------------------
/src/resources/colours.sass:
--------------------------------------------------------------------------------
1 | $link-color: blue
2 | $primary-button-color: #337ab7
3 | $global-background-color: white
4 | $button-text-color: rgb(70, 70, 70)
5 | $placeholder-color: #aaa
6 | $dropdown-hover-color: #f5f5f5
7 | $dropdown-selected-color: #f5f5f5
8 | $text-muted-color: #999
9 | $icon-color: black
10 | $slider-shadow-dark-color: #555
11 | $slider-shadow-light-color: #333
12 | $active-colour: #337ab7
13 | $nav-link-colour: #337ab7
14 | $nav-active-colour: #6da5d6
15 | $nav-color-disabled: rgb(164, 164, 164)
16 | $table-row-background: rgba(0, 0, 0, 0.02)
17 | $table-row-active-color: rgba(0, 0 , 0, 0.05)
18 | $border-color: rgb(204, 204, 204)
19 | $table-border-color: rgb(236,238,239)
20 | $border-color-hover: rgb(234, 234, 234)
21 | $error_message_color: rgb(181, 28, 28)
22 | $error_message_background_color: $global-background-color
23 |
--------------------------------------------------------------------------------
/src/resources/dark-table.sass:
--------------------------------------------------------------------------------
1 | $roundedEdgeRadius: 0.25rem
2 | $darkBackgroundColour: #4A4A4A
3 | $componentBackgroundColour: #F2F2F2
4 |
5 | .objectlist-table
6 | box-shadow: 0 0.05rem 0.2rem 0.05rem rgba(0,0,0,0.3)
7 | border-radius: $roundedEdgeRadius
8 | margin-bottom: 4px
9 |
10 | .objectlist-table__th
11 | background-color: $darkBackgroundColour
12 | color: white
13 | border-bottom: none
14 | font-weight: normal
15 |
16 | .objectlist-table__th:first-child
17 | border-top-left-radius: $roundedEdgeRadius
18 |
19 | .objectlist-table__th:last-child
20 | border-top-right-radius: $roundedEdgeRadius
21 |
22 | .objectlist-table__row:nth-of-type(even)
23 | background-color: white
24 |
25 | .objectlist-table__row:nth-of-type(even)
26 | background-color: $componentBackgroundColour
27 |
28 | .objectlist-table__td, .objectlist-table__th
29 | border-top: none
30 | text-align: center
31 |
--------------------------------------------------------------------------------
/src/resources/input-range.sass:
--------------------------------------------------------------------------------
1 | @import 'colours'
2 |
3 | input[type=range]
4 | -webkit-appearance: none
5 |
6 | input[type=range]:focus
7 | outline: none
8 |
9 | input[type=range]::-webkit-slider-runnable-track
10 | height: 8.4px
11 | cursor: pointer
12 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
13 | background: $global-background-color
14 | border-radius: 1.3px
15 | border: 0px solid #010101
16 |
17 | input[type=range]::-webkit-slider-thumb
18 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
19 | border: 1px solid rgba(0, 0, 0, 0)
20 | height: 16px
21 | width: 9px
22 | border-radius: 2px
23 | background: $global-background-color
24 | cursor: pointer
25 | -webkit-appearance: none
26 | margin-top: -3.8px
27 |
28 | input[type=range]:focus::-webkit-slider-runnable-track
29 | background: $global-background-color
30 |
31 | input[type=range]::-moz-range-track
32 | height: 8.4px
33 | cursor: pointer
34 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
35 | background: $global-background-color
36 | border-radius: 1.3px
37 | border: 0px solid #010101
38 |
39 | input[type=range]::-moz-range-thumb
40 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
41 | border: 1px solid rgba(0, 0, 0, 0)
42 | height: 16px
43 | width: 9px
44 | border-radius: 2px
45 | background: #ffffff
46 | cursor: pointer
47 |
48 | input[type=range]::-ms-track
49 | height: 8.4px
50 | cursor: pointer
51 | background: transparent
52 | border-color: transparent
53 | color: transparent
54 |
55 | input[type=range]::-ms-fill-lower
56 | background: $global-background-color
57 | border: 0px solid #010101
58 | border-radius: 2.6px
59 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
60 |
61 | input[type=range]::-ms-fill-upper
62 | background: $global-background-color
63 | border: 0px solid #010101
64 | border-radius: 2.6px
65 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
66 |
67 | input[type=range]::-ms-thumb
68 | box-shadow: 0px 0px 1px $slider-shadow-dark-color, 0px 0px 0px $slider-shadow-light-color
69 | border: 1px solid rgba(0, 0, 0, 0)
70 | height: 16px
71 | width: 9px
72 | border-radius: 2px
73 | background: #ffffff
74 | cursor: pointer
75 | height: 8.4px
76 |
77 | input[type=range]:focus::-ms-fill-lower
78 | background: $global-background-color
79 |
80 | input[type=range]:focus::-ms-fill-upper
81 | background: $global-background-color
82 |
--------------------------------------------------------------------------------
/src/types/AllSelector.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Checkbox with a callback function for selecting all elements in an
6 | * api list
7 | */
8 | class AllSelector extends React.Component {
9 | static propTypes = {
10 | /** number of items in the list selected */
11 | numSelected: PropTypes.number,
12 | /** number of items in the list */
13 | total: PropTypes.number,
14 | /** callback function passed down from the objectlist to select all items in a list */
15 | selectAll: PropTypes.func,
16 | /** callback function passed down from the objectlist to deselect all items in a list */
17 | deselectAll: PropTypes.func,
18 | }
19 |
20 | static defaultProps = {
21 | numSelected: 0,
22 | total: 0,
23 | }
24 |
25 | /**
26 | * Callback function executed by the api list
27 | * to select every element in the table
28 | */
29 | handleChange = () => {
30 | const {numSelected, selectAll, deselectAll} = this.props
31 | if (numSelected > 0) {
32 | deselectAll()
33 | } else {
34 | selectAll()
35 | }
36 | }
37 |
38 | __setIndeterminate = (numSelected, total) => {
39 | this.checkbox.indeterminate = (numSelected > 0 && numSelected < total)
40 | }
41 |
42 | componentDidMount() {
43 | const {numSelected, total} = this.props
44 | this.__setIndeterminate(numSelected, total)
45 | }
46 |
47 | componentDidUpdate() {
48 | const {numSelected, total} = this.props
49 | this.__setIndeterminate(numSelected, total)
50 | }
51 |
52 | render() {
53 | const {numSelected, total} = this.props
54 | return (
55 | 0 && numSelected >= total}
59 | onChange={this.handleChange}
60 | ref={elem => { this.checkbox = elem }}
61 | />
62 | )
63 | }
64 | }
65 |
66 | export default AllSelector
67 |
--------------------------------------------------------------------------------
/src/types/BooleanType.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import ClassNames from 'classnames'
4 |
5 | /**
6 | * Display a green checkmark or red cross depending on whether
7 | * true or false is passed to the component
8 | */
9 | class BooleanType extends React.Component {
10 | static propTypes = {
11 | /** boolean condition to visually present on the screen */
12 | condition: PropTypes.bool,
13 | }
14 |
15 | static defaultProps = {
16 | condition: false,
17 | }
18 |
19 | render() {
20 | return (
21 |
22 | )
23 | }
24 | }
25 |
26 | export default BooleanType
27 |
--------------------------------------------------------------------------------
/src/types/Currency.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Empty from './Empty'
4 | import { currency } from './utils'
5 |
6 | /**
7 | * Display a number provided in a currency format
8 | */
9 | class Currency extends React.Component {
10 | static propTypes = {
11 | /** the value as a string or number to format as a currency */
12 | value: PropTypes.oneOfType([
13 | PropTypes.string,
14 | PropTypes.number,
15 | ]),
16 | }
17 |
18 | render() {
19 | if (typeof this.props.value === 'undefined' || this.props.value === null) {
20 | return ()
21 | }
22 | return ({currency(this.props.value)})
23 | }
24 | }
25 |
26 | export default Currency
27 |
--------------------------------------------------------------------------------
/src/types/DatePart.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import DateTime from './DateTime'
3 |
4 | import {
5 | DATE_FORMAT,
6 | } from '../utils'
7 |
8 | /**
9 | * Presents date elements or timestamps in human readable format
10 | */
11 | class DatePart extends React.Component {
12 | static defaultProps = {
13 | outputFormat: DATE_FORMAT,
14 | }
15 | render() {
16 | return (
17 |
20 | )
21 | }
22 | }
23 |
24 | export default DatePart
25 |
--------------------------------------------------------------------------------
/src/types/DateTime.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Moment from 'moment'
3 | import PropTypes from 'prop-types'
4 |
5 | import {
6 | DATETIME_FORMAT,
7 | } from '../utils'
8 |
9 | /**
10 | * Presents timestamps in a human readable format
11 | * where by default the date and time components are shown
12 | */
13 | class DateTime extends React.Component {
14 | static propTypes = {
15 | outputFormat: PropTypes.string,
16 | value: PropTypes.oneOfType([
17 | PropTypes.array, // array of dates, each formatted as a string
18 | PropTypes.object, // an object containing "start" and "end" dates as properties of the object. This is the same as providing two dates in array format
19 | PropTypes.string, // a single date formatted as a string
20 | ]),
21 | empty: PropTypes.string,
22 | /** the separator used when multiple dates are provided */
23 | seperator: PropTypes.string,
24 | }
25 | static defaultProps = {
26 | outputFormat: DATETIME_FORMAT,
27 | empty: '-',
28 | seperator: '-',
29 | value: null,
30 | dateOnly: false,
31 | }
32 | /**
33 | * Return date in specififed format if valid
34 | * @param {Object} date Moment date object to be formatted
35 | * @return {string} Formatted date string or empty
36 | */
37 | formatDateTime(date) {
38 | date = Moment.utc(date)
39 | if (date.isValid()) {
40 | return date.local().format(this.props.outputFormat)
41 | }
42 | return this.props.empty
43 | }
44 | /**
45 | * Return date range with dates formatted as specified
46 | * @param {Array} dates List of dates to be formatted
47 | * @return {string} Formatted date string
48 | */
49 | formatRange(dates) {
50 | let retString = ''
51 | dates.map((date, index) => {
52 | const dateString = `${this.formatDateTime(date)}`
53 | if (retString.search(dateString) === -1) {
54 | if (index > 0) {
55 | retString += ` ${this.props.seperator} `
56 | }
57 | retString += dateString
58 | }
59 | })
60 | return retString
61 | }
62 | render() {
63 | if (this.props.value) {
64 | let inner
65 | switch (typeof this.props.value) {
66 | case 'object':
67 | if (Array.isArray(this.props.value)) {
68 | inner = this.formatRange(this.props.value)
69 | } else if ('start' in this.props.value && 'end' in this.props.value) {
70 | inner = this.formatRange([this.props.value.start, this.props.value.end])
71 | }
72 | break
73 | case 'string':
74 | inner = `${this.formatDateTime(this.props.value)}`
75 | break
76 | }
77 | if (inner) {
78 | return ({inner}
)
79 | }
80 | }
81 | return {this.props.empty}
82 | }
83 | }
84 |
85 | export default DateTime
86 |
--------------------------------------------------------------------------------
/src/types/Empty.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Returns a span tag representing an empty element/content on the page
6 | */
7 | class Empty extends React.Component {
8 | static defaultProps = {
9 | emptyText: '-',
10 | }
11 | static propTypes = {
12 | emptyText: PropTypes.string,
13 | }
14 | render() {
15 | return ({this.props.emptyText})
16 | }
17 | }
18 |
19 | export default Empty
20 |
--------------------------------------------------------------------------------
/src/types/Links.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | /**
5 | * Provided links to edit/view the current item (usually inside an objectlist)
6 | * generate the links required
7 | */
8 | class Links extends React.Component {
9 | static propTypes = {
10 | viewUrl: PropTypes.string,
11 | editUrl: PropTypes.string,
12 | extra: PropTypes.arrayOf(PropTypes.shape({
13 | url: PropTypes.string,
14 | text: PropTypes.string,
15 | })),
16 | }
17 |
18 | static defaultProps = {
19 | extra: [],
20 | }
21 |
22 | render() {
23 | const links = []
24 | if (this.props.viewUrl) {
25 | links.push(
26 |
31 | View
32 |
33 | )
34 | }
35 | if (this.props.editUrl) {
36 | if (links.length) {
37 | links.push( )
38 | }
39 | links.push(
40 |
45 | Edit
46 |
47 | )
48 | }
49 | this.props.extra.forEach(({url, text}, i) => {
50 | links.push(
51 |
56 | {text}
57 |
58 | )
59 | })
60 | return (
61 |
64 | {links}
65 |
66 | )
67 | }
68 | }
69 |
70 | export default Links
71 |
--------------------------------------------------------------------------------
/src/types/RelativeDate.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Moment from 'moment'
4 | import DatePart from './DatePart'
5 | import Empty from './Empty'
6 | import {SHORTDATE_FORMAT} from '../utils'
7 |
8 | /**
9 | * Displays a date relative to the current time eg. "4 days ago" or "in 3 days"
10 | * alongside the date passed in
11 | */
12 | class RelativeDate extends React.Component {
13 | static propTypes = {
14 | value: PropTypes.string,
15 | /** display the date passed in as well as the relative time period */
16 | showDate: PropTypes.bool,
17 | }
18 |
19 | static defaultProps = {
20 | showDate: true,
21 | }
22 |
23 | render() {
24 | const date = Moment(this.props.value)
25 | const isValid = date.isValid()
26 | if (isValid) {
27 | return (
28 |
29 |
30 | {Moment(this.props.value).fromNow()}
31 |
32 | {this.props.showDate && (
33 |
34 |
35 |
36 | )}
37 |
23 |
24 | {Moment(this.props.value).fromNow()}
25 |
26 |
27 |
28 |
29 |
52 |
53 | {identifier && {identifier} }
54 | {(text && text.length) ? text : }
55 |
56 | {subtext &&
{subtext}}
57 |
7 | -
8 |
9 | `;
10 |
11 | exports[`DateTime Snapshots parses dates 2`] = `
12 |
15 | No content
16 |
17 | `;
18 |
19 | exports[`DateTime Snapshots parses dates 3`] = `
20 |
23 | -
24 |
25 | `;
26 |
27 | exports[`DateTime Snapshots parses dates 4`] = `
28 |
31 | -
32 |
33 | `;
34 |
35 | exports[`DateTime Snapshots parses dates 5`] = `
36 |
37 | 07/02/2018
38 |
39 | `;
40 |
41 | exports[`DateTime Snapshots parses dates 6`] = `
42 |
43 | 08/02/2018
44 |
45 | `;
46 |
47 | exports[`DateTime Snapshots parses dates 7`] = `
48 |
49 | 1st Jan 2017 10:00am - 1st Feb 2017 10:00am
50 |
51 | `;
52 |
53 | exports[`DateTime Snapshots parses dates 8`] = `
54 |
55 | 1st Jan 2017 10:00am - 1st Feb 2017 10:00am
56 |
57 | `;
58 |
59 | exports[`DateTime Snapshots parses dates 9`] = `
60 |
61 | 1st Jan 2017 10:00am to 1st Feb 2017 10:00am
62 |
63 | `;
64 |
--------------------------------------------------------------------------------
/src/types/__tests__/__snapshots__/Empty.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Empty type snapshot test 1`] = `
4 |
7 | -
8 |
9 | `;
10 |
11 | exports[`Empty type snapshot test 2`] = `
12 |
15 | test
16 |
17 | `;
18 |
--------------------------------------------------------------------------------
/src/types/__tests__/__snapshots__/Links.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Links type snapshot test 1`] = `
4 |
7 | `;
8 |
9 | exports[`Links type snapshot test 2`] = `
10 |
20 | `;
21 |
22 | exports[`Links type snapshot test 3`] = `
23 |
33 | `;
34 |
35 | exports[`Links type snapshot test 4`] = `
36 |
55 | `;
56 |
--------------------------------------------------------------------------------
/src/types/__tests__/__snapshots__/RelativeDate.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`RelativeDate type snapshot tests 1`] = `
4 |
5 |
6 | a few seconds ago
7 |
8 |
11 |
15 |
16 |
21 |
22 | in 7 months
23 |
24 |
27 |
31 |
32 |
37 |
38 | in 7 months
39 |
40 |
45 |
46 | in 7 months
47 |
48 |
51 |
55 |
56 |
21 |
22 | TestModel 1
23 |
24 |
29 |
30 | default
31 |
32 |
37 |
38 | TestModel 1
39 |
40 |
53 |
54 |
57 | 123
58 |
59 |
60 | abc
61 |
62 |
67 |
68 |
71 | 123
72 |
73 |
74 | abc
75 |
76 |
79 | some important detail
80 |
81 |
94 |
95 |
98 | TestModel
99 |
100 |
101 | TestModel
102 |
103 |
106 | TestModel
107 |
108 |
113 |
114 |
117 | -
118 |
119 |
120 |
11 |
12 | {error.message}
13 |
14 | )
15 | } else {
16 | return null
17 | }
18 | }
19 | }
20 |
21 | export default ErrorMessage
22 |
--------------------------------------------------------------------------------
/src/utils/Select.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react'
3 | import { withInfo } from '@storybook/addon-info'
4 |
5 | import Select from './Select'
6 |
7 | storiesOf('object-list/Utils/Select', module)
8 | .addDecorator((story, context) => withInfo(
9 | 'Wrapper for react-select to ensure consistency'
10 | )(story)(context))
11 | .add('has custom menu style', () => (
12 |
13 | ))
14 | .add('has custom menu container style', () => (
15 |
16 | ))
17 |
--------------------------------------------------------------------------------
/src/utils/__snapshots__/Select.stories.storyshot:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Storyshots object-list/Utils/Select has custom menu container style 1`] = `
4 |
16 | `;
17 |
18 | exports[`Storyshots object-list/Utils/Select has custom menu style 1`] = `
19 |
31 | `;
32 |
--------------------------------------------------------------------------------
/src/utils/__snapshots__/loading.stories.storyshot:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Storyshots object-list/Utils/Loading Icon loading 1`] = `
4 |
5 |
6 |
7 | red
8 | :
9 |
10 |
11 |
19 |
20 |
21 |
22 |
23 | blue
24 | :
25 |
26 |
27 |
35 |
36 |
37 |
38 |
39 | yellow
40 | :
41 |
42 |
43 |
51 |
52 |
53 |
54 |
55 | green
56 | :
57 |
58 |
59 |
67 |
68 |
69 |
70 |
71 | purple
72 | :
73 |
74 |
75 |
83 |
84 |
85 |
86 |
87 | grey
88 | :
89 |
90 |
91 |
99 |
100 |
101 |
102 |
103 | :
104 |
105 |
106 |
110 |
111 |
112 |
9 |
12 |
13 | Testing
14 |
15 |
16 | `;
17 |
--------------------------------------------------------------------------------
/src/utils/__tests__/proptypes.test.js:
--------------------------------------------------------------------------------
1 | import {SELECTION_TYPE} from '../proptypes'
2 |
3 | describe('custom proptypes', () => {
4 | it('correctly detects selection proptype', () => {
5 | const selection = {
6 | 1: true,
7 | 2: true,
8 | 3: false,
9 | }
10 |
11 | expect(SELECTION_TYPE({selection}, 'selection', 'ComponentName')).toBe(undefined)
12 | })
13 | it('handles invalid selection props', () => {
14 | const selection = [1, 2, 3]
15 | expect(SELECTION_TYPE({selection}, 'selection', 'ComponentName')).toEqual(expect.any(Error))
16 | })
17 | it('hanldes a missing prop when required', () => {
18 | expect(SELECTION_TYPE.isRequired({}, 'selection', 'ComponentName')).toEqual(expect.any(Error))
19 | })
20 | })
21 |
--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
1 | const DATE_FORMAT = 'Do MMM YYYY'
2 | const DATETIME_FORMAT = `${DATE_FORMAT} h:mma`
3 | const SHORTDATE_FORMAT = 'DD/MM/YYYY'
4 | const SHORTDATETIME_FORMAT = `${SHORTDATE_FORMAT} h:mma`
5 | const API_DATE_FORMAT = 'YYYY-MM-DD'
6 | const allowedLookupExpressions = ['lt', 'gt', 'lte', 'gte']
7 |
8 | export {
9 | DATE_FORMAT,
10 | DATETIME_FORMAT,
11 | SHORTDATE_FORMAT,
12 | SHORTDATETIME_FORMAT,
13 | API_DATE_FORMAT,
14 | allowedLookupExpressions,
15 | }
16 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export ErrorMessage from './ErrorMessage'
2 |
3 | export {
4 | DATE_FORMAT,
5 | DATETIME_FORMAT,
6 | SHORTDATE_FORMAT,
7 | SHORTDATETIME_FORMAT,
8 | API_DATE_FORMAT,
9 | allowedLookupExpressions,
10 | } from './constants'
11 | export {
12 | COLUMN_TYPE,
13 | COLUMN_BASE_TYPE,
14 | FILTER_BASE_TYPE,
15 | META_TYPE,
16 | STATUS_TYPE,
17 | STATUS_CHOICES,
18 | ALL_SELECTED,
19 | SELECTION_TYPE,
20 | } from './proptypes'
21 | export {
22 | getVisibleColumns,
23 | setColumnLabels,
24 | sortByName,
25 | getLeafColumns,
26 | makeSelectStyles,
27 | } from './functions'
28 |
--------------------------------------------------------------------------------
/src/utils/proptypes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 |
3 | const STATUS_CHOICES = {
4 | loading: 'loading',
5 | error: 'error',
6 | done: 'done',
7 | }
8 | const STATUS_TYPE = PropTypes.oneOf(Object.values(STATUS_CHOICES))
9 |
10 | const ALL_SELECTED = 'all'
11 | function selectionTypeValidator(isRequired) {
12 | return function(props, propName, componentName) {
13 | const value = props[propName]
14 | if (isRequired && (value === null || value === undefined)) {
15 | return new Error(`Missing prop \`${propName}\`
16 | supplied to \`${componentName}\` expected one of ['${ALL_SELECTED}', obj]`)
17 | }
18 | let validObject = true
19 | if (typeof value === 'object') {
20 | validObject = Object.entries(value).every(
21 | ([key, value]) => (typeof key === 'number' || 'string') && typeof value === 'boolean')
22 | } else {
23 | validObject = false
24 | }
25 |
26 | if (value !== ALL_SELECTED && !validObject) {
27 | return new Error(`Invalid prop \`${propName}\` of \`${value}\`
28 | supplied to \`${componentName}\` expected one of ['${ALL_SELECTED}', obj]`)
29 | }
30 | }
31 | }
32 | const SELECTION_TYPE = selectionTypeValidator(false)
33 | SELECTION_TYPE.isRequired = selectionTypeValidator(true)
34 |
35 | const COLUMN_BASE_TYPE = {
36 | fieldKey: PropTypes.string, // used to uniquely identify this column
37 | dataKey: PropTypes.string, // used to access the data inside the data object
38 | header: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
39 | item: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
40 | sortKey: PropTypes.string,
41 | optional: PropTypes.bool,
42 | /* string or function of a data row returning a string to add to row classes */
43 | rowClass: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
44 | }
45 |
46 | const COLUMN_TYPE = PropTypes.shape(COLUMN_BASE_TYPE)
47 |
48 | const FILTER_BASE_TYPE = {
49 | /** Name of filter, used to render filter */
50 | name: PropTypes.string,
51 | /** Identifier key for filter */
52 | filterKey: PropTypes.string,
53 | /** If true, indicates the filter cannot be removed */
54 | permanent: PropTypes.bool,
55 | }
56 |
57 | const META_TYPE = PropTypes.shape({
58 | /** the current sortkeys applied using {key: asc_desc_bool } eg. {name: true} for ascending */
59 | sortKeys: PropTypes.arrayOf(PropTypes.object),
60 | /** current page highlighted on the pagination */
61 | currentPage: PropTypes.number,
62 | /** the maximum number of items shown on a page */
63 | perPage: PropTypes.number,
64 | /** the keys of the optional columns that are currently being displayed */
65 | extraColumns: PropTypes.arrayOf(PropTypes.string),
66 | /** the total number of items in the dataset if only displaying a subset */
67 | totalCount: PropTypes.number,
68 | /** the list of items currently selected */
69 | selection: PropTypes.array,
70 | })
71 |
72 | export {
73 | COLUMN_TYPE,
74 | COLUMN_BASE_TYPE,
75 | FILTER_BASE_TYPE,
76 | META_TYPE,
77 | STATUS_TYPE,
78 | STATUS_CHOICES,
79 | SELECTION_TYPE,
80 | ALL_SELECTED,
81 | }
82 |
--------------------------------------------------------------------------------
/utils/tests.js:
--------------------------------------------------------------------------------
1 | import renderer from 'react-test-renderer'
2 |
3 | /**
4 | * Helper function to run a snapshot test on an element
5 | * @param {Object} elem React Component with props i.e.
6 | * @param {Object} [newState=null] (Optional) State to set component to for snapshot
7 | */
8 | export function snapshotTest(elem, newState = null) {
9 | const rendered = renderer.create(elem)
10 | if (newState) {
11 | const instance = rendered.getInstance()
12 | instance.setState({
13 | ...instance.state,
14 | ...newState,
15 | })
16 | }
17 | const tree = rendered.toJSON()
18 | expect(tree).toMatchSnapshot()
19 | }
20 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
4 | const PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin')
5 |
6 | const extractSass = new ExtractTextPlugin({
7 | filename: '[name].[contenthash].css',
8 | })
9 |
10 | module.exports = {
11 | entry: {
12 | main: path.resolve('src', 'index.js'),
13 | filters: path.resolve('src', 'filters', 'index.js'),
14 | renderers: path.resolve('src', 'data-renderers', 'index.js'),
15 | cells: path.resolve('src', 'types', 'index.js'),
16 | utils: path.resolve('src', 'utils', 'index.js'),
17 | icons: path.resolve('src', 'icons', 'index.js'),
18 | },
19 | output: {
20 | path: path.resolve(__dirname),
21 | filename: '[name].js',
22 | libraryTarget: 'umd',
23 | library: 'react-object-list',
24 | },
25 | module: {
26 | rules: [{
27 | test: /\.js$/,
28 | exclude: /node_modules/,
29 | use: {
30 | loader: 'babel-loader',
31 | },
32 | }, {
33 | test: /\.(scss|sass)$/,
34 | exclude: /node_modules/,
35 | use: extractSass.extract({
36 | use: [{
37 | loader: 'css-loader', // translates CSS into CommonJS
38 | options: {
39 | minimize: true,
40 | },
41 | }, {
42 | loader: 'resolve-url-loader', // resolve relative urls inside the css files
43 | }, {
44 | loader: 'sass-loader?sourceMap', // compiles Sass to CSS
45 | }],
46 | }),
47 | }, {
48 | test: /\.(woff2?|eot|ttf|svg|otf)(\?.+)?$/i,
49 | use: [
50 | {
51 | loader: 'url-loader',
52 | options: {
53 | limit: 10000,
54 | name: '[name].[hash].[ext]',
55 | },
56 | },
57 | ],
58 | }],
59 | },
60 | plugins: [
61 | extractSass,
62 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
63 | new PeerDepsExternalsPlugin(),
64 | ],
65 | }
66 |
--------------------------------------------------------------------------------