@yorkjs/hive-ui 2.0.0 → 2.0.2

package/package.json

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

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

@@ -1,20 +1,25 @@
 @import '../../styles/mixin.styl'
 @import '../../styles/variable.styl'
 
-.card
+.card-container
   border-radius 10PX
   overflow hidden
   background-color var(--containerCard)
   margin-left $WING_BLANK
   margin-right $WING_BLANK
-  transition background-color 0.1s
   &.show-top-gutter
     margin-top $GUTTER_BLANK
   &.show-bottom-gutter
     margin-bottom $GUTTER_BLANK
   &.show-top-blank
     margin-top $CARD_BLANK
-  &.is-clickable
-    cursor pointer
-    &:active
-      background-color rgba(0, 0, 0, 0.03)
+
+  :global
+    .card-inner
+      background-color var(--containerCard)
+      transition background-color 0.1s
+
+      &.is-clickable
+        cursor pointer
+        &:active
+          background-color rgba(0, 0, 0, 0.03)

package/src/components/Card/index.tsx

@@ -5,6 +5,7 @@ import { formatClassNames } from '../../util/function'
 import styles from './index.module.styl'
 
 export interface CardProps {
+  warpClassName?: string
   className?: string
   showTopGutter?: boolean
   showBottomGutter?: boolean
@@ -14,36 +15,46 @@ export interface CardProps {
   onClick?: () => void
 }
 
-const CellCard: React.FC<CardProps> = ({
+const Card: React.FC<CardProps> = ({
   showTopGutter = false,
   showBottomGutter = false,
   showTopBlank = false,
   clickable,
   onClick,
+  warpClassName,
   className,
   children
 }) => {
   const isClickable = clickable !== undefined ? clickable : !!onClick
 
-  const combinedClass = formatClassNames(
-    styles['card'],
+  const containerClass = formatClassNames(
+    styles['card-container'],
     {
-      [styles['is-clickable']]: isClickable,
       [styles['show-top-gutter']]: showTopGutter,
       [styles['show-bottom-gutter']]: showBottomGutter,
       [styles['show-top-blank']]: showTopBlank,
     },
+    warpClassName
+  )
+
+  const innerClass = formatClassNames(
+    'card-inner',
+    {
+      'is-clickable': isClickable,
+    },
     className
   )
 
   return (
-    <View
-      className={combinedClass}
-      onClick={onClick}
-    >
-      {children}
+    <View className={containerClass}>
+      <View
+        className={innerClass}
+        onClick={onClick}
+      >
+        {children}
+      </View>
     </View>
   )
 }
 
-export default CellCard
+export default Card

package/src/item/ProductItem/ProductItem.tsx

@@ -194,7 +194,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
         <Tag
           type='light-warning'
           text={item.text}
-          className={styles['product-tag']}
+          className="product-tag"
           style={{ backgroundColor: item.color, color: '#fff' }}
         />
       </View>
@@ -232,7 +232,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
           key={type}
           text={tagProps.text}
           style={{ color: tagProps.color, backgroundColor: tagProps.bg, borderColor: tagProps.color }}
-          className={styles['delivery-tag']}
+          className="delivery-tag"
         />
       )
     })
@@ -434,7 +434,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
             <Icon
               name='trash'
               size={13}
-              className={styles['delete-icon']}
+              className="delete-icon"
             />
           </View>
         )

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

@@ -97,13 +97,13 @@ $F_BUY_COUNT = 14PX    // RN 14
   margin-right 5PX
   flex-shrink 0
   line-height 1
-
-.product-tag
-  height 15PX
-  line-height 15PX
-  padding 1PX 3PX
-  border-radius 3PX
-  font-size 10PX
+  :global
+    .product-tag
+      height 15PX
+      line-height 15PX
+      padding 1PX 3PX
+      border-radius 3PX
+      font-size 10PX
 
 .title
   flex 1
@@ -156,13 +156,13 @@ $F_BUY_COUNT = 14PX    // RN 14
   flex-wrap wrap
   gap 5PX
   margin-top 5PX
-
-.delivery-tag
-  padding 1PX 5PX
-  border-radius 3PX
-  font-size $F_TAG_NORMAL
-  height 15PX
-  line-height 15PX
+  :global
+    .delivery-tag
+      padding 1PX 5PX
+      border-radius 3PX
+      font-size $F_TAG_NORMAL
+      height 15PX
+      line-height 15PX
 
 .activity-tag
   display flex
@@ -257,9 +257,9 @@ $F_BUY_COUNT = 14PX    // RN 14
   right 11PX
   padding 5PX
   z-index 10
-
-.delete-icon
-  color var(--textContent)
+  :global
+    .delete-icon
+      color var(--textContent)
 
 .card-footer
   width 100%