@@ -76,7 +72,6 @@ exports[`HeaderField Snapshots renders with empty header 1`] = `
exports[`HeaderField Snapshots renders with fa-sort icon 1`] = `
diff --git a/src/data-renderers/__tests__/__snapshots__/Table.test.js.snap b/src/data-renderers/__tests__/__snapshots__/Table.test.js.snap
index b663800..4bf4ec7 100644
--- a/src/data-renderers/__tests__/__snapshots__/Table.test.js.snap
+++ b/src/data-renderers/__tests__/__snapshots__/Table.test.js.snap
@@ -20,15 +20,11 @@ exports[`Table Snapshots can click on items 1`] = `
>
@@ -247,15 +237,11 @@ exports[`Table Snapshots can select items 1`] = `
>
@@ -469,9 +449,6 @@ exports[`Table Snapshots renders default 1`] = `
>
diff --git a/src/data-renderers/__tests__/__snapshots__/TableHeader.test.js.snap b/src/data-renderers/__tests__/__snapshots__/TableHeader.test.js.snap
index a2097cb..8f55312 100644
--- a/src/data-renderers/__tests__/__snapshots__/TableHeader.test.js.snap
+++ b/src/data-renderers/__tests__/__snapshots__/TableHeader.test.js.snap
@@ -3,55 +3,18 @@
exports[`Table Header Snapshots renders correctly 1`] = `
-
+ HeaderField
|
`;
exports[`Table Header Snapshots renders correctly with multiple header items 1`] = `
-
-
+ HeaderField
+ HeaderField
|
`;
diff --git a/src/data-renderers/index.js b/src/data-renderers/index.js
index ead5128..f370469 100644
--- a/src/data-renderers/index.js
+++ b/src/data-renderers/index.js
@@ -1,2 +1,2 @@
-export Table from './Table'
-export List from './List'
+export {default as Table} from './Table'
+export { default as List } from './List'
diff --git a/src/data-renderers/table.stories.js b/src/data-renderers/table.stories.js
index c42da21..735b702 100644
--- a/src/data-renderers/table.stories.js
+++ b/src/data-renderers/table.stories.js
@@ -1,6 +1,6 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
-import { withInfo } from '@storybook/addon-info'
+import { withInfo } from '@storybook/addon-docs'
import { action } from '@storybook/addon-actions'
import {
diff --git a/src/filters/CurrencyFilter.js b/src/filters/CurrencyFilter.js
index 61b23b0..db791d1 100644
--- a/src/filters/CurrencyFilter.js
+++ b/src/filters/CurrencyFilter.js
@@ -1,5 +1,5 @@
-import {Currency} from './types'
-import {makeFilter} from './utils'
+import { Currency } from './types'
+import { makeFilter } from './utils'
/**
* Filter used to filter by a monetary value
diff --git a/src/filters/filters.stories.js b/src/filters/filters.stories.js
index d4cf875..ab93e85 100644
--- a/src/filters/filters.stories.js
+++ b/src/filters/filters.stories.js
@@ -1,7 +1,7 @@
import React from 'react'
import Moment from 'moment'
import { storiesOf } from '@storybook/react'
-import { withInfo } from '@storybook/addon-info'
+import { withInfo } from '@storybook/addon-docs'
import { action } from '@storybook/addon-actions'
import {
@@ -25,9 +25,6 @@ const baseProps = {
}
storiesOf('object-list/Filters', module)
- .addDecorator((story, context) => withInfo(
- 'Components used to configure filtering on the api list'
- )(story)(context))
.add('BooleanFilter', () => (
{
- this.props.onChange(this.refs.input.value)
- }
-
- render() {
- const {value, currencySymbol} = this.props
- return (
-
- {currencySymbol}
-
- .00
-
- )
- }
-}
-
-export default Currency
diff --git a/src/filters/types/Currency.tsx b/src/filters/types/Currency.tsx
new file mode 100644
index 0000000..a425a7f
--- /dev/null
+++ b/src/filters/types/Currency.tsx
@@ -0,0 +1,52 @@
+import React, { useState, SyntheticEvent } from 'react'
+import { useLocaleNumber } from '../../hooks'
+import type { CurrencyFilterType } from '../../types'
+
+/**
+ * Filter input used to pass currency values
+ */
+
+const Currency: React.FC = ({ value, currencySymbol, onChange }) => {
+ const { format } = useLocaleNumber({ currency: true, currencyFormat: currencySymbol })
+
+ const [editing, setEditing] = useState(false)
+ const [input, setInput] = useState(value)
+
+ function handleOnInputChange(event: SyntheticEvent) {
+ const target = event?.currentTarget?.value
+
+ setInput(target)
+
+ if (onChange) {
+ onChange(target)
+ }
+ }
+
+ return (
+
+ {editing
+ ? setEditing(false)}
+ type="number"
+ value={input}
+ />
+ : setEditing(true)}
+ value={format(input)}
+ type="text"
+ readOnly
+ />
+ }
+
+ )
+}
+
+Currency.defaultProps = {
+ currencySymbol: 'AUD',
+}
+
+export default Currency
diff --git a/src/filters/types/__tests__/Boolean.test.js b/src/filters/types/__tests__/Boolean.test.js
index 80853d7..2b09a0e 100644
--- a/src/filters/types/__tests__/Boolean.test.js
+++ b/src/filters/types/__tests__/Boolean.test.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import { shallow } from 'enzyme'
import Boolean from '../Boolean'
diff --git a/src/filters/types/__tests__/Choice.test.js b/src/filters/types/__tests__/Choice.test.js
index 81cd80a..0f7bec4 100644
--- a/src/filters/types/__tests__/Choice.test.js
+++ b/src/filters/types/__tests__/Choice.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import Choice from '../Choice'
jest.useFakeTimers()
diff --git a/src/filters/types/__tests__/Currency.test.js b/src/filters/types/__tests__/Currency.test.js
deleted file mode 100644
index d063f6b..0000000
--- a/src/filters/types/__tests__/Currency.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
-import Currency from '../Currency'
-
-describe('Currency', () => {
- const baseProps = {
- onChange: jest.fn(),
- value: '25.08',
- }
- describe('Snapshots', () => {
- it('renders default', () => {
- snapshotTest()
- })
- it('renders with custom currency symbol', () => {
- snapshotTest()
- })
- })
- describe('Functions', () => {
- it('handles value changing', () => {
- spyOn(baseProps, 'onChange')
- const instance = shallow().instance()
- instance.refs = {
- input: {
- value: '145.98',
- },
- }
- instance.handleValueChange()
- expect(baseProps.onChange).toHaveBeenCalledWith('145.98')
- })
- })
-})
diff --git a/src/filters/types/__tests__/Date.test.js b/src/filters/types/__tests__/Date.test.js
index 11bf315..ed81209 100644
--- a/src/filters/types/__tests__/Date.test.js
+++ b/src/filters/types/__tests__/Date.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import DateComponent from '../Date'
describe('Date', () => {
diff --git a/src/filters/types/__tests__/Day.test.js b/src/filters/types/__tests__/Day.test.js
index cedd530..635502a 100644
--- a/src/filters/types/__tests__/Day.test.js
+++ b/src/filters/types/__tests__/Day.test.js
@@ -1,7 +1,7 @@
import React from 'react'
import Moment from 'moment'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import Day from '../Day'
describe('Day', () => {
diff --git a/src/filters/types/__tests__/Month.test.js b/src/filters/types/__tests__/Month.test.js
index 2a862e4..8580066 100644
--- a/src/filters/types/__tests__/Month.test.js
+++ b/src/filters/types/__tests__/Month.test.js
@@ -1,7 +1,7 @@
import React from 'react'
import Moment from 'moment'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import Month from '../Month'
jest.mock('react-month-picker', () => 'MonthPicker')
diff --git a/src/filters/types/__tests__/NumberSlider.test.js b/src/filters/types/__tests__/NumberSlider.test.js
index 82b9a48..c95bc83 100644
--- a/src/filters/types/__tests__/NumberSlider.test.js
+++ b/src/filters/types/__tests__/NumberSlider.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import NumberSlider from '../NumberSlider'
describe('NumberSlider', () => {
diff --git a/src/filters/types/__tests__/Search.test.js b/src/filters/types/__tests__/Search.test.js
index e6314a6..4537209 100644
--- a/src/filters/types/__tests__/Search.test.js
+++ b/src/filters/types/__tests__/Search.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import Search from '../Search'
jest.useFakeTimers()
diff --git a/src/filters/types/__tests__/__snapshots__/Choice.test.js.snap b/src/filters/types/__tests__/__snapshots__/Choice.test.js.snap
index d0002d4..0a68276 100644
--- a/src/filters/types/__tests__/__snapshots__/Choice.test.js.snap
+++ b/src/filters/types/__tests__/__snapshots__/Choice.test.js.snap
@@ -9,7 +9,6 @@ exports[`Choice Snapshots renders default 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
@@ -32,7 +31,6 @@ exports[`Choice Snapshots renders with custom label key 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
@@ -60,7 +58,6 @@ exports[`Choice Snapshots renders with custom option renderer 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
@@ -83,7 +80,6 @@ exports[`Choice Snapshots renders with custom value key 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
@@ -106,7 +102,6 @@ exports[`Choice Snapshots renders with multiple choice 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
@@ -159,7 +154,6 @@ exports[`Choice Snapshots renders with placeholder 1`] = `
loadOptions={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Testing testing"
styles={
Object {
@@ -184,7 +178,6 @@ exports[`Choice Snapshots renders with remote options 1`] = `
noOptionsMessage={[Function]}
onChange={[Function]}
onInputChange={[Function]}
- options={undefined}
placeholder="Any value"
styles={
Object {
diff --git a/src/filters/types/__tests__/__snapshots__/Currency.test.js.snap b/src/filters/types/__tests__/__snapshots__/Currency.test.js.snap
index 1fe9866..0b3fb5b 100644
--- a/src/filters/types/__tests__/__snapshots__/Currency.test.js.snap
+++ b/src/filters/types/__tests__/__snapshots__/Currency.test.js.snap
@@ -1,25 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Currency Snapshots enders default 1`] = `
+
+
+
+`;
+
exports[`Currency Snapshots renders default 1`] = `
-
- $
-
-
- .00
-
`;
diff --git a/src/filters/types/__tests__/__snapshots__/Date.test.js.snap b/src/filters/types/__tests__/__snapshots__/Date.test.js.snap
index b1da814..7647996 100644
--- a/src/filters/types/__tests__/__snapshots__/Date.test.js.snap
+++ b/src/filters/types/__tests__/__snapshots__/Date.test.js.snap
@@ -12,26 +12,17 @@ exports[`Date Snapshots has custom input format 1`] = `
tabIndex={-1}
>
@@ -83,26 +74,17 @@ exports[`Date Snapshots has null value 1`] = `
tabIndex={-1}
>
@@ -121,26 +103,17 @@ exports[`Date Snapshots renders default 1`] = `
tabIndex={-1}
>
diff --git a/src/filters/types/__tests__/__snapshots__/currency.test.tsx.snap b/src/filters/types/__tests__/__snapshots__/currency.test.tsx.snap
new file mode 100644
index 0000000..8ebbf2c
--- /dev/null
+++ b/src/filters/types/__tests__/__snapshots__/currency.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Currency Snapshots enders default 1`] = `
+
+
+
+`;
diff --git a/src/filters/types/__tests__/currency.test.tsx b/src/filters/types/__tests__/currency.test.tsx
new file mode 100644
index 0000000..53ac836
--- /dev/null
+++ b/src/filters/types/__tests__/currency.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { snapshotTest } from '../../../../utils/tests'
+import Currency from '../currency'
+
+describe('Currency', () => {
+ const baseProps = {
+ onChange: jest.fn(),
+ value: '25.08',
+ }
+
+ describe('Snapshots', () => {
+ it('enders default', () => {
+ snapshotTest()
+ })
+
+ it('renders with currency symbol', () => {
+ const instance = shallow()
+
+ const element = instance.find('input').props().value
+
+ expect(element).toBe('A$25.08')
+ })
+
+ it('renders with custom currency symbol', () => {
+ const instance = shallow()
+
+ const element = instance.find('input').props().value
+
+ expect(element).toBe('CN¥25.08')
+ })
+ })
+
+ describe('Functions', () => {
+ it('handles value changing', () => {
+ spyOn(baseProps, 'onChange')
+
+ const instance = shallow()
+
+ instance.find('input').simulate('change', { currentTarget: { value: '1234567890' } })
+
+ expect(baseProps.onChange).toHaveBeenCalledWith('1234567890')
+ })
+ })
+})
diff --git a/src/filters/types/index.js b/src/filters/types/index.js
index 6516284..22736a6 100644
--- a/src/filters/types/index.js
+++ b/src/filters/types/index.js
@@ -1,8 +1,8 @@
-export Boolean from './Boolean'
-export Choice from './Choice'
-export Currency from './Currency'
-export Date from './Date'
-export Day from './Day'
-export Month from './Month'
-export NumberSlider from './NumberSlider'
-export Search from './Search'
+export { default as Boolean } from './Boolean'
+export { default as Choice } from './Choice'
+export { default as Currency } from './currency'
+export { default as Date } from './Date'
+export { default as Day } from './Day'
+export { default as Month } from './Month'
+export { default as NumberSlider } from './NumberSlider'
+export { default as Search } from './Search'
diff --git a/src/filters/utils/__tests__/FilterComparison.test.js b/src/filters/utils/__tests__/FilterComparison.test.js
index 906b4ee..e59e90b 100644
--- a/src/filters/utils/__tests__/FilterComparison.test.js
+++ b/src/filters/utils/__tests__/FilterComparison.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import FilterComparison from '../FilterComparison'
describe('FilterComparison', () => {
diff --git a/src/filters/utils/__tests__/FilterLabel.test.js b/src/filters/utils/__tests__/FilterLabel.test.js
index c599dab..2f85a23 100644
--- a/src/filters/utils/__tests__/FilterLabel.test.js
+++ b/src/filters/utils/__tests__/FilterLabel.test.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import FilterLabel from '../FilterLabel'
describe('FilterLabel', () => {
diff --git a/src/filters/utils/__tests__/RemoveFilter.test.js b/src/filters/utils/__tests__/RemoveFilter.test.js
index 91f57ca..b3d3263 100644
--- a/src/filters/utils/__tests__/RemoveFilter.test.js
+++ b/src/filters/utils/__tests__/RemoveFilter.test.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { snapshotTest } from 'utils/tests'
+import { snapshotTest } from '../../../../utils/tests'
import RemoveFilter from '../RemoveFilter'
describe('RemoveFilter', () => {
diff --git a/src/filters/utils/__tests__/__snapshots__/makeFilter.test.js.snap b/src/filters/utils/__tests__/__snapshots__/makeFilter.test.js.snap
index 485c5fa..eb9f549 100644
--- a/src/filters/utils/__tests__/__snapshots__/makeFilter.test.js.snap
+++ b/src/filters/utils/__tests__/__snapshots__/makeFilter.test.js.snap
@@ -11,7 +11,6 @@ exports[`makeFilter Snapshots has a name 1`] = `
44 tests