feat: complete date choose

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "stage-2", "react"]
+  "presets": ["env", "stage-0", "react"]
 }

package.json

@@ -15,8 +15,7 @@
     "classnames": "^2.2.6",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "uuid": "^3.3.2"
+    "react-dom": "^16.5.2"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -24,7 +23,7 @@
     "babel-loader": "7.1.5",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^1.0.0",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",

src/components/calendar/Header.js

@@ -1,17 +1,32 @@
 import React from 'react'
 import Styles from './header.css'
+import { DateContext } from '../../context'
 
 const Header = () => (
-  <div className={Styles.wrapper}>
-    <i className={Styles.prevYear} role="button" title="上一年" />
-    <i className={Styles.prevMonth} role="button" title="上一月" />
-    <div className={Styles.text}>
-      <span className={Styles.link}>2018年</span>
-      <span className={Styles.link}>9月</span>
-    </div>
-    <i className={Styles.nextMonth} role="button" title="下一月" />
-    <i className={Styles.nextYear} role="button" title="下一年" />
-  </div>
+  <DateContext.Consumer>
+    {
+      ({
+        year,
+        month,
+        onPrevMonth,
+        onPrevYear,
+        onNextMonth,
+        onNextYear,
+      }) => (
+        <div className={Styles.wrapper}>
+          <i className={Styles.prevYear} role="presentation" title="上一年" onClick={() => onPrevYear()} />
+          <i className={Styles.prevMonth} role="presentation" title="上一月" onClick={() => onPrevMonth()} />
+          <div className={Styles.text}>
+            <span className={Styles.link}>{`${year}年`}</span>
+            <span className={Styles.link}>{`${month}月`}</span>
+          </div>
+          <i className={Styles.nextMonth} role="presentation" title="下一月" onClick={() => onNextMonth()} />
+          <i className={Styles.nextYear} role="presentation" title="下一年" onClick={() => onNextYear()} />
+        </div>
+      )
+    }
+
+  </DateContext.Consumer>
 )
 
 export default Header

src/components/calendar/Index.js

@@ -1,104 +1,47 @@
 import React from 'react'
 import classNames from 'classnames'
-import PropTypes from 'prop-types'
 import Styles from './index.css'
 import {
-  getDaysOfMonth,
-  getWeekSort,
-  // selectDayByIndex,
-  setSelectedDays,
-} from '../../helper'
-import {
-  PREV_DAY, NEXT_DAY, _,
+  PREV_DAY, NEXT_DAY,
 } from '../../const'
 import { DateContext } from '../../context'
 
