@yorkjs/hive-ui 0.1.2 → 0.1.4

package/package.json

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

package/src/components/Cell/Cell.tsx

@@ -23,6 +23,8 @@ export interface CellProps {
   showSeparator?: boolean
   showTopBorder?: boolean
   showBottomBorder?: boolean
+  clickable?: boolean
+  readOnly?: boolean
   onClick?: () => void
   className?: string
   children?: React.ReactNode
@@ -43,18 +45,25 @@ const Cell: React.FC<CellProps> = (props) => {
     showSeparator = false,
     showTopBorder = false,
     showBottomBorder = false,
+    clickable,
+    readOnly = false,
     onClick,
     className,
     children
   } = props
 
+  const finalRequired = readOnly ? false : required
+  const finalShowArrow = readOnly ? false : showArrow
+  const isClickable = readOnly ? false : (clickable !== undefined ? clickable : !!onClick)
+
   const containerClass = formatClassNames(
     styles['cell-container'],
     vertical ? styles['is-vertical'] : styles['is-horizontal'],
     {
-      [styles['is-clickable']]: !!onClick,
+      [styles['is-clickable']]: isClickable,
       [styles['border-top']]: showTopBorder,
       [styles['border-bottom']]: showBottomBorder,
+      [styles['is-readonly']]: readOnly
     },
     className
   )
@@ -77,7 +86,10 @@ const Cell: React.FC<CellProps> = (props) => {
   }
 
   return (
-    <View className={containerClass} onClick={onClick}>
+    <View
+      className={containerClass}
+      onClick={readOnly ? undefined : onClick}
+    >
       <View className={innerClass}>
         <View className={styles['cell-main']}>
           {
@@ -101,13 +113,19 @@ const Cell: React.FC<CellProps> = (props) => {
                     <View className={styles['title-section']}>
                       {
                         typeof title === 'string'
-                        ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                        ? (
+                          <CellTitle
+                            title={title}
+                            required={finalRequired}
+                            tooltip={tooltip}
+                          />
+                        )
                         : title
                       }
                     </View>
                   </View>
                   {
-                    showArrow
+                    finalShowArrow
                     ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
                     : undefined
                   }
@@ -130,7 +148,13 @@ const Cell: React.FC<CellProps> = (props) => {
                 >
                   {
                     typeof title === 'string'
-                    ? <CellTitle title={title} required={required} tooltip={tooltip} />
+                    ? (
+                      <CellTitle
+                        title={title}
+                        required={finalRequired}
+                        tooltip={tooltip}
+                      />
+                    )
                     : title
                   }
                 </View>
@@ -138,7 +162,7 @@ const Cell: React.FC<CellProps> = (props) => {
                   {renderContent()}
                 </View>
                 {
-                  showArrow
+                  finalShowArrow
                   ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
                   : undefined
                 }

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: '堂食',