@yorkjs/hive-ui 0.1.4 → 0.1.6

package/package.json

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

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

@@ -0,0 +1,105 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.alert-container
+  padding 6PX $WING_BLANK
+  position relative
+  box-sizing border-box
+  width 100%
+  display flex
+  flex-direction column
+  overflow hidden
+
+  &.is-pressable
+    &:active
+      opacity 0.7
+
+  &.show-animation
+    animation alertFadeIn 0.3s ease-out forwards
+
+    &.is-leaving
+      animation alertFadeOut 0.25s ease-in forwards
+
+.alert-content
+  display flex
+  flex-direction row
+
+.icon-wrapper
+  margin-right 8PX
+  flex-shrink 0
+  display flex
+  align-items center
+  justify-content center
+
+.text-container
+  flex 1
+  display flex
+  flex-direction column
+  overflow hidden
+
+.message-text
+  getPlatformFontSize(13)
+  line-height 20PX
+  word-break break-word
+  white-space pre-line
+
+.scroll-text
+  getPlatformFontSize(13)
+  line-height 20PX
+  white-space nowrap
+  padding-right 60PX
+
+.scroll-wrapper
+  overflow hidden
+  width 100%
+
+.scroll-track
+  display flex
+  width max-content
+  align-items center
+  animation alertScroll 18s linear infinite
+  will-change transform
+
+.description-wrapper
+  margin-top 4PX
+
+.description-text
+  getPlatformFontSize(12)
+  line-height 18PX
+
+.action-container
+  margin-left 8PX
+  display flex
+  flex-direction row
+  align-items center
+
+.close-btn-wrapper
+  display flex
+  align-items center
+  justify-content center
+
+.close-text
+  getPlatformFontSize(12)
+
+
+@keyframes alertFadeIn
+  0%
+    opacity 0
+    transform translateY(-20PX)
+  100%
+    opacity 1
+    transform translateY(0)
+
+@keyframes alertFadeOut
+  0%
+    opacity 1
+    transform translateY(0)
+  100%
+    opacity 0
+    transform translateY(-20PX)
+
+@keyframes alertScroll
+  0%
+    transform translate3d(0,0,0)
+  100%
+    transform translate3d(-50%,0,0)

package/src/components/Alert/index.tsx

