From ca4757572e794e1803a466795ce6b94ed1fbfd5e Mon Sep 17 00:00:00 2001 From: liuxingyun Date: Tue, 20 Apr 2021 15:11:22 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20layout=20header=20ad?= =?UTF-8?q?d=20hideInMini=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/index.tsx | 13 ++++++++--- components/layout/index.zh-CN.md | 1 + examples_src/global.d.ts | 22 +++++++++++++++++++ .../src/auto-ui/components/layout/index.tsx | 13 ++++++++--- .../auto-ui/components/layout/index.zh-CN.md | 1 + wiki_src/src/pages/layout.tsx | 6 +++++ 6 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 examples_src/global.d.ts diff --git a/components/layout/index.tsx b/components/layout/index.tsx index 4b16c80d..41a060d9 100644 --- a/components/layout/index.tsx +++ b/components/layout/index.tsx @@ -27,7 +27,7 @@ interface ILayout { Footer: React.FC } -const Layout: React.FC & ILayout = (props) => { +const Layout: React.FC & ILayout = props => { const { className, children, @@ -216,7 +216,7 @@ interface IFooterProps { [otherProps: string]: any } -const LayoutFooter: React.FC = (props) => { +const LayoutFooter: React.FC = 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) => void) | string | boolean useSafeArea?: boolean [otherProps: string]: any } -const LayoutHeader: React.FC = (props) => { +const LayoutHeader: React.FC = props => { const context = React.useContext(CustomProvider) || {} const { @@ -276,6 +277,7 @@ const LayoutHeader: React.FC = (props) => { homepage, useSafeArea, tabs, + hideInMini, ...otherProps } = props @@ -304,6 +306,11 @@ const LayoutHeader: React.FC = (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 index 9a434e26..85396889 100644 --- 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 new file mode 100644 index 00000000..d4b6483a --- /dev/null +++ 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 index 4b16c80d..41a060d9 100644 --- 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 } -const Layout: React.FC & ILayout = (props) => { +const Layout: React.FC & ILayout = props => { const { className, children, @@ -216,7 +216,7 @@ interface IFooterProps { [otherProps: string]: any } -const LayoutFooter: React.FC = (props) => { +const LayoutFooter: React.FC = 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) => void) | string | boolean useSafeArea?: boolean [otherProps: string]: any } -const LayoutHeader: React.FC = (props) => { +const LayoutHeader: React.FC = props => { const context = React.useContext(CustomProvider) || {} const { @@ -276,6 +277,7 @@ const LayoutHeader: React.FC = (props) => { homepage, useSafeArea, tabs, + hideInMini, ...otherProps } = props @@ -304,6 +306,11 @@ const LayoutHeader: React.FC = (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 index 9a434e26..85396889 100644 --- 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 index 0fa807f8..35d95e1c 100644 --- a/wiki_src/src/pages/layout.tsx +++ b/wiki_src/src/pages/layout.tsx @@ -398,6 +398,12 @@ export default Demo false +hideInMini +在 小程序 中隐藏自身 +Boolean +false + + borderType 头部下方是使用阴影、线或是没有 border、shadow、none From b531db383639718b9f19c4dce42b0e90d4415fd5 Mon Sep 17 00:00:00 2001 From: liuxingyun Date: Tue, 20 Apr 2021 15:11:56 +0800 Subject: [PATCH 2/2] 2.4.31 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1c42bbc..ea5e6658 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "auto-ui", - "version": "2.4.30", + "version": "2.4.31", "description": "auto ui components", "main": "es/index", "typings": "es/index",