generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #263 from eea/develop
Develop
- Loading branch information
Showing
10 changed files
with
302 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import cx from 'classnames'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { toBackendLang } from '@plone/volto/helpers'; | ||
| import { formatDate } from '@plone/volto/helpers/Utils/Date'; | ||
| import config from '@plone/volto/registry'; | ||
|
|
||
| export const DateWidget = ({ value, children, className }) => { | ||
| const lang = useSelector((state) => state.intl.locale); | ||
| const backendLang = toBackendLang(lang); | ||
| const locale = | ||
| backendLang === 'en' ? config.settings.dateLocale : backendLang; | ||
| const formatOptions = { | ||
| date: value, | ||
| format: { | ||
| year: 'numeric', | ||
| month: 'short', | ||
| day: '2-digit', | ||
| }, | ||
| locale, | ||
| }; | ||
|
|
||
| return value ? ( | ||
| <span className={cx(className, 'date', 'widget')}> | ||
| {children | ||
| ? children(formatDate(formatOptions)) | ||
| : formatDate(formatOptions)} | ||
| </span> | ||
| ) : ( | ||
| '' | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
| import { DateWidget } from './DateWidget'; | ||
| import { Provider } from 'react-intl-redux'; | ||
| import configureStore from 'redux-mock-store'; | ||
| import thunk from 'redux-thunk'; | ||
|
|
||
| const mockStore = configureStore([thunk]); | ||
|
|
||
| const store = mockStore({ | ||
| intl: { | ||
| locale: 'en-gb', | ||
| messages: {}, | ||
| }, | ||
| }); | ||
|
|
||
| describe('DateWidget', () => { | ||
| it('renders an empty date view widget component', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DateWidget /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a date view widget component', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DateWidget className="metadata" value="2020-08-04T09:00:00" /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a date view widget component with custom format', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DateWidget | ||
| className="metadata" | ||
| value="2020-08-04T09:00:00" | ||
| format={{ | ||
| year: 'numeric', | ||
| month: 'short', | ||
| day: '2-digit', | ||
| }} | ||
| /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a date view widget component with children', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DateWidget className="metadata" value="2020-08-04T09:00:00"> | ||
| {(child) => <strong>{child}</strong>} | ||
| </DateWidget> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import cx from 'classnames'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { toBackendLang } from '@plone/volto/helpers'; | ||
| import { formatDate } from '@plone/volto/helpers/Utils/Date'; | ||
| import config from '@plone/volto/registry'; | ||
|
|
||
| export const DatetimeWidget = ({ value, children, className }) => { | ||
| const lang = useSelector((state) => state.intl.locale); | ||
| const backendLang = toBackendLang(lang); | ||
| const locale = | ||
| backendLang === 'en' ? config.settings.dateLocale : backendLang; | ||
| const formatOptions = { | ||
| date: value, | ||
| format: { | ||
| year: 'numeric', | ||
| month: 'short', | ||
| day: '2-digit', | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| }, | ||
| locale, | ||
| includeTime: true, | ||
| formatToParts: true, | ||
| }; | ||
|
|
||
| let formattedParts = formatDate(formatOptions); | ||
|
|
||
| const formattedDate = formattedParts | ||
| .map((part) => { | ||
| if (part.type === 'literal' && part.value === ', ') { | ||
| return ' '; | ||
| } | ||
| return part.value; | ||
| }) | ||
| .join(''); | ||
|
|
||
| return value ? ( | ||
| <span className={cx(className, 'datetime', 'widget')}> | ||
| {children ? children(formattedDate) : formattedDate} | ||
| </span> | ||
| ) : ( | ||
| '' | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
| import { DatetimeWidget } from './DatetimeWidget'; | ||
| import { Provider } from 'react-intl-redux'; | ||
| import configureStore from 'redux-mock-store'; | ||
| import thunk from 'redux-thunk'; | ||
|
|
||
| const mockStore = configureStore([thunk]); | ||
|
|
||
| const store = mockStore({ | ||
| intl: { | ||
| locale: 'en-gb', | ||
| messages: {}, | ||
| }, | ||
| }); | ||
|
|
||
| describe('DatetimeWidget', () => { | ||
| it('renders an empty datetime view widget component', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DatetimeWidget /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a datetime view widget component with a date and time', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders a datetime view widget component with children formatting', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DatetimeWidget className="metadata" value="2024-09-05T15:34:00"> | ||
| {(formattedDate) => <strong>{formattedDate}</strong>} | ||
| </DatetimeWidget> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('removes the comma in the formatted date and shows correct time', () => { | ||
| const component = renderer.create( | ||
| <Provider store={store}> | ||
| <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" /> | ||
| </Provider>, | ||
| ); | ||
| const json = component.toJSON(); | ||
| expect(json).toMatchSnapshot(); | ||
|
|
||
| const instance = component.root; | ||
| const span = instance.findByType('span'); | ||
| expect(span.props.children).toContain('05 Sept 2024 15:34'); | ||
| }); | ||
| }); |
Oops, something went wrong.