@yorkjs/hive-ui 0.0.1

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@yorkjs/hive-ui",
+  "version": "0.0.1",
+  "description": "Hive UI - Taro React component library",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "@tarojs/taro": ">=4.0.0",
+    "@tarojs/components": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tarojs/components": { "optional": false },
+    "@tarojs/taro": { "optional": false },
+    "react": { "optional": false }
+  },
+  "devDependencies": {
+    "@tarojs/components": "^4.1.3",
+    "@tarojs/taro": "^4.1.3",
+    "@types/react": "^18.3.28",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^6.0.2",
+    "stylus": "^0.64.0"
+  }
+}

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

@@ -0,0 +1,74 @@
+@import '../../styles/mixin.styl'
+
+.number-keyboard-component
+  background-color var(--containerInner)
+  width 100%
+  user-select none
+  :global
+    .keyboard-header
+      height 50PX
+      display flex
+      flex-direction row
+      align-items center
+      padding 0 12PX
+      background-color var(--containerInner)
+      halfBorder(top, var(--lineBorder))
+
+      .header-placeholder
+        flex 1
+
+      .done-btn
+        height 100%
+        display flex
+        align-items center
+        justify-content center
+        padding 0 12PX
+        &:active
+          opacity 0.6
+
+      .done-text
+        font-size 18PX
+        color var(--primary)
+        font-weight 500
+
+    .keyboard-grid
+      display flex
+      flex-direction row
+      flex-wrap wrap
+      background-color var(--containerInner)
+      halfBorder(top, var(--lineBorder))
+
+    .key-item
+      width 33.333%
+      height 60PX
+      background-color var(--containerCard)
+      display flex
+      align-items center
+      justify-content center
+      box-sizing border-box
+      halfBorder(right bottom, var(--lineBorder))
+
+      // 点击反馈
+      &:active:not(.empty-key)
+        background-color var(--containerInner)
+
+      &.empty-key
+        background-color var(--containerInner)
+        cursor default
+
+      &.no-right-border
+        &:before
+          border-right none
+
+      &.last-row
+        height calc(60PX + env(safe-area-inset-bottom))
+        &:before
+          border-bottom none
+
+    .key-text
+      font-size 24PX
+      color var(--textTitle)
+
+    .delete-icon
+      width 22PX
+      height 22PX

