@yorkjs/hive-ui 2.0.5 → 2.0.7

package/package.json

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

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

@@ -0,0 +1,15 @@
+.has-hitSlop
+  position relative
+  display inline-block
+  vertical-align middle
+
+  &:after
+    content ''
+    position absolute
+    top var(--hit-slop-top, 0)
+    right var(--hit-slop-right, 0)
+    bottom var(--hit-slop-bottom, 0)
+    left var(--hit-slop-left, 0)
+
+    background-color transparent
+    z-index 1

package/src/components/Icon/index.tsx

@@ -1,8 +1,17 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Text } from '@tarojs/components'
 
 import { formatClassNames } from '../../util/function'
 
+import styles from './index.module.styl'
+
+interface HitSlop {
+  top?: number
+  right?: number
+  bottom?: number
+  left?: number
+}
+
 interface IconProps {
   /** 图标名称，对应 iconfont 中的类名后缀 */
   name: string
@@ -16,6 +25,8 @@ interface IconProps {
   style?: React.CSSProperties
   /** 点击事件 */
   onClick?: (event: any) => void
+  /** 扩大选区*/
+  hitSlop?: number | HitSlop
 }
 
 const Icon: React.FC<IconProps> = (props) => {
@@ -25,11 +36,28 @@ const Icon: React.FC<IconProps> = (props) => {
     size,
     className,
     style,
+    hitSlop,
     onClick
   } = props
 
+  const hitSlopVars = useMemo(() => {
+    if (!hitSlop) return {}
+    const { top = 0, right = 0, bottom = 0, left = 0 } =
+      typeof hitSlop === 'number'
+        ? { top: hitSlop, right: hitSlop, bottom: hitSlop, left: hitSlop }
+        : hitSlop
+
+    return {
+      '--hit-slop-top': `-${top}px`,
+      '--hit-slop-right': `-${right}px`,
+      '--hit-slop-bottom': `-${bottom}px`,
+      '--hit-slop-left': `-${left}px`,
+    }
+  }, [hitSlop])
+
   const iconStyle: React.CSSProperties = {
     ...style,
+    ...hitSlopVars,
     lineHeight: 1,
     color: color,
     fontSize: typeof size === 'number' ? `${size}PX` : size
@@ -40,6 +68,7 @@ const Icon: React.FC<IconProps> = (props) => {
       className={formatClassNames(
         'iconfont',
         `icon-${name}`,
+        hitSlop ? styles['has-hitSlop'] : '',
         className)
       }
       style={iconStyle}

package/src/item/FlowItem/index.tsx

@@ -25,7 +25,7 @@ interface IProps {
   desc?: string
   /** 描述文字颜色 */
   descColor?: string
-  /** 是否隐藏底部分割线 */
+  /** 是否显示底部分割线 */
   showSeparator?: boolean
   /** 点击事件 */
   onClick?: () => void
@@ -42,7 +42,7 @@ const FlowItem: React.FC<IProps> = (props) => {
     amountColor,
     desc,
     descColor,
-    showSeparator = false,
+    showSeparator = true,
     onClick,
     className
   } = props
@@ -78,7 +78,7 @@ const FlowItem: React.FC<IProps> = (props) => {
       )}
       onClick={onClick}
     >
-      <View className={showSeparator ? 'flow-content-no-border' : 'flow-content'}>
+      <View className={showSeparator ? 'flow-content' : 'flow-content-no-border'}>
         <View className="flow-item-left">
           {renderIcon()}