@yorkjs/hive-ui 0.0.1 → 0.0.3

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { isAndroid, isApp } from '../../util/env'
+import { formatClassNames } from '../../util/function'
+
+import Icon from '../Icon'
+
+import styles from './index.module.styl'
+
+export interface CheckboxProps {
+  label?: string
+  checked: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  size?: 'normal' | 'large' | 'small'
+  onChange?: (checked: boolean) => void
+  className?: string
+}
+
+const isDark = false
+
+const Checkbox: React.FC<CheckboxProps> = (props) => {
+  const {
+    label,
+    checked = false,
+    disabled = false,
+    readOnly = false,
+    size = 'normal',
+    onChange,
+    className,
+  } = props
+
+  const handlePress = (e: any) => {
+    if (disabled || readOnly) return
+    onChange?.(!checked)
+  }
+
+  const iconSize = size === 'large' ? 36 : (size === 'small' ? 16 : 20)
+
+  const getIconColor = () => {
+    if (disabled) return 'var(--extraColor)'
+    if (checked) return 'var(--primary)'
+    return isDark ? '#ffffff' : 'var(--textPlaceholder)'
+  }
+
+  const iconName = checked ? 'check-circle-fill' : 'circle'
+
+  const iconNode = (
+    <Icon
+      name={iconName}
+      size={`${iconSize}PX`}
+      color={getIconColor()}
+    />
+  )
+
+  const iconElement = useMemo(() => {
+    if (disabled) {
+      return (
+        <View
+          style={{
+            width: `${iconSize}PX`,
+            height: `${iconSize}PX`,
+            borderRadius: `${iconSize / 2}PX`,
+            backgroundColor: 'var(--containerInner)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxSizing: 'border-box'
+          }}
+        >
+          <Icon
+            name={iconName}
+            size={`${iconSize}PX`}
+            color={checked ? 'var(--extraColor)' : 'var(--textPlaceholder)'}
+          />
+        </View>
+      )
+    }
+    return iconNode
+  }, [disabled, checked, iconName, iconSize])
+
+  return (
+    <View
+      onClick={handlePress}
+      className={formatClassNames(
+        styles['checkbox-component'],
+        {
+          [styles['is-checked']]: checked,
+          [styles['is-disabled']]: disabled,
+          [styles['size-large']]: size === 'large',
+          [styles['size-small']]: size === 'small',
+        },
+        className
+      )}
+    >
+      <View className={styles['checkbox-icon-container']}>
+        {iconElement}
+      </View>
+
+      {/* TODO: 临时解决 app 上 Android文字偏上对齐问题 */}
+      {label && (
+        <Text
+          className={formatClassNames(
+            styles['label-text'],
+            {
+              [styles['is-app-android']]: !!(isApp && isAndroid)
+            }
+          )}
+        >
+          {label}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export default React.memo(Checkbox)

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/components/Tag/index.module.styl

@@ -0,0 +1,29 @@
+@import '../../styles/mixin.styl'
+
+.tag-component
+  display inline-flex
+  align-items center
+  justify-content center
+  padding 0 8PX
+  height 20PX
+  line-height 20PX
+  border-radius 4PX
+  text-align center
+  font-size 12PX
+  white-space nowrap
+  box-sizing border-box
+
+  halfBorder(top left right bottom, transparent, 8PX)
+
+  .tag-text
+    line-height 1
+
+.type-default
+  &:before
+    border-color var(--lineBorder)
+  :global(.is-dark)
+    &:before
+      border-color transparent
+
+.type-primary, .type-info, .type-success, .type-error
+  border none

package/src/components/Tag/index.tsx

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export type TagType = 'default'
+  | 'success'
+  | 'info'
+  | 'error'
+  | 'primary'
+  | 'warning'
+  | 'light-info'
+  | 'light-primary'
+  | 'light-success'
+  | 'light-error'
+  | 'light-warning'
+
+interface TagProps {
+  type?: TagType
+  text?: string | React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+const isDark = false
+const Tag: React.FC<TagProps> = ({
+  type = 'default',
+  text,
+  className,
+  style
+}) => {
+
+  const themeSelect = (light: string, dark: string) => (isDark ? dark : light)
+
+  const tagStyle = useMemo(() => {
+    const colors = {
+      primary: 'var(--primary)',
+      success: 'var(--success)',
+      error: 'var(--error)',
+      info: 'var(--textTitle)',
+      warning: 'var(--warning)',
+    }
+
+    const mapping = {
+      default: {
+        color: 'var(--textTitle)',
+        backgroundColor: themeSelect('rgba(255, 255, 255, 0.16)', 'var(--containerInner)'),
+      },
+      info: {
+        color: 'var(--textTitle)',
+        backgroundColor: themeSelect('rgba(245, 245, 245, 1)', 'var(--containerInner)'),
+      },
+      'light-info': {
+        color: 'var(--textMuted)',
+        backgroundColor: themeSelect('rgba(245, 245, 245, 1)', 'var(--containerMedium)'),
+      },
+      warning: {
+        color: '#FFFFFF',
+        backgroundColor: colors.warning,
+      },
+      'light-warning': {
+        color: colors.warning,
+        backgroundColor: 'rgba(255,103,0,0.2)',
+      },
+      primary: {
+        color: '#FFFFFF',
+        backgroundColor: colors.primary,
+      },
+      'light-primary': {
+        color: colors.primary,
+        backgroundColor: 'rgba(255, 103, 0, 0.2)',
+      },
+      success: {
+        color: '#FFFFFF',
+        backgroundColor: colors.success,
+      },
+      'light-success': {
+        color: colors.success,
+        backgroundColor: 'rgba(3, 190, 2, 0.2)',
+      },
+      error: {
+        color: '#FFFFFF',
+        backgroundColor: colors.error,
+      },
+      'light-error': {
+        color: colors.error,
+        backgroundColor: 'rgba(255, 49, 65, 0.2)',
+      },
+    }
+
+    return mapping[type] || mapping.default
+  }, [type])
+
+  return (
+    <View
+      className={formatClassNames(
+        styles['tag-component'],
+        styles[`type-${type}`],
+        className
+      )}
+      style={{
+        backgroundColor: tagStyle.backgroundColor,
+        color: tagStyle.color,
+        ...style
+      }}
+    >
+      <Text
+        className={styles['tag-text']}
+      >
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+export default Tag

package/src/constant/mall.ts

@@ -0,0 +1,22 @@
+// 商品类型
+export const MALL_PRODUCT_TYPE_REAL    = 1
+export const MALL_PRODUCT_TYPE_VIRTUAL = 2
+export const MALL_PRODUCT_TYPE_SERVICE = 3
+
+// 快递发货
+export const MALL_PRODUCT_DELIVERY_TYPE_EXPRESS = 1
+// 到店自提
+export const MALL_PRODUCT_DELIVERY_TYPE_SELF = 2
+// 门店配送
+export const MALL_PRODUCT_DELIVERY_TYPE_SHOP = 3
+// 堂食
+export const MALL_PRODUCT_DELIVERY_TYPE_DINE = 4
+
+// 秒杀活动
+export const PROMOTION_ACTIVITY_TYPE_FLASH = 1
+// 品牌活动
+export const PROMOTION_ACTIVITY_TYPE_BRAND = 2
+// 热点活动
+export const PROMOTION_ACTIVITY_TYPE_HOT   = 3
+//买赠活动
+export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4

package/src/index.ts

@@ -1,3 +1,8 @@
 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 Checkbox } from './components/Checkbox'
+export { default as Tag } from './components/Tag'
 
-export { default as FlowItem } from './item/FlowItem'
+export { default as FlowItem } from './item/FlowItem'
+export { default as ProductCard } from './item/ProductCard'