@yorkjs/hive-ui 2.2.9 → 2.3.2

package/package.json

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

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

@@ -22,20 +22,11 @@
       position absolute
       top -6PX
       right -6PX
-      width 16PX
-      height 16PX
-      line-height 16PX
-      text-align center
-      border-radius 50%
       z-index 2
-
-      .delete-icon
-        position absolute
-        top 50%
-        left 50%
-        transform translate(-50%, -50%)
-        line-height 1
-        display block
+      width 17PX
+      height 17PX
+      line-height 1
+      flexHVCenter()
 
     .text-block
       background-color var(--containerCard)

package/src/components/RichTextEditor/index.tsx

@@ -97,9 +97,10 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
   const textareaRefs = useRef<Record<number, any>>({})
   const skipHeightSyncRef = useRef(false)
 
-  const deleteBtnStyle = useMemo(() => ({
-    backgroundColor: themeSelect('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)'),
-  }), [themeSelect])
+  const deleteIconColor = useMemo(
+    () => themeSelect('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)'),
+    [themeSelect]
+  )
 
   const updateBlock = useCallback((index: number, patch: Partial<RichTextBlock>) => {
     onChange?.(
@@ -175,14 +176,12 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
         >
           <View
             className={styles['delete-btn']}
-            style={deleteBtnStyle}
             onClick={(e) => handleDelete(e, index)}
           >
             <Icon
-              name='close'
-              size={10}
-              color="var(--containerCard)"
-              className={styles['delete-icon']}
+              name="close-circle-fill"
+              size={17}
+              color={deleteIconColor}
             />
           </View>
 

package/src/components/Table/index.tsx

@@ -21,6 +21,8 @@ export interface TableColumn<T extends object> {
   render?: (value: T[keyof T], record: T, index: number) => React.ReactNode
 }
 
+export type TableTextAlign = 'left' | 'center' | 'right'
+
 export interface TableProps<T extends object> {
   /** 列配置 */
   columns: TableColumn<T>[]
@@ -30,6 +32,10 @@ export interface TableProps<T extends object> {
   rowKey: keyof T
   /** 表头背景色 */
   headerBackgroundColor?: string
+  /** 表头文字加粗  */
+  headerTextBold?: boolean
+  /** 表格文字对齐方式 */
+  textAlign?: TableTextAlign
   /** 自定义类名 */
   className?: string
   /** 自定义样式 */
@@ -48,16 +54,29 @@ function formatWidth(width?: number | string) {
 }
 
 /**
- * 根据列宽生成单元格 flex 样式；未指定宽度时均分剩余空间
+ * 根据列宽和对齐方式生成单元格样式；未指定宽度时均分剩余空间
  */
-function getCellStyle(width?: number | string): React.CSSProperties {
+function getCellStyle(width?: number | string, align: TableTextAlign = 'left'): React.CSSProperties {
   const formattedWidth = formatWidth(width)
+  const justifyContent = align === 'center'
+    ? 'center'
+    : align === 'right'
+      ? 'flex-end'
+      : 'flex-start'
 
   if (formattedWidth) {
-    return { flex: `0 0 ${formattedWidth}` }
+    return {
+      flex: `0 0 ${formattedWidth}`,
+      justifyContent,
+      textAlign: align,
+    }
   }
 
-  return { flex: 1 }
+  return {
+    flex: 1,
+    justifyContent,
+    textAlign: align,
+  }
 }
 
 /**
@@ -84,10 +103,14 @@ function getRowKey<T extends object>(
 /**
  * 渲染文本节点；字符串/数字包一层 Text，其它节点原样返回
  */
-function renderText(content: React.ReactNode, className: string) {
+function renderText(
+  content: React.ReactNode,
+  className: string,
+  style?: React.CSSProperties,
+) {
   if (typeof content === 'string' || typeof content === 'number') {
     return (
-      <Text className={className}>
+      <Text className={className} style={style}>
         {content}
       </Text>
     )
@@ -102,6 +125,8 @@ function Table<T extends object>(props: TableProps<T>) {
     columns,
     rowKey,
     headerBackgroundColor,
+    headerTextBold = false,
+    textAlign = 'left',
     className,
     style,
   } = props
@@ -124,9 +149,13 @@ function Table<T extends object>(props: TableProps<T>) {
             <View
               key={String(column.dataIndex)}
               className={styles['table-cell']}
-              style={getCellStyle(column.width)}
+              style={getCellStyle(column.width, textAlign)}
             >
-              {renderText(column.title, styles['table-header-text'])}
+              {renderText(
+                column.title,
+                styles['table-header-text'],
+                headerTextBold ? { fontWeight: 500 } : undefined,
+              )}
             </View>
           ))
         }
@@ -153,9 +182,13 @@ function Table<T extends object>(props: TableProps<T>) {
                       <View
                         key={`${currentRowKey}-${String(column.dataIndex)}`}
                         className={styles['table-cell']}
-                        style={getCellStyle(column.width)}
+                        style={getCellStyle(column.width, textAlign)}
                       >
-                        {renderText(content as React.ReactNode, styles['table-cell-text'])}
+                        {renderText(
+                          content as React.ReactNode,
+                          styles['table-cell-text'],
+                          { textAlign },
+                        )}
                       </View>
                     )
                   })

package/src/item/ProductItem/ProductItem.tsx

@@ -36,6 +36,7 @@ export interface IProductCardLabels {
   multiple_spec?: string
   barcode_label?: string
   spec_label?: string
+  remaining_label?: string
   sold_out?: string
   offline?: string
 }
@@ -88,6 +89,10 @@ export interface IProductCardProps {
   salePrice: string | number
   /** 原价 (划线价) */
   originalPrice?: string | number
+  /** 剩余次数（次卡独立权益等场景） */
+  remainingCount?: number | string
+  /** 剩余次数对应的总次数（与 remainingCount 组成 剩余/总数） */
+  remainingTotal?: number | string
   /** 已购数量 (显示为 xN) */
   buyCount?: number
   /** 是否显示左侧勾选框 */
@@ -135,6 +140,8 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     salePricePrefix,
     salePrice,
     originalPrice,
+    remainingCount,
+    remainingTotal,
     buyCount,
     showSoldOut = false,
     showOffline = false,
@@ -350,6 +357,29 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
                 )
                 : undefined
               }
+              {
+                remainingCount != null && remainingCount !== ''
+                ? (
+                  <View className={styles['remaining-row']}>
+                    <Text className={styles['remaining-label']}>
+                      {labels.remaining_label}：
+                    </Text>
+                    <Text className={styles['remaining-value']}>
+                      {remainingCount}
+                    </Text>
+                    {
+                      remainingTotal != null && remainingTotal !== ''
+                      ? (
+                        <Text className={styles['remaining-total']}>
+                          /{remainingTotal}
+                        </Text>
+                      )
+                      : undefined
+                    }
+                  </View>
+                )
+                : undefined
+              }
               {
                 customization
                 ? (

package/src/item/ProductItem/config.ts

@@ -26,6 +26,7 @@ let globalLabels: IProductCardLabels = {
   multiple_spec: '多规格',
   barcode_label: '条码',
   spec_label: '规格',
+  remaining_label: '剩余次数',
   sold_out: '售罄',
   offline: '已下架'
 }

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

@@ -205,6 +205,27 @@ $F_BUY_COUNT = 14PX    // RN 14
   margin-top 5PX
   lineClamp(1)
 
+.remaining-row
+  display flex
+  flex-direction row
+  align-items baseline
+  margin-top 5PX
+
+.remaining-label
+  font-size $F_SPEC
+  color var(--textContent)
+  line-height 15PX
+
+.remaining-value
+  font-size $F_SPEC
+  color var(--primary)
+  line-height 15PX
+
+.remaining-total
+  font-size $F_SPEC
+  color var(--textContent)
+  line-height 15PX
+
 .customization-text
   font-size $F_CUSTOM
   color var(--textMuted)