@yorkjs/hive-ui 0.1.3 → 0.1.5

package/package.json

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

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

@@ -0,0 +1,14 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.card
+  border-radius 10PX
+  overflow hidden
+  background-color var(--containerCard)
+  margin 0 $WING_BLANK
+  &.show-top-gutter
+    margin-top $GUTTER_BLANK
+  &.show-bottom-gutter
+    margin-bottom $GUTTER_BLANK
+  &.show-top-blank
+    margin-top $CARD_BLANK

package/src/components/Card/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface CardProps {
+  className?: string
+  showTopGutter?: boolean
+  showBottomGutter?: boolean
+  showTopBlank?: boolean
+  children?: React.ReactNode
+  onClick?: () => void
+}
+
+const CellCard: React.FC<CardProps> = ({
+  showTopGutter = false,
+  showBottomGutter = false,
+  showTopBlank = false,
+  onClick,
+  className,
+  children
+}) => {
+  const combinedClass = formatClassNames(
+    styles['card'],
+    {
+      [styles['show-top-gutter']]: showTopGutter,
+      [styles['show-bottom-gutter']]: showBottomGutter,
+      [styles['show-top-blank']]: showTopBlank,
+    },
+    className
+  )
+
+  return (
+    <View
+      className={combinedClass}
+      onClick={onClick}
+    >
+      {children}
+    </View>
+  )
+}
+
+export default CellCard

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

@@ -1,4 +1,5 @@
 @import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
 
 $CELL_PADDING_HORIZONTAL = 16PX
 $CELL_PADDING_VERTICAL = 14PX

package/src/index.ts

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