From 8200affa7f3ff9def0dbaaaa111157e36ccb4d31 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 23 Dec 2016 12:01:39 +0800 Subject: [PATCH] Updates --- CHANGELOG.en-US.md.js | 4 +- CHANGELOG.zh-CN.md.js | 4 +- changelog-cn.html | 18 +- changelog.html | 18 +- common.js | 4 +- components/affix-cn/index.html | 16 +- components/affix/demo.js | 42 +- components/affix/index.en-US.md.js | 4 +- components/affix/index.html | 16 +- components/affix/index.zh-CN.md.js | 4 +- components/alert-cn/index.html | 20 +- components/alert/demo.js | 74 +- components/alert/index.en-US.md.js | 4 +- components/alert/index.html | 20 +- components/alert/index.zh-CN.md.js | 4 +- components/anchor-cn/index.html | 12 +- components/anchor/demo.js | 34 +- components/anchor/index.en-US.md.js | 4 +- components/anchor/index.html | 12 +- components/anchor/index.zh-CN.md.js | 4 +- components/auto-complete-cn/index.html | 16 +- components/auto-complete/demo.js | 34 +- components/auto-complete/index.en-US.md.js | 4 +- components/auto-complete/index.html | 16 +- components/auto-complete/index.zh-CN.md.js | 4 +- components/back-top-cn/index.html | 14 +- components/back-top/demo.js | 34 +- components/back-top/index.en-US.md.js | 4 +- components/back-top/index.html | 14 +- components/back-top/index.zh-CN.md.js | 4 +- components/badge-cn/index.html | 26 +- components/badge/demo.js | 78 +- components/badge/index.en-US.md.js | 4 +- components/badge/index.html | 26 +- components/badge/index.zh-CN.md.js | 4 +- components/breadcrumb-cn/index.html | 20 +- components/breadcrumb/demo.js | 58 +- components/breadcrumb/index.en-US.md.js | 4 +- components/breadcrumb/index.html | 20 +- components/breadcrumb/index.zh-CN.md.js | 4 +- components/button-cn/index.html | 24 +- components/button/demo.js | 56 +- components/button/index.en-US.md.js | 4 +- components/button/index.html | 24 +- components/button/index.zh-CN.md.js | 4 +- components/calendar-cn/index.html | 42 +- components/calendar/demo.js | 64 +- components/calendar/index.en-US.md.js | 4 +- components/calendar/index.html | 42 +- components/calendar/index.zh-CN.md.js | 4 +- components/card-cn/index.html | 26 +- components/card/demo.js | 70 +- components/card/index.en-US.md.js | 4 +- components/card/index.html | 26 +- components/card/index.zh-CN.md.js | 4 +- components/carousel-cn/index.html | 16 +- components/carousel/demo.js | 50 +- components/carousel/index.en-US.md.js | 4 +- components/carousel/index.html | 16 +- components/carousel/index.zh-CN.md.js | 4 +- components/cascader-cn/index.html | 26 +- components/cascader/demo.js | 90 +- components/cascader/index.en-US.md.js | 4 +- components/cascader/index.html | 26 +- components/cascader/index.zh-CN.md.js | 4 +- components/checkbox-cn/index.html | 16 +- components/checkbox/demo.js | 58 +- components/checkbox/index.en-US.md.js | 4 +- components/checkbox/index.html | 16 +- components/checkbox/index.zh-CN.md.js | 4 +- components/collapse-cn/index.html | 18 +- components/collapse/demo.js | 50 +- components/collapse/index.en-US.md.js | 4 +- components/collapse/index.html | 18 +- components/collapse/index.zh-CN.md.js | 4 +- components/date-picker-cn/index.html | 28 +- components/date-picker/demo.js | 1504 +- components/date-picker/index.en-US.md.js | 4 +- components/date-picker/index.html | 28 +- components/date-picker/index.zh-CN.md.js | 4 +- components/dropdown-cn/index.html | 20 +- components/dropdown/demo.js | 110 +- components/dropdown/index.en-US.md.js | 4 +- components/dropdown/index.html | 20 +- components/dropdown/index.zh-CN.md.js | 4 +- components/form-cn/index.html | 76 +- components/form/demo.js | 230 +- components/form/index.en-US.md.js | 4 +- components/form/index.html | 78 +- components/form/index.zh-CN.md.js | 4 +- components/grid-cn/index.html | 52 +- components/grid/demo.js | 90 +- components/grid/index.en-US.md.js | 4 +- components/grid/index.html | 54 +- components/grid/index.zh-CN.md.js | 4 +- components/icon-cn/index.html | 8 +- components/icon/index.en-US.md.js | 6 +- components/icon/index.html | 8 +- components/icon/index.zh-CN.md.js | 6 +- components/input-cn/index.html | 36 +- components/input-number-cn/index.html | 18 +- components/input-number/demo.js | 50 +- components/input-number/index.en-US.md.js | 4 +- components/input-number/index.html | 18 +- components/input-number/index.zh-CN.md.js | 4 +- components/input/demo.js | 76 +- components/input/index.en-US.md.js | 4 +- components/input/index.html | 42 +- components/input/index.zh-CN.md.js | 4 +- components/locale-provider-cn/index.html | 26 +- components/locale-provider/demo.js | 80 +- components/locale-provider/index.en-US.md.js | 4 +- components/locale-provider/index.html | 26 +- components/locale-provider/index.zh-CN.md.js | 4 +- components/mention-cn/index.html | 24 +- components/mention/demo.js | 90 +- components/mention/index.en-US.md.js | 4 +- components/mention/index.html | 24 +- components/mention/index.zh-CN.md.js | 4 +- components/menu-cn/index.html | 20 +- components/menu/demo.js | 74 +- components/menu/index.en-US.md.js | 6 +- components/menu/index.html | 20 +- components/menu/index.zh-CN.md.js | 6 +- components/message-cn/index.html | 18 +- components/message/demo.js | 50 +- components/message/index.en-US.md.js | 4 +- components/message/index.html | 18 +- components/message/index.zh-CN.md.js | 4 +- components/modal-cn/index.html | 28 +- components/modal/demo.js | 86 +- components/modal/index.en-US.md.js | 4 +- components/modal/index.html | 44 +- components/modal/index.zh-CN.md.js | 4 +- components/notification-cn/index.html | 20 +- components/notification/demo.js | 58 +- components/notification/index.en-US.md.js | 4 +- components/notification/index.html | 28 +- components/notification/index.zh-CN.md.js | 4 +- components/pagination-cn/index.html | 26 +- components/pagination/demo.js | 82 +- components/pagination/index.en-US.md.js | 4 +- components/pagination/index.html | 26 +- components/pagination/index.zh-CN.md.js | 4 +- components/popconfirm-cn/index.html | 16 +- components/popconfirm/demo.js | 66 +- components/popconfirm/index.en-US.md.js | 9 +- components/popconfirm/index.html | 16 +- components/popconfirm/index.zh-CN.md.js | 9 +- components/popover-cn/index.html | 18 +- components/popover/demo.js | 58 +- components/popover/index.en-US.md.js | 10 +- components/popover/index.html | 18 +- components/popover/index.zh-CN.md.js | 10 +- components/progress-cn/index.html | 60 +- components/progress/demo.js | 74 +- components/progress/index.en-US.md.js | 4 +- components/progress/index.html | 60 +- components/progress/index.zh-CN.md.js | 4 +- components/radio-cn/index.html | 18 +- components/radio/demo.js | 56 +- components/radio/index.en-US.md.js | 4 +- components/radio/index.html | 18 +- components/radio/index.zh-CN.md.js | 4 +- components/rate-cn/index.html | 14 +- components/rate/demo.js | 50 +- components/rate/index.en-US.md.js | 4 +- components/rate/index.html | 14 +- components/rate/index.zh-CN.md.js | 4 +- components/select-cn/index.html | 64 +- components/select/demo.js | 678 +- components/select/index.en-US.md.js | 4 +- components/select/index.html | 64 +- components/select/index.zh-CN.md.js | 4 +- components/slider-cn/index.html | 26 +- components/slider/demo.js | 78 +- components/slider/index.en-US.md.js | 4 +- components/slider/index.html | 32 +- components/slider/index.zh-CN.md.js | 4 +- components/spin-cn/index.html | 22 +- components/spin/demo.js | 70 +- components/spin/index.en-US.md.js | 4 +- components/spin/index.html | 22 +- components/spin/index.zh-CN.md.js | 4 +- components/steps-cn/index.html | 26 +- components/steps/demo.js | 78 +- components/steps/index.en-US.md.js | 4 +- components/steps/index.html | 26 +- components/steps/index.zh-CN.md.js | 4 +- components/switch-cn/index.html | 16 +- components/switch/demo.js | 50 +- components/switch/index.en-US.md.js | 4 +- components/switch/index.html | 16 +- components/switch/index.zh-CN.md.js | 4 +- components/table-cn/index.html | 76 +- components/table/demo.js | 4388 +- components/table/index.en-US.md.js | 4 +- components/table/index.html | 76 +- components/table/index.zh-CN.md.js | 4 +- components/tabs-cn/index.html | 34 +- components/tabs/demo.js | 110 +- components/tabs/index.en-US.md.js | 4 +- components/tabs/index.html | 34 +- components/tabs/index.zh-CN.md.js | 4 +- components/tag-cn/index.html | 16 +- components/tag/demo.js | 68 +- components/tag/index.en-US.md.js | 4 +- components/tag/index.html | 18 +- components/tag/index.zh-CN.md.js | 4 +- components/time-picker-cn/index.html | 24 +- components/time-picker/demo.js | 80 +- components/time-picker/index.en-US.md.js | 4 +- components/time-picker/index.html | 24 +- components/time-picker/index.zh-CN.md.js | 4 +- components/timeline-cn/index.html | 16 +- components/timeline/demo.js | 50 +- components/timeline/index.en-US.md.js | 4 +- components/timeline/index.html | 16 +- components/timeline/index.zh-CN.md.js | 4 +- components/tooltip-cn/index.html | 16 +- components/tooltip/demo.js | 42 +- components/tooltip/index.en-US.md.js | 9 +- components/tooltip/index.html | 16 +- components/tooltip/index.zh-CN.md.js | 9 +- components/transfer-cn/index.html | 18 +- components/transfer/demo.js | 56 +- components/transfer/index.en-US.md.js | 4 +- components/transfer/index.html | 16 +- components/transfer/index.zh-CN.md.js | 4 +- components/tree-cn/index.html | 20 +- components/tree-select-cn/index.html | 18 +- components/tree-select/demo.js | 42 +- components/tree-select/index.en-US.md.js | 4 +- components/tree-select/index.html | 20 +- components/tree-select/index.zh-CN.md.js | 4 +- components/tree/demo.js | 64 +- components/tree/index.en-US.md.js | 4 +- components/tree/index.html | 26 +- components/tree/index.zh-CN.md.js | 4 +- components/upload-cn/index.html | 36 +- components/upload/demo.js | 90 +- components/upload/index.en-US.md.js | 4 +- components/upload/index.html | 36 +- components/upload/index.zh-CN.md.js | 4 +- ...3661.html => demo-0.14660873555057696.html | 0 ...93677.html => demo-0.3931746537004661.html | 0 ...35519.html => demo-0.6382878178051792.html | 0 ...285329.html => demo-0.901383514347559.html | 0 docs/pattern/advanced-search-cn.html | 6 +- docs/pattern/advanced-search.html | 6 +- docs/pattern/advanced-search.md.js | 4 +- docs/pattern/classic-cn.html | 6 +- docs/pattern/classic.html | 6 +- docs/pattern/classic.md.js | 4 +- docs/pattern/complex-table-cn.html | 6 +- docs/pattern/complex-table.html | 6 +- docs/pattern/complex-table.md.js | 4 +- docs/pattern/form-cn.html | 6 +- docs/pattern/form.html | 6 +- docs/pattern/form.md.js | 4 +- docs/pattern/list-cn.html | 6 +- docs/pattern/list.html | 6 +- docs/pattern/list.md.js | 4 +- docs/pattern/navigation-cn.html | 6 +- docs/pattern/navigation.html | 6 +- docs/pattern/navigation.md.js | 4 +- docs/pattern/table-cn.html | 6 +- docs/pattern/table.html | 6 +- docs/pattern/table.md.js | 4 +- docs/practice/bussiness-cn.html | 6 +- docs/practice/bussiness.en-US.md.js | 4 +- docs/practice/bussiness.html | 6 +- docs/practice/bussiness.zh-CN.md.js | 4 +- docs/practice/cases-cn.html | 8 +- docs/practice/cases.en-US.md.js | 4 +- docs/practice/cases.html | 20 +- docs/practice/cases.zh-CN.md.js | 4 +- docs/react/customize-theme-cn.html | 12 +- docs/react/customize-theme.en-US.md.js | 6 +- docs/react/customize-theme.html | 10 +- docs/react/customize-theme.zh-CN.md.js | 6 +- docs/react/getting-started-cn.html | 14 +- docs/react/getting-started.en-US.md.js | 4 +- docs/react/getting-started.html | 18 +- docs/react/getting-started.zh-CN.md.js | 4 +- docs/react/i18n-solution-cn.html | 6 +- docs/react/i18n-solution.en-US.md.js | 6 +- docs/react/i18n-solution.html | 6 +- docs/react/i18n-solution.zh-CN.md.js | 6 +- docs/react/install-cn.html | 6 +- docs/react/install.en-US.md.js | 16 +- docs/react/install.html | 6 +- docs/react/install.zh-CN.md.js | 18 +- docs/react/introduce-cn.html | 10 +- docs/react/introduce.en-US.md.js | 4 +- docs/react/introduce.html | 18 +- docs/react/introduce.zh-CN.md.js | 4 +- docs/react/practical-projects-cn.html | 56 +- docs/react/practical-projects.en-US.md.js | 33 +- docs/react/practical-projects.html | 56 +- docs/react/practical-projects.zh-CN.md.js | 31 +- docs/react/use-with-create-react-app-cn.html | 166 + .../use-with-create-react-app.en-US.md.js | 107 + docs/react/use-with-create-react-app.html | 167 + .../use-with-create-react-app.zh-CN.md.js | 110 + docs/resource/download-cn.html | 6 +- docs/resource/download.en-US.md.js | 4 +- docs/resource/download.html | 6 +- docs/resource/download.zh-CN.md.js | 4 +- docs/resource/github-cn.html | 6 +- docs/resource/github.html | 6 +- docs/resource/github.md.js | 4 +- docs/resource/reference-cn.html | 6 +- docs/resource/reference.en-US.md.js | 4 +- docs/resource/reference.html | 6 +- docs/resource/reference.zh-CN.md.js | 4 +- docs/spec/alignment-cn.html | 6 +- docs/spec/alignment.en-US.md.js | 4 +- docs/spec/alignment.html | 6 +- docs/spec/alignment.zh-CN.md.js | 4 +- docs/spec/colors-cn.html | 6 +- docs/spec/colors.html | 6 +- docs/spec/colors.md.js | 344 +- docs/spec/contrast-cn.html | 6 +- docs/spec/contrast.en-US.md.js | 4 +- docs/spec/contrast.html | 6 +- docs/spec/contrast.zh-CN.md.js | 4 +- docs/spec/direct-cn.html | 6 +- docs/spec/direct.en-US.md.js | 4 +- docs/spec/direct.html | 8 +- docs/spec/direct.zh-CN.md.js | 4 +- docs/spec/feature-cn.html | 8 +- docs/spec/feature.html | 8 +- docs/spec/feature.md.js | 4 +- docs/spec/font-cn.html | 8 +- docs/spec/font.html | 8 +- docs/spec/font.md.js | 4 +- docs/spec/introduce-cn.html | 6 +- docs/spec/introduce.en-US.md.js | 4 +- docs/spec/introduce.html | 6 +- docs/spec/introduce.zh-CN.md.js | 4 +- docs/spec/invitation-cn.html | 8 +- docs/spec/invitation.en-US.md.js | 4 +- docs/spec/invitation.html | 6 +- docs/spec/invitation.zh-CN.md.js | 4 +- docs/spec/layout-cn.html | 36 +- docs/spec/layout.html | 36 +- docs/spec/layout/demo.js | 80 +- docs/spec/layout/index.md.js | 4 +- docs/spec/lightweight-cn.html | 6 +- docs/spec/lightweight.en-US.md.js | 4 +- docs/spec/lightweight.html | 8 +- docs/spec/lightweight.zh-CN.md.js | 4 +- docs/spec/motion-cn.html | 8 +- docs/spec/motion.html | 8 +- docs/spec/motion.md.js | 6 +- docs/spec/principle-cn.html | 6 +- docs/spec/principle.en-US.md.js | 4 +- docs/spec/principle.html | 6 +- docs/spec/principle.zh-CN.md.js | 4 +- docs/spec/proximity-cn.html | 6 +- docs/spec/proximity.en-US.md.js | 4 +- docs/spec/proximity.html | 6 +- docs/spec/proximity.zh-CN.md.js | 4 +- docs/spec/reaction-cn.html | 10 +- docs/spec/reaction.en-US.md.js | 4 +- docs/spec/reaction.html | 8 +- docs/spec/reaction.zh-CN.md.js | 4 +- docs/spec/repetition-cn.html | 6 +- docs/spec/repetition.en-US.md.js | 4 +- docs/spec/repetition.html | 6 +- docs/spec/repetition.zh-CN.md.js | 4 +- docs/spec/stay-cn.html | 6 +- docs/spec/stay.en-US.md.js | 4 +- docs/spec/stay.html | 8 +- docs/spec/stay.zh-CN.md.js | 4 +- docs/spec/transition-cn.html | 6 +- docs/spec/transition.en-US.md.js | 4 +- docs/spec/transition.html | 8 +- docs/spec/transition.zh-CN.md.js | 4 +- docs/spec/typography-cn.html | 12 +- docs/spec/typography.html | 12 +- docs/spec/typography.md.js | 4 +- index-1.css | 72 +- index-2.css | 71 +- index-cn.html | 8 +- index.css | 85 +- index.html | 8 +- index.js | 198451 +++++++-------- 389 files changed, 106189 insertions(+), 107126 deletions(-) rename demo-0.2108206916853661.html => demo-0.14660873555057696.html (100%) rename demo-0.3493634722993677.html => demo-0.3931746537004661.html (100%) rename demo-0.393643733735519.html => demo-0.6382878178051792.html (100%) rename demo-0.5344172577285329.html => demo-0.901383514347559.html (100%) create mode 100644 docs/react/use-with-create-react-app-cn.html create mode 100644 docs/react/use-with-create-react-app.en-US.md.js create mode 100644 docs/react/use-with-create-react-app.html create mode 100644 docs/react/use-with-create-react-app.zh-CN.md.js diff --git a/CHANGELOG.en-US.md.js b/CHANGELOG.en-US.md.js index d09c7204d..88d732a7d 100644 --- a/CHANGELOG.en-US.md.js +++ b/CHANGELOG.en-US.md.js @@ -1,6 +1,6 @@ -webpackJsonp([203,204],{ +webpackJsonp([205,206],{ -/***/ 621: +/***/ 1340: /***/ function(module, exports, __webpack_require__) { 'use strict'; diff --git a/CHANGELOG.zh-CN.md.js b/CHANGELOG.zh-CN.md.js index a66f6ecd4..9e6098d07 100644 --- a/CHANGELOG.zh-CN.md.js +++ b/CHANGELOG.zh-CN.md.js @@ -1,6 +1,6 @@ -webpackJsonp([202,204],{ +webpackJsonp([204,206],{ -/***/ 622: +/***/ 1341: /***/ function(module, exports, __webpack_require__) { 'use strict'; diff --git a/changelog-cn.html b/changelog-cn.html index f3fb02a88..8713aa30d 100644 --- a/changelog-cn.html +++ b/changelog-cn.html @@ -30,35 +30,35 @@
-

更新日志

如果需要查看 2.0.0 之前的更新日志，请移步 GitHub。

  • 2.5.2#

    2016-12-10

    • 优化 Menu 已选择项的样式。

    • 修复 Mention 不能响应 onFocus 和 onBlur 的问题。#4163

    • 修复 disabled 和 checked 的 Radio 之间会多一条阴影的问题。#4114 @jdz321

    • 修复 RangePicker、TimePicker、Calendar 设置 Moment 的 defaultValue 和 value 时也会报错的问题。#4147

    • 修复 Affix 在开启动画的 Tabs 里使用时会消失的问题。#3943

    • 修复 Cascader 手动选择和搜索选择时 onChange 接收到的 selectedOptions 不同的问题。#4096

    • 修复 Tabs 页增加到一定数量时会产生偏移的问题。#3637

    • Table

      • 居中对齐表头分组的父表头。

      • 修正设置 filterDropdownVisible 时不生效的问题。#4162

  • 2.5.1#

    2016-12-03

    • 提升网站首页在移动端访问的体验。

    • 补充从 1.x 升级到 2.x 时的组件改动警告提示。#4028

    • 现在 ToolTip、Popover、Popconfirm 支持直接包裹文本节点和多个节点。#3924

    • Anchor

      • 修复快速滚动时的定位问题。#4053

      • 修复 target 指定父元素 ref 时无效的问题。#4037

    • Table

      • 修复设置 defaultChecked 时的一个选中问题。#4020

      • 修复分组表头中筛选功能无法使用的问题。#4099

    • 修复在 Input[type="textarea"] 上使用 Popover 定位错误问题。#4092

    • 修复 Popconfirm 的 visible 属性失效的问题。#4068

    • 修复 TimePicker 无法设置 style.width 的问题。

    • 修复 Steps 自定义图标和默认图标大小不一致的问题。#3817

    • 修复 Form、Button、Slider、Table 等组件的一些样式细节。

  • 2.5.0#

    2016-11-25

    • 默认主题风格修改为支付宝钱包风格，及大量样式优化。

    • 支持服务端渲染。（Mention 会因为 draft-js 的问题有 warning）

    • 引入 Jest Snapshot 测试组件结构及服务端渲染问题。

    • 官网及文档优化。

    • 新增自定义主题的 文档。

    • 新增 Sketch 资源文件。

    • LocaleProvider 新增巴西语支持。#4004 @nathantn

    • DatePicker

      • DatePicker 现在可以决定是否展示 “今天” 按钮。commit

      • RangePicker 现在可以自定义快捷选择。demo

      • 修复 DatePicker 设置 showTime 后 “此刻” 按钮失效的问题。#3748

      • 修复 RangePicker[format] 失效的问题。#3808

    • 新增并优化部分 Icon。#3977

    • 新增 Input.Search 控件。demo

    • Mention onSelect 事件现在可以获取完整的数据。#3867

    • Pagination 现在支持展示当前页的索引范围。demo

    • Table

      • 自定义筛选的显示隐藏现在可以通过代码控制。demo

      • 支持 JSX 风格的方式设置 columns。demo

      • 现在可以监听单元格的点击事件。#3774

      • 修复无边框 Table 头部的圆角样式问题。

      • 修复 title 和 footer 高度不随 Table[size] 变化的问题。commit

      • 修复选中状态出错的问题。#3900

    • Upload

      • 修复 children 不能为 null 的问题。

      • 修复预览逻辑的问题。commit

    • 修复 Badge 会覆盖其他组件的问题。#3898

    • 修复多行 Checkbox 样式不对齐的问题。#3971 @flashback313

    • 修复 InputNumber 与其它表单控件不对齐的问题。#3866(comment)

    • 修复 Menu.Divider 样式问题。#3813

    • 修复 Popover 直接内嵌 Checkbox 和 Radio 无效的问题。#3455

    • 修复 Select combobox 高度异常问题。#3855

    • 修复 Switch actived 后的样式问题。#3838

    • 修复 Transfer 搜索无结果时不展示 “Not Found” 提示的问题。#3996

    • 修复 TreeSelect 占位符的样式问题。#3841

    • 修复 TypeScript 编译报错的问题。#3969 @AlbertZheng

    • 修复表单反馈图标影响用户操作的问题。#3891

  • 2.4.3#

    2016-11-17

    • 修复 Anchor 内部 querySelector 报错，并做了一些体验优化 。#3832 #3844

  • 2.4.2#

    2016-11-13

    • 修复 Dropdown.Button 不弹出的问题。#3815

  • 2.4.1#

    2016-11-11

    • 修复 2.4.0 组件 index 文件丢失的问题。

  • 2.4.0#

    2016-11-11

    • 调整了组件的导航结构。

    • 新增 Anchor 锚点组件。

    • 整理了样式变量，修复 @font-size-base 和 @text-color 在部分组件无效的问题，新增 @font-size-lg @text-color-secondary，并移除了部分无用的变量。

    • Transfer 组件新增了受控属性 selectedKeys。#3729

    • Tag 新增选中状态。

    • 修复 Dropdown.Button 不支持 visible 和 onVisibleChange 的问题。#3779

    • 修复 DatePicker[showTime]`` 的此刻` 按钮。#3748

    • 修复 Steps 竖直方向的样式。#3760

    • 修复 Spin 组件在 IE10+ 的样式问题。#3755

    • 修复 Mention 组件的 focus 逻辑. #3801

    • 修复 Progress 组件的动画问题。#3784

    • 修复 Select 搜索时的丢失焦点问题。#3778

    • 修复 TimePicker 不支持 format="HH" 等格式的问题。#3793

    • 修复 Input 的 suffix 部分区域中鼠标事件无法响应的问题。#3714

    • 优化了 Table 选择的性能。#3757

    • 优化 Carousel 的默认样式。

    • 优化 Checkbox 和 Radio 的样式。#3590

    • 修复 DatePicker、Form、Table 等组件的样式细节。

  • 2.3.2#

    2016-11-09

    • 修复使用 getFieldProps 会导致死循环的问题。

  • 2.3.1#

    2016-11-07

    • 修正上个版本缺少 dist/antd.css 的问题。

  • 2.3.0#

    2016-11-04

    • 升级 normalize.css 到 5.0。

    • package.json 的 main 换成了 lib/index.js。#3397

    • 全新的 Spin 设计。

    • TimePicker 新增了 addon 以支持自定义的附加内容。

    • Tree 新增了 onDragEnd。

    • Collapse 新增了 bordered。

    • 优化 Tabs 切换时的动画效果。

    • 优化 Radio 和 Checkbox 在禁用和鼠标停留时的样式。#3590

    • 优化 Transfer 的性能。#2860

    • 修复 Popover 嵌套时的样式问题。#3448

    • 修复 Transfer 服务端渲染报错的问题。#3686

    • 修复 Upload picture-card 模式下新上传的图片不显示预览的问题。#3706 @denzw

    • DatePicker

      • 在 showTime 模式下现在失去焦点也会触发 onChange。

      • MonthPicker 增加了 monthCellContentRender 和 cellContentRender。

      • RangePicker 现在可以手动输入时间了。#3718

      • 新增了捷克语的翻译。

    • Badge

      • 优化鼠标停留时超过 99 的数字显示。#3645

      • 修复单独使用时会有移动动画的问题。#3709

    • Mention

      • 修复会被 Table 遮住的问题。#3588

      • 新增 getSuggestionContainer 来指定容器。#3658

    • Tag

    • Radio.Group

      • 新增 className。

      • children 为 null 或 undefined 时现在会被忽略。

    • Select

      • 新增 tokenSeparators 支持粘贴时自动分词。#2071

      • 新增 onFocus 回调。#3587

      • 修复 combobox 模式下选中项不能正确显示的问题。#3401

  • 2.2.1#

    2016-11-02

    • 修复 Form 中 DatePicker[showtime]（受控）无法使用的问题。#3665

  • 2.2.0#

    2016-10-28

    • 支持 TypeScript@2.0。@AlbertZheng #3358

    • 不再强依赖于 React 特定版本。#3627

    • Alert 支持 className style 属性。

    • DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。#3618

    • Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。#3212

    • RangePicker 现在可以设置不可选的时间。#

    • Switch

      • 宽度现在会随着 checkedChildren/unCheckedChildren 自动调整。#3380

      • 优化切换动画。

    • Upload 现在可以 自定义上传方式。@edgji

    • Icon

      • 新增 bulb select like-o dislike-o。

      • 调整 loading like dislike。

    • 优化 Card DatePicker Icon Table 的 TypeScript 定义。@infeng 3468 #3603 #3531

    • 修复 Cascader defaultValue 失效的问题。#3470

    • 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。#3481

    • DatePicker

      • 修复设置 DatePicker[showTime] 后 onChange 事件触发时机问题。#3523

    • 修复 Dropdown.Button disabled 后仍然响应操作的问题。#3535

    • Menu

    • 修复 message 加载状态无动画的问题。#3536

    • Form

      • 修复 Form[inline] 与 Input[addonBefore|addonAfter] 一起使用时的样式问题。#3524

      • 修复 Form.Item 内 Radio.Button 样式问题。

      • 修复 Form.Item 内搜索按钮的样式问题。#3630

      • 修复用户无输入时 Form.Item 识别为校验成功的问题。#3613

    • 当 Popover[title] 没有设置时，不再限制 Popover 的最小宽度。

    • Table

      • 修复固定表头在没有数据情况下的样式问题。#3567

      • 修复无数据时会覆盖 SubMenu 的问题。#3521

    • Tabs

      • 修复卡片叶签头部高度与设计稿不一致的问题。

      • 修复 TabPane 的高度会被同级 TabPane 撑高的问题。#3304

    • 修复 TreeSelect[showSearch] 样式问题。#3520

  • 2.1.0#

    2016-10-16

    • Icon 现在支持旋转动画。

    • Tabs 现在可以禁用切换动画。#3324

    • 新增西班牙语的 localization 支持。@Danjavia

    • 更新俄语的 localization 文案。@plandem

    • 新增 AutoComplete[onselect] 回调。

    • 优化 Modal 样式细节。

    • 优化 Tooltip 动画。

    • 优化 Transfer 按钮的样式。

    • 优化 Tree 的样式细节。

    • 整理和修复了部分 less 变量。

    • 修复服务端渲染时全量引入 antd 报错的问题。

    • 修复 Affix 与 BackTop 的服务端渲染问题。#3283 #3343

    • 修复 Card[title] 内无法使用 h3 之类的标签的问题。#3388

    • 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。#3350

    • DatePicker

      • 修复设置 showTime 后，onChange 重复触发的问题。#3376

      • 修复浮层与 Trigger 日期格式不一致的问题。#3405 #3298

      • 修复与 TimePicker 样式冲突问题。#3312 #3307

    • 修复 Form.Item 标签文案过长溢出的问题。

    • 修复 Icon 在 Safari 下会出现边框的问题。

    • 修复 InputNubmer 键盘事件死循环问题。#3239

    • 修复 Popover 箭头样式问题。

    • 修复 Popover 和 Popconfirm 的 arrowPointAtCenter 无效的问题。

    • Select

      • 修复样式重复引入的问题。#3376

      • 修复 notFoundContent 无法置空的问题。#3345

      • 修复 Table 内使用 Select[showsearch] 后宽度会跳动的问题。#3413

    • 修复 Table 边框线与页头页脚冲突的问题。#3301

    • 修复 TabPane 高度不随内容变化的问题。#3377

    • 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。#3264

    • Upload

      • 修复用户自定义 onRemove 事件会覆盖默认行为的问题。#3317

      • 修复图片卡片样式问题。#3316

    • 修复项目构建时 moment locales 找不到的问题。#3204 #3411

  • 2.0.1#

    2016-10-01

    • 修复无法调用 react-slick 方法的问题。#3164

    • 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。#3159

    • 修复 Affix 不支持服务端渲染的问题。#3216

    • 修复 Mention 不支持 onSelect placeholder 的问题。#3236 #3226

    • 修复 Transfer 与 getFieldDecorator 一起使用时的报错问题。

    • 修复 LocaleProvider 对时间组件无效的问题。

    • 修复 Cascader 搜索模式搜索文字显示不了的问题。

    • 修复 Spin 动画与文案整体不垂直居中的问题。

    • 修复 RangePicker Modal Tag Progress 等组件样式问题。

  • 2.0.0#

    2016-09-28

    很高兴的通知各位，经过四个月时间的紧密开发，antd@2.0.0 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 反馈给我们。

    2.x 主要变化#

    • 开发语言改为 TypeScript，提供 官方支持的 .d.ts 文件，感谢 #1846 中所有参与到这次重构的人以及后期 @infeng 对其的完善。

    • 新增英文文档， 以后将同时提供中英双语文档，感谢 #1471 里所有参与到翻译和审阅工作中的人。

    • 时间类组件 DatePicker、TimePicker、Calendar 等的底层 使用 moment 替换 gregorian-calendar。

    • 全新设计的 图标。

    • 新增提及组件 Mention。

    • 新增自动完成组件 AutoComplete。

    • Form 新增 getFieldDecorator 作为 getFieldProps 的替代，对于不正确的使用方式 getFieldDecorator 会给出提示，可以降低踩坑的概率。相关讨论见 #1533。

    • Table 支持 表头分组。@yesmeck

    • 完全移除 antd@1.x 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。

    2.x 不兼容改动#

    建议从 1.x 升级时，直接升级到 2.x 的最新版本。

    此版本有部分不兼容的改动，升级时确保修改相应的使用代码。

    • 时间类组件的 value 和 defaultValue 不再支持 String/Date 类型，请使用 moment。

      - <TimePicker defaultValue="12:08:23" />
+      
      更新日志
      如果需要查看 2.0.0 之前的更新日志，请移步 GitHub。
      • 2.5.2#
        2016-12-10
        • 优化 Menu 已选择项的样式。
        • 修复 Mention 不能响应 onFocus 和 onBlur 的问题。#4163
        • 修复 disabled 和 checked 的 Radio 之间会多一条阴影的问题。#4114 @jdz321
        • 修复 RangePicker、TimePicker、Calendar 设置 Moment 的 defaultValue 和 value 时也会报错的问题。#4147
        • 修复 Affix 在开启动画的 Tabs 里使用时会消失的问题。#3943
        • 修复 Cascader 手动选择和搜索选择时 onChange 接收到的 selectedOptions 不同的问题。#4096
        • 修复 Tabs 页增加到一定数量时会产生偏移的问题。#3637
        • Table
          • 居中对齐表头分组的父表头。
          • 修正设置 filterDropdownVisible 时不生效的问题。#4162
      • 2.5.1#
        2016-12-03
        • 提升网站首页在移动端访问的体验。
        • 补充从 1.x 升级到 2.x 时的组件改动警告提示。#4028
        • 现在 ToolTip、Popover、Popconfirm 支持直接包裹文本节点和多个节点。#3924
        • Anchor
          • 修复快速滚动时的定位问题。#4053
          • 修复 target 指定父元素 ref 时无效的问题。#4037
        • Table
          • 修复设置 defaultChecked 时的一个选中问题。#4020
          • 修复分组表头中筛选功能无法使用的问题。#4099
        • 修复在 Input[type="textarea"] 上使用 Popover 定位错误问题。#4092
        • 修复 Popconfirm 的 visible 属性失效的问题。#4068
        • 修复 TimePicker 无法设置 style.width 的问题。
        • 修复 Steps 自定义图标和默认图标大小不一致的问题。#3817
        • 修复 Form、Button、Slider、Table 等组件的一些样式细节。
      • 2.5.0#
        2016-11-25
        • 默认主题风格修改为支付宝钱包风格，及大量样式优化。
        • 支持服务端渲染。（Mention 会因为 draft-js 的问题有 warning）
        • 引入 Jest Snapshot 测试组件结构及服务端渲染问题。
        • 官网及文档优化。
        • 新增自定义主题的 文档。
        • 新增 Sketch 资源文件。
        • LocaleProvider 新增巴西语支持。#4004 @nathantn
        • DatePicker
          • DatePicker 现在可以决定是否展示 “今天” 按钮。commit
          • RangePicker 现在可以自定义快捷选择。demo
          • 修复 DatePicker 设置 showTime 后 “此刻” 按钮失效的问题。#3748
          • 修复 RangePicker[format] 失效的问题。#3808
        • 新增并优化部分 Icon。#3977
        • 新增 Input.Search 控件。demo
        • Mention onSelect 事件现在可以获取完整的数据。#3867
        • Pagination 现在支持展示当前页的索引范围。demo
        • Table
          • 自定义筛选的显示隐藏现在可以通过代码控制。demo
          • 支持 JSX 风格的方式设置 columns。demo
          • 现在可以监听单元格的点击事件。#3774
          • 修复无边框 Table 头部的圆角样式问题。
          • 修复 title 和 footer 高度不随 Table[size] 变化的问题。commit
          • 修复选中状态出错的问题。#3900
        • Upload
          • 修复 children 不能为 null 的问题。
          • 修复预览逻辑的问题。commit
        • 修复 Badge 会覆盖其他组件的问题。#3898
        • 修复多行 Checkbox 样式不对齐的问题。#3971 @flashback313
        • 修复 InputNumber 与其它表单控件不对齐的问题。#3866(comment)
        • 修复 Menu.Divider 样式问题。#3813
        • 修复 Popover 直接内嵌 Checkbox 和 Radio 无效的问题。#3455
        • 修复 Select combobox 高度异常问题。#3855
        • 修复 Switch actived 后的样式问题。#3838
        • 修复 Transfer 搜索无结果时不展示 “Not Found” 提示的问题。#3996
        • 修复 TreeSelect 占位符的样式问题。#3841
        • 修复 TypeScript 编译报错的问题。#3969 @AlbertZheng
        • 修复表单反馈图标影响用户操作的问题。#3891
      • 2.4.3#
        2016-11-17
        • 修复 Anchor 内部 querySelector 报错，并做了一些体验优化 。#3832 #3844
      • 2.4.2#
        2016-11-13
        • 修复 Dropdown.Button 不弹出的问题。#3815
      • 2.4.1#
        2016-11-11
        • 修复 2.4.0 组件 index 文件丢失的问题。
      • 2.4.0#
        2016-11-11
        • 调整了组件的导航结构。
        • 新增 Anchor 锚点组件。
        • 整理了样式变量，修复 @font-size-base 和 @text-color 在部分组件无效的问题，新增 @font-size-lg @text-color-secondary，并移除了部分无用的变量。
        • Transfer 组件新增了受控属性 selectedKeys。#3729
        • Tag 新增选中状态。
        • 修复 Dropdown.Button 不支持 visible 和 onVisibleChange 的问题。#3779
        • 修复 DatePicker[showTime]`` 的此刻` 按钮。#3748
        • 修复 Steps 竖直方向的样式。#3760
        • 修复 Spin 组件在 IE10+ 的样式问题。#3755
        • 修复 Mention 组件的 focus 逻辑. #3801
        • 修复 Progress 组件的动画问题。#3784
        • 修复 Select 搜索时的丢失焦点问题。#3778
        • 修复 TimePicker 不支持 format="HH" 等格式的问题。#3793
        • 修复 Input 的 suffix 部分区域中鼠标事件无法响应的问题。#3714
        • 优化了 Table 选择的性能。#3757
        • 优化 Carousel 的默认样式。
        • 优化 Checkbox 和 Radio 的样式。#3590
        • 修复 DatePicker、Form、Table 等组件的样式细节。
      • 2.3.2#
        2016-11-09
        • 修复使用 getFieldProps 会导致死循环的问题。
      • 2.3.1#
        2016-11-07
        • 修正上个版本缺少 dist/antd.css 的问题。
      • 2.3.0#
        2016-11-04
        • 升级 normalize.css 到 5.0。
        • package.json 的 main 换成了 lib/index.js。#3397
        • 全新的 Spin 设计。
        • TimePicker 新增了 addon 以支持自定义的附加内容。
        • Tree 新增了 onDragEnd。
        • Collapse 新增了 bordered。
        • 优化 Tabs 切换时的动画效果。
        • 优化 Radio 和 Checkbox 在禁用和鼠标停留时的样式。#3590
        • 优化 Transfer 的性能。#2860
        • 修复 Popover 嵌套时的样式问题。#3448
        • 修复 Transfer 服务端渲染报错的问题。#3686
        • 修复 Upload picture-card 模式下新上传的图片不显示预览的问题。#3706 @denzw
        • DatePicker
          • 在 showTime 模式下现在失去焦点也会触发 onChange。
          • MonthPicker 增加了 monthCellContentRender 和 cellContentRender。
          • RangePicker 现在可以手动输入时间了。#3718
          • 新增了捷克语的翻译。
        • Badge
          • 优化鼠标停留时超过 99 的数字显示。#3645
          • 修复单独使用时会有移动动画的问题。#3709
        • Mention
          • 修复会被 Table 遮住的问题。#3588
          • 新增 getSuggestionContainer 来指定容器。#3658
        • Tag
        • Radio.Group
          • 新增 className。
          • children 为 null 或 undefined 时现在会被忽略。
        • Select
          • 新增 tokenSeparators 支持粘贴时自动分词。#2071
          • 新增 onFocus 回调。#3587
          • 修复 combobox 模式下选中项不能正确显示的问题。#3401
      • 2.2.1#
        2016-11-02
        • 修复 Form 中 DatePicker[showtime]（受控）无法使用的问题。#3665
      • 2.2.0#
        2016-10-28
        • 支持 TypeScript@2.0。@AlbertZheng #3358
        • 不再强依赖于 React 特定版本。#3627
        • Alert 支持 className style 属性。
        • DatePicker MonthPicker RangePicker 现在允许设置是否显示清除按钮。#3618
        • Form.Item 现在可以感知深层嵌套的表单域，以自动为其生成错误信息和状态。#3212
        • RangePicker 现在可以设置不可选的时间。#
        • Switch
          • 宽度现在会随着 checkedChildren/unCheckedChildren 自动调整。#3380
          • 优化切换动画。
        • Upload 现在可以 自定义上传方式。@edgji
        • Icon
          • 新增 bulb select like-o dislike-o。
          • 调整 loading like dislike。
        • 优化 Card DatePicker Icon Table 的 TypeScript 定义。@infeng 3468 #3603 #3531
        • 修复 Cascader defaultValue 失效的问题。#3470
        • 修复在一行内同时使用 Button Input DatePicker Select 时对齐的问题。#3481
        • DatePicker
          • 修复设置 DatePicker[showTime] 后 onChange 事件触发时机问题。#3523
        • 修复 Dropdown.Button disabled 后仍然响应操作的问题。#3535
        • Menu
        • 修复 message 加载状态无动画的问题。#3536
        • Form
          • 修复 Form[inline] 与 Input[addonBefore|addonAfter] 一起使用时的样式问题。#3524
          • 修复 Form.Item 内 Radio.Button 样式问题。
          • 修复 Form.Item 内搜索按钮的样式问题。#3630
          • 修复用户无输入时 Form.Item 识别为校验成功的问题。#3613
        • 当 Popover[title] 没有设置时，不再限制 Popover 的最小宽度。
        • Table
          • 修复固定表头在没有数据情况下的样式问题。#3567
          • 修复无数据时会覆盖 SubMenu 的问题。#3521
        • Tabs
          • 修复卡片叶签头部高度与设计稿不一致的问题。
          • 修复 TabPane 的高度会被同级 TabPane 撑高的问题。#3304
        • 修复 TreeSelect[showSearch] 样式问题。#3520
      • 2.1.0#
        2016-10-16
        • Icon 现在支持旋转动画。
        • Tabs 现在可以禁用切换动画。#3324
        • 新增西班牙语的 localization 支持。@Danjavia
        • 更新俄语的 localization 文案。@plandem
        • 新增 AutoComplete[onselect] 回调。
        • 优化 Modal 样式细节。
        • 优化 Tooltip 动画。
        • 优化 Transfer 按钮的样式。
        • 优化 Tree 的样式细节。
        • 整理和修复了部分 less 变量。
        • 修复服务端渲染时全量引入 antd 报错的问题。
        • 修复 Affix 与 BackTop 的服务端渲染问题。#3283 #3343
        • 修复 Card[title] 内无法使用 h3 之类的标签的问题。#3388
        • 修复 Cascader 搜索模式与浏览器自动完成有冲突的问题。#3350
        • DatePicker
          • 修复设置 showTime 后，onChange 重复触发的问题。#3376
          • 修复浮层与 Trigger 日期格式不一致的问题。#3405 #3298
          • 修复与 TimePicker 样式冲突问题。#3312 #3307
        • 修复 Form.Item 标签文案过长溢出的问题。
        • 修复 Icon 在 Safari 下会出现边框的问题。
        • 修复 InputNubmer 键盘事件死循环问题。#3239
        • 修复 Popover 箭头样式问题。
        • 修复 Popover 和 Popconfirm 的 arrowPointAtCenter 无效的问题。
        • Select
          • 修复样式重复引入的问题。#3376
          • 修复 notFoundContent 无法置空的问题。#3345
          • 修复 Table 内使用 Select[showsearch] 后宽度会跳动的问题。#3413
        • 修复 Table 边框线与页头页脚冲突的问题。#3301
        • 修复 TabPane 高度不随内容变化的问题。#3377
        • 修复 Transfer[titles] 不受 LocaleProvider 控制的问题。#3264
        • Upload
          • 修复用户自定义 onRemove 事件会覆盖默认行为的问题。#3317
          • 修复图片卡片样式问题。#3316
        • 修复项目构建时 moment locales 找不到的问题。#3204 #3411
      • 2.0.1#
        2016-10-01
        • 修复无法调用 react-slick 方法的问题。#3164
        • 修复 Steps.Step[icon] 不支持 React.ReactNode 的问题。#3159
        • 修复 Affix 不支持服务端渲染的问题。#3216
        • 修复 Mention 不支持 onSelect placeholder 的问题。#3236 #3226
        • 修复 Transfer 与 getFieldDecorator 一起使用时的报错问题。
        • 修复 LocaleProvider 对时间组件无效的问题。
        • 修复 Cascader 搜索模式搜索文字显示不了的问题。
        • 修复 Spin 动画与文案整体不垂直居中的问题。
        • 修复 RangePicker Modal Tag Progress 等组件样式问题。
      • 2.0.0#
        2016-09-28
        很高兴的通知各位，经过四个月时间的紧密开发，antd@2.0.0 终于发布了。这个版本我们重构了底层代码，持续完善现有组件功能和优化细节，并提供了英文版的文档，其中很多都来自社区的贡献，无法一一感谢，欢迎各位持续关注和鞭策。在升级过程中遇到任何问题，请及时 反馈给我们。
        2.x 主要变化#
        • 开发语言改为 TypeScript，提供 官方支持的 .d.ts 文件，感谢 #1846 中所有参与到这次重构的人以及后期 @infeng 对其的完善。
        • 新增英文文档， 以后将同时提供中英双语文档，感谢 #1471 里所有参与到翻译和审阅工作中的人。
        • 时间类组件 DatePicker、TimePicker、Calendar 等的底层 使用 moment 替换 gregorian-calendar。
        • 全新设计的 图标。
        • 新增提及组件 Mention。
        • 新增自动完成组件 AutoComplete。
        • Form 新增 getFieldDecorator 作为 getFieldProps 的替代，对于不正确的使用方式 getFieldDecorator 会给出提示，可以降低踩坑的概率。相关讨论见 #1533。
        • Table 支持 表头分组。@yesmeck
        • 完全移除 antd@1.x 中已经废弃的 QueueAnim、Validation、Form.ValueMixin、Progress.Line、Progress.Circle、Popover[overlay] 及 Slider[marks] 对数组的支持。
        2.x 不兼容改动#
        建议从 1.x 升级时，直接升级到 2.x 的最新版本。
        此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
        • 时间类组件的 value 和 defaultValue 不再支持 String/Date 类型，请使用 moment。
          - <TimePicker defaultValue="12:08:23" />
 + <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
 
 - <DatePicker defaultValue="2015/01/01" />
 + <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} />
 
 - <Calendar defaultValue={new Date('2010-10-10')} />
-+ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
        • 时间类组件的 onChange 和 onPanelChange 及其他回调函数中为 Date/GregorianCalendar 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 moment 的 API 文档 和 gregorian-calendar 的文档 进行修改。你也可以参考这个 commit 来进行修改。
          由于 JSON.stringify(date: moment) 返回的值会丢失时区设置，所以要先使用 .format 把日期转成字符串，相关 issue 见 #3082：
          handleSubmit() {
++ <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
        • 时间类组件的 onChange 和 onPanelChange 及其他回调函数中为 Date/GregorianCalendar 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 moment 的 API 文档 和 gregorian-calendar 的文档 进行修改。你也可以参考这个 commit 来进行修改。
          由于 JSON.stringify(date: moment) 返回的值会丢失时区设置，所以要先使用 .format 把日期转成字符串，相关 issue 见 #3082：
          handleSubmit() {
   const values = this.props.form.getFieldsValue();
   values.date = values.date.format('YYYY-MM-DD HH:mm:ss'); // 或其它格式
   const data = JSON.stringify(values);
   // 发送 data 到服务器
-}
        • 时间类组件与表单校验一起使用时，type: 'date' 改为 type: 'object'。
        • 时间类组件的 format 属性也发生了变化，从 gregorian-calendar-format 的格式 变化为与 moment 的格式，例如原来的 yyyy-MM-dd 将变为 YYYY-MM-DD。
        • Breadcrumb 移除 linkRender 和 nameRender，请使用 itemRender。
        • Menu 移除 onClose onOpen，请使用 onOpenChange。API 差异较大，请先研究 demo。
        • Table 移除列分页功能，请使用 固定列。
        • Popover 移除 overlay ，请使用 content。
        以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
        • Form 废弃 getFieldProps，请使用 getFieldDecorator：
          -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
+}
        • 时间类组件与表单校验一起使用时，type: 'date' 改为 type: 'object'。
        • 时间类组件的 format 属性也发生了变化，从 gregorian-calendar-format 的格式 变化为与 moment 的格式，例如原来的 yyyy-MM-dd 将变为 YYYY-MM-DD。
        • Breadcrumb 移除 linkRender 和 nameRender，请使用 itemRender。
        • Menu 移除 onClose onOpen，请使用 onOpenChange。API 差异较大，请先研究 demo。
        • Table 移除列分页功能，请使用 固定列。
        • Popover 移除 overlay ，请使用 content。
        以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。
        • Form 废弃 getFieldProps，请使用 getFieldDecorator：
          -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
 +  {getFieldDecorator('userName', { ... })(
 +    <Input placeholder="text" />
-+  )}
          相关讨论可以看 #1533。
        • DatePicker 废弃 toggleOpen，请使用 onOpenChange：
          - handleToggleOpen({ open }) {
++  )}
          相关讨论可以看 #1533。
        • DatePicker 废弃 toggleOpen，请使用 onOpenChange：
          - handleToggleOpen({ open }) {
 + handleOpenChange(open) {
   ...
-}
        2.x Bug 修复#
        • 修复 Dropdown.Button disabled 属性无效的问题。#3070
        • 修复 Form.create withRef 选项失效的问题。#2843
        • 修复 Menu inline 模式下子菜单展开的问题。#2701
        • 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。#2684
        • 修复 DatePicker[showtime] 参数中的 format 失效的问题。#3123
        • 修复 Table[datasource] 中的项的 key 为 0 时识别错误的问题。#3166 @noonnightstorm
        • 修复 Tree.Node 无子节点时仍然显示箭头的问题。#2616
        • 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。#2748
        2.x 其他改进#
        2.x 相关工具发布#
        • 新增配套网站 AntD Library，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
        • babel-plugin-antd 更名为 babel-plugin-import，标志着该插件将作为一个通用的按需加载方案存在，而不再是 antd 专有。
          请更新 package.json：
          {
+}
        2.x Bug 修复#
        • 修复 Dropdown.Button disabled 属性无效的问题。#3070
        • 修复 Form.create withRef 选项失效的问题。#2843
        • 修复 Menu inline 模式下子菜单展开的问题。#2701
        • 修复 Modal.confirm 之类的弹窗在异步调用时按钮仍可点击的问题。#2684
        • 修复 DatePicker[showtime] 参数中的 format 失效的问题。#3123
        • 修复 Table[datasource] 中的项的 key 为 0 时识别错误的问题。#3166 @noonnightstorm
        • 修复 Tree.Node 无子节点时仍然显示箭头的问题。#2616
        • 修复 Tree.Node 箭头隐藏后鼠标 hover 上去光标仍会发生变化的问题。#2748
        2.x 其他改进#
        2.x 相关工具发布#
        • 新增配套网站 AntD Library，提供遵循 Ant Design 设计规范的组件、模式等的 Axure 资源。
        • babel-plugin-antd 更名为 babel-plugin-import，标志着该插件将作为一个通用的按需加载方案存在，而不再是 antd 专有。
          请更新 package.json：
          {
   "devDependencies": {
 -   "babel-plugin-antd": "^0.x.x",
 +   "babel-plugin-import": "^1.0.0",
   }
-}
          同时更新 .babelrc 或你在其它地方对其的配置：
          {
+}
          同时更新 .babelrc 或你在其它地方对其的配置：
          {
 -  "plugins": [["antd", { style: "css" }]]
 +  "plugins": [["import", { libraryName: "antd", style: "css" }]]
-}
        • dva@1.0.0 也已经发布，并推荐 在实战项目中使用。
        • 脚手架工具推荐使用 dva-cli，原来的 antd-init 以后仅会用于学习以及 demo。
      • 1.11.4#
        去 GitHub 查看 0.x 到 1.x 的 Change Log。
      i18n 方案Button按钮
      
+}

    • dva@1.0.0 也已经发布，并推荐 在实战项目中使用。

    • 脚手架工具推荐使用 dva-cli，原来的 antd-init 以后仅会用于学习以及 demo。

  • 1.11.4#

    去 GitHub 查看 0.x 到 1.x 的 Change Log。

i18n 方案Button按钮
+ + +
+

在 create-react-app 中使用

create-react-app 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。

安装和初始化#

我们需要在命令行中安装 create-react-app 工具。

$ npm install -g create-react-app

然后新建一个项目。

$ USE_YARN=no create-react-app antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd antd-demo
+$ npm start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd#

这是 create-react-app 生成的默认目录结构。

├── README.md
+├── package.json
+├── public
+│   ├── favicon.ico
+│   └── index.html
+├── src
+│   ├── App.css
+│   ├── App.js
+│   ├── App.test.js
+│   ├── index.css
+│   ├── index.js
+│   └── logo.svg
+└── yarn.lock

现在从 npm 安装并引入 antd。

$ npm install antd --save

修改 src/App.js，引入 antd 的按钮组件。

import React, { Component } from 'react';
+import { Button } from 'antd';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Button type="primary">Button</Button>
+      </div>
+    );
+  }
+}
+
+export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';
+
+.App {
+  text-align: center;
+}
+
+...

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。

高级配置#

我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的代码（对前端性能是个隐患）。

你会在控制台看到如下警告。

我们需要对 create-react-app 的默认配置进行自定义。可以使用 eject 命令将所有内建的配置暴露出来。

$ npm run eject

按需加载#

现在可以安装 babel-plugin-import 并修改 src/webconfig.dev.js 文件。

$ npm install babel-plugin-import --save-dev
// Process JS with Babel.
+{
+  test: /\.(js|jsx)$/,
+  include: paths.appSrc,
+  loader: 'babel',
+  query: {
++   plugins: [
++     ['import', [{ libraryName: "antd", style: 'css' }]],
++   ],
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables caching results in ./node_modules/.cache/babel-loader/
+    // directory for faster rebuilds.
+    cacheDirectory: true
+  }
+},

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，现在 babel-plugin-import 会按需加载样式。

最后重启 npm start 访问页面，此时上面的警告信息应该没了，antd 组件的 js 和 css 代码都会按需加载。

自定义主题#

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能，因此首先我们需要引入 less-loader 来加载 less 样式，同时修改 src/webconfig.dev.js 文件。

$ npm install less less-loader --save-dev
loaders: [
+  {
+    exclude: [
+      /\.html$/,
+      /\.(js|jsx)$/,
++     /\.less$/,
+      /\.css$/,
+      /\.json$/,
+      /\.svg$/
+    ],
+    loader: 'url',
+  },
+
+...
+
+  // Process JS with Babel.
+  {
+    test: /\.(js|jsx)$/,
+    include: paths.appSrc,
+    loader: 'babel',
+    query: {
+      plugins: [
+-       ['import', [{ libraryName: "antd", style: 'css' }]],
++       ['import', [{ libraryName: "antd", style: true }]],  // 加载 less 文件
+      ],
+   },
+
+...
+
++ // 解析 less 文件，并加入变量覆盖配置
++ {
++   test: /\.less$/,
++   loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
++ },
+]

这里利用了 less-loader 的 modifyVars 来进行主题配置， +变量和其他配置方式可以参考 配置主题 文档。

修改后重启 npm start，如果看到一个绿色的按钮就说明配置成功了。

以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd，更多 webpack 配置可参考 atool-build。

本例源码可见：https://github.com/ant-design/create-react-app-antd

项目实战定制主题
+
+ + + + + + diff --git a/docs/react/use-with-create-react-app.en-US.md.js b/docs/react/use-with-create-react-app.en-US.md.js new file mode 100644 index 000000000..18ac67f5f --- /dev/null +++ b/docs/react/use-with-create-react-app.en-US.md.js @@ -0,0 +1,107 @@ +webpackJsonp([84,206],{ + +/***/ 1750: +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var _react = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactDom = __webpack_require__(2); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + module.exports = { + "content": ["article", {}, ["h2", "Install and Initialization"], ["p", "We need to install ", ["code", "create-react-app"], " first."], ["pre", { + "lang": "bash", + "highlighted": "$ npm install -g create-react-app" + }, ["code", "$ npm install -g create-react-app"]], ["p", "Create a new project named ", ["code", "antd-demo"], "."], ["pre", { + "lang": "bash", + "highlighted": "$ USE_YARN=no create-react-app antd-demo" + }, ["code", "$ USE_YARN=no create-react-app antd-demo"]], ["p", "The tool will create and initialize environment and dependencies automaticly,\nplease try config your proxy setting or use other npm registry if any network errors happen during it."], ["p", "Then we go inside ", ["code", "antd-demo"], " and start it."], ["pre", { + "lang": "bash", + "highlighted": "$ cd antd-demo\n$ npm start" + }, ["code", "$ cd antd-demo\n$ npm start"]], ["p", "Open browser at ", ["a", { + "title": null, + "href": "http://localhost:3000/" + }, "http://localhost:3000/"], ", it renders a header saying \"Welcome to React\" on the page."], ["h2", "Import antd"], ["p", "It is the default directory structure below."], ["pre", { + "lang": null, + "highlighted": "├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ └── index.html\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ └── logo.svg\n└── yarn.lock" + }, ["code", "├── README.md\n├── package.json\n├── public\n│   ├── favicon.ico\n│   └── index.html\n├── src\n│   ├── App.css\n│   ├── App.js\n│   ├── App.test.js\n│   ├── index.css\n│   ├── index.js\n│   └── logo.svg\n└── yarn.lock"]], ["p", "Now we install ", ["code", "antd"], " from npm."], ["pre", { + "lang": "bash", + "highlighted": "$ npm install antd --save" + }, ["code", "$ npm install antd --save"]], ["p", "Modify ", ["code", "src/App.js"], ", import Button component from ", ["code", "antd"], "."], ["pre", { + "lang": "jsx", + "highlighted": "import React, { Component } from 'react';\nimport { Button } from 'antd';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <Button type=\"primary\">Button</Button>\n </div>\n );\n }\n}\n\nexport default App;" + }, ["code", "import React, { Component } from 'react';\nimport { Button } from 'antd';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nexport default App;"]], ["p", "Add ", ["code", "antd/dist/antd.css"], " at the top of ", ["code", "src/App.css"], "."], ["pre", { + "lang": "css", + "highlighted": "@import '~antd/dist/antd.css';\n\n.App {\n text-align: center;\n}\n\n..." + }, ["code", "@import '~antd/dist/antd.css';\n\n.App {\n text-align: center;\n}\n\n..."]], ["p", "Ok, you now see a blue primary button displaying in page now, next you can choose any components of ", ["code", "antd"], " to develop your application. Visit other workflow of ", ["code", "create-react-app"], " at its ", ["a", { + "title": null, + "href": "https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md" + }, "User Guide "], "."], ["h2", "Advanced Guides"], ["p", "We are successd to run antd components now, but in the real world, there are still lots of problems about antd-demo.\nFor instance, we actully import all components in the project which will be a serious network perfermance issue."], ["blockquote", ["p", "You will see a warning in your browser console."]], ["p", ["img", { + "title": null, + "src": "https://zos.alipayobjects.com/rmsportal/dBLScZPjiUwunfyQVISX.png", + "alt": null + }]], ["p", "So it is necessary to customize the default webpack config. We can achieve that by using ", ["code", "eject"], " script command."], ["pre", { + "lang": "bash", + "highlighted": "$ npm run eject" + }, ["code", "$ npm run eject"]], ["h3", "Import on demand"], ["p", "After eject all config files to antd-demo, we allowed to install ", ["a", { + "title": null, + "href": "https://github.com/ant-design/babel-plugin-import" + }, "babel-plugin-import"], " and modify ", ["code", "src/webconfig.dev.js"], " now."], ["pre", { + "lang": "bash", + "highlighted": "$ npm install babel-plugin-import --save-dev" + }, ["code", "$ npm install babel-plugin-import --save-dev"]], ["pre", { + "lang": "diff", + "highlighted": "// Process JS with Babel.\n{\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n+ plugins: [\n+ ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ],\n // This is a feature of `babel-loader` for webpack (not Babel itself).\n // It enables caching results in ./node_modules/.cache/babel-loader/\n // directory for faster rebuilds.\n cacheDirectory: true\n }\n}," + }, ["code", "// Process JS with Babel.\n{\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n+ plugins: [\n+ ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ],\n // This is a feature of `babel-loader` for webpack (not Babel itself).\n // It enables caching results in ./node_modules/.cache/babel-loader/\n // directory for faster rebuilds.\n cacheDirectory: true\n }\n},"]], ["p", "Remove the ", ["code", "@import '~antd/dist/antd.css';"], " statement added before because ", ["code", "babel-plugin-import"], " will import styles."], ["p", "Then reboot ", ["code", "npm start"], " and visit demo page, you should find that the above warning message would be gone which prove the ", ["code", "import on demand"], " config is effective now."], ["h3", "Customize Theme"], ["p", "According to ", ["a", { + "title": null, + "href": "/docs/react/customize-theme" + }, "Customize Theme documentation"], ", we need ", ["code", "less"], " variables modify ability of ", ["a", { + "title": null, + "href": "https://github.com/webpack/less-loader" + }, "less-loader"], ", so we add it."], ["pre", { + "lang": "bash", + "highlighted": "$ npm install less less-loader --save-dev" + }, ["code", "$ npm install less less-loader --save-dev"]], ["pre", { + "lang": "diff", + "highlighted": "loaders: [\n {\n exclude: [\n /\\.html$/,\n /\\.(js|jsx)$/,\n+ /\\.less$/,\n /\\.css$/,\n /\\.json$/,\n /\\.svg$/\n ],\n loader: 'url',\n },\n\n...\n\n // Process JS with Babel.\n {\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n plugins: [\n- ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ['import', [{ libraryName: \"antd\", style: true }]], // import less\n ],\n },\n\n...\n\n+ // Parse less files and modify variables\n+ {\n+ test: /\\.less$/,\n+ loader: 'style!css!postcss!less?{modifyVars:{\"@primary-color\":\"#1DA57A\"}}'\n+ },\n]" + }, ["code", "loaders: [\n {\n exclude: [\n /\\.html$/,\n /\\.(js|jsx)$/,\n+ /\\.less$/,\n /\\.css$/,\n /\\.json$/,\n /\\.svg$/\n ],\n loader: 'url',\n },\n\n...\n\n // Process JS with Babel.\n {\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n plugins: [\n- ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ['import', [{ libraryName: \"antd\", style: true }]], // import less\n ],\n },\n\n...\n\n+ // Parse less files and modify variables\n+ {\n+ test: /\\.less$/,\n+ loader: 'style!css!postcss!less?{modifyVars:{\"@primary-color\":\"#1DA57A\"}}'\n+ },\n]"]], ["p", "We use ", ["code", "modifyVars"], " option of ", ["a", { + "title": null, + "href": "https://github.com/webpack/less-loader#less-options" + }, "less-loader"], " here, you can see a green button rendered on the page after reboot start server."], ["hr"], ["p", "Finally, we use antd with create-react-app successfully, you can learn these practice for your own webpack workflow too, and find more webpack config in the ", ["a", { + "title": null, + "href": "https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" + }, "atool-build"], "."], ["p", "Source code about this article：", ["a", { + "title": null, + "href": "https://github.com/ant-design/create-react-app-antd" + }, "https://github.com/ant-design/create-react-app-antd"]]], + "meta": { + "order": 4, + "title": "Use with create-react-app", + "filename": "docs/react/use-with-create-react-app.en-US.md" + }, + "description": ["section", ["p", ["a", { + "title": null, + "href": "https://github.com/facebookincubator/create-react-app" + }, "create-react-app"], " is one of best React application development tool, we are going to use ", ["code", "antd"], " within it and modify the webpack config for some customized needs."]], + "toc": ["ul", ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#Install-and-Initialization" + }, "Install and Initialization"]], ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#Import-antd" + }, "Import antd"]], ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#Advanced-Guides" + }, "Advanced Guides"]]] + }; + +/***/ } + +}); \ No newline at end of file diff --git a/docs/react/use-with-create-react-app.html b/docs/react/use-with-create-react-app.html new file mode 100644 index 000000000..077526a76 --- /dev/null +++ b/docs/react/use-with-create-react-app.html @@ -0,0 +1,167 @@ + + + + + + + + + + Ant Design - One Design Language + + + + + + + + + +
+

Use with create-react-app

create-react-app is one of best React application development tool, we are going to use antd within it and modify the webpack config for some customized needs.

Install and Initialization#

We need to install create-react-app first.

$ npm install -g create-react-app

Create a new project named antd-demo.

$ USE_YARN=no create-react-app antd-demo

The tool will create and initialize environment and dependencies automaticly, +please try config your proxy setting or use other npm registry if any network errors happen during it.

Then we go inside antd-demo and start it.

$ cd antd-demo
+$ npm start

Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.

Import antd#

It is the default directory structure below.

├── README.md
+├── package.json
+├── public
+│   ├── favicon.ico
+│   └── index.html
+├── src
+│   ├── App.css
+│   ├── App.js
+│   ├── App.test.js
+│   ├── index.css
+│   ├── index.js
+│   └── logo.svg
+└── yarn.lock

Now we install antd from npm.

$ npm install antd --save

Modify src/App.js, import Button component from antd.

import React, { Component } from 'react';
+import { Button } from 'antd';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Button type="primary">Button</Button>
+      </div>
+    );
+  }
+}
+
+export default App;

Add antd/dist/antd.css at the top of src/App.css.

@import '~antd/dist/antd.css';
+
+.App {
+  text-align: center;
+}
+
+...

Ok, you now see a blue primary button displaying in page now, next you can choose any components of antd to develop your application. Visit other workflow of create-react-app at its User Guide .

Advanced Guides#

We are successd to run antd components now, but in the real world, there are still lots of problems about antd-demo. +For instance, we actully import all components in the project which will be a serious network perfermance issue.

You will see a warning in your browser console.

So it is necessary to customize the default webpack config. We can achieve that by using eject script command.

$ npm run eject

Import on demand#

After eject all config files to antd-demo, we allowed to install babel-plugin-import and modify src/webconfig.dev.js now.

$ npm install babel-plugin-import --save-dev
// Process JS with Babel.
+{
+  test: /\.(js|jsx)$/,
+  include: paths.appSrc,
+  loader: 'babel',
+  query: {
++   plugins: [
++     ['import', [{ libraryName: "antd", style: 'css' }]],
++   ],
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables caching results in ./node_modules/.cache/babel-loader/
+    // directory for faster rebuilds.
+    cacheDirectory: true
+  }
+},

Remove the @import '~antd/dist/antd.css'; statement added before because babel-plugin-import will import styles.

Then reboot npm start and visit demo page, you should find that the above warning message would be gone which prove the import on demand config is effective now.

Customize Theme#

According to Customize Theme documentation, we need less variables modify ability of less-loader, so we add it.

$ npm install less less-loader --save-dev
loaders: [
+  {
+    exclude: [
+      /\.html$/,
+      /\.(js|jsx)$/,
++     /\.less$/,
+      /\.css$/,
+      /\.json$/,
+      /\.svg$/
+    ],
+    loader: 'url',
+  },
+
+...
+
+  // Process JS with Babel.
+  {
+    test: /\.(js|jsx)$/,
+    include: paths.appSrc,
+    loader: 'babel',
+    query: {
+      plugins: [
+-       ['import', [{ libraryName: "antd", style: 'css' }]],
++       ['import', [{ libraryName: "antd", style: true }]],  // import less
+      ],
+   },
+
+...
+
++ // Parse less files and modify variables
++ {
++   test: /\.less$/,
++   loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
++ },
+]

We use modifyVars option of less-loader here, you can see a green button rendered on the page after reboot start server.

Finally, we use antd with create-react-app successfully, you can learn these practice for your own webpack workflow too, and find more webpack config in the atool-build.

Source code about this article：https://github.com/ant-design/create-react-app-antd

Real world Example with dvaCustomize Theme
+
+ + + + + + diff --git a/docs/react/use-with-create-react-app.zh-CN.md.js b/docs/react/use-with-create-react-app.zh-CN.md.js new file mode 100644 index 000000000..3bb35c582 --- /dev/null +++ b/docs/react/use-with-create-react-app.zh-CN.md.js @@ -0,0 +1,110 @@ +webpackJsonp([83,206],{ + +/***/ 1751: +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var _react = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactDom = __webpack_require__(2); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + module.exports = { + "content": ["article", {}, ["h2", "安装和初始化"], ["p", "我们需要在命令行中安装 create-react-app 工具。"], ["pre", { + "lang": "bash", + "highlighted": "$ npm install -g create-react-app" + }, ["code", "$ npm install -g create-react-app"]], ["p", "然后新建一个项目。"], ["pre", { + "lang": "bash", + "highlighted": "$ USE_YARN=no create-react-app antd-demo" + }, ["code", "$ USE_YARN=no create-react-app antd-demo"]], ["p", "工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。"], ["p", "然后我们进入项目并启动。"], ["pre", { + "lang": "bash", + "highlighted": "$ cd antd-demo\n$ npm start" + }, ["code", "$ cd antd-demo\n$ npm start"]], ["p", "此时浏览器会访问 ", ["a", { + "title": null, + "href": "http://localhost:3000/" + }, "http://localhost:3000/"], " ，看到 ", ["code", "Welcome to React"], " 的界面就算成功了。"], ["h2", "引入 antd"], ["p", "这是 create-react-app 生成的默认目录结构。"], ["pre", { + "lang": null, + "highlighted": "├── README.md\n├── package.json\n├── public\n│ ├── favicon.ico\n│ └── index.html\n├── src\n│ ├── App.css\n│ ├── App.js\n│ ├── App.test.js\n│ ├── index.css\n│ ├── index.js\n│ └── logo.svg\n└── yarn.lock" + }, ["code", "├── README.md\n├── package.json\n├── public\n│   ├── favicon.ico\n│   └── index.html\n├── src\n│   ├── App.css\n│   ├── App.js\n│   ├── App.test.js\n│   ├── index.css\n│   ├── index.js\n│   └── logo.svg\n└── yarn.lock"]], ["p", "现在从 npm 安装并引入 antd。"], ["pre", { + "lang": "bash", + "highlighted": "$ npm install antd --save" + }, ["code", "$ npm install antd --save"]], ["p", "修改 ", ["code", "src/App.js"], "，引入 antd 的按钮组件。"], ["pre", { + "lang": "jsx", + "highlighted": "import React, { Component } from 'react';\nimport { Button } from 'antd';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n <div className=\"App\">\n <Button type=\"primary\">Button</Button>\n </div>\n );\n }\n}\n\nexport default App;" + }, ["code", "import React, { Component } from 'react';\nimport { Button } from 'antd';\nimport './App.css';\n\nclass App extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nexport default App;"]], ["p", "修改 ", ["code", "src/App.css"], "，在文件顶部引入 ", ["code", "antd/dist/antd.css"], "。"], ["pre", { + "lang": "css", + "highlighted": "@import '~antd/dist/antd.css';\n\n.App {\n text-align: center;\n}\n\n..." + }, ["code", "@import '~antd/dist/antd.css';\n\n.App {\n text-align: center;\n}\n\n..."]], ["p", "好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的", ["a", { + "title": null, + "href": "https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md" + }, "官方文档"], "。"], ["h2", "高级配置"], ["p", "我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的代码（对前端性能是个隐患）。"], ["blockquote", ["p", "你会在控制台看到如下警告。"]], ["p", ["img", { + "title": null, + "src": "https://zos.alipayobjects.com/rmsportal/dBLScZPjiUwunfyQVISX.png", + "alt": null + }]], ["p", "我们需要对 create-react-app 的默认配置进行自定义。可以使用 ", ["code", "eject"], " 命令将所有内建的配置暴露出来。"], ["pre", { + "lang": "bash", + "highlighted": "$ npm run eject" + }, ["code", "$ npm run eject"]], ["h3", "按需加载"], ["p", "现在可以安装 ", ["a", { + "title": null, + "href": "https://github.com/ant-design/babel-plugin-import" + }, "babel-plugin-import"], " 并修改 ", ["code", "src/webconfig.dev.js"], " 文件。"], ["pre", { + "lang": "bash", + "highlighted": "$ npm install babel-plugin-import --save-dev" + }, ["code", "$ npm install babel-plugin-import --save-dev"]], ["pre", { + "lang": "diff", + "highlighted": "// Process JS with Babel.\n{\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n+ plugins: [\n+ ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ],\n // This is a feature of `babel-loader` for webpack (not Babel itself).\n // It enables caching results in ./node_modules/.cache/babel-loader/\n // directory for faster rebuilds.\n cacheDirectory: true\n }\n}," + }, ["code", "// Process JS with Babel.\n{\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n+ plugins: [\n+ ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ],\n // This is a feature of `babel-loader` for webpack (not Babel itself).\n // It enables caching results in ./node_modules/.cache/babel-loader/\n // directory for faster rebuilds.\n cacheDirectory: true\n }\n},"]], ["p", "然后移除前面在 ", ["code", "src/App.css"], " 里全量添加的 ", ["code", "@import '~antd/dist/antd.css';"], " 样式代码，现在 babel-plugin-import 会按需加载样式。"], ["p", "最后重启 ", ["code", "npm start"], " 访问页面，此时上面的警告信息应该没了，antd 组件的 js 和 css 代码都会按需加载。"], ["h3", "自定义主题"], ["p", "按照 ", ["a", { + "title": null, + "href": "/docs/react/customize-theme" + }, "配置主题"], " 的要求，自定义主题需要用到 less 变量覆盖功能，因此首先我们需要引入 ", ["a", { + "title": null, + "href": "https://github.com/webpack/less-loader" + }, "less-loader"], " 来加载 less 样式，同时修改 ", ["code", "src/webconfig.dev.js"], " 文件。"], ["pre", { + "lang": "bash", + "highlighted": "$ npm install less less-loader --save-dev" + }, ["code", "$ npm install less less-loader --save-dev"]], ["pre", { + "lang": "diff", + "highlighted": "loaders: [\n {\n exclude: [\n /\\.html$/,\n /\\.(js|jsx)$/,\n+ /\\.less$/,\n /\\.css$/,\n /\\.json$/,\n /\\.svg$/\n ],\n loader: 'url',\n },\n\n...\n\n // Process JS with Babel.\n {\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n plugins: [\n- ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ['import', [{ libraryName: \"antd\", style: true }]], // 加载 less 文件\n ],\n },\n\n...\n\n+ // 解析 less 文件，并加入变量覆盖配置\n+ {\n+ test: /\\.less$/,\n+ loader: 'style!css!postcss!less?{modifyVars:{\"@primary-color\":\"#1DA57A\"}}'\n+ },\n]" + }, ["code", "loaders: [\n {\n exclude: [\n /\\.html$/,\n /\\.(js|jsx)$/,\n+ /\\.less$/,\n /\\.css$/,\n /\\.json$/,\n /\\.svg$/\n ],\n loader: 'url',\n },\n\n...\n\n // Process JS with Babel.\n {\n test: /\\.(js|jsx)$/,\n include: paths.appSrc,\n loader: 'babel',\n query: {\n plugins: [\n- ['import', [{ libraryName: \"antd\", style: 'css' }]],\n+ ['import', [{ libraryName: \"antd\", style: true }]], // 加载 less 文件\n ],\n },\n\n...\n\n+ // 解析 less 文件，并加入变量覆盖配置\n+ {\n+ test: /\\.less$/,\n+ loader: 'style!css!postcss!less?{modifyVars:{\"@primary-color\":\"#1DA57A\"}}'\n+ },\n]"]], ["p", "这里利用了 ", ["a", { + "title": null, + "href": "https://github.com/webpack/less-loader#less-options" + }, "less-loader"], " 的 ", ["code", "modifyVars"], " 来进行主题配置，\n变量和其他配置方式可以参考 ", ["a", { + "title": null, + "href": "/docs/react/customize-theme" + }, "配置主题"], " 文档。"], ["p", "修改后重启 ", ["code", "npm start"], "，如果看到一个绿色的按钮就说明配置成功了。"], ["hr"], ["p", "以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd，更多 webpack 配置可参考 ", ["a", { + "title": null, + "href": "https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" + }, "atool-build"], "。"], ["p", "本例源码可见：", ["a", { + "title": null, + "href": "https://github.com/ant-design/create-react-app-antd" + }, "https://github.com/ant-design/create-react-app-antd"]]], + "meta": { + "order": 4, + "title": "在 create-react-app 中使用", + "filename": "docs/react/use-with-create-react-app.zh-CN.md" + }, + "description": ["section", ["p", ["a", { + "title": null, + "href": "https://github.com/facebookincubator/create-react-app" + }, "create-react-app"], " 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。"]], + "toc": ["ul", ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#安装和初始化" + }, "安装和初始化"]], ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#引入-antd" + }, "引入 antd"]], ["li", ["a", { + "className": "bisheng-toc-h2", + "href": "#高级配置" + }, "高级配置"]]] + }; + +/***/ } + +}); \ No newline at end of file diff --git a/docs/resource/download-cn.html b/docs/resource/download-cn.html index f66e41d93..8dc08ffea 100644 --- a/docs/resource/download-cn.html +++ b/docs/resource/download-cn.html @@ -30,9 +30,9 @@
-
文献素材
+
文献素材
'; - domainInput = ''; - } - return '\n \n \n \n \n \n ' + domainScript + '\n \n \n
\n \n ' + domainInput + '\n \n
\n \n \n '; - }, - initIframeSrc: function initIframeSrc() { - if (this.domain) { - this.getIframeNode().src = 'javascript:void((function(){\n var d = document;\n d.open();\n d.domain=\'' + this.domain + '\';\n d.write(\'\');\n d.close();\n })())'; - } - }, - initIframe: function initIframe() { - var iframeNode = this.getIframeNode(); - var win = iframeNode.contentWindow; - var doc = void 0; - this.domain = this.domain || ''; - this.initIframeSrc(); - try { - doc = win.document; - } catch (e) { - this.domain = document.domain; - this.initIframeSrc(); - win = iframeNode.contentWindow; - doc = win.document; - } - doc.open('text/html', 'replace'); - doc.write(this.getIframeHTML(this.domain)); - doc.close(); - this.getFormInputNode().onchange = this.onChange; - }, - endUpload: function endUpload() { - if (this.state.uploading) { - this.file = {}; - // hack avoid batch - this.state.uploading = false; - this.setState({ - uploading: false - }); - this.initIframe(); - } - }, - startUpload: function startUpload() { - if (!this.state.uploading) { - this.state.uploading = true; - this.setState({ - uploading: true - }); - } - }, - updateIframeWH: function updateIframeWH() { - var rootNode = _reactDom2["default"].findDOMNode(this); - var iframeNode = this.getIframeNode(); - iframeNode.style.height = rootNode.offsetHeight + 'px'; - iframeNode.style.width = rootNode.offsetWidth + 'px'; - }, - abort: function abort(file) { - if (file) { - var uid = file; - if (file && file.uid) { - uid = file.uid; - } - if (uid === this.file.uid) { - this.endUpload(); - } - } else { - this.endUpload(); - } - }, - post: function post(file) { - var formNode = this.getFormNode(); - var dataSpan = this.getFormDataNode(); - var data = this.props.data; - var onStart = this.props.onStart; - - if (typeof data === 'function') { - data = data(file); - } - var inputs = []; - for (var key in data) { - if (data.hasOwnProperty(key)) { - inputs.push(''); - } - } - dataSpan.innerHTML = inputs.join(''); - formNode.submit(); - dataSpan.innerHTML = ''; - onStart(file); - }, - render: function render() { - var _classNames; - - var _props = this.props, - Tag = _props.component, - disabled = _props.disabled, - className = _props.className, - prefixCls = _props.prefixCls, - children = _props.children, - style = _props.style; - - var iframeStyle = (0, _extends3["default"])({}, IFRAME_STYLE, { - display: this.state.uploading || disabled ? 'none' : '' - }); - var cls = (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, prefixCls, true), (0, _defineProperty3["default"])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3["default"])(_classNames, className, className), _classNames)); - return _react2["default"].createElement( - Tag, - { - className: cls, - style: (0, _extends3["default"])({ position: 'relative', zIndex: 0 }, style) - }, - _react2["default"].createElement('iframe', { - ref: 'iframe', - onLoad: this.onLoad, - style: iframeStyle - }), - children - ); - } - }); - - exports["default"] = IframeUploader; - module.exports = exports['default']; - -/***/ }, -/* 1779 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _extends2 = __webpack_require__(8); - - var _extends3 = _interopRequireDefault(_extends2); - - var _react = __webpack_require__(1); - - var _react2 = _interopRequireDefault(_react); - - var _AjaxUploader = __webpack_require__(1777); - - var _AjaxUploader2 = _interopRequireDefault(_AjaxUploader); - - var _IframeUploader = __webpack_require__(1778); - - var _IframeUploader2 = _interopRequireDefault(_IframeUploader); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - - function empty() {} - - var Upload = _react2["default"].createClass({ - displayName: 'Upload', - - propTypes: { - component: _react.PropTypes.string, - style: _react.PropTypes.object, - prefixCls: _react.PropTypes.string, - action: _react.PropTypes.string, - name: _react.PropTypes.string, - multipart: _react.PropTypes.bool, - onError: _react.PropTypes.func, - onSuccess: _react.PropTypes.func, - onProgress: _react.PropTypes.func, - onStart: _react.PropTypes.func, - data: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]), - headers: _react.PropTypes.object, - accept: _react.PropTypes.string, - multiple: _react.PropTypes.bool, - disabled: _react.PropTypes.bool, - beforeUpload: _react.PropTypes.func, - customRequest: _react.PropTypes.func, - onReady: _react.PropTypes.func, - withCredentials: _react.PropTypes.bool, - supportServerRender: _react.PropTypes.bool - }, - - getDefaultProps: function getDefaultProps() { - return { - component: 'span', - prefixCls: 'rc-upload', - data: {}, - headers: {}, - name: 'file', - multipart: false, - onProgress: empty, - onReady: empty, - onStart: empty, - onError: empty, - onSuccess: empty, - supportServerRender: false, - multiple: false, - beforeUpload: null, - customRequest: null, - withCredentials: false - }; - }, - getInitialState: function getInitialState() { - return { - Component: null - }; - }, - componentDidMount: function componentDidMount() { - if (this.props.supportServerRender) { - /* eslint react/no-did-mount-set-state:0 */ - this.setState({ - Component: this.getComponent() - }, this.props.onReady); - } - }, - getComponent: function getComponent() { - return typeof FormData !== 'undefined' ? _AjaxUploader2["default"] : _IframeUploader2["default"]; - }, - abort: function abort(file) { - this.refs.inner.abort(file); - }, - render: function render() { - if (this.props.supportServerRender) { - var _Component = this.state.Component; - - if (_Component) { - return _react2["default"].createElement(_Component, (0, _extends3["default"])({}, this.props, { ref: 'inner' })); - } - return null; - } - var Component = this.getComponent(); - return _react2["default"].createElement(Component, (0, _extends3["default"])({}, this.props, { ref: 'inner' })); - } - }); - - exports["default"] = Upload; - module.exports = exports['default']; - -/***/ }, -/* 1780 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - // export this package's api - module.exports = __webpack_require__(1779); - -/***/ }, -/* 1781 */ -/***/ function(module, exports) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports["default"] = upload; - function getError(option, xhr) { - var msg = 'cannot post ' + option.action + ' ' + xhr.status + '\''; - var err = new Error(msg); - err.status = xhr.status; - err.method = 'post'; - err.url = option.action; - return err; - } - - function getBody(xhr) { - var text = xhr.responseText || xhr.response; - if (!text) { - return text; - } - - try { - return JSON.parse(text); - } catch (e) { - return text; - } - } - - // option { - // onProgress: (event: { percent: number }): void, - // onError: (event: Error, body?: Object): void, - // onSuccess: (body: Object): void, - // data: Object, - // filename: String, - // file: File, - // withCredentials: Boolean, - // action: String, - // headers: Object, - // } - function upload(option) { - var xhr = new XMLHttpRequest(); - if (xhr.upload) { - xhr.upload.onprogress = function progress(e) { - if (e.total > 0) { - e.percent = e.loaded / e.total * 100; - } - option.onProgress(e); - }; - } - - var formData = new FormData(); - - if (option.data) { - Object.keys(option.data).map(function (key) { - formData.append(key, option.data[key]); - }); - } - - formData.append(option.filename, option.file); - - xhr.onerror = function error(e) { - option.onError(e); - }; - - xhr.onload = function onload() { - // allow success when 2xx status - // see https://github.com/react-component/upload/issues/34 - if (xhr.status < 200 || xhr.status >= 300) { - return option.onError(getError(option, xhr), getBody(xhr)); - } - - option.onSuccess(getBody(xhr)); - }; - - xhr.open('post', option.action, true); - - // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179 - if (option.withCredentials && 'withCredentials' in xhr) { - xhr.withCredentials = true; - } - - var headers = option.headers || {}; - - // when set headers['X-Requested-With'] = null , can close default XHR header - // see https://github.com/react-component/upload/issues/33 - if (headers['X-Requested-With'] !== null) { - xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); - } - - for (var h in headers) { - if (headers.hasOwnProperty(h) && headers[h] !== null) { - xhr.setRequestHeader(h, headers[h]); - } - } - xhr.send(formData); - - return { - abort: function abort() { - xhr.abort(); - } - }; - } - module.exports = exports['default']; - -/***/ }, -/* 1782 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2014-2015, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - - 'use strict'; - - /** - * Similar to invariant but only logs a warning if the condition is not met. - * This can be used to log issues in development environments in critical - * paths. Removing the logging code for production environments will keep the - * same logic and follow the same code paths. - */ - - var warning = function() {}; - - if (false) { - warning = function(condition, format, args) { - var len = arguments.length; - args = new Array(len > 2 ? len - 2 : 0); - for (var key = 2; key < len; key++) { - args[key - 2] = arguments[key]; - } - if (format === undefined) { - throw new Error( - '`warning(condition, format, ...args)` requires a warning ' + - 'message argument' - ); - } - - if (format.length < 10 || (/^[s\W]*$/).test(format)) { - throw new Error( - 'The warning format should be able to uniquely identify this ' + - 'warning. Please, use a more descriptive format than: ' + format - ); - } - - if (!condition) { - var argIndex = 0; - var message = 'Warning: ' + - format.replace(/%s/g, function() { - return args[argIndex++]; - }); - if (typeof console !== 'undefined') { - console.error(message); - } - try { - // This error was thrown as a convenience so that you can use this stack - // to find the callsite that caused this warning to fire. - throw new Error(message); - } catch(x) {} - } - }; - } - - module.exports = warning; - - -/***/ }, -/* 1783 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports["default"] = toArray; - - var _react = __webpack_require__(1); - - var _react2 = _interopRequireDefault(_react); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - - function toArray(children) { - var ret = []; - _react2["default"].Children.forEach(children, function (c) { - ret.push(c); - }); - return ret; - } - module.exports = exports['default']; - -/***/ }, -/* 1784 */ -/***/ function(module, exports) { - - "use strict"; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports["default"] = contains; - function contains(root, n) { - var node = n; - while (node) { - if (node === root) { - return true; - } - node = node.parentNode; - } - - return false; - } - module.exports = exports['default']; - -/***/ }, -/* 1785 */ -/***/ function(module, exports) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - /** - * @ignore - * some key-codes definition and utils from closure-library - * @author yiminghe@gmail.com - */ - - var KeyCode = { - /** - * MAC_ENTER - */ - MAC_ENTER: 3, - /** - * BACKSPACE - */ - BACKSPACE: 8, - /** - * TAB - */ - TAB: 9, - /** - * NUMLOCK on FF/Safari Mac - */ - NUM_CENTER: 12, // NUMLOCK on FF/Safari Mac - /** - * ENTER - */ - ENTER: 13, - /** - * SHIFT - */ - SHIFT: 16, - /** - * CTRL - */ - CTRL: 17, - /** - * ALT - */ - ALT: 18, - /** - * PAUSE - */ - PAUSE: 19, - /** - * CAPS_LOCK - */ - CAPS_LOCK: 20, - /** - * ESC - */ - ESC: 27, - /** - * SPACE - */ - SPACE: 32, - /** - * PAGE_UP - */ - PAGE_UP: 33, // also NUM_NORTH_EAST - /** - * PAGE_DOWN - */ - PAGE_DOWN: 34, // also NUM_SOUTH_EAST - /** - * END - */ - END: 35, // also NUM_SOUTH_WEST - /** - * HOME - */ - HOME: 36, // also NUM_NORTH_WEST - /** - * LEFT - */ - LEFT: 37, // also NUM_WEST - /** - * UP - */ - UP: 38, // also NUM_NORTH - /** - * RIGHT - */ - RIGHT: 39, // also NUM_EAST - /** - * DOWN - */ - DOWN: 40, // also NUM_SOUTH - /** - * PRINT_SCREEN - */ - PRINT_SCREEN: 44, - /** - * INSERT - */ - INSERT: 45, // also NUM_INSERT - /** - * DELETE - */ - DELETE: 46, // also NUM_DELETE - /** - * ZERO - */ - ZERO: 48, - /** - * ONE - */ - ONE: 49, - /** - * TWO - */ - TWO: 50, - /** - * THREE - */ - THREE: 51, - /** - * FOUR - */ - FOUR: 52, - /** - * FIVE - */ - FIVE: 53, - /** - * SIX - */ - SIX: 54, - /** - * SEVEN - */ - SEVEN: 55, - /** - * EIGHT - */ - EIGHT: 56, - /** - * NINE - */ - NINE: 57, - /** - * QUESTION_MARK - */ - QUESTION_MARK: 63, // needs localization - /** - * A - */ - A: 65, - /** - * B - */ - B: 66, - /** - * C - */ - C: 67, - /** - * D - */ - D: 68, - /** - * E - */ - E: 69, - /** - * F - */ - F: 70, - /** - * G - */ - G: 71, - /** - * H - */ - H: 72, - /** - * I - */ - I: 73, - /** - * J - */ - J: 74, - /** - * K - */ - K: 75, - /** - * L - */ - L: 76, - /** - * M - */ - M: 77, - /** - * N - */ - N: 78, - /** - * O - */ - O: 79, - /** - * P - */ - P: 80, - /** - * Q - */ - Q: 81, - /** - * R - */ - R: 82, - /** - * S - */ - S: 83, - /** - * T - */ - T: 84, - /** - * U - */ - U: 85, - /** - * V - */ - V: 86, - /** - * W - */ - W: 87, - /** - * X - */ - X: 88, - /** - * Y - */ - Y: 89, - /** - * Z - */ - Z: 90, - /** - * META - */ - META: 91, // WIN_KEY_LEFT - /** - * WIN_KEY_RIGHT - */ - WIN_KEY_RIGHT: 92, - /** - * CONTEXT_MENU - */ - CONTEXT_MENU: 93, - /** - * NUM_ZERO - */ - NUM_ZERO: 96, - /** - * NUM_ONE - */ - NUM_ONE: 97, - /** - * NUM_TWO - */ - NUM_TWO: 98, - /** - * NUM_THREE - */ - NUM_THREE: 99, - /** - * NUM_FOUR - */ - NUM_FOUR: 100, - /** - * NUM_FIVE - */ - NUM_FIVE: 101, - /** - * NUM_SIX - */ - NUM_SIX: 102, - /** - * NUM_SEVEN - */ - NUM_SEVEN: 103, - /** - * NUM_EIGHT - */ - NUM_EIGHT: 104, - /** - * NUM_NINE - */ - NUM_NINE: 105, - /** - * NUM_MULTIPLY - */ - NUM_MULTIPLY: 106, - /** - * NUM_PLUS - */ - NUM_PLUS: 107, - /** - * NUM_MINUS - */ - NUM_MINUS: 109, - /** - * NUM_PERIOD - */ - NUM_PERIOD: 110, - /** - * NUM_DIVISION - */ - NUM_DIVISION: 111, - /** - * F1 - */ - F1: 112, - /** - * F2 - */ - F2: 113, - /** - * F3 - */ - F3: 114, - /** - * F4 - */ - F4: 115, - /** - * F5 - */ - F5: 116, - /** - * F6 - */ - F6: 117, - /** - * F7 - */ - F7: 118, - /** - * F8 - */ - F8: 119, - /** - * F9 - */ - F9: 120, - /** - * F10 - */ - F10: 121, - /** - * F11 - */ - F11: 122, - /** - * F12 - */ - F12: 123, - /** - * NUMLOCK - */ - NUMLOCK: 144, - /** - * SEMICOLON - */ - SEMICOLON: 186, // needs localization - /** - * DASH - */ - DASH: 189, // needs localization - /** - * EQUALS - */ - EQUALS: 187, // needs localization - /** - * COMMA - */ - COMMA: 188, // needs localization - /** - * PERIOD - */ - PERIOD: 190, // needs localization - /** - * SLASH - */ - SLASH: 191, // needs localization - /** - * APOSTROPHE - */ - APOSTROPHE: 192, // needs localization - /** - * SINGLE_QUOTE - */ - SINGLE_QUOTE: 222, // needs localization - /** - * OPEN_SQUARE_BRACKET - */ - OPEN_SQUARE_BRACKET: 219, // needs localization - /** - * BACKSLASH - */ - BACKSLASH: 220, // needs localization - /** - * CLOSE_SQUARE_BRACKET - */ - CLOSE_SQUARE_BRACKET: 221, // needs localization - /** - * WIN_KEY - */ - WIN_KEY: 224, - /** - * MAC_FF_META - */ - MAC_FF_META: 224, // Firefox (Gecko) fires this for the meta key instead of 91 - /** - * WIN_IME - */ - WIN_IME: 229 - }; - - /* - whether text and modified key is entered at the same time. - */ - KeyCode.isTextModifyingKeyEvent = function isTextModifyingKeyEvent(e) { - var keyCode = e.keyCode; - if (e.altKey && !e.ctrlKey || e.metaKey || - // Function keys don't generate text - keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) { - return false; - } - - // The following keys are quite harmless, even in combination with - // CTRL, ALT or SHIFT. - switch (keyCode) { - case KeyCode.ALT: - case KeyCode.CAPS_LOCK: - case KeyCode.CONTEXT_MENU: - case KeyCode.CTRL: - case KeyCode.DOWN: - case KeyCode.END: - case KeyCode.ESC: - case KeyCode.HOME: - case KeyCode.INSERT: - case KeyCode.LEFT: - case KeyCode.MAC_FF_META: - case KeyCode.META: - case KeyCode.NUMLOCK: - case KeyCode.NUM_CENTER: - case KeyCode.PAGE_DOWN: - case KeyCode.PAGE_UP: - case KeyCode.PAUSE: - case KeyCode.PRINT_SCREEN: - case KeyCode.RIGHT: - case KeyCode.SHIFT: - case KeyCode.UP: - case KeyCode.WIN_KEY: - case KeyCode.WIN_KEY_RIGHT: - return false; - default: - return true; - } - }; - - /* - whether character is entered. - */ - KeyCode.isCharacterKey = function isCharacterKey(keyCode) { - if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) { - return true; - } - - if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) { - return true; - } - - if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) { - return true; - } - - // Safari sends zero key code for non-latin characters. - if (window.navigation.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) { - return true; - } - - switch (keyCode) { - case KeyCode.SPACE: - case KeyCode.QUESTION_MARK: - case KeyCode.NUM_PLUS: - case KeyCode.NUM_MINUS: - case KeyCode.NUM_PERIOD: - case KeyCode.NUM_DIVISION: - case KeyCode.SEMICOLON: - case KeyCode.DASH: - case KeyCode.EQUALS: - case KeyCode.COMMA: - case KeyCode.PERIOD: - case KeyCode.SLASH: - case KeyCode.APOSTROPHE: - case KeyCode.SINGLE_QUOTE: - case KeyCode.OPEN_SQUARE_BRACKET: - case KeyCode.BACKSLASH: - case KeyCode.CLOSE_SQUARE_BRACKET: - return true; - default: - return false; - } - }; - - exports["default"] = KeyCode; - module.exports = exports['default']; - -/***/ }, -/* 1786 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - - exports["default"] = getContainerRenderMixin; - - var _reactDom = __webpack_require__(2); - - var _reactDom2 = _interopRequireDefault(_reactDom); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - - function defaultGetContainer() { - var container = document.createElement('div'); - document.body.appendChild(container); - return container; - } - - function getContainerRenderMixin(config) { - var _config$autoMount = config.autoMount, - autoMount = _config$autoMount === undefined ? true : _config$autoMount, - _config$autoDestroy = config.autoDestroy, - autoDestroy = _config$autoDestroy === undefined ? true : _config$autoDestroy, - isVisible = config.isVisible, - getComponent = config.getComponent, - _config$getContainer = config.getContainer, - getContainer = _config$getContainer === undefined ? defaultGetContainer : _config$getContainer; - - - var mixin = void 0; - - function _renderComponent(instance, componentArg, ready) { - if (!isVisible || instance._component || isVisible(instance)) { - if (!instance._container) { - instance._container = getContainer(instance); - } - var component = void 0; - if (instance.getComponent) { - component = instance.getComponent(componentArg); - } else { - component = getComponent(instance, componentArg); - } - _reactDom2["default"].unstable_renderSubtreeIntoContainer(instance, component, instance._container, function callback() { - instance._component = this; - if (ready) { - ready.call(this); - } - }); - } - } - - if (autoMount) { - mixin = _extends({}, mixin, { - componentDidMount: function componentDidMount() { - _renderComponent(this); - }, - componentDidUpdate: function componentDidUpdate() { - _renderComponent(this); - } - }); - } - - if (!autoMount || !autoDestroy) { - mixin = _extends({}, mixin, { - renderComponent: function renderComponent(componentArg, ready) { - _renderComponent(this, componentArg, ready); - } - }); - } - - function _removeContainer(instance) { - if (instance._container) { - var container = instance._container; - _reactDom2["default"].unmountComponentAtNode(container); - container.parentNode.removeChild(container); - instance._container = null; - } - } - - if (autoDestroy) { - mixin = _extends({}, mixin, { - componentWillUnmount: function componentWillUnmount() { - _removeContainer(this); - } - }); - } else { - mixin = _extends({}, mixin, { - removeContainer: function removeContainer() { - _removeContainer(this); - } - }); - } - - return mixin; - } - module.exports = exports['default']; - -/***/ }, -/* 1787 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports.CopyToClipboard = undefined; - - var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - - var _react = __webpack_require__(1); - - var _react2 = _interopRequireDefault(_react); - - var _copyToClipboard = __webpack_require__(1232); - - var _copyToClipboard2 = _interopRequireDefault(_copyToClipboard); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - - function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } - - var CopyToClipboard = exports.CopyToClipboard = _react2.default.createClass({ - displayName: 'CopyToClipboard', - - propTypes: { - text: _react2.default.PropTypes.string.isRequired, - children: _react2.default.PropTypes.element.isRequired, - onCopy: _react2.default.PropTypes.func, - options: _react2.default.PropTypes.shape({ - debug: _react2.default.PropTypes.bool, - message: _react2.default.PropTypes.string - }) - }, - - onClick: function onClick(event) { - var _props = this.props; - var text = _props.text; - var onCopy = _props.onCopy; - var children = _props.children; - var options = _props.options; - - var elem = _react2.default.Children.only(children); - - (0, _copyToClipboard2.default)(text, options); - if (onCopy) { - onCopy(text); - } - - // Bypass onClick if it was present - if (elem && elem.props && typeof elem.props.onClick === 'function') { - elem.props.onClick(event); - } - }, - render: function render() { - var _props2 = this.props; - var _text = _props2.text; - var _onCopy = _props2.onCopy; - var _options = _props2.options; - var children = _props2.children; - - var props = _objectWithoutProperties(_props2, ['text', 'onCopy', 'options', 'children']); - - var elem = _react2.default.Children.only(children); - - return _react2.default.cloneElement(elem, _extends({}, props, { onClick: this.onClick })); - } - }); - //# sourceMappingURL=Component.js.map - -/***/ }, -/* 1788 */ -/***/ function(module, exports) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var ARIADOMPropertyConfig = { - Properties: { - // Global States and Properties - 'aria-current': 0, // state - 'aria-details': 0, - 'aria-disabled': 0, // state - 'aria-hidden': 0, // state - 'aria-invalid': 0, // state - 'aria-keyshortcuts': 0, - 'aria-label': 0, - 'aria-roledescription': 0, - // Widget Attributes - 'aria-autocomplete': 0, - 'aria-checked': 0, - 'aria-expanded': 0, - 'aria-haspopup': 0, - 'aria-level': 0, - 'aria-modal': 0, - 'aria-multiline': 0, - 'aria-multiselectable': 0, - 'aria-orientation': 0, - 'aria-placeholder': 0, - 'aria-pressed': 0, - 'aria-readonly': 0, - 'aria-required': 0, - 'aria-selected': 0, - 'aria-sort': 0, - 'aria-valuemax': 0, - 'aria-valuemin': 0, - 'aria-valuenow': 0, - 'aria-valuetext': 0, - // Live Region Attributes - 'aria-atomic': 0, - 'aria-busy': 0, - 'aria-live': 0, - 'aria-relevant': 0, - // Drag-and-Drop Attributes - 'aria-dropeffect': 0, - 'aria-grabbed': 0, - // Relationship Attributes - 'aria-activedescendant': 0, - 'aria-colcount': 0, - 'aria-colindex': 0, - 'aria-colspan': 0, - 'aria-controls': 0, - 'aria-describedby': 0, - 'aria-errormessage': 0, - 'aria-flowto': 0, - 'aria-labelledby': 0, - 'aria-owns': 0, - 'aria-posinset': 0, - 'aria-rowcount': 0, - 'aria-rowindex': 0, - 'aria-rowspan': 0, - 'aria-setsize': 0 - }, - DOMAttributeNames: {}, - DOMPropertyNames: {} - }; - - module.exports = ARIADOMPropertyConfig; - -/***/ }, -/* 1789 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var ReactDOMComponentTree = __webpack_require__(41); - - var focusNode = __webpack_require__(509); - - var AutoFocusUtils = { - focusDOMComponent: function () { - focusNode(ReactDOMComponentTree.getNodeFromInstance(this)); - } - }; - - module.exports = AutoFocusUtils; - -/***/ }, -/* 1790 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var EventPropagators = __webpack_require__(248); - var ExecutionEnvironment = __webpack_require__(63); - var FallbackCompositionState = __webpack_require__(1796); - var SyntheticCompositionEvent = __webpack_require__(1833); - var SyntheticInputEvent = __webpack_require__(1836); - - var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space - var START_KEYCODE = 229; - - var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window; - - var documentMode = null; - if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) { - documentMode = document.documentMode; - } - - // Webkit offers a very useful `textInput` event that can be used to - // directly represent `beforeInput`. The IE `textinput` event is not as - // useful, so we don't use it. - var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto(); - - // In IE9+, we have access to composition events, but the data supplied - // by the native compositionend event may be incorrect. Japanese ideographic - // spaces, for instance (\u3000) are not recorded correctly. - var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11); - - /** - * Opera <= 12 includes TextEvent in window, but does not fire - * text input events. Rely on keypress instead. - */ - function isPresto() { - var opera = window.opera; - return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12; - } - - var SPACEBAR_CODE = 32; - var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE); - - // Events and their corresponding property names. - var eventTypes = { - beforeInput: { - phasedRegistrationNames: { - bubbled: 'onBeforeInput', - captured: 'onBeforeInputCapture' - }, - dependencies: ['topCompositionEnd', 'topKeyPress', 'topTextInput', 'topPaste'] - }, - compositionEnd: { - phasedRegistrationNames: { - bubbled: 'onCompositionEnd', - captured: 'onCompositionEndCapture' - }, - dependencies: ['topBlur', 'topCompositionEnd', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] - }, - compositionStart: { - phasedRegistrationNames: { - bubbled: 'onCompositionStart', - captured: 'onCompositionStartCapture' - }, - dependencies: ['topBlur', 'topCompositionStart', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] - }, - compositionUpdate: { - phasedRegistrationNames: { - bubbled: 'onCompositionUpdate', - captured: 'onCompositionUpdateCapture' - }, - dependencies: ['topBlur', 'topCompositionUpdate', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown'] - } - }; - - // Track whether we've ever handled a keypress on the space key. - var hasSpaceKeypress = false; - - /** - * Return whether a native keypress event is assumed to be a command. - * This is required because Firefox fires `keypress` events for key commands - * (cut, copy, select-all, etc.) even though no character is inserted. - */ - function isKeypressCommand(nativeEvent) { - return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) && - // ctrlKey && altKey is equivalent to AltGr, and is not a command. - !(nativeEvent.ctrlKey && nativeEvent.altKey); - } - - /** - * Translate native top level events into event types. - * - * @param {string} topLevelType - * @return {object} - */ - function getCompositionEventType(topLevelType) { - switch (topLevelType) { - case 'topCompositionStart': - return eventTypes.compositionStart; - case 'topCompositionEnd': - return eventTypes.compositionEnd; - case 'topCompositionUpdate': - return eventTypes.compositionUpdate; - } - } - - /** - * Does our fallback best-guess model think this event signifies that - * composition has begun? - * - * @param {string} topLevelType - * @param {object} nativeEvent - * @return {boolean} - */ - function isFallbackCompositionStart(topLevelType, nativeEvent) { - return topLevelType === 'topKeyDown' && nativeEvent.keyCode === START_KEYCODE; - } - - /** - * Does our fallback mode think that this event is the end of composition? - * - * @param {string} topLevelType - * @param {object} nativeEvent - * @return {boolean} - */ - function isFallbackCompositionEnd(topLevelType, nativeEvent) { - switch (topLevelType) { - case 'topKeyUp': - // Command keys insert or clear IME input. - return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1; - case 'topKeyDown': - // Expect IME keyCode on each keydown. If we get any other - // code we must have exited earlier. - return nativeEvent.keyCode !== START_KEYCODE; - case 'topKeyPress': - case 'topMouseDown': - case 'topBlur': - // Events are not possible without cancelling IME. - return true; - default: - return false; - } - } - - /** - * Google Input Tools provides composition data via a CustomEvent, - * with the `data` property populated in the `detail` object. If this - * is available on the event object, use it. If not, this is a plain - * composition event and we have nothing special to extract. - * - * @param {object} nativeEvent - * @return {?string} - */ - function getDataFromCustomEvent(nativeEvent) { - var detail = nativeEvent.detail; - if (typeof detail === 'object' && 'data' in detail) { - return detail.data; - } - return null; - } - - // Track the current IME composition fallback object, if any. - var currentComposition = null; - - /** - * @return {?object} A SyntheticCompositionEvent. - */ - function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) { - var eventType; - var fallbackData; - - if (canUseCompositionEvent) { - eventType = getCompositionEventType(topLevelType); - } else if (!currentComposition) { - if (isFallbackCompositionStart(topLevelType, nativeEvent)) { - eventType = eventTypes.compositionStart; - } - } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) { - eventType = eventTypes.compositionEnd; - } - - if (!eventType) { - return null; - } - - if (useFallbackCompositionData) { - // The current composition is stored statically and must not be - // overwritten while composition continues. - if (!currentComposition && eventType === eventTypes.compositionStart) { - currentComposition = FallbackCompositionState.getPooled(nativeEventTarget); - } else if (eventType === eventTypes.compositionEnd) { - if (currentComposition) { - fallbackData = currentComposition.getData(); - } - } - } - - var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget); - - if (fallbackData) { - // Inject data generated from fallback path into the synthetic event. - // This matches the property of native CompositionEventInterface. - event.data = fallbackData; - } else { - var customData = getDataFromCustomEvent(nativeEvent); - if (customData !== null) { - event.data = customData; - } - } - - EventPropagators.accumulateTwoPhaseDispatches(event); - return event; - } - - /** - * @param {string} topLevelType Record from `EventConstants`. - * @param {object} nativeEvent Native browser event. - * @return {?string} The string corresponding to this `beforeInput` event. - */ - function getNativeBeforeInputChars(topLevelType, nativeEvent) { - switch (topLevelType) { - case 'topCompositionEnd': - return getDataFromCustomEvent(nativeEvent); - case 'topKeyPress': - /** - * If native `textInput` events are available, our goal is to make - * use of them. However, there is a special case: the spacebar key. - * In Webkit, preventing default on a spacebar `textInput` event - * cancels character insertion, but it *also* causes the browser - * to fall back to its default spacebar behavior of scrolling the - * page. - * - * Tracking at: - * https://code.google.com/p/chromium/issues/detail?id=355103 - * - * To avoid this issue, use the keypress event as if no `textInput` - * event is available. - */ - var which = nativeEvent.which; - if (which !== SPACEBAR_CODE) { - return null; - } - - hasSpaceKeypress = true; - return SPACEBAR_CHAR; - - case 'topTextInput': - // Record the characters to be added to the DOM. - var chars = nativeEvent.data; - - // If it's a spacebar character, assume that we have already handled - // it at the keypress level and bail immediately. Android Chrome - // doesn't give us keycodes, so we need to blacklist it. - if (chars === SPACEBAR_CHAR && hasSpaceKeypress) { - return null; - } - - return chars; - - default: - // For other native event types, do nothing. - return null; - } - } - - /** - * For browsers that do not provide the `textInput` event, extract the - * appropriate string to use for SyntheticInputEvent. - * - * @param {string} topLevelType Record from `EventConstants`. - * @param {object} nativeEvent Native browser event. - * @return {?string} The fallback string for this `beforeInput` event. - */ - function getFallbackBeforeInputChars(topLevelType, nativeEvent) { - // If we are currently composing (IME) and using a fallback to do so, - // try to extract the composed characters from the fallback object. - // If composition event is available, we extract a string only at - // compositionevent, otherwise extract it at fallback events. - if (currentComposition) { - if (topLevelType === 'topCompositionEnd' || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) { - var chars = currentComposition.getData(); - FallbackCompositionState.release(currentComposition); - currentComposition = null; - return chars; - } - return null; - } - - switch (topLevelType) { - case 'topPaste': - // If a paste event occurs after a keypress, throw out the input - // chars. Paste events should not lead to BeforeInput events. - return null; - case 'topKeyPress': - /** - * As of v27, Firefox may fire keypress events even when no character - * will be inserted. A few possibilities: - * - * - `which` is `0`. Arrow keys, Esc key, etc. - * - * - `which` is the pressed key code, but no char is available. - * Ex: 'AltGr + d` in Polish. There is no modified character for - * this key combination and no character is inserted into the - * document, but FF fires the keypress for char code `100` anyway. - * No `input` event will occur. - * - * - `which` is the pressed key code, but a command combination is - * being used. Ex: `Cmd+C`. No character is inserted, and no - * `input` event will occur. - */ - if (nativeEvent.which && !isKeypressCommand(nativeEvent)) { - return String.fromCharCode(nativeEvent.which); - } - return null; - case 'topCompositionEnd': - return useFallbackCompositionData ? null : nativeEvent.data; - default: - return null; - } - } - - /** - * Extract a SyntheticInputEvent for `beforeInput`, based on either native - * `textInput` or fallback behavior. - * - * @return {?object} A SyntheticInputEvent. - */ - function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) { - var chars; - - if (canUseTextInputEvent) { - chars = getNativeBeforeInputChars(topLevelType, nativeEvent); - } else { - chars = getFallbackBeforeInputChars(topLevelType, nativeEvent); - } - - // If no characters are being inserted, no BeforeInput event should - // be fired. - if (!chars) { - return null; - } - - var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget); - - event.data = chars; - EventPropagators.accumulateTwoPhaseDispatches(event); - return event; - } - - /** - * Create an `onBeforeInput` event to match - * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents. - * - * This event plugin is based on the native `textInput` event - * available in Chrome, Safari, Opera, and IE. This event fires after - * `onKeyPress` and `onCompositionEnd`, but before `onInput`. - * - * `beforeInput` is spec'd but not implemented in any browsers, and - * the `input` event does not provide any useful information about what has - * actually been added, contrary to the spec. Thus, `textInput` is the best - * available event to identify the characters that have actually been inserted - * into the target node. - * - * This plugin is also responsible for emitting `composition` events, thus - * allowing us to share composition fallback code for both `beforeInput` and - * `composition` event types. - */ - var BeforeInputEventPlugin = { - - eventTypes: eventTypes, - - extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { - return [extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget), extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget)]; - } - }; - - module.exports = BeforeInputEventPlugin; - -/***/ }, -/* 1791 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var CSSProperty = __webpack_require__(567); - var ExecutionEnvironment = __webpack_require__(63); - var ReactInstrumentation = __webpack_require__(94); - - var camelizeStyleName = __webpack_require__(1586); - var dangerousStyleValue = __webpack_require__(1842); - var hyphenateStyleName = __webpack_require__(1594); - var memoizeStringOnly = __webpack_require__(512); - var warning = __webpack_require__(20); - - var processStyleName = memoizeStringOnly(function (styleName) { - return hyphenateStyleName(styleName); - }); - - var hasShorthandPropertyBug = false; - var styleFloatAccessor = 'cssFloat'; - if (ExecutionEnvironment.canUseDOM) { - var tempStyle = document.createElement('div').style; - try { - // IE8 throws "Invalid argument." if resetting shorthand style properties. - tempStyle.font = ''; - } catch (e) { - hasShorthandPropertyBug = true; - } - // IE8 only supports accessing cssFloat (standard) as styleFloat - if (document.documentElement.style.cssFloat === undefined) { - styleFloatAccessor = 'styleFloat'; - } - } - - if (false) { - // 'msTransform' is correct, but the other prefixes should be capitalized - var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; - - // style values shouldn't contain a semicolon - var badStyleValueWithSemicolonPattern = /;\s*$/; - - var warnedStyleNames = {}; - var warnedStyleValues = {}; - var warnedForNaNValue = false; - - var warnHyphenatedStyleName = function (name, owner) { - if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { - return; - } - - warnedStyleNames[name] = true; - process.env.NODE_ENV !== 'production' ? warning(false, 'Unsupported style property %s. Did you mean %s?%s', name, camelizeStyleName(name), checkRenderMessage(owner)) : void 0; - }; - - var warnBadVendoredStyleName = function (name, owner) { - if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { - return; - } - - warnedStyleNames[name] = true; - process.env.NODE_ENV !== 'production' ? warning(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s', name, name.charAt(0).toUpperCase() + name.slice(1), checkRenderMessage(owner)) : void 0; - }; - - var warnStyleValueWithSemicolon = function (name, value, owner) { - if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { - return; - } - - warnedStyleValues[value] = true; - process.env.NODE_ENV !== 'production' ? warning(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0; - }; - - var warnStyleValueIsNaN = function (name, value, owner) { - if (warnedForNaNValue) { - return; - } - - warnedForNaNValue = true; - process.env.NODE_ENV !== 'production' ? warning(false, '`NaN` is an invalid value for the `%s` css style property.%s', name, checkRenderMessage(owner)) : void 0; - }; - - var checkRenderMessage = function (owner) { - if (owner) { - var name = owner.getName(); - if (name) { - return ' Check the render method of `' + name + '`.'; - } - } - return ''; - }; - - /** - * @param {string} name - * @param {*} value - * @param {ReactDOMComponent} component - */ - var warnValidStyle = function (name, value, component) { - var owner; - if (component) { - owner = component._currentElement._owner; - } - if (name.indexOf('-') > -1) { - warnHyphenatedStyleName(name, owner); - } else if (badVendoredStyleNamePattern.test(name)) { - warnBadVendoredStyleName(name, owner); - } else if (badStyleValueWithSemicolonPattern.test(value)) { - warnStyleValueWithSemicolon(name, value, owner); - } - - if (typeof value === 'number' && isNaN(value)) { - warnStyleValueIsNaN(name, value, owner); - } - }; - } - - /** - * Operations for dealing with CSS properties. - */ - var CSSPropertyOperations = { - - /** - * Serializes a mapping of style properties for use as inline styles: - * - * > createMarkupForStyles({width: '200px', height: 0}) - * "width:200px;height:0;" - * - * Undefined values are ignored so that declarative programming is easier. - * The result should be HTML-escaped before insertion into the DOM. - * - * @param {object} styles - * @param {ReactDOMComponent} component - * @return {?string} - */ - createMarkupForStyles: function (styles, component) { - var serialized = ''; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; - } - var styleValue = styles[styleName]; - if (false) { - warnValidStyle(styleName, styleValue, component); - } - if (styleValue != null) { - serialized += processStyleName(styleName) + ':'; - serialized += dangerousStyleValue(styleName, styleValue, component) + ';'; - } - } - return serialized || null; - }, - - /** - * Sets the value for multiple styles on a node. If a value is specified as - * '' (empty string), the corresponding style property will be unset. - * - * @param {DOMElement} node - * @param {object} styles - * @param {ReactDOMComponent} component - */ - setValueForStyles: function (node, styles, component) { - if (false) { - ReactInstrumentation.debugTool.onHostOperation({ - instanceID: component._debugID, - type: 'update styles', - payload: styles - }); - } - - var style = node.style; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; - } - if (false) { - warnValidStyle(styleName, styles[styleName], component); - } - var styleValue = dangerousStyleValue(styleName, styles[styleName], component); - if (styleName === 'float' || styleName === 'cssFloat') { - styleName = styleFloatAccessor; - } - if (styleValue) { - style[styleName] = styleValue; - } else { - var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName]; - if (expansion) { - // Shorthand property that IE8 won't like unsetting, so unset each - // component to placate it - for (var individualStyleName in expansion) { - style[individualStyleName] = ''; - } - } else { - style[styleName] = ''; - } - } - } - } - - }; - - module.exports = CSSPropertyOperations; - -/***/ }, -/* 1792 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var EventPluginHub = __webpack_require__(247); - var EventPropagators = __webpack_require__(248); - var ExecutionEnvironment = __webpack_require__(63); - var ReactDOMComponentTree = __webpack_require__(41); - var ReactUpdates = __webpack_require__(108); - var SyntheticEvent = __webpack_require__(127); - - var getEventTarget = __webpack_require__(396); - var isEventSupported = __webpack_require__(397); - var isTextInputElement = __webpack_require__(584); - - var eventTypes = { - change: { - phasedRegistrationNames: { - bubbled: 'onChange', - captured: 'onChangeCapture' - }, - dependencies: ['topBlur', 'topChange', 'topClick', 'topFocus', 'topInput', 'topKeyDown', 'topKeyUp', 'topSelectionChange'] - } - }; - - /** - * For IE shims - */ - var activeElement = null; - var activeElementInst = null; - var activeElementValue = null; - var activeElementValueProp = null; - - /** - * SECTION: handle `change` event - */ - function shouldUseChangeEvent(elem) { - var nodeName = elem.nodeName && elem.nodeName.toLowerCase(); - return nodeName === 'select' || nodeName === 'input' && elem.type === 'file'; - } - - var doesChangeEventBubble = false; - if (ExecutionEnvironment.canUseDOM) { - // See `handleChange` comment below - doesChangeEventBubble = isEventSupported('change') && (!document.documentMode || document.documentMode > 8); - } - - function manualDispatchChangeEvent(nativeEvent) { - var event = SyntheticEvent.getPooled(eventTypes.change, activeElementInst, nativeEvent, getEventTarget(nativeEvent)); - EventPropagators.accumulateTwoPhaseDispatches(event); - - // If change and propertychange bubbled, we'd just bind to it like all the - // other events and have it go through ReactBrowserEventEmitter. Since it - // doesn't, we manually listen for the events and so we have to enqueue and - // process the abstract event manually. - // - // Batching is necessary here in order to ensure that all event handlers run - // before the next rerender (including event handlers attached to ancestor - // elements instead of directly on the input). Without this, controlled - // components don't work properly in conjunction with event bubbling because - // the component is rerendered and the value reverted before all the event - // handlers can run. See https://github.com/facebook/react/issues/708. - ReactUpdates.batchedUpdates(runEventInBatch, event); - } - - function runEventInBatch(event) { - EventPluginHub.enqueueEvents(event); - EventPluginHub.processEventQueue(false); - } - - function startWatchingForChangeEventIE8(target, targetInst) { - activeElement = target; - activeElementInst = targetInst; - activeElement.attachEvent('onchange', manualDispatchChangeEvent); - } - - function stopWatchingForChangeEventIE8() { - if (!activeElement) { - return; - } - activeElement.detachEvent('onchange', manualDispatchChangeEvent); - activeElement = null; - activeElementInst = null; - } - - function getTargetInstForChangeEvent(topLevelType, targetInst) { - if (topLevelType === 'topChange') { - return targetInst; - } - } - function handleEventsForChangeEventIE8(topLevelType, target, targetInst) { - if (topLevelType === 'topFocus') { - // stopWatching() should be a noop here but we call it just in case we - // missed a blur event somehow. - stopWatchingForChangeEventIE8(); - startWatchingForChangeEventIE8(target, targetInst); - } else if (topLevelType === 'topBlur') { - stopWatchingForChangeEventIE8(); - } - } - - /** - * SECTION: handle `input` event - */ - var isInputEventSupported = false; - if (ExecutionEnvironment.canUseDOM) { - // IE9 claims to support the input event but fails to trigger it when - // deleting text, so we ignore its input events. - // IE10+ fire input events to often, such when a placeholder - // changes or when an input with a placeholder is focused. - isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 11); - } - - /** - * (For IE <=11) Replacement getter/setter for the `value` property that gets - * set on the active element. - */ - var newValueProp = { - get: function () { - return activeElementValueProp.get.call(this); - }, - set: function (val) { - // Cast to a string so we can do equality checks. - activeElementValue = '' + val; - activeElementValueProp.set.call(this, val); - } - }; - - /** - * (For IE <=11) Starts tracking propertychange events on the passed-in element - * and override the value property so that we can distinguish user events from - * value changes in JS. - */ - function startWatchingForValueChange(target, targetInst) { - activeElement = target; - activeElementInst = targetInst; - activeElementValue = target.value; - activeElementValueProp = Object.getOwnPropertyDescriptor(target.constructor.prototype, 'value'); - - // Not guarded in a canDefineProperty check: IE8 supports defineProperty only - // on DOM elements - Object.defineProperty(activeElement, 'value', newValueProp); - if (activeElement.attachEvent) { - activeElement.attachEvent('onpropertychange', handlePropertyChange); - } else { - activeElement.addEventListener('propertychange', handlePropertyChange, false); - } - } - - /** - * (For IE <=11) Removes the event listeners from the currently-tracked element, - * if any exists. - */ - function stopWatchingForValueChange() { - if (!activeElement) { - return; - } - - // delete restores the original property definition - delete activeElement.value; - - if (activeElement.detachEvent) { - activeElement.detachEvent('onpropertychange', handlePropertyChange); - } else { - activeElement.removeEventListener('propertychange', handlePropertyChange, false); - } - - activeElement = null; - activeElementInst = null; - activeElementValue = null; - activeElementValueProp = null; - } - - /** - * (For IE <=11) Handles a propertychange event, sending a `change` event if - * the value of the active element has changed. - */ - function handlePropertyChange(nativeEvent) { - if (nativeEvent.propertyName !== 'value') { - return; - } - var value = nativeEvent.srcElement.value; - if (value === activeElementValue) { - return; - } - activeElementValue = value; - - manualDispatchChangeEvent(nativeEvent); - } - - /** - * If a `change` event should be fired, returns the target's ID. - */ - function getTargetInstForInputEvent(topLevelType, targetInst) { - if (topLevelType === 'topInput') { - // In modern browsers (i.e., not IE8 or IE9), the input event is exactly - // what we want so fall through here and trigger an abstract event - return targetInst; - } - } - - function handleEventsForInputEventIE(topLevelType, target, targetInst) { - if (topLevelType === 'topFocus') { - // In IE8, we can capture almost all .value changes by adding a - // propertychange handler and looking for events with propertyName - // equal to 'value' - // In IE9-11, propertychange fires for most input events but is buggy and - // doesn't fire when text is deleted, but conveniently, selectionchange - // appears to fire in all of the remaining cases so we catch those and - // forward the event if the value has changed - // In either case, we don't want to call the event handler if the value - // is changed from JS so we redefine a setter for `.value` that updates - // our activeElementValue variable, allowing us to ignore those changes - // - // stopWatching() should be a noop here but we call it just in case we - // missed a blur event somehow. - stopWatchingForValueChange(); - startWatchingForValueChange(target, targetInst); - } else if (topLevelType === 'topBlur') { - stopWatchingForValueChange(); - } - } - - // For IE8 and IE9. - function getTargetInstForInputEventIE(topLevelType, targetInst) { - if (topLevelType === 'topSelectionChange' || topLevelType === 'topKeyUp' || topLevelType === 'topKeyDown') { - // On the selectionchange event, the target is just document which isn't - // helpful for us so just check activeElement instead. - // - // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire - // propertychange on the first input event after setting `value` from a - // script and fires only keydown, keypress, keyup. Catching keyup usually - // gets it and catching keydown lets us fire an event for the first - // keystroke if user does a key repeat (it'll be a little delayed: right - // before the second keystroke). Other input methods (e.g., paste) seem to - // fire selectionchange normally. - if (activeElement && activeElement.value !== activeElementValue) { - activeElementValue = activeElement.value; - return activeElementInst; - } - } - } - - /** - * SECTION: handle `click` event - */ - function shouldUseClickEvent(elem) { - // Use the `click` event to detect changes to checkbox and radio inputs. - // This approach works across all browsers, whereas `change` does not fire - // until `blur` in IE8. - return elem.nodeName && elem.nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio'); - } - - function getTargetInstForClickEvent(topLevelType, targetInst) { - if (topLevelType === 'topClick') { - return targetInst; - } - } - - /** - * This plugin creates an `onChange` event that normalizes change events - * across form elements. This event fires at a time when it's possible to - * change the element's value without seeing a flicker. - * - * Supported elements are: - * - input (see `isTextInputElement`) - * - textarea - * - select - */ - var ChangeEventPlugin = { - - eventTypes: eventTypes, - - extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { - var targetNode = targetInst ? ReactDOMComponentTree.getNodeFromInstance(targetInst) : window; - - var getTargetInstFunc, handleEventFunc; - if (shouldUseChangeEvent(targetNode)) { - if (doesChangeEventBubble) { - getTargetInstFunc = getTargetInstForChangeEvent; - } else { - handleEventFunc = handleEventsForChangeEventIE8; - } - } else if (isTextInputElement(targetNode)) { - if (isInputEventSupported) { - getTargetInstFunc = getTargetInstForInputEvent; - } else { - getTargetInstFunc = getTargetInstForInputEventIE; - handleEventFunc = handleEventsForInputEventIE; - } - } else if (shouldUseClickEvent(targetNode)) { - getTargetInstFunc = getTargetInstForClickEvent; - } - - if (getTargetInstFunc) { - var inst = getTargetInstFunc(topLevelType, targetInst); - if (inst) { - var event = SyntheticEvent.getPooled(eventTypes.change, inst, nativeEvent, nativeEventTarget); - event.type = 'change'; - EventPropagators.accumulateTwoPhaseDispatches(event); - return event; - } - } - - if (handleEventFunc) { - handleEventFunc(topLevelType, targetNode, targetInst); - } - } - - }; - - module.exports = ChangeEventPlugin; - -/***/ }, -/* 1793 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var _prodInvariant = __webpack_require__(22); - - var DOMLazyTree = __webpack_require__(203); - var ExecutionEnvironment = __webpack_require__(63); - - var createNodesFromMarkup = __webpack_require__(1587); - var emptyFunction = __webpack_require__(64); - var invariant = __webpack_require__(15); - - var Danger = { - - /** - * Replaces a node with a string of markup at its current position within its - * parent. The markup must render into a single root node. - * - * @param {DOMElement} oldChild Child node to replace. - * @param {string} markup Markup to render in place of the child node. - * @internal - */ - dangerouslyReplaceNodeWithMarkup: function (oldChild, markup) { - !ExecutionEnvironment.canUseDOM ? false ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.') : _prodInvariant('56') : void 0; - !markup ? false ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Missing markup.') : _prodInvariant('57') : void 0; - !(oldChild.nodeName !== 'HTML') ? false ? invariant(false, 'dangerouslyReplaceNodeWithMarkup(...): Cannot replace markup of the node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString().') : _prodInvariant('58') : void 0; - - if (typeof markup === 'string') { - var newChild = createNodesFromMarkup(markup, emptyFunction)[0]; - oldChild.parentNode.replaceChild(newChild, oldChild); - } else { - DOMLazyTree.replaceChildWithTree(oldChild, markup); - } - } - - }; - - module.exports = Danger; - -/***/ }, -/* 1794 */ -/***/ function(module, exports) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - /** - * Module that is injectable into `EventPluginHub`, that specifies a - * deterministic ordering of `EventPlugin`s. A convenient way to reason about - * plugins, without having to package every one of them. This is better than - * having plugins be ordered in the same order that they are injected because - * that ordering would be influenced by the packaging order. - * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that - * preventing default on events is convenient in `SimpleEventPlugin` handlers. - */ - - var DefaultEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'TapEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin']; - - module.exports = DefaultEventPluginOrder; - -/***/ }, -/* 1795 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var EventPropagators = __webpack_require__(248); - var ReactDOMComponentTree = __webpack_require__(41); - var SyntheticMouseEvent = __webpack_require__(289); - - var eventTypes = { - mouseEnter: { - registrationName: 'onMouseEnter', - dependencies: ['topMouseOut', 'topMouseOver'] - }, - mouseLeave: { - registrationName: 'onMouseLeave', - dependencies: ['topMouseOut', 'topMouseOver'] - } - }; - - var EnterLeaveEventPlugin = { - - eventTypes: eventTypes, - - /** - * For almost every interaction we care about, there will be both a top-level - * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that - * we do not extract duplicate events. However, moving the mouse into the - * browser from outside will not fire a `mouseout` event. In this case, we use - * the `mouseover` top-level event. - */ - extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { - if (topLevelType === 'topMouseOver' && (nativeEvent.relatedTarget || nativeEvent.fromElement)) { - return null; - } - if (topLevelType !== 'topMouseOut' && topLevelType !== 'topMouseOver') { - // Must not be a mouse in or mouse out - ignoring. - return null; - } - - var win; - if (nativeEventTarget.window === nativeEventTarget) { - // `nativeEventTarget` is probably a window object. - win = nativeEventTarget; - } else { - // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8. - var doc = nativeEventTarget.ownerDocument; - if (doc) { - win = doc.defaultView || doc.parentWindow; - } else { - win = window; - } - } - - var from; - var to; - if (topLevelType === 'topMouseOut') { - from = targetInst; - var related = nativeEvent.relatedTarget || nativeEvent.toElement; - to = related ? ReactDOMComponentTree.getClosestInstanceFromNode(related) : null; - } else { - // Moving to a node from outside the window. - from = null; - to = targetInst; - } - - if (from === to) { - // Nothing pertains to our managed components. - return null; - } - - var fromNode = from == null ? win : ReactDOMComponentTree.getNodeFromInstance(from); - var toNode = to == null ? win : ReactDOMComponentTree.getNodeFromInstance(to); - - var leave = SyntheticMouseEvent.getPooled(eventTypes.mouseLeave, from, nativeEvent, nativeEventTarget); - leave.type = 'mouseleave'; - leave.target = fromNode; - leave.relatedTarget = toNode; - - var enter = SyntheticMouseEvent.getPooled(eventTypes.mouseEnter, to, nativeEvent, nativeEventTarget); - enter.type = 'mouseenter'; - enter.target = toNode; - enter.relatedTarget = fromNode; - - EventPropagators.accumulateEnterLeaveDispatches(leave, enter, from, to); - - return [leave, enter]; - } - - }; - - module.exports = EnterLeaveEventPlugin; - -/***/ }, -/* 1796 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var _assign = __webpack_require__(13); - - var PooledClass = __webpack_require__(176); - - var getTextContentAccessor = __webpack_require__(582); - - /** - * This helper class stores information about text content of a target node, - * allowing comparison of content before and after a given event. - * - * Identify the node where selection currently begins, then observe - * both its text content and its current position in the DOM. Since the - * browser may natively replace the target node during composition, we can - * use its position to find its replacement. - * - * @param {DOMEventTarget} root - */ - function FallbackCompositionState(root) { - this._root = root; - this._startText = this.getText(); - this._fallbackText = null; - } - - _assign(FallbackCompositionState.prototype, { - destructor: function () { - this._root = null; - this._startText = null; - this._fallbackText = null; - }, - - /** - * Get current text of input. - * - * @return {string} - */ - getText: function () { - if ('value' in this._root) { - return this._root.value; - } - return this._root[getTextContentAccessor()]; - }, - - /** - * Determine the differing substring between the initially stored - * text content and the current content. - * - * @return {string} - */ - getData: function () { - if (this._fallbackText) { - return this._fallbackText; - } - - var start; - var startValue = this._startText; - var startLength = startValue.length; - var end; - var endValue = this.getText(); - var endLength = endValue.length; - - for (start = 0; start < startLength; start++) { - if (startValue[start] !== endValue[start]) { - break; - } - } - - var minEnd = startLength - start; - for (end = 1; end <= minEnd; end++) { - if (startValue[startLength - end] !== endValue[endLength - end]) { - break; - } - } - - var sliceTail = end > 1 ? 1 - end : undefined; - this._fallbackText = endValue.slice(start, sliceTail); - return this._fallbackText; - } - }); - - PooledClass.addPoolingTo(FallbackCompositionState); - - module.exports = FallbackCompositionState; - -/***/ }, -/* 1797 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var DOMProperty = __webpack_require__(204); - - var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY; - var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE; - var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE; - var HAS_POSITIVE_NUMERIC_VALUE = DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE; - var HAS_OVERLOADED_BOOLEAN_VALUE = DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE; - - var HTMLDOMPropertyConfig = { - isCustomAttribute: RegExp.prototype.test.bind(new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$')), - Properties: { - /** - * Standard Properties - */ - accept: 0, - acceptCharset: 0, - accessKey: 0, - action: 0, - allowFullScreen: HAS_BOOLEAN_VALUE, - allowTransparency: 0, - alt: 0, - // specifies target context for links with `preload` type - as: 0, - async: HAS_BOOLEAN_VALUE, - autoComplete: 0, - // autoFocus is polyfilled/normalized by AutoFocusUtils - // autoFocus: HAS_BOOLEAN_VALUE, - autoPlay: HAS_BOOLEAN_VALUE, - capture: HAS_BOOLEAN_VALUE, - cellPadding: 0, - cellSpacing: 0, - charSet: 0, - challenge: 0, - checked: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - cite: 0, - classID: 0, - className: 0, - cols: HAS_POSITIVE_NUMERIC_VALUE, - colSpan: 0, - content: 0, - contentEditable: 0, - contextMenu: 0, - controls: HAS_BOOLEAN_VALUE, - coords: 0, - crossOrigin: 0, - data: 0, // For `` acts as `src`. - dateTime: 0, - 'default': HAS_BOOLEAN_VALUE, - defer: HAS_BOOLEAN_VALUE, - dir: 0, - disabled: HAS_BOOLEAN_VALUE, - download: HAS_OVERLOADED_BOOLEAN_VALUE, - draggable: 0, - encType: 0, - form: 0, - formAction: 0, - formEncType: 0, - formMethod: 0, - formNoValidate: HAS_BOOLEAN_VALUE, - formTarget: 0, - frameBorder: 0, - headers: 0, - height: 0, - hidden: HAS_BOOLEAN_VALUE, - high: 0, - href: 0, - hrefLang: 0, - htmlFor: 0, - httpEquiv: 0, - icon: 0, - id: 0, - inputMode: 0, - integrity: 0, - is: 0, - keyParams: 0, - keyType: 0, - kind: 0, - label: 0, - lang: 0, - list: 0, - loop: HAS_BOOLEAN_VALUE, - low: 0, - manifest: 0, - marginHeight: 0, - marginWidth: 0, - max: 0, - maxLength: 0, - media: 0, - mediaGroup: 0, - method: 0, - min: 0, - minLength: 0, - // Caution; `option.selected` is not updated if `select.multiple` is - // disabled with `removeAttribute`. - multiple: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - muted: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - name: 0, - nonce: 0, - noValidate: HAS_BOOLEAN_VALUE, - open: HAS_BOOLEAN_VALUE, - optimum: 0, - pattern: 0, - placeholder: 0, - playsInline: HAS_BOOLEAN_VALUE, - poster: 0, - preload: 0, - profile: 0, - radioGroup: 0, - readOnly: HAS_BOOLEAN_VALUE, - referrerPolicy: 0, - rel: 0, - required: HAS_BOOLEAN_VALUE, - reversed: HAS_BOOLEAN_VALUE, - role: 0, - rows: HAS_POSITIVE_NUMERIC_VALUE, - rowSpan: HAS_NUMERIC_VALUE, - sandbox: 0, - scope: 0, - scoped: HAS_BOOLEAN_VALUE, - scrolling: 0, - seamless: HAS_BOOLEAN_VALUE, - selected: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE, - shape: 0, - size: HAS_POSITIVE_NUMERIC_VALUE, - sizes: 0, - span: HAS_POSITIVE_NUMERIC_VALUE, - spellCheck: 0, - src: 0, - srcDoc: 0, - srcLang: 0, - srcSet: 0, - start: HAS_NUMERIC_VALUE, - step: 0, - style: 0, - summary: 0, - tabIndex: 0, - target: 0, - title: 0, - // Setting .type throws on non- tags - type: 0, - useMap: 0, - value: 0, - width: 0, - wmode: 0, - wrap: 0, - - /** - * RDFa Properties - */ - about: 0, - datatype: 0, - inlist: 0, - prefix: 0, - // property is also supported for OpenGraph in meta tags. - property: 0, - resource: 0, - 'typeof': 0, - vocab: 0, - - /** - * Non-standard Properties - */ - // autoCapitalize and autoCorrect are supported in Mobile Safari for - // keyboard hints. - autoCapitalize: 0, - autoCorrect: 0, - // autoSave allows WebKit/Blink to persist values of input fields on page reloads - autoSave: 0, - // color is for Safari mask-icon link - color: 0, - // itemProp, itemScope, itemType are for - // Microdata support. See http://schema.org/docs/gs.html - itemProp: 0, - itemScope: HAS_BOOLEAN_VALUE, - itemType: 0, - // itemID and itemRef are for Microdata support as well but - // only specified in the WHATWG spec document. See - // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api - itemID: 0, - itemRef: 0, - // results show looking glass icon and recent searches on input - // search fields in WebKit/Blink - results: 0, - // IE-only attribute that specifies security restrictions on an iframe - // as an alternative to the sandbox attribute on IE<10 - security: 0, - // IE-only attribute that controls focus behavior - unselectable: 0 - }, - DOMAttributeNames: { - acceptCharset: 'accept-charset', - className: 'class', - htmlFor: 'for', - httpEquiv: 'http-equiv' - }, - DOMPropertyNames: {} - }; - - module.exports = HTMLDOMPropertyConfig; - -/***/ }, -/* 1798 */ -/***/ function(module, exports, __webpack_require__) { - - /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2014-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var ReactReconciler = __webpack_require__(205); - - var instantiateReactComponent = __webpack_require__(583); - var KeyEscapeUtils = __webpack_require__(388); - var shouldUpdateReactComponent = __webpack_require__(398); - var traverseAllChildren = __webpack_require__(586); - var warning = __webpack_require__(20); - - var ReactComponentTreeHook; - - if (typeof process !== 'undefined' && process.env && ("production") === 'test') { - // Temporary hack. - // Inline requires don't work well with Jest: - // https://github.com/facebook/react/issues/7240 - // Remove the inline requires when we don't need them anymore: - // https://github.com/facebook/react/pull/7178 - ReactComponentTreeHook = __webpack_require__(592); - } - - function instantiateChild(childInstances, child, name, selfDebugID) { - // We found a component instance. - var keyUnique = childInstances[name] === undefined; - if (false) { - if (!ReactComponentTreeHook) { - ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook'); - } - if (!keyUnique) { - process.env.NODE_ENV !== 'production' ? warning(false, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.%s', KeyEscapeUtils.unescape(name), ReactComponentTreeHook.getStackAddendumByID(selfDebugID)) : void 0; - } - } - if (child != null && keyUnique) { - childInstances[name] = instantiateReactComponent(child, true); - } - } - - /** - * ReactChildReconciler provides helpers for initializing or updating a set of - * children. Its output is suitable for passing it onto ReactMultiChild which - * does diffed reordering and insertion. - */ - var ReactChildReconciler = { - /** - * Generates a "mount image" for each of the supplied children. In the case - * of `ReactDOMComponent`, a mount image is a string of markup. - * - * @param {?object} nestedChildNodes Nested child maps. - * @return {?object} A set of child instances. - * @internal - */ - instantiateChildren: function (nestedChildNodes, transaction, context, selfDebugID // 0 in production and for roots - ) { - if (nestedChildNodes == null) { - return null; - } - var childInstances = {}; - - if (false) { - traverseAllChildren(nestedChildNodes, function (childInsts, child, name) { - return instantiateChild(childInsts, child, name, selfDebugID); - }, childInstances); - } else { - traverseAllChildren(nestedChildNodes, instantiateChild, childInstances); - } - return childInstances; - }, - - /** - * Updates the rendered children and returns a new set of children. - * - * @param {?object} prevChildren Previously initialized set of children. - * @param {?object} nextChildren Flat child element maps. - * @param {ReactReconcileTransaction} transaction - * @param {object} context - * @return {?object} A new set of child instances. - * @internal - */ - updateChildren: function (prevChildren, nextChildren, mountImages, removedNodes, transaction, hostParent, hostContainerInfo, context, selfDebugID // 0 in production and for roots - ) { - // We currently don't have a way to track moves here but if we use iterators - // instead of for..in we can zip the iterators and check if an item has - // moved. - // TODO: If nothing has changed, return the prevChildren object so that we - // can quickly bailout if nothing has changed. - if (!nextChildren && !prevChildren) { - return; - } - var name; - var prevChild; - for (name in nextChildren) { - if (!nextChildren.hasOwnProperty(name)) { - continue; - } - prevChild = prevChildren && prevChildren[name]; - var prevElement = prevChild && prevChild._currentElement; - var nextElement = nextChildren[name]; - if (prevChild != null && shouldUpdateReactComponent(prevElement, nextElement)) { - ReactReconciler.receiveComponent(prevChild, nextElement, transaction, context); - nextChildren[name] = prevChild; - } else { - if (prevChild) { - removedNodes[name] = ReactReconciler.getHostNode(prevChild); - ReactReconciler.unmountComponent(prevChild, false); - } - // The child must be instantiated before it's mounted. - var nextChildInstance = instantiateReactComponent(nextElement, true); - nextChildren[name] = nextChildInstance; - // Creating mount image now ensures refs are resolved in right order - // (see https://github.com/facebook/react/pull/7101 for explanation). - var nextChildMountImage = ReactReconciler.mountComponent(nextChildInstance, transaction, hostParent, hostContainerInfo, context, selfDebugID); - mountImages.push(nextChildMountImage); - } - } - // Unmount children that are no longer present. - for (name in prevChildren) { - if (prevChildren.hasOwnProperty(name) && !(nextChildren && nextChildren.hasOwnProperty(name))) { - prevChild = prevChildren[name]; - removedNodes[name] = ReactReconciler.getHostNode(prevChild); - ReactReconciler.unmountComponent(prevChild, false); - } - } - }, - - /** - * Unmounts all rendered children. This should be used to clean up children - * when this component is unmounted. - * - * @param {?object} renderedChildren Previously initialized set of children. - * @internal - */ - unmountChildren: function (renderedChildren, safely) { - for (var name in renderedChildren) { - if (renderedChildren.hasOwnProperty(name)) { - var renderedChild = renderedChildren[name]; - ReactReconciler.unmountComponent(renderedChild, safely); - } - } - } - - }; - - module.exports = ReactChildReconciler; - /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(200))) - -/***/ }, -/* 1799 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var DOMChildrenOperations = __webpack_require__(384); - var ReactDOMIDOperations = __webpack_require__(1806); - - /** - * Abstracts away all functionality of the reconciler that requires knowledge of - * the browser context. TODO: These callers should be refactored to avoid the - * need for this injection. - */ - var ReactComponentBrowserEnvironment = { - - processChildrenUpdates: ReactDOMIDOperations.dangerouslyProcessChildrenUpdates, - - replaceNodeWithMarkup: DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup - - }; - - module.exports = ReactComponentBrowserEnvironment; - -/***/ }, -/* 1800 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var _prodInvariant = __webpack_require__(22), - _assign = __webpack_require__(13); - - var React = __webpack_require__(206); - var ReactComponentEnvironment = __webpack_require__(390); - var ReactCurrentOwner = __webpack_require__(128); - var ReactErrorUtils = __webpack_require__(391); - var ReactInstanceMap = __webpack_require__(249); - var ReactInstrumentation = __webpack_require__(94); - var ReactNodeTypes = __webpack_require__(577); - var ReactReconciler = __webpack_require__(205); - - if (false) { - var checkReactTypeSpec = require('./checkReactTypeSpec'); - } - - var emptyObject = __webpack_require__(243); - var invariant = __webpack_require__(15); - var shallowEqual = __webpack_require__(371); - var shouldUpdateReactComponent = __webpack_require__(398); - var warning = __webpack_require__(20); - - var CompositeTypes = { - ImpureClass: 0, - PureClass: 1, - StatelessFunctional: 2 - }; - - function StatelessComponent(Component) {} - StatelessComponent.prototype.render = function () { - var Component = ReactInstanceMap.get(this)._currentElement.type; - var element = Component(this.props, this.context, this.updater); - warnIfInvalidElement(Component, element); - return element; - }; - - function warnIfInvalidElement(Component, element) { - if (false) { - process.env.NODE_ENV !== 'production' ? warning(element === null || element === false || React.isValidElement(element), '%s(...): A valid React element (or null) must be returned. You may have ' + 'returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component') : void 0; - } - } - - function shouldConstruct(Component) { - return !!(Component.prototype && Component.prototype.isReactComponent); - } - - function isPureComponent(Component) { - return !!(Component.prototype && Component.prototype.isPureReactComponent); - } - - // Separated into a function to contain deoptimizations caused by try/finally. - function measureLifeCyclePerf(fn, debugID, timerType) { - if (debugID === 0) { - // Top-level wrappers (see ReactMount) and empty components (see - // ReactDOMEmptyComponent) are invisible to hooks and devtools. - // Both are implementation details that should go away in the future. - return fn(); - } - - ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType); - try { - return fn(); - } finally { - ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType); - } - } - - /** - * ------------------ The Life-Cycle of a Composite Component ------------------ - * - * - constructor: Initialization of state. The instance is now retained. - * - componentWillMount - * - render - * - [children's constructors] - * - [children's componentWillMount and render] - * - [children's componentDidMount] - * - componentDidMount - * - * Update Phases: - * - componentWillReceiveProps (only called if parent updated) - * - shouldComponentUpdate - * - componentWillUpdate - * - render - * - [children's constructors or receive props phases] - * - componentDidUpdate - * - * - componentWillUnmount - * - [children's componentWillUnmount] - * - [children destroyed] - * - (destroyed): The instance is now blank, released by React and ready for GC. - * - * ----------------------------------------------------------------------------- - */ - - /** - * An incrementing ID assigned to each component when it is mounted. This is - * used to enforce the order in which `ReactUpdates` updates dirty components. - * - * @private - */ - var nextMountID = 1; - - /** - * @lends {ReactCompositeComponent.prototype} - */ - var ReactCompositeComponent = { - - /** - * Base constructor for all composite component. - * - * @param {ReactElement} element - * @final - * @internal - */ - construct: function (element) { - this._currentElement = element; - this._rootNodeID = 0; - this._compositeType = null; - this._instance = null; - this._hostParent = null; - this._hostContainerInfo = null; - - // See ReactUpdateQueue - this._updateBatchNumber = null; - this._pendingElement = null; - this._pendingStateQueue = null; - this._pendingReplaceState = false; - this._pendingForceUpdate = false; - - this._renderedNodeType = null; - this._renderedComponent = null; - this._context = null; - this._mountOrder = 0; - this._topLevelWrapper = null; - - // See ReactUpdates and ReactUpdateQueue. - this._pendingCallbacks = null; - - // ComponentWillUnmount shall only be called once - this._calledComponentWillUnmount = false; - - if (false) { - this._warnedAboutRefsInRender = false; - } - }, - - /** - * Initializes the component, renders markup, and registers event listeners. - * - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction - * @param {?object} hostParent - * @param {?object} hostContainerInfo - * @param {?object} context - * @return {?string} Rendered markup to be inserted into the DOM. - * @final - * @internal - */ - mountComponent: function (transaction, hostParent, hostContainerInfo, context) { - var _this = this; - - this._context = context; - this._mountOrder = nextMountID++; - this._hostParent = hostParent; - this._hostContainerInfo = hostContainerInfo; - - var publicProps = this._currentElement.props; - var publicContext = this._processContext(context); - - var Component = this._currentElement.type; - - var updateQueue = transaction.getUpdateQueue(); - - // Initialize the public class - var doConstruct = shouldConstruct(Component); - var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue); - var renderedElement; - - // Support functional components - if (!doConstruct && (inst == null || inst.render == null)) { - renderedElement = inst; - warnIfInvalidElement(Component, renderedElement); - !(inst === null || inst === false || React.isValidElement(inst)) ? false ? invariant(false, '%s(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', Component.displayName || Component.name || 'Component') : _prodInvariant('105', Component.displayName || Component.name || 'Component') : void 0; - inst = new StatelessComponent(Component); - this._compositeType = CompositeTypes.StatelessFunctional; - } else { - if (isPureComponent(Component)) { - this._compositeType = CompositeTypes.PureClass; - } else { - this._compositeType = CompositeTypes.ImpureClass; - } - } - - if (false) { - // This will throw later in _renderValidatedComponent, but add an early - // warning now to help debugging - if (inst.render == null) { - process.env.NODE_ENV !== 'production' ? warning(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', Component.displayName || Component.name || 'Component') : void 0; - } - - var propsMutated = inst.props !== publicProps; - var componentName = Component.displayName || Component.name || 'Component'; - - process.env.NODE_ENV !== 'production' ? warning(inst.props === undefined || !propsMutated, '%s(...): When calling super() in `%s`, make sure to pass ' + 'up the same props that your component\'s constructor was passed.', componentName, componentName) : void 0; - } - - // These should be set up in the constructor, but as a convenience for - // simpler class abstractions, we set them up after the fact. - inst.props = publicProps; - inst.context = publicContext; - inst.refs = emptyObject; - inst.updater = updateQueue; - - this._instance = inst; - - // Store a reference from the instance back to the internal representation - ReactInstanceMap.set(inst, this); - - if (false) { - // Since plain JS classes are defined without any special initialization - // logic, we can not catch common errors early. Therefore, we have to - // catch them here, at initialization time, instead. - process.env.NODE_ENV !== 'production' ? warning(!inst.getInitialState || inst.getInitialState.isReactClassApproved, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', this.getName() || 'a component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(!inst.getDefaultProps || inst.getDefaultProps.isReactClassApproved, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', this.getName() || 'a component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(!inst.propTypes, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', this.getName() || 'a component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(!inst.contextTypes, 'contextTypes was defined as an instance property on %s. Use a ' + 'static property to define contextTypes instead.', this.getName() || 'a component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentShouldUpdate !== 'function', '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', this.getName() || 'A component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentDidUnmount !== 'function', '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', this.getName() || 'A component') : void 0; - process.env.NODE_ENV !== 'production' ? warning(typeof inst.componentWillRecieveProps !== 'function', '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', this.getName() || 'A component') : void 0; - } - - var initialState = inst.state; - if (initialState === undefined) { - inst.state = initialState = null; - } - !(typeof initialState === 'object' && !Array.isArray(initialState)) ? false ? invariant(false, '%s.state: must be set to an object or null', this.getName() || 'ReactCompositeComponent') : _prodInvariant('106', this.getName() || 'ReactCompositeComponent') : void 0; - - this._pendingStateQueue = null; - this._pendingReplaceState = false; - this._pendingForceUpdate = false; - - var markup; - if (inst.unstable_handleError) { - markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context); - } else { - markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); - } - - if (inst.componentDidMount) { - if (false) { - transaction.getReactMountReady().enqueue(function () { - measureLifeCyclePerf(function () { - return inst.componentDidMount(); - }, _this._debugID, 'componentDidMount'); - }); - } else { - transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); - } - } - - return markup; - }, - - _constructComponent: function (doConstruct, publicProps, publicContext, updateQueue) { - if (false) { - ReactCurrentOwner.current = this; - try { - return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue); - } finally { - ReactCurrentOwner.current = null; - } - } else { - return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue); - } - }, - - _constructComponentWithoutOwner: function (doConstruct, publicProps, publicContext, updateQueue) { - var Component = this._currentElement.type; - - if (doConstruct) { - if (false) { - return measureLifeCyclePerf(function () { - return new Component(publicProps, publicContext, updateQueue); - }, this._debugID, 'ctor'); - } else { - return new Component(publicProps, publicContext, updateQueue); - } - } - - // This can still be an instance in case of factory components - // but we'll count this as time spent rendering as the more common case. - if (false) { - return measureLifeCyclePerf(function () { - return Component(publicProps, publicContext, updateQueue); - }, this._debugID, 'render'); - } else { - return Component(publicProps, publicContext, updateQueue); - } - }, - - performInitialMountWithErrorHandling: function (renderedElement, hostParent, hostContainerInfo, transaction, context) { - var markup; - var checkpoint = transaction.checkpoint(); - try { - markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); - } catch (e) { - // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint - transaction.rollback(checkpoint); - this._instance.unstable_handleError(e); - if (this._pendingStateQueue) { - this._instance.state = this._processPendingState(this._instance.props, this._instance.context); - } - checkpoint = transaction.checkpoint(); - - this._renderedComponent.unmountComponent(true); - transaction.rollback(checkpoint); - - // Try again - we've informed the component about the error, so they can render an error message this time. - // If this throws again, the error will bubble up (and can be caught by a higher error boundary). - markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context); - } - return markup; - }, - - performInitialMount: function (renderedElement, hostParent, hostContainerInfo, transaction, context) { - var inst = this._instance; - - var debugID = 0; - if (false) { - debugID = this._debugID; - } - - if (inst.componentWillMount) { - if (false) { - measureLifeCyclePerf(function () { - return inst.componentWillMount(); - }, debugID, 'componentWillMount'); - } else { - inst.componentWillMount(); - } - // When mounting, calls to `setState` by `componentWillMount` will set - // `this._pendingStateQueue` without triggering a re-render. - if (this._pendingStateQueue) { - inst.state = this._processPendingState(inst.props, inst.context); - } - } - - // If not a stateless component, we now render - if (renderedElement === undefined) { - renderedElement = this._renderValidatedComponent(); - } - - var nodeType = ReactNodeTypes.getType(renderedElement); - this._renderedNodeType = nodeType; - var child = this._instantiateReactComponent(renderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */ - ); - this._renderedComponent = child; - - var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID); - - if (false) { - if (debugID !== 0) { - var childDebugIDs = child._debugID !== 0 ? [child._debugID] : []; - ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs); - } - } - - return markup; - }, - - getHostNode: function () { - return ReactReconciler.getHostNode(this._renderedComponent); - }, - - /** - * Releases any resources allocated by `mountComponent`. - * - * @final - * @internal - */ - unmountComponent: function (safely) { - if (!this._renderedComponent) { - return; - } - - var inst = this._instance; - - if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) { - inst._calledComponentWillUnmount = true; - - if (safely) { - var name = this.getName() + '.componentWillUnmount()'; - ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst)); - } else { - if (false) { - measureLifeCyclePerf(function () { - return inst.componentWillUnmount(); - }, this._debugID, 'componentWillUnmount'); - } else { - inst.componentWillUnmount(); - } - } - } - - if (this._renderedComponent) { - ReactReconciler.unmountComponent(this._renderedComponent, safely); - this._renderedNodeType = null; - this._renderedComponent = null; - this._instance = null; - } - - // Reset pending fields - // Even if this component is scheduled for another update in ReactUpdates, - // it would still be ignored because these fields are reset. - this._pendingStateQueue = null; - this._pendingReplaceState = false; - this._pendingForceUpdate = false; - this._pendingCallbacks = null; - this._pendingElement = null; - - // These fields do not really need to be reset since this object is no - // longer accessible. - this._context = null; - this._rootNodeID = 0; - this._topLevelWrapper = null; - - // Delete the reference from the instance to this internal representation - // which allow the internals to be properly cleaned up even if the user - // leaks a reference to the public instance. - ReactInstanceMap.remove(inst); - - // Some existing components rely on inst.props even after they've been - // destroyed (in event handlers). - // TODO: inst.props = null; - // TODO: inst.state = null; - // TODO: inst.context = null; - }, - - /** - * Filters the context object to only contain keys specified in - * `contextTypes` - * - * @param {object} context - * @return {?object} - * @private - */ - _maskContext: function (context) { - var Component = this._currentElement.type; - var contextTypes = Component.contextTypes; - if (!contextTypes) { - return emptyObject; - } - var maskedContext = {}; - for (var contextName in contextTypes) { - maskedContext[contextName] = context[contextName]; - } - return maskedContext; - }, - - /** - * Filters the context object to only contain keys specified in - * `contextTypes`, and asserts that they are valid. - * - * @param {object} context - * @return {?object} - * @private - */ - _processContext: function (context) { - var maskedContext = this._maskContext(context); - if (false) { - var Component = this._currentElement.type; - if (Component.contextTypes) { - this._checkContextTypes(Component.contextTypes, maskedContext, 'context'); - } - } - return maskedContext; - }, - - /** - * @param {object} currentContext - * @return {object} - * @private - */ - _processChildContext: function (currentContext) { - var Component = this._currentElement.type; - var inst = this._instance; - var childContext; - - if (inst.getChildContext) { - if (false) { - ReactInstrumentation.debugTool.onBeginProcessingChildContext(); - try { - childContext = inst.getChildContext(); - } finally { - ReactInstrumentation.debugTool.onEndProcessingChildContext(); - } - } else { - childContext = inst.getChildContext(); - } - } - - if (childContext) { - !(typeof Component.childContextTypes === 'object') ? false ? invariant(false, '%s.getChildContext(): childContextTypes must be defined in order to use getChildContext().', this.getName() || 'ReactCompositeComponent') : _prodInvariant('107', this.getName() || 'ReactCompositeComponent') : void 0; - if (false) { - this._checkContextTypes(Component.childContextTypes, childContext, 'childContext'); - } - for (var name in childContext) { - !(name in Component.childContextTypes) ? false ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', this.getName() || 'ReactCompositeComponent', name) : _prodInvariant('108', this.getName() || 'ReactCompositeComponent', name) : void 0; - } - return _assign({}, currentContext, childContext); - } - return currentContext; - }, - - /** - * Assert that the context types are valid - * - * @param {object} typeSpecs Map of context field to a ReactPropType - * @param {object} values Runtime values that need to be type-checked - * @param {string} location e.g. "prop", "context", "child context" - * @private - */ - _checkContextTypes: function (typeSpecs, values, location) { - if (false) { - checkReactTypeSpec(typeSpecs, values, location, this.getName(), null, this._debugID); - } - }, - - receiveComponent: function (nextElement, transaction, nextContext) { - var prevElement = this._currentElement; - var prevContext = this._context; - - this._pendingElement = null; - - this.updateComponent(transaction, prevElement, nextElement, prevContext, nextContext); - }, - - /** - * If any of `_pendingElement`, `_pendingStateQueue`, or `_pendingForceUpdate` - * is set, update the component. - * - * @param {ReactReconcileTransaction} transaction - * @internal - */ - performUpdateIfNecessary: function (transaction) { - if (this._pendingElement != null) { - ReactReconciler.receiveComponent(this, this._pendingElement, transaction, this._context); - } else if (this._pendingStateQueue !== null || this._pendingForceUpdate) { - this.updateComponent(transaction, this._currentElement, this._currentElement, this._context, this._context); - } else { - this._updateBatchNumber = null; - } - }, - - /** - * Perform an update to a mounted component. The componentWillReceiveProps and - * shouldComponentUpdate methods are called, then (assuming the update isn't - * skipped) the remaining update lifecycle methods are called and the DOM - * representation is updated. - * - * By default, this implements React's rendering and reconciliation algorithm. - * Sophisticated clients may wish to override this. - * - * @param {ReactReconcileTransaction} transaction - * @param {ReactElement} prevParentElement - * @param {ReactElement} nextParentElement - * @internal - * @overridable - */ - updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) { - var inst = this._instance; - !(inst != null) ? false ? invariant(false, 'Attempted to update component `%s` that has already been unmounted (or failed to mount).', this.getName() || 'ReactCompositeComponent') : _prodInvariant('136', this.getName() || 'ReactCompositeComponent') : void 0; - - var willReceive = false; - var nextContext; - - // Determine if the context has changed or not - if (this._context === nextUnmaskedContext) { - nextContext = inst.context; - } else { - nextContext = this._processContext(nextUnmaskedContext); - willReceive = true; - } - - var prevProps = prevParentElement.props; - var nextProps = nextParentElement.props; - - // Not a simple state update but a props update - if (prevParentElement !== nextParentElement) { - willReceive = true; - } - - // An update here will schedule an update but immediately set - // _pendingStateQueue which will ensure that any state updates gets - // immediately reconciled instead of waiting for the next batch. - if (willReceive && inst.componentWillReceiveProps) { - if (false) { - measureLifeCyclePerf(function () { - return inst.componentWillReceiveProps(nextProps, nextContext); - }, this._debugID, 'componentWillReceiveProps'); - } else { - inst.componentWillReceiveProps(nextProps, nextContext); - } - } - - var nextState = this._processPendingState(nextProps, nextContext); - var shouldUpdate = true; - - if (!this._pendingForceUpdate) { - if (inst.shouldComponentUpdate) { - if (false) { - shouldUpdate = measureLifeCyclePerf(function () { - return inst.shouldComponentUpdate(nextProps, nextState, nextContext); - }, this._debugID, 'shouldComponentUpdate'); - } else { - shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext); - } - } else { - if (this._compositeType === CompositeTypes.PureClass) { - shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState); - } - } - } - - if (false) { - process.env.NODE_ENV !== 'production' ? warning(shouldUpdate !== undefined, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', this.getName() || 'ReactCompositeComponent') : void 0; - } - - this._updateBatchNumber = null; - if (shouldUpdate) { - this._pendingForceUpdate = false; - // Will set `this.props`, `this.state` and `this.context`. - this._performComponentUpdate(nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext); - } else { - // If it's determined that a component should not update, we still want - // to set props and state but we shortcut the rest of the update. - this._currentElement = nextParentElement; - this._context = nextUnmaskedContext; - inst.props = nextProps; - inst.state = nextState; - inst.context = nextContext; - } - }, - - _processPendingState: function (props, context) { - var inst = this._instance; - var queue = this._pendingStateQueue; - var replace = this._pendingReplaceState; - this._pendingReplaceState = false; - this._pendingStateQueue = null; - - if (!queue) { - return inst.state; - } - - if (replace && queue.length === 1) { - return queue[0]; - } - - var nextState = _assign({}, replace ? queue[0] : inst.state); - for (var i = replace ? 1 : 0; i < queue.length; i++) { - var partial = queue[i]; - _assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial); - } - - return nextState; - }, - - /** - * Merges new props and state, notifies delegate methods of update and - * performs update. - * - * @param {ReactElement} nextElement Next element - * @param {object} nextProps Next public object to set as properties. - * @param {?object} nextState Next object to set as state. - * @param {?object} nextContext Next public object to set as context. - * @param {ReactReconcileTransaction} transaction - * @param {?object} unmaskedContext - * @private - */ - _performComponentUpdate: function (nextElement, nextProps, nextState, nextContext, transaction, unmaskedContext) { - var _this2 = this; - - var inst = this._instance; - - var hasComponentDidUpdate = Boolean(inst.componentDidUpdate); - var prevProps; - var prevState; - var prevContext; - if (hasComponentDidUpdate) { - prevProps = inst.props; - prevState = inst.state; - prevContext = inst.context; - } - - if (inst.componentWillUpdate) { - if (false) { - measureLifeCyclePerf(function () { - return inst.componentWillUpdate(nextProps, nextState, nextContext); - }, this._debugID, 'componentWillUpdate'); - } else { - inst.componentWillUpdate(nextProps, nextState, nextContext); - } - } - - this._currentElement = nextElement; - this._context = unmaskedContext; - inst.props = nextProps; - inst.state = nextState; - inst.context = nextContext; - - this._updateRenderedComponent(transaction, unmaskedContext); - - if (hasComponentDidUpdate) { - if (false) { - transaction.getReactMountReady().enqueue(function () { - measureLifeCyclePerf(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), _this2._debugID, 'componentDidUpdate'); - }); - } else { - transaction.getReactMountReady().enqueue(inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext), inst); - } - } - }, - - /** - * Call the component's `render` method and update the DOM accordingly. - * - * @param {ReactReconcileTransaction} transaction - * @internal - */ - _updateRenderedComponent: function (transaction, context) { - var prevComponentInstance = this._renderedComponent; - var prevRenderedElement = prevComponentInstance._currentElement; - var nextRenderedElement = this._renderValidatedComponent(); - - var debugID = 0; - if (false) { - debugID = this._debugID; - } - - if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { - ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context)); - } else { - var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance); - ReactReconciler.unmountComponent(prevComponentInstance, false); - - var nodeType = ReactNodeTypes.getType(nextRenderedElement); - this._renderedNodeType = nodeType; - var child = this._instantiateReactComponent(nextRenderedElement, nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */ - ); - this._renderedComponent = child; - - var nextMarkup = ReactReconciler.mountComponent(child, transaction, this._hostParent, this._hostContainerInfo, this._processChildContext(context), debugID); - - if (false) { - if (debugID !== 0) { - var childDebugIDs = child._debugID !== 0 ? [child._debugID] : []; - ReactInstrumentation.debugTool.onSetChildren(debugID, childDebugIDs); - } - } - - this._replaceNodeWithMarkup(oldHostNode, nextMarkup, prevComponentInstance); - } - }, - - /** - * Overridden in shallow rendering. - * - * @protected - */ - _replaceNodeWithMarkup: function (oldHostNode, nextMarkup, prevInstance) { - ReactComponentEnvironment.replaceNodeWithMarkup(oldHostNode, nextMarkup, prevInstance); - }, - - /** - * @protected - */ - _renderValidatedComponentWithoutOwnerOrContext: function () { - var inst = this._instance; - var renderedElement; - - if (false) { - renderedElement = measureLifeCyclePerf(function () { - return inst.render(); - }, this._debugID, 'render'); - } else { - renderedElement = inst.render(); - } - - if (false) { - // We allow auto-mocks to proceed as if they're returning null. - if (renderedElement === undefined && inst.render._isMockFunction) { - // This is probably bad practice. Consider warning here and - // deprecating this convenience. - renderedElement = null; - } - } - - return renderedElement; - }, - - /** - * @private - */ - _renderValidatedComponent: function () { - var renderedElement; - if (("production") !== 'production' || this._compositeType !== CompositeTypes.StatelessFunctional) { - ReactCurrentOwner.current = this; - try { - renderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); - } finally { - ReactCurrentOwner.current = null; - } - } else { - renderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); - } - !( - // TODO: An `isValidNode` function would probably be more appropriate - renderedElement === null || renderedElement === false || React.isValidElement(renderedElement)) ? false ? invariant(false, '%s.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.', this.getName() || 'ReactCompositeComponent') : _prodInvariant('109', this.getName() || 'ReactCompositeComponent') : void 0; - - return renderedElement; - }, - - /** - * Lazily allocates the refs object and stores `component` as `ref`. - * - * @param {string} ref Reference name. - * @param {component} component Component to store as `ref`. - * @final - * @private - */ - attachRef: function (ref, component) { - var inst = this.getPublicInstance(); - !(inst != null) ? false ? invariant(false, 'Stateless function components cannot have refs.') : _prodInvariant('110') : void 0; - var publicComponentInstance = component.getPublicInstance(); - if (false) { - var componentName = component && component.getName ? component.getName() : 'a component'; - process.env.NODE_ENV !== 'production' ? warning(publicComponentInstance != null || component._compositeType !== CompositeTypes.StatelessFunctional, 'Stateless function components cannot be given refs ' + '(See ref "%s" in %s created by %s). ' + 'Attempts to access this ref will fail.', ref, componentName, this.getName()) : void 0; - } - var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs; - refs[ref] = publicComponentInstance; - }, - - /** - * Detaches a reference name. - * - * @param {string} ref Name to dereference. - * @final - * @private - */ - detachRef: function (ref) { - var refs = this.getPublicInstance().refs; - delete refs[ref]; - }, - - /** - * Get a text description of the component that can be used to identify it - * in error messages. - * @return {string} The name or null. - * @internal - */ - getName: function () { - var type = this._currentElement.type; - var constructor = this._instance && this._instance.constructor; - return type.displayName || constructor && constructor.displayName || type.name || constructor && constructor.name || null; - }, - - /** - * Get the publicly accessible representation of this component - i.e. what - * is exposed by refs and returned by render. Can be null for stateless - * components. - * - * @return {ReactComponent} the public component instance. - * @internal - */ - getPublicInstance: function () { - var inst = this._instance; - if (this._compositeType === CompositeTypes.StatelessFunctional) { - return null; - } - return inst; - }, - - // Stub - _instantiateReactComponent: null - - }; - - module.exports = ReactCompositeComponent; - -/***/ }, -/* 1801 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - /* globals __REACT_DEVTOOLS_GLOBAL_HOOK__*/ - - 'use strict'; - - var ReactDOMComponentTree = __webpack_require__(41); - var ReactDefaultInjection = __webpack_require__(1814); - var ReactMount = __webpack_require__(576); - var ReactReconciler = __webpack_require__(205); - var ReactUpdates = __webpack_require__(108); - var ReactVersion = __webpack_require__(1827); - - var findDOMNode = __webpack_require__(1843); - var getHostComponentFromComposite = __webpack_require__(581); - var renderSubtreeIntoContainer = __webpack_require__(1851); - var warning = __webpack_require__(20); - - ReactDefaultInjection.inject(); - - var ReactDOM = { - findDOMNode: findDOMNode, - render: ReactMount.render, - unmountComponentAtNode: ReactMount.unmountComponentAtNode, - version: ReactVersion, - - /* eslint-disable camelcase */ - unstable_batchedUpdates: ReactUpdates.batchedUpdates, - unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer - }; - - // Inject the runtime into a devtools global hook regardless of browser. - // Allows for debugging when the hook is injected on the page. - if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') { - __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({ - ComponentTree: { - getClosestInstanceFromNode: ReactDOMComponentTree.getClosestInstanceFromNode, - getNodeFromInstance: function (inst) { - // inst is an internal instance (but could be a composite) - if (inst._renderedComponent) { - inst = getHostComponentFromComposite(inst); - } - if (inst) { - return ReactDOMComponentTree.getNodeFromInstance(inst); - } else { - return null; - } - } - }, - Mount: ReactMount, - Reconciler: ReactReconciler - }); - } - - if (false) { - var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); - if (ExecutionEnvironment.canUseDOM && window.top === window.self) { - - // First check if devtools is not installed - if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') { - // If we're in Chrome or Firefox, provide a download link if not installed. - if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) { - // Firefox does not have the issue with devtools loaded over file:// - var showFileUrlMessage = window.location.protocol.indexOf('http') === -1 && navigator.userAgent.indexOf('Firefox') === -1; - console.debug('Download the React DevTools ' + (showFileUrlMessage ? 'and use an HTTP server (instead of a file: URL) ' : '') + 'for a better development experience: ' + 'https://fb.me/react-devtools'); - } - } - - var testFunc = function testFn() {}; - process.env.NODE_ENV !== 'production' ? warning((testFunc.name || testFunc.toString()).indexOf('testFn') !== -1, 'It looks like you\'re using a minified copy of the development build ' + 'of React. When deploying React apps to production, make sure to use ' + 'the production build which skips development warnings and is faster. ' + 'See https://fb.me/react-minification for more details.') : void 0; - - // If we're in IE8, check to see if we are in compatibility mode and provide - // information on preventing compatibility mode - var ieCompatibilityMode = document.documentMode && document.documentMode < 8; - - process.env.NODE_ENV !== 'production' ? warning(!ieCompatibilityMode, 'Internet Explorer is running in compatibility mode; please add the ' + 'following tag to your HTML to prevent this from happening: ' + '') : void 0; - - var expectedFeatures = [ - // shims - Array.isArray, Array.prototype.every, Array.prototype.forEach, Array.prototype.indexOf, Array.prototype.map, Date.now, Function.prototype.bind, Object.keys, String.prototype.trim]; - - for (var i = 0; i < expectedFeatures.length; i++) { - if (!expectedFeatures[i]) { - process.env.NODE_ENV !== 'production' ? warning(false, 'One or more ES5 shims expected by React are not available: ' + 'https://fb.me/react-warning-polyfills') : void 0; - break; - } - } - } - } - - if (false) { - var ReactInstrumentation = require('./ReactInstrumentation'); - var ReactDOMUnknownPropertyHook = require('./ReactDOMUnknownPropertyHook'); - var ReactDOMNullInputValuePropHook = require('./ReactDOMNullInputValuePropHook'); - var ReactDOMInvalidARIAHook = require('./ReactDOMInvalidARIAHook'); - - ReactInstrumentation.debugTool.addHook(ReactDOMUnknownPropertyHook); - ReactInstrumentation.debugTool.addHook(ReactDOMNullInputValuePropHook); - ReactInstrumentation.debugTool.addHook(ReactDOMInvalidARIAHook); - } - - module.exports = ReactDOM; - -/***/ }, -/* 1802 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - /* global hasOwnProperty:true */ - - 'use strict'; - - var _prodInvariant = __webpack_require__(22), - _assign = __webpack_require__(13); - - var AutoFocusUtils = __webpack_require__(1789); - var CSSPropertyOperations = __webpack_require__(1791); - var DOMLazyTree = __webpack_require__(203); - var DOMNamespaces = __webpack_require__(385); - var DOMProperty = __webpack_require__(204); - var DOMPropertyOperations = __webpack_require__(569); - var EventPluginHub = __webpack_require__(247); - var EventPluginRegistry = __webpack_require__(386); - var ReactBrowserEventEmitter = __webpack_require__(288); - var ReactDOMComponentFlags = __webpack_require__(570); - var ReactDOMComponentTree = __webpack_require__(41); - var ReactDOMInput = __webpack_require__(1807); - var ReactDOMOption = __webpack_require__(1808); - var ReactDOMSelect = __webpack_require__(571); - var ReactDOMTextarea = __webpack_require__(1811); - var ReactInstrumentation = __webpack_require__(94); - var ReactMultiChild = __webpack_require__(1820); - var ReactServerRenderingTransaction = __webpack_require__(1825); - - var emptyFunction = __webpack_require__(64); - var escapeTextContentForBrowser = __webpack_require__(291); - var invariant = __webpack_require__(15); - var isEventSupported = __webpack_require__(397); - var shallowEqual = __webpack_require__(371); - var validateDOMNesting = __webpack_require__(399); - var warning = __webpack_require__(20); - - var Flags = ReactDOMComponentFlags; - var deleteListener = EventPluginHub.deleteListener; - var getNode = ReactDOMComponentTree.getNodeFromInstance; - var listenTo = ReactBrowserEventEmitter.listenTo; - var registrationNameModules = EventPluginRegistry.registrationNameModules; - - // For quickly matching children type, to test if can be treated as content. - var CONTENT_TYPES = { 'string': true, 'number': true }; - - var STYLE = 'style'; - var HTML = '__html'; - var RESERVED_PROPS = { - children: null, - dangerouslySetInnerHTML: null, - suppressContentEditableWarning: null - }; - - // Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE). - var DOC_FRAGMENT_TYPE = 11; - - function getDeclarationErrorAddendum(internalInstance) { - if (internalInstance) { - var owner = internalInstance._currentElement._owner || null; - if (owner) { - var name = owner.getName(); - if (name) { - return ' This DOM node was rendered by `' + name + '`.'; - } - } - } - return ''; - } - - function friendlyStringify(obj) { - if (typeof obj === 'object') { - if (Array.isArray(obj)) { - return '[' + obj.map(friendlyStringify).join(', ') + ']'; - } else { - var pairs = []; - for (var key in obj) { - if (Object.prototype.hasOwnProperty.call(obj, key)) { - var keyEscaped = /^[a-z$_][\w$_]*$/i.test(key) ? key : JSON.stringify(key); - pairs.push(keyEscaped + ': ' + friendlyStringify(obj[key])); - } - } - return '{' + pairs.join(', ') + '}'; - } - } else if (typeof obj === 'string') { - return JSON.stringify(obj); - } else if (typeof obj === 'function') { - return '[function object]'; - } - // Differs from JSON.stringify in that undefined because undefined and that - // inf and nan don't become null - return String(obj); - } - - var styleMutationWarning = {}; - - function checkAndWarnForMutatedStyle(style1, style2, component) { - if (style1 == null || style2 == null) { - return; - } - if (shallowEqual(style1, style2)) { - return; - } - - var componentName = component._tag; - var owner = component._currentElement._owner; - var ownerName; - if (owner) { - ownerName = owner.getName(); - } - - var hash = ownerName + '|' + componentName; - - if (styleMutationWarning.hasOwnProperty(hash)) { - return; - } - - styleMutationWarning[hash] = true; - - false ? warning(false, '`%s` was passed a style object that has previously been mutated. ' + 'Mutating `style` is deprecated. Consider cloning it beforehand. Check ' + 'the `render` %s. Previous style: %s. Mutated style: %s.', componentName, owner ? 'of `' + ownerName + '`' : 'using <' + componentName + '>', friendlyStringify(style1), friendlyStringify(style2)) : void 0; - } - - /** - * @param {object} component - * @param {?object} props - */ - function assertValidProps(component, props) { - if (!props) { - return; - } - // Note the use of `==` which checks for null or undefined. - if (voidElementTags[component._tag]) { - !(props.children == null && props.dangerouslySetInnerHTML == null) ? false ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : _prodInvariant('137', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : void 0; - } - if (props.dangerouslySetInnerHTML != null) { - !(props.children == null) ? false ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : _prodInvariant('60') : void 0; - !(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? false ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : _prodInvariant('61') : void 0; - } - if (false) { - process.env.NODE_ENV !== 'production' ? warning(props.innerHTML == null, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.') : void 0; - process.env.NODE_ENV !== 'production' ? warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.') : void 0; - process.env.NODE_ENV !== 'production' ? warning(props.onFocusIn == null && props.onFocusOut == null, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.') : void 0; - } - !(props.style == null || typeof props.style === 'object') ? false ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getDeclarationErrorAddendum(component)) : _prodInvariant('62', getDeclarationErrorAddendum(component)) : void 0; - } - - function enqueuePutListener(inst, registrationName, listener, transaction) { - if (transaction instanceof ReactServerRenderingTransaction) { - return; - } - if (false) { - // IE8 has no API for event capturing and the `onScroll` event doesn't - // bubble. - process.env.NODE_ENV !== 'production' ? warning(registrationName !== 'onScroll' || isEventSupported('scroll', true), 'This browser doesn\'t support the `onScroll` event') : void 0; - } - var containerInfo = inst._hostContainerInfo; - var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE; - var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument; - listenTo(registrationName, doc); - transaction.getReactMountReady().enqueue(putListener, { - inst: inst, - registrationName: registrationName, - listener: listener - }); - } - - function putListener() { - var listenerToPut = this; - EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener); - } - - function inputPostMount() { - var inst = this; - ReactDOMInput.postMountWrapper(inst); - } - - function textareaPostMount() { - var inst = this; - ReactDOMTextarea.postMountWrapper(inst); - } - - function optionPostMount() { - var inst = this; - ReactDOMOption.postMountWrapper(inst); - } - - var setAndValidateContentChildDev = emptyFunction; - if (false) { - setAndValidateContentChildDev = function (content) { - var hasExistingContent = this._contentDebugID != null; - var debugID = this._debugID; - // This ID represents the inlined child that has no backing instance: - var contentDebugID = -debugID; - - if (content == null) { - if (hasExistingContent) { - ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID); - } - this._contentDebugID = null; - return; - } - - validateDOMNesting(null, String(content), this, this._ancestorInfo); - this._contentDebugID = contentDebugID; - if (hasExistingContent) { - ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content); - ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID); - } else { - ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content, debugID); - ReactInstrumentation.debugTool.onMountComponent(contentDebugID); - ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]); - } - }; - } - - // There are so many media events, it makes sense to just - // maintain a list rather than create a `trapBubbledEvent` for each - var mediaEvents = { - topAbort: 'abort', - topCanPlay: 'canplay', - topCanPlayThrough: 'canplaythrough', - topDurationChange: 'durationchange', - topEmptied: 'emptied', - topEncrypted: 'encrypted', - topEnded: 'ended', - topError: 'error', - topLoadedData: 'loadeddata', - topLoadedMetadata: 'loadedmetadata', - topLoadStart: 'loadstart', - topPause: 'pause', - topPlay: 'play', - topPlaying: 'playing', - topProgress: 'progress', - topRateChange: 'ratechange', - topSeeked: 'seeked', - topSeeking: 'seeking', - topStalled: 'stalled', - topSuspend: 'suspend', - topTimeUpdate: 'timeupdate', - topVolumeChange: 'volumechange', - topWaiting: 'waiting' - }; - - function trapBubbledEventsLocal() { - var inst = this; - // If a component renders to null or if another component fatals and causes - // the state of the tree to be corrupted, `node` here can be null. - !inst._rootNodeID ? false ? invariant(false, 'Must be mounted to trap events') : _prodInvariant('63') : void 0; - var node = getNode(inst); - !node ? false ? invariant(false, 'trapBubbledEvent(...): Requires node to be rendered.') : _prodInvariant('64') : void 0; - - switch (inst._tag) { - case 'iframe': - case 'object': - inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)]; - break; - case 'video': - case 'audio': - - inst._wrapperState.listeners = []; - // Create listener for each media event - for (var event in mediaEvents) { - if (mediaEvents.hasOwnProperty(event)) { - inst._wrapperState.listeners.push(ReactBrowserEventEmitter.trapBubbledEvent(event, mediaEvents[event], node)); - } - } - break; - case 'source': - inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node)]; - break; - case 'img': - inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topError', 'error', node), ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', node)]; - break; - case 'form': - inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topReset', 'reset', node), ReactBrowserEventEmitter.trapBubbledEvent('topSubmit', 'submit', node)]; - break; - case 'input': - case 'select': - case 'textarea': - inst._wrapperState.listeners = [ReactBrowserEventEmitter.trapBubbledEvent('topInvalid', 'invalid', node)]; - break; - } - } - - function postUpdateSelectWrapper() { - ReactDOMSelect.postUpdateWrapper(this); - } - - // For HTML, certain tags should omit their close tag. We keep a whitelist for - // those special-case tags. - - var omittedCloseTags = { - 'area': true, - 'base': true, - 'br': true, - 'col': true, - 'embed': true, - 'hr': true, - 'img': true, - 'input': true, - 'keygen': true, - 'link': true, - 'meta': true, - 'param': true, - 'source': true, - 'track': true, - 'wbr': true - }; - - var newlineEatingTags = { - 'listing': true, - 'pre': true, - 'textarea': true - }; - - // For HTML, certain tags cannot have children. This has the same purpose as - // `omittedCloseTags` except that `menuitem` should still have its closing tag. - - var voidElementTags = _assign({ - 'menuitem': true - }, omittedCloseTags); - - // We accept any tag to be rendered but since this gets injected into arbitrary - // HTML, we want to make sure that it's a safe tag. - // http://www.w3.org/TR/REC-xml/#NT-Name - - var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset - var validatedTagCache = {}; - var hasOwnProperty = {}.hasOwnProperty; - - function validateDangerousTag(tag) { - if (!hasOwnProperty.call(validatedTagCache, tag)) { - !VALID_TAG_REGEX.test(tag) ? false ? invariant(false, 'Invalid tag: %s', tag) : _prodInvariant('65', tag) : void 0; - validatedTagCache[tag] = true; - } - } - - function isCustomComponent(tagName, props) { - return tagName.indexOf('-') >= 0 || props.is != null; - } - - var globalIdCounter = 1; - - /** - * Creates a new React class that is idempotent and capable of containing other - * React components. It accepts event listeners and DOM properties that are - * valid according to `DOMProperty`. - * - * - Event listeners: `onClick`, `onMouseDown`, etc. - * - DOM properties: `className`, `name`, `title`, etc. - * - * The `style` property functions differently from the DOM API. It accepts an - * object mapping of style properties to values. - * - * @constructor ReactDOMComponent - * @extends ReactMultiChild - */ - function ReactDOMComponent(element) { - var tag = element.type; - validateDangerousTag(tag); - this._currentElement = element; - this._tag = tag.toLowerCase(); - this._namespaceURI = null; - this._renderedChildren = null; - this._previousStyle = null; - this._previousStyleCopy = null; - this._hostNode = null; - this._hostParent = null; - this._rootNodeID = 0; - this._domID = 0; - this._hostContainerInfo = null; - this._wrapperState = null; - this._topLevelWrapper = null; - this._flags = 0; - if (false) { - this._ancestorInfo = null; - setAndValidateContentChildDev.call(this, null); - } - } - - ReactDOMComponent.displayName = 'ReactDOMComponent'; - - ReactDOMComponent.Mixin = { - - /** - * Generates root tag markup then recurses. This method has side effects and - * is not idempotent. - * - * @internal - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction - * @param {?ReactDOMComponent} the parent component instance - * @param {?object} info about the host container - * @param {object} context - * @return {string} The computed markup. - */ - mountComponent: function (transaction, hostParent, hostContainerInfo, context) { - this._rootNodeID = globalIdCounter++; - this._domID = hostContainerInfo._idCounter++; - this._hostParent = hostParent; - this._hostContainerInfo = hostContainerInfo; - - var props = this._currentElement.props; - - switch (this._tag) { - case 'audio': - case 'form': - case 'iframe': - case 'img': - case 'link': - case 'object': - case 'source': - case 'video': - this._wrapperState = { - listeners: null - }; - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); - break; - case 'input': - ReactDOMInput.mountWrapper(this, props, hostParent); - props = ReactDOMInput.getHostProps(this, props); - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); - break; - case 'option': - ReactDOMOption.mountWrapper(this, props, hostParent); - props = ReactDOMOption.getHostProps(this, props); - break; - case 'select': - ReactDOMSelect.mountWrapper(this, props, hostParent); - props = ReactDOMSelect.getHostProps(this, props); - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); - break; - case 'textarea': - ReactDOMTextarea.mountWrapper(this, props, hostParent); - props = ReactDOMTextarea.getHostProps(this, props); - transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this); - break; - } - - assertValidProps(this, props); - - // We create tags in the namespace of their parent container, except HTML - // tags get no namespace. - var namespaceURI; - var parentTag; - if (hostParent != null) { - namespaceURI = hostParent._namespaceURI; - parentTag = hostParent._tag; - } else if (hostContainerInfo._tag) { - namespaceURI = hostContainerInfo._namespaceURI; - parentTag = hostContainerInfo._tag; - } - if (namespaceURI == null || namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') { - namespaceURI = DOMNamespaces.html; - } - if (namespaceURI === DOMNamespaces.html) { - if (this._tag === 'svg') { - namespaceURI = DOMNamespaces.svg; - } else if (this._tag === 'math') { - namespaceURI = DOMNamespaces.mathml; - } - } - this._namespaceURI = namespaceURI; - - if (false) { - var parentInfo; - if (hostParent != null) { - parentInfo = hostParent._ancestorInfo; - } else if (hostContainerInfo._tag) { - parentInfo = hostContainerInfo._ancestorInfo; - } - if (parentInfo) { - // parentInfo should always be present except for the top-level - // component when server rendering - validateDOMNesting(this._tag, null, this, parentInfo); - } - this._ancestorInfo = validateDOMNesting.updatedAncestorInfo(parentInfo, this._tag, this); - } - - var mountImage; - if (transaction.useCreateElement) { - var ownerDocument = hostContainerInfo._ownerDocument; - var el; - if (namespaceURI === DOMNamespaces.html) { - if (this._tag === 'script') { - // Create the script via .innerHTML so its "parser-inserted" flag is - // set to true and it does not execute - var div = ownerDocument.createElement('div'); - var type = this._currentElement.type; - div.innerHTML = '<' + type + '>'; - el = div.removeChild(div.firstChild); - } else if (props.is) { - el = ownerDocument.createElement(this._currentElement.type, props.is); - } else { - // Separate else branch instead of using `props.is || undefined` above becuase of a Firefox bug. - // See discussion in https://github.com/facebook/react/pull/6896 - // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240 - el = ownerDocument.createElement(this._currentElement.type); - } - } else { - el = ownerDocument.createElementNS(namespaceURI, this._currentElement.type); - } - ReactDOMComponentTree.precacheNode(this, el); - this._flags |= Flags.hasCachedChildNodes; - if (!this._hostParent) { - DOMPropertyOperations.setAttributeForRoot(el); - } - this._updateDOMProperties(null, props, transaction); - var lazyTree = DOMLazyTree(el); - this._createInitialChildren(transaction, props, context, lazyTree); - mountImage = lazyTree; - } else { - var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props); - var tagContent = this._createContentMarkup(transaction, props, context); - if (!tagContent && omittedCloseTags[this._tag]) { - mountImage = tagOpen + '/>'; - } else { - mountImage = tagOpen + '>' + tagContent + ''; - } - } - - switch (this._tag) { - case 'input': - transaction.getReactMountReady().enqueue(inputPostMount, this); - if (props.autoFocus) { - transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); - } - break; - case 'textarea': - transaction.getReactMountReady().enqueue(textareaPostMount, this); - if (props.autoFocus) { - transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); - } - break; - case 'select': - if (props.autoFocus) { - transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); - } - break; - case 'button': - if (props.autoFocus) { - transaction.getReactMountReady().enqueue(AutoFocusUtils.focusDOMComponent, this); - } - break; - case 'option': - transaction.getReactMountReady().enqueue(optionPostMount, this); - break; - } - - return mountImage; - }, - - /** - * Creates markup for the open tag and all attributes. - * - * This method has side effects because events get registered. - * - * Iterating over object properties is faster than iterating over arrays. - * @see http://jsperf.com/obj-vs-arr-iteration - * - * @private - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction - * @param {object} props - * @return {string} Markup of opening tag. - */ - _createOpenTagMarkupAndPutListeners: function (transaction, props) { - var ret = '<' + this._currentElement.type; - - for (var propKey in props) { - if (!props.hasOwnProperty(propKey)) { - continue; - } - var propValue = props[propKey]; - if (propValue == null) { - continue; - } - if (registrationNameModules.hasOwnProperty(propKey)) { - if (propValue) { - enqueuePutListener(this, propKey, propValue, transaction); - } - } else { - if (propKey === STYLE) { - if (propValue) { - if (false) { - // See `_updateDOMProperties`. style block - this._previousStyle = propValue; - } - propValue = this._previousStyleCopy = _assign({}, props.style); - } - propValue = CSSPropertyOperations.createMarkupForStyles(propValue, this); - } - var markup = null; - if (this._tag != null && isCustomComponent(this._tag, props)) { - if (!RESERVED_PROPS.hasOwnProperty(propKey)) { - markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue); - } - } else { - markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue); - } - if (markup) { - ret += ' ' + markup; - } - } - } - - // For static pages, no need to put React ID and checksum. Saves lots of - // bytes. - if (transaction.renderToStaticMarkup) { - return ret; - } - - if (!this._hostParent) { - ret += ' ' + DOMPropertyOperations.createMarkupForRoot(); - } - ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID); - return ret; - }, - - /** - * Creates markup for the content between the tags. - * - * @private - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction - * @param {object} props - * @param {object} context - * @return {string} Content markup. - */ - _createContentMarkup: function (transaction, props, context) { - var ret = ''; - - // Intentional use of != to avoid catching zero/false. - var innerHTML = props.dangerouslySetInnerHTML; - if (innerHTML != null) { - if (innerHTML.__html != null) { - ret = innerHTML.__html; - } - } else { - var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null; - var childrenToUse = contentToUse != null ? null : props.children; - if (contentToUse != null) { - // TODO: Validate that text is allowed as a child of this node - ret = escapeTextContentForBrowser(contentToUse); - if (false) { - setAndValidateContentChildDev.call(this, contentToUse); - } - } else if (childrenToUse != null) { - var mountImages = this.mountChildren(childrenToUse, transaction, context); - ret = mountImages.join(''); - } - } - if (newlineEatingTags[this._tag] && ret.charAt(0) === '\n') { - // text/html ignores the first character in these tags if it's a newline - // Prefer to break application/xml over text/html (for now) by adding - // a newline specifically to get eaten by the parser. (Alternately for - // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first - // \r is normalized out by HTMLTextAreaElement#value.) - // See: - // See: - // See: - // See: Parsing of "textarea" "listing" and "pre" elements - // from - return '\n' + ret; - } else { - return ret; - } - }, - - _createInitialChildren: function (transaction, props, context, lazyTree) { - // Intentional use of != to avoid catching zero/false. - var innerHTML = props.dangerouslySetInnerHTML; - if (innerHTML != null) { - if (innerHTML.__html != null) { - DOMLazyTree.queueHTML(lazyTree, innerHTML.__html); - } - } else { - var contentToUse = CONTENT_TYPES[typeof props.children] ? props.children : null; - var childrenToUse = contentToUse != null ? null : props.children; - if (contentToUse != null) { - // TODO: Validate that text is allowed as a child of this node - if (false) { - setAndValidateContentChildDev.call(this, contentToUse); - } - DOMLazyTree.queueText(lazyTree, contentToUse); - } else if (childrenToUse != null) { - var mountImages = this.mountChildren(childrenToUse, transaction, context); - for (var i = 0; i < mountImages.length; i++) { - DOMLazyTree.queueChild(lazyTree, mountImages[i]); - } - } - } - }, - - /** - * Receives a next element and updates the component. - * - * @internal - * @param {ReactElement} nextElement - * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction - * @param {object} context - */ - receiveComponent: function (nextElement, transaction, context) { - var prevElement = this._currentElement; - this._currentElement = nextElement; - this.updateComponent(transaction, prevElement, nextElement, context); - }, - - /** - * Updates a DOM component after it has already been allocated and - * attached to the DOM. Reconciles the root DOM node, then recurses. - * - * @param {ReactReconcileTransaction} transaction - * @param {ReactElement} prevElement - * @param {ReactElement} nextElement - * @internal - * @overridable - */ - updateComponent: function (transaction, prevElement, nextElement, context) { - var lastProps = prevElement.props; - var nextProps = this._currentElement.props; - - switch (this._tag) { - case 'input': - lastProps = ReactDOMInput.getHostProps(this, lastProps); - nextProps = ReactDOMInput.getHostProps(this, nextProps); - break; - case 'option': - lastProps = ReactDOMOption.getHostProps(this, lastProps); - nextProps = ReactDOMOption.getHostProps(this, nextProps); - break; - case 'select': - lastProps = ReactDOMSelect.getHostProps(this, lastProps); - nextProps = ReactDOMSelect.getHostProps(this, nextProps); - break; - case 'textarea': - lastProps = ReactDOMTextarea.getHostProps(this, lastProps); - nextProps = ReactDOMTextarea.getHostProps(this, nextProps); - break; - } - - assertValidProps(this, nextProps); - this._updateDOMProperties(lastProps, nextProps, transaction); - this._updateDOMChildren(lastProps, nextProps, transaction, context); - - switch (this._tag) { - case 'input': - // Update the wrapper around inputs *after* updating props. This has to - // happen after `_updateDOMProperties`. Otherwise HTML5 input validations - // raise warnings and prevent the new value from being assigned. - ReactDOMInput.updateWrapper(this); - break; - case 'textarea': - ReactDOMTextarea.updateWrapper(this); - break; - case 'select': - // host component that allows setting these optional - * props: `checked`, `value`, `defaultChecked`, and `defaultValue`. - * - * If `checked` or `value` are not supplied (or null/undefined), user actions - * that affect the checked state or value will trigger updates to the element. - * - * If they are supplied (and not null/undefined), the rendered element will not - * trigger updates to the element. Instead, the props must change in order for - * the rendered element to be updated. - * - * The rendered element will be initialized as unchecked (or `defaultChecked`) - * with an empty value (or `defaultValue`). - * - * @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html - */ - var ReactDOMInput = { - getHostProps: function (inst, props) { - var value = LinkedValueUtils.getValue(props); - var checked = LinkedValueUtils.getChecked(props); - - var hostProps = _assign({ - // Make sure we set .type before any other properties (setting .value - // before .type means .value is lost in IE11 and below) - type: undefined, - // Make sure we set .step before .value (setting .value before .step - // means .value is rounded on mount, based upon step precision) - step: undefined, - // Make sure we set .min & .max before .value (to ensure proper order - // in corner cases such as min or max deriving from value, e.g. Issue #7170) - min: undefined, - max: undefined - }, props, { - defaultChecked: undefined, - defaultValue: undefined, - value: value != null ? value : inst._wrapperState.initialValue, - checked: checked != null ? checked : inst._wrapperState.initialChecked, - onChange: inst._wrapperState.onChange - }); - - return hostProps; - }, - - mountWrapper: function (inst, props) { - if (false) { - LinkedValueUtils.checkPropTypes('input', props, inst._currentElement._owner); - - var owner = inst._currentElement._owner; - - if (props.valueLink !== undefined && !didWarnValueLink) { - process.env.NODE_ENV !== 'production' ? warning(false, '`valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0; - didWarnValueLink = true; - } - if (props.checkedLink !== undefined && !didWarnCheckedLink) { - process.env.NODE_ENV !== 'production' ? warning(false, '`checkedLink` prop on `input` is deprecated; set `value` and `onChange` instead.') : void 0; - didWarnCheckedLink = true; - } - if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) { - process.env.NODE_ENV !== 'production' ? warning(false, '%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; - didWarnCheckedDefaultChecked = true; - } - if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) { - process.env.NODE_ENV !== 'production' ? warning(false, '%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; - didWarnValueDefaultValue = true; - } - } - - var defaultValue = props.defaultValue; - inst._wrapperState = { - initialChecked: props.checked != null ? props.checked : props.defaultChecked, - initialValue: props.value != null ? props.value : defaultValue, - listeners: null, - onChange: _handleChange.bind(inst) - }; - - if (false) { - inst._wrapperState.controlled = isControlled(props); - } - }, - - updateWrapper: function (inst) { - var props = inst._currentElement.props; - - if (false) { - var controlled = isControlled(props); - var owner = inst._currentElement._owner; - - if (!inst._wrapperState.controlled && controlled && !didWarnUncontrolledToControlled) { - process.env.NODE_ENV !== 'production' ? warning(false, '%s is changing an uncontrolled input of type %s to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; - didWarnUncontrolledToControlled = true; - } - if (inst._wrapperState.controlled && !controlled && !didWarnControlledToUncontrolled) { - process.env.NODE_ENV !== 'production' ? warning(false, '%s is changing a controlled input of type %s to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', owner && owner.getName() || 'A component', props.type) : void 0; - didWarnControlledToUncontrolled = true; - } - } - - // TODO: Shouldn't this be getChecked(props)? - var checked = props.checked; - if (checked != null) { - DOMPropertyOperations.setValueForProperty(ReactDOMComponentTree.getNodeFromInstance(inst), 'checked', checked || false); - } - - var node = ReactDOMComponentTree.getNodeFromInstance(inst); - var value = LinkedValueUtils.getValue(props); - if (value != null) { - - // Cast `value` to a string to ensure the value is set correctly. While - // browsers typically do this as necessary, jsdom doesn't. - var newValue = '' + value; - - // To avoid side effects (such as losing text selection), only set value if changed - if (newValue !== node.value) { - node.value = newValue; - } - } else { - if (props.value == null && props.defaultValue != null) { - node.defaultValue = '' + props.defaultValue; - } - if (props.checked == null && props.defaultChecked != null) { - node.defaultChecked = !!props.defaultChecked; - } - } - }, - - postMountWrapper: function (inst) { - var props = inst._currentElement.props; - - // This is in postMount because we need access to the DOM node, which is not - // available until after the component has mounted. - var node = ReactDOMComponentTree.getNodeFromInstance(inst); - - // Detach value from defaultValue. We won't do anything if we're working on - // submit or reset inputs as those values & defaultValues are linked. They - // are not resetable nodes so this operation doesn't matter and actually - // removes browser-default values (eg "Submit Query") when no value is - // provided. - - switch (props.type) { - case 'submit': - case 'reset': - break; - case 'color': - case 'date': - case 'datetime': - case 'datetime-local': - case 'month': - case 'time': - case 'week': - // This fixes the no-show issue on iOS Safari and Android Chrome: - // https://github.com/facebook/react/issues/7233 - node.value = ''; - node.value = node.defaultValue; - break; - default: - node.value = node.value; - break; - } - - // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug - // this is needed to work around a chrome bug where setting defaultChecked - // will sometimes influence the value of checked (even after detachment). - // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416 - // We need to temporarily unset name to avoid disrupting radio button groups. - var name = node.name; - if (name !== '') { - node.name = ''; - } - node.defaultChecked = !node.defaultChecked; - node.defaultChecked = !node.defaultChecked; - if (name !== '') { - node.name = name; - } - } - }; - - function _handleChange(event) { - var props = this._currentElement.props; - - var returnValue = LinkedValueUtils.executeOnChange(props, event); - - // Here we use asap to wait until all updates have propagated, which - // is important when using controlled components within layers: - // https://github.com/facebook/react/issues/1698 - ReactUpdates.asap(forceUpdateIfMounted, this); - - var name = props.name; - if (props.type === 'radio' && name != null) { - var rootNode = ReactDOMComponentTree.getNodeFromInstance(this); - var queryRoot = rootNode; - - while (queryRoot.parentNode) { - queryRoot = queryRoot.parentNode; - } - - // If `rootNode.form` was non-null, then we could try `form.elements`, - // but that sometimes behaves strangely in IE8. We could also try using - // `form.getElementsByName`, but that will only return direct children - // and won't include inputs that use the HTML5 `form=` attribute. Since - // the input might not even be in a form, let's just use the global - // `querySelectorAll` to ensure we don't miss anything. - var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]'); - - for (var i = 0; i < group.length; i++) { - var otherNode = group[i]; - if (otherNode === rootNode || otherNode.form !== rootNode.form) { - continue; - } - // This will throw if radio buttons rendered by different copies of React - // and the same name are rendered into the same form (same as #1939). - // That's probably okay; we don't support it just as we don't support - // mixing React radio buttons with non-React ones. - var otherInstance = ReactDOMComponentTree.getInstanceFromNode(otherNode); - !otherInstance ? false ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.') : _prodInvariant('90') : void 0; - // If this is a controlled radio button group, forcing the input that - // was previously checked to update will cause it to be come re-checked - // as appropriate. - ReactUpdates.asap(forceUpdateIfMounted, otherInstance); - } - } - - return returnValue; - } - - module.exports = ReactDOMInput; - -/***/ }, -/* 1808 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - */ - - 'use strict'; - - var _assign = __webpack_require__(13); - - var React = __webpack_require__(206); - var ReactDOMComponentTree = __webpack_require__(41); - var ReactDOMSelect = __webpack_require__(571); - - var warning = __webpack_require__(20); - var didWarnInvalidOptionChildren = false; - - function flattenChildren(children) { - var content = ''; - - // Flatten children and warn if they aren't strings or numbers; - // invalid types are ignored. - React.Children.forEach(children, function (child) { - if (child == null) { - return; - } - if (typeof child === 'string' || typeof child === 'number') { - content += child; - } else if (!didWarnInvalidOptionChildren) { - didWarnInvalidOptionChildren = true; - false ? warning(false, 'Only strings and numbers are supported as