@mpxjs/webpack-plugin 2.10.14-beta.1 → 2.10.14-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/lib/dependencies/ImportDependency.js +102 -0
  2. package/lib/index.js +9 -9
  3. package/lib/platform/style/wx/index.js +7 -1
  4. package/lib/platform/template/wx/component-config/button.js +13 -4
  5. package/lib/platform/template/wx/component-config/index.js +3 -1
  6. package/lib/platform/template/wx/component-config/nav-container.js +27 -0
  7. package/lib/react/processScript.js +4 -2
  8. package/lib/react/script-helper.js +3 -3
  9. package/lib/runtime/components/ali/mpx-nav-container.mpx +3 -0
  10. package/lib/runtime/components/react/context.ts +17 -6
  11. package/lib/runtime/components/react/dist/context.d.ts +78 -0
  12. package/lib/runtime/components/react/dist/context.js +1 -0
  13. package/lib/runtime/components/react/dist/event.config.d.ts +7 -0
  14. package/lib/runtime/components/react/dist/getInnerListeners.d.ts +7 -0
  15. package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts +12 -0
  16. package/lib/runtime/components/react/dist/mpx-button.d.ts +68 -0
  17. package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts +23 -0
  18. package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts +7 -0
  19. package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts +6 -0
  20. package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts +20 -0
  21. package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts +8 -0
  22. package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts +10 -0
  23. package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts +2 -0
  24. package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts +32 -0
  25. package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts +52 -0
  26. package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts +20 -0
  27. package/lib/runtime/components/react/dist/mpx-checkbox.d.ts +32 -0
  28. package/lib/runtime/components/react/dist/mpx-form.d.ts +27 -0
  29. package/lib/runtime/components/react/dist/mpx-icon/index.d.ts +18 -0
  30. package/lib/runtime/components/react/dist/mpx-image.d.ts +21 -0
  31. package/lib/runtime/components/react/dist/mpx-inline-text.d.ts +7 -0
  32. package/lib/runtime/components/react/dist/mpx-input.d.ts +50 -0
  33. package/lib/runtime/components/react/dist/mpx-input.jsx +36 -17
  34. package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts +12 -0
  35. package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +69 -48
  36. package/lib/runtime/components/react/dist/mpx-label.d.ts +20 -0
  37. package/lib/runtime/components/react/dist/mpx-movable-area.d.ts +20 -0
  38. package/lib/runtime/components/react/dist/mpx-movable-view.d.ts +63 -0
  39. package/lib/runtime/components/react/dist/mpx-movable-view.jsx +24 -17
  40. package/lib/runtime/components/react/dist/mpx-nav-container.d.ts +9 -0
  41. package/lib/runtime/components/react/dist/mpx-nav-container.jsx +23 -0
  42. package/lib/runtime/components/react/dist/mpx-navigator.d.ts +9 -0
  43. package/lib/runtime/components/react/dist/mpx-picker/date.d.ts +6 -0
  44. package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts +7 -0
  45. package/lib/runtime/components/react/dist/mpx-picker/index.d.ts +6 -0
  46. package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts +6 -0
  47. package/lib/runtime/components/react/dist/mpx-picker/region.d.ts +6 -0
  48. package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts +2 -0
  49. package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts +6 -0
  50. package/lib/runtime/components/react/dist/mpx-picker/time.d.ts +6 -0
  51. package/lib/runtime/components/react/dist/mpx-picker/type.d.ts +106 -0
  52. package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts +31 -0
  53. package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts +8 -0
  54. package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts +22 -0
  55. package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts +14 -0
  56. package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts +16 -0
  57. package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts +12 -0
  58. package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts +11 -0
  59. package/lib/runtime/components/react/dist/mpx-popup/index.d.ts +22 -0
  60. package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts +16 -0
  61. package/lib/runtime/components/react/dist/mpx-portal/index.d.ts +15 -0
  62. package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts +29 -0
  63. package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts +9 -0
  64. package/lib/runtime/components/react/dist/mpx-radio-group.d.ts +20 -0
  65. package/lib/runtime/components/react/dist/mpx-radio.d.ts +26 -0
  66. package/lib/runtime/components/react/dist/mpx-rich-text/html.d.ts +1 -0
  67. package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts +24 -0
  68. package/lib/runtime/components/react/dist/mpx-root-portal.d.ts +14 -0
  69. package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts +54 -0
  70. package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +26 -8
  71. package/lib/runtime/components/react/dist/mpx-simple-text.d.ts +7 -0
  72. package/lib/runtime/components/react/dist/mpx-simple-view.d.ts +7 -0
  73. package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts +17 -0
  74. package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts +15 -0
  75. package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts +18 -0
  76. package/lib/runtime/components/react/dist/mpx-swiper.d.ts +52 -0
  77. package/lib/runtime/components/react/dist/mpx-swiper.jsx +48 -39
  78. package/lib/runtime/components/react/dist/mpx-switch.d.ts +26 -0
  79. package/lib/runtime/components/react/dist/mpx-text.d.ts +21 -0
  80. package/lib/runtime/components/react/dist/mpx-textarea.d.ts +7 -0
  81. package/lib/runtime/components/react/dist/mpx-video.d.ts +101 -0
  82. package/lib/runtime/components/react/dist/mpx-view.d.ts +34 -0
  83. package/lib/runtime/components/react/dist/mpx-view.jsx +1 -1
  84. package/lib/runtime/components/react/dist/mpx-web-view.d.ts +22 -0
  85. package/lib/runtime/components/react/dist/nav.d.ts +8 -0
  86. package/lib/runtime/components/react/dist/nav.jsx +137 -0
  87. package/lib/runtime/components/react/dist/parser.d.ts +39 -0
  88. package/lib/runtime/components/react/dist/useAnimationHooks.d.ts +32 -0
  89. package/lib/runtime/components/react/dist/useNavShared.d.ts +2 -0
  90. package/lib/runtime/components/react/dist/useNavShared.js +6 -0
  91. package/lib/runtime/components/react/dist/useNodesRef.d.ts +11 -0
  92. package/lib/runtime/components/react/dist/utils.d.ts +122 -0
  93. package/lib/runtime/components/react/mpx-input.tsx +46 -24
  94. package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx +78 -47
  95. package/lib/runtime/components/react/mpx-movable-view.tsx +26 -20
  96. package/lib/runtime/components/react/mpx-nav-container.tsx +33 -0
  97. package/lib/runtime/components/react/mpx-scroll-view.tsx +30 -8
  98. package/lib/runtime/components/react/mpx-swiper.tsx +48 -37
  99. package/lib/runtime/components/react/mpx-view.tsx +1 -1
  100. package/lib/runtime/components/react/nav.tsx +163 -0
  101. package/lib/runtime/components/react/types/common.d.ts +19 -0
  102. package/lib/runtime/components/react/useNavShared.ts +8 -0
  103. package/lib/runtime/components/web/mpx-nav-container.vue +13 -0
  104. package/lib/runtime/components/wx/mpx-nav-container.mpx +9 -0
  105. package/lib/utils/dom-tag-config.js +2 -2
  106. package/package.json +1 -1
  107. package/lib/dependencies/ImportDependencyTemplate.js +0 -50
