@yorkjs/hive-ui 2.1.7 → 2.1.9

package/package.json

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

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

@@ -0,0 +1,63 @@
+.progress
+  display flex
+  align-items center
+  position relative
+  width 100%
+
+.track
+  flex auto
+  position relative
+  border-radius 6PX
+
+.fill
+  height 100%
+  display flex
+  flex-direction column
+  justify-content center
+  transition all 0.4s
+  border-radius 6PX
+  position relative
+
+.shimmer
+  content ''
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
+  border-radius 6PX
+  animation shimmer 2s ease-in-out infinite
+
+@keyframes shimmer
+  0%
+    background rgba(255, 255, 255, 0.1)
+    width 0
+  20%
+    background rgba(255, 255, 255, 0.5)
+    width 0
+  100%
+    background rgba(255, 255, 255, 0)
+    width 100%
+
+.text
+  display flex
+  align-items center
+  position absolute
+  top 50%
+  transform translateY(-50%)
+  transition all 0.4s
+
+.textOutside
+  display flex
+  align-items center
+  margin-left 8PX
+
+.textInner
+  display flex
+  align-items center
+  padding 4PX 10PX
+  font-size 12PX
+  line-height 1
+  color #fff
+  white-space nowrap
+  border-radius 20PX

package/src/components/Progress/index.tsx

@@ -0,0 +1,148 @@
+import React, { FC, useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface ProgressProps {
+  /**
+   * 百分比
+   * @default 0
+   */
+  percent?: number
+  /**
+   * 进度条背景颜色
+   * @default #f3f3f3
+   */
+  background?: string
+  /**
+   * 进度条线条颜色
+   * @default linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
+   */
+  color?: string
+  /**
+   * 进度条宽度
+   */
+  strokeWidth?: string
+  /**
+   * 是否显示文字内容
+   * @default false
+   */
+  showText?: boolean
+  /**
+   * 百分比文字是否外显（在进度条右侧）
+   * @default false
+   */
+  textOutside?: boolean
+  /**
+   * 是否展示动画效果
+   * @default false
+   */
+  animated?: boolean
+  /**
+   * 自定义类名
+   */
+  className?: string
+}
+
+const Progress: FC<ProgressProps> = ({
+  percent = 0,
+  background = 'var(--containerInner)',
+  color = 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+  strokeWidth = 10,
+  showText = false,
+  textOutside = false,
+  animated = false,
+  className = '',
+}) => {
+  // 限制百分比在 0-100 之间，最多保留两位小数
+  const validPercent = useMemo(() => {
+    const p = Math.min(100, Math.max(0, percent))
+    return Math.round(p * 100) / 100
+  }, [percent])
+
+  const trackStyle: React.CSSProperties = {
+    height: `${strokeWidth}px`,
+    backgroundColor: background,
+    borderRadius: `${strokeWidth}px`,
+  }
+
+  const fillStyle: React.CSSProperties = {
+    width: `${validPercent}%`,
+    height: `${strokeWidth}px`,
+    borderRadius: `${strokeWidth}px`,
+    background: color,
+  }
+
+  const textStyle: React.CSSProperties = textOutside
+    ? { marginLeft: '8px' }
+    : { right: `${100 - validPercent}%` }
+
+  const textInnerStyle: React.CSSProperties = textOutside
+    ? { color: 'var(--textTitle' }
+    : { background: color }
+
+  return (
+    <View 
+      className={
+        formatClassNames(
+          styles.progress,
+          className
+        )
+      }
+    >
+      <View 
+        className={styles.track} 
+        style={trackStyle}
+      >
+        <View className={styles.fill} style={fillStyle}>
+          {
+            animated 
+            ?
+              <View className={styles.shimmer} />
+            : null
+          }
+        </View>
+
+        {
+          (showText && !textOutside) 
+            ? (
+              <View 
+                className={styles.text} 
+                style={textStyle}
+              >
+                <Text 
+                  className={styles.textInner} 
+                  style={textInnerStyle}
+                >
+                  {validPercent}%
+                </Text>
+              </View>
+            )
+            : null
+        }
+      </View>
+
+      {
+        (showText && textOutside) 
+          ? (
+            <View 
+              className={styles.textOutside} 
+              style={textStyle}
+            >
+              <Text 
+                className={styles.textInner} 
+                style={textInnerStyle}
+              >
+                {validPercent}%
+              </Text>
+            </View>
+          ) 
+          : null
+      }
+    </View>
+  )
+}
+
+export default React.memo(Progress)

package/src/components/Table/index.tsx

@@ -6,12 +6,10 @@ import { formatClassNames } from '../../util/function'
 import styles from './index.module.styl'
 
 export interface TableColumn<T extends object> {
-  /** 列唯一标识 */
-  key: string
+  /** 对应数据字段；同时作为列标识 */
+  dataIndex: keyof T
   /** 列标题，支持自定义节点 */
   title: React.ReactNode
-  /** 对应数据字段；不传时仅通过 render 展示 */
-  dataIndex?: keyof T
   /** 列宽度；数字按 PX 处理，字符串原样使用 */
   width?: number | string
   /**
@@ -20,7 +18,7 @@ export interface TableColumn<T extends object> {
    * @param record 当前行数据
    * @param index 当前行索引
    */
-  render?: (value: T[keyof T] | undefined, record: T, index: number) => React.ReactNode
+  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode
 }
 
 export interface TableProps<T extends object> {
@@ -118,7 +116,7 @@ function Table<T extends object>(props: TableProps<T>) {
         {
           columns.map(column => (
             <View
-              key={column.key}
+              key={String(column.dataIndex)}
               className={styles['table-cell']}
               style={getCellStyle(column.width)}
             >
@@ -140,16 +138,14 @@ function Table<T extends object>(props: TableProps<T>) {
               >
                 {
                   columns.map(column => {
-                    const value = column.dataIndex != null
-                      ? record[column.dataIndex]
-                      : undefined
+                    const value = record[column.dataIndex]
                     const content = column.render
                       ? column.render(value, record, rowIndex)
                       : value
 
                     return (
                       <View
-                        key={`${currentRowKey}-${column.key}`}
+                        key={`${currentRowKey}-${String(column.dataIndex)}`}
                         className={styles['table-cell']}
                         style={getCellStyle(column.width)}
                       >

package/src/index.ts

@@ -14,6 +14,7 @@ export { default as RemoteImage } from './components/RemoteImage'
 export { default as Alert } from './components/Alert'
 export { default as Switch } from './components/Switch'
 export { default as SimpleModal } from './components/SimpleModal'
+export { default as Progress } from './components/Progress'
 
 export { default as FlowItem } from './item/FlowItem'
 export { default as ListItem } from './item/ListItem'