@yorkjs/hive-ui 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.0.3",
+  "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'