@yorkjs/hive-ui 0.0.1 → 0.0.3

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
+  "sideEffects": [
+    "**/*.styl",
+    "**/*.css"
+  ],
   "files": [
     "src"
   ],

package/src/components/Cell/Cell.tsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import CellTitle from './CellTitle'
+import CellValue from './CellValue'
+import CellArrow from './CellArrow'
+
+import styles from './index.module.styl'
+
+export interface CellProps {
+  vertical?: boolean
+  icon?: React.ReactNode
+  title?: React.ReactNode | string
+  placeholder?: string | number
+  value?: string | number
+  content?: React.ReactNode
+  titleWidth?: number
+  tooltip?: string
+  required?: boolean
+  showArrow?: boolean
+  showSeparator?: boolean
+  showTopBorder?: boolean
+  showBottomBorder?: boolean
+  onClick?: () => void
+  className?: string
+  children?: React.ReactNode
+}
+
+const Cell: React.FC<CellProps> = (props) => {
+  const {
+    vertical = false,
+    icon,
+    title,
+    placeholder,
+    value,
+    content,
+    titleWidth,
+    tooltip,
+    required = false,
+    showArrow = false,
+    showSeparator = false,
+    showTopBorder = false,
+    showBottomBorder = false,
+    onClick,
+    className,
+    children
+  } = props
+
+  const containerClass = formatClassNames(
+    styles['cell-container'],
+    vertical ? styles['is-vertical'] : styles['is-horizontal'],
+    {
+      [styles['is-clickable']]: !!onClick,
+      [styles['border-top']]: showTopBorder,
+      [styles['border-bottom']]: showBottomBorder,
+    },
+    className
+  )
+
+  const innerClass = formatClassNames(styles['cell-inner'], {
+    [styles['show-separator']]: showSeparator,
+  })
+
+  const renderContent = () => {
+    if (content) return content
+    if (value != null || placeholder != null) {
+      return (
+        <CellValue
+          value={value}
+          placeholder={placeholder}
+        />
+      )
+    }
+    return null
+  }
+
+  return (
+    <View className={containerClass} onClick={onClick}>
+      <View className={innerClass}>
+        {
+          vertical ? (
+            <>
+              <View className={styles['header-row']}>
+                <View style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  flex: 1
+                }}>
+                  {
+                    icon
+                    ? (
+                      <View className={styles['icon-wrapper']}>
+                        {icon}
+                      </View>
+                    ) : undefined
+                  }
+                  <View className={styles['title-section']}>
+                    {
+                      typeof title === 'string'
+                      ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                      : title
+                    }
+                  </View>
+                </View>
+                {
+                  showArrow
+                  ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
+                  : undefined
+                }
+              </View>
+              <View className={styles['content-section']}>
+                {renderContent()}
+              </View>
+            </>
+          )
+          : (
+            <>
+              {
+                icon
+                ? <View className={styles['icon-wrapper']}>{icon}</View>
+                : undefined
+              }
+              <View
+                className={styles['title-section']}
+                style={titleWidth ? { width: `${titleWidth}px` } : { maxWidth: '60%' }}
+              >
+                {
+                  typeof title === 'string'
+                  ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                  : title
+                }
+              </View>
+              <View className={styles['content-section']}>
+                {renderContent()}
+              </View>
+              {
+                showArrow
+                ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
+                : undefined
+              }
+            </>
+          )
+        }
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export default Cell

package/src/components/Cell/CellArrow.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Icon from '../Icon'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface CellArrowProps {
+  className?: string
+}
+const CellArrow: React.FC<CellArrowProps> = ({
+  className
+}) => (
+  <Icon
+    name="right"
+    className={formatClassNames(
+      styles['arrow-icon'],
+      className
+    )}
+    color="var(--textPlaceholder)"
+    size={12}
+  />
+)
+
+export default CellArrow

