1.0.63

app.json

@@ -1,7 +1,7 @@
 {
   "name": "duxui",
   "description": "DUXUI库",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "dependencies": [
     "duxapp"
   ]

components/Calendar/index.scss

@@ -68,7 +68,7 @@
           /*  #ifndef harmony  */
           right: -1px;
           /*  #endif  */
-          background-color: color.adjust($duxappPrimaryColor, $lightness: 20%);
+          background-color: color.adjust($duxappPrimaryColor, $lightness: 30%);
         }
       }
 

components/Elevator/index.jsx

@@ -1,7 +1,7 @@
-import { useCallback, useRef, useState, createContext, useContext as useReactContext, useMemo } from 'react'
+import { useCallback, useRef, useState, createContext, useContext as useReactContext, useMemo, useEffect } from 'react'
 import { View, Text, Input, Image } from '@tarojs/components'
-import { noop } from '@/duxapp/utils/util'
-import { ScrollView, Layout } from '@/duxapp'
+import { noop, px, pxNum, transformStyle } from '@/duxapp/utils/util'
+import { ScrollView, Layout, Absolute } from '@/duxapp'
 import classNames from 'classnames'
 import searchIcon from './images/search.png'
 import './index.scss'
@@ -48,6 +48,10 @@ export const Elevator = ({
   ...props
 }) => {
 
+  const [select, setSelect] = useState(-1)
+  const currentSelect = useRef(select)
+  currentSelect.current = select
+
   const [scrollTop, setScrollTop] = useState(0)
 
   const [keyword, setKeyword] = useState('')
@@ -67,21 +71,51 @@ export const Elevator = ({
 
   const layouts = useRef([])
 
+  const timer = useRef()
+
+  const navLayout = useRef()
+
+  useEffect(() => {
+    return () => timer.current && clearTimeout(timer.current)
+  }, [])
+
   const layout = useCallback((e, index) => {
     layouts.current[index] = e.height
   }, [])
 
   const toGroup = useCallback(index => {
-    setScrollTop(layouts.current.slice(0, index + 1).reduce((prev, current) => prev + current, 0))
+    if (currentSelect.current === index) {
+      return
+    }
+    currentSelect.current = index
+    setSelect(index)
+    timer.current && clearTimeout(timer.current)
+    if (index !== -1) {
+      timer.current = setTimeout(() => {
+        setSelect(-1)
+      }, 1000)
+      setScrollTop(layouts.current.slice(0, index + 1).reduce((prev, current) => prev + current, 0))
+    }
   }, [])
 
-  // const move = useCallback(e => {
-  //   console.log(e)
-  // }, [])
-
-  // const moveEnd = useCallback(e => {
-  //   console.log(e)
-  // }, [])
+  const move = useCallback(e => {
+    const touch = (e.touches || e.nativeEvent?.touches)?.[0]
+    if (!touch) {
+      return
+    }
+    const len = list.length
+    let index = -1
+    const y = touch.pageY - navLayout.current.top
+    if (y > pxNum(8)) {
+      const maxHeight = navLayout.current.height - pxNum(16)
+      const itemHeight = maxHeight / len
+      index = (y / itemHeight) | 0
+    }
+    if (index > len - 1) {
+      index = len - 1
+    }
+    toGroup(index)
+  }, [list.length, toGroup])
 
   return <context.Provider value={{ keyword, setKeyword }}>
     <View className={`Elevator ${className}`} style={style} {...props}>
@@ -103,18 +137,35 @@ export const Elevator = ({
         {resultList.length === 0 && renderEmpty}
         {renderFooter}
       </ScrollView>
-      {showNav && <View className='Elevator__nav'>
-        <View
+      {showNav && <View className='Elevator__nav'
+        onTouchMove={move}
+      >
+        <Layout
+          onLayout={e => navLayout.current = e}
           className='Elevator__nav__content'
-        // onTouchMove={move}
-        // onTouchEnd={moveEnd}
         >
           {
-            resultList.map((group, groupIndex) => <Text className='Elevator__nav__item' onClick={() => toGroup(groupIndex)} key={group.name}>{group.name}</Text>)
+            resultList.map((group, groupIndex) => <Text
+              className='Elevator__nav__item'
+              onClick={() => toGroup(groupIndex)}
+              key={group.name}
+            >{group.name}</Text>)
           }
-        </View>
+        </Layout>
       </View>}
     </View>
+    {select !== -1 && <Absolute>
+      <View className='Elevator__select'
+        style={{
+          transform: transformStyle({
+            translateX: px(-120),
+            translateY: px(-120),
+          })
+        }}
+      >
+        <Text className='Elevator__select__text'>{list[select].name}</Text>
+      </View>
+    </Absolute>}
   </context.Provider>
 }
 

components/Elevator/index.scss

@@ -1,57 +1,84 @@
 .Elevator {
   flex: 1;
+
   &__group {
     padding: 24px 0;
+
     &__name {
       color: $duxappTextColor1;
       padding: 12px 0 24px 0;
       font-size: 24px;
       font-weight: bold;
       border-bottom: 1px solid #f5f5f5;
     }
+
     &__item {
       padding: 24px 0;
       font-size: 28px;
       color: $duxappTextColor1;
       border-bottom: 1px solid #f5f5f5;
     }
   }
+
   &__nav {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     justify-content: center;
+
     &__content {
       background: #f7f8fa;
       border-radius: 16px;
-      padding: 14px 0;
+      padding: 8px 0;
       align-items: center;
     }
+
     &__item {
       color: $duxappTextColor1;
       padding: 6px 8px;
       font-size: 24px;
       color: #73778e;
     }
   }
+
   &__search {
     height: 72px;
     background: #f7f8fa;
     border-radius: 36px;
     padding: 0 20px;
     align-items: center;
     flex-direction: row;
+
     &__input {
       color: $duxappTextColor1;
       width: 100%;
       margin-left: 20px;
       font-size: 28px;
     }
+
     &__icon {
       width: 40px;
       height: 40px;
       flex-shrink: 0;
     }
   }
+
+  &__select {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-color: rgba(0, 0, 0, 0.6);
+    width: 200px;
+    height: 200px;
+    border-radius: 16px;
+    align-items: center;
+    justify-content: center;
+
+    &__text {
+      color: #fff;
+      font-size: 64px;
+      font-weight: bold;
+    }
+  }
 }

components/Form/InputNumber.d.ts

@@ -0,0 +1,58 @@
+import { RowProps } from '../Flex'
+
+interface type {
+  /** 主色 */
+  primary
+  /** 辅色 */
+  secondary
+  /** 成功 */
+  success
+  /** 错误 */
+  danger
+  /** 警告 */
+  warning
+}
+
+interface InputNumberProps extends RowProps {
+  /**
+   * 音频地址
+   */
+  value?: number
+  /**
+   * 操作值回调
+   */
+  onChange?: (value: number) => void
+  /**
+   * 默认值
+   */
+  defaultValue?: number
+  /**
+   * 步长，默认 1
+   */
+  step?: number
+  /**
+   * 是否开启手动输入
+   */
+  input?: boolean
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 最大值
+   */
+  max?: number
+  /**
+   * 最小值
+   */
+  min?: number
+  /**
+   * 颜色
+   */
+  type?: keyof type
+}
+
+/**
+ * 音频录制表单
+ */
+export const InputNumber: React.FC<InputNumberProps>

components/Form/InputNumber.jsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames'
+import { Column, Row } from '../Flex'
+import { Text } from '../Text'
+import { Form } from './Form'
+import { Input } from './Input'
+import './InputNumber.scss'
+
+export const InputNumber = ({
+  value,
+  onChange,
+  disabled,
+  max,
+  min,
+  step = 1,
+  input,
+  type = 'primary',
+  defaultValue,
+  className,
+  ...props
+}) => {
+
+  const [val, setVal] = Form.useFormItemProxy({ value, onChange, defaultValue })
+
+  const stepPrecision = step.toString().includes('.') ? step.toString().split('.')[1].length : 0
+
+  const click = increment => {
+    if (disabled) return
+
+    let newValue = val || 0
+    newValue = increment === 1 ? newValue + step : newValue - step
+
+    newValue = fixPrecision(newValue, stepPrecision)
+
+    // 如果超出范围，进行修正
+    if (typeof max !== 'undefined' && newValue > max) {
+      newValue = max
+    }
+    if (typeof min !== 'undefined' && newValue < min) {
+      newValue = min
+    }
+
+    // 更新值
+    setVal(newValue)
+  }
+
+  const inputChange = inputValue => {
+
+    let newValue = parseFloat(inputValue)
+
+    // 如果输入为空，允许用户清空
+    if (Number.isNaN(newValue)) {
+      setVal('')
+      return
+    }
+
+    // 修正为步进值的倍数
+    const adjustedValue = fixPrecision(Math.round(newValue / step) * step, stepPrecision)
+
+    // 限制范围
+    if (typeof max !== 'undefined' && adjustedValue > max) {
+      newValue = max
+    } else if (typeof min !== 'undefined' && adjustedValue < min) {
+      newValue = min
+    } else {
+      newValue = adjustedValue
+    }
+
+    setVal(newValue)
+  }
+
+  return <Row className={classNames(`r-1 border-w1 border-${type}`, className)} {...props}>
+    <Column className={classNames(`InputNumber__btn bg-${type}`, (disabled || val <= min) && 'InputNumber__btn--disabled')} justify='center'
+      onClick={() => click(0)}
+    >
+      <Text size={7} color={4}>-</Text>
+    </Column>
+    <Column grow className='InputNumber__value'>
+      {
+        input ?
+          <Input align='center' value={val || 0} type='digit' disabled={disabled} onChange={inputChange} /> :
+          <Text align='center'>{val || 0}</Text>
+      }
+    </Column>
+    <Column className={classNames(`InputNumber__btn bg-${type}`, (disabled || val >= max) && 'InputNumber__btn--disabled')} justify='center'
+      onClick={() => click(1)}
+    >
+      <Text size={7} color={4}>+</Text>
+    </Column>
+  </Row>
+}
+
+const fixPrecision = (value, precision = 2) => {
+  const factor = Math.pow(10, precision)
+  return Math.round(value * factor) / factor
+}

components/Form/InputNumber.scss

@@ -0,0 +1,14 @@
+.InputNumber {
+  &__btn {
+    padding: 0 16px;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &__value {
+    min-width: 80px;
+    padding: 8px;
+  }
+}