-class Index extends React.Component {
-  constructor(props) {
-    super(props)
-
-    const { value } = this.props
-    this.state = {
-      // weekTags: [],
-      // days: [],
-      /* eslint-disable react/no-unused-state */
-      selectedDay: value,
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (props.model !== state.prevModel) {
-      const changeModelDays = getDaysOfMonth(_, _, props.model)
-      const afterSetDays = setSelectedDays(changeModelDays, state.selectedDay)
-      return {
-        prevModel: props.model,
-        weekTags: getWeekSort(props.model),
-        days: afterSetDays,
-      }
-    }
-
-    if (props.value !== state.selectedDay) {
-      return { ...state, selectedDay: props.value }
+const Index = () => (
+  <DateContext.Consumer>
+    {
+      ({ weekTags, days, onSelectDay }) => (
+        <div className={Styles.wrapper}>
+          { weekTags.map(weekName => (
+            <span
+              className={`${Styles.normal} ${Styles.week}`}
+              title={`星期${weekName}`}
+              key={weekName}
+            >
+              { weekName }
+            </span>
+          )) }
+          {
+            days.map(day => (
+              <span
+                className={classNames(Styles.normal, {
+                  [Styles.prev]: day.tag === PREV_DAY,
+                  [Styles.next]: day.tag === NEXT_DAY,
+                  [Styles.current]: day.current,
+                  [Styles.selected]: day.selected,
+                })}
+                title={day.full}
+                key={day.full}
+                onClick={() => onSelectDay(day)}
+                role="presentation"
+              >
+                { day.day }
+              </span>
+            ))
+          }
+        </div>
+      )
     }
-
-    return state
-  }
-
-  // selectDay(day, index) {
-  // const { onSelectDay, onCloseModal } = this.props
-  // const { days } = this.state
-  // const selectedDays = selectDayByIndex(days, index)
-  // this.setState({ days: selectedDays }, () => {
-  //   onSelectDay(day)
-  //   onCloseModal()
-  // })
-  // }
-
-  render() {
-    return (
-      <DateContext.Consumer>
-        {
-          ({ weekTags, days, onSelectDay }) => (
-            <div className={Styles.wrapper}>
-              { weekTags.map(weekName => (
-                <span
-                  className={`${Styles.normal} ${Styles.week}`}
-                  title={`星期${weekName}`}
-                  key={weekName}
-                >
-                  { weekName }
-                </span>
-              )) }
-              {
-                days.map(day => (
-                  <span
-                    className={classNames(Styles.normal, {
-                      [Styles.prev]: day.tag === PREV_DAY,
-                      [Styles.next]: day.tag === NEXT_DAY,
-                      [Styles.current]: day.current,
-                      [Styles.selected]: day.selected,
-                    })}
-                    title={day.full}
-                    key={day.full}
-                    onClick={() => onSelectDay(day)}
-                    role="presentation"
-                  >
-                    { day.day }
-                  </span>
-                ))
-              }
-            </div>
-          )
-        }
-      </DateContext.Consumer>
-    )
-  }
-}
-
-Index.propTypes = {
-  value: PropTypes.string.isRequired,
-  // onSelectDay: PropTypes.func.isRequired,
-  // onCloseModal: PropTypes.func.isRequired,
-}
+  </DateContext.Consumer>
+)
 
 export default Index

src/components/calendar/header.css

@@ -5,9 +5,12 @@
   grid-auto-rows: 34px;
   border-bottom: 1px solid #e8e8e8;
 }
-.wrapper > i {
+.wrapper i {
   cursor: pointer;
 }
+.wrapper i:hover {
+  color: #40a9ff;
+}
 .prev-year {
   margin-left: 7px;
 }
@@ -63,9 +66,13 @@
   line-height: 34px;
   text-align: center;
 }
+
 .link {
   display: inline-block;
   cursor: pointer;
   margin: 0 3px;
   letter-spacing: 1px;
 }
+.link:hover {
+  color: #40a9ff;
+}

src/components/index/DatePicker.js

@@ -1,47 +1,50 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Styles from './picker.css'
-import { getDateFormatFromSepecificDate } from '../../utils'
+import { getDateFormatFromSepecificDate, getCurrentYear, getCurrentMonth } from '../../utils'
 import Modal from '../modal/Modal'
 import { CHINESE_MODEL, WESTERN_MODEL, _ } from '../../const'
 import { DateContext, initialData } from '../../context'
-import { setSelectedDays, getDaysOfMonth, getWeekSort } from '../../helper'
+import {
+  setSelectedDays,
+  getDaysOfMonth,
+  getWeekSort,
+  getDaysAfterchangedYearOrMonth,
+  getPrevYearAndMonth,
+  getNextYearAndMonth,
+  isInCurrentMonth,
+} from '../../helper'
 
 class DatePicker extends Component {
   constructor(props) {
     super(props)
-    const { defaultDate } = this.props
+    const { defaultDate, year, month } = this.props
     this.state = {
+      year: year,
+      month: month,
       value: defaultDate,
       showModal: false,
       ...initialData,
     }
-
-    this.onModalOpen = this.onModalOpen.bind(this)
-    this.onInputChange = this.onInputChange.bind(this)
-    this.onInputClear = this.onInputClear.bind(this)
-    this.onModalClose = this.onModalClose.bind(this)
-    this.onChangeModel = this.onChangeModel.bind(this)
-    this.onSelectDay = this.onSelectDay.bind(this)
   }
 
-  onModalOpen() {
+  onModalOpen = () => {
     this.setState({ showModal: true })
   }
 
-  onModalClose() {
+  onModalClose = () => {
     this.setState({ showModal: false })
   }
 
-  onInputChange(event) {
+  onInputChange = event => {
     this.setState({ value: event.target.value })
   }
 
-  onInputClear() {
+  onInputClear = () => {
     this.setState({ value: '', showModal: false })
   }
 
-  onChangeModel(model) {
+  onChangeModel = model => {
     const { value } = this.state
     let nextModel = model
     if (model === CHINESE_MODEL) {
@@ -60,14 +63,59 @@ class DatePicker extends Component {
     })
   }
 
-  onSelectDay(day) {
+  onSelectDay = day => {
     const { days } = this.state
-    const afterSetDays = setSelectedDays(days, day.full)
+    let renderDays = days
+    if (!isInCurrentMonth(day.full)) {
+      // 不是在【今天】这个月份，需要重新换数据源
+      renderDays = initialData.days
+    }
+
+    const afterSetDays = setSelectedDays(renderDays, day.full)
     this.setState({ value: day.full, days: afterSetDays }, () => {
-      // this.onModalClose()
+      this.onModalClose()
+    })
+  }
+
+  _onChangeYearOrMonth = (changeYear, changeMonth) => {
+    const {
+      model,
+      value,
+      year,
+      month,
+    } = this.state
+    const days = getDaysAfterchangedYearOrMonth(changeYear, changeMonth, model)
+    const afterSetDays = setSelectedDays(days, value)
+    this.setState({
+      days: afterSetDays,
+      year: changeYear === _ ? year : changeYear,
+      month: changeMonth === _ ? month : changeMonth,
     })
   }
 
+  onPrevMonth = () => {
+    const { year, month } = this.state
+    const yearAndMonth = getPrevYearAndMonth(year, month)
+    /* eslint-disable no-underscore-dangle */
+    this._onChangeYearOrMonth(yearAndMonth.year, yearAndMonth.month)
+  }
+
+  onPrevYear = () => {
+    const { year } = this.state
+    this._onChangeYearOrMonth(year - 1, _)
+  }
+
+  onNextMonth = () => {
+    const { year, month } = this.state
+    const yearAndMonth = getNextYearAndMonth(year, month)
+    this._onChangeYearOrMonth(yearAndMonth.year, yearAndMonth.month)
+  }
+
+  onNextYear = () => {
+    const { year } = this.state
+    this._onChangeYearOrMonth(year + 1, _)
+  }
+
   render() {
     const { inline } = this.props
     const { value, showModal } = this.state
@@ -100,6 +148,10 @@ class DatePicker extends Component {
               ...this.state,
               onSelectDay: this.onSelectDay,
               onChangeModel: this.onChangeModel,
+              onPrevMonth: this.onPrevMonth,
+              onPrevYear: this.onPrevYear,
+              onNextMonth: this.onNextMonth,
+              onNextYear: this.onNextYear,
             }
           }
         >
@@ -119,11 +171,15 @@ class DatePicker extends Component {
 DatePicker.defaultProps = {
   inline: false,
   defaultDate: getDateFormatFromSepecificDate(),
+  year: getCurrentYear(),
+  month: getCurrentMonth(),
 }
 
 DatePicker.propTypes = {
   inline: PropTypes.bool,
   defaultDate: PropTypes.string,
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 export default DatePicker

src/components/modal/Modal.js

@@ -12,7 +12,6 @@ const Modal = ({
   isMounted,
   value,
   onInputChange,
-  onCloseModal,
 }) => (
   <React.Fragment>
     <div className={classNames(Styles.container, {
@@ -24,14 +23,13 @@ const Modal = ({
         value={value}
         onInputChange={onInputChange}
       />
-      <div className="calendar">
-        <Header />
-        <Body
-          value={value}
-          onCloseModal={onCloseModal}
-        />
+      <div className={Styles.panel}>
+        <div className={Styles.header}>
+          <Header />
+        </div>
+        <Body />
+        <Footer />
       </div>
-      <Footer />
     </div>
   </React.Fragment>
 )
@@ -44,7 +42,6 @@ Modal.propTypes = {
   isMounted: PropTypes.bool,
   value: PropTypes.string.isRequired,
   onInputChange: PropTypes.func.isRequired,
-  onCloseModal: PropTypes.func.isRequired,
 }
 
 export default delayUnmounting(Modal)

src/components/modal/modal.css

@@ -62,4 +62,7 @@
 }
 .out {
   animation: slideDownOut 0.2s;
+}
+.panel {
+  position: relative;
 }

src/const/index.js

@@ -3,6 +3,7 @@ export * from './week'
 export const CHINESE_MODEL = 'CHINESE_MODEL'
 export const WESTERN_MODEL = 'WESTERN_MODEL'
 export const _ = undefined
+export const noop = () => {}
 
 export const PREV_DAY = 'PREV_DAY'
 export const NEXT_DAY = 'NEXT_DAY'

src/context.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CHINESE_MODEL, _ } from './const'
+import { CHINESE_MODEL, _, noop } from './const'
 import { getDaysOfMonth, getWeekSort } from './helper'
 
 const model = CHINESE_MODEL
@@ -10,8 +10,12 @@ export const initialData = {
   model: model,
   days: days,
   weekTags: weekTags,
-  onChangeModel: () => {},
-  onSelectDay: () => {},
+  onChangeModel: noop,
+  onSelectDay: noop,
+  onPrevMonth: noop,
+  onPrevYear: noop,
+  onNextMonth: noop,
+  onNextYear: noop,
 }
 
 export const DateContext = React.createContext(initialData)

src/helper.js

@@ -9,6 +9,7 @@ import {
   formatMonthOrDay,
   isCurrentDay,
   formatDate,
+  getCurrentDate,
 } from './utils'
 
 export const getWeekSort = (model = CHINESE_MODEL) => {
@@ -47,16 +48,35 @@ const getFullDays = (year, month, day, tag = CURRENT_DAY) => {
   }
 }
 
-const getPrevMonthLeftDays = (year, month, firstDay, model) => {
+export const getPrevYearAndMonth = (year, month) => {
   let prevYear = year
   let prevMonth = month
-  const leftCount = getPrevLeftDays(firstDay, model)
   if (+month === 1) {
     prevYear -= 1
     prevMonth = 12
+  } else {
+    prevMonth -= 1
+  }
+  return { year: prevYear, month: prevMonth }
+}
+
+export const getNextYearAndMonth = (year, month) => {
+  let nextYear = year
+  let nextMonth = month
+  if (+month === 12) {
+    nextYear += 1
+    nextMonth = 1
+  } else {
+    nextMonth += 1
   }
+  return { year: nextYear, month: nextMonth }
+}
 
-  prevMonth -= 1
+const getPrevMonthLeftDays = (year, month, firstDay, model) => {
+  const yearAndMonth = getPrevYearAndMonth(year, month)
+  const prevYear = yearAndMonth.year
+  const prevMonth = yearAndMonth.month
+  const leftCount = getPrevLeftDays(firstDay, model)
 
   const prevDays = []
   const prevMonthDays = getDaysCountOfMonth(prevMonth, prevYear)
@@ -69,15 +89,11 @@ const getPrevMonthLeftDays = (year, month, firstDay, model) => {
 }
 
 const getNextMonthLeftDays = (year, month, days, firstDay, model) => {
-  let nextYear = year
-  let nextMonth = month
+  const yearAndMonth = getNextYearAndMonth(year, month)
+  const nextYear = yearAndMonth.year
+  const nextMonth = yearAndMonth.month
   const leftCount = getPrevLeftDays(firstDay, model)
-  if (+month === 12) {
-    nextYear += 1
-    nextMonth = 1
-  }
 
-  nextMonth += 1
   const nextDays = []
   const nextLefts = 6 * 7 - (leftCount + days)
   for (let i = 0; i < nextLefts; i++) {
@@ -115,3 +131,13 @@ export const setSelectedDays = (days, selectedDay) => {
     return tempDay
   })
 }
+
+export const getDaysAfterchangedYearOrMonth = (year = getCurrentYear(),
+  month = getCurrentMonth(), model = CHINESE_MODEL) => (
+  getDaysOfMonth(year, month, model)
+)
+
+export const isInCurrentMonth = date => {
+  const currentDate = getCurrentDate()
+  return date.substr(0, 7) === currentDate.substr(0, 7)
+}

yarn.lock

@@ -621,6 +621,10 @@ babel-plugin-syntax-async-generators@^6.5.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
 
+babel-plugin-syntax-class-constructor-call@^6.18.0:
+  version "6.18.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
+
 babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
@@ -629,6 +633,10 @@ babel-plugin-syntax-decorators@^6.13.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
 
+babel-plugin-syntax-do-expressions@^6.8.0:
+  version "6.13.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
+
 babel-plugin-syntax-dynamic-import@^6.18.0:
   version "6.18.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
@@ -637,10 +645,18 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
 
+babel-plugin-syntax-export-extensions@^6.8.0:
+  version "6.13.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
+
 babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
+babel-plugin-syntax-function-bind@^6.8.0:
+  version "6.13.0"
+  resolved "http://registry.npmjs.org/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
+
 babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -669,6 +685,14 @@ babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-
     babel-plugin-syntax-async-functions "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-class-constructor-call@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz#80dc285505ac067dcb8d6c65e2f6f11ab7765ef9"
+  dependencies:
+    babel-plugin-syntax-class-constructor-call "^6.18.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
 babel-plugin-transform-class-properties@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
@@ -688,6 +712,13 @@ babel-plugin-transform-decorators@^6.24.1:
     babel-template "^6.24.1"
     babel-types "^6.24.1"
 
+babel-plugin-transform-do-expressions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.22.0.tgz#28ccaf92812d949c2cd1281f690c8fdc468ae9bb"
+  dependencies:
+    babel-plugin-syntax-do-expressions "^6.8.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -864,6 +895,13 @@ babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-e
     babel-plugin-syntax-exponentiation-operator "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-export-extensions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz#53738b47e75e8218589eea946cbbd39109bbe653"
+  dependencies:
+    babel-plugin-syntax-export-extensions "^6.8.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-flow-strip-types@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
@@ -871,6 +909,13 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-function-bind@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.22.0.tgz#c6fb8e96ac296a310b8cf8ea401462407ddf6a97"
+  dependencies:
+    babel-plugin-syntax-function-bind "^6.8.0"
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-object-rest-spread@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
@@ -971,6 +1016,22 @@ babel-preset-react@^6.24.1:
     babel-plugin-transform-react-jsx-source "^6.22.0"
     babel-preset-flow "^6.23.0"
 
+babel-preset-stage-0@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.24.1.tgz#5642d15042f91384d7e5af8bc88b1db95b039e6a"
+  dependencies:
+    babel-plugin-transform-do-expressions "^6.22.0"
+    babel-plugin-transform-function-bind "^6.22.0"
+    babel-preset-stage-1 "^6.24.1"
+
+babel-preset-stage-1@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz#7692cd7dcd6849907e6ae4a0a85589cfb9e2bfb0"
+  dependencies:
+    babel-plugin-transform-class-constructor-call "^6.24.1"
+    babel-plugin-transform-export-extensions "^6.22.0"
+    babel-preset-stage-2 "^6.24.1"
+
 babel-preset-stage-2@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"