fix(web): web端函数组件缺少ref forward (#1124)

packages/remax-one/src/hostComponents/Button/index.web.tsx

@@ -6,11 +6,11 @@ import useWebTouch from '../useWebTouch';
 
 export type ButtonProps = ButtonWebProps;
 
-const Button: React.FC<ButtonWebProps> = props => {
+const Button: React.ForwardRefRenderFunction<any, ButtonWebProps> = (props, ref) => {
  const {
  hoverClassName,
- hoverStartTime,
- hoverStayTime,
+ hoverStartTime = 400,
+ hoverStayTime = 50,
  className,
  onTouchStart,
  onTouchMove,
@@ -36,16 +36,12 @@ const Button: React.FC<ButtonWebProps> = props => {
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
+ ref={ref}
  onTouchCancel={handleTouchCancel}
  className={clsx('remax-button', className, { [hoverClassName || '']: hovered })}
  onClick={onTap}
  />
  );
 };
 
-Button.defaultProps = {
- hoverStayTime: 400,
- hoverStartTime: 50,
-};
-
-export default Button;
+export default React.forwardRef(Button);

packages/remax-one/src/hostComponents/Form/index.web.tsx

@@ -4,6 +4,8 @@ import { filterProps } from '../../utils/isPlatformSpecifyProp';
 
 export type FormProps = FormWebProps;
 
-const Form: React.FC<FormWebProps> = props => <form {...filterProps(props)} />;
+const Form: React.ForwardRefRenderFunction<any, FormWebProps> = (props, ref) => (
+ <form {...filterProps(props)} ref={ref} />
+);
 
-export default Form;
+export default React.forwardRef(Form);

packages/remax-one/src/hostComponents/Image/index.web.tsx

@@ -6,8 +6,10 @@ import clsx from 'clsx';
 
 export type ImageProps = ImageWebProps;
 
-const Image: React.FC<ImageWebProps> = props => {
- const { className, src, style, mode, onTap, onLoad, onError, ...restProps } = filterProps<ImageWebProps>(props);
+const Image: React.ForwardRefRenderFunction<any, ImageWebProps> = (props, ref) => {
+ const { className, src, style, mode = 'scaleToFill', onTap, onLoad, onError, ...restProps } = filterProps<
+ ImageWebProps
+ >(props);
  const isWidthFixMode = mode === 'widthFix';
 
  return (
@@ -16,14 +18,15 @@ const Image: React.FC<ImageWebProps> = props => {
  onClick={onTap}
  className={clsx('remax-image', className)}
  style={{
- ...modeStyle[mode || 'scaleToFill'],
+ ...modeStyle[mode],
  backgroundImage: `url(${src})`,
  backgroundRepeat: `no-repeat`,
  ...style,
  }}
  >
  <img
  src={src}
+ ref={ref}
  style={{
  visibility: 'hidden',
  width: isWidthFixMode ? '100%' : undefined,
@@ -35,8 +38,4 @@ const Image: React.FC<ImageWebProps> = props => {
  </div>
  );
 };
-export default Image;
-
-Image.defaultProps = {
- mode: 'scaleToFill',
-};
+export default React.forwardRef(Image);

packages/remax-one/src/hostComponents/Input/index.web.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 
 export type InputProps = InputWebProps;
 
-const Input: React.FC<InputWebProps> = props => {
+const Input: React.ForwardRefRenderFunction<any, InputWebProps> = (props, ref) => {
  const { password, type, onConfirm, onKeyPress, placeholderStyle, className, ...restProps } = filterProps(props);
  const [placeholderStyleClassName] = useWebPlaceholderStyle(placeholderStyle);
 
@@ -25,14 +25,11 @@ const Input: React.FC<InputWebProps> = props => {
  return (
  <input
  {...restProps}
+ ref={ref}
  type={inputType}
  onKeyPress={handleKeyPress}
  className={clsx('remax-input', className, placeholderStyleClassName)}
  />
  );
 };
-export default Input;
-
-Input.defaultProps = {
- onChange: () => void 0,
-};
+export default React.forwardRef(Input);

packages/remax-one/src/hostComponents/Label/index.web.tsx

@@ -4,6 +4,8 @@ import { filterProps } from '../../utils/isPlatformSpecifyProp';
 
 export type { LabelProps };
 
-const Label: React.FC<LabelProps> = props => <label {...filterProps(props)} />;
+const Label: React.ForwardRefRenderFunction<any, LabelProps> = (props, ref) => (
+ <label {...filterProps(props)} ref={ref} />
+);
 
 export default Label;

packages/remax-one/src/hostComponents/Navigator/index.web.tsx

@@ -6,7 +6,7 @@ import { filterProps } from '../../utils/isPlatformSpecifyProp';
 
 export type { NavigatorProps };
 
-const Navigator: React.FC<NavigatorProps> = props => {
+const Navigator: React.ForwardRefRenderFunction<any, NavigatorProps> = (props, ref) => {
  const { className, url, action, hoverClassName, hoverStartTime, hoverStayTime, ...restProps } = filterProps(props);
  const history = RuntimeOptions.get('history');
 
@@ -28,4 +28,4 @@ const Navigator: React.FC<NavigatorProps> = props => {
 
  return <div {...restProps} className={clsx(className)} onClick={handleTap} />;
 };
-export default Navigator;
+export default React.forwardRef(Navigator);

packages/remax-one/src/hostComponents/Text/index.web.tsx

@@ -5,7 +5,7 @@ import { filterProps } from '../../utils/isPlatformSpecifyProp';
 
 export type TextProps = TextWebProps;
 
-const Text: React.FC<TextWebProps> = props => {
+const Text: React.ForwardRefRenderFunction<any, TextWebProps> = (props, ref) => {
  const {
  onTap,
  onTouchStart,
@@ -56,6 +56,7 @@ const Text: React.FC<TextWebProps> = props => {
  className={clsx(className, {
  'remax-text-selectable': selectable,
  })}
+ ref={ref}
  onClick={onTap}
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
@@ -65,4 +66,4 @@ const Text: React.FC<TextWebProps> = props => {
  );
 };
 
-export default Text;
+export default React.forwardRef(Text);

packages/remax-one/src/hostComponents/Textarea/index.web.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 
 export type TextareaProps = TextareaWebProps;
 
-const Textarea: React.FC<TextareaWebProps> = props => {
+const Textarea: React.ForwardRefRenderFunction<any, TextareaWebProps> = (props, ref) => {
  const { onConfirm, onKeyPress, autoHeight, className, placeholderStyle, ...restProps } = filterProps(props);
  const [placeholderStyleClassName] = useWebPlaceholderStyle(placeholderStyle);
 
@@ -27,10 +27,6 @@ const Textarea: React.FC<TextareaWebProps> = props => {
  return <TextareaAutoSize {...restProps} className={textareaClassName} onKeyPress={handleKeyPress} />;
  }
 
- return <textarea {...restProps} className={textareaClassName} onKeyPress={handleKeyPress} />;
-};
-export default Textarea;
-
-Textarea.defaultProps = {
- onChange: () => void 0,
+ return <textarea {...restProps} className={textareaClassName} ref={ref} onKeyPress={handleKeyPress} />;
 };
+export default React.forwardRef(Textarea);

packages/remax-one/src/hostComponents/View/index.web.tsx

@@ -6,11 +6,11 @@ import useWebTouch from '../useWebTouch';
 
 export type ViewProps = ViewWebProps;
 
-const View: React.FC<ViewWebProps> = props => {
+const View: React.ForwardRefRenderFunction<any, ViewProps> = (props, ref) => {
  const {
  hoverClassName,
- hoverStartTime,
- hoverStayTime,
+ hoverStartTime = 50,
+ hoverStayTime = 400,
  className,
  onTouchStart,
  onTouchMove,
@@ -33,6 +33,7 @@ const View: React.FC<ViewWebProps> = props => {
  return (
  <div
  {...restProps}
+ ref={ref}
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
@@ -43,9 +44,4 @@ const View: React.FC<ViewWebProps> = props => {
  );
 };
 
-View.defaultProps = {
- hoverStayTime: 400,
- hoverStartTime: 50,
-};
-
-export default View;
+export default React.forwardRef(View);

packages/remax-one/src/hostComponents/WebView/index.web.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { filterProps } from '../../utils/isPlatformSpecifyProp';
+import clsx from 'clsx';
 
 export interface WebViewProps extends React.AriaAttributes {
  id?: string;
  src: string;
  onMessage?: (event: Event) => void;
+ className?: string;
+ style?: React.CSSProperties;
 }
 
-const WebView: React.FC<WebViewProps> = props => {
+const WebView: React.ForwardRefRenderFunction<any, WebViewProps> = (props, ref) => {
  const { onMessage, ...restProps } = filterProps(props);
  React.useEffect(() => {
  const listener = (event: Event) => {
@@ -21,7 +24,7 @@ const WebView: React.FC<WebViewProps> = props => {
  return () => window.removeEventListener('message', listener);
  }, []);
 
- return <iframe {...restProps} className="remax-web-view" />;
+ return <iframe {...restProps} className={clsx('remax-web-view', props.className)} ref={ref} />;
 };
 
-export default WebView;
+export default React.forwardRef(WebView);