package/src/components/Cell/CellCard.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 CellCardProps {
+  className?: string
+  showTopGutter?: boolean
+  showBottomGutter?: boolean
+  showTopBlank?: boolean
+  children?: React.ReactNode
+  onClick?: () => void
+}
+
+const CellCard: React.FC<CellCardProps> = ({
+  showTopGutter = false,
+  showBottomGutter = false,
+  showTopBlank = false,
+  onClick,
+  className,
+  children
+}) => {
+  const combinedClass = formatClassNames(
+    styles['cell-card'],
+    {
+      [styles['show-top-gutter']]: showTopGutter,
+      [styles['show-bottom-gutter']]: showBottomGutter,
+      [styles['show-top-blank']]: showTopBlank,
+      [styles['is-clickable']]: !!onClick,
+    },
+    className
+  )
+
+  return (
+    <View
+      className={combinedClass}
+      onClick={onClick}
+    >
+      {children}
+    </View>
+  )
+}
+
+export default CellCard

package/src/components/Cell/CellDescription.tsx

@@ -0,0 +1,28 @@
+import { View, Text } from "@tarojs/components"
+import { formatClassNames } from "../../util/function"
+
+import styles from './index.module.styl'
+
+export interface CellDescriptionProps {
+  desc: string
+  align?: 'left' | 'center' | 'right'
+  className?: string
+}
+
+const CellDescription: React.FC<CellDescriptionProps> = ({ desc, align = 'left', className }) => {
+  return (
+    <View className={formatClassNames(
+      styles['cell-description'],
+      className)
+    }>
+      <Text
+        className={styles['desc-text']}
+        style={{ textAlign: align }}
+      >
+        {desc}
+      </Text>
+    </View>
+  )
+}
+
+export default CellDescription

package/src/components/Cell/CellGroup.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View, Text, ITouchEvent } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import Icon from '../Icon'
+import { getCellConfig } from './config'
+
+import styles from './index.module.styl'
+
+export interface CellGroupProps {
+  title: string
+  tooltip?: any
+  className?: string
+}
+
+const CellGroup: React.FC<CellGroupProps> = ({ title, tooltip, className }) => {
+  const handleTooltip = (e: ITouchEvent) => {
+    e.stopPropagation()
+
+    const data = { title, tooltip }
+    const config = getCellConfig()
+    config.onTooltipPress(data)
+  }
+
+  return (
+    <View className={formatClassNames(styles['cell-group'], className)}>
+      <Text className={styles['group-text']}>
+        {title}
+      </Text>
+      {
+        tooltip ? (
+          <Icon
+            className={styles['tooltip-icon']}
+            name='question-circle'
+            onClick={handleTooltip}
+            size={14}
+          />
+        )
+        : undefined
+      }
+    </View>
+  )
+}
+
+export default CellGroup

package/src/components/Cell/CellTitle.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { View, Text, ITouchEvent } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import Icon from '../Icon'
+
+import { getCellConfig } from './config'
+
+import styles from './index.module.styl'
+
+export interface CellTitleProps {
+  className?: string
+  required?: boolean
+  title: string
+  tooltip?: any
+  style?: React.CSSProperties
+}
+
+const CellTitle: React.FC<CellTitleProps> = ({
+  required,
+  title,
+  tooltip,
+  style,
+  className
+}) => {
+  const handleTooltip = (e: ITouchEvent) => {
+    e.stopPropagation()
+
+    const data = { title, tooltip }
+    const config = getCellConfig()
+    config.onTooltipPress(data)
+  }
+
+  return (
+    <View className={formatClassNames(
+      styles['title-view'],
+      className,
+    )}>
+      {
+        required
+        ? (
+          <Icon
+            name="asterisk"
+            color="#FF0000"
+            size={7}
+            className={styles['required-icon']}
+          />
+        )
+        : undefined
+      }
+      <Text className={styles['title-text']} style={style}>
+        {title}
+      </Text>
+      {
+        tooltip
+        ? (
+          <Icon
+            className={styles['tooltip-icon']}
+            name='question-circle'
+            onClick={handleTooltip}
+            size={14}
+          />
+        )
+        : undefined
+      }
+    </View>
+  )
+}
+
+export default CellTitle

