Merge pull request #30 from y0c/dev

D2M

Author: y0c

.storybook/webpack.config.js

@@ -1,23 +1,27 @@
 // load the default config generator.
 const path = require('path');
 
-module.exports = (baseConfig, env, defaultConfig) => {
+module.exports = ({ config }) => {
   // Extend it as you need.
   // For example, add typescript loader:
-  defaultConfig.module.rules.push({
+  config.module.rules.push({
     test: /\.(ts|tsx)$/,
     use: [
       require.resolve('awesome-typescript-loader'),
       require.resolve('react-docgen-typescript-loader'),
     ],
   });
 
-  defaultConfig.module.rules.push({
+  config.module.rules.push({
     test: /\.scss$/,
-    loaders: ['style-loader', 'css-loader', 'sass-loader'],
+    use: [
+      require.resolve('style-loader'),
+      require.resolve('css-loader'),
+      require.resolve('sass-loader'),
+    ],
   });
 
-  defaultConfig.resolve.modules.push(path.join(__dirname, '../'));
-  defaultConfig.resolve.extensions.push('.ts', '.tsx');
-  return defaultConfig;
+  config.resolve.modules.push(path.join(__dirname, '../'));
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
 };

README.md

@@ -34,13 +34,11 @@ React DatePicker
 
 ![datepicker](https://user-images.githubusercontent.com/2585676/52909193-a8992400-32c7-11e9-9266-7735c0e6e705.gif)
 
+
 ### RangeDatePicker 
 
 ![rangedatepicker](https://user-images.githubusercontent.com/2585676/52909117-d7ae9600-32c5-11e9-902a-4df671e82611.gif)
 
-### TimePicker
-
-![timepicker](https://user-images.githubusercontent.com/2585676/52909206-fd3c9f00-32c7-11e9-983e-94594c9847f4.gif)
 
 [Demo in Storybook](https://y0c.github.io/react-datepicker)
 
@@ -51,7 +49,6 @@ React DatePicker
 * RangeDatePicker
 * DatePicker
 * Standalone Calendar
-* TimePicker
 
 The components that you can use are as follows: If you want to configure the `DatePicker` yourself, you can configure it any way you want through the `Default Calendar component`.
 
@@ -63,11 +60,13 @@ The components that you can use are as follows: If you want to configure the `Da
 
 ## 📦 Dependency 
 
-> In the next version v1.0.0, moment.js will be replaced by day.js or date-fns
+* Moment.js
 
-* [Moment](https://momentjs.com)
+In previous versions, moment.js were used. but now it is changed to `Day.js` to because of bundle size issue (#14)
 
-`Moment` is a javascript library for Parse, validate, manipulate, and display dates and times. this component use moment library to globalize and control date. You can check the locale list through this [link](https://github.com/moment/moment/tree/develop/locale).
+* [Day.js](https://github.com/iamkun/dayjs)
+
+`Day.js` is a javascript library for Parse, validate, manipulate, and display dates and times. this component use `Day.js` library to globalize and control date. You can check the locale list through this [link](https://github.com/iamkun/dayjs/tree/dev/src/locale).
 
 ## 📲 Installation 
 
@@ -89,26 +88,55 @@ import { DatePicker } from '@y0c/react-datepicker';
 // You can customize style by copying asset folder.
 import '@y0c/react-datepicker/assets/styles/calendar.scss';
 
-// Please include the locale you want to use.
-// and delivery props to calendar component 
-// See locale list https://github.com/moment/moment/tree/develop/locale
-import 'moment/locale/ko';
-
 class DatePickerExample extends Component {
 
   onChange = (date) => {
+    // Day.js object
     console.log(date);
+
+    // to normal Date object
+    console.log(date.toDate());
   }
 
   render() {
     return (
-      <DatePicker locale="ko" onChange={this.onChange}/>
+      <DatePicker onChange={this.onChange}/>
     )
   }
 }
 ```
+
 You can find more Exmaples and Demo in story book link
 
+## 🌎 i18n
+
+Features for i18n are provided by Day.js by default.
+
+see locale list https://github.com/iamkun/dayjs/tree/dev/src/
+
+and you can customize the locale object
+
+```javascript
+// use day.js locale
+import 'dayjs/locale/ko'
+
+// delivery prop locale string  
+<DatePicker locale="ko" />
+
+// or define customize locale object 
+const locale = {
+  name: 'ko',
+  weekdays: '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
+  weekdaysShort: '일_월_화_수_목_금_토'.split('_'),
+  months: '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
+};
+
+// delivery propr locale object
+<DatePicker locale={locale} />
+```
+
+Defaults locale `en`
+
 ### 🎨 Themeing
 
 1. Copy this project asset folder under scss file
@@ -167,6 +195,10 @@ Please fork and use [https://codesandbox.io/s/pw6n17pk57](https://codesandbox.io
 * Open a new issue(Bug or Feature) on [Github](https://github.com/y0c/react-datepicker/issues/new/choose)
 * Join the [Gitter room](https://gitter.im/react-datepicker/community) to chat with other developers.
 
+## 👨‍👦‍👦 Contribution 
+
+Issue and Pull Request are always welcome! 
+
 ## 📝 License 
 MIT
 

assets/styles/app.scss

@@ -75,21 +75,25 @@
       left: 50%;
       transform: translateX(-50%) translateY(-50%);
     }
-    &.include__time {
-      padding: 10px;
+    &__include-time {
       border: 1px solid $divider-color;
-      background: white;
+      .calendar__item,
+      .time__container { 
+        border: none;
+      }
     }
     &__tab {
       & button {
         padding: 5px 10px;
         outline: none;
         display: inline-flex;
         align-items: center;
-        background: $primary-color;
-        color:white;
+        background: none;
+        border:none;
+        border-bottom: 2px solid $divider-color;
         &.active {
-          background: $primary-color-dark;
+          color: $primary-color-dark;
+          border-bottom: 2px solid $primary-color-dark;
         }
         &:first-child {
           border-right: none;
@@ -98,7 +102,7 @@
           margin-right: 5px;
         }
       }
-      margin-bottom: 10px;
+      margin: 10px 0;
     }
   }
 }
@@ -158,7 +162,6 @@
   display:inline-block;
   background: white;
   font-size: $base-font-size;
-  box-shadow: 1px 1px 0px #eee;
   *, *:before, *:after {
     box-sizing: border-box;
   }

examples/CalendarSelectedController.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import Calendar, { Props as ICalendarProps } from '../src/components/Calendar';
 import { Omit, Merge } from '../src/utils/TypeUtil';
 
@@ -16,7 +16,7 @@ interface IProps {
 }
 
 interface State {
-  selected: moment.Moment[];
+  selected: dayjs.Dayjs[];
 }
 
 type Props = CalendarProps & IProps;
@@ -29,7 +29,7 @@ class CalendarSelectedController extends React.Component<Props, State> {
     selected: [],
   };
 
-  public handleChange = (date: moment.Moment) => {
+  public handleChange = (date: dayjs.Dayjs) => {
     const { multiple } = this.props;
     this.setState({
       selected: multiple ? [...this.state.selected, date] : [date],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@y0c/react-datepicker",
   "version": "0.3.7",
-  "description": "React Datepicker Component",
+  "description": "Flexible, Reusable, Mobile friendly DatePicker Component",
   "author": "y0c",
   "license": "MIT",
   "main": "lib/index.js",
@@ -34,8 +34,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "lodash": "4.17.11",
-    "moment": "^2.22.2",
+    "dayjs": "^1.8.12",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
@@ -76,22 +75,22 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@storybook/addon-actions": "^4.1.11",
-    "@storybook/addon-info": "^4.1.11",
-    "@storybook/addon-jest": "^4.1.11",
-    "@storybook/addon-knobs": "^4.1.11",
-    "@storybook/addon-links": "^4.1.11",
-    "@storybook/addon-options": "^4.1.11",
-    "@storybook/addons": "^4.1.11",
-    "@storybook/cli": "^4.1.11",
-    "@storybook/react": "^4.1.11",
+    "@babel/core": "^7.4.3",
+    "@emotion/core": "^10.0.10",
+    "@storybook/addon-actions": "^5.0.6",
+    "@storybook/addon-info": "^5.0.6",
+    "@storybook/addon-jest": "^5.0.6",
+    "@storybook/addon-knobs": "^5.0.6",
+    "@storybook/addon-links": "^5.0.6",
+    "@storybook/addon-options": "^5.0.6",
+    "@storybook/addons": "^5.0.6",
+    "@storybook/cli": "^5.0.6",
+    "@storybook/react": "^5.0.6",
     "@storybook/storybook-deployer": "^2.8.1",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
-    "@types/jest": "^23.3.12",
+    "@types/jest": "^24.0.11",
     "@types/lodash": "^4.14.118",
-    "@types/moment": "^2.13.0",
     "@types/react": "^16.7.13",
     "@types/react-dom": "^16.0.11",
     "@types/sinon": "^7.0.3",
@@ -100,7 +99,7 @@
     "@types/storybook__react": "^4.0.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.5",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-webpack-plugin": "2.0.1",
     "cross-env": "5.2.0",
     "css-loader": "2.1.0",
     "enzyme": "^3.8.0",
@@ -109,7 +108,7 @@
     "file-loader": "3.0.1",
     "html-webpack-plugin": "3.2.0",
     "husky": "^1.3.1",
-    "jest": "^23.6.0",
+    "jest": "^24.7.0",
     "lint-staged": "^8.1.0",
     "node-sass": "4.11.0",
     "prettier": "^1.15.3",
@@ -119,13 +118,13 @@
     "sass-loader": "7.1.0",
     "sinon": "^7.2.2",
     "style-loader": "0.23.1",
-    "ts-jest": "^23.10.5",
+    "ts-jest": "^24.0.1",
     "ts-loader": "^5.3.3",
     "ts-mockito": "^2.3.1",
     "tslint": "^5.12.1",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-config-prettier": "^1.17.0",
-    "tslint-react": "^3.6.0",
+    "tslint-react": "^4.0.0",
     "typescript": "^3.2.2",
     "url-loader": "^1.1.2",
     "webpack": "4.28.4",
@@ -139,7 +138,6 @@
   "keywords": [
     "react",
     "datepicker",
-    "timepicker",
     "calendar",
     "rangepicker",
     "rangedatepicker"

src/common/@types.ts

@@ -1,4 +1,5 @@
 export namespace IDatePicker {
+  export type Locale = string | { name: string; [key: string]: any };
   export enum PickerDirection {
     TOP,
     BOTTOM,

src/common/Constant.ts

@@ -1,4 +1,6 @@
 export const DatePickerDefaults = {
   dateFormat: 'YYYY-MM-DD',
-  locale: 'en-ca',
+  dateTimeFormat: 'YYYY-MM-DD HH:mm A',
+  timeFormat: 'HH:mm A',
+  locale: 'en',
 };

src/components/Calendar.tsx

@@ -1,22 +1,22 @@
-import { range } from 'lodash';
-import * as moment from 'moment';
+import { range } from '../utils/ArrayUtil';
+import * as dayjs from 'dayjs';
 import * as React from 'react';
 import CalendarContainer, { InheritProps as ContainerProps } from './CalendarContainer';
 
 export interface Props extends ContainerProps {
   /** Calendar Initial Date Parameters */
-  base: moment.Moment;
+  base: dayjs.Dayjs;
   /** Number of months to show at once */
   showMonthCnt: number;
 }
 
 export interface State {
-  base: moment.Moment;
+  base: dayjs.Dayjs;
 }
 
 class Calendar extends React.Component<Props, State> {
   public static defaultProps = {
-    base: moment(),
+    base: dayjs(),
     showMonthCnt: 1,
     showToday: false,
   };
@@ -28,7 +28,7 @@ class Calendar extends React.Component<Props, State> {
     };
   }
 
-  public setBase = (base: moment.Moment) => {
+  public setBase = (base: dayjs.Dayjs) => {
     this.setState({ base });
   };
 
@@ -44,7 +44,7 @@ class Calendar extends React.Component<Props, State> {
               <CalendarContainer
                 {...this.props}
                 base={this.state.base}
-                current={base.clone().add(idx, 'months')}
+                current={dayjs(base).add(idx, 'month')}
                 prevIcon={idx === 0}
                 nextIcon={idx === showMonthCnt! - 1}
                 setBase={this.setBase}