@lemon-fe/mini-app 0.1.45 → 0.1.57

package/es/components/AppContainer/index.d.ts

@@ -5,6 +5,7 @@ interface Props {
     pages: NavigationStackScreen[];
     children?: ReactElement | null;
     headerStyle?: CSSProperties;
+    capsule?: boolean;
 }
 declare function App(props: Props): JSX.Element;
 export default App;

package/es/components/AppContainer/index.js

@@ -37,7 +37,9 @@ import './index.css';
 function App(props) {
   var pages = props.pages,
       children = props.children,
-      headerStyle = props.headerStyle;
+      headerStyle = props.headerStyle,
+      _props$capsule = props.capsule,
+      capsule = _props$capsule === void 0 ? true : _props$capsule;
 
   var _useState = useState({
     routes: [{
@@ -114,6 +116,13 @@ function App(props) {
       }
     });
   }, [goBack]);
+  useEffect(function () {
+    if (!capsule) {
+      mini.setCapsule({
+        visible: false
+      });
+    }
+  }, []);
   var ctx = useMemo(function () {
     return {
       navigation: {

package/es/components/Capsule/index.css

@@ -1,7 +1,7 @@
 .lemon-capsule {
   position: fixed;
-  top: calc(env(safe-area-inset-top) + 7px);
   right: 15px;
+  bottom: 15px;
   height: 30px;
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(151, 151, 151, 0.2);

package/es/components/Portal/index.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+declare type ContentType = ReactElement | null;
+declare function PortalHost(props: {
+    children: ContentType;
+}): JSX.Element;
+declare function PortalSlot(props: {
+    slot: string;
+}): ContentType;
+declare function Portal(props: {
+    children: ContentType;
+    slot: string;
+}): null;
+declare namespace Portal {
+    var Host: typeof PortalHost;
+    var Slot: typeof PortalSlot;
+}
+export default Portal;

package/es/components/Portal/index.js

@@ -0,0 +1,141 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+var Slot = /*#__PURE__*/memo(function Content(props) {
+  return props.children;
+});
+var Context = /*#__PURE__*/createContext({
+  set: function set() {},
+  delete: function _delete() {},
+  observable: {
+    subscribe: function subscribe() {
+      return {
+        unsubscribe: function unsubscribe() {}
+      };
+    },
+    get: function get() {
+      return new Map();
+    }
+  }
+});
+
+function Subject(initialData) {
+  var observers = [];
+  var data = initialData;
+  return {
+    get: function get() {
+      return data;
+    },
+    next: function next(state) {
+      data = state;
+      observers.forEach(function (item) {
+        return item.next(state);
+      });
+    },
+    subscribe: function subscribe(observer) {
+      observers.push(observer);
+      return {
+        unsubscribe: function unsubscribe() {
+          var index = observers.findIndex(function (item) {
+            return item === observer;
+          });
+
+          if (index >= 0) {
+            observers.splice(index, 1);
+          }
+        }
+      };
+    }
+  };
+}
+
+function PortalHost(props) {
+  var children = props.children;
+
+  var _useState = useState(new Map()),
+      _useState2 = _slicedToArray(_useState, 2),
+      nodes = _useState2[0],
+      setNodes = _useState2[1];
+
+  var observable = useMemo(function () {
+    return Subject(nodes);
+  }, []);
+  var portal = useMemo(function () {
+    return {
+      set: function set(key, node) {
+        setNodes(function (prev) {
+          var next = new Map(prev);
+          next.set(key, node);
+          return next;
+        });
+      },
+      delete: function _delete(key) {
+        setNodes(function (prev) {
+          var next = new Map(prev);
+          next.delete(key);
+          return next;
+        });
+      },
+      observable: observable
+    };
+  }, []);
+  useEffect(function () {
+    observable.next(nodes);
+  }, [nodes]);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: portal
+  }, /*#__PURE__*/React.createElement(Slot, null, children));
+}
+
+function PortalSlot(props) {
+  var slot = props.slot;
+
+  var _useContext = useContext(Context),
+      observable = _useContext.observable;
+
+  var _useState3 = useState(observable.get().get(slot) || null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      node = _useState4[0],
+      setNode = _useState4[1];
+
+  useEffect(function () {
+    var _observable$subscribe = observable.subscribe({
+      next: function next(state) {
+        setNode(state.get(slot) || null);
+      }
+    }),
+        unsubscribe = _observable$subscribe.unsubscribe;
+
+    return unsubscribe;
+  }, [slot]);
+  return node;
+}
+
+function Portal(props) {
+  var slot = props.slot,
+      children = props.children;
+  var portal = useContext(Context);
+  useEffect(function () {
+    return function () {
+      portal.delete(slot);
+    };
+  }, [slot]);
+  useEffect(function () {
+    portal.set(slot, children);
+  }, [slot, children]);
+  return null;
+}
+
+Portal.Host = PortalHost;
+Portal.Slot = PortalSlot;
+export default Portal;

package/es/components/Screen/index.css

@@ -30,6 +30,17 @@
   line-height: 1;
 }
 
+.lemon-route-header-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+  line-height: 1;
+}
+
 .lemon-route-header-center {
   font-weight: bold;
   font-size: 16px;

package/es/components/Screen/index.js

@@ -15,6 +15,7 @@ import { CSSTransition } from 'react-transition-group';
 import { NavigationContext, ScreenContext } from '../../context';
 import { mini } from '../../global';
 import './index.css';
+import Portal from '../Portal';
 
 function Screen(props) {
   var route = props.route,
@@ -36,13 +37,16 @@ function Screen(props) {
       headerStyle = _useContext.headerStyle;
 
   var ref = useRef(null);
+  var node = useMemo(function () {
+    return /*#__PURE__*/createElement(route.screen);
+  }, [route.screen]);
   return /*#__PURE__*/React.createElement(CSSTransition, _objectSpread({
     timeout: 300,
     classNames: "lemon-transition",
     nodeRef: ref
   }, restProps), /*#__PURE__*/React.createElement(ScreenContext.Provider, {
     value: ctx
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Portal.Host, null, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route",
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
@@ -52,7 +56,7 @@ function Screen(props) {
     }, headerStyle), route.headerStyle)
   }, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-header-content"
-  }, index > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-header-left",
     onClick: function onClick() {
       return navigation.goBack();
@@ -68,9 +72,13 @@ function Screen(props) {
     fillRule: "evenodd"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-header-center"
-  }, route.title))), /*#__PURE__*/React.createElement("div", {
+  }, route.title), /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-header-right"
+  }, /*#__PURE__*/React.createElement(Portal.Slot, {
+    slot: "header-right"
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-body"
-  }, /*#__PURE__*/createElement(route.screen)))));
+  }, node)))));
 }
 
 export default /*#__PURE__*/memo(Screen);

