UNPKG

@ant-design/react-native

Version:

基于蚂蚁金服移动设计规范的 React Native 组件库

1 lines 4.62 kB
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _normalizeCssColor=_interopRequireDefault(require("normalize-css-color"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _style=require("../style");var _index=_interopRequireDefault(require("./style/index"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function setNormalizedColorAlpha(input,alpha){if(alpha<0){alpha=0;}else if(alpha>1){alpha=1;}alpha=Math.round(alpha*255);return(input&0xffffff00|alpha)>>>0;}var SegmentedControl=function(_React$Component){(0,_inherits2["default"])(SegmentedControl,_React$Component);var _super=_createSuper(SegmentedControl);function SegmentedControl(props){var _this;(0,_classCallCheck2["default"])(this,SegmentedControl);_this=_super.call(this,props);_this.state={selectedIndex:props.selectedIndex};return _this;}(0,_createClass2["default"])(SegmentedControl,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(nextProps.selectedIndex!==this.props.selectedIndex){this.setState({selectedIndex:nextProps.selectedIndex});}}},{key:"onPress",value:function onPress(e,index,value){var _this$props=this.props,disabled=_this$props.disabled,onChange=_this$props.onChange,onValueChange=_this$props.onValueChange;if(!disabled){e.nativeEvent.selectedSegmentIndex=index;e.nativeEvent.value=value;if(onChange){onChange(e);}if(onValueChange){onValueChange(value);}this.setState({selectedIndex:index});}}},{key:"render",value:function render(){var _this2=this;var _this$props2=this.props,style=_this$props2.style,disabled=_this$props2.disabled,_this$props2$values=_this$props2.values,values=_this$props2$values===void 0?[]:_this$props2$values,selectedTextColor=_this$props2.selectedTextColor;var tintColor=this.props.tintColor;return _react["default"].createElement(_style.WithTheme,{styles:this.props.styles,themeStyles:_index["default"]},function(styles,theme){var selectedIndex=_this2.state.selectedIndex;tintColor=tintColor||theme.segmented_control_color;var items=values.map(function(value,idx){var itemRadius=null;if(idx===0){itemRadius=styles.itemLeftRadius;}else if(idx===values.length-1){itemRadius=styles.itemRightRadius;}var itemStyle=[styles.item,itemRadius,{backgroundColor:idx===selectedIndex?tintColor:'transparent',borderColor:tintColor}];var underlayColor=idx===selectedIndex?tintColor:'#'+setNormalizedColorAlpha((0,_normalizeCssColor["default"])(tintColor),0.3).toString(16);return _react["default"].createElement(_reactNative.TouchableHighlight,{disabled:disabled,key:idx,onPress:function onPress(e){return _this2.onPress(e,idx,value);},underlayColor:underlayColor,style:itemStyle,activeOpacity:1},_react["default"].createElement(_reactNative.Text,{style:[styles.itemText,{color:idx===selectedIndex?selectedTextColor:tintColor}]},value));});var enabledOpacity=!disabled?1:0.5;var segmentedStyle={opacity:enabledOpacity,borderColor:tintColor};return _react["default"].createElement(_reactNative.View,{style:[styles.segment,segmentedStyle,style]},items);});}}]);return SegmentedControl;}(_react["default"].Component);exports["default"]=SegmentedControl;SegmentedControl.defaultProps={selectedIndex:0,disabled:false,values:[],onChange:function onChange(){},onValueChange:function onValueChange(){},style:{},selectedTextColor:'#fff'};