support rootNativeProps. fixes xgfe#11

examples/popup.tsx

@@ -70,6 +70,7 @@ class Demo extends React.Component<any, any> {
       <h2>popup date picker</h2>
       <div>
         <PopPicker
+          pickerRootNativeProps={{'data-xx':'yy'}}
           popupTransitionName="rmc-picker-popup-slide-fade"
           maskTransitionName="rmc-picker-popup-fade"
           title="Date picker"

examples/simple.tsx

@@ -60,6 +60,7 @@ class Demo extends React.Component<any, any> {
       <div>
         <span>{date && format(date) || format(now)}</span>
         <DatePicker
+          rootNativeProps={{'data-xx':'yy'}}
           defaultDate={date || now}
           mode={props.mode}
           locale={props.locale}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rmc-date-picker",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "React Mobile DatePicker Component for web and react-native",
   "keywords": [
     "react",

src/DatePicker.web.tsx

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import Picker from 'rmc-picker/lib/index.web';
 import classnames from 'classnames';
-import {DatePickerProps, DatePickerState} from './DatePickerTypes';
+import { DatePickerProps, DatePickerState } from './DatePickerTypes';
 import DatePickerMixin from './DatePickerMixin';
 
-const DatePickerWeb = React.createClass<DatePickerProps, DatePickerState> ({
+const DatePickerWeb = React.createClass<DatePickerProps, DatePickerState>({
   mixins: [DatePickerMixin],
-  
+
   getDefaultProps() {
     return {
       prefixCls: 'rmc-date-picker',
-        pickerPrefixCls: 'rmc-picker',
-    };  
+      pickerPrefixCls: 'rmc-picker',
+    };
   },
-  
+
   render() {
     const props = this.props;
-    const {prefixCls, pickerPrefixCls, className} = props;
+    const {prefixCls, pickerPrefixCls, className, rootNativeProps} = props;
     const {value, dataSource} = this.getValueDataSource();
 
     const inner = dataSource.map((items, i) => {
@@ -32,7 +32,7 @@ const DatePickerWeb = React.createClass<DatePickerProps, DatePickerState> ({
       </div>);
     });
 
-    return (<div className={classnames(className, prefixCls)}>
+    return (<div {...rootNativeProps} className={classnames(className, prefixCls)}>
       {inner}
     </div>);
   },

src/DatePickerTypes.tsx

@@ -4,10 +4,12 @@ export interface DatePickerProps {
   minDate?: any;
   maxDate?: any;
   mode?: string;
+  disabled?:boolean;
   locale?: any;
   onDateChange?: (date: any) => void;
   /** web only */
   prefixCls?:string;
+  rootNativeProps?:{};
   /** web only */
   pickerPrefixCls?:string;
   /** web only */

src/Popup.tsx

@@ -1,39 +1,53 @@
 import * as React from 'react';
 import DatePicker from './DatePicker';
 import defaultLocale from './locale/en_US';
-import {noop, exclude} from './utils';
+import { noop, exclude, pick } from './utils';
 import PopupPicker from 'rmc-picker/lib/Popup';
 import construct = Reflect.construct;
-import {PopupPickerProps} from 'rmc-picker/lib/PopupPickerTypes';
+import { PopupPickerProps } from 'rmc-picker/lib/PopupPickerTypes';
 
 const EXCLUDE_PROPS = {
-  popupPrefixCls:1,
-  pickerPrefixCls:1,
-  minDate:1,
-  maxDate:1,
-  mode:1,
-  onPickerChange:1,
-  onChange:1,
-  locale:1,
-  date:1,
+  popupPrefixCls: 1,
+  pickerPrefixCls: 1,
+  pickerRootNativeProps: 1,
+  prefixCls: 1,
+  minDate: 1,
+  maxDate: 1,
+  mode: 1,
+  onPickerChange: 1,
+  onChange: 1,
+  locale: 1,
+  date: 1,
+};
+
+const PICKER_PROPS = {
+  pickerRootNativeProps: 'rootNativeProps',
+  minDate: '',
+  maxDate: '',
+  pickerPrefixCls: '',
+  prefixCls: '',
+  mode: '',
+  locale: '',
 };
 
 export interface PopupDatePickerProps extends PopupPickerProps {
-  popupPrefixCls?:string;
-  pickerPrefixCls?:string;
-  minDate?:any;
-  maxDate?:any;
-  styles?:any;
-  mode?:string;
-  onPickerChange?:(date) => void;
-  onChange?:(date) => void;
-  locale?:any;
-  date?:any;
+  popupPrefixCls?: string;
+  pickerRootNativeProps?: {};
+  rootNativeProps?: {};
+  pickerPrefixCls?: string;
+  minDate?: any;
+  maxDate?: any;
+  styles?: any;
+  mode?: string;
+  onPickerChange?: (date) => void;
+  onChange?: (date) => void;
+  locale?: any;
+  date?: any;
 }
 
 export interface PopupDatePickerState {
-  visible?:boolean;
-  pickerDate?:any;
+  visible?: boolean;
+  pickerDate?: any;
 }
 
 export default class PopupDatePicker extends React.Component<PopupDatePickerProps, PopupDatePickerState> {
@@ -48,7 +62,7 @@ export default class PopupDatePicker extends React.Component<PopupDatePickerProp
     onPickerChange: noop,
   };
 
-  constructor(props:PopupDatePickerProps) {
+  constructor(props: PopupDatePickerProps) {
     super(props);
     this.state = {
       pickerDate: null,
@@ -85,27 +99,11 @@ export default class PopupDatePicker extends React.Component<PopupDatePickerProp
   }
 
   getModal() {
-    const props = this.props;
-    const dpProps:PopupDatePickerProps = {};
-    if (props.minDate) {
-      dpProps.minDate = props.minDate;
-    }
-    if (props.maxDate) {
-      dpProps.maxDate = props.maxDate;
-    }
-    if (props.pickerPrefixCls) {
-      dpProps.pickerPrefixCls = props.pickerPrefixCls;
-    }
-    if (props.prefixCls) {
-      dpProps.prefixCls = props.prefixCls;
-    }
     return (
       <DatePicker
-        date={this.state.pickerDate || props.date}
-        mode={props.mode}
-        locale={props.locale}
+        date={this.state.pickerDate || this.props.date}
         onDateChange={this.onPickerChange}
-        {...dpProps}
+        {...pick(this.props, PICKER_PROPS)}
       />
     );
   }
@@ -120,7 +118,7 @@ export default class PopupDatePicker extends React.Component<PopupDatePickerProp
   };
 
   render() {
-    const props:PopupPickerProps = exclude(this.props, EXCLUDE_PROPS);
+    const props: PopupPickerProps = exclude(this.props, EXCLUDE_PROPS);
     props.prefixCls = this.props.popupPrefixCls;
     return (<PopupPicker
       {...props}

src/utils.tsx

@@ -8,5 +8,16 @@ export function exclude(props, bl) {
   return ret;
 }
 
+export function pick(props, wl) {
+  const ret = {};
+  Object.keys(wl).forEach((w) => {
+    const k = wl[w] || w;
+    if (w in props) {
+      ret[k] = props[w];
+    }
+  });
+  return ret;
+}
+
 export function noop() {
 }