@yorkjs/hive-ui 0.1.0 → 0.1.2

package/package.json

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

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

@@ -72,6 +72,7 @@ $DESC_FONT_SIZE = 13PX
     align-items center
 
   .title-section
+    display flex
     flex-shrink 0
     margin-right 10PX
 

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

@@ -0,0 +1,60 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+$CELL_PADDING_VERTICAL = 14PX
+
+.field-card-container
+  border-radius 10PX
+  background-color var(--containerCard)
+  overflow hidden
+
+.card-head-wrapper
+  padding 0PX $CELL_PADDING_VERTICAL
+
+.card-header
+  display flex
+  flex-direction row
+  align-items center
+  justify-content space-between
+  padding 13PX 0PX
+  position relative
+  halfBorder(bottom, var(--lineBorder))
+
+  .header-left
+    flex 1
+    display flex
+    flex-direction row
+    align-items center
+    min-width 0
+
+    .header-title
+      color var(--textTitle)
+      font-size 14PX
+      line-height 1
+      lineClamp(1)
+
+    .edit-icon-wrapper
+      margin-left 2PX
+      display flex
+      align-items center
+      justify-content center
+      border-radius 4PX
+      transition background-color 0.2s
+
+      &:active
+        background-color rgba(0, 0, 0, 0.05)
+
+      .edit-icon
+        color var(--textMuted)
+
+  .header-extra
+    margin-left 12PX
+    flex-shrink 0
+    display flex
+    align-items center
+
+    .action-text
+      color var(--primary)
+      font-size 13PX
+      &:active
+        opacity 0.6

package/src/components/FieldCard/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { View, Text, ITouchEvent } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+import Icon from '../Icon'
+import styles from './index.module.styl'
+
+export interface FieldCardProps {
+  /** 标题内容：支持字符串或自定义 DOM */
+  title: React.ReactNode
+  /** 是否显示标题旁的编辑小图标 */
+  showEditIcon?: boolean
+  /** 点击编辑图标的回调 */
+  onEditClick?: (e: ITouchEvent) => void
+  /** 右侧动作区域：支持字符串、Icon 或自定义节点 */
+  extra?: React.ReactNode
+  /** 点击右侧 extra 区域的回调 (会自动阻止冒泡) */
+  onExtraClick?: (e: ITouchEvent) => void
+  /** 子组件 */
+  children?: React.ReactNode
+  /** 外部样式 */
+  className?: string
+}
+
+const FieldCard: React.FC<FieldCardProps> = (props) => {
+  const {
+    title,
+    showEditIcon = false,
+    onEditClick,
+    extra,
+    onExtraClick,
+    children,
+    className
+  } = props
+
+  const handleEditClick = (e: ITouchEvent) => {
+    if (onEditClick) {
+      e.stopPropagation()
+      onEditClick(e)
+    }
+  }
+
+  const handleExtraClick = (e: ITouchEvent) => {
+    if (onExtraClick) {
+      e.stopPropagation()
+      onExtraClick(e)
+    }
+  }
+
+  return (
+    <View className={formatClassNames(styles['field-card-container'], className)}>
+      <View className={styles['card-head-wrapper']}>
+        <View className={styles['card-header']}>
+          <View className={styles['header-left']}>
+            {
+              typeof title === 'string'
+              ? (
+                <Text className={styles['header-title']}>{title}</Text>
+              )
+              : (
+                title
+              )
+            }
+
+            {showEditIcon && (
+              <View className={styles['edit-icon-wrapper']} onClick={handleEditClick}>
+                <Icon
+                  name='edit'
+                  size={14}
+                  className={styles['edit-icon']}
+                />
+              </View>
+            )}
+          </View>
+
+          {extra && (
+            <View className={styles['header-extra']} onClick={handleExtraClick}>
+              {
+                typeof extra === 'string' ? (
+                  <Text
+                    className={styles['action-text']}
+                  >
+                    {extra}
+                  </Text>
+                )
+                : (
+                  extra
+                )
+              }
+            </View>
+          )}
+        </View>
+      </View>
+
+      <View className={styles['card-content']}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export default FieldCard

package/src/constant/mall.ts

@@ -19,4 +19,6 @@ export const PROMOTION_ACTIVITY_TYPE_BRAND = 2
 // 热点活动
 export const PROMOTION_ACTIVITY_TYPE_HOT   = 3
 //买赠活动
-export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4
+export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4
+// 满减折扣
+export const PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT = 5

package/src/index.ts

@@ -5,6 +5,7 @@ export { default as Cell, setCellConfig } from './components/Cell'
 export { default as Icon } from './components/Icon'
 export { default as Checkbox } from './components/Checkbox'
 export { default as Tag } from './components/Tag'
+export { default as FieldCard } from './components/FieldCard'
 
 export { default as FlowItem } from './item/FlowItem'
 export { default as ProductItem, setProductItemConfig } from './item/ProductItem'

package/src/item/ProductItem/ProductItem.tsx

@@ -19,6 +19,7 @@ import {
   PROMOTION_ACTIVITY_TYPE_BRAND,
   PROMOTION_ACTIVITY_TYPE_HOT,
   PROMOTION_ACTIVITY_TYPE_PRESENT,
+  PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT,
 } from '../../constant/mall'
 import { getProductItemConfig } from './config'
 
@@ -27,7 +28,7 @@ import styles from './index.module.styl'
 export interface IProductCardLabels {
   product_type?: { real: string; virtual: string; service: string }
   delivery_type?: { dine: string; self_pickup: string; delivery: string }
-  activity_type?: { flash: string; brand: string; hot: string; present: string }
+  activity_type?: { flash: string; brand: string; hot: string; present: string; full_discount: string }
   present_badge?: string
   stock_label?: string
   sale_label?: string
@@ -321,6 +322,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
                           {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}
+                          {activityType === PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT && labels.activity_type.full_discount}
                         </Text>
                       </View>
                     </View>

package/src/item/ProductItem/config.ts

@@ -16,7 +16,8 @@ let globalLabels: IProductCardLabels = {
     flash: '秒杀活动',
     brand: '品牌活动',
     hot: '热点活动',
-    present: '买赠活动'
+    present: '买赠活动',
+    full_discount: '满件折扣'
   },
   present_badge: '赠',
   stock_label: '库存',