@yorkjs/hive-ui 0.0.9 → 0.1.1

package/package.json

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

package/src/components/Cell/Cell.tsx

@@ -79,72 +79,84 @@ const Cell: React.FC<CellProps> = (props) => {
   return (
     <View className={containerClass} onClick={onClick}>
       <View className={innerClass}>
-        {
-          vertical ? (
-            <>
-              <View className={styles['header-row']}>
-                <View style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  flex: 1
-                }}>
-                  {
-                    icon
-                    ? (
-                      <View className={styles['icon-wrapper']}>
-                        {icon}
-                      </View>
-                    ) : undefined
-                  }
-                  <View className={styles['title-section']}>
+        <View className={styles['cell-main']}>
+          {
+            vertical ? (
+              <>
+                <View className={styles['header-row']}>
+                  <View style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flex: 1
+                  }}>
                     {
-                      typeof title === 'string'
-                      ? <CellTitle title={title} required={required} tooltip={tooltip} />
-                      : title
+                      icon
+                      ? (
+                        <View className={styles['icon-wrapper']}>
+                          {icon}
+                        </View>
+                      ) : undefined
                     }
+                    <View className={styles['title-section']}>
+                      {
+                        typeof title === 'string'
+                        ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                        : title
+                      }
+                    </View>
                   </View>
+                  {
+                    showArrow
+                    ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
+                    : undefined
+                  }
                 </View>
+                <View className={styles['content-section']}>
+                  {renderContent()}
+                </View>
+              </>
+            )
+            : (
+              <>
                 {
-                  showArrow
-                  ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
+                  icon
+                  ? <View className={styles['icon-wrapper']}>{icon}</View>
                   : undefined
                 }
-              </View>
-              <View className={styles['content-section']}>
-                {renderContent()}
-              </View>
-            </>
-          )
-          : (
-            <>
-              {
-                icon
-                ? <View className={styles['icon-wrapper']}>{icon}</View>
-                : undefined
-              }
-              <View
-                className={styles['title-section']}
-                style={titleWidth ? { width: `${titleWidth}px` } : { maxWidth: '60%' }}
-              >
+                <View
+                  className={styles['title-section']}
+                  style={titleWidth ? { width: `${titleWidth}px` } : { maxWidth: '60%' }}
+                >
+                  {
+                    typeof title === 'string'
+                    ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                    : title
+                  }
+                </View>
+                <View className={styles['content-section']}>
+                  {renderContent()}
+                </View>
                 {
-                  typeof title === 'string'
-                  ? <CellTitle title={title} required={required} tooltip={tooltip} />
-                  : title
+                  showArrow
+                  ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
+                  : undefined
                 }
-              </View>
-              <View className={styles['content-section']}>
-                {renderContent()}
-              </View>
-              {
-                showArrow
-                ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
-                : undefined
-              }
-            </>
+              </>
+            )
+          }
+        </View>
+        {
+          children
+          ? (
+            <View
+              className={styles['cell-extra-children']}
+            >
+              {children}
+            </View>
           )
-        }
-        {children}
+          : undefined
+          }
       </View>
     </View>
   )

package/src/components/Cell/CellValue.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from '@tarojs/components'
+import { ITouchEvent, Text } from '@tarojs/components'
 
 import { formatClassNames } from '../../util/function'
 
@@ -10,14 +10,28 @@ export interface CellValueProps {
   value?: string | number
   placeholder?: string | number
   maxLines?: number
+  onClick?:(event: ITouchEvent) => void
 }
 
-const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, className }) => {
+const CellValue: React.FC<CellValueProps> = ({
+  value,
+  placeholder,
+  maxLines,
+  className,
+  onClick,
+}) => {
   const hasValue = value !== undefined && value !== null && value !== ''
 
-    const dynamicStyle: React.CSSProperties = maxLines !== 1 ? {
-      WebkitLineClamp: maxLines,
-    } : {}
+  const dynamicStyle: React.CSSProperties = maxLines !== 1 ? {
+    WebkitLineClamp: maxLines,
+  } : {}
+
+  const handlePress = (e: ITouchEvent) => {
+    if (onClick) {
+      e.stopPropagation()
+      onClick(e)
+    }
+  }
 
   if (hasValue) {
     return (
@@ -27,6 +41,7 @@ const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, cla
           className
         )}
         style={dynamicStyle}
+        onClick={handlePress}
       >
         {value}
       </Text>
@@ -35,10 +50,13 @@ const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, cla
 
   if (placeholder !== undefined && placeholder !== null) {
     return (
-      <Text className={formatClassNames(
-        styles['placeholder-text'],
-        className
-      )}>
+      <Text
+        className={formatClassNames(
+          styles['placeholder-text'],
+          className
+        )}
+        onClick={handlePress}
+      >
         {placeholder}
       </Text>
     )

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

@@ -62,8 +62,12 @@ $DESC_FONT_SIZE = 13PX
   &.show-separator
     halfBorder(bottom, var(--lineBorder))
 
+.cell-main
+  width 100%
+  display flex
+
 .is-horizontal
-  .cell-inner
+  .cell-main
     flex-direction row
     align-items center
 
@@ -80,6 +84,9 @@ $DESC_FONT_SIZE = 13PX
     text-align right
 
 .is-vertical
+  .cell-main
+    flex-direction column
+
   .header-row
     display flex
     flex-direction row
@@ -98,6 +105,10 @@ $DESC_FONT_SIZE = 13PX
     justify-content flex-start
     text-align left
 
+.cell-extra-children
+  width 100%
+  display block
+
 .icon-wrapper
   margin-right 12PX
   display flex

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

@@ -0,0 +1,63 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+$CELL_PADDING_HORIZONTAL = 16PX
+$CELL_PADDING_VERTICAL = 14PX
+
+.field-card-container
+  border-radius 10PX
+  background-color var(--containerCard)
+  margin 0 $WING_BLANK
+  margin-bottom 12PX
+  overflow hidden
+
+.card-header
+  display flex
+  flex-direction row
+  align-items center
+  justify-content space-between
+  padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
+  position relative
+  min-height 48PX
+  box-sizing border-box
+  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 16PX
+      lineClamp(1)
+
+    .edit-icon-wrapper
+      padding 4PX 8PX
+      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 #FF4D4F
+      font-size 14PX
+      padding 4PX
+      &:active
+        opacity 0.6

package/src/components/FieldCard/index.tsx

@@ -0,0 +1,84 @@
+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-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 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: '库存',