@svton/taro-ui 1.2.0 → 1.2.1

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 (7) hide show
  1. package/dist/index.d.mts +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +9 -3
  4. package/dist/index.mjs +9 -3
  5. package/dist/index.pure.js +9 -3
  6. package/dist/index.pure.mjs +9 -3
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -111,12 +111,18 @@ interface CustomNavBarProps {
111
111
  * 用于实现滚动时导航栏逐渐显示的效果
112
112
  */
113
113
  scrollOpacity?: number;
114
+ /**
115
+ * 是否显示状态栏
116
+ * 默认 true，只在小程序环境中显示
117
+ * H5 环境会自动忽略
118
+ */
119
+ showStatusBar?: boolean;
114
120
  }
115
121
  /**
116
122
  * 自定义导航栏组件
117
123
  * 自动适配刘海屏和胶囊按钮
118
124
  */
119
- declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
125
+ declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, showStatusBar, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
120
126
 
121
127
  interface StatusBarProps {
122
128
  backgroundColor?: string;
package/dist/index.d.ts CHANGED
@@ -111,12 +111,18 @@ interface CustomNavBarProps {
111
111
  * 用于实现滚动时导航栏逐渐显示的效果
112
112
  */
113
113
  scrollOpacity?: number;
114
+ /**
115
+ * 是否显示状态栏
116
+ * 默认 true，只在小程序环境中显示
117
+ * H5 环境会自动忽略
118
+ */
119
+ showStatusBar?: boolean;
114
120
  }
115
121
  /**
116
122
  * 自定义导航栏组件
117
123
  * 自动适配刘海屏和胶囊按钮
118
124
  */
119
- declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
125
+ declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, showStatusBar, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
120
126
 
121
127
  interface StatusBarProps {
122
128
  backgroundColor?: string;
package/dist/index.js CHANGED
@@ -382,11 +382,13 @@ function CustomNavBar({
382
382
  onClose,
383
383
  rightContent,
384
384
  fixed = false,
385
- scrollOpacity = 1
385
+ scrollOpacity = 1,
386
+ showStatusBar = true
386
387
  }) {
387
388
  const [navBarContentHeight, setNavBarContentHeight] = (0, import_react3.useState)(44);
388
389
  const [statusBarHeight, setStatusBarHeight] = (0, import_react3.useState)(44);
389
390
  const [menuButtonLeft, setMenuButtonLeft] = (0, import_react3.useState)(0);
391
+ const [isMiniProgram, setIsMiniProgram] = (0, import_react3.useState)(false);
390
392
  const getBackgroundColor = () => {
391
393
  if (scrollOpacity >= 1) {
392
394
  return backgroundColor;
@@ -398,6 +400,9 @@ function CustomNavBar({
398
400
  return `rgba(${r}, ${g}, ${b}, ${scrollOpacity})`;
399
401
  };
400
402
  (0, import_react3.useEffect)(() => {
403
+ const env = import_taro3.default.getEnv();
404
+ const isMini = env === import_taro3.default.ENV_TYPE.WEAPP || env === import_taro3.default.ENV_TYPE.ALIPAY || env === import_taro3.default.ENV_TYPE.SWAN || env === import_taro3.default.ENV_TYPE.TT || env === import_taro3.default.ENV_TYPE.QQ || env === import_taro3.default.ENV_TYPE.JD;
405
+ setIsMiniProgram(isMini);
401
406
  const info = systemInfoManager.getInfo();
402
407
  if (info) {
403
408
  setNavBarContentHeight(info.navBarHeight - info.statusBarHeight);
@@ -456,9 +461,10 @@ function CustomNavBar({
456
461
  };
457
462
  const navBarClass = `custom-nav-bar ${fixed ? "fixed" : ""}`;
458
463
  const actualBgColor = getBackgroundColor();
459
- const totalHeight = statusBarHeight + navBarContentHeight;
464
+ const shouldShowStatusBar = isMiniProgram && showStatusBar;
465
+ const totalHeight = (shouldShowStatusBar ? statusBarHeight : 0) + navBarContentHeight;
460
466
  const navBarContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_components5.View, { className: navBarClass, style: { backgroundColor: actualBgColor }, children: [
461
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusBar, { backgroundColor: actualBgColor }),
467
+ shouldShowStatusBar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusBar, { backgroundColor: actualBgColor }),
462
468
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
463
469
  import_components5.View,
464
470
  {
package/dist/index.mjs CHANGED
@@ -293,11 +293,13 @@ function CustomNavBar({
293
293
  onClose,
294
294
  rightContent,
295
295
  fixed = false,
296
- scrollOpacity = 1
296
+ scrollOpacity = 1,
297
+ showStatusBar = true
297
298
  }) {
298
299
  const [navBarContentHeight, setNavBarContentHeight] = useState3(44);
299
300
  const [statusBarHeight, setStatusBarHeight] = useState3(44);
300
301
  const [menuButtonLeft, setMenuButtonLeft] = useState3(0);
302
+ const [isMiniProgram, setIsMiniProgram] = useState3(false);
301
303
  const getBackgroundColor = () => {
302
304
  if (scrollOpacity >= 1) {
303
305
  return backgroundColor;
@@ -309,6 +311,9 @@ function CustomNavBar({
309
311
  return `rgba(${r}, ${g}, ${b}, ${scrollOpacity})`;
310
312
  };
311
313
  useEffect3(() => {
314
+ const env = Taro3.getEnv();
315
+ const isMini = env === Taro3.ENV_TYPE.WEAPP || env === Taro3.ENV_TYPE.ALIPAY || env === Taro3.ENV_TYPE.SWAN || env === Taro3.ENV_TYPE.TT || env === Taro3.ENV_TYPE.QQ || env === Taro3.ENV_TYPE.JD;
316
+ setIsMiniProgram(isMini);
312
317
  const info = systemInfoManager.getInfo();
313
318
  if (info) {
314
319
  setNavBarContentHeight(info.navBarHeight - info.statusBarHeight);
@@ -367,9 +372,10 @@ function CustomNavBar({
367
372
  };
368
373
  const navBarClass = `custom-nav-bar ${fixed ? "fixed" : ""}`;
369
374
  const actualBgColor = getBackgroundColor();
370
- const totalHeight = statusBarHeight + navBarContentHeight;
375
+ const shouldShowStatusBar = isMiniProgram && showStatusBar;
376
+ const totalHeight = (shouldShowStatusBar ? statusBarHeight : 0) + navBarContentHeight;
371
377
  const navBarContent = /* @__PURE__ */ jsxs4(View5, { className: navBarClass, style: { backgroundColor: actualBgColor }, children: [
372
- /* @__PURE__ */ jsx5(StatusBar, { backgroundColor: actualBgColor }),
378
+ shouldShowStatusBar && /* @__PURE__ */ jsx5(StatusBar, { backgroundColor: actualBgColor }),
373
379
  /* @__PURE__ */ jsxs4(
374
380
  View5,
375
381
  {
package/dist/index.pure.js CHANGED
@@ -381,11 +381,13 @@ function CustomNavBar({
381
381
  onClose,
382
382
  rightContent,
383
383
  fixed = false,
384
- scrollOpacity = 1
384
+ scrollOpacity = 1,
385
+ showStatusBar = true
385
386
  }) {
386
387
  const [navBarContentHeight, setNavBarContentHeight] = (0, import_react3.useState)(44);
387
388
  const [statusBarHeight, setStatusBarHeight] = (0, import_react3.useState)(44);
388
389
  const [menuButtonLeft, setMenuButtonLeft] = (0, import_react3.useState)(0);
390
+ const [isMiniProgram, setIsMiniProgram] = (0, import_react3.useState)(false);
389
391
  const getBackgroundColor = () => {
390
392
  if (scrollOpacity >= 1) {
391
393
  return backgroundColor;
@@ -397,6 +399,9 @@ function CustomNavBar({
397
399
  return `rgba(${r}, ${g}, ${b}, ${scrollOpacity})`;
398
400
  };
399
401
  (0, import_react3.useEffect)(() => {
402
+ const env = import_taro3.default.getEnv();
403
+ const isMini = env === import_taro3.default.ENV_TYPE.WEAPP || env === import_taro3.default.ENV_TYPE.ALIPAY || env === import_taro3.default.ENV_TYPE.SWAN || env === import_taro3.default.ENV_TYPE.TT || env === import_taro3.default.ENV_TYPE.QQ || env === import_taro3.default.ENV_TYPE.JD;
404
+ setIsMiniProgram(isMini);
400
405
  const info = systemInfoManager.getInfo();
401
406
  if (info) {
402
407
  setNavBarContentHeight(info.navBarHeight - info.statusBarHeight);
@@ -455,9 +460,10 @@ function CustomNavBar({
455
460
  };
456
461
  const navBarClass = `custom-nav-bar ${fixed ? "fixed" : ""}`;
457
462
  const actualBgColor = getBackgroundColor();
458
- const totalHeight = statusBarHeight + navBarContentHeight;
463
+ const shouldShowStatusBar = isMiniProgram && showStatusBar;
464
+ const totalHeight = (shouldShowStatusBar ? statusBarHeight : 0) + navBarContentHeight;
459
465
  const navBarContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_components5.View, { className: navBarClass, style: { backgroundColor: actualBgColor }, children: [
460
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusBar, { backgroundColor: actualBgColor }),
466
+ shouldShowStatusBar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusBar, { backgroundColor: actualBgColor }),
461
467
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
462
468
  import_components5.View,
463
469
  {
package/dist/index.pure.mjs CHANGED
@@ -291,11 +291,13 @@ function CustomNavBar({
291
291
  onClose,
292
292
  rightContent,
293
293
  fixed = false,
294
- scrollOpacity = 1
294
+ scrollOpacity = 1,
295
+ showStatusBar = true
295
296
  }) {
296
297
  const [navBarContentHeight, setNavBarContentHeight] = useState3(44);
297
298
  const [statusBarHeight, setStatusBarHeight] = useState3(44);
298
299
  const [menuButtonLeft, setMenuButtonLeft] = useState3(0);
300
+ const [isMiniProgram, setIsMiniProgram] = useState3(false);
299
301
  const getBackgroundColor = () => {
300
302
  if (scrollOpacity >= 1) {
301
303
  return backgroundColor;
@@ -307,6 +309,9 @@ function CustomNavBar({
307
309
  return `rgba(${r}, ${g}, ${b}, ${scrollOpacity})`;
308
310
  };
309
311
  useEffect3(() => {
312
+ const env = Taro3.getEnv();
313
+ const isMini = env === Taro3.ENV_TYPE.WEAPP || env === Taro3.ENV_TYPE.ALIPAY || env === Taro3.ENV_TYPE.SWAN || env === Taro3.ENV_TYPE.TT || env === Taro3.ENV_TYPE.QQ || env === Taro3.ENV_TYPE.JD;
314
+ setIsMiniProgram(isMini);
310
315
  const info = systemInfoManager.getInfo();
311
316
  if (info) {
312
317
  setNavBarContentHeight(info.navBarHeight - info.statusBarHeight);
@@ -365,9 +370,10 @@ function CustomNavBar({
365
370
  };
366
371
  const navBarClass = `custom-nav-bar ${fixed ? "fixed" : ""}`;
367
372
  const actualBgColor = getBackgroundColor();
368
- const totalHeight = statusBarHeight + navBarContentHeight;
373
+ const shouldShowStatusBar = isMiniProgram && showStatusBar;
374
+ const totalHeight = (shouldShowStatusBar ? statusBarHeight : 0) + navBarContentHeight;
369
375
  const navBarContent = /* @__PURE__ */ jsxs4(View5, { className: navBarClass, style: { backgroundColor: actualBgColor }, children: [
370
- /* @__PURE__ */ jsx5(StatusBar, { backgroundColor: actualBgColor }),
376
+ shouldShowStatusBar && /* @__PURE__ */ jsx5(StatusBar, { backgroundColor: actualBgColor }),
371
377
  /* @__PURE__ */ jsxs4(
372
378
  View5,
373
379
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@svton/taro-ui",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "Production-ready Taro UI components library for mini-programs with TypeScript support",
5
5
  "keywords": [
6
6
  "taro",