@yorkjs/hive-ui 2.2.8 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.2.8",
+  "version": "2.3.1",
   "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>[]
@@ -28,6 +30,12 @@ export interface TableProps<T extends object> {
   dataSource: T[]
   /** 行唯一标识对应的数据字段 */
   rowKey: keyof T
+  /** 表头背景色 */
+  headerBackgroundColor?: string
+  /** 表头文字加粗  */
+  headerTextBold?: boolean
+  /** 表格文字对齐方式 */
+  textAlign?: TableTextAlign
   /** 自定义类名 */
   className?: string
   /** 自定义样式 */
@@ -46,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,
+  }
 }
 
 /**
@@ -82,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>
     )
@@ -99,6 +124,9 @@ function Table<T extends object>(props: TableProps<T>) {
     dataSource,
     columns,
     rowKey,
+    headerBackgroundColor,
+    headerTextBold = false,
+    textAlign = 'left',
     className,
     style,
   } = props
@@ -112,15 +140,22 @@ function Table<T extends object>(props: TableProps<T>) {
       className={formatClassNames(styles['table'], className)}
       style={style}
     >
-      <View className={styles['table-header']}>
+      <View
+        className={styles['table-header']}
+        style={headerBackgroundColor ? { background: headerBackgroundColor } : undefined}
+      >
         {
           columns.map(column => (
             <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>
           ))
         }
@@ -147,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>
                     )
                   })