@yorkjs/hive-ui 0.0.1 → 0.0.2

package/package.json

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

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/Icon/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Text } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+interface IconProps {
+  /** 图标名称，对应 iconfont 中的类名后缀 */
+  name: string
+  /** 图标颜色 */
+  color?: string
+  /** 图标大小，默认单位为 PX */
+  size?: number | string
+  /** 自定义类名 */
+  className?: string
+  /** 自定义样式 */
+  style?: React.CSSProperties
+  /** 点击事件 */
+  onClick?: (event: any) => void
+}
+
+const Icon: React.FC<IconProps> = (props) => {
+  const {
+    name,
+    color,
+    size,
+    className,
+    style,
+    onClick
+  } = props
+
+  const iconStyle: React.CSSProperties = {
+    ...style,
+    lineHeight: 1,
+    color: color,
+    fontSize: typeof size === 'number' ? `${size}PX` : size
+  }
+
+  return (
+    <Text
+      className={formatClassNames(
+        'iconfont',
+        `icon-${name}`,
+        className)
+      }
+      style={iconStyle}
+      onClick={onClick}
+    />
+  )
+}
+
+export default React.memo(Icon)

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

@@ -14,8 +14,26 @@
       background-color var(--containerInner)
       halfBorder(top, var(--lineBorder))
 
-      .header-placeholder
+      .header-side
         flex 1
+        height 100%
+        display flex
+        align-items center
+
+        &.side-right
+          justify-content flex-end
+
+      .header-main
+        flex 2
+        display flex
+        align-items center
+        justify-content center
+        overflow hidden
+
+        .header-title
+          font-size 14PX
+          color var(--textContent)
+          lineClamp(1)
 
       .done-btn
         height 100%
@@ -29,7 +47,6 @@
       .done-text
         font-size 18PX
         color var(--primary)
-        font-weight 500
 
     .keyboard-grid
       display flex
@@ -67,8 +84,4 @@
 
     .key-text
       font-size 24PX
-      color var(--textTitle)
-
-    .delete-icon
-      width 22PX
-      height 22PX
+      color var(--textTitle)

package/src/components/NumberKeyboard/index.tsx

@@ -3,9 +3,11 @@ import { View, Text, Image } from '@tarojs/components'
 
 import { formatClassNames } from '../../util/function'
 
+import Icon from '../Icon'
+
 import styles from './index.module.styl'
 
-type KeyboardType = 'int' | 'number'
+type KeyboardType = 'int' | 'number' | 'idCard'
 
 interface IProps {
   /** 键盘类型：int(整数), number(带小数点) */
@@ -16,6 +18,8 @@ interface IProps {
   onDelete: () => void
   /** 是否显示头部状态栏 */
   showHead?: boolean
+   /** 标题 */
+  title?: string
   /** 完成按钮文案 */
   doneText?: string
   /** 完成按钮点击 */
@@ -30,13 +34,20 @@ const NumberKeyboard: React.FC<IProps> = (props) => {
     onInsert,
     onDelete,
     showHead = false,
+    title,
     doneText = '完成',
     onDone,
     className
   } = props
 
   const keys = useMemo(() => {
-    const leftBottomKey = type === 'number' ? '.' : ''
+    let leftBottomKey = ''
+    if (type === 'number') {
+      leftBottomKey = '.'
+    }
+    else if (type === 'idCard') {
+      leftBottomKey = 'X'
+    }
     return ['1', '2', '3', '4', '5', '6', '7', '8', '9', leftBottomKey, '0', 'delete']
   }, [type])
 
@@ -55,9 +66,20 @@ const NumberKeyboard: React.FC<IProps> = (props) => {
         showHead
         ? (
           <View className="keyboard-header">
-            <View className="header-placeholder" />
-            <View className="done-btn" onClick={onDone}>
-              <Text className="done-text">{doneText}</Text>
+            <View className="header-side" />
+
+            <View className="header-main">
+              {title && (
+                <Text className="header-title" numberOfLines={1}>
+                  {title}
+                </Text>
+              )}
+            </View>
+
+            <View className="header-side side-right">
+              <View className="done-btn" onClick={onDone}>
+                <Text className="done-text">{doneText}</Text>
+              </View>
             </View>
           </View>
         ) : undefined
@@ -81,9 +103,9 @@ const NumberKeyboard: React.FC<IProps> = (props) => {
               {
                 isDelete
                 ? (
-                  <Image
-                    className="delete-icon"
-                    src="https://img.finstao.com/3ccf71a6e53be5a99c02b0dd7e9ed8c0.png"
+                  <Icon
+                    name="delete"
+                    size={22}
                   />
                 )
                 : (

package/src/index.ts

@@ -1,3 +1,5 @@
 export { default as NumberKeyboard } from './components/NumberKeyboard'
+export { default as Cell, setCellConfig } from './components/Cell'
+export { default as Icon } from './components/Icon'
 
 export { default as FlowItem } from './item/FlowItem'