@@ -0,0 +1,268 @@
+import React, { useState, useMemo, useEffect, useCallback, memo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { useTheme } from '../../config'
+import { formatClassNames } from '../../util/function'
+
+import Icon from '../Icon'
+
+import styles from './index.module.styl'
+
+export type AlertType = 'success' | 'error' | 'primary' | 'warning'
+
+export interface AlertProps {
+  message: React.ReactNode
+  description?: React.ReactNode
+  type?: AlertType
+  showIcon?: boolean
+  icon?: React.ReactNode
+  iconName?: string
+  closable?: boolean
+  closeText?: React.ReactNode
+  onClose?: () => void
+  showAnimation?: boolean
+  duration?: number
+  onChange?: () => void
+  showArrow?: boolean
+  borderRadius?: number
+  className?: string
+  messageClassName?: string
+  iconClassName?: string
+
+  scroll?: boolean
+  scrollSpeed?: number
+
+  clickToClose?: boolean
+}
+
+const Alert: React.FC<AlertProps> = ({
+  message,
+  description,
+  type = 'primary',
+  showIcon = true,
+  icon,
+  iconName,
+  closable = false,
+  closeText,
+  onClose,
+  showAnimation = false,
+  duration = 0,
+  onChange,
+  showArrow = false,
+  borderRadius = 0,
+  className,
+  messageClassName,
+  iconClassName,
+  scroll = false,
+  scrollSpeed = 17,
+  clickToClose = false
+}) => {
+
+  const { themeSelect } = useTheme()
+
+  const [visible, setVisible] = useState(true)
+  const [isLeaving, setIsLeaving] = useState(false)
+
+  const config = useMemo(() => {
+
+    const mapping = {
+      warning: {
+        icon: 'exclamation-circle-fill',
+        color: '#FA8C16',
+        bg: themeSelect('#FFF7E6', 'rgba(255,153,0,0.25)')
+      },
+      success: {
+        icon: 'check-circle-fill',
+        color: '#03BE02',
+        bg: themeSelect('#E9FFE9', 'rgba(3, 190, 2, 0.30)')
+      },
+      error: {
+        icon: 'close-circle-fill',
+        color: '#FF3141',
+        bg: themeSelect('#FFE5E7', 'rgba(255, 49, 65, 0.3)')
+      },
+      primary: {
+        icon: 'volume-up',
+        color: 'var(--primary)',
+        bg: themeSelect('#FFF7E6', 'rgba(255, 143, 31, 0.3)')
+      },
+    }
+
+    return mapping[type] || mapping.primary
+  }, [type])
+
+  const handleClose = useCallback(() => {
+    if (showAnimation) {
+      setIsLeaving(true)
+      setTimeout(() => {
+        setVisible(false)
+        onClose?.()
+      }, 250)
+    }
+    else {
+      setVisible(false)
+      onClose?.()
+    }
+  }, [showAnimation, onClose])
+
+  const handleContainerClick = () => {
+    if (clickToClose) {
+      handleClose()
+    }
+
+    onChange?.()
+  }
+
+  useEffect(() => {
+    if (visible && duration > 0) {
+      const timer = setTimeout(handleClose, duration)
+      return () => clearTimeout(timer)
+    }
+  }, [visible, duration, handleClose])
+
+  if (!visible) return null
+
+  return (
+    <View
+      className={formatClassNames(styles['alert-container'], className, {
+        [styles['is-pressable']]: !!onChange,
+        [styles['show-animation']]: showAnimation,
+        [styles['is-leaving']]: isLeaving
+      })}
+      style={{
+        backgroundColor: config.bg,
+        borderRadius: borderRadius ? `${borderRadius}PX` : '0'
+      }}
+      onClick={handleContainerClick}
+    >
+
+      <View className={styles['alert-content']}>
+
+        {
+          showIcon
+          ? (
+            <View className={formatClassNames(styles['icon-wrapper'], iconClassName)}>
+              {
+                icon
+                  ? icon
+                  : (
+                    <Icon
+                      name={iconName || config.icon}
+                      color={config.color}
+                      size={16}
+                    />
+                  )
+              }
+            </View>
+          )
+          : undefined
+        }
+
+        <View className={styles['text-container']}>
+
+          {typeof message === 'string' ? (
+
+            scroll ? (
+
+              <View className={styles['scroll-wrapper']}>
+
+                <View
+                  className={styles['scroll-track']}
+                  style={{ animationDuration: `${scrollSpeed}s` }}
+                >
+
+                  <Text
+                    className={formatClassNames(styles['scroll-text'], messageClassName)}
+                    style={{ color: config.color }}
+                  >
+                    {message}
+                  </Text>
+
+                  <Text
+                    className={formatClassNames(styles['scroll-text'], messageClassName)}
+                    style={{ color: config.color }}
+                  >
+                    {message}
+                  </Text>
+
+                </View>
+
+              </View>
+
+            ) : (
+
+              <Text
+                className={formatClassNames(styles['message-text'], messageClassName)}
+                style={{ color: config.color }}
+              >
+                {message}
+              </Text>
+
+            )
+
+          ) : message}
+
+          {description && (
+            <View className={styles['description-wrapper']}>
+              {
+                typeof description === 'string'
+                ? (
+                  <Text
+                    className={styles['description-text']}
+                    style={{ color: 'var(--content)' }}
+                  >
+                    {description}
+                  </Text>
+                )
+                : description
+              }
+            </View>
+          )}
+
+        </View>
+
+        <View className={styles['action-container']}>
+
+          {closable && (
+            <View
+              className={styles['close-btn-wrapper']}
+              onClick={(e) => {
+                e.stopPropagation()
+                handleClose()
+              }}
+            >
+              {
+                closeText
+                ? (
+                  <Text className={styles['close-text']} style={{ color: config.color }}>
+                    {closeText}
+                  </Text>
+                )
+                : (
+                  <Icon
+                    name="close"
+                    color={config.color}
+                    size={14}
+                  />
+                )
+              }
+            </View>
+          )}
+
+          {(showArrow || (!showArrow && onChange)) && !closable && (
+            <Icon
+              name="right"
+              color={config.color}
+              size={12}
+            />
+          )}
+
+        </View>
+
+      </View>
+
+    </View>
+  )
+}
+
+export default memo(Alert)

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

@@ -0,0 +1,15 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.card
+  border-radius 10PX
+  overflow hidden
+  background-color var(--containerCard)
+  margin-left $WING_BLANK
+  margin-right $WING_BLANK
+  &.show-top-gutter
+    margin-top $GUTTER_BLANK
+  &.show-bottom-gutter
+    margin-bottom $GUTTER_BLANK
+  &.show-top-blank
+    margin-top $CARD_BLANK

package/src/components/Card/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface CardProps {
+  className?: string
+  showTopGutter?: boolean
+  showBottomGutter?: boolean
+  showTopBlank?: boolean
+  children?: React.ReactNode
+  onClick?: () => void
+}
+
+const CellCard: React.FC<CardProps> = ({
+  showTopGutter = false,
+  showBottomGutter = false,
+  showTopBlank = false,
+  onClick,
+  className,
+  children
+}) => {
+  const combinedClass = formatClassNames(
+    styles['card'],
+    {
+      [styles['show-top-gutter']]: showTopGutter,
+      [styles['show-bottom-gutter']]: showBottomGutter,
+      [styles['show-top-blank']]: showTopBlank,
+    },
+    className
+  )
+
+  return (
+    <View
+      className={combinedClass}
+      onClick={onClick}
+    >
+      {children}
+    </View>
+  )
+}
+
+export default CellCard

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

@@ -1,4 +1,5 @@
 @import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
 
 $CELL_PADDING_HORIZONTAL = 16PX
 $CELL_PADDING_VERTICAL = 14PX

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

@@ -1,14 +1,14 @@
 @import '../../styles/mixin.styl'
 @import '../../styles/variable.styl'
 
-$CELL_PADDING_HORIZONTAL = 10PX
-$CELL_PADDING_VERTICAL = 15PX
+$PADDING = 15PX
 $LABEL_MARGIN_RIGHT = 20PX
 
 .display-card
-  padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
+  padding $PADDING
   background-color var(--containerCard)
-  margin 0 $WING_BLANK
+  margin-left $WING_BLANK
+  margin-right $WING_BLANK
   border-radius 10PX
   &.show-top-gutter
     margin-top $GUTTER_BLANK

package/src/components/RemoteImage/index.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react'
+import { Image, ImageProps } from '@tarojs/components'
+
+import getResponsiveImage from '../../util/function'
+
+export interface IRemoteImageProps extends Omit<ImageProps, 'src'> {
+  /** 图片地址 */
+  url: string
+  /** 期望显示宽度 */
+  width?: number
+  /** 期望显示高度 */
+  height?: number
+  /** 是否不进行裁剪（等比缩放） */
+  noCrop?: boolean
+  /** 图片质量 1-100 */
+  quality?: string | number
+  /** 自定义样式类 */
+  className?: string
+}
+
+const RemoteImage: React.FC<IRemoteImageProps> = (props) => {
+  const {
+    url,
+    width = 50,
+    height = 50,
+    noCrop = false,
+    quality,
+    mode = 'aspectFill',
+    className,
+    ...restProps
+  } = props
+
+  const responsiveSrc = useMemo(() => {
+    return getResponsiveImage({
+      url,
+      width,
+      height,
+      noCrop,
+      quality,
+    })
+  }, [url, width, height, noCrop, quality])
+  console.log("🚀 ~ RemoteImage ~ responsiveSrc:", responsiveSrc)
+
+  const containerStyle: React.CSSProperties = {
+    width: width ? `${width}px` : 'auto',
+    height: height ? `${height}px` : 'auto',
+  }
+
+  return (
+    <Image
+      className={className}
+      src={responsiveSrc}
+      mode={mode}
+      style={containerStyle}
+      {...restProps}
+    />
+  )
+}
+
+export default React.memo(RemoteImage)

package/src/index.ts

@@ -7,6 +7,9 @@ export { default as Checkbox } from './components/Checkbox'
 export { default as Tag } from './components/Tag'
 export { default as FieldCard } from './components/FieldCard'
 export { default as DisplayCard } from './components/DisplayCard'
+export { default as Card } from './components/Card'
+export { default as RemoteImage } from './components/RemoteImage'
+export { default as Alert } from './components/Alert'
 
 export { default as FlowItem } from './item/FlowItem'
 export { default as ProductItem, setProductItemConfig } from './item/ProductItem'

package/src/util/env.ts

@@ -1,5 +1,7 @@
 import Taro from "@tarojs/taro"
 
+export const pixelRatio = Taro.getWindowInfo().pixelRatio
+
 // 支付宝小程序
 export const isAlipayApp = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
 // 微信小程序

package/src/util/function.ts

@@ -1,3 +1,5 @@
+import { pixelRatio } from "./env"
+
 interface ClassRecord {
   [key: string]: boolean | string | number
 }
@@ -53,4 +55,99 @@ export function isEmpty(value: any): value is EmptyValue {
   }
 
   return isEmpty
+}
+
+export function formatAssetUrl(url: string, prefix?: string) {
+  if (!prefix) {
+    prefix = 'https'
+  }
+
+  if (!url) {
+    return ''
+  }
+
+  if (url.indexOf('//') === 0) {
+    url = prefix + ':' + url
+  }
+  else if (url.indexOf('http://img.finstao.com') === 0) {
+    url = url.replace(/^http/, 'https')
+  }
+  return url
+}
+
+function  cleanQuery(url: string) {
+  if (url && url.split) {
+    let terms = url.split('?')
+    return terms.length === 2 ? terms[0] : url
+  }
+  return url
+}
+function isResponsiveImage(uri: string) {
+  return typeof uri === 'string'
+    && (uri.indexOf('clouddn') > 0 || uri.indexOf('img.finstao.com') > 0)
+}
+
+const imagePixelRatio = Math.min(2, pixelRatio || 2)
+
+export interface IWatermarkOptions {
+  text?: string
+  gravity?: string
+  dissolve?: number
+  [key: string]: any
+}
+
+export interface IGetResponsiveImageOptions {
+  url?: string
+  width?: number
+  height?: number
+  noCrop?: boolean
+  quality?: string | number
+  supportWebp?: boolean
+}
+
+/**
+ * 获取响应式图片地址
+ */
+export default function getResponsiveImage(options: IGetResponsiveImageOptions): string {
+  let {
+    url,
+    width,
+    height,
+    noCrop,
+    quality,
+  } = options
+
+  if (!url) return ''
+
+  // 如果不是可缩放类型的图片链接（如 svg/base64），原样返回
+  if (!isResponsiveImage(url)) {
+    return url
+  }
+
+  const suffix: string[] = []
+
+  if (typeof width === 'number') {
+    const w = Math.floor(width * imagePixelRatio)
+    suffix.push('w', w.toString())
+  }
+
+  if (typeof height === 'number') {
+    const h = Math.floor(height * imagePixelRatio)
+    suffix.push('h', h.toString())
+  }
+
+  if (quality) {
+    suffix.push('q', quality.toString())
+  }
+
+  const hasImageV2 = suffix.length > 0
+  let finalUrl = cleanQuery(url)
+
+  if (hasImageV2) {
+    const mode = noCrop ? 2 : 1
+    finalUrl += `?imageView2/${mode}/${suffix.join('/')}`
+  }
+  console.log("🚀 ~ getResponsiveImage ~ finalUrl:", finalUrl)
+
+  return formatAssetUrl(finalUrl)
 }