add disabled support

README.md

@@ -68,6 +68,7 @@ see example
 |onValueChange | fire when picker change | Function(value) |  |
 |children      | array of picker items | [{label, value}] |
 |pure      | whether children is immutable | bool | true
+|disabled     | whether picker is disabled | bool | false
 
 
 ## Test Case

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rmc-picker",
-  "version": "3.2.8",
+  "version": "3.3.0",
   "description": "React Mobile Picker Component(web and react-native)",
   "keywords": [
     "react",
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "babel-runtime": "6.x",
+    "classnames": "~2.2.5",
     "object-assign": "4.x",
     "rc-dialog": "6.x",
     "react-hammerjs": "0.5.x",

src/Picker.web.tsx

@@ -10,6 +10,7 @@ import {Animate, easeOutCubic, easeInOutCubic} from './Animate.web';
 import {PickerProps} from './PickerTypes';
 import Hammer from 'react-hammerjs';
 import assign from 'object-assign';
+import classNames from 'classnames';
 import {getComputedStyle } from './utils.web';
 import isChildrenEqual from './isChildrenEqual';
 
@@ -438,7 +439,7 @@ export default class Picker extends React.Component<PickerProps, PickerState> {
   }
 
   render() {
-    const {children, prefixCls} = this.props;
+    const {children, prefixCls, className, disabled} = this.props;
     const {selectedValue} = this.state;
     const itemClassName = `${prefixCls}-item`;
     const selectedItemClassName = `${itemClassName} ${prefixCls}-item-selected`;
@@ -451,6 +452,23 @@ export default class Picker extends React.Component<PickerProps, PickerState> {
         {item.label}
       </div>);
     });
+    const pickerCls = {
+      [className]: !!className,
+      [prefixCls]: true,
+      [`${prefixCls}-disabled`]: disabled,
+    };
+    const child = (
+      <div className={classNames(pickerCls) } data-role="component" ref="component">
+        <div className={`${prefixCls}-mask`} data-role="mask"/>
+        <div className={`${prefixCls}-indicator`} data-role="indicator" ref="indicator"/>
+        <div className={`${prefixCls}-content`} data-role="content" ref="content">
+          {items}
+        </div>
+      </div>
+    );
+    if (disabled) {
+      return child;
+    }
     return (
       <Hammer
         direction="DIRECTION_ALL"
@@ -459,13 +477,7 @@ export default class Picker extends React.Component<PickerProps, PickerState> {
         onPanEnd={this.onPanEnd}
         options={hammerOption}
       >
-        <div className={`${prefixCls}`} data-role="component" ref="component">
-          <div className={`${prefixCls}-mask`} data-role="mask"/>
-          <div className={`${prefixCls}-indicator`} data-role="indicator" ref="indicator"/>
-          <div className={`${prefixCls}-content`} data-role="content" ref="content">
-            {items}
-          </div>
-        </div>
+        {child}
       </Hammer>);
   }
 }

src/PickerTypes.tsx

@@ -6,10 +6,12 @@ export interface PickerItem {
 export interface PickerProps {
   children?:PickerItem[];
   pure?:boolean;
+  disabled?:boolean;
   selectedValue?:any;
   onValueChange?:(value:any) => void;
   /** web only */
   prefixCls?:string;
+  className?:string;
   /** web only */
   defaultSelectedValue?:any;
 }

src/PopupMixin.tsx

@@ -48,11 +48,14 @@ export default {
     if (!children) {
       return this.getModal();
     }
-    const {WrapComponent} = this.props;
+    const {WrapComponent, disabled} = this.props;
     const child = children;
-    const newChildProps = {
-      [props.triggerType]: this.onTriggerClick,
-    };
+    const newChildProps = {};
+    if (!!disabled) {
+      newChildProps['disabled'] = true;
+    } else {
+      newChildProps[props.triggerType] = this.onTriggerClick;
+    }
     return <WrapComponent style={props.style}>
       {React.cloneElement(child, newChildProps)}
       {this.getModal()}

src/PopupPickerTypes.tsx

@@ -5,6 +5,7 @@ export interface PopupPickerProps {
   okText?:string;
   title?:string;
   visible?:boolean;
+  disabled?:boolean;
   onOk?:() => void;
   style?:any;
   onVisibleChange?:(visible:boolean) => void;