1 4
import * as React from 'react';
2 4
import memoizeOne from 'memoize-one';
3
import {
4
  TapEvent,
5
  TouchEvent,
6
  EventTarget,
7
  EventCurrentTarget,
8
  ImageLoadEvent,
9
  ImageErrorEvent,
10
  InputEvent,
11
  FormEvent,
12
} from './types';
13 4
import { formatDisplayName } from '@remax/shared';
14

15 4
export function createTarget(target: any, detail: any): EventTarget {
16 4
  return {
17
    id: target.id,
18
    offsetLeft: target.offsetLeft,
19
    offsetTop: target.offsetTop,
20 4
    dataset: target.targetDataset || target.dataset,
21 4
    value: detail?.value,
22
  };
23
}
24

25 4
export function createCurrentTarget(currentTarget: any): EventCurrentTarget {
26 4
  return {
27
    id: currentTarget.id,
28
    offsetLeft: currentTarget.offsetLeft,
29
    offsetTop: currentTarget.offsetTop,
30
    dataset: currentTarget.dataset,
31
  };
32
}
33

34 4
export const createTapEvent = (originalEvent: any): TapEvent => ({
35
  type: originalEvent.type,
36
  stopPropagation: originalEvent.stopPropagation,
37
  target: createTarget(originalEvent.target, originalEvent.detail),
38
  currentTarget: createCurrentTarget(originalEvent.currentTarget),
39
  originalEvent,
40
  nativeEvent: originalEvent,
41
});
42

43 4
export const createTouchEvent = (originalEvent: any): TouchEvent => ({
44
  type: originalEvent.type,
45
  stopPropagation: originalEvent.stopPropagation,
46
  target: createTarget(originalEvent.target, originalEvent.detail),
47
  currentTarget: createCurrentTarget(originalEvent.currentTarget),
48
  touches: originalEvent.touches,
49
  changedTouches: originalEvent.touches,
50
  originalEvent,
51
  nativeEvent: originalEvent,
52
});
53

54 4
export const createImageEvent = (originalEvent: any): ImageLoadEvent | ImageErrorEvent => ({
55
  type: originalEvent.type,
56
  target: createTarget(originalEvent.target, originalEvent.detail),
57
  currentTarget: createCurrentTarget(originalEvent.currentTarget),
58
  originalEvent,
59
  nativeEvent: originalEvent,
60
});
61

62 4
export function createCallback(fn: ((event: any) => void) | undefined, eventCreator: (event: any) => any) {
63 4
  if (typeof fn !== 'function') {
64 4
    return undefined;
65
  }
66

67 4
  return (originalEvent: any) => fn(eventCreator(originalEvent));
68
}
69

70 4
export const createInputEvent = (originalEvent: any): InputEvent => ({
71
  type: originalEvent.type,
72
  target: createTarget(originalEvent.target, originalEvent.detail),
73
  currentTarget: createCurrentTarget(originalEvent.currentTarget),
74
  originalEvent,
75
  nativeEvent: originalEvent,
76
});
77

78 4
export const createFormEvent = (originalEvent: any): FormEvent => ({
79
  type: originalEvent.type,
80
  target: createTarget(originalEvent.target, originalEvent.detail),
81
  currentTarget: createCurrentTarget(originalEvent.currentTarget),
82
  originalEvent,
83
  nativeEvent: originalEvent,
84
});
85

86 4
function assignDefaultProps(inputProps: any, defaultProps: any) {
87 4
  if (defaultProps) {
88 4
    Object.keys(defaultProps).forEach(key => {
89 4
      inputProps[key] = inputProps[key] ?? defaultProps[key];
90
    });
91
  }
92
}
93

94 4
export function aliasProps(props: any, alias: { [key: string]: string }) {
95 4
  if (!alias) {
96 0
    return props;
97
  }
98

99 4
  const nextProps: any = {};
100

101 4
  for (const key in props) {
102 4
    nextProps[alias[key] ?? key] = props[key];
103
  }
104

105 4
  return nextProps;
106
}
107