package/es/components/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Screen } from './Screen';
 export { default as AppContainer } from './AppContainer';
+export { default as Portal } from './Portal';

package/es/components/index.js

@@ -1,2 +1,3 @@
 export { default as Screen } from './Screen';
-export { default as AppContainer } from './AppContainer';
+export { default as AppContainer } from './AppContainer';
+export { default as Portal } from './Portal';

package/es/global.d.ts

@@ -1,5 +1,14 @@
 import { UserInfo } from './typings';
-interface Mini {
+declare global {
+    interface Window {
+        ReactNativeWebView?: {
+            postMessage(e: string): void;
+        };
+        mini?: typeof mini;
+    }
+}
+export declare const mini: {
+    loaded: boolean;
     getSystemInfoSync(): {
         statusBarHeight: number;
         pixelRatio: number;
@@ -10,31 +19,32 @@ interface Mini {
             left: number;
         };
     };
-    addListener(cb: (e: string) => void): void;
     getExtraPayload(): unknown;
+    methodRegister(name: string, opts?: {
+        success?: ((value: any) => void) | undefined;
+        fail?: ((err: Error) => void) | undefined;
+        params?: any;
+    }): void;
+    methodSuccess(id: number, value: unknown): void;
+    methodFail(id: number, err: Error): void;
+    addListener(cb: (e: string) => void): () => void;
+    postMessage(e: string): void;
     scanCode(opts: {
         success: (value: string) => void;
     }): void;
-    setStatusBarStyle(opt: {
+    exit(): void;
+    setStatusBarStyle(opts: {
         success?: () => void;
         params: 'default' | 'light-content' | 'dark-content';
     }): void;
-    exit(): void;
-    getUserInfo(opt: {
-        success?: (user: UserInfo) => void;
+    getUserInfo(opts: {
+        success?: ((user: UserInfo) => void) | undefined;
     }): void;
-    getAccessToken(opt: {
-        success?: (token: string | null) => void;
+    getAccessToken(opts: {
+        success?: ((token: string | null) => void) | undefined;
     }): void;
-}
-declare global {
-    interface Window {
-        ReactNativeWebView?: {
-            postMessage(e: string): void;
-        };
-        mini?: Mini;
-    }
-}
-export declare let mini: Mini;
+    setCapsule(opts: {
+        visible: boolean;
+    }): void;
+};
 export declare function createApp(render: () => void): void;
-export {};

package/es/global.js

@@ -1,8 +1,12 @@
+var methodID = 0;
+var methods = {};
+var listeners = [];
 export var mini = {
+  loaded: false,
   getSystemInfoSync: function getSystemInfoSync() {
     return {
       statusBarHeight: 0,
-      pixelRatio: window.devicePixelRatio,
+      pixelRatio: 1,
       safeArea: {
         top: 0,
         right: 0,
@@ -11,29 +15,100 @@ export var mini = {
       }
     };
   },
-  addListener: function addListener() {},
-  getExtraPayload: function getExtraPayload() {},
-  scanCode: function scanCode() {},
-  exit: function exit() {},
-  setStatusBarStyle: function setStatusBarStyle() {},
-  getUserInfo: function getUserInfo() {},
-  getAccessToken: function getAccessToken() {}
+  getExtraPayload: function getExtraPayload() {
+    return;
+  },
+  methodRegister: function methodRegister(name) {
+    var _window$ReactNativeWe;
+
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var mOpts = opts || {};
+    methods[methodID] = {
+      success: mOpts.success,
+      fail: mOpts.fail
+    };
+    (_window$ReactNativeWe = window.ReactNativeWebView) === null || _window$ReactNativeWe === void 0 ? void 0 : _window$ReactNativeWe.postMessage(JSON.stringify({
+      type: 'METHOD',
+      target: {
+        id: methodID,
+        name: name,
+        params: mOpts.params
+      }
+    }));
+
+    if (methodID >= Number.MAX_SAFE_INTEGER) {
+      methodID = 0;
+    } else {
+      methodID += 1;
+    }
+  },
+  methodSuccess: function methodSuccess(id, value) {
+    var method = methods[id];
+
+    if (method !== undefined) {
+      if (method.success !== undefined) {
+        method.success(value);
+      }
+
+      delete methods[id];
+    }
+  },
+  methodFail: function methodFail(id, err) {
+    var method = methods[id];
+
+    if (method !== undefined) {
+      if (method.fail !== undefined) {
+        method.fail(err);
+      }
+
+      delete methods[id];
+    }
+  },
+  addListener: function addListener(cb) {
+    listeners.push(cb);
+    return function () {
+      var index = listeners.findIndex(function (item) {
+        return item === cb;
+      });
+      listeners.splice(index, 1);
+    };
+  },
+  postMessage: function postMessage(e) {
+    listeners.forEach(function (item) {
+      item(e);
+    });
+  },
+  scanCode: function scanCode(opts) {
+    mini.methodRegister('SCAN_CODE', opts);
+  },
+  exit: function exit() {
+    mini.methodRegister('EXIT');
+  },
+  setStatusBarStyle: function setStatusBarStyle(opts) {
+    mini.methodRegister('SET_STATUS_BAR_STYLE', opts);
+  },
+  getUserInfo: function getUserInfo(opts) {
+    mini.methodRegister('GET_USER_INFO', opts);
+  },
+  getAccessToken: function getAccessToken(opts) {
+    mini.methodRegister('GET_ACCESS_TOKEN', opts);
+  },
+  setCapsule: function setCapsule(opts) {
+    mini.methodRegister('SET_CAPSULE', {
+      params: opts
+    });
+  }
 };
+window.mini = mini;
 export function createApp(render) {
   var count = 0;
 
   var check = function check() {
-    if (window.mini === undefined) {
-      count++;
-
-      if (count <= 10) {
-        setTimeout(check, 100);
-      } else {
-        render();
-      }
-    } else {
-      mini = window.mini;
+    if (mini.loaded || count >= 10) {
       render();
+    } else {
+      count++;
+      setTimeout(check, 100);
     }
   };
 

package/es/index.d.ts

@@ -1,4 +1,4 @@
 export * from './global';
-export { AppContainer } from './components';
+export { AppContainer, Portal } from './components';
 export * from './hooks';
 export type { NavigationStackScreen, Path, UserInfo } from './typings';

package/es/index.js

@@ -1,3 +1,3 @@
 export * from './global';
-export { AppContainer } from './components';
+export { AppContainer, Portal } from './components';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/mini-app",
-  "version": "0.1.45",
+  "version": "0.1.57",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -23,16 +23,18 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "react": "^17.0.2",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
     "color-string": "^1.6.0",
-    "react": ">=17.0.2"
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
   },
   "devDependencies": {
     "@types/react-transition-group": "^4.4.4",
-    "color-string": "^1.9.0"
+    "color-string": "^1.9.0",
+    "react": "^17.0.2",
+    "react-dom": "17.0.2"
   },
-  "gitHead": "fbaba06659f3a22092c6810d373c3d45c4533a21"
+  "gitHead": "1eb27aafe8ba7a864d9d88ca5a8dc3d4da5dc582"
 }