@yorkjs/hive-ui 2.3.2 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/components/StatsCard/index.module.styl

@@ -0,0 +1,42 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.stats-card
+  padding 15PX 12PX
+
+  .card-title
+    margin-bottom 16PX
+    font-size 16PX
+    font-weight bold
+    color var(--textTitle)
+    line-height 22PX
+    lineClamp(1)
+
+  .stats-row
+    display flex
+    align-items center
+    justify-content space-between
+
+  .stat-item
+    display flex
+    flex-direction column
+    align-items center
+
+  .stat-value
+    font-size 14PX
+    font-weight bold
+    color var(--primary)
+    line-height 20PX
+
+  .stat-label
+    margin-top 5PX
+    font-size 12PX
+    color var(--textContent)
+    line-height 17PX
+    lineClamp(1)
+
+  .stat-divider
+    width 1PX
+    height 38PX
+    flex-shrink 0
+    halfBorder(left, var(--lineBorder))

package/src/components/StatsCard/index.tsx

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import Card from '../Card'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface StatsCardItem {
+  /** 统计项唯一标识 */
+  key: string | number
+  /** 统计数值 */
+  value: React.ReactNode
+  /** 统计项名称 */
+  label: React.ReactNode
+}
+
+export interface StatsCardProps {
+  /** 卡片标题，不传则不显示标题区域 */
+  title?: React.ReactNode
+  /** 统计项列表 */
+  items: StatsCardItem[]
+  /** 自定义类名 */
+  className?: string
+  /** 是否显示顶部间距 */
+  showTopGutter?: boolean
+  /** 是否显示底部间距 */
+  showBottomGutter?: boolean
+}
+
+/** 展示标题和横向统计数据的卡片 */
+const StatsCard: React.FC<StatsCardProps> = ({
+  title,
+  items,
+  className,
+  showTopGutter = false,
+  showBottomGutter = false,
+}) => (
+  <Card
+    className={formatClassNames(
+      styles['stats-card'],
+      className
+    )}
+    showTopGutter={showTopGutter}
+    showBottomGutter={showBottomGutter}
+  >
+    {title !== undefined && title !== null && (
+      <View className={styles['card-title']}>
+        {typeof title === 'string' ? <Text>{title}</Text> : title}
+      </View>
+    )}
+    <View className={styles['stats-row']}>
+      {items.map((item, index) => (
+        <Fragment key={item.key}>
+          {index > 0 && <View className={styles['stat-divider']} />}
+          <View className={styles['stat-item']}>
+            <View className={styles['stat-value']}>
+              {typeof item.value === 'string' || typeof item.value === 'number'
+                ? <Text>{item.value}</Text>
+                : item.value}
+            </View>
+            <View className={styles['stat-label']}>
+              {typeof item.label === 'string' || typeof item.label === 'number'
+                ? <Text>{item.label}</Text>
+                : item.label}
+            </View>
+          </View>
+        </Fragment>
+      ))}
+    </View>
+  </Card>
+)
+
+export default StatsCard

package/src/index.ts

@@ -15,6 +15,7 @@ export { default as Alert } from './components/Alert'
 export { default as Switch } from './components/Switch'
 export { default as SimpleModal } from './components/SimpleModal'
 export { default as Progress } from './components/Progress'
+export { default as StatsCard, type StatsCardItem, type StatsCardProps } from './components/StatsCard'
 
 export { default as FlowItem } from './item/FlowItem'
 export { default as ListItem } from './item/ListItem'
@@ -34,4 +35,4 @@ export {
   type RichTextImageBlock,
   type RichTextAlign,
   type RichTextBlockType,
-} from './components/RichTextEditor'
+} from './components/RichTextEditor'

package/src/item/ProductItem/ProductItem.tsx

@@ -267,6 +267,25 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     )
   }, [stockCount, saleCount, labels])
 
+  const remainingElem = useMemo(() => {
+    if (remainingCount == null || remainingCount === '') return null
+    return (
+      <View className={styles['remaining-box']}>
+        <Text className={styles['info-text']}>{labels.remaining_label}</Text>
+        <Text className={styles['remaining-value']}>{remainingCount}</Text>
+        {
+          remainingTotal != null && remainingTotal !== ''
+          ? (
+            <Text className={styles['remaining-total']}>
+              /{remainingTotal}
+            </Text>
+          )
+          : undefined
+        }
+      </View>
+    )
+  }, [remainingCount, remainingTotal, labels])
+
   return (
     <View
       className={formatClassNames(
@@ -314,13 +333,15 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
                 {productTypeTag}
                 <Text className={styles['title']} style={{ WebkitLineClamp: titleMaxLines }}>{title}</Text>
               </View>
-              {(showMultipleSpec || stockCount || saleCount || barcode) && (
+              {(showMultipleSpec || stockCount || saleCount || barcode || remainingElem) && (
                 <ScrollView scrollX className={styles['second-row']} showScrollbar={false}>
                   <View className={styles['second-row-inner']}>
                     {showMultipleSpec && <Text className={styles['primary-text']}>{labels.multiple_spec}</Text>}
                     {showMultipleSpec && stockAndSaleElem && <View className={styles['info-line']} />}
                     {stockAndSaleElem}
-                    {((showMultipleSpec || stockAndSaleElem) && barcode) && <View className={styles['info-line']} />}
+                    {(showMultipleSpec || stockAndSaleElem) && remainingElem && <View className={styles['info-line']} />}
+                    {remainingElem}
+                    {((showMultipleSpec || stockAndSaleElem || remainingElem) && barcode) && <View className={styles['info-line']} />}
                     {barcode && <Text className={styles['info-text']}>{labels.barcode_label} {barcode}</Text>}
                   </View>
                 </ScrollView>
@@ -357,29 +378,6 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
                 )
                 : undefined
               }
-              {
-                remainingCount != null && remainingCount !== ''
-                ? (
-                  <View className={styles['remaining-row']}>
-                    <Text className={styles['remaining-label']}>
-                      {labels.remaining_label}：
-                    </Text>
-                    <Text className={styles['remaining-value']}>
-                      {remainingCount}
-                    </Text>
-                    {
-                      remainingTotal != null && remainingTotal !== ''
-                      ? (
-                        <Text className={styles['remaining-total']}>
-                          /{remainingTotal}
-                        </Text>
-                      )
-                      : undefined
-                    }
-                  </View>
-                )
-                : undefined
-              }
               {
                 customization
                 ? (
@@ -482,4 +480,4 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
   )
 }
 
-export default React.memo(ProductItem)
+export default React.memo(ProductItem)

package/src/item/ProductItem/index.module.styl

@@ -205,26 +205,19 @@ $F_BUY_COUNT = 14PX    // RN 14
   margin-top 5PX
   lineClamp(1)
 
-.remaining-row
+.remaining-box
   display flex
   flex-direction row
-  align-items baseline
-  margin-top 5PX
-
-.remaining-label
-  font-size $F_SPEC
-  color var(--textContent)
-  line-height 15PX
+  align-items center
 
 .remaining-value
-  font-size $F_SPEC
+  font-size $F_INFO
   color var(--primary)
-  line-height 15PX
+  margin-left 5PX
 
 .remaining-total
-  font-size $F_SPEC
-  color var(--textContent)
-  line-height 15PX
+  font-size $F_INFO
+  color var(--textTitle)
 
 .customization-text
   font-size $F_CUSTOM
@@ -283,4 +276,4 @@ $F_BUY_COUNT = 14PX    // RN 14
       color var(--textContent)
 
 .card-footer
-  width 100%
+  width 100%