@yorkjs/hive-ui 0.0.5 → 0.0.7

package/package.json

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

package/src/index.ts

@@ -5,4 +5,4 @@ export { default as Checkbox } from './components/Checkbox'
 export { default as Tag } from './components/Tag'
 
 export { default as FlowItem } from './item/FlowItem'
-export { default as ProductCard } from './item/ProductCard'
+export { default as ProductItem } from './item/ProductItem'

package/src/item/{ProductCard → ProductItem}/index.module.styl

@@ -13,11 +13,19 @@ $F_BUY_COUNT = 14PX    // RN 14
 
 .item-container
   position relative
-  display flex
-  flex-direction column
-  padding 15PX 10PX    // 对齐 RN: paddingVertical: 15, paddingHorizontal: 10
   background-color var(--containerCard)
+  padding 0 10PX
   box-sizing border-box
+  &.show-bottom-border
+    halfBorder(bottom, var(--lineBorder))
+
+.card-info
+  display flex
+  flex-direction column
+  width 100%
+  padding 15PX 0
+  &.show-separator
+    halfBorder(bottom, var(--lineBorder))
 
 .card-main-body
   display flex
@@ -254,5 +262,4 @@ $F_BUY_COUNT = 14PX    // RN 14
   color var(--textContent)
 
 .card-footer
-  width 100%
-  margin-top 12PX
+  width 100%

package/src/item/{ProductCard → ProductItem}/index.tsx

