Merge branch 'master' of https://github.com/aotuzuche/auto-ui

aotuzuche · Apr 22, 2021 · 21e1c11 · 21e1c11
2 parents 913a89b + b531db3
commit 21e1c11
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 6 deletions.
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
@@ -27,7 +27,7 @@ interface ILayout {
   Footer: React.FC<IFooterProps>
 }
 
-const Layout: React.FC<ILayoutProps> & ILayout = (props) => {
+const Layout: React.FC<ILayoutProps> & ILayout = props => {
   const {
     className,
     children,
@@ -216,7 +216,7 @@ interface IFooterProps {
   [otherProps: string]: any
 }
 
-const LayoutFooter: React.FC<IFooterProps> = (props) => {
+const LayoutFooter: React.FC<IFooterProps> = props => {
   const { className, visible, children, borderType, ...otherProps } = props
   const composeClassName = cn(
     'x-app-footer',
@@ -251,13 +251,14 @@ interface IHeaderProps {
   borderType?: 'border' | 'shadow' | 'none'
   headline?: boolean
   hideInApp?: boolean
+  hideInMini?: boolean
   tabs?: React.ReactNode
   homepage?: ((event: React.MouseEvent<HTMLAnchorElement>) => void) | string | boolean
   useSafeArea?: boolean
   [otherProps: string]: any
 }
 
-const LayoutHeader: React.FC<IHeaderProps> = (props) => {
+const LayoutHeader: React.FC<IHeaderProps> = props => {
   const context = React.useContext(CustomProvider) || {}
 
   const {
@@ -276,6 +277,7 @@ const LayoutHeader: React.FC<IHeaderProps> = (props) => {
     homepage,
     useSafeArea,
     tabs,
+    hideInMini,
     ...otherProps
   } = props
 
@@ -304,6 +306,11 @@ const LayoutHeader: React.FC<IHeaderProps> = (props) => {
     return null
   }
 
+  // 在小程序中
+  if (hideInMini && (window as any).isMiniProgram) {
+    return null
+  }
+
   const gotoHomepage = (evt: any) => {
     if (!homepage) return
     if (typeof homepage === 'string') {

diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
@@ -79,6 +79,7 @@ code=[onReachBottom](layout_reach_bottom)
 | homepage       | 首页按钮，若值为 true，点击到达/m/index 页面，若为 string 类型，则认为该 string 是个 url 进行跳转，若为 function 类型，则调用该方法 | Function/String/Boolean | -      |
 | tabs           | Tabs 组件，位于 header 下方                                                                                                         | Component               | -      |
 | hideInApp      | 在 app 中隐藏自身                                                                                                                   | Boolean                 | false  |
+| hideInMini      | 在 小程序 中隐藏自身                                                                                                                   | Boolean                 | false  |
 | borderType     | 头部下方是使用阴影、线或是没有                                                                                                      | border、shadow、none    | none   |
 | useSafeArea    | 是否使用安全区域，默认是在 Layout 中使用，可以在 Layout 中关闭，在 Header 中使用，特殊情况下可以这么做，比如有吸顶 banner 图的时候  | Boolean                 | false  |
 

diff --git a/examples_src/global.d.ts b/examples_src/global.d.ts
@@ -0,0 +1,22 @@
+declare module '*.png'
+declare module '*.gif'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.svg'
+declare module '*.css'
+declare module '*.less'
+declare module '*.scss'
+declare module '*.sass'
+declare module '*.styl'
+
+interface Window {
+  isWX: boolean
+  isApp: boolean
+  isAlipay: boolean
+  isSmallSwan: boolean
+  isJD: boolean
+  isJDMP: boolean
+  isMiniProgram: boolean
+  isiOS: boolean
+  isAndroid: boolean
+}
diff --git a/examples_src/src/auto-ui/components/layout/index.tsx b/examples_src/src/auto-ui/components/layout/index.tsx
@@ -27,7 +27,7 @@ interface ILayout {
   Footer: React.FC<IFooterProps>
 }
 
-const Layout: React.FC<ILayoutProps> & ILayout = (props) => {
+const Layout: React.FC<ILayoutProps> & ILayout = props => {
   const {
     className,
     children,
@@ -216,7 +216,7 @@ interface IFooterProps {
   [otherProps: string]: any
 }
 
-const LayoutFooter: React.FC<IFooterProps> = (props) => {
+const LayoutFooter: React.FC<IFooterProps> = props => {
   const { className, visible, children, borderType, ...otherProps } = props
   const composeClassName = cn(
     'x-app-footer',
@@ -251,13 +251,14 @@ interface IHeaderProps {
   borderType?: 'border' | 'shadow' | 'none'
   headline?: boolean
   hideInApp?: boolean
+  hideInMini?: boolean
   tabs?: React.ReactNode
   homepage?: ((event: React.MouseEvent<HTMLAnchorElement>) => void) | string | boolean
   useSafeArea?: boolean
   [otherProps: string]: any
 }
 
-const LayoutHeader: React.FC<IHeaderProps> = (props) => {
+const LayoutHeader: React.FC<IHeaderProps> = props => {
   const context = React.useContext(CustomProvider) || {}
 
   const {
@@ -276,6 +277,7 @@ const LayoutHeader: React.FC<IHeaderProps> = (props) => {
     homepage,
     useSafeArea,
     tabs,
+    hideInMini,
     ...otherProps
   } = props
 
@@ -304,6 +306,11 @@ const LayoutHeader: React.FC<IHeaderProps> = (props) => {
     return null
   }
 
+  // 在小程序中
+  if (hideInMini && (window as any).isMiniProgram) {
+    return null
+  }
+
   const gotoHomepage = (evt: any) => {
     if (!homepage) return
     if (typeof homepage === 'string') {

diff --git a/examples_src/src/auto-ui/components/layout/index.zh-CN.md b/examples_src/src/auto-ui/components/layout/index.zh-CN.md
@@ -79,6 +79,7 @@ code=[onReachBottom](layout_reach_bottom)
 | homepage       | 首页按钮，若值为 true，点击到达/m/index 页面，若为 string 类型，则认为该 string 是个 url 进行跳转，若为 function 类型，则调用该方法 | Function/String/Boolean | -      |
 | tabs           | Tabs 组件，位于 header 下方                                                                                                         | Component               | -      |
 | hideInApp      | 在 app 中隐藏自身                                                                                                                   | Boolean                 | false  |
+| hideInMini      | 在 小程序 中隐藏自身                                                                                                                   | Boolean                 | false  |
 | borderType     | 头部下方是使用阴影、线或是没有                                                                                                      | border、shadow、none    | none   |
 | useSafeArea    | 是否使用安全区域，默认是在 Layout 中使用，可以在 Layout 中关闭，在 Header 中使用，特殊情况下可以这么做，比如有吸顶 banner 图的时候  | Boolean                 | false  |
 

diff --git a/wiki_src/src/pages/layout.tsx b/wiki_src/src/pages/layout.tsx
@@ -398,6 +398,12 @@ export default Demo
 <td>false</td>
 </tr>
 <tr>
+<td>hideInMini</td>
+<td>在 小程序 中隐藏自身</td>
+<td>Boolean</td>
+<td>false</td>
+</tr>
+<tr>
 <td>borderType</td>
 <td>头部下方是使用阴影、线或是没有</td>
 <td>border、shadow、none</td>