fix(datetimepicker): fix DateTimePicker style

Fix datetimepicker style with input group, form-control class and calendar icon. Add className prop top DateTimePicker component and leave commented section in test file for future locale handling fix #156
HospitalRun · Dec 20, 2019 · e477380 · e477380
1 parent aed4bd0
commit e477380
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import DatePicker from 'react-datepicker'
-
+import InputGroup from 'react-bootstrap/InputGroup'
+import { Icon } from '../Icon'
 import 'react-datepicker/dist/react-datepicker.css'
 
 interface Props {
@@ -34,6 +35,8 @@ interface Props {
   minTime?: Date
   /** Show more months. */
   monthsShown?: number
+  /** Input.Group class */
+  className?: string
   /** Callback when date is changed. */
   onChange: (date: Date, event: React.ChangeEvent<HTMLInputElement>) => void
   /** Selected date value. */
@@ -67,6 +70,7 @@ interface Props {
 const DateTimePicker = (props: Props) => {
   const {
     children,
+    className,
     dateFormat,
     dateFormatCalendar,
     disabled,
@@ -98,38 +102,46 @@ const DateTimePicker = (props: Props) => {
   } = props
 
   return (
-    <DatePicker
-      dateFormat={dateFormat}
-      dateFormatCalendar={dateFormatCalendar}
-      disabled={disabled}
-      dropdownMode={dropdownMode}
-      endDate={endDate}
-      excludeDates={excludeDates}
-      includeDates={includeDates}
-      inline={inline}
-      locale={locale}
-      maxDate={maxDate}
-      maxTime={maxTime}
-      minDate={minDate}
-      minTime={minTime}
-      monthsShown={monthsShown}
-      onChange={onChange}
-      selected={selected}
-      selectsEnd={selectsEnd}
-      selectsStart={selectsStart}
-      showMonthDropdown={showMonthDropdown}
-      showTimeSelect={showTimeSelect}
-      showYearDropdown={showYearDropdown}
-      showTimeSelectOnly={showTimeSelectOnly}
-      timeFormat={timeFormat}
-      timeIntervals={timeIntervals}
-      timeCaption={timeCaption}
-      todayButton={todayButton}
-      startDate={startDate}
-      withPortal={withPortal}
-    >
-      {children}
-    </DatePicker>
+    <InputGroup className={className}>
+      <InputGroup.Prepend>
+        <InputGroup.Text>
+          <Icon icon="calendar" />
+        </InputGroup.Text>
+      </InputGroup.Prepend>
+      <DatePicker
+        className="form-control"
+        dateFormat={dateFormat}
+        dateFormatCalendar={dateFormatCalendar}
+        disabled={disabled}
+        dropdownMode={dropdownMode}
+        endDate={endDate}
+        excludeDates={excludeDates}
+        includeDates={includeDates}
+        inline={inline}
+        locale={locale}
+        maxDate={maxDate}
+        maxTime={maxTime}
+        minDate={minDate}
+        minTime={minTime}
+        monthsShown={monthsShown}
+        onChange={onChange}
+        selected={selected}
+        selectsEnd={selectsEnd}
+        selectsStart={selectsStart}
+        showMonthDropdown={showMonthDropdown}
+        showTimeSelect={showTimeSelect}
+        showYearDropdown={showYearDropdown}
+        showTimeSelectOnly={showTimeSelectOnly}
+        timeFormat={timeFormat}
+        timeIntervals={timeIntervals}
+        timeCaption={timeCaption}
+        todayButton={todayButton}
+        startDate={startDate}
+        withPortal={withPortal}
+      >
+        {children}
+      </DatePicker>
+    </InputGroup>
   )
 }
 

diff --git a/stories/datetimepicker.stories.tsx b/stories/datetimepicker.stories.tsx
@@ -10,7 +10,9 @@ storiesOf('DateTimePickers', module)
       inline: true,
     },
   })
-  .addDecorator((storyFn) => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
+  .addDecorator((storyFn) => (
+    <div style={{ textAlign: 'center', marginLeft: '40px' }}>{storyFn()}</div>
+  ))
   .add('Default', () => {
     const [startDate, setStartDate] = useState(new Date())
 

diff --git a/test/datetimepicker.test.tsx b/test/datetimepicker.test.tsx
@@ -4,6 +4,11 @@ import * as sinon from 'sinon'
 import DatePicker from 'react-datepicker'
 import { DateTimePicker } from '../src'
 
+// import { registerLocale, setDefaultLocale } from  "react-datepicker";
+// import pt from '../locales/pt';
+// setDefaultLocale('en')
+// registerLocale('pt-br', pt)
+
 describe('DateTimePicker', () => {
   it('renders itself without crashing', () => {
     const selectedDate = new Date()
@@ -39,7 +44,7 @@ it('Checkbox handle the change event', () => {
 it('accepts props and defaults as by DatePicker API', () => {
   const selectedDate = new Date()
   const date = new Date()
-  const datePickerWrapper = shallow(
+  const datePickerWrapper = mount(
     <DateTimePicker
       dateFormat="MM/dd/yyyy"
       disabled