@yorkjs/hive-ui 0.1.2 → 0.1.3

package/package.json

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

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

@@ -0,0 +1,56 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+$CELL_PADDING_HORIZONTAL = 10PX
+$CELL_PADDING_VERTICAL = 15PX
+$LABEL_MARGIN_RIGHT = 20PX
+
+.display-card
+  padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
+  background-color var(--containerCard)
+  margin 0 $WING_BLANK
+  border-radius 10PX
+  &.show-top-gutter
+    margin-top $GUTTER_BLANK
+  &.show-bottom-gutter
+    margin-bottom $GUTTER_BLANK
+  &.show-top-blank
+    margin-top $CARD_BLANK
+
+  .card-header
+    display flex
+    justify-content space-between
+    align-items center
+    margin-bottom 15PX
+
+    .header-title
+      font-size 16PX
+      font-weight bold
+      color var(--textTitle)
+
+    .header-extra
+      font-size 14PX
+      color var(--textMuted)
+
+  .info-row
+    display flex
+    flex-direction row
+    align-items flex-start
+    margin-bottom 15PX
+    &:last-child
+      margin-bottom 0
+
+    .info-label
+      font-size 14PX
+      color var(--textContent)
+      flex-shrink 0
+      margin-right $LABEL_MARGIN_RIGHT
+      min-width 70PX
+
+    .info-value
+      flex 1
+      font-size 14PX
+      color var(--textTitle)
+      word-break break-all
+      display flex
+      flex-direction row

package/src/components/DisplayCard/index.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import styles from './index.module.styl'
+import { formatClassNames } from '../../util/function'
+
+interface IRowProps {
+  label: React.ReactNode
+  value?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}
+
+const InfoRow: React.FC<IRowProps> = ({
+  label,
+  value,
+  children,
+  className
+}) => (
+  <View
+    className={formatClassNames(styles['info-row'], className)}
+  >
+    <View className={styles['info-label']}>
+      {
+        typeof label === 'string'
+          ? <Text>{label}</Text>
+          : label
+      }
+    </View>
+    <View className={styles['info-value']}>
+      {children || value || '-'}
+    </View>
+  </View>
+)
+
+interface IBlockProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+const InfoBlock: React.FC<IBlockProps> = ({
+  children,
+  className
+}) => (
+  <View
+    className={className}
+  >
+    {children}
+  </View>
+)
+
+interface ICardProps {
+  title?: React.ReactNode
+  showTopGutter?: boolean
+  showBottomGutter?: boolean
+  showTopBlank?: boolean
+  extra?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+const DisplayCardMain: React.FC<ICardProps> = ({
+  title,
+  extra,
+  children,
+  className,
+  style,
+  showTopGutter = false,
+  showBottomGutter = false,
+  showTopBlank = false,
+}) => {
+  return (
+    <View
+      className={formatClassNames(
+        styles['display-card'],
+        {
+          [styles['show-top-gutter']]: showTopGutter,
+          [styles['show-bottom-gutter']]: showBottomGutter,
+          [styles['show-top-blank']]: showTopBlank,
+        },
+        className
+      )}
+      style={style}
+    >
+      {
+        (title || extra)
+        ? (
+          <View className={styles['card-header']}>
+            <View className={styles['header-title']}>
+              {
+                typeof title === 'string'
+                  ? <Text>{title}</Text>
+                  : title
+              }
+            </View>
+            {
+              extra ? (
+                <View className={styles['header-extra']}>
+                  {extra}
+                </View>
+              )
+              : undefined
+            }
+          </View>
+        )
+        : undefined
+      }
+      <View className={styles['card-content']}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+const DisplayCard = Object.assign(DisplayCardMain, {
+  Row: InfoRow,
+  Block: InfoBlock,
+})
+
+export default DisplayCard

package/src/constant/mall.ts

@@ -2,6 +2,8 @@
 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_TYPE_COMBO = 4
 
 // 快递发货
 export const MALL_PRODUCT_DELIVERY_TYPE_EXPRESS = 1

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as Icon } from './components/Icon'
 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 FlowItem } from './item/FlowItem'
 export { default as ProductItem, setProductItemConfig } from './item/ProductItem'

package/src/item/ProductItem/ProductItem.tsx

@@ -20,13 +20,14 @@ import {
   PROMOTION_ACTIVITY_TYPE_HOT,
   PROMOTION_ACTIVITY_TYPE_PRESENT,
   PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT,
+  MALL_PRODUCT_TYPE_COMBO,
 } from '../../constant/mall'
 import { getProductItemConfig } from './config'
 
 import styles from './index.module.styl'
 
 export interface IProductCardLabels {
-  product_type?: { real: string; virtual: string; service: string }
+  product_type?: { real: string; virtual: string; service: string; combo: string }
   delivery_type?: { dine: string; self_pickup: string; delivery: string }
   activity_type?: { flash: string; brand: string; hot: string; present: string; full_discount: string }
   present_badge?: string
@@ -181,6 +182,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
       color: '#03BE02',
       text: labels.product_type?.service
     },
+    [MALL_PRODUCT_TYPE_COMBO] : {
+      color: '#E4B700',
+      text: labels.product_type?.combo
+    },
   }
     const item = colorMap[productType]
     if (!item) return null

package/src/item/ProductItem/config.ts

@@ -5,7 +5,8 @@ let globalLabels: IProductCardLabels = {
   product_type: {
     real: '实物',
     virtual: '虚拟',
-    service: '服务'
+    service: '服务',
+    combo: '套餐'
   },
   delivery_type: {
     dine: '堂食',