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

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

"use client";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 _DisabledContext=_interopRequireDefault(require("../provider/DisabledContext"));var _HapticsContext=_interopRequireDefault(require("../provider/HapticsContext"));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(props){var disabledContext=React.useContext(_DisabledContext.default);var _props$prefixCls=props.prefixCls,prefixCls=_props$prefixCls===void 0?'switch':_props$prefixCls,style=props.style,checked=props.checked,defaultChecked=props.defaultChecked,_props$disabled=props.disabled,disabled=_props$disabled===void 0?disabledContext:_props$disabled,color=props.color,loading=props.loading,checkedChildren=props.checkedChildren,unCheckedChildren=props.unCheckedChildren,onPress=props.onPress,onChange=props.onChange,trackColor=props.trackColor,thumbColor=props.thumbColor,thumbTintColor=props.thumbTintColor,restProps=__rest(props,["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);},[]);var mergedDisabled=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={borderRadius:itemHeight-BORDER_WIDTH*2,height:animatedValue2.interpolate({inputRange:[0,1],outputRange:[itemHeight-BORDER_WIDTH*2,itemHeight-BORDER_WIDTH*2]}),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]);var onHaptics=React.useContext(_HapticsContext.default);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(mergedDisabled){_context.next=17;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:onHaptics===null||onHaptics===void 0?void 0:onHaptics('switch');return _context.abrupt("return",newChecked);case 17:return _context.abrupt("return",innerChecked);case 18: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&&mergedDisabled),(0,_defineProperty2.default)(_classNames,"".concat(prefixCls,"_unchecked_disabled"),!innerChecked&&mergedDisabled),_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"),mergedDisabled),_classNames3)).split(' ').map(function(a){return styles[a];});var Color=innerChecked?color||(trackColor===null||trackColor===void 0?void 0:trackColor.true)||theme.brand_primary:(trackColor===null||trackColor===void 0?void 0:trackColor.false)||theme.switch_unchecked;var SwitchTrackColor={backgroundColor:Color,borderColor:Color,opacity:Color?mergedDisabled?0.6:1:1};var SwitchThumbColor=JSON.parse(JSON.stringify({backgroundColor:innerChecked?thumbTintColor:thumbColor}));var accessibilityState={checked:innerChecked,mergedDisabled:mergedDisabled,busy:innerLoading};return React.createElement(_reactNative.Pressable,(0,_extends2.default)({accessibilityRole:"switch",accessibilityState:accessibilityState},restProps,{disabled:mergedDisabled,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;