@@ -73,6 +73,10 @@ export interface IProductCardProps {
   customization?: string
   /** 做法描述最大显示行数 (默认3) */
   customizationMaxLines?: number
+  /** 套餐信息描述 */
+  combo? : string
+  /** 套餐描述最大显示行数 (默认3) */
+  comboMaxLines?: number
   /** 售价 */
   salePrice: string | number
   /** 原价 (划线价) */
@@ -95,6 +99,10 @@ export interface IProductCardProps {
   action?: React.ReactNode
   /** 国际化标签注入 */
   labels?: IProductCardLabels
+  /** 是否显示底部分边框 */
+  showBottomBorder?: boolean
+  /** 是否显示底部分割线 */
+  showSeparator?: boolean
   // 卡片点击事件
   onClick?: () => void
   children?: React.ReactNode
@@ -114,7 +122,7 @@ const DEFAULT_LABELS: IProductCardLabels = {
   offline: '已下架'
 }
 
-const ProductCard: React.FC<IProductCardProps> = (props) => {
+const ProductItem: React.FC<IProductCardProps> = (props) => {
   const {
     image,
     title,
@@ -130,6 +138,8 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     deliveryTypes = [],
     customization,
     customizationMaxLines = 3,
+    combo,
+    comboMaxLines = 3,
     salePrice,
     originalPrice,
     buyCount,
@@ -143,6 +153,8 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     onDelete,
     action,
     className,
+    showBottomBorder = false,
+    showSeparator = false,
     labels: customLabels,
     onClick,
     children
@@ -254,139 +266,167 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
   }, [stockCount, saleCount, labels])
 
   return (
-    <View className={formatClassNames(styles['item-container'], className)} onClick={handleCardClick}>
-      <View className={styles['card-main-body']}>
-        {showCheckbox && (
-          <View className={styles['checkbox-container']}>
-            <Checkbox
-              checked={checkboxChecked}
-              disabled={checkboxDisabled}
-              readOnly
-            />
-          </View>
-        )}
-        <View className={styles['image-container']}>
-          <Image
-            src={image?.url}
-            className={styles['product-image']}
-            mode='aspectFill'
-          />
-          {(showSoldOut || showOffline) && (
-            <View className={styles['status-overlay']}>
-              <Text className={styles['status-text']}>
-                {showSoldOut ? labels.sold_out : labels.offline}
-              </Text>
+    <View
+      className={formatClassNames(
+        styles['item-container'],
+        {
+          [styles['show-bottom-border']]: showBottomBorder,
+        },
+        className
+      )}
+      onClick={handleCardClick}
+    >
+      <View className={formatClassNames(
+        styles['card-info'],
+        {
+          [styles['show-separator']]: showSeparator
+        }
+      )}>
+        <View className={styles['card-main-body']}>
+          {showCheckbox && (
+            <View className={styles['checkbox-container']}>
+              <Checkbox
+                checked={checkboxChecked}
+                disabled={checkboxDisabled}
+                readOnly
+              />
             </View>
           )}
-        </View>
-        <View className={styles['content-container']}>
-          <View className={styles['content-body']}>
-            <View className={styles['title-row']} style={{ marginRight: showDelete ? '30PX' : '0' }}>
-              {productTypeTag}
-              <Text className={styles['title']} style={{ WebkitLineClamp: titleMaxLines }}>{title}</Text>
-            </View>
-            {(showMultipleSpec || stockCount || saleCount || barcode) && (
-              <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']} />}
-                  {barcode && <Text className={styles['info-text']}>{labels.barcode_label} {barcode}</Text>}
-                </View>
-              </ScrollView>
-            )}
-            {(activityType || deliveryTags) && (
-              <View className={styles['tag-row']}>
-                {activityType && labels.activity_type && (
-                  <View className={styles['activity-tag']}>
-                    {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && <View className={styles['activity-tag-badge']}><Text className={styles['activity-tag-badge-text']}>{labels.present_badge}</Text></View>}
-                    <View className={styles['activity-tag-content']}>
-                      <Text className={styles['activity-tag-text']}>
-                        {activityType === PROMOTION_ACTIVITY_TYPE_FLASH && labels.activity_type.flash}
-                        {activityType === PROMOTION_ACTIVITY_TYPE_BRAND && labels.activity_type.brand}
-                        {activityType === PROMOTION_ACTIVITY_TYPE_HOT && labels.activity_type.hot}
-                        {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && labels.activity_type.present}
-                      </Text>
-                    </View>
-                  </View>
-                )}
-                {deliveryTags}
+          <View className={styles['image-container']}>
+            <Image
+              src={image?.url}
+              className={styles['product-image']}
+              mode='aspectFill'
+            />
+            {(showSoldOut || showOffline) && (
+              <View className={styles['status-overlay']}>
+                <Text className={styles['status-text']}>
+                  {showSoldOut ? labels.sold_out : labels.offline}
+                </Text>
               </View>
             )}
-            {
-              spec
-              ? (
-                <Text
-                  className={styles['spec-text']}
-                  style={{ WebkitLineClamp: specMaxLines }}
-                >
-                  {labels.spec_label}：{spec}
-                </Text>
-              )
-              : undefined
-            }
-            {
-              customization
-              ? (
-                <Text
-                  className={styles['customization-text']}
-                  style={{ WebkitLineClamp: customizationMaxLines }}
-                >
-                  {customization}
-                </Text>
-              )
-              : undefined
-            }
           </View>
-          <View className={styles['content-bottom']}>
-            <View className={styles['price-container']}>
-              <View className={styles['price-row']}>
-                <Text className={styles['price-symbol']}>
-                  ¥
-                </Text>
-                <Text className={styles['price-value']}>
-                  {salePrice}
-                </Text>
+          <View className={styles['content-container']}>
+            <View className={styles['content-body']}>
+              <View className={styles['title-row']} style={{ marginRight: showDelete ? '30PX' : '0' }}>
+                {productTypeTag}
+                <Text className={styles['title']} style={{ WebkitLineClamp: titleMaxLines }}>{title}</Text>
               </View>
+              {(showMultipleSpec || stockCount || saleCount || barcode) && (
+                <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']} />}
+                    {barcode && <Text className={styles['info-text']}>{labels.barcode_label} {barcode}</Text>}
+                  </View>
+                </ScrollView>
+              )}
+              {(activityType || deliveryTags) && (
+                <View className={styles['tag-row']}>
+                  {activityType && labels.activity_type && (
+                    <View className={styles['activity-tag']}>
+                      {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && <View className={styles['activity-tag-badge']}><Text className={styles['activity-tag-badge-text']}>{labels.present_badge}</Text></View>}
+                      <View className={styles['activity-tag-content']}>
+                        <Text className={styles['activity-tag-text']}>
+                          {activityType === PROMOTION_ACTIVITY_TYPE_FLASH && labels.activity_type.flash}
+                          {activityType === PROMOTION_ACTIVITY_TYPE_BRAND && labels.activity_type.brand}
+                          {activityType === PROMOTION_ACTIVITY_TYPE_HOT && labels.activity_type.hot}
+                          {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && labels.activity_type.present}
+                        </Text>
+                      </View>
+                    </View>
+                  )}
+                  {deliveryTags}
+                </View>
+              )}
               {
-                originalPrice
+                spec
                 ? (
-                  <Text className={styles['original-price']}>
-                    ¥{originalPrice}
+                  <Text
+                    className={styles['spec-text']}
+                    style={{ WebkitLineClamp: specMaxLines }}
+                  >
+                    {labels.spec_label}：{spec}
                   </Text>
                 )
                 : undefined
               }
-            </View>
-            <View
-              className={styles['action-area']}
-            >
               {
-                buyCount
+                customization
                 ? (
-                  <Text className={styles['buy-count-value']}>
-                    x{buyCount}
+                  <Text
+                    className={styles['customization-text']}
+                    style={{ WebkitLineClamp: customizationMaxLines }}
+                  >
+                    {customization}
                   </Text>
                 )
-                : action
+                : undefined
               }
+              {
+                combo
+                ? (
+                  <Text
+                    className={styles['customization-text']}
+                    style={{ WebkitLineClamp: comboMaxLines }}
+                  >
+                    {combo}
+                  </Text>
+                )
+                : undefined
+              }
+            </View>
+            <View className={styles['content-bottom']}>
+              <View className={styles['price-container']}>
+                <View className={styles['price-row']}>
+                  <Text className={styles['price-symbol']}>
+                    ¥
+                  </Text>
+                  <Text className={styles['price-value']}>
+                    {salePrice}
+                  </Text>
+                </View>
+                {
+                  originalPrice
+                  ? (
+                    <Text className={styles['original-price']}>
+                      ¥{originalPrice}
+                    </Text>
+                  )
+                  : undefined
+                }
+              </View>
+              <View
+                className={styles['action-area']}
+              >
+                {
+                  buyCount
+                  ? (
+                    <Text className={styles['buy-count-value']}>
+                      x{buyCount}
+                    </Text>
+                  )
+                  : action
+                }
+              </View>
             </View>
           </View>
         </View>
+        {
+          children
+          ? (
+            <View
+              className={styles['card-footer']}
+              onClick={e => e.stopPropagation()}
+            >
+              {children}
+            </View>
+          )
+          : undefined
+        }
       </View>
-      {
-        children
-        ? (
-          <View
-            className={styles['card-footer']}
-            onClick={e => e.stopPropagation()}
-          >
-            {children}
-          </View>
-        )
-        : undefined
-      }
       {
         showDelete
         ? (
@@ -410,4 +450,4 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
   )
 }
 
-export default React.memo(ProductCard)
+export default React.memo(ProductItem)