@yorkjs/hive-ui 2.0.2 → 2.0.4

package/package.json

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

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

@@ -0,0 +1,24 @@
+@import '../../styles/mixin.styl'
+
+.switch-component
+  &.is-readonly
+    opacity 0.8
+    cursor default
+  &.is-disabled
+    cursor not-allowed
+
+  :global
+    .weui-switch, .wx-switch-input
+      border-color var(--switch-inactive-color) !important
+      background-color var(--switch-inactive-color) !important
+
+      &:before
+        background-color var(--switch-inactive-color) !important
+        border-color var(--switch-inactive-color) !important
+
+      &:checked, &.wx-switch-input-checked
+        border-color var(--switch-active-color) !important
+        background-color var(--switch-active-color) !important
+        &:before
+          background-color var(--switch-active-color) !important
+          border-color var(--switch-active-color) !important

package/src/components/Switch/index.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react'
+import { BaseEventOrig, Switch as TaroSwitch } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+
+import { useTheme } from '../../config'
+
+import styles from './index.module.styl'
+
+export interface SwitchProps {
+  /** 是否选中 */
+  checked?: boolean
+  /** 改变事件 */
+  onChange?: (checked: boolean) => void
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 只读状态 */
+  readOnly?: boolean
+  /** 自定义类名 */
+  className?: string
+  /** 选中时的背景颜色 (不传则使用主题色) */
+  color?: string
+}
+
+const Switch: React.FC<SwitchProps> = (props) => {
+  const {
+    checked = false,
+    onChange,
+    disabled = false,
+    readOnly = false,
+    className,
+    color,
+  } = props
+
+  const { isDark, themeSelect } = useTheme()
+
+  const colors = useMemo(() => {
+    let activeTrack = color || 'var(--primary)'
+    let inactiveTrack = themeSelect('#CCCCCC', 'var(--containerInner)')
+
+    if (disabled) {
+      activeTrack = '#ffc097'
+      inactiveTrack = '#E6E6E6'
+    }
+
+    return {
+      activeTrack,
+      inactiveTrack,
+    }
+  }, [color, disabled, themeSelect])
+
+    const handleChange = (e: BaseEventOrig<{ value: boolean }>) => {
+    if (disabled || readOnly) return
+    onChange?.(e.detail.value)
+  }
+
+  const dynamicStyle = {
+    '--switch-active-color': colors.activeTrack,
+    '--switch-inactive-color': colors.inactiveTrack,
+  } as React.CSSProperties
+
+  return (
+    <TaroSwitch
+      checked={checked}
+      disabled={disabled || readOnly}
+      color={colors.activeTrack}
+      onChange={handleChange}
+      style={dynamicStyle}
+      className={formatClassNames(
+        styles['switch-component'],
+        {
+          [styles['is-readonly']]: readOnly,
+          [styles['is-disabled']]: disabled,
+        },
+        className
+      )}
+    />
+  )
+}
+
+export default React.memo(Switch)

package/src/index.ts

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

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

@@ -38,6 +38,7 @@
       margin-right 10PX
       flex 1
       overflow hidden
+      min-width 0
 
     .flow-item-icon
       flex-shrink 0
@@ -51,11 +52,16 @@
       justify-content center
       padding 2PX
       box-sizing border-box
+      overflow hidden
 
       .icon-img
         width 100%
         height 100%
 
+    .flow-item-icon-custom
+      flex-shrink 0
+      margin-right 10PX
+
     .flow-item-content
       flex 1
       display flex
@@ -63,14 +69,29 @@
       justify-content center
       align-items flex-start
       overflow hidden
+      min-width 0
+
+      .flow-item-title-row
+        display flex
+        flex-direction row
+        align-items center
+        width 100%
+        overflow hidden
 
       .flow-item-title
         font-size 16PX
         color var(--textTitle)
         text-align left
-        width 100%
+        flex-shrink 1
+        min-width 0
         lineClamp(1)
 
+      .flow-item-title-extra
+        flex-shrink 0
+        margin-left 5PX
+        display flex
+        align-items center
+
       .flow-item-time-container
         display flex
         margin-top 5PX

package/src/item/FlowItem/index.tsx

@@ -10,9 +10,11 @@ import styles from './index.module.styl'
 
 interface IProps {
   /** 左侧图标链接 */
-  icon?: string
+  icon?: string | React.ReactNode
   /** 标题 */
   title?: string
+  /** 标题右侧的额外内容（如标签、状态） */
+  titleExtra?: React.ReactNode
   /** 时间或下方副标题 */
   time?: string | React.ReactNode
   /** 右侧金额 */
@@ -35,6 +37,7 @@ const FlowItem: React.FC<IProps> = (props) => {
     icon,
     title,
     time,
+    titleExtra,
     amount,
     amountColor,
     desc,
@@ -44,6 +47,29 @@ const FlowItem: React.FC<IProps> = (props) => {
     className
   } = props
 
+  const renderIcon = () => {
+    if (isEmpty(icon)) return null
+
+    if (typeof icon === 'string') {
+      return (
+        <View className="flow-item-icon">
+          <Image
+            src={icon}
+            className="icon-img"
+            mode="aspectFit"
+          />
+        </View>
+      )
+    }
+
+    // 如果是自定义元素
+    return (
+      <View className="flow-item-icon-custom">
+        {icon}
+      </View>
+    )
+  }
+
   return (
     <View
       className={formatClassNames(
@@ -54,29 +80,30 @@ const FlowItem: React.FC<IProps> = (props) => {
     >
       <View className={showSeparator ? 'flow-content-no-border' : 'flow-content'}>
         <View className="flow-item-left">
-          {
-            !isEmpty(icon)
-            ? (
-              <View className="flow-item-icon">
-                <Image
-                  src={icon}
-                  className="icon-img"
-                  mode="aspectFit"
-                />
-              </View>
-            ) : undefined
-          }
+          {renderIcon()}
 
           <View className="flow-item-content">
-            {
-              !isEmpty(title)
-              ? (
-                <Text className="flow-item-title">
-                  {title}
-                </Text>
-              )
-              : undefined
-            }
+
+            <View className="flow-item-title-row">
+              {
+                !isEmpty(title)
+                ? (
+                  <Text className="flow-item-title">
+                    {title}
+                  </Text>
+                )
+                : undefined
+              }
+              {
+                !isEmpty(titleExtra)
+                ? (
+                  <View className="flow-item-title-extra">
+                    {titleExtra}
+                  </View>
+                )
+                : undefined
+              }
+            </View>
             {
               !isEmpty(time)
               ? (