@lemon-fe/mini-app 0.1.24 → 0.1.25

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

@@ -1,9 +1,10 @@
-import { ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import type { NavigationStackScreen } from '../../typings';
 import './index.css';
 interface Props {
     pages: NavigationStackScreen[];
     children?: ReactElement | null;
+    headerStyle?: CSSProperties;
 }
 declare function App(props: Props): JSX.Element;
 export default App;

package/es/components/AppContainer/index.js

@@ -35,7 +35,8 @@ import './index.css';
 
 function App(props) {
   var pages = props.pages,
-      children = props.children;
+      children = props.children,
+      headerStyle = props.headerStyle;
 
   var _useState = useState({
     routes: [{
@@ -117,9 +118,10 @@ function App(props) {
       navigation: {
         navigate: navigate,
         goBack: goBack
-      }
+      },
+      headerStyle: headerStyle
     };
-  }, [navigate, goBack]);
+  }, [navigate, goBack, headerStyle]);
   var screens = /*#__PURE__*/React.createElement(TransitionGroup, {
     className: "lemon-routes"
   }, state.routes.map(function (item, index) {

package/es/components/Screen/index.css

@@ -1,28 +1,32 @@
 .lemon-route {
-  display: flex;
-  flex-direction: column;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
-  left: 0; 
-  background-color: #fff;
+  left: 0;
+  display: flex;
+  flex-direction: column;
   color: #333;
+  background-color: #fff;
   transition: transform 300ms;
 }
 
+.lemon-route-header {
+  padding-top: env(safe-area-inset-top);
+}
+
 .lemon-route-header-content {
   position: relative;
   height: 44px;
 }
 
 .lemon-route-header-left {
-  display: flex;
-  align-items: center;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
+  display: flex;
+  align-items: center;
   padding-left: 15px;
   line-height: 1;
 }
@@ -30,8 +34,8 @@
 .lemon-route-header-center {
   font-weight: bold;
   font-size: 16px;
-  text-align: center;
   line-height: 44px;
+  text-align: center;
 }
 
 .lemon-route-body {

package/es/components/Screen/index.js

@@ -4,9 +4,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React, { createElement, memo, useMemo } from 'react';
-import { ScreenContext } from '../../context';
-import { useNavigation } from '../../hooks';
+import React, { createElement, memo, useContext, useMemo } from 'react';
+import { NavigationContext, ScreenContext } from '../../context';
 import { mini } from '../../global';
 import './index.css';
 
@@ -22,16 +21,20 @@ function Screen(props) {
   var statusBarHeight = useMemo(function () {
     return mini.getSystemInfoSync().statusBarHeight;
   }, []);
-  var navigation = useNavigation();
+
+  var _useContext = useContext(NavigationContext),
+      navigation = _useContext.navigation,
+      headerStyle = _useContext.headerStyle;
+
   return /*#__PURE__*/React.createElement(ScreenContext.Provider, {
     value: ctx
   }, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route"
   }, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-header",
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       paddingTop: statusBarHeight
-    }, route.headerStyle)
+    }, headerStyle), route.headerStyle)
   }, /*#__PURE__*/React.createElement("div", {
     className: "lemon-route-header-content"
   }, index > 0 && /*#__PURE__*/React.createElement("div", {

package/es/context/index.d.ts

@@ -1,8 +1,10 @@
+import type { CSSProperties } from 'react';
 export declare const NavigationContext: import("react").Context<{
     navigation: {
         navigate: (path: string, params?: Record<string, any> | undefined) => void;
         goBack: () => void;
     };
+    headerStyle?: CSSProperties | undefined;
 }>;
 export declare const ScreenContext: import("react").Context<{
     params?: Record<string, any> | undefined;

package/es/global.d.ts

@@ -11,9 +11,13 @@ interface Mini {
     };
     addListener(cb: (e: string) => void): void;
     getExtraPayload(): unknown;
-    scanCode(opt: {
+    scanCode(opts: {
         success: (value: string) => void;
     }): void;
+    setStatusBarStyle(opt: {
+        success?: () => void;
+        params: 'default' | 'light-content' | 'dark-content';
+    }): void;
     exit(): void;
 }
 declare global {

package/es/global.js

@@ -14,7 +14,8 @@ export var mini = {
   addListener: function addListener() {},
   getExtraPayload: function getExtraPayload() {},
   scanCode: function scanCode() {},
-  exit: function exit() {}
+  exit: function exit() {},
+  setStatusBarStyle: function setStatusBarStyle() {}
 };
 export function createApp(render) {
   var count = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/mini-app",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -27,10 +27,12 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
+    "color-string": "^1.6.0",
     "react": ">=17.0.2"
   },
   "devDependencies": {
-    "@types/react-transition-group": "^4.4.4"
+    "@types/react-transition-group": "^4.4.4",
+    "color-string": "^1.9.0"
   },
-  "gitHead": "72377e94c49e83f586ec6e36371387291ff41843"
+  "gitHead": "ea6abf747e0deb1b7f8bdf638639800206b59b42"
 }