package/src/components/NumberKeyboard/index.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+type KeyboardType = 'int' | 'number'
+
+interface IProps {
+  /** 键盘类型：int(整数), number(带小数点) */
+  type?: KeyboardType
+  /** 插入字符回调 */
+  onInsert: (val: string) => void
+  /** 删除回调 */
+  onDelete: () => void
+  /** 是否显示头部状态栏 */
+  showHead?: boolean
+  /** 完成按钮文案 */
+  doneText?: string
+  /** 完成按钮点击 */
+  onDone?: () => void
+  /** 外部样式名 */
+  className?: string
+}
+
+const NumberKeyboard: React.FC<IProps> = (props) => {
+  const {
+    type = 'int',
+    onInsert,
+    onDelete,
+    showHead = false,
+    doneText = '完成',
+    onDone,
+    className
+  } = props
+
+  const keys = useMemo(() => {
+    const leftBottomKey = type === 'number' ? '.' : ''
+    return ['1', '2', '3', '4', '5', '6', '7', '8', '9', leftBottomKey, '0', 'delete']
+  }, [type])
+
+  const handleKeyPress = (key: string) => {
+    if (key === 'delete') {
+      onDelete()
+    }
+    else if (key !== '') {
+      onInsert(key)
+    }
+  }
+
+  return (
+    <View className={formatClassNames(styles['number-keyboard-component'], className)}>
+      {
+        showHead
+        ? (
+          <View className="keyboard-header">
+            <View className="header-placeholder" />
+            <View className="done-btn" onClick={onDone}>
+              <Text className="done-text">{doneText}</Text>
+            </View>
+          </View>
+        ) : undefined
+      }
+
+      <View className={"keyboard-grid"}>
+        {keys.map((key, index) => {
+          const isDelete = key === 'delete'
+          const isEmptyKey = key === '' && type === 'int'
+
+          return (
+            <View
+              key={index}
+              className={formatClassNames("key-item", {
+                'empty-key': isEmptyKey,
+                'no-right-border': (index + 1) % 3 === 0,
+                'last-row': index >= 9
+              })}
+              onClick={() => !isEmptyKey && handleKeyPress(key)}
+            >
+              {
+                isDelete
+                ? (
+                  <Image
+                    className="delete-icon"
+                    src="https://img.finstao.com/3ccf71a6e53be5a99c02b0dd7e9ed8c0.png"
+                  />
+                )
+                : (
+                  <Text className="key-text">{key}</Text>
+                )
+              }
+            </View>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+export default React.memo(NumberKeyboard)

package/src/declarations.d.ts

@@ -0,0 +1,9 @@
+declare module '*.styl' {
+  const content: Record<string, string>
+  export default content
+}
+
+declare module '*.css' {
+  const content: Record<string, string>
+  export default content
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as NumberKeyboard } from './components/NumberKeyboard'
+
+export { default as FlowItem } from './item/FlowItem'

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

@@ -0,0 +1,94 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.flow-item
+  display flex
+  flex-direction row
+  justify-content space-between
+  align-items center
+  padding 0PX 10PX
+  margin 0 $WING_BLANK
+  background-color var(--containerCard)
+
+  :global
+    .flow-content
+      width 100%
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
+      halfBorder(bottom, var(--lineBorder))
+      padding-bottom 15PX
+      padding-top 15PX
+
+    .flow-content-no-border
+      width 100%
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
+      padding-bottom 15PX
+      padding-top 15PX
+
+    .flow-item-left
+      display flex
+      flex-direction row
+      justify-content flex-start
+      align-items center
+      margin-right 10PX
+      flex 1
+      overflow hidden
+
+    .flow-item-icon
+      flex-shrink 0
+      width 36PX
+      height 36PX
+      margin-right 10PX
+
+      border-radius 4PX
+      display flex
+      align-items center
+      justify-content center
+      padding 2PX
+      box-sizing border-box
+
+      .icon-img
+        width 100%
+        height 100%
+
+    .flow-item-content
+      flex 1
+      display flex
+      flex-direction column
+      justify-content center
+      align-items flex-start
+      overflow hidden
+
+      .flow-item-title
+        font-size 16PX
+        color var(--textTitle)
+        text-align left
+        width 100%
+        lineClamp(1)
+
+      .flow-item-time
+        font-size 12PX
+        color var(--textMuted)
+        margin-top 5PX
+        text-align left
+
+    .flow-item-right
+      display flex
+      flex-direction column
+      justify-content center
+      align-items flex-end
+      flex-shrink 0
+
+      .flow-item-amount
+        font-size 16PX
+        color var(--textTitle)
+
+      .flow-item-desc
+        margin-top 5PX
+        font-size 12PX
+        color var(--textMuted)

package/src/item/FlowItem/index.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+
+import {
+  formatClassNames,
+  isEmpty
+} from '../../util/function'
+
+import styles from './index.module.styl'
+
+interface IProps {
+  /** 左侧图标链接 */
+  icon?: string
+  /** 标题 */
+  title?: string
+  /** 时间或下方副标题 */
+  time?: string
+  /** 右侧金额 */
+  amount?: string | number
+  /** 金额颜色，不传默认 */
+  amountColor?: string
+  /** 右侧下方的描述或状态 */
+  desc?: string
+  /** 描述文字颜色 */
+  descColor?: string
+  /** 是否隐藏底部分割线 */
+  showSeparator?: boolean
+  /** 点击事件 */
+  onClick?: () => void
+  className?: string
+}
+
+const FlowItem: React.FC<IProps> = (props) => {
+  const {
+    icon,
+    title,
+    time,
+    amount,
+    amountColor,
+    desc,
+    descColor,
+    showSeparator = false,
+    onClick,
+    className
+  } = props
+
+  return (
+    <View
+      className={formatClassNames(
+        styles['flow-item'],
+        className
+      )}
+      onClick={onClick}
+    >
+      <View className={showSeparator ? 'flow-content-no-border' : 'flow-content'}>
+        <View className="flow-item-left">
+          {
+            !isEmpty(icon)
+            ? (
+              <View className="flow-item-icon">
+                <Image
+                  src={icon}
+                  className="icon-img"
+                  mode="aspectFit"
+                />
+              </View>
+            ) : undefined
+          }
+
+          <View className="flow-item-content">
+            {
+              !isEmpty(title)
+              ? (
+                <Text className="flow-item-title">
+                  {title}
+                </Text>
+              )
+              : undefined
+            }
+            {
+              !isEmpty(time)
+              ? (
+                <Text className="flow-item-time">
+                  {time}
+                </Text>
+              )
+              : undefined
+            }
+          </View>
+        </View>
+
+        <View className="flow-item-right">
+          {
+            amount !== undefined
+            ? (
+              <Text
+                className="flow-item-amount"
+                style={amountColor ? { color: amountColor } : {}}
+              >
+                {amount}
+              </Text>
+            )
+            : undefined
+          }
+          {
+            !isEmpty(desc)
+            ? (
+              <Text
+                className="flow-item-desc"
+                style={descColor ? { color: descColor } : {}}
+              >
+                {desc}
+              </Text>
+            )
+            : undefined
+          }
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default React.memo(FlowItem)

package/src/styles/mixin.styl

@@ -0,0 +1,289 @@
+@import '~@src/env/variable.styl'
+
+
+/**
+ * 清除浮动
+ */
+clearfix()
+  &:before,
+  &::after
+    content " "
+    display table
+
+  &::after
+    clear both
+
+  zoom 1
+
+/**
+ * 伪元素实现底部或顶部横线
+ */
+pseudoHLine($direction, $height, $color)
+  position relative
+  &:after
+    content ''
+    position absolute
+    {$direction} 0
+    left 0
+    right 0
+    height $height
+    background-color $color
+    transform scaleY(0.5)
+    transform-origin $direction center
+
+/**
+ * 伪元素实现左边或右边横线
+ */
+pseudoVLine($direction, $width, $color)
+  position relative
+  &:after
+    content ''
+    position absolute
+    {$direction} 0
+    top 0
+    bottom 0
+    width $width
+    background-color $color
+    transform scaleX(0.5)
+    transform-origin $direction center
+
+/**
+ * 文本结尾加省略号
+ */
+textOverflow()
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+
+
+/**
+ * 文本自然换行
+ */
+wordBreak()
+  word-break break-all
+  word-wrap break-word
+  white-space pre-wrap
+
+/**
+ * 三角形
+ */
+triangle($direction, $width, $height, $color)
+  width 0
+  height 0
+
+  if $direction == 'top'
+    border-left ($width / 2) solid transparent
+    border-right ($width / 2) solid transparent
+    border-bottom $height solid $color
+
+  else if $direction == 'right'
+    border-top ($height / 2) solid transparent
+    border-bottom ($height / 2) solid transparent
+    border-left $width solid $color
+
+  else if $direction == 'bottom'
+    border-left ($width / 2) solid transparent
+    border-right ($width / 2) solid transparent
+    border-top $height solid $color
+
+  else // left
+    border-top ($height / 2) solid transparent
+    border-bottom ($height / 2) solid transparent
+    border-right $width solid $color
+
+/**
+ * 居中定位
+ */
+center($way, $vertical = 50%)
+  position $way
+  left 50%
+  top $vertical
+  transform translate(-50%, (-1 * $vertical))
+
+// flex 水平垂直居中
+flexHVCenter()
+  display flex
+  align-items center
+  justify-content center
+
+placeholder($color)
+
+  &::-webkit-input-placeholder  /* WebKit browsers */
+    color $color
+
+  &:-moz-placeholder  /* Mozilla Firefox 4 to 18 */
+    color $color
+
+  &::-moz-placeholder  /* Mozilla Firefox 19+ */
+    color $color
+
+  &:-ms-input-placeholder  /* Internet Explorer 10+ */
+    color $color
+
+
+lineClamp($count)
+  display -webkit-box
+  -webkit-line-clamp $count
+  -webkit-box-orient vertical
+  text-overflow ellipsis
+  overflow hidden
+  white-space normal
+  overflow-wrap break-word
+  word-break break-all
+
+// 设置页面垂直滚动
+scrollView()
+  height 100%
+  overflow-y auto
+  &::-webkit-scrollbar
+    display none
+
+// 设置页面水平滚动
+scrollXView()
+  width 100%
+  overflow-x auto
+  &::-webkit-scrollbar
+    display none
+
+// 设置 padding 安全区域，取最大的一方的值
+// https://juejin.cn/post/6865873665104773128
+// stylus 格式化字符串语法
+// https://www.stylus-lang.cn/docs/operators.html#sprintf
+paddingBottomSafeArea($padding)
+  padding-bottom $padding
+  padding-bottom 'calc(%s + constant(safe-area-inset-bottom))' % $padding
+  padding-bottom 'max(%s, constant(safe-area-inset-bottom))' % $padding
+  padding-bottom 'calc(%s + env(safe-area-inset-bottom))' % $padding
+  padding-bottom 'max(%s, env(safe-area-inset-bottom))' % $padding
+marginBottomSafeArea($margin)
+  margin-bottom $margin
+  margin-bottom 'calc(%s + constant(safe-area-inset-bottom))' % $margin
+  margin-bottom 'max(%s, constant(safe-area-inset-bottom))' % $margin
+  margin-bottom 'calc(%s + env(safe-area-inset-bottom))' % $margin
+  margin-bottom 'max(%s, env(safe-area-inset-bottom))' % $margin
+bottomSafeArea($bottom)
+  bottom $bottom
+  bottom 'calc(%s + constant(safe-area-inset-bottom))' % $bottom
+  bottom 'max(%s, constant(safe-area-inset-bottom))' % $bottom
+  bottom 'calc(%s + env(safe-area-inset-bottom))' % $bottom
+  bottom 'max(%s, env(safe-area-inset-bottom))' % $bottom
+
+// 设置 padding 包括安全区域
+paddingBottomWithSafeArea($padding)
+  padding-bottom $padding
+  padding-bottom 'calc(%s + constant(safe-area-inset-bottom))' % $padding
+  padding-bottom 'calc(%s + env(safe-area-inset-bottom))' % $padding
+marginBottomWithSafeArea($margin)
+  margin-bottom $margin
+  margin-bottom 'calc(%s + constant(safe-area-inset-bottom))' % $margin
+  margin-bottom 'calc(%s + env(safe-area-inset-bottom))' % $margin
+bottomWithSafeArea($bottom)
+  bottom $bottom
+  bottom 'calc(%s + constant(safe-area-inset-bottom))' % $bottom
+  bottom 'calc(%s + env(safe-area-inset-bottom))' % $bottom
+
+pageContainer()
+  background-color $brand-background
+  min-height 100%
+  box-sizing border-box
+
+// 设置背景图片，按分辨率显示
+// 写标准 css，插件会补上浏览器前缀 -webkit-image-set
+setBackgroundImage($1x, $2x, $repeat=no-repeat, $postion=0 0)
+  background $1x $repeat $postion
+  background-image image-set(
+    $1x 1x,
+    $2x 2x
+  )
+
+// 显示滚动条，兼容微信小程序滚动条样式设置
+showScrollbar()
+  &::-webkit-scrollbar
+    display block
+    width 4PX
+  &::-webkit-scrollbar-track
+    background-color #F5F5F5
+    border-radius 2PX
+  &::-webkit-scrollbar-thumb
+    background-color #ccc
+    border-radius 2PX
+  // NOTE: 微信小程序滚动条样式
+  ::-webkit-scrollbar
+    display block
+    width 4PX
+  ::-webkit-scrollbar-track
+    background-color #F5F5F5
+    border-radius 2PX
+  ::-webkit-scrollbar-thumb
+    background-color #ccc
+    border-radius 2PX
+
+@keyframes spin
+  from
+    transform translateX(-50%) rotate(0deg)
+  to
+    transform translateX(-50%) rotate(360deg)
+
+// 定义 halfBorder 函数
+// $position: 边框位置（默认全部，支持 top/right/bottom/left 或组合）
+// $color: 边框颜色（默认继承 currentColor）
+// $radius: 圆角大小（默认 0）
+halfBorder($position = top left right bottom, $color = currentColor, $radius = 0)
+  position relative
+  &::before
+    content ''
+    position absolute
+    top 0
+    left 0
+    width 200%
+    height 200%
+    box-sizing border-box
+    transform scale(0.5)
+    transform-origin left top
+    border-radius $radius // 圆角加倍补偿缩放
+    border-style solid
+    border-width 1PX
+    border-color transparent  // 默认透明
+    pointer-events none
+    z-index 1
+
+     // 添加隔离样式
+    background-clip padding-box
+    -webkit-backface-visibility hidden
+    backface-visibility hidden
+    -webkit-perspective 1000
+    perspective 1000
+
+    // 根据 $position 设置边框颜色
+    if top in $position
+      border-top-color $color
+    if right in $position
+      border-right-color $color
+    if bottom in $position
+      border-bottom-color $color
+    if left in $position
+      border-left-color $color
+
+/**
+ * @param $size 基础字号
+ */
+getPlatformFontSize($size)
+  font-size: unit($size, PX)
+
+  // iOS
+  :global(.is-ios) &
+    font-size: unit($size, PX)
+
+  // Android
+  :global(.is-android) &
+    font-size: unit($size, PX)
+
+// 扩大点击区域
+hitSlot($size)
+  &:after
+    content ''
+    position absolute
+    top ($size * -1)
+    left ($size * -1)
+    right ($size * -1)
+    bottom ($size * -1)

package/src/styles/variable.styl

@@ -0,0 +1,3 @@
+$WING_BLANK = 12PX
+$CARD_BLANK = 10PX
+$GUTTER_BLANK = 10PX

package/src/util/function.ts

@@ -0,0 +1,56 @@
+interface ClassRecord {
+  [key: string]: boolean | string | number
+}
+
+type ClassValue = string | ClassRecord | undefined | null | false
+
+export function formatClassNames(...args: ClassValue[]): string {
+  const classes: string[] = []
+
+  args.forEach(arg => {
+    if (!arg) return
+
+    if (typeof arg === 'string') {
+      classes.push(arg)
+    }
+    else if (typeof arg === 'object') {
+      Object.keys(arg).forEach(key => {
+        if (arg[key]) {
+          classes.push(key)
+        }
+      })
+    }
+  })
+
+  return classes.join(' ')
+}
+
+type EmptyString = '' | ' '
+
+// 定义一个包含所有"空"值的联合类型
+type EmptyValue = null | undefined | EmptyString | [] | Record<string, never> | typeof NaN
+
+// 空值: {}, [], '', '   ', null, undefined, NaN
+export function isEmpty(value: any): value is EmptyValue {
+  if (value == null || Number.isNaN(value)) {
+    return true
+  }
+
+  let isEmpty = false
+  const protoType = Object.prototype.toString.call(value)
+  switch (protoType) {
+    case '[object Object]':
+      isEmpty = Object.keys(value).length === 0
+      break
+    case '[object Array]':
+      isEmpty = value.length === 0
+      break
+    case '[object String]':
+      isEmpty = value.trim().length === 0
+      break
+    default:
+      break
+  }
+
+  return isEmpty
+}