@lemon-fe/mini-app 0.1.51 → 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

@@ -43,5 +43,8 @@ export declare const mini: {
     getAccessToken(opts: {
         success?: ((token: string | null) => void) | undefined;
     }): void;
+    setCapsule(opts: {
+        visible: boolean;
+    }): void;
 };
 export declare function createApp(render: () => void): void;

package/es/global.js

@@ -92,6 +92,11 @@ export var mini = {
   },
   getAccessToken: function getAccessToken(opts) {
     mini.methodRegister('GET_ACCESS_TOKEN', opts);
+  },
+  setCapsule: function setCapsule(opts) {
+    mini.methodRegister('SET_CAPSULE', {
+      params: opts
+    });
   }
 };
 window.mini = mini;

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.51",
+  "version": "0.1.57",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -36,5 +36,5 @@
     "react": "^17.0.2",
     "react-dom": "17.0.2"
   },
-  "gitHead": "72520908111d1bcb007e9e41613b7b5cc323222b"
+  "gitHead": "1eb27aafe8ba7a864d9d88ca5a8dc3d4da5dc582"
 }