package/src/components/Cell/CellValue.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Text } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface CellValueProps {
+  className?: string
+  value?: string | number
+  placeholder?: string | number
+  maxLines?: number
+}
+
+const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, className }) => {
+  const hasValue = value !== undefined && value !== null && value !== ''
+
+    const dynamicStyle: React.CSSProperties = maxLines !== 1 ? {
+      WebkitLineClamp: maxLines,
+    } : {}
+
+  if (hasValue) {
+    return (
+      <Text
+        className={formatClassNames(
+          styles['value-text'],
+          className
+        )}
+        style={dynamicStyle}
+      >
+        {value}
+      </Text>
+    )
+  }
+
+  if (placeholder !== undefined && placeholder !== null) {
+    return (
+      <Text className={formatClassNames(
+        styles['placeholder-text'],
+        className
+      )}>
+        {placeholder}
+      </Text>
+    )
+  }
+
+  return null
+}
+
+export default CellValue

package/src/components/Cell/config.ts

@@ -0,0 +1,13 @@
+let onTooltipPress = (data: { title: string; tooltip: any }) => {
+  console.log('触发 Tooltip:', data)
+}
+
+export const setCellConfig = (config: { onTooltipPress: typeof onTooltipPress }) => {
+  if (config.onTooltipPress) {
+    onTooltipPress = config.onTooltipPress
+  }
+}
+
+export const getCellConfig = () => ({
+  onTooltipPress
+})

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

@@ -0,0 +1,145 @@
+@import '../../styles/mixin.styl'
+
+$CELL_PADDING_HORIZONTAL = 16PX
+$CELL_PADDING_VERTICAL = 14PX
+$TITLE_FONT_SIZE = 16PX
+$VALUE_FONT_SIZE = 14PX
+$DESC_FONT_SIZE = 13PX
+
+.cell-card
+  border-radius 10PX
+  overflow hidden
+  background-color var(--containerCard)
+  margin 0 $WING_BLANK
+  &.show-top-gutter
+    margin-top $GUTTER_BLANK
+  &.show-bottom-gutter
+    margin-bottom $GUTTER_BLANK
+  &.show-top-blank
+    margin-top $CARD_BLANK
+
+.cell-description
+  padding 6PX $CELL_PADDING_HORIZONTAL 0 $CELL_PADDING_HORIZONTAL
+  .desc-text
+    color var(--textMuted)
+    font-size $DESC_FONT_SIZE
+    line-height calc($DESC_FONT_SIZE + 6PX)
+    display block
+
+.cell-group
+  display flex
+  flex-direction row
+  align-items center
+  margin 0 $WING_BLANK
+  padding 20PX $CELL_PADDING_HORIZONTAL 8PX $CELL_PADDING_HORIZONTAL
+  .group-text
+    color var(--textMuted)
+    font-size $VALUE_FONT_SIZE
+
+.cell-container
+  background-color var(--containerCard)
+  padding 0 $CELL_PADDING_HORIZONTAL
+  position relative
+  transition background-color 0.1s
+
+  &.border-top
+    halfBorder(top, var(--lineBorder))
+
+  &.border-bottom
+    halfBorder(bottom, var(--lineBorder))
+
+  &.is-clickable
+    cursor pointer
+    &:active
+      background-color rgba(0, 0, 0, 0.03)
+
+.cell-inner
+  padding $CELL_PADDING_VERTICAL 0
+  display flex
+  flex-direction column
+  position relative
+
+  &.show-separator
+    halfBorder(bottom, var(--lineBorder))
+
+.is-horizontal
+  .cell-inner
+    flex-direction row
+    align-items center
+
+  .title-section
+    flex-shrink 0
+    margin-right 10PX
+
+  .content-section
+    flex 1
+    display flex
+    flex-direction row
+    justify-content flex-end
+    align-items center
+    text-align right
+
+.is-vertical
+  .header-row
+    display flex
+    flex-direction row
+    align-items center
+    justify-content space-between
+    width 100%
+
+  .title-section
+    flex 1
+
+  .content-section
+    margin-top 8PX
+    width 100%
+    display flex
+    flex-direction row
+    justify-content flex-start
+    text-align left
+
+.icon-wrapper
+  margin-right 12PX
+  display flex
+  align-items center
+  justify-content center
+
+.title-view
+  display flex
+  flex-direction row
+  align-items center
+  position relative
+
+.title-text
+  color var(--textTitle)
+  font-size $TITLE_FONT_SIZE
+  line-height 1.4
+
+.required-icon
+  position absolute
+  left -10PX
+  top 7PX
+
+.tooltip-icon
+  margin-left 4PX
+  color var(--textMuted)
+  display flex
+  align-items center
+
+.value-text
+  color var(--textContent)
+  font-size $VALUE_FONT_SIZE
+  line-height 1.4
+  lineClamp(1)
+
+.placeholder-text
+  color var(--textPlaceholder)
+  font-size $VALUE_FONT_SIZE
+  line-height 1.4
+
+.arrow-wrapper
+  margin-left 6PX
+  display flex
+  align-items center
+  color var(--textPlaceholder)
+  font-size 12PX

