@yorkjs/hive-ui 2.0.4 → 2.0.6

package/package.json

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

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

@@ -0,0 +1,59 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.section-card-wrapper
+  display flex
+  flex-direction column
+
+  &.show-top-gutter
+    margin-top $GUTTER_BLANK
+
+  &.show-bottom-gutter
+    margin-bottom $GUTTER_BLANK
+
+  &.show-top-blank
+    margin-top 15PX
+
+.section-header
+  padding 0 12PX
+  font-size 15PX
+  color var(--textContent)
+  line-height 21PX
+  margin 0 12PX
+  margin-bottom 11PX
+
+.section-card-body
+  overflow hidden
+
+.main-content
+  padding 13PX 15PX
+  display flex
+  flex-direction row
+  justify-content space-between
+  align-items center
+
+  // &.is-clickable:active
+  //   background-color rgba(0, 0, 0, 0.02)
+
+.info-body
+  flex 1
+  min-width 0
+
+.info-title
+  font-size 16PX
+  color var(--textTitle)
+  line-height 23PX
+  margin-bottom 4PX
+
+.info-desc
+  font-size 12PX
+  color var(--textContent)
+  line-height 17PX
+
+.arrow-box
+  margin-left 12PX
+  flex-shrink 0
+
+.section-footer
+  width 100%
+  border-top 1PX solid var(--lineBorder)

package/src/components/SectionCard/index.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+import Card from '../Card'
+import Icon from '../Icon'
+
+export interface SectionCardProps {
+  /** 顶部的外置标题（如：4月29日） */
+  sectionTitle?: React.ReactNode
+  title?: React.ReactNode
+  /** 中间多行描述 */
+  contents?: React.ReactNode[]
+  arrow?: 'right' | 'down' | 'none'
+  arrowColor?: string
+  /** 底部自定义区域 */
+  children?: React.ReactNode
+  /** 点击回调 */
+  onClick?: () => void
+  /** 外部样式类 */
+  className?: string
+  /** 间距控制属性 */
+  showTopGutter?: boolean
+  showBottomGutter?: boolean
+  showTopBlank?: boolean
+}
+
+const SectionCard: React.FC<SectionCardProps> = (props) => {
+  const {
+    sectionTitle,
+    title,
+    contents = [],
+    children,
+    onClick,
+    className,
+    arrow = 'none',
+    arrowColor = 'var(--textPlaceholder)',
+    showTopGutter = false,
+    showBottomGutter = false,
+    showTopBlank = false,
+  } = props
+
+  const wrapperClass = formatClassNames(
+    styles['section-card-wrapper'],
+    {
+      [styles['show-top-gutter']]: showTopGutter,
+      [styles['show-bottom-gutter']]: showBottomGutter,
+      [styles['show-top-blank']]: showTopBlank,
+    },
+    className
+  )
+
+  return (
+    <View
+      className={wrapperClass}
+    >
+      {
+        sectionTitle
+        ? (
+          <View
+            className={styles['section-header']}
+          >
+            {
+              typeof sectionTitle === 'string'
+              ? (<Text>{sectionTitle}</Text>)
+              : sectionTitle
+            }
+          </View>
+        )
+        : undefined
+      }
+
+      <Card
+        className={styles['section-card-body']}
+      >
+        <View
+          className={formatClassNames(styles['main-content'], {
+            [styles['is-clickable']]: !!onClick
+          })}
+          onClick={onClick}
+        >
+          <View
+            className={styles['info-body']}
+          >
+            {
+              title
+              ? (
+                <View
+                  className={styles['info-title']}
+                >
+                  {
+                    typeof title === 'string'
+                    ? (<Text>{title}</Text>)
+                    : title
+                  }
+                </View>
+              )
+              : undefined
+            }
+            {
+              contents.map((item, index) => (
+                <View
+                  key={index}
+                  className={styles['info-desc']}
+                >
+                  {
+                    typeof item === 'string'
+                    ? (<Text>{item}</Text>)
+                    : item
+                  }
+                </View>
+              ))
+            }
+          </View>
+
+          {
+            arrow && arrow !== 'none'
+            ? (
+              <View
+                className={styles['arrow-box']}
+              >
+                <Icon
+                  name={arrow}
+                  size={14}
+                  color={arrowColor}
+                />
+              </View>
+            )
+            : undefined
+          }
+        </View>
+
+        {
+          children
+          ? (
+            <View
+              className={styles['section-footer']}
+            >
+              {children}
+            </View>
+          )
+          : undefined
+        }
+      </Card>
+    </View>
+  )
+}
+
+export default React.memo(SectionCard)

package/src/index.ts

@@ -1,5 +1,6 @@
 export { setGlobalTheme, useTheme } from './config'
 
+export { default as Card } from './components/Card'
 export { default as NumberKeyboard } from './components/NumberKeyboard'
 export { default as Cell, setCellConfig } from './components/Cell'
 export { default as Icon } from './components/Icon'
@@ -7,10 +8,11 @@ export { default as Checkbox } from './components/Checkbox'
 export { default as Tag } from './components/Tag'
 export { default as FieldCard } from './components/FieldCard'
 export { default as DisplayCard } from './components/DisplayCard'
