@yorkjs/hive-ui 2.3.2 → 2.3.3

package/package.json

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

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%