remove moment.js, add use12Hours prop to DatePicker, close ant-design…

…#1217 close ant-design#1578
lixiaoyang1992 · Apr 26, 2018 · 799b13c · 799b13c
1 parent e80eb51
commit 799b13c
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 74 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,27 @@ timeline: true
 
 ---
 
+### 2.0.0
+
+`2017-xx-xx`
+
+- **Feature**
+
+  - `DatePicker`新增 API `use12Hours`, 支持 12 小时制 ([#1578](https://github.com/ant-design/ant-design-mobile/issues/1578))
+
+- **Break Change**
+
+  - `pagination` 组件 `current` 属性改成从 `1` 开始索引 （[#1009](https://github.com/ant-design/ant-design-mobile/issues/1009)）
+  -  `Slider` 去除默认的 margin & padding. ([5c9744a](https://github.com/ant-design/ant-design-mobile/commit/5c9744aa8025a8fdfe4ec8f5bca5e108245f7bcd))
+  - `ImagePicker` ref 由 string 改成 function. ([#1487](https://github.com/ant-design/ant-design-mobile/pull/1487)
+  - In order to custom style conveniently， the `style` property of `TextareaItem`、`SearchBar` and `InputItem` is passed
+    to `input`(for web) or `TextInput`(for react native) element;
+  - Progress: `wrapStyle` has been replaced by `style` and  `style` has been replaced by `barStyle` property.
+  - The `style` property now can custom style, eg: tintColor for switch
+  - `Flex` remove redundancy api of Flex, just keep `align: enum{start, center, end}`。[#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
+  - `Theme` 更改，删除 `@fill-overlay-inverse`, `@color-shadow`, `@brand-hot`, `@font-size-display-sm`, `@font-size-display-md`, `@font-size-display-xl`, `@font-size-display-lg`,`@font-family-code`, `@font-family-base`； 将`@searchbar-font-size`重命名为 `@search-bar-font-size`。
+  - `DatePicker`组件去除 moment.js 依赖，相应地`value`,`minDate`,`maxDate`,`format`,`onChange`数据类型变为`Date`对象。[#1217](https://github.com/ant-design/ant-design-mobile/issues/1217)
+
 ## 1.6.0
 
 `2017-07-30`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,27 @@ timeline: true
 
 ---
 
+
+### 2.0.0
+
+`2017-xx-xx`
+
+- **Feature**
+
+  - `DatePicker`新增 API `use12Hours`, 支持 12 小时制 ([#1578](https://github.com/ant-design/ant-design-mobile/issues/1578))
+
+- **Break Change**
+
+  - `pagination` 组件 `current` 属性改成从 `1` 开始索引 （[#1009](https://github.com/ant-design/ant-design-mobile/issues/1009)）
+  -  `Slider` 去除默认的 margin & padding. ([5c9744a](https://github.com/ant-design/ant-design-mobile/commit/5c9744aa8025a8fdfe4ec8f5bca5e108245f7bcd))
+  - `ImagePicker` ref 由 string 改成 function. ([#1487](https://github.com/ant-design/ant-design-mobile/pull/1487)
+  - TextareaItem、SearchBar、InputItem 将 `style` 属性传至 input(web) / TextInput(rn) 元素，方便自定义样式;
+  - Progress: `wrapStyle` 改为 `style`, 原来的 `style` 将改成 `barStyle`;
+  - Switch 对 `style` 属性直接针对 switch 样式自身，方便定义样式；
+  - `Flex` 清理冗余API, 只保留 `align: enum{start, center, end}`。 [#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
+  - `Theme` 更改，删除 `@fill-overlay-inverse`, `@color-shadow`, `@brand-hot`, `@font-size-display-sm`, `@font-size-display-md`, `@font-size-display-xl`, `@font-size-display-lg`,`@font-family-code`, `@font-family-base`； 将`@searchbar-font-size`重命名为 `@search-bar-font-size`。
+  - `DatePicker`组件去除 moment.js 依赖，相应地`value`,`minDate`,`maxDate`,`format`,`onChange`数据类型变为`Date`对象。[#1217](https://github.com/ant-design/ant-design-mobile/issues/1217)
+
 ## 1.6.0
 
 `2017-07-30`

diff --git a/components/date-picker/PropsType.tsx b/components/date-picker/PropsType.tsx
@@ -22,8 +22,9 @@ interface DatePickerProps {
   className?: string;
   pickerPrefixCls?: string;
   popupPrefixCls?: string;
-  dismissText?: string|React.ReactElement<any>; // React.ReactElement only for web
-  okText?: string|React.ReactElement<any>; // React.ReactElement only for web
+  dismissText?: string | React.ReactElement<any>; // React.ReactElement only for web
+  okText?: string | React.ReactElement<any>; // React.ReactElement only for web
+  use12Hours?: boolean;
 }
 
 export default DatePickerProps;
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/date-picker/demo/popup.tsx correctly 1`] = `
+exports[`renders ./components/date-picker/demo/basic.tsx correctly 1`] = `
 <View>
   <View
     style={undefined}

diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap
@@ -131,12 +131,12 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
             <div
               class="am-list-content"
             >
-              time(utc, UK time)
+              UK time
             </div>
             <div
               class="am-list-extra"
             >
-              00:00 +00:00
+              2016-11-22 00:00:00
             </div>
             <div
               aria-hidden="true"

diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
@@ -11,18 +11,13 @@ title:
 
 import { DatePicker, List } from 'antd-mobile';
 import { createForm } from 'rc-form';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
 import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
 
-const zhNow = moment().locale('zh-cn').utcOffset(8);
-const maxDate = moment('2016-12-03 +0800', 'YYYY-MM-DD Z').utcOffset(8);
-const minDate = moment('2015-08-06 +0800', 'YYYY-MM-DD Z').utcOffset(8);
+const now = new Date();
+const maxDate = new Date(2016, 11, 3, 22, 0);
+const minDate = new Date(2015, 7, 6, 8, 30);
 
-const maxTime = moment('22:00 +0800', 'HH:mm Z').utcOffset(8);
-const minTime = moment('08:30 +0800', 'HH:mm Z').utcOffset(8);
-
-const gmtNow = moment().utcOffset(0);
+const gmtNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
 
 // 如果不是使用 List.Item 作为 children
 const CustomChildren = props => (
@@ -37,7 +32,7 @@ const CustomChildren = props => (
 
 class Test extends React.Component {
   state = {
-    date: zhNow,
+    date: now,
     dpValue: null,
     visible: false,
   }
@@ -72,10 +67,10 @@ class Test extends React.Component {
         <DatePicker
           mode="time"
           {...getFieldProps('time', {
-            initialValue: zhNow,
+            initialValue: now,
           })}
-          minDate={minTime}
-          maxDate={maxTime}
+          minDate={minDate}
+          maxDate={maxDate}
         >
           <List.Item arrow="horizontal">时间(CST)，限定上下限</List.Item>
         </DatePicker>
@@ -88,32 +83,32 @@ class Test extends React.Component {
         </DatePicker>
         <DatePicker
           mode="time"
-          format={val => val.format('HH:mm Z')}
+          format={val => val.toLocaleString()}
           okText="OK"
           dismissText="Cancel"
           locale={enUs}
           {...getFieldProps('customformat', {
             initialValue: gmtNow,
           })}
         >
-          <List.Item arrow="horizontal">time(utc, UK time)</List.Item>
+          <List.Item arrow="horizontal">UK time</List.Item>
         </DatePicker>
-        <List.Item extra={this.state.dpValue && this.state.dpValue.format('HH:mm Z')}>
+        <List.Item extra={this.state.dpValue && this.state.dpValue.toDateString()}>
           <div onClick={() => this.setState({ visible: true })}>自定义控制显示/隐藏的元素</div>
         </List.Item>
         <DatePicker
           visible={this.state.visible}
-          mode="date"
           title={<span onClick={() => this.setState({ visible: false })}>点击可以关闭</span>}
           extra="请选择(可选)"
-          onOk={() => console.log('onOk')}
+          onOk={() => console.log('onOk', this.state.dpValue)}
           onDismiss={() => console.log('onDismiss')}
           value={this.state.dpValue}
           onChange={v => this.setState({ dpValue: v, visible: false })}
         />
         <DatePicker
-          mode="date"
-          title="选择日期"
+          use12Hours
+          format="HH:mm"
+          title="选择时间"
           extra="请选择(可选)"
           value={this.state.dpValue}
           onChange={v => this.setState({ dpValue: v })}

diff --git a/components/date-picker/demo/popup.tsx → components/date-picker/demo/basic.tsx b/components/date-picker/demo/popup.tsx → components/date-picker/demo/basic.tsx
@@ -2,10 +2,8 @@
 import { View } from 'react-native';
 import { DatePicker, List } from 'antd-mobile';
 import React from 'react';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
 
-const defaultDate = moment().locale('zh-cn').utcOffset(8);
+const now = new Date();
 
 export default class PopupExample extends React.Component<any, any> {
   date1MinDate: any;
@@ -26,11 +24,11 @@ export default class PopupExample extends React.Component<any, any> {
     return (<View>
       <List>
         <DatePicker
-          defaultDate={defaultDate}
+          defaultDate={now}
           value={this.state.value}
           mode="date"
-          minDate={this.date1MinDate || (this.date1MinDate = moment('2015-08-06', 'YYYY-MM-DD'))}
-          maxDate={this.date1MaxDate || (this.date1MaxDate = moment('2016-12-06', 'YYYY-MM-DD'))}
+          minDate={this.date1MinDate || (this.date1MinDate = new Date(2015, 7, 6))}
+          maxDate={this.date1MaxDate || (this.date1MaxDate = new Date(2016, 11, 3))}
           onChange={this.onChange}
           format={val => val.fromNow()}
         >

diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
@@ -17,13 +17,14 @@ Support WEB, React-Native.
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | mode  | mode value, can be a `date` or `time` or `datetime` or `year` or `month` | String | `date` |
-| value | the currently selected value, corresponding mode under the format are: `YYYY-MM-DD` or `HH:mm` or `YYYY-MM-DD HH:mm` | [moment](http://momentjs.com/) | - |
-| minDate   | minimum date, the format is the same as value | [moment](http://momentjs.com/)  |  -  |
-| maxDate   | maximum date, the format is the same as value | [moment](http://momentjs.com/)  |  -  |
+| value | the currently selected value, corresponding mode under the format are: `YYYY-MM-DD` or `HH:mm` or `YYYY-MM-DD HH:mm` | Date | - |
+| minDate   | minimum date | Date  |  -  |
+| maxDate   | maximum date | Date  |  -  |
+| use12Hours (`WEB only`) | 12 hours display mode | Boolean | false |
+| format  | format the selected value | `(value: Date) => date string` / `format string`(only support one of the three formats in the `value` attribute's value) | - |
 | onChange  | change handler | (date: Object): void |  -  |
 | locale   | international, can override the configuration of the global `[LocaleProvider](https://mobile.ant.design/components/locale-provider)` | Object: {DatePickerLocale: {year, month, day, hour, minute}, okText, dismissText} |  -  |
 | title  | title | string/React.ReactElement |  -  |
-| format  | format the selected value | (value:moment) => string/string | `(val) => { return val; }`  |
 | extra   | DatePicker's children is best to `List.Item`, if not, need to be a custom component (the `onClick`/`extra` props need to be handled in the component) | String  |  `请选择`  |
 | disabled   | set disabled  | Boolean |    false  |
 | prefixCls (`WEB only`) |  prefix class  | string | `am-picker` |

diff --git a/components/date-picker/index.web.tsx b/components/date-picker/index.web.tsx
@@ -12,6 +12,7 @@ function getDefaultProps() {
     pickerPrefixCls: 'am-picker-col',
     popupPrefixCls: 'am-picker-popup',
     minuteStep: 1,
+    use12Hours: false,
     ...getProps(),
   };
 }
@@ -50,6 +51,7 @@ export default class DatePicker extends React.Component<tsPropsType, any> {
         pickerPrefixCls={props.pickerPrefixCls}
         prefixCls={props.prefixCls}
         defaultDate={value || getDefaultDate(this.props)}
+        use12Hours={props.use12Hours}
       />
     );
 

diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
@@ -17,14 +17,15 @@ subtitle: 日期选择
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
-| mode  | 日期选择的类型, 可以是日期`date`、时间`time`、日期+时间`datetime` 、年`year`, 月 `month` | String | `date`  |
-| value | 当前选中时间, 对应 mode 下格式分别为:`YYYY-MM-DD`、`HH:mm`、`YYYY-MM-DD HH:mm` | [moment](http://momentjs.com/) | 无 |
-| minDate   | 最小可选日期, 格式同 value | [moment](http://momentjs.com/)  |  -  |
-| maxDate   | 最大可选日期, 格式同 value | [moment](http://momentjs.com/)  |  -  |
+| mode  | 日期选择的类型, 可以是日期`date`、时间`time`、日期+时间`datetime` 、年`year`, 月`month` | String | `date`  |
+| value | 当前选中时间, 对应 mode 下格式分别为:`YYYY-MM-DD`、`HH:mm`、`YYYY-MM-DD HH:mm` | Date | 无 |
+| minDate   | 最小可选日期 | Date  |  -  |
+| maxDate   | 最大可选日期 | Date  |  -  |
+| use12Hours (`WEB only`) | 12小时制 | Boolean | false |
+| format  | 格式化选中的值 | `(value: Date) => date string` / `format string`(仅支持在`value`属性值里边的三种格式中的一种) | - |
 | onChange   | 时间发生变化的回调函数  | (date: Object): void |  无  |
 | locale   | 国际化，可覆盖全局`[LocaleProvider](https://mobile.ant.design/components/locale-provider)`的配置 | Object: {DatePickerLocale: {year, month, day, hour, minute}, okText, dismissText } |  无 |
 | title  | 弹框的标题 | string/React.ReactElement |  无  |
-| format  | 格式化选中的值 | (value:moment) => string/string | `(val) => { return val; }`  |
 | extra   | DatePicker children 建议是 List.Item, 如果不是，需要是自定义组件(组件内需处理`onClick`/`extra`属性) | String  |  `请选择`  |
 | disabled   | 是否不可用      | Boolean |    false  |
 | prefixCls (`WEB only`) |  class前缀 | string | `am-picker` |

diff --git a/components/date-picker/utils.tsx b/components/date-picker/utils.tsx
@@ -1,27 +1,31 @@
-import moment from 'moment';
-
-function getFormatter(type) {
-  let formatter;
-  if (type === 'time') {
-    formatter = ('HH:mm');
-  } else if (type === 'datetime') {
-    formatter = ('YYYY-MM-DD HH:mm');
-  } else {
-    formatter = ('YYYY-MM-DD');
+function formatIt(date, form) {
+  const pad = n => n < 10 ? `0${n}` : n;
+  let dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  let timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  if (form === 'YYYY-MM-DD') {
+    return dateStr;
+  }
+  if (form === 'HH:mm') {
+    return timeStr;
   }
-  return formatter;
+  return `${dateStr} ${timeStr}`;
 }
 
 export function formatFn(instance, value) {
+  const formatsEnum = {
+    date: 'YYYY-MM-DD',
+    time: 'HH:mm',
+    datetime: 'YYYY-MM-DD HH:mm',
+  };
   const { format } = instance.props;
   const type = typeof format;
   if (type === 'string') {
-    return value.format(type);
+    return formatIt(value, format);
   }
   if (type === 'function') {
     return format(value);
   }
-  return value.format(getFormatter(instance.props.mode));
+  return formatIt(value, formatsEnum[instance.props.mode]);
 }
 
 export function getProps() {
@@ -39,11 +43,11 @@ export function getDefaultDate(props) {
   if (defaultDate) {
     return defaultDate;
   }
-  const now = moment();
-  if (minDate && now.isBefore(minDate)) {
+  const now = new Date();
+  if (minDate && now < minDate) {
     return minDate;
   }
-  if (maxDate && maxDate.isBefore(now)) {
+  if (maxDate && maxDate < now) {
     return minDate;
   }
   return now;

diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
@@ -10,10 +10,9 @@ Wrap your app with `LocaleProvider`, and apply the corresponding language packag
 ````jsx
 import { Pagination, LocaleProvider, List, DatePicker, WhiteSpace, Button, InputItem } from 'antd-mobile';
 import enUS from 'antd-mobile/lib/locale-provider/en_US';
-import moment from 'moment';
 
-const maxDate = moment('2018-12-03 +0800', 'YYYY-MM-DD Z').utcOffset(8);
-const minDate = moment('2015-08-06 +0800', 'YYYY-MM-DD Z').utcOffset(8);
+const maxDate = new Date(2018, 11, 3, 22, 0);
+const minDate = new Date(2015, 7, 6, 8, 30);
 
 const Page = () => (
   <div>

diff --git a/components/locale-provider/demo/basic.tsx b/components/locale-provider/demo/basic.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
 import { Pagination, LocaleProvider, List, DatePicker, WhiteSpace, Button } from 'antd-mobile';
-import moment from 'moment';
 import enUS from '../en_US';
 
-const maxDate = moment('2018-12-03 +0800', 'YYYY-MM-DD Z').utcOffset(8);
-const minDate = moment('2015-08-06 +0800', 'YYYY-MM-DD Z').utcOffset(8);
+const maxDate = new Date(2018, 11, 3, 22, 0);
+const minDate = new Date(2015, 7, 6, 8, 30);
 
 const Page = () => (
   <View>

diff --git a/components/locale-provider/en_US.tsx b/components/locale-provider/en_US.tsx
@@ -1,6 +1,3 @@
-import moment from 'moment';
-moment.locale('en');
-
 import Pagination from '../pagination/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
 import InputItem from '../input-item/locale/en_US';

diff --git a/components/locale-provider/ru_RU.tsx b/components/locale-provider/ru_RU.tsx
@@ -1,7 +1,3 @@
-import moment from 'moment';
-import 'moment/locale/ru';
-moment.locale('ru');
-
 import Pagination from '../pagination/locale/ru_RU';
 import DatePicker from '../date-picker/locale/ru_RU';
 import InputItem from '../input-item/locale/ru_RU';

diff --git a/package.json b/package.json
@@ -34,7 +34,6 @@
     "babel-runtime": "6.x",
     "classnames": "~2.2.1",
     "create-react-class": "^15.5.2",
-    "moment": "~2.18.1",
     "normalize.css": "^7.0.0",
     "omit.js": "~1.0.0",
     "prop-types": "^15.5.8",
@@ -57,7 +56,7 @@
     "react-native-menu": "~0.21.0",
     "react-native-scrollable-tab-view": "^0.7.2",
     "rmc-cascader": "^4.1.1",
-    "rmc-date-picker": "^5.3.1",
+    "rmc-date-picker": "^6.0.0-alpha.1",
     "rmc-list-view": "^0.8.0",
     "rmc-nuka-carousel": "^2.2.0",
     "rmc-picker": "^3.8.0",

diff --git a/site/bisheng.common.config.js b/site/bisheng.common.config.js
@@ -11,7 +11,6 @@ module.exports = {
       history: 'History',
       'babel-polyfill': 'this', // hack babel-polyfill has no exports
     };
-    config.module.noParse = [/moment.js/];
 
     config.resolve.alias = {
       'antd-mobile/lib': path.join(process.cwd(), 'components'),

diff --git a/typings/custom.d.ts b/typings/custom.d.ts
@@ -50,8 +50,6 @@ declare module 'rc-drawer';
 
 declare module 'rc-dialog';
 
-declare module 'moment';
-
 declare module 'react-native-menu';
 
 declare module 'rmc-pull-to-refresh';