Merge pull request #6 from handsomeliuyang/release-3.6.8-app-kxj

完成RootPortal组件与吸顶布局组件（StickyHeader、StickySection）开发

Author: handsomeliuyang

examples/mini-program-example/src/pages/index/index.tsx

@@ -1,5 +1,5 @@
-import {View, Text,Image,GridView,ListView} from '@tarojs/components'
-import {useLoad} from '@tarojs/taro'
+import { View, Text, Image, GridView, ListView, RootPortal, StickyHeader, StickySection } from '@tarojs/components'
+import { useLoad } from '@tarojs/taro'
 import './index.scss'
 
 const grid_data = [
@@ -39,9 +39,29 @@ export default function Index() {
     <View className='index'>
       <Text>Hello world!</Text>
 
-      <GridView columnNum={3} data={grid_data} columnItem={(childItem, i,index) => (
+      <RootPortal enable={false} style={{
+        position: 'absolute',
+        background: '#212121',
+        width: '80%',
+        left: '10%',
+        top: '50%',
+        borderRadius: '20px',
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
+        <Text>Hello RootPortal!</Text>
+        <Text>Hello RootPortal!</Text>
+      </RootPortal>
+      <StickyHeader>
+        <StickySection style={{background: '#aaaaaa'}}>
+          吸顶布局容器测试
+        </StickySection>
+      </StickyHeader>
 
-        <View key={`grid-group-item-${index}`} onClick={() => ( console.log("childItem "+childItem.value+" i "+i+" index "+index) )}>
+      <GridView columnNum={3} data={grid_data} columnItem={(childItem, i, index) => (
+
+        <View key={`grid-group-item-${index}`}
+              onClick={() => (console.log('childItem ' + childItem.value + ' i ' + i + ' index ' + index))}>
           {childItem.image && (
             <Image
               src={childItem.image}
@@ -53,11 +73,11 @@ export default function Index() {
           </Text>
         </View>
 
-      )}/>
+      )} />
 
       <ListView orientation={'vertical'} data={grid_data} columnItem={(childItem, i) => (
 
-        <View key={`list-group-item-${i}`} onClick={() => ( console.log("childItem "+childItem.value+" i "+i) )}>
+        <View key={`list-group-item-${i}`} onClick={() => (console.log('childItem ' + childItem.value + ' i ' + i))}>
           {childItem.image && (
             <Image
               src={childItem.image}
@@ -69,7 +89,7 @@ export default function Index() {
           </Text>
         </View>
 
-      )}/>
+      )} />
 
     </View>
   )

packages/taro-components-mpharmony/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './block/block'
 export * from './grid/grid'
 export * from './list/list'
+export * from './root-portal/root-portal'

packages/taro-components-mpharmony/src/components/root-portal/root-portal.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'preact/compat'
+import React, { CSSProperties, ReactNode } from 'react'
+
+interface Props {
+  enable?: boolean
+  style?: CSSProperties | undefined
+  children?: ReactNode | undefined
+}
+
+export const RootPortal: FC<Props> = ({ enable = true, style, children }: Props) => {
+  return <div
+    style={enable ? { position: 'fixed', width: '100%', height: '100%' } : { position: 'static' }}>
+    {style ? <div style={style}>{children}</div> : children}
+  </div>
+}

packages/taro-components-mpharmony/src/components/sticky-header/sticky-header.tsx

@@ -0,0 +1,15 @@
+import { StickyHeaderProps } from '@tarojs/components/dist/types/StickyHeader'
+import React, { FC } from 'react'
+
+export const StickyHeader: FC<StickyHeaderProps> = ({ className, children, hidden = false }) => {
+
+  return <div className={className} style={{
+    display: 'flex',
+    position: 'sticky',
+    left: 0,
+    top: 0,
+    flexDirection: 'column'
+  }} hidden={hidden}>
+    {children}
+  </div>
+}

packages/taro-components-mpharmony/src/components/sticky-section/sticky-section.tsx

@@ -0,0 +1,6 @@
+import { StickySectionProps } from '@tarojs/components/dist/types/StickySection'
+import React, { FC } from 'react'
+
+export const StickySection: FC<StickySectionProps> = ({ children, style, className }) => {
+  return <div style={typeof style === 'string' ? {} : style} className={className}>{children}</div>
+}

packages/taro-components-mpharmony/src/index.ts

@@ -50,7 +50,6 @@ export { default as PullDownRefresh } from '@tarojs/components-react/dist/compon
 export { PullToRefresh } from '@tarojs/components/lib/react'
 export { Radio, RadioGroup } from '@tarojs/components/lib/react'
 export { RichText } from '@tarojs/components/lib/react'
-export { RootPortal } from '@tarojs/components/lib/react'
 export { RtcRoom, RtcRoomItem } from '@tarojs/components/lib/react'
 export { default as ScrollView } from '@tarojs/components-react/dist/components/scroll-view'
 export { ShareElement } from '@tarojs/components/lib/react'
@@ -69,3 +68,6 @@ export { WebView } from '@tarojs/components/lib/react'
 export * from './components/block/block'
 export * from './components/grid/grid'
 export * from './components/list/list'
+export * from './components/root-portal/root-portal'
+export * from './components/sticky-header/sticky-header'
+export * from './components/sticky-section/sticky-section'