-export { default as Card } from './components/Card'
+export { default as SectionCard } from './components/SectionCard'
 export { default as RemoteImage } from './components/RemoteImage'
 export { default as Alert } from './components/Alert'
 export { default as Switch } from './components/Switch'
 
 export { default as FlowItem } from './item/FlowItem'
+export { default as ListItem } from './item/ListItem'
 export { default as ProductItem, setProductItemConfig } from './item/ProductItem'

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()}
 

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

@@ -0,0 +1,60 @@
+@import '../../styles/mixin.styl'
+
+$saas_padding = 15PX
+
+.list-item-card
+  padding $saas_padding
+  padding-bottom 0
+  position relative
+
+.card-main-body
+  display flex
+  flex-direction row
+  justify-content space-between
+  align-items flex-start
+  padding-bottom $saas_padding
+
+  &.show-separator
+    halfBorder(bottom, var(--lineBorder))
+
+  &.no-footer
+    padding-bottom $saas_padding
+
+.card-info
+  flex 1
+  display flex
+  flex-direction column
+  min-width 0
+
+.card-title
+  font-size 16PX
+  color var(--textTitle)
+  line-height 23PX
+  margin-bottom 9PX
+  wordBreak()
+
+.card-text-line
+  font-size 14PX
+  color var(--textTitle)
+  line-height 20PX
+  wordBreak()
+  & + .card-text-line
+    margin-top 6PX
+
+.card-right-section
+  margin-left 10PX
+  flex-shrink 0
+  display flex
+  flex-direction row
+  align-items center
+
+  .extra-wrapper
+    display flex
+    align-items center
+
+  .internal-arrow
+    margin-left 10PX
+    flex-shrink 0
+
+.card-footer
+  width 100%

package/src/item/ListItem/index.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+
+import Card from '../../components/Card'
+
+import styles from './index.module.styl'
+import Icon from '../../components/Icon'
+
+export interface ListItemCardProps {
+  /** 标题 */
+  title: React.ReactNode
+  /** 中间多行内容：支持字符串数组或 ReactNode 数组 */
+  contents?: React.ReactNode[]
+  /** 右侧额外区域：完全自定义 Tag */
+  extra?: React.ReactNode
+  /** 是否显示右侧内置箭头 */
+  showArrow?: boolean
+  /** 箭头颜色，默认 #CCCCCC */
+  arrowColor?: string
+  /** 底部操作区域（自定义按钮组等） */
+  footer?: React.ReactNode
+  /** 是否显示顶边距 (通常 10PX) */
+  showTopGutter?: boolean
+  /** 是否显示底边距 (通常 10PX) */
+  showBottomGutter?: boolean
+  /** 是否显示顶部大留白 (通常 16PX) */
+  showTopBlank?: boolean
+  /** 是否显示底部分割线 */
+  showSeparator?: boolean
+  /** 点击主体区域的回调 */
+  onClick?: () => void
+  /** 外部样式 */
+  className?: string
+}
+
+const ListItem: React.FC<ListItemCardProps> = (props) => {
+  const {
+    title,
+    contents = [],
+    extra,
+    showArrow = false,
+    arrowColor = 'var(--textPlaceholder)',
+    footer,
+    showTopGutter,
+    showBottomGutter,
+    showTopBlank,
+    showSeparator = false,
+    onClick,
+    className,
+  } = props
+
+  return (
+    <Card
+      className={formatClassNames(
+        styles['list-item-card'],
+        className
+      )}
+      showTopBlank={showTopBlank}
+      showTopGutter={showTopGutter}
+      showBottomGutter={showBottomGutter}
+    >
+      <View
+        className={
+          formatClassNames(styles['card-main-body'], {
+          [styles['show-separator']]: showSeparator,
+          [styles['no-footer']]: !footer
+        })}
+        onClick={onClick}
+      >
+        <View className={styles['card-info']}>
+          <View className={styles['card-title']}>
+            {
+              typeof title === 'string'
+              ? <Text>{title}</Text>
+              : title
+            }
+          </View>
+
+          {contents.map((item, index) => (
+            <View key={index} className={styles['card-text-line']}>
+              {
+                typeof item === 'string'
+                ? <Text>{item}</Text>
+                : item
+              }
+            </View>
+          ))}
+        </View>
+
+        {(extra || showArrow) && (
+          <View className={styles['card-right-section']}>
+            {
+              extra
+              ? (
+                <View className={styles['extra-wrapper']}>
+                  {extra}
+                </View>
+              )
+              : undefined
+            }
+            {showArrow && (
+              <Icon
+                name="right"
+                size={13}
+                color={arrowColor}
+                className={styles['internal-arrow']}
+              />
+            )}
+          </View>
+        )}
+      </View>
+
+      {
+        footer
+        ? (
+          <View className={styles['card-footer']}>
+            {footer}
+          </View>
+        )
+        : undefined
+      }
+    </Card>
+  )
+}
+
+export default React.memo(ListItem)