@@ -0,0 +1,2 @@
1
+ declare const _default: "<html><head>\n <meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no\" name=\"viewport\">\n <style>\n html {\n -ms-content-zooming: none;\n -ms-touch-action: pan-x pan-y;\n }\n body {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n * {\n user-select: none;\n -ms-user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n }\n </style>\n </head>\n <body>\n <script>\n var scale = function (ratio) {\n return function (item) {\n if (typeof item === \"number\") {\n return item * ratio;\n }\n return item;\n };\n};\nfunction autoScaleCanvas(canvas) {\n var ctx = canvas.getContext(\"2d\");\n var ratio = window.devicePixelRatio || 1;\n if (ratio !== 1) {\n canvas.width *= ratio;\n canvas.height *= ratio;\n ctx.scale(ratio, ratio);\n ctx.isPointInPath = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return CanvasRenderingContext2D.prototype.isPointInPath.apply(ctx, args.map(scale(ratio)));\n };\n }\n return canvas;\n}\nwindow.autoScaleCanvas = autoScaleCanvas;\n</script>\n<script>\n\nvar WEBVIEW_TARGET = '@@WEBVIEW_TARGET';\n\nvar ID = function () {\n return Math.random().toString(32).slice(2);\n};\n\nvar flattenObjectCopyValue = function (flatObj, srcObj, key) {\n var value = srcObj[key];\n if (typeof value === 'function') {\n return;\n }\n if (typeof value === 'object' && value instanceof Node) {\n return;\n }\n flatObj[key] = flattenObject(value);\n};\n\nvar flattenObject = function (object) {\n if (typeof object !== 'object' || object === null) {\n return object;\n }\n // Handle TypedArray\n if (object instanceof Uint8ClampedArray) {\n return Array.from(object);\n }\n var flatObject = {};\n for (var key in object) {\n flattenObjectCopyValue(flatObject, object, key);\n }\n for (var key in Object.getOwnPropertyNames(object)) {\n flattenObjectCopyValue(flatObject, object, key);\n }\n return flatObject;\n};\n\nvar AutoScaledCanvas = function (element) {\n this.element = element;\n};\n\nAutoScaledCanvas.prototype.toDataURL = function () {\n return this.element.toDataURL.apply(this.element, arguments);\n};\n\nAutoScaledCanvas.prototype.autoScale = function () {\n if (this.savedHeight !== undefined) {\n this.element.height = this.savedHeight;\n }\n if (this.savedWidth !== undefined) {\n this.element.width = this.savedWidth;\n }\n window.autoScaleCanvas(this.element);\n};\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'width', {\n get: function () {\n return this.element.width;\n },\n set: function (value) {\n this.savedWidth = value;\n this.autoScale();\n return value;\n },\n});\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'height', {\n get: function () {\n return this.element.height;\n },\n set: function (value) {\n this.savedHeight = value;\n this.autoScale();\n return value;\n },\n});\nvar toMessage = function (result) {\n if (result instanceof Blob) {\n return {\n type: 'blob',\n payload: btoa(result),\n meta: {},\n };\n }\n if (result instanceof Object) {\n if (!result[WEBVIEW_TARGET]) {\n var id = ID();\n result[WEBVIEW_TARGET] = id;\n targets[id] = result;\n }\n return {\n type: 'json',\n payload: flattenObject(result),\n args: toArgs(flattenObject(result)),\n meta: {\n target: result[WEBVIEW_TARGET],\n constructor: result.__constructorName__ || result.constructor.name,\n },\n };\n }\n return {\n type: 'json',\n payload: typeof result === 'string' ? result : JSON.stringify(result),\n meta: {},\n };\n};\nvar toArgs = function (result) {\n var args = [];\n for (var key in result) {\n if (result[key] !== undefined && key !== '@@WEBVIEW_TARGET') {\n args.push(result[key]);\n }\n }\n return args;\n};\n\nvar createObjectsFromArgs = function (args) {\n for (var index = 0; index < args.length; index += 1) {\n var currentArg = args[index];\n if (currentArg && currentArg.className !== undefined) {\n var className = currentArg.className, classArgs = currentArg.classArgs;\n // new ImageData,第一个参数需要是 Uint8ClampedArray\n var object = new (Function.prototype.bind.apply(constructors[className], [null].concat(classArgs)))();\n args[index] = object;\n }\n }\n return args;\n};\n\nvar canvas = document.createElement('canvas');\ncanvas.style.width = '100%';\ncanvas.style.height = '100%';\nvar autoScaledCanvas = new AutoScaledCanvas(canvas);\n\nvar targets = {\n canvas: autoScaledCanvas,\n context2D: canvas.getContext('2d'),\n};\n\nvar constructors = {\n CanvasGradient: CanvasGradient,\n Image: Image,\n ImageData: ImageData,\n Uint8ClampedArray: Uint8ClampedArray,\n};\n\nImage.bind =\n Image.bind ||\n function () {\n return Image;\n };\n\nImageData.bind =\n ImageData.bind ||\n function () {\n return ImageData;\n };\nUint8ClampedArray.bind =\n Uint8ClampedArray.bind ||\n function () {\n return Uint8ClampedArray;\n };\n\nvar populateRefs = function (arg) {\n if (arg && arg.__ref__) {\n return targets[arg.__ref__];\n }\n return arg;\n};\ndocument.body.appendChild(canvas);\n\nvar mergeObjects = function (target, source) {\n for (var key in source) {\n if (source.hasOwnProperty(key)) {\n target[key] = source[key];\n }\n }\n return target;\n};\n\nfunction handleMessage(message) {\n var id = message.id,\n type = message.type,\n payload = message.payload;\n\n switch (type) {\n case 'exec': {\n var target = payload.target,\n method = payload.method,\n args = payload.args;\n var result = targets[target][method].apply(targets[target], args.map(populateRefs));\n var msg = toMessage(result);\n\n if (typeof result === 'object' && !msg.meta.constructor) {\n for (var constructorName in constructors) {\n if (result instanceof constructors[constructorName]) {\n msg.meta.constructor = constructorName;\n }\n }\n }\n window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n break;\n }\n case 'set': {\n var target = payload.target,\n key = payload.key,\n value = payload.value;\n targets[target][key] = populateRefs(value);\n break;\n }\n case 'construct': {\n var constructor = payload.constructor,\n target = payload.id,\n args = payload.args || [];\n var newArgs = createObjectsFromArgs(args);\n var object;\n try {\n object = new (Function.prototype.bind.apply(constructors[constructor], [null].concat(newArgs)))();\n }\n catch (error) {\n throw new Error('Error while constructing '.concat(constructor, ' ').concat(error.message));\n }\n object.__constructorName__ = constructor;\n var msg = toMessage({});\n targets[target] = object;\n window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n break;\n }\n case 'listen': {\n var types = payload.types,\n target = payload.target;\n for (var i = 0; i < types.length; i++) {\n var eventType = types[i];\n targets[target].addEventListener(eventType, function (e) {\n const message = toMessage({\n type: 'event',\n payload: {\n type: e.type,\n target: mergeObjects(flattenObject(targets[target]), {\n [WEBVIEW_TARGET]: target,\n }),\n },\n });\n window.ReactNativeWebView.postMessage(\n JSON.stringify(mergeObjects({ id: id }, message))\n );\n });\n }\n break;\n}\n }\n}\nvar handleError = function (err, message) {\n window.ReactNativeWebView.postMessage(JSON.stringify({\n id: message.id,\n type: 'error',\n payload: {\n message: err.message,\n stack: err.stack,\n },\n }));\n document.removeEventListener('message', handleIncomingMessage);\n};\n\nfunction handleIncomingMessage(data) {\n if (Array.isArray(data)) {\n for (var i = 0; i < data.length; i++) {\n try {\n handleMessage(data[i]);\n } catch (err) {\n handleError(err, data[i]);\n }\n }\n } else {\n try {\n handleMessage(data);\n } catch (err) {\n handleError(err, data);\n }\n }\n}\n\nwindow.mpxWebviewMessageCallback = handleIncomingMessage\n</script>\n \n\n</body></html>";
2
+ export default _default;
@@ -0,0 +1,32 @@
1
+ /**
2
+ * ✘ type
3
+ * ✘ canvas-id
4
+ * ✘ disable-scroll
5
+ * ✔ bindtouchstart
6
+ * ✔ bindtouchmove
7
+ * ✔ bindtouchend
8
+ * ✔ bindtouchcancel
9
+ * ✔ bindlongtap
10
+ * ✔ binderror
11
+ */
12
+ import { TouchEvent } from 'react';
13
+ import { View, NativeSyntheticEvent } from 'react-native';
14
+ import { HandlerRef } from '../useNodesRef';
15
+ import './CanvasGradient';
16
+ interface CanvasProps {
17
+ style?: Record<string, any>;
18
+ originWhitelist?: Array<string>;
19
+ 'enable-var'?: boolean;
20
+ 'parent-font-size'?: number;
21
+ 'parent-width'?: number;
22
+ 'parent-height'?: number;
23
+ 'external-var-context'?: Record<string, any>;
24
+ bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
25
+ bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
26
+ bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
27
+ bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void;
28
+ bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void;
29
+ binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void;
30
+ }
31
+ declare const _Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<HandlerRef<CanvasProps & View, CanvasProps>>>;
32
+ export default _Canvas;
@@ -0,0 +1,52 @@
1
+ /// <reference types="react" />
2
+ import { WebView } from 'react-native-webview';
3
+ import Bus from './Bus';
4
+ export declare const WEBVIEW_TARGET = "@@WEBVIEW_TARGET";
5
+ export declare const constructors: Record<string, any>;
6
+ export declare const ID: () => string;
7
+ export interface Instance {
8
+ postMessage: (...args: any[]) => void;
9
+ [WEBVIEW_TARGET]?: string;
10
+ [key: string]: any;
11
+ }
12
+ export interface WebviewConstructor {
13
+ new (...args: any[]): Instance;
14
+ constructLocally?: (...args: unknown[]) => Instance;
15
+ }
16
+ export interface WebviewMessage {
17
+ type: 'set' | 'exec' | 'listen' | 'event' | 'construct';
18
+ payload: {
19
+ target?: string | {
20
+ [key: string]: any;
21
+ };
22
+ key?: string;
23
+ value?: any;
24
+ method?: string;
25
+ args?: any[];
26
+ types?: string[];
27
+ type?: string;
28
+ constructor?: string | Function;
29
+ id?: string;
30
+ };
31
+ }
32
+ export interface CanvasInstance {
33
+ webview: WebView | null;
34
+ bus: Bus | null;
35
+ context2D: CanvasRenderingContext2D;
36
+ getContext: (contextType: string) => CanvasRenderingContext2D | null;
37
+ createImage: (width?: number, height?: number) => any;
38
+ postMessage: (message: WebviewMessage) => Promise<any>;
39
+ listeners: Array<(payload: any) => void>;
40
+ addMessageListener: (listener: (payload: any) => void) => () => void;
41
+ removeMessageListener: (listener: (payload: any) => void) => void;
42
+ createImageData: (dataArray: number[], width?: number, height?: number) => any;
43
+ }
44
+ export declare const registerWebviewTarget: (instance: Instance, targetName: string) => void;
45
+ export declare const registerWebviewProperties: (instance: Instance, properties: Record<string, any>) => void;
46
+ export declare const registerWebviewMethods: (instance: Instance, methods: string[]) => void;
47
+ export declare const registerWebviewConstructor: (constructor: WebviewConstructor, constructorName: string) => void;
48
+ export declare const useWebviewBinding: ({ targetName, properties, methods }: {
49
+ targetName: string;
50
+ properties?: Record<string, any> | undefined;
51
+ methods?: string[] | undefined;
52
+ }) => import("react").MutableRefObject<{}>;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * ✔ bindchange
3
+ */
4
+ import { ReactNode } from 'react';
5
+ import { View, NativeSyntheticEvent, ViewStyle } from 'react-native';
6
+ import { HandlerRef } from './useNodesRef';
7
+ export interface CheckboxGroupProps {
8
+ name: string;
9
+ style?: ViewStyle & Record<string, any>;
10
+ 'enable-offset'?: boolean;
11
+ 'enable-var'?: boolean;
12
+ 'external-var-context'?: Record<string, any>;
13
+ 'parent-font-size'?: number;
14
+ 'parent-width'?: number;
15
+ 'parent-height'?: number;
16
+ children: ReactNode;
17
+ bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
18
+ }
19
+ declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HandlerRef<View, CheckboxGroupProps>>>;
20
+ export default CheckboxGroup;
@@ -0,0 +1,32 @@
1
+ /**
2
+ * ✔ value
3
+ * ✔ disabled
4
+ * ✔ checked
5
+ * ✔ color
6
+ */
7
+ import { ReactNode } from 'react';
8
+ import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
9
+ import { HandlerRef } from './useNodesRef';
10
+ interface Selection {
11
+ value?: string;
12
+ checked?: boolean;
13
+ }
14
+ export interface CheckboxProps extends Selection {
15
+ disabled?: boolean;
16
+ color?: string;
17
+ style?: ViewStyle & Record<string, any>;
18
+ groupValue?: Array<string>;
19
+ 'enable-offset'?: boolean;
20
+ 'enable-var'?: boolean;
21
+ 'external-var-context'?: Record<string, any>;
22
+ 'parent-font-size'?: number;
23
+ 'parent-width'?: number;
24
+ 'parent-height'?: number;
25
+ children?: ReactNode;
26
+ bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
27
+ _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: {
28
+ checked: boolean;
29
+ }) => void;
30
+ }
31
+ declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HandlerRef<View, CheckboxProps>>>;
32
+ export default Checkbox;
@@ -0,0 +1,27 @@
1
+ /**
2
+ * ✘ report-submit
3
+ * ✘ report-submit-timeout
4
+ * ✔ bindsubmit
5
+ * ✔ bindreset
6
+ */
7
+ import { View } from 'react-native';
8
+ import { ReactNode } from 'react';
9
+ import { HandlerRef } from './useNodesRef';
10
+ interface FormProps {
11
+ style?: Record<string, any>;
12
+ children?: ReactNode;
13
+ 'enable-offset'?: boolean;
14
+ 'enable-var'?: boolean;
15
+ 'external-var-context'?: Record<string, any>;
16
+ 'parent-font-size'?: number;
17
+ 'parent-width'?: number;
18
+ 'parent-height'?: number;
19
+ bindsubmit?: (evt: {
20
+ detail: {
21
+ value: any;
22
+ };
23
+ }) => void;
24
+ bindreset?: () => void;
25
+ }
26
+ declare const _Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HandlerRef<View, FormProps>>>;
27
+ export default _Form;
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import { Text, TextStyle } from 'react-native';
3
+ import { HandlerRef } from '../useNodesRef';
4
+ export type IconType = 'success' | 'success_no_circle' | 'info' | 'warn' | 'waiting' | 'cancel' | 'download' | 'search' | 'clear';
5
+ export interface IconProps {
6
+ type: IconType;
7
+ size?: number;
8
+ color?: string;
9
+ style?: TextStyle & Record<string, any>;
10
+ 'enable-offset'?: boolean;
11
+ 'enable-var'?: boolean;
12
+ 'external-var-context'?: Record<string, any>;
13
+ 'parent-font-size'?: number;
14
+ 'parent-width'?: number;
15
+ 'parent-height'?: number;
16
+ }
17
+ declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HandlerRef<Text, IconProps>>>;
18
+ export default Icon;
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData } from 'react-native';
3
+ import { HandlerRef } from './useNodesRef';
4
+ export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
5
+ export interface ImageProps {
6
+ src?: string;
7
+ mode?: Mode;
8
+ svg?: boolean;
9
+ style?: ImageStyle & Record<string, any>;
10
+ 'enable-offset'?: boolean;
11
+ 'enable-var'?: boolean;
12
+ 'external-var-context'?: Record<string, any>;
13
+ 'parent-font-size'?: number;
14
+ 'parent-width'?: number;
15
+ 'parent-height'?: number;
16
+ 'enable-fast-image'?: boolean;
17
+ bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void;
18
+ binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void;
19
+ }
20
+ declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HandlerRef<RNImage, ImageProps>>>;
21
+ export default Image;
@@ -0,0 +1,7 @@
1
+ import { TextProps } from 'react-native';
2
+ import { JSX } from 'react';
3
+ declare const InlineText: {
4
+ (props: TextProps): JSX.Element;
5
+ displayName: string;
6
+ };
7
+ export default InlineText;
@@ -0,0 +1,50 @@
1
+ /// <reference types="react" />
2
+ import { TextInput, TextStyle, ViewStyle, NativeSyntheticEvent, TextInputTextInputEventData, TextInputKeyPressEventData, TextInputContentSizeChangeEventData, FlexStyle, TextInputSelectionChangeEventData, TextInputFocusEventData, TextInputSubmitEditingEventData } from 'react-native';
3
+ import { HandlerRef } from './useNodesRef';
4
+ type InputStyle = Omit<TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>, 'borderLeftWidth' | 'borderTopWidth' | 'borderRightWidth' | 'borderBottomWidth' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius'>;
5
+ type Type = 'text' | 'number' | 'idcard' | 'digit';
6
+ type ConfirmType = 'done' | 'send' | 'search' | 'next' | 'go' | 'return';
7
+ export interface InputProps {
8
+ name?: string;
9
+ style?: InputStyle & Record<string, any>;
10
+ value?: string | number;
11
+ type?: Type;
12
+ password?: boolean;
13
+ placeholder?: string;
14
+ disabled?: boolean;
15
+ 'cursor-spacing'?: number;
16
+ maxlength?: number;
17
+ 'auto-focus'?: boolean;
18
+ focus?: boolean;
19
+ 'confirm-type'?: ConfirmType;
20
+ 'confirm-hold'?: boolean;
21
+ cursor?: number;
22
+ 'cursor-color'?: string;
23
+ 'selection-start'?: number;
24
+ 'selection-end'?: number;
25
+ 'placeholder-style'?: {
26
+ color?: string;
27
+ };
28
+ 'enable-offset'?: boolean;
29
+ 'enable-var'?: boolean;
30
+ 'external-var-context'?: Record<string, any>;
31
+ 'parent-font-size'?: number;
32
+ 'parent-width'?: number;
33
+ 'parent-height'?: number;
34
+ 'keyboard-type'?: string;
35
+ 'adjust-position': boolean;
36
+ bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void;
37
+ bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
38
+ bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
39
+ bindconfirm?: (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData | TextInputKeyPressEventData> | unknown) => void;
40
+ bindselectionchange?: (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData> | unknown) => void;
41
+ }
42
+ export interface PrivateInputProps {
43
+ allowFontScaling?: boolean;
44
+ multiline?: boolean;
45
+ 'auto-height'?: boolean;
46
+ bindlinechange?: (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData> | unknown) => void;
47
+ }
48
+ type FinalInputProps = InputProps & PrivateInputProps;
49
+ declare const Input: import("react").ForwardRefExoticComponent<InputProps & PrivateInputProps & import("react").RefAttributes<HandlerRef<TextInput, FinalInputProps>>>;
50
+ export default Input;
@@ -40,19 +40,19 @@
40
40
  import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
