@yorkjs/hive-ui 2.1.8 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.1.8",
+  "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/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'