-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CLD-237]Date picker component (#51)
- Loading branch information
NghiaPham
authored
Sep 11, 2019
1 parent
6d556c9
commit 9d9d9a0
Showing
11 changed files
with
184 additions
and
7 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = {} |
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
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
8 changes: 8 additions & 0 deletions
8
src/components/DatePicker/__tests__/__snapshots__/index.tsx.snap
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,8 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Checkbox should match a snapshot 1`] = ` | ||
| <FormikConnect(FieldInner) | ||
| name="abc" | ||
| render={[Function]} | ||
| /> | ||
| `; |
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,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(<DatePicker {...props} />))).toMatchSnapshot() | ||
| }) | ||
|
|
||
| it('should work when integrating with Formik', () => { | ||
| const wrapper = mount( | ||
| <Formik | ||
| initialValues={{ test: false }} | ||
| onSubmit={jest.fn()} | ||
| render={() => ( | ||
| <Form> | ||
| <DatePicker {...props} /> | ||
| </Form> | ||
| )} | ||
| /> | ||
| ) | ||
| expect(wrapper.find('label')).toHaveLength(1) | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| jest.resetAllMocks() | ||
| }) | ||
| }) |
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,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', () => ( | ||
| <section className="section"> | ||
| <Formik | ||
| initialValues={{ demo: new Date() }} | ||
| onSubmit={values => { | ||
| action('Form Values' + values) | ||
| }} | ||
| render={() => ( | ||
| <Form> | ||
| <div className="column is-half-desktop"> | ||
| <DatePicker name="demo" labelText="demo" id="demo" /> | ||
| </div> | ||
| </Form> | ||
| )} | ||
| /> | ||
| </section> | ||
| )) | ||
| .add('Date picker error', () => { | ||
| const Parent = () => { | ||
| const ref = useRef(null) | ||
| useEffect(() => { | ||
| console.log((ref.current as any).setTouched({ demo: true })) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <section className="section"> | ||
| <Formik | ||
| ref={ref} | ||
| validate={() => { | ||
| return { | ||
| demo: 'error' | ||
| } | ||
| }} | ||
| initialValues={{ demo: new Date() }} | ||
| onSubmit={values => { | ||
| action('Form Values' + values) | ||
| }} | ||
| render={() => ( | ||
| <Form> | ||
| <div className="column is-half-desktop"> | ||
| <DatePicker name="demo" labelText="Demo" id="test" /> | ||
| </div> | ||
| </Form> | ||
| )} | ||
| /> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| return <Parent /> | ||
| }) |
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,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 ( | ||
| <Field | ||
| name={name} | ||
| render={({ field, form: { touched, errors, setFieldValue } }) => { | ||
| const hasError = touched[field.name] && errors[field.name] | ||
|
|
||
| const className = hasError ? 'input is-danger' : 'input is-primary' | ||
| return ( | ||
| <div className="field pb-2"> | ||
| <div className="control"> | ||
| <label className="label" htmlFor={id}> | ||
| {labelText} | ||
| </label> | ||
| <ReactDatePicker | ||
| className={className} | ||
| name={name} | ||
| id={id} | ||
| labelText={labelText} | ||
| {...field} | ||
| selected={field.value} | ||
| onChange={value => { | ||
| setFieldValue(name, value) | ||
| }} | ||
| /> | ||
| {hasError && ( | ||
| <div className="has-text-danger" data-test="input-error"> | ||
| {errors[field.name]} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| }} | ||
| /> | ||
| ) | ||
| } |
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