@yorkjs/hive-ui 0.0.6 → 0.0.8

package/package.json

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

package/src/components/Checkbox/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { View, Text } from '@tarojs/components'
 
+import { useTheme } from '../../config'
 import { isAndroid, isApp } from '../../util/env'
 import { formatClassNames } from '../../util/function'
 
@@ -18,8 +19,6 @@ export interface CheckboxProps {
   className?: string
 }
 
-const isDark = false
-
 const Checkbox: React.FC<CheckboxProps> = (props) => {
   const {
     label,
@@ -31,6 +30,8 @@ const Checkbox: React.FC<CheckboxProps> = (props) => {
     className,
   } = props
 
+  const { isDark } = useTheme()
+
   const handlePress = (e: any) => {
     if (disabled || readOnly) return
     onChange?.(!checked)

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

@@ -0,0 +1,60 @@
+@import '../../styles/mixin.styl'
+
+$CELL_PADDING_HORIZONTAL = 16PX
+$CELL_PADDING_VERTICAL = 14PX
+$TITLE_FONT_SIZE = 16PX
+
+.field-card-container
+  border-radius 10PX
+  background-color var(--containerCard)
+  margin 0 12PX
+  margin-bottom 12PX
+  overflow visible
+
+.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 $TITLE_FONT_SIZE
+    font-weight 500
+    line-height 1.4
+    lineClamp(1)
+
+  .edit-icon
+    margin-left 6PX
+    color var(--textMuted)
+    flex-shrink 0
+
+  .header-extra
+    margin-left 12PX
+    flex-shrink 0
+    display flex
+    align-items center
+    // 动作区域通常字号稍小
+    font-size 14PX
+
+    .action-text
+      color #FF4D4F
+
+    .action-link
+      color var(--primary)
+
+.card-content
+  border-radius 0 0 10PX 10PX
+  overflow hidden

package/src/components/FieldCard/index.tsx

@@ -0,0 +1,83 @@
+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 {
+  /** 标题内容 */
+  title: string
+  /** 是否显示标题旁的编辑小图标 */
+  showEditIcon?: boolean
+  /** 右侧动作区域：支持字符串、Icon 或自定义节点 */
+  extra?: React.ReactNode
+  /** 点击整个 Header 区域的回调 */
+  onHeaderClick?: (e: ITouchEvent) => void
+  /** 点击右侧 extra 区域的回调 (如果传了 extra 且需要独立点击) */
+  onExtraClick?: (e: ITouchEvent) => void
+  /** 子组件 */
+  children?: React.ReactNode
+  /** 外部样式 */
+  className?: string
+}
+
+const FieldCard: React.FC<FieldCardProps> = (props) => {
+  const {
+    title,
+    showEditIcon = false,
+    extra,
+    onHeaderClick,
+    onExtraClick,
+    children,
+    className
+  } = props
+
+  const handleExtraClick = (e: ITouchEvent) => {
+    if (onExtraClick) {
+      e.stopPropagation()
+      onExtraClick(e)
+    }
+  }
+
+  return (
+    <View className={formatClassNames(styles['field-card-container'], className)}>
+      <View className={styles['card-header']} onClick={onHeaderClick}>
+        <View className={styles['header-left']}>
+          <Text className={styles['header-title']}>{title}</Text>
+          {
+            showEditIcon
+            ? (
+              <Icon name='edit' size={14} className={styles['edit-icon']} />
+            )
+            : undefined
+          }
+        </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/components/Tag/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { View, Text } from '@tarojs/components'
 
+import { useTheme } from '../../config'
 import { formatClassNames } from '../../util/function'
 
 import styles from './index.module.styl'
@@ -30,7 +31,7 @@ const Tag: React.FC<TagProps> = ({
   className,
   style
 }) => {
-  const themeSelect = (light: string, dark: string) => (isDark ? dark : light)
+  const { themeSelect } = useTheme()
 
   const tagStyle = useMemo(() => {
     const colors = {

package/src/config.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react'
+
+let globalIsDark = false
+const listeners = new Set<(isDark: boolean) => void>()
+
+export const setGlobalTheme = (theme: 'light' | 'dark' | string) => {
+  globalIsDark = theme === 'dark'
+  listeners.forEach((callback) => callback(globalIsDark))
+}
+
+export const useTheme = () => {
+  const [isDark, setIsDark] = useState(globalIsDark)
+
+  useEffect(() => {
+    listeners.add(setIsDark)
+    return () => {
+      listeners.delete(setIsDark)
+    }
+  }, [])
+
+  const themeSelect = <T>(lightValue: T, darkValue: T): T => {
+    return isDark ? darkValue : lightValue
+  }
+
+  return { isDark, themeSelect }
+}

package/src/index.ts

@@ -1,3 +1,5 @@
+export { setGlobalTheme, useTheme } from './config'
+
 export { default as NumberKeyboard } from './components/NumberKeyboard'
 export { default as Cell, setCellConfig } from './components/Cell'
 export { default as Icon } from './components/Icon'
@@ -5,4 +7,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, setProductItemConfig } from './item/ProductItem'

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

@@ -7,8 +7,6 @@ import Tag from '../../components/Tag'
 import Icon from '../../components/Icon'
 import Checkbox from '../../components/Checkbox'
 
-import styles from './index.module.styl'
-
 import {
   MALL_PRODUCT_TYPE_REAL,
   MALL_PRODUCT_TYPE_VIRTUAL,
@@ -22,6 +20,9 @@ import {
   PROMOTION_ACTIVITY_TYPE_HOT,
   PROMOTION_ACTIVITY_TYPE_PRESENT,
 } from '../../constant/mall'
+import { getProductItemConfig } from './config'
+
+import styles from './index.module.styl'
 
 export interface IProductCardLabels {
   product_type?: { real: string; virtual: string; service: string }
@@ -73,6 +74,10 @@ export interface IProductCardProps {
   customization?: string
   /** 做法描述最大显示行数 (默认3) */
   customizationMaxLines?: number
+  /** 套餐信息描述 */
+  combo? : string
+  /** 套餐描述最大显示行数 (默认3) */
+  comboMaxLines?: number
   /** 售价 */
   salePrice: string | number
   /** 原价 (划线价) */
@@ -93,8 +98,6 @@ export interface IProductCardProps {
   onDelete?: () => void
   /** 右下角自定义操作区域 (与 buyCount 互斥) */
   action?: React.ReactNode
-  /** 国际化标签注入 */
-  labels?: IProductCardLabels
   /** 是否显示底部分边框 */
   showBottomBorder?: boolean
   /** 是否显示底部分割线 */
@@ -104,21 +107,7 @@ export interface IProductCardProps {
   children?: React.ReactNode
 }
 
-const DEFAULT_LABELS: IProductCardLabels = {
-  product_type: { real: '实物', virtual: '虚拟', service: '服务' },
-  delivery_type: { dine: '堂食', self_pickup: '到店自取', delivery: '送货上门' },
-  activity_type: { flash: '秒杀活动', brand: '品牌活动', hot: '热点活动', present: '买赠活动' },
-  present_badge: '赠',
-  stock_label: '库存',
-  sale_label: '销量',
-  multiple_spec: '多规格',
-  barcode_label: '条码',
-  spec_label: '规格',
-  sold_out: '售罄',
-  offline: '已下架'
-}
-
-const ProductCard: React.FC<IProductCardProps> = (props) => {
+const ProductItem: React.FC<IProductCardProps> = (props) => {
   const {
     image,
     title,
@@ -134,6 +123,8 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     deliveryTypes = [],
     customization,
     customizationMaxLines = 3,
+    combo,
+    comboMaxLines = 3,
     salePrice,
     originalPrice,
     buyCount,
@@ -149,7 +140,6 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     className,
     showBottomBorder = false,
     showSeparator = false,
-    labels: customLabels,
     onClick,
     children
   } = props
@@ -165,13 +155,12 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     }
   }
 
-  const labels = useMemo(() => ({
-    ...DEFAULT_LABELS,
-    ...customLabels,
-    product_type: { ...DEFAULT_LABELS.product_type, ...customLabels?.product_type },
-    delivery_type: { ...DEFAULT_LABELS.delivery_type, ...customLabels?.delivery_type },
-    activity_type: { ...DEFAULT_LABELS.activity_type, ...customLabels?.activity_type }
-  }), [customLabels])
+  const labels = useMemo(() => {
+    const globalConfig = getProductItemConfig()
+    return {
+      ...globalConfig,
+    }
+  }, [])
 
   const productTypeTag = useMemo(() => {
     if (productType === undefined) return null
@@ -359,6 +348,18 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
                 )
                 : undefined
               }
+              {
+                combo
+                ? (
+                  <Text
+                    className={styles['customization-text']}
+                    style={{ WebkitLineClamp: comboMaxLines }}
+                  >
+                    {combo}
+                  </Text>
+                )
+                : undefined
+              }
             </View>
             <View className={styles['content-bottom']}>
               <View className={styles['price-container']}>
@@ -432,4 +433,4 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
   )
 }
 
-export default React.memo(ProductCard)
+export default React.memo(ProductItem)

package/src/item/ProductItem/config.ts

@@ -0,0 +1,35 @@
+import { IProductCardLabels } from './ProductItem'
+
+// 初始默认文案
+let globalLabels: IProductCardLabels = {
+  product_type: {
+    real: '实物',
+    virtual: '虚拟',
+    service: '服务'
+  },
+  delivery_type: {
+    dine: '堂食',
+    self_pickup: '到店自取',
+    delivery: '送货上门'
+  },
+  activity_type: {
+    flash: '秒杀活动',
+    brand: '品牌活动',
+    hot: '热点活动',
+    present: '买赠活动'
+  },
+  present_badge: '赠',
+  stock_label: '库存',
+  sale_label: '销量',
+  multiple_spec: '多规格',
+  barcode_label: '条码',
+  spec_label: '规格',
+  sold_out: '售罄',
+  offline: '已下架'
+}
+
+export const setProductItemConfig = (labels: IProductCardLabels) => {
+  globalLabels = { ...globalLabels, ...labels }
+}
+
+export const getProductItemConfig = () => globalLabels

package/src/item/ProductItem/index.tsx

@@ -0,0 +1,8 @@
+import ProductItemMain from './ProductItem'
+import { setProductItemConfig } from './config'
+
+export type { IProductCardLabels, IProductCardProps } from './ProductItem'
+
+export { setProductItemConfig }
+
+export default ProductItemMain