@ant-design/react-native/es/switch/Switch.js

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

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _classnames=_interopRequireDefault(require("classnames"));var _useMergedState5=_interopRequireDefault(require("rc-util/es/hooks/useMergedState"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _devWarning=_interopRequireDefault(require("../_util/devWarning"));var _useAnimations=require("../_util/hooks/useAnimations");var _isPromise=require("../_util/isPromise");var _activityIndicator=_interopRequireDefault(require("../activity-indicator"));var _style=require("../style");var _index=_interopRequireDefault(require("../view/index"));var _index2=_interopRequireDefault(require("./style/index"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||_typeof(obj)!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var __awaiter=this&&this.__awaiter||function(thisArg,_arguments,P,generator){function adopt(value){return value instanceof P?value:new P(function(resolve){resolve(value);});}return new(P||(P=Promise))(function(resolve,reject){function fulfilled(value){try{step(generator.next(value));}catch(e){reject(e);}}function rejected(value){try{step(generator["throw"](value));}catch(e){reject(e);}}function step(result){result.done?resolve(result.value):adopt(result.value).then(fulfilled,rejected);}step((generator=generator.apply(thisArg,_arguments||[])).next());});};var __rest=this&&this.__rest||function(s,e){var t={};for(var p in s){if(Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0)t[p]=s[p];}if(s!=null&&typeof Object.getOwnPropertySymbols==="function")for(var i=0,p=Object.getOwnPropertySymbols(s);i<p.length;i++){if(e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i]))t[p[i]]=s[p[i]];}return t;};var AnimatedView=_reactNative.Animated.createAnimatedComponent(_index["default"]);var AntmSwitch=function AntmSwitch(_a){var _a$prefixCls=_a.prefixCls,prefixCls=_a$prefixCls===void 0?'switch':_a$prefixCls,style=_a.style,checked=_a.checked,defaultChecked=_a.defaultChecked,disabled=_a.disabled,color=_a.color,loading=_a.loading,checkedChildren=_a.checkedChildren,unCheckedChildren=_a.unCheckedChildren,onPress=_a.onPress,onChange=_a.onChange,trackColor=_a.trackColor,thumbColor=_a.thumbColor,thumbTintColor=_a.thumbTintColor,restProps=__rest(_a,["prefixCls","style","checked","defaultChecked","disabled","color","loading","checkedChildren","unCheckedChildren","onPress","onChange","trackColor","thumbColor","thumbTintColor"]);(0,_devWarning["default"])('checked'in restProps||!('value'in restProps),'Switch','`value` is not a valid prop, do you mean `checked`?');var _useMergedState=(0,_useMergedState5["default"])(false,{value:checked,defaultValue:defaultChecked}),_useMergedState2=(0,_slicedToArray2["default"])(_useMergedState,2),innerChecked=_useMergedState2[0],setInnerChecked=_useMergedState2[1];var _useMergedState3=(0,_useMergedState5["default"])(false,{value:loading}),_useMergedState4=(0,_slicedToArray2["default"])(_useMergedState3,2),innerLoading=_useMergedState4[0],setInnerLoading=_useMergedState4[1];var PADDING=11;var TRACK_PADDING=5;var BORDER_WIDTH=2;var _React$useState=React.useState(31),_React$useState2=(0,_slicedToArray2["default"])(_React$useState,2),itemHeight=_React$useState2[0],setHeight=_React$useState2[1];var wrapperMeasure=React.useCallback(function(e){setHeight(e.nativeEvent.layout.height);},[]);disabled=disabled||innerLoading;var _useAnimatedTiming=(0,_useAnimations.useAnimatedTiming)(),_useAnimatedTiming2=(0,_slicedToArray2["default"])(_useAnimatedTiming,2),animatedValue=_useAnimatedTiming2[0],animate=_useAnimatedTiming2[1];var transitionMargin={marginLeft:animatedValue.interpolate({inputRange:[0,1],outputRange:[itemHeight-BORDER_WIDTH,BORDER_WIDTH]}),marginRight:animatedValue.interpolate({inputRange:[0,1],outputRange:[BORDER_WIDTH,itemHeight-BORDER_WIDTH]})};var _useAnimatedTiming3=(0,_useAnimations.useAnimatedTiming)(),_useAnimatedTiming4=(0,_slicedToArray2["default"])(_useAnimatedTiming3,2),animatedValue2=_useAnimatedTiming4[0],animate2=_useAnimatedTiming4[1];var transitionWidth={width:animatedValue2.interpolate({inputRange:[0,1],outputRange:[itemHeight-BORDER_WIDTH*2,itemHeight-BORDER_WIDTH*2+TRACK_PADDING]}),left:!innerChecked?animatedValue.interpolate({inputRange:[0,1],outputRange:[BORDER_WIDTH,PADDING]}):undefined,right:innerChecked?animatedValue.interpolate({inputRange:[0,1],outputRange:[PADDING,BORDER_WIDTH]}):0};React.useEffect(function(){if(innerChecked){animate({});animate2({toValue:0});}else{animate({toValue:0});}},[animate,animate2,innerChecked,itemHeight]);function triggerChange(newChecked){return __awaiter(this,void 0,void 0,_regenerator["default"].mark(function _callee(){var result;return _regenerator["default"].wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:if(disabled){_context.next=16;break;}setInnerChecked(newChecked);result=onChange===null||onChange===void 0?void 0:onChange(newChecked);if(!(0,_isPromise.isPromise)(result)){_context.next=15;break;}setInnerLoading(true);_context.prev=5;_context.next=8;return result;case 8:setInnerLoading(false);_context.next=15;break;case 11:_context.prev=11;_context.t0=_context["catch"](5);setInnerLoading(false);throw _context.t0;case 15:return _context.abrupt("return",newChecked);case 16:return _context.abrupt("return",innerChecked);case 17:case"end":return _context.stop();}}},_callee,null,[[5,11]]);}));}function onInternalClick(){return __awaiter(this,void 0,void 0,_regenerator["default"].mark(function _callee2(){var ret;return _regenerator["default"].wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return triggerChange(!innerChecked);case 2:ret=_context2.sent;onPress===null||onPress===void 0?void 0:onPress(ret);case 4:case"end":return _context2.stop();}}},_callee2);}));}function onPressIn(){animate2({easing:_reactNative.Easing.inOut(_reactNative.Easing.ease)});}function onPressOut(){animate2({toValue:0,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease)});}return React.createElement(_style.WithTheme,{styles:restProps.styles,themeStyles:_index2["default"]},function(styles,theme){var _classNames,_classNames2,_classNames3;var ant_switch=(0,_classnames["default"])(prefixCls,(_classNames={},(0,_defineProperty2["default"])(_classNames,"".concat(prefixCls,"_checked"),innerChecked),(0,_defineProperty2["default"])(_classNames,"".concat(prefixCls,"_unchecked"),!innerChecked),(0,_defineProperty2["default"])(_classNames,"".concat(prefixCls,"_checked_disabled"),innerChecked&&disabled),(0,_defineProperty2["default"])(_classNames,"".concat(prefixCls,"_unchecked_disabled"),!innerChecked&&disabled),_classNames)).split(' ').map(function(a){return styles[a];}).concat([style]);var ant_switch_inner=(0,_classnames["default"])("".concat(prefixCls,"_inner"),(_classNames2={},(0,_defineProperty2["default"])(_classNames2,"".concat(prefixCls,"_inner_checked"),innerChecked),(0,_defineProperty2["default"])(_classNames2,"".concat(prefixCls,"_inner_unchecked"),!innerChecked),_classNames2)).split(' ').map(function(a){return styles[a];});var ant_switch_handle=(0,_classnames["default"])("".concat(prefixCls,"_handle"),(_classNames3={},(0,_defineProperty2["default"])(_classNames3,"".concat(prefixCls,"_handle_checked"),innerChecked),(0,_defineProperty2["default"])(_classNames3,"".concat(prefixCls,"_handle_unchecked"),!innerChecked),(0,_defineProperty2["default"])(_classNames3,"".concat(prefixCls,"_handle_disabled"),disabled),_classNames3)).split(' ').map(function(a){return styles[a];}).concat([{width:itemHeight-BORDER_WIDTH*2,height:itemHeight-BORDER_WIDTH*2,borderRadius:itemHeight-BORDER_WIDTH*2}]);var Color=innerChecked?color||(trackColor===null||trackColor===void 0?void 0:trackColor["true"])||theme.switch_fill:(trackColor===null||trackColor===void 0?void 0:trackColor["false"])||theme.switch_unchecked;var SwitchTrackColor={backgroundColor:Color,borderColor:Color,opacity:Color?disabled?0.6:1:1};var SwitchThumbColor=JSON.parse(JSON.stringify({backgroundColor:innerChecked?thumbTintColor:thumbColor}));var accessibilityState={checked:innerChecked,disabled:disabled,busy:innerLoading};return React.createElement(_reactNative.Pressable,(0,_extends2["default"])({accessibilityRole:"switch",accessibilityState:accessibilityState},restProps,{disabled:disabled,onPressIn:onPressIn,onPressOut:onPressOut,onPress:onInternalClick}),React.createElement(_reactNative.View,{style:[ant_switch,Boolean(trackColor||color)&&SwitchTrackColor,{minWidth:itemHeight+PADDING}],onLayout:wrapperMeasure},React.createElement(_reactNative.Animated.View,{style:[ant_switch_handle,SwitchThumbColor,transitionWidth]},innerLoading&&React.createElement(_activityIndicator["default"],{color:Color,size:18,styles:{spinner:{opacity:0.4}}})),React.createElement(AnimatedView,{style:[ant_switch_inner,transitionMargin]},innerChecked?checkedChildren:unCheckedChildren)));});};AntmSwitch.displayName='AntmSwitch';var _default=AntmSwitch;exports["default"]=_default;