fix: 微信Swiper自动播放不会受state变化影响

packages/remax/src/adapters/wechat/components/Swiper.tsx

@@ -0,0 +1,68 @@
+import React, { FunctionComponent, forwardRef, CSSProperties } from 'react';
+import propsAlias from './propsAlias';
+
+export interface SwiperProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  indicatorDots?: boolean; // false	否	是否显示面板指示点	1.0.0
+  indicatorColor?: string; // rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
+  indicatorActiveColor?: string; // #000000	否	当前选中的指示点颜色	1.1.0
+  autoplay?: boolean; // false	否	是否自动切换	1.0.0
+  current?: number; // 0	否	当前所在滑块的 index	1.0.0
+  interval?: number; // 5000	否	自动切换时间间隔	1.0.0
+  duration?: number; // 500	否	滑动动画时长	1.0.0
+  circular?: boolean; // false	否	是否采用衔接滑动	1.0.0
+  vertical?: boolean; // false	否	滑动方向是否为纵向	1.0.0
+  previousMargin?: string; // "0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
+  nextMargin?: string; // "0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
+  displayMultipleItems?: number; // 1	否	同时显示的滑块数量	1.9.0
+  skipHiddenItemLayout?: boolean; // false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
+  easingFunction?: string; // "default"	否	指定 swiper 切换缓动动画类型	2.6.5
+  onChange?: (event: any) => void; // 否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
+  onTransition?: (event: any) => void; // 否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
+  onAnimationFinish?: (event: any) => void; // 否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0
+  animation?: Record<string, any>[];
+}
+
+const SwiperRender: FunctionComponent<SwiperProps> = (props, ref) => {
+  const { children, current, onChange, ...restProps } = props;
+  const [innerCurrent, setCurrent] = React.useState(0);
+
+  function handleChange(event: any) {
+    setCurrent(event.detail.current);
+
+    if (typeof onChange === 'function') {
+      return onChange(event);
+    }
+  }
+
+  const swiperProps = propsAlias({
+    ...restProps,
+    current: current === undefined ? innerCurrent : current,
+    onChange: handleChange,
+    ref,
+  });
+
+  return React.createElement('swiper', swiperProps, children);
+};
+
+const Swiper = forwardRef(SwiperRender);
+
+Swiper.defaultProps = {
+  indicatorDots: false,
+  indicatorColor: 'rgba(0, 0, 0, .3)',
+  indicatorActiveColor: '#000000',
+  autoplay: false,
+  interval: 5000,
+  duration: 500,
+  circular: false,
+  vertical: false,
+  previousMargin: '0px',
+  nextMargin: '0px',
+  displayMultipleItems: 1,
+  skipHiddenItemLayout: false,
+  easingFunction: 'default',
+};
+
+export default Swiper;

packages/remax/src/adapters/wechat/components/index.ts

@@ -4,51 +4,13 @@ import propsAlias from './propsAlias';
 export { default as Input } from './Input';
 export { default as Textarea } from './Textarea';
 export { default as Video } from './Video';
-
-export type HostComponent =
-  | 'ad'
-  | 'audio'
-  | 'view'
-  | 'scroll-view'
-  | 'swiper'
-  | 'swiper-item'
-  | 'movable-view'
-  | 'movable-area'
-  | 'cover-view'
-  | 'cover-image'
-  | 'icon'
-  | 'text'
-  | 'rich-text'
-  | 'progress'
-  | 'button'
-  | 'checkbox-group'
-  | 'checkbox'
-  | 'editor'
-  | 'form'
-  | 'label'
-  | 'picker'
-  | 'picker-view'
-  | 'radio-group'
-  | 'radio'
-  | 'slider'
-  | 'switch'
-  | 'navigator'
-  | 'image'
-  | 'camera'
-  | 'live-player'
-  | 'live-pusher'
-  | 'map'
-  | 'canvas'
-  | 'open-data'
-  | 'web-view'
-  | 'functional-page-navigator'
-  | 'official-account';
+export { default as Swiper } from './Swiper';
 
 interface Props {
   [s: string]: any;
 }
 
-function factoryComponent(component: HostComponent) {
+function factoryComponent(component: string) {
   // props 类型存在问题
   return forwardRef(<T>(props: React.Props<T> & Props, ref: any) => {
     const { children = [] } = props;
@@ -62,7 +24,6 @@ function factoryComponent(component: HostComponent) {
 
 export const View = factoryComponent('view');
 export const ScrollView = factoryComponent('scroll-view');
-export const Swiper = factoryComponent('swiper');
 export const SwiperItem = factoryComponent('swiper-item');
 export const MovableView = factoryComponent('movable-view');
 export const MovableArea = factoryComponent('movable-area');
@@ -79,6 +40,7 @@ export const Form = factoryComponent('form');
 export const Label = factoryComponent('label');
 export const Picker = factoryComponent('picker');
 export const PickerView = factoryComponent('picker-view');
+export const PickerViewColumn = factoryComponent('picker-view-column');
 export const RadioGroup = factoryComponent('radio-group');
 export const Radio = factoryComponent('radio');
 export const Slider = factoryComponent('slider');