Merge pull request #4 from handsomeliuyang/f-3.6.8-compoment-hzp

F 3.6.8 compoment hzp
PengBoUESTC · Jun 26, 2023 · 21a723d · 21a723d
2 parents c3f0de0 + 1619a34
commit 21a723d
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx
@@ -1,7 +1,7 @@
 import {View, Text,Image} from '@tarojs/components'
 import {useLoad} from '@tarojs/taro'
 import './index.scss'
-import {TestBlock, GridView} from "@tarojs/components-mpharmony";
+import {TestBlock, GridView,ListView} from "@tarojs/components-mpharmony";
 
 const grid_data = [
   {
@@ -41,9 +41,9 @@ export default function Index() {
       <Text>Hello world!</Text>
       <TestBlock><Text>Hello world!</Text></TestBlock>
 
-      <GridView columnNum={3} data={grid_data} columnItem={(childItem, index) => (
+      <GridView columnNum={3} data={grid_data} columnItem={(childItem, i,index) => (
 
-        <View key={`grid-group-item-${index}`} onClick={() => ( console.log("childItem "+childItem.value+" index "+index) )}>
+        <View key={`grid-group-item-${index}`} onClick={() => ( console.log("childItem "+childItem.value+" i "+i+" index "+index) )}>
           {childItem.image && (
             <Image
               src={childItem.image}
@@ -56,6 +56,23 @@ export default function Index() {
         </View>
 
       )}/>
+
+      <ListView orientation={'vertical'} data={grid_data} columnItem={(childItem, i) => (
+
+        <View key={`list-group-item-${i}`} onClick={() => ( console.log("childItem "+childItem.value+" i "+i+" index "+index) )}>
+          {childItem.image && (
+            <Image
+              src={childItem.image}
+              mode='scaleToFill'
+            />
+          )}
+          <Text>
+            {childItem.value}
+          </Text>
+        </View>
+
+      )}/>
+
     </View>
   )
 }
diff --git a/packages/taro-components-mpharmony/src/components/grid/grid.tsx b/packages/taro-components-mpharmony/src/components/grid/grid.tsx
@@ -3,7 +3,7 @@ import './style/index.css'
 import React, { PureComponent } from 'react'
 
 interface Props {
-  columnItem: (childItem: any, index: number) => React.ReactNode
+  columnItem: (childItem: any, i: number, index: number) => React.ReactNode
   className?: string
   data: []
   columnNum: number
@@ -40,9 +40,9 @@ export class GridView extends PureComponent<Props> {
     return (
       <div className={this.props.className}>
         {gridGroup.map((item, i) => (
-          <div className='grid_flex' key={`grid-group-${i}`}>
+          <div style={{ display: 'flex' }} key={`grid-group-${i}`}>
             {item.map((childItem, index) => (
-              this.props.columnItem(childItem, index)
+              this.props.columnItem(childItem, i, index)
             ))}
           </div>
         ))}

diff --git a/packages/taro-components-mpharmony/src/components/index.ts b/packages/taro-components-mpharmony/src/components/index.ts
@@ -1,2 +1,3 @@
 export * from './block/block'
 export * from './grid/grid'
+export * from './list/list'
diff --git a/packages/taro-components-mpharmony/src/components/list/list.tsx b/packages/taro-components-mpharmony/src/components/list/list.tsx
@@ -0,0 +1,27 @@
+
+import React, { PureComponent } from 'react'
+
+interface Props {
+  columnItem: (childItem: any, i: number) => React.ReactNode
+  className?: string
+  orientation: 'horizontal'|'vertical'
+  data: []
+  columnNum: number
+}
+
+export class ListView extends PureComponent<Props> {
+  context: unknown
+  readonly props: Readonly<Props>
+  refs: { [p: string]: React.ReactInstance }
+
+  render (): React.ReactNode {
+    const displayStyle = this.props.orientation === 'horizontal' ? 'flex' : 'block'
+    return (
+      <div className={this.props.className} style={{ display: displayStyle }}>
+        {this.props.data.map((item, i) => (
+          this.props.columnItem(item, i)
+        ))}
+      </div>
+    )
+  }
+}
diff --git a/packages/taro-components-mpharmony/src/index.ts b/packages/taro-components-mpharmony/src/index.ts
@@ -68,3 +68,4 @@ export { VoipRoom } from '@tarojs/components/lib/react'
 export { WebView } from '@tarojs/components/lib/react'
 export * from './components/block/block'
 export * from './components/grid/grid'
+export * from './components/list/list'