package/src/components/Cell/index.tsx

@@ -0,0 +1,24 @@
+import CellMain from './Cell'
+import CellGroup from './CellGroup'
+import CellCard from './CellCard'
+import CellTitle from './CellTitle'
+import CellValue from './CellValue'
+import CellArrow from './CellArrow'
+import CellDescription from './CellDescription'
+
+export type { CellProps } from './Cell'
+export type { CellCardProps } from './CellCard'
+export type { CellTitleProps } from './CellTitle'
+
+export { setCellConfig } from './config'
+
+const Cell = Object.assign(CellMain, {
+  Group: CellGroup,
+  Card: CellCard,
+  Title: CellTitle,
+  Value: CellValue,
+  Arrow: CellArrow,
+  Description: CellDescription
+})
+
+export default Cell

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

@@ -0,0 +1,68 @@
+@import '../../styles/mixin.styl'
+
+.checkbox-component
+  display flex
+  flex-direction row
+  align-items center
+  cursor pointer
+  position relative
+
+  &:active
+    &:not(.is-disabled)
+      opacity 0.7
+
+  &:after
+    position absolute
+    content ''
+    top -6PX
+    bottom -6PX
+    left -6PX
+    right -6PX
+
+  // 选中状态文字颜色
+  &.is-checked
+    .label-text
+      color var(--primary)
+
+  // ✨ 禁用状态逻辑：不使用透明度
+  &.is-disabled
+    cursor not-allowed
+    .label-text
+      color var(--textPlaceholder)
+
+  // 大尺寸样式
+  &.size-large
+    .checkbox-icon-container
+      width 36PX
+      height 36PX
+    .label-text
+      font-size 16PX
+      margin-left 12PX
+
+  &.size-small
+    .checkbox-icon-container
+      width 16PX
+      height 16PX
+    .label-text
+      font-size 12PX
+      margin-left 6PX
+
+  // 图标容器
+  .checkbox-icon-container
+    display flex
+    align-items center
+    justify-content center
+    width 20PX
+    height 20PX
+    line-height 1
+    flex-shrink 0 // 防止被压缩
+    overflow visible
+
+  // 文字样式
+  .label-text
+    color var(--textContent)
+    font-size 13PX
+    margin-left 6PX
+    line-height 1
+    &.is-app-android
+      padding-top 1.5PX