refactor: replace object-assign with spread operator

components/_util/getLocale.tsx

@@ -1,14 +1,20 @@
-import assign from 'object-assign';
-
 export function getComponentLocale(props, context, componentName, getDefaultLocale) {
   const locale = context && context.antLocale && context.antLocale[componentName] ?
     context.antLocale[componentName] : getDefaultLocale();
 
-  let result = assign({}, locale);
+  let result = {
+    ...locale,
+  };
   if (props.locale) {
-    result = assign(result, props.locale);
+    result = {
+      ...result,
+      ...props.locale,
+    };
     if (props.locale.lang) {
-      result.lang = assign({}, locale.lang, props.locale.lang);
+      result.lang = {
+        ...locale.lang,
+        ...props.locale.lang,
+      };
     }
   }
   return result;

components/action-sheet/index.web.tsx

@@ -1,12 +1,9 @@
-/* tslint:disable:no-unused-variable */
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-/* tslint:enable:no-unused-variable */
 import ReactDOM from 'react-dom';
 import Dialog from 'rc-dialog';
 import classNames from 'classnames';
 import Icon from '../icon/index.web';
-import assign from 'object-assign';
 import getDataAttr from '../_util/getDataAttr';
 import Touchable from 'rc-touchable';
 
@@ -16,10 +13,11 @@ function noop() { }
 const queue: any[] = [];
 
 function createActionSheet(flag, config, callback) {
-  const props = assign({}, {
+  const props = {
     prefixCls: 'am-action-sheet',
     cancelButtonText: '取消',
-  }, config);
+    ...config,
+  };
   const { prefixCls, className, transitionName, maskTransitionName, maskClosable = true } = props;
 
   let div: any = document.createElement('div');

components/carousel/__tests__/__snapshots__/demo.test.web.js.snap

@@ -10,7 +10,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
     normal
   </div>
   <div
-    class="slider my-carousel am-carousel"
+    class="slider am-carousel my-carousel"
     style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
   >
     <div
@@ -99,7 +99,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
     vertical
   </div>
   <div
-    class="slider my-carousel am-carousel am-carousel-vertical"
+    class="slider am-carousel my-carousel am-carousel-vertical"
     style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
   >
     <div
@@ -152,7 +152,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
     lottery
   </div>
   <div
-    class="slider my-carousel am-carousel am-carousel-vertical"
+    class="slider am-carousel my-carousel am-carousel-vertical"
     style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
   >
     <div

components/carousel/index.web.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import ReactCarousel from 'rmc-nuka-carousel';
-import assign from 'object-assign';
 import CarouselProps from './PropsType';
+import omit from 'omit.js';
 
 export default class Carousel extends React.Component<CarouselProps, any> {
   static defaultProps = {
@@ -37,17 +37,21 @@ export default class Carousel extends React.Component<CarouselProps, any> {
   }
 
   render() {
-    const { className, prefixCls, dotStyle, dotActiveStyle } = this.props;
-    let props = assign({}, this.props);
-    props = assign(props, {
-      wrapAround: props.infinite,
-      slideIndex: props.selectedIndex,
-      beforeSlide: props.beforeChange,
-    });
+    const {
+      className, prefixCls, dotStyle, dotActiveStyle, infinite,
+      selectedIndex, beforeChange, dots, vertical,
+    } = this.props;
+    const restProps = omit(this.props, ['infinite', 'selectedIndex', 'beforeChange', 'afterChange', 'dots']);
+    const newProps = {
+      ...restProps,
+      wrapAround: infinite,
+      slideIndex: selectedIndex,
+      beforeSlide: beforeChange,
+    };
 
     let Decorators: any[] = [];
     const current = this.state.selectedIndex;
-    if (props.dots) {
+    if (dots) {
       Decorators = [{
         component: createReactClass({
           render() {
@@ -79,21 +83,14 @@ export default class Carousel extends React.Component<CarouselProps, any> {
       }];
     }
 
-    ['infinite', 'selectedIndex', 'beforeChange', 'afterChange', 'dots'].forEach(prop => {
-      if (props.hasOwnProperty(prop)) {
-        delete props[prop];
-      }
-    });
-
-    const wrapCls = classNames({
+    const wrapCls = classNames(prefixCls, {
       [className as string]: className,
-      [prefixCls as string]: true,
-      [`${prefixCls}-vertical`]: props.vertical,
+      [`${prefixCls}-vertical`]: vertical,
     });
 
     return (
       <ReactCarousel
-        {...props}
+        {...newProps}
         className={wrapCls}
         decorators={Decorators}
         afterSlide={this.onChange}

components/date-picker/index.tsx

@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 import PopupDatePicker from 'rmc-date-picker/lib/Popup';
 import PopupStyles from '../picker/styles';
 import { formatFn, getProps as getDefaultProps, getDefaultDate } from './utils';
-import assign from 'object-assign';
 import tsPropsType from './PropsType';
 import RCDatePicker from 'rmc-date-picker/lib/DatePicker';
 import { getComponentLocale, getLocaleCode } from '../_util/getLocale';
 import zh_CN from './locale/zh_CN';
 
 export default class DatePicker extends React.Component<tsPropsType, any> {
-  static defaultProps = assign({
+  static defaultProps = {
     triggerType: 'onClick',
     styles: PopupStyles,
     minuteStep: 1,
-  }, getDefaultProps());
+    ...getDefaultProps(),
+  };
 
   static contextTypes = {
     antLocale: PropTypes.object,

components/date-picker/index.web.tsx

@@ -1,20 +1,19 @@
-/* eslint no-console:0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import PopupDatePicker from 'rmc-date-picker/lib/Popup';
 import RCDatePicker from 'rmc-date-picker/lib/DatePicker';
 import { formatFn, getProps, getDefaultDate } from './utils';
-import assign from 'object-assign';
 import tsPropsType from './PropsType';
 import { getComponentLocale, getLocaleCode } from '../_util/getLocale';
 
 function getDefaultProps() {
-  return assign({
+  return {
     prefixCls: 'am-picker',
     pickerPrefixCls: 'am-picker-col',
     popupPrefixCls: 'am-picker-popup',
     minuteStep: 1,
-  }, getProps());
+    ...getProps(),
+  };
 }
 
 export default class DatePicker extends React.Component<tsPropsType, any> {

components/input-item/index.tsx

@@ -1,11 +1,11 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-import assign from 'object-assign';
 import { View, Image, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';
 import Input from './Input';
 import variables from '../style/themes/default';
 import InputItemProps from './PropsType';
 import InputItemStyle from './style/index';
+import omit from 'omit.js';
 
 const noop: any = () => {};
 
@@ -116,16 +116,10 @@ export default class InputItem extends React.Component<InputItemProps, any> {
       (extra as string).length * variables.font_size_heading : 0,
     };
 
-    const restProps = assign({}, this.props);
-    [
+    const restProps = omit(this.props, [
       'type', 'clear', 'children', 'error', 'extra', 'labelNumber', 'last',
       'onExtraClick', 'onErrorClick', 'styles',
-    ].forEach(prop => {
-      if (restProps.hasOwnProperty(prop)) {
-        delete restProps[prop];
-      }
-    });
-
+    ]);
     const keyboardTypeArray = ['default', 'email-address',
       'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation',
       'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search'];

components/list-view/demo/basic-row.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { View, Text, TouchableHighlight, Image } from 'react-native';
 import { ListView } from 'antd-mobile';
-import assign from 'object-assign';
 
 const data = [
   {
@@ -54,7 +53,10 @@ export default class BasicRowDemo extends React.Component<any, any> {
     // console.log('reach end', event);
     this.setState({ isLoading: true });
     setTimeout(() => {
-      this.rData = assign({}, this.rData, this.genData(++pageIndex));
+      this.rData = {
+        ...this.rData,
+        ...this.genData(++pageIndex),
+      };
       this.setState({
         dataSource: this.state.dataSource.cloneWithRows(this.rData),
         isLoading: false,

components/menu/index.web.tsx

@@ -1,7 +1,6 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
 import classNames from 'classnames';
-import assign from 'object-assign';
 import List from '../list/index.web';
 import Flex from '../flex/index.web';
 import SubMenu from './SubMenu.web';
@@ -103,7 +102,10 @@ export default class Menu extends React.Component<MenuProps, any> {
           [prefixCls as string]: true,
           [className as string]: !!className,
         })}
-        style={assign({}, style, heightStyle)}
+        style={{
+          ...style,
+          ...heightStyle,
+        }}
       >
         <Flex align="top">
           {level === 2 &&

components/modal/Modal.web.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Dialog from 'rc-dialog';
 import classNames from 'classnames';
-import assign from 'object-assign';
 import Touchable from 'rc-touchable';
 import { ModalProps, ModalComponent } from './PropsType';
+import omit from 'omit.js';
 
 function checkIfAndroid(platform) {
   return platform === 'android' ||
@@ -119,23 +119,22 @@ export default class Modal extends ModalComponent<ModalProps, any> {
     </div> : null;
 
     // transparent 模式下, 内容默认居中
-    const rootStyle = transparent ? assign({
-      width: '5.4rem',
-      height: 'auto',
-    }, style) : assign({
-      width: '100%',
-      height: '100%',
-    }, style);
+    const rootStyle = transparent ?
+      {
+        width: '5.4rem',
+        height: 'auto',
+        ...style,
+      } :
+      {
+        width: '100%',
+        height: '100%',
+        ...style,
+      };
 
-    const restProps = assign({}, this.props);
-    ['prefixCls', 'className', 'transparent', 'animated', 'transitionName', 'maskTransitionName',
+    const restProps = omit(this.props, [
+      'prefixCls', 'className', 'transparent', 'animated', 'transitionName', 'maskTransitionName',
       'style', 'footer', 'touchFeedback', 'wrapProps',
-    ].forEach(prop => {
-      if (restProps.hasOwnProperty(prop)) {
-        delete restProps[prop];
-      }
-    });
-
+    ]);
     const wrapProps = { onTouchStart: e => this.isInModal(e) };
 
     return (

components/notice-bar/Marquee.tsx

@@ -7,7 +7,6 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import ReactDOM from 'react-dom';
-import assign from 'object-assign';
 
 export interface MarqueeProp {
   prefixCls?: string;
@@ -56,12 +55,13 @@ const Marquee = createReactClass<MarqueeProp, any>({
 
   render() {
     const { prefixCls, className, text } = this.props;
-    const style = assign({
+    const style = {
       position: 'relative',
       right: this.state.animatedWidth,
       whiteSpace: 'nowrap',
       display: 'inline-block',
-    }, this.props.style);
+      ...this.props.style,
+    };
     return (
       <div className={`${prefixCls}-marquee-wrap ${className}`} style={{ overflow: 'hidden' }} role="marquee">
         <div ref="text" className={`${prefixCls}-marquee`} style={style}>{text} </div>

components/notice-bar/index.web.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import assign from 'object-assign';
 import classNames from 'classnames';
 import Icon from '../icon';
 import NoticeBarProps from './PropsType';
@@ -59,13 +58,14 @@ export default class NoticeBar extends React.Component<NoticeBarProps, any> {
       [className as string]: !!className,
     });
 
-    let marquee = assign({}, {
+    let marquee = {
       loop: false,
       leading: 500,
       trailing: 800,
       fps: 40,
       style: {},
-    }, marqueeProps);
+      ...marqueeProps,
+    };
 
     return this.state.show ? (
       <div className={wrapCls} {...restProps} {...extraProps} role="alert">

components/popup/index.web.tsx

@@ -1,16 +1,14 @@
-/* eslint no-console:0 */
-/* tslint:disable:no-unused-variable */
+/* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-/* tslint:enable:no-unused-variable */
 import ReactDOM from 'react-dom';
 import Dialog from 'rc-dialog';
-import assign from 'object-assign';
 
 function create(instanceId, config, content, afterClose = (_x: any) => { }) {
-  const props = assign({}, {
+  const props = {
     prefixCls: 'am-popup',
     animationType: 'slide-down',
-  }, config);
+    ...config,
+  };
 
   const {
     prefixCls, transitionName, animationType, maskTransitionName, maskClosable = true, onMaskClose,
@@ -73,7 +71,10 @@ function create(instanceId, config, content, afterClose = (_x: any) => { }) {
       footer=""
       transitionName={transitionName || transName}
       maskTransitionName={maskTransitionName || 'am-fade'}
-      maskProps={assign({}, props.maskProps, maskProps)}
+      maskProps={{
+        ...props.maskProps,
+        ... maskProps,
+      }}
     >
       {content}
     </Dialog>,