41
41
  import { TextInput } from 'react-native';
42
42
  import { warn } from '@mpxjs/utils';
43
- import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils';
43
+ import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
44
44
  import useInnerProps, { getCustomEvent } from './getInnerListeners';
45
45
  import useNodesRef from './useNodesRef';
46
46
  import { FormContext, KeyboardAvoidContext } from './context';
47
47
  import Portal from './mpx-portal';
48
- const keyboardTypeMap = {
49
- text: 'default',
48
+ const inputModeMap = {
49
+ text: 'text',
50
50
  number: 'numeric',
51
- idcard: 'default',
52
- digit: isIOS ? 'decimal-pad' : 'numeric'
51
+ idcard: 'text',
52
+ digit: 'decimal'
53
53
  };
54
54
  const Input = forwardRef((props, ref) => {
55
- const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange,
55
+ const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange,
56
56
  // private
57
57
  multiline, 'auto-height': autoHeight, bindlinechange } = props;
58
58
  const formContext = useContext(FormContext);
@@ -72,7 +72,6 @@ const Input = forwardRef((props, ref) => {
72
72
  return value + '';
73
73
  return '';
74
74
  };
75
- const keyboardType = keyboardTypeMap[type];
76
75
  const defaultValue = parseValue(value);
77
76
  const textAlignVertical = multiline ? 'top' : 'auto';
78
77
  const tmpValue = useRef(defaultValue);
@@ -144,8 +143,8 @@ const Input = forwardRef((props, ref) => {
144
143
  }
145
144
  };
146
145
  const setKeyboardAvoidContext = () => {
147
- if (adjustPosition && keyboardAvoid) {
148
- keyboardAvoid.current = { cursorSpacing, ref: nodeRef };
146
+ if (keyboardAvoid) {
147
+ keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition };
149
148
  }
150
149
  };
151
150
  const onTouchStart = () => {
@@ -156,13 +155,32 @@ const Input = forwardRef((props, ref) => {
156
155
  evt.nativeEvent.origin = 'input';
157
156
  };
158
157
  const onFocus = (evt) => {
159
- setKeyboardAvoidContext();
160
- bindfocus && bindfocus(getCustomEvent('focus', evt, {
161
- detail: {
162
- value: tmpValue.current || ''
163
- },
164
- layoutRef
165
- }, props));
158
+ if (!keyboardAvoid?.current) {
159
+ setKeyboardAvoidContext();
160
+ }
161
+ if (keyboardAvoid?.current) {
162
+ const focusAction = () => {
163
+ bindfocus?.(getCustomEvent('focus', evt, {
164
+ detail: {
165
+ value: tmpValue.current || '',
166
+ height: keyboardAvoid.current?.keyboardHeight
167
+ },
168
+ layoutRef
169
+ }, props));
170
+ if (keyboardAvoid.current?.onKeyboardShow) {
171
+ keyboardAvoid.current.onKeyboardShow = undefined;
172
+ }
173
+ };
174
+ if (keyboardAvoid.current.keyboardHeight) {
175
+ // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前,可以立即执行
176
+ focusAction();
177
+ }
178
+ else {
179
+ // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后,需要延迟回调
180
+ evt.persist();
181
+ keyboardAvoid.current.onKeyboardShow = focusAction;
182
+ }
183
+ }
166
184
  };
167
185
  const onBlur = (evt) => {
168
186
  bindblur && bindblur(getCustomEvent('blur', evt, {
@@ -252,7 +270,8 @@ const Input = forwardRef((props, ref) => {
252
270
  ref: nodeRef,
253
271
  style: extendObject({}, normalStyle, layoutStyle),
254
272
  allowFontScaling,
255
- keyboardType: keyboardType,
273
+ inputMode: originalKeyboardType ? undefined : inputModeMap[type],
274
+ keyboardType: originalKeyboardType,
256
275
  secureTextEntry: !!password,
257
276
  defaultValue: defaultValue,
258
277
  value: inputValue,
@@ -0,0 +1,12 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { ViewStyle } from 'react-native';
3
+ type KeyboardAvoidViewProps = {
4
+ children?: ReactNode;
5
+ style?: ViewStyle;
6
+ contentContainerStyle?: ViewStyle;
7
+ };
8
+ declare const KeyboardAvoidingView: {
9
+ ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps): React.JSX.Element;
10
+ displayName: string;
11
+ };
12
+ export default KeyboardAvoidingView;
@@ -1,22 +1,42 @@
1
- import React, { useContext, useEffect } from 'react';
1
+ /* eslint-disable space-before-function-paren */
2
+ import React, { useContext, useEffect, useRef } from 'react';
2
3
  import { Keyboard, View } from 'react-native';
3
- import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
4
+ import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
4
5
  import { KeyboardAvoidContext } from './context';
5
- import { isIOS } from './utils';
6
+ import { isAndroid, isIOS } from './utils';
6
7
  const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
7
8
  const duration = isIOS ? 250 : 300;
8
9
  const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
9
10
  const offset = useSharedValue(0);
10
11
  const basic = useSharedValue('auto');
11
12
  const keyboardAvoid = useContext(KeyboardAvoidContext);
13
+ // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow,
14
+ // 比如机型 iPhone 11 Pro,可能会导致显隐动画冲突
15
+ // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
16
+ const isShow = useRef(false);
17
+ const timerRef = useRef(null);
12
18
  const animatedStyle = useAnimatedStyle(() => ({
19
+ // translate/position top可能会导致底部渲染区域缺失(需要 android 配置聚焦时禁用高度缩小),margin-top 会导致 portal 的定位失效,无法顶起 portal
13
20
  transform: [{ translateY: -offset.value }],
14
21
  flexBasis: basic.value
15
22
  }));
16
23
  const resetKeyboard = () => {
24
+ if (!isShow.current) {
25
+ return;
26
+ }
27
+ isShow.current = false;
28
+ timerRef.current && clearTimeout(timerRef.current);
17
29
  if (keyboardAvoid?.current) {
18
- keyboardAvoid.current = null;
30
+ const inputRef = keyboardAvoid.current.ref?.current;
31
+ if (inputRef && inputRef.isFocused()) {
32
+ // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
33
+ inputRef.blur();
34
+ }
35
+ if (!keyboardAvoid.current.onKeyboardShow) {
36
+ keyboardAvoid.current = null;
37
+ }
19
38
  }
39
+ cancelAnimation(offset);
20
40
  offset.value = withTiming(0, { duration, easing });
21
41
  basic.value = 'auto';
22
42
  };
@@ -27,66 +47,67 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
27
47
  };
28
48
  useEffect(() => {
29
49
  let subscriptions = [];
30
- if (isIOS) {
31
- subscriptions = [
32
- Keyboard.addListener('keyboardWillShow', (evt) => {
33
- if (!keyboardAvoid?.current)
34
- return;
35
- const { endCoordinates } = evt;
36
- const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
37
- setTimeout(() => {
38
- ref?.current?.measure((x, y, width, height, pageX, pageY) => {
50
+ function keybaordAvoding(evt, ios = false) {
51
+ if (!keyboardAvoid?.current || isShow.current) {
52
+ return;
53
+ }
54
+ isShow.current = true;
55
+ if (ios) {
56
+ timerRef.current && clearTimeout(timerRef.current);
57
+ }
58
+ const { endCoordinates } = evt;
59
+ const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
60
+ keyboardAvoid.current.keyboardHeight = endCoordinates.height;
61
+ onKeyboardShow?.();
62
+ if (adjustPosition) {
63
+ // 默认沿用旧版本逻辑,在 android 原生关闭键盘避让的情况下应该将该配置设置为 false,走 mpx 的键盘避让逻辑,否则bundle内的所有input都会无法避让键盘
64
+ const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true;
65
+ const callback = () => {
66
+ ref?.current?.measure((x, y, width, height, pageX, pageY) => {
67
+ function calculateOffset() {
68
+ // enableNativeKeyboardAvoding 默认开启
69
+ if (enableNativeKeyboardAvoiding && isAndroid) {
70
+ const aboveOffset = pageY + height - endCoordinates.screenY;
71
+ const belowOffset = endCoordinates.height - aboveOffset;
72
+ const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
73
+ const belowValue = Math.min(belowOffset, cursorSpacing);
74
+ return aboveOffset > 0 ? belowValue : aboveValue;
75
+ }
39
76
  const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
40
77
  const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
41
78
  const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
42
- const value = aboveOffset > 0 ? belowValue : aboveValue;
43
- offset.value = withTiming(value, { duration, easing }, (finished) => {
44
- if (finished) {
45
- // Set flexBasic after animation to trigger re-layout and reset layout information
46
- basic.value = '99.99%';
47
- }
48
- });
49
- });
50
- });
51
- }),
52
- Keyboard.addListener('keyboardWillHide', resetKeyboard)
53
- ];
54
- }
55
- else {
56
- subscriptions = [
57
- Keyboard.addListener('keyboardDidShow', (evt) => {
58
- if (!keyboardAvoid?.current)
59
- return;
60
- const { endCoordinates } = evt;
61
- const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
62
- ref?.current?.measure((x, y, width, height, pageX, pageY) => {
63
- const aboveOffset = pageY + height - endCoordinates.screenY;
64
- const belowOffset = endCoordinates.height - aboveOffset;
65
- const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
66
- const belowValue = Math.min(belowOffset, cursorSpacing);
67
- const value = aboveOffset > 0 ? belowValue : aboveValue;
68
- offset.value = withTiming(value, { duration, easing }, (finished) => {
79
+ return aboveOffset > 0 ? belowValue : aboveValue;
80
+ }
81
+ cancelAnimation(offset);
82
+ offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
69
83
  if (finished) {
70
84
  // Set flexBasic after animation to trigger re-layout and reset layout information
71
85
  basic.value = '99.99%';
72
86
  }
73
87
  });
74
88
  });
89
+ };
90
+ (isIOS ? () => (timerRef.current = setTimeout(callback)) : callback)();
91
+ }
92
+ }
93
+ if (isIOS) {
94
+ subscriptions = [
95
+ Keyboard.addListener('keyboardWillShow', (evt) => {
96
+ keybaordAvoding(evt, true);
75
97
  }),
76
- Keyboard.addListener('keyboardDidHide', resetKeyboard)
98
+ Keyboard.addListener('keyboardWillHide', resetKeyboard)
77
99
  ];
78
100
  }
101
+ else {
102
+ subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)];
103
+ }
79
104
  return () => {
80
105
  subscriptions.forEach(subscription => subscription.remove());
106
+ timerRef.current && clearTimeout(timerRef.current);
81
107
  };
82
108
  }, [keyboardAvoid]);
83
- return (<View style={style} onTouchEnd={onTouchEnd}>
84
- <Animated.View style={[
85
- contentContainerStyle,
86
- animatedStyle
87
- ]}>
88
- {children}
89
- </Animated.View>
109
+ return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
110
+ <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
90
111
  </View>);
91
112
  };
92
113
  KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
@@ -0,0 +1,20 @@
1
+ /**
2
+ * ✘ for
3
+ */
4
+ import { ReactNode } from 'react';
5
+ import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
6
+ import { HandlerRef } from './useNodesRef';
7
+ export interface LabelProps {
8
+ for?: string;
9
+ style?: ViewStyle & Record<string, any>;
10
+ 'enable-offset'?: boolean;
11
+ 'enable-var'?: boolean;
12
+ 'external-var-context'?: Record<string, any>;
13
+ 'parent-font-size'?: number;
14
+ 'parent-width'?: number;
15
+ 'parent-height'?: number;
16
+ children: ReactNode;
17
+ bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
18
+ }
19
+ declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HandlerRef<View, LabelProps>>>;
20
+ export default Label;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * ✘ scale-area
3
+ */
4
+ import { View } from 'react-native';
5
+ import { ReactNode } from 'react';
6
+ import { HandlerRef } from './useNodesRef';
7
+ interface MovableAreaProps {
8
+ style?: Record<string, any>;
9
+ children: ReactNode;
10
+ width?: number;
11
+ height?: number;
12
+ 'enable-offset'?: boolean;
13
+ 'enable-var'?: boolean;
14
+ 'external-var-context'?: Record<string, any>;
15
+ 'parent-font-size'?: number;
16
+ 'parent-width'?: number;
17
+ 'parent-height'?: number;
18
+ }
19
+ declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
20
+ export default _MovableArea;