From 9d9d9a0593815f856a1c08ca15f64b2adba747f4 Mon Sep 17 00:00:00 2001 From: NghiaPham Date: Wed, 11 Sep 2019 21:47:14 +0700 Subject: [PATCH] [CLD-237]Date picker component (#51) --- __mocks__/styleMock.js | 1 + jest.config.js | 5 +- package.json | 1 + rollup.config.js | 5 +- src/components/Checkbox/__tests__/index.tsx | 3 - .../__tests__/__snapshots__/index.tsx.snap | 8 +++ src/components/DatePicker/__tests__/index.tsx | 36 +++++++++++ .../DatePicker/date-picker.stories.tsx | 59 +++++++++++++++++++ src/components/DatePicker/index.tsx | 47 +++++++++++++++ src/styles/index.scss | 1 + yarn.lock | 25 +++++++- 11 files changed, 184 insertions(+), 7 deletions(-) create mode 100644 __mocks__/styleMock.js create mode 100644 src/components/DatePicker/__tests__/__snapshots__/index.tsx.snap create mode 100644 src/components/DatePicker/__tests__/index.tsx create mode 100644 src/components/DatePicker/date-picker.stories.tsx create mode 100644 src/components/DatePicker/index.tsx diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js new file mode 100644 index 0000000000..7c6d6c73d3 --- /dev/null +++ b/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {} \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index 4f7b69cd5b..f7c086a219 100644 --- a/jest.config.js +++ b/jest.config.js @@ -12,5 +12,8 @@ module.exports = { }, snapshotSerializers: [ "enzyme-to-json/serializer" - ] + ], + "moduleNameMapper": { + "\\.(css|less)$": "/__mocks__/styleMock.js" + } }; diff --git a/package.json b/package.json index 9ea6fb3c3b..7b347524e4 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "dayjs": "^1.8.16", "formik": "^1.5.8", "jsonwebtoken": "^8.5.1", + "react-datepicker": "^2.9.6", "react-google-map": "^3.1.1", "react-google-maps-loader": "^4.2.5", "react-icons": "^3.7.0" diff --git a/rollup.config.js b/rollup.config.js index 4727f8018b..428d042104 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -15,7 +15,10 @@ export default [ const content = ['./dist/elements.esm.js'] const options = { output: 'dist/index.css', - minify: true + minify: true, + whitelist: [ + '*react-datepicker*' + ] // Uncomment this line if you want to see the CSS purified from the package // rejected: true } diff --git a/src/components/Checkbox/__tests__/index.tsx b/src/components/Checkbox/__tests__/index.tsx index 82efcfdd6e..c4f7243021 100644 --- a/src/components/Checkbox/__tests__/index.tsx +++ b/src/components/Checkbox/__tests__/index.tsx @@ -28,9 +28,6 @@ describe('Checkbox', () => { /> ) expect(wrapper.find('label')).toHaveLength(1) - // TODO: will resolve this later. Not sure why this doesn't work yet - // wrapper.find('input[type="checkbox"]').simulate('change', { target: { checked: true } }) - // expect(wrapper.find('input[type="checkbox"]').prop('checked')).toBeTruthy() }) afterEach(() => { diff --git a/src/components/DatePicker/__tests__/__snapshots__/index.tsx.snap b/src/components/DatePicker/__tests__/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000..d4f9a61947 --- /dev/null +++ b/src/components/DatePicker/__tests__/__snapshots__/index.tsx.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox should match a snapshot 1`] = ` + +`; diff --git a/src/components/DatePicker/__tests__/index.tsx b/src/components/DatePicker/__tests__/index.tsx new file mode 100644 index 0000000000..a66fcb6edc --- /dev/null +++ b/src/components/DatePicker/__tests__/index.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import { shallow, mount } from 'enzyme' +import { DatePicker, DatePickerProps } from '../index' +import { Formik, Form } from 'formik' +import toJson from 'enzyme-to-json' + +const props: DatePickerProps = { + name: 'abc', + labelText: 'abc', + id: '123' +} + +describe('Checkbox', () => { + it('should match a snapshot', () => { + expect(toJson(shallow())).toMatchSnapshot() + }) + + it('should work when integrating with Formik', () => { + const wrapper = mount( + ( +
+ + + )} + /> + ) + expect(wrapper.find('label')).toHaveLength(1) + }) + + afterEach(() => { + jest.resetAllMocks() + }) +}) diff --git a/src/components/DatePicker/date-picker.stories.tsx b/src/components/DatePicker/date-picker.stories.tsx new file mode 100644 index 0000000000..1eee1a1e23 --- /dev/null +++ b/src/components/DatePicker/date-picker.stories.tsx @@ -0,0 +1,59 @@ +import React, { useRef, useEffect } from 'react' + +import { storiesOf } from '@storybook/react' +import { action } from '@storybook/addon-actions' +import { DatePicker } from '.' +import { Form, Formik } from 'formik' + +storiesOf('form/DatePicker', module) + .add('Date Picker', () => ( +
+ { + action('Form Values' + values) + }} + render={() => ( +
+
+ +
+
+ )} + /> +
+ )) + .add('Date picker error', () => { + const Parent = () => { + const ref = useRef(null) + useEffect(() => { + console.log((ref.current as any).setTouched({ demo: true })) + }, []) + + return ( +
+ { + return { + demo: 'error' + } + }} + initialValues={{ demo: new Date() }} + onSubmit={values => { + action('Form Values' + values) + }} + render={() => ( +
+
+ +
+
+ )} + /> +
+ ) + } + + return + }) diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx new file mode 100644 index 0000000000..3e1c3492dd --- /dev/null +++ b/src/components/DatePicker/index.tsx @@ -0,0 +1,47 @@ +import * as React from 'react' +import { Field } from 'formik' +import ReactDatePicker from 'react-datepicker' + +export interface DatePickerProps { + name: string + id: string + labelText: string +} + +export const DatePicker = ({ name, id, labelText }: DatePickerProps) => { + return ( + { + const hasError = touched[field.name] && errors[field.name] + + const className = hasError ? 'input is-danger' : 'input is-primary' + return ( +
+
+ + { + setFieldValue(name, value) + }} + /> + {hasError && ( +
+ {errors[field.name]} +
+ )} +
+
+ ) + }} + /> + ) +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 2f2ed2db01..ccd3f417a4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -16,3 +16,4 @@ html { @import './components/toast.scss'; @import './components/menu.scss'; @import './components/appointment-tile.scss'; +@import './components/react-datepicker.scss'; diff --git a/yarn.lock b/yarn.lock index 4dd0914000..a4925013fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3380,7 +3380,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5: +classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -4016,6 +4016,11 @@ data-urls@^1.0.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" +date-fns@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.1.0.tgz#0d7e806c3cefe14a943532dbf968995ccfd46bd9" + integrity sha512-eKeLk3sLCnxB/0PN4t1+zqDtSs4jb4mXRSTZ2okmx/myfWyDqeO4r5nnmA5LClJiCwpuTMeK2v5UQPuE4uMaxA== + date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" @@ -9472,6 +9477,17 @@ react-clientside-effect@^1.2.0: dependencies: "@babel/runtime" "^7.0.0" +react-datepicker@^2.9.6: + version "2.9.6" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.9.6.tgz#26190c9f71692149d0d163398aa19e08626444b1" + integrity sha512-PLiVhyAr567gWuLMZwIH9WpTIZOZVLhEFyuUzSx3kmQdiikjrYpdNlxsfbbgaxRnee5y08KJZequaqRsNySXmw== + dependencies: + classnames "^2.2.6" + date-fns "^2.0.1" + prop-types "^15.7.2" + react-onclickoutside "^6.9.0" + react-popper "^1.3.4" + react-dev-utils@^9.0.0: version "9.0.3" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.0.3.tgz#7607455587abb84599451460eb37cef0b684131a" @@ -9639,6 +9655,11 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-onclickoutside@^6.9.0: + version "6.9.0" + resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f" + integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A== + react-popper-tooltip@^2.8.3: version "2.8.3" resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.8.3.tgz#1c63e7473a96362bd93be6c94fa404470a265197" @@ -9647,7 +9668,7 @@ react-popper-tooltip@^2.8.3: "@babel/runtime" "^7.4.5" react-popper "^1.3.3" -react-popper@^1.3.3: +react-popper@^1.3.3, react-popper@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.4.tgz#f0cd3b0d30378e1f663b0d79bcc8614221652ced" integrity sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA==