diff --git a/README.md b/README.md index e0407ea..4e80319 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index d154843..cd2f6b7 100644 --- a/package.json +++ b/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", diff --git a/src/Picker.web.tsx b/src/Picker.web.tsx index afa8289..ef2bfeb 100644 --- a/src/Picker.web.tsx +++ b/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 { } 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 { {item.label} ); }); + const pickerCls = { + [className]: !!className, + [prefixCls]: true, + [`${prefixCls}-disabled`]: disabled, + }; + const child = ( +
+
+
+
+ {items} +
+
+ ); + if (disabled) { + return child; + } return ( { onPanEnd={this.onPanEnd} options={hammerOption} > -
-
-
-
- {items} -
-
+ {child} ); } } diff --git a/src/PickerTypes.tsx b/src/PickerTypes.tsx index 5e62e6c..578afc8 100644 --- a/src/PickerTypes.tsx +++ b/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; } diff --git a/src/PopupMixin.tsx b/src/PopupMixin.tsx index cf56a1e..d6d59b4 100644 --- a/src/PopupMixin.tsx +++ b/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 {React.cloneElement(child, newChildProps)} {this.getModal()} diff --git a/src/PopupPickerTypes.tsx b/src/PopupPickerTypes.tsx index ffec7cc..85d9c95 100644 --- a/src/PopupPickerTypes.tsx +++ b/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;