108 4
const createLongTapCallback = memoizeOne(createCallback);
109 4
const createTapCallback = memoizeOne(createCallback);
110 4
const createTouchStartCallback = memoizeOne(createCallback);
111 4
const createTouchMoveCallback = memoizeOne(createCallback);
112 4
const createTouchEndCallback = memoizeOne(createCallback);
113 4
const createTouchCancelCallback = memoizeOne(createCallback);
114 4
const createChangeCallback = memoizeOne(createCallback);
115 4
const createInputCallback = memoizeOne(createCallback);
116 4
const createConfirmCallback = memoizeOne(createCallback);
117 4
const createFocusCallback = memoizeOne(createCallback);
118 4
const createBlurCallback = memoizeOne(createCallback);
119 4
const createSubmitCallback = memoizeOne(createCallback);
120 4
const createResetCallback = memoizeOne(createCallback);
121 4
const createImageLoadCallback = memoizeOne(createCallback);
122 4
const createImageErrorCallback = memoizeOne(createCallback);
123

124 4
export default function createHostComponent<P = any>(
125
  name: string,
126
  alias: {
127
    [key: string]: string;
128
  } | null,
129
  defaults?: {
130
    [key: string]: any;
131 4
  }
132
) {
133 4
  const Component: React.ForwardRefRenderFunction<any, P> = (props: any, ref: React.Ref<any>) => {
134 4
    const inputProps = {
135
      ...props,
136
    };
137

138
    // 默认属性根据平台在这里设置
139 4
    if (defaults) {
140 4
      assignDefaultProps(inputProps, defaults);
141
    }
142

143 4
    if (props.onLongTap) {
144 4
      inputProps.onLongTap = createLongTapCallback(inputProps.onLongTap, createTapEvent);
145
    }
146 4
    if (inputProps.onTap) {
147 4
      inputProps.onTap = createTapCallback(inputProps.onTap, createTapEvent);
148
    }
149

150 4
    if (inputProps.onTouchStart) {
151 4
      inputProps.onTouchStart = createTouchStartCallback(inputProps.onTouchStart, createTouchEvent);
152
    }
153

154 4
    if (inputProps.onTouchMove) {
155 4
      inputProps.onTouchMove = createTouchMoveCallback(inputProps.onTouchMove, createTouchEvent);
156
    }
157

158 4
    if (inputProps.onTouchEnd) {
159 4
      inputProps.onTouchEnd = createTouchEndCallback(inputProps.onTouchEnd, createTouchEvent);
160
    }
161

162 4
    if (inputProps.onTouchCancel) {
163 4
      inputProps.onTouchCancel = createTouchCancelCallback(inputProps.onTouchCancel, createTouchEvent);
164
    }
165

166 4
    if (inputProps.onChange) {
167 0
      inputProps.onChange = createChangeCallback(inputProps.onChange, createInputEvent);
168
    }
169

170 4
    if (inputProps.onInput) {
171 0
      inputProps.onInput = createInputCallback(inputProps.onInput, createInputEvent);
172
    }
173

174 4
    if (inputProps.onConfirm) {
175 0
      inputProps.onConfirm = createConfirmCallback(inputProps.onConfirm, createInputEvent);
176
    }
177

178 4
    if (inputProps.onFocus) {
179 0
      inputProps.onFocus = createFocusCallback(inputProps.onFocus, createInputEvent);
180
    }
181

182 4
    if (inputProps.onBlur) {
183 0
      inputProps.onBlur = createBlurCallback(inputProps.onBlur, createInputEvent);
184
    }
185

186 4
    if (inputProps.onSubmit) {
187 4
      inputProps.onSubmit = createSubmitCallback(inputProps.onSubmit, createFormEvent);
188
    }
189

190 4
    if (inputProps.onReset) {
191 4
      inputProps.onReset = createResetCallback(inputProps.onReset, createFormEvent);
192
    }
193

194 4
    if (name === 'image') {
195 4
      if (inputProps.onLoad) {
196 4
        inputProps.onLoad = createImageLoadCallback(props.onLoad, createImageEvent);
197
      }
198 4
      if (inputProps.onError) {
199 4
        inputProps.onError = createImageErrorCallback(props.onError, createImageEvent);
200
      }
201
    }
202

203 4
    let nextProps = inputProps;
204

205 4
    if (alias) {
206 4
      nextProps = aliasProps(inputProps, alias);
207
    }
208 4
    nextProps.ref = ref;
209

210 4
    return React.createElement(name, nextProps);
211
  };
212

213 4
  if (process.env.NODE_ENV === 'development') {
214 0
    Component.displayName = formatDisplayName(name);
215
  }
216

217 4
  return React.forwardRef<any, React.PropsWithChildren<P>>(Component);
218
}

Read our documentation on viewing source code .

Loading