1.0.45

Author: ShaoGongBra

Readme.md

@@ -13,7 +13,7 @@ yarn duxapp app add duxui
 ## 示例
 
 - 小程序 （小程序搜索 duxui）
-- APP https://app.share.dux.plus/com.duxapp.duxui
+- APP https://app.share.dux.plus/cn.duxapp.duxui
 - H5 https://example.duxui.cn
 
 ## 文档

app.js

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

app.json

@@ -1,3 +1,20 @@
+# 1.0.45
+
+## Recorder
+新增录音表单组建，用于录音上传
+
+## Upload
+完善对视频、图片上传的预览功能
+
+## Step
+新增 `lineType` 指定线条的类型
+
+## Cascade
+修复对RN的兼容
+
+## Types
+修复多个组建的types提示
+
 # 1.0.41
 
 ## 主要更改

changelog.md

@@ -12,7 +12,7 @@ interface CardSelectGroupProps {
   checkedProps?: {
     /** 选中时背景颜色 */
     color?: string
-    /** 是否实心 */
+    /** 是否镂空 */
     plain?: boolean
     /** 是否有边框 */
     border?: boolean
@@ -28,7 +28,7 @@ interface CardSelectProps extends ViewProps {
   value: string | number
   /** 是否选中 */
   checked?: boolean
-  /** 是否实心 */
+  /** 是否镂空 */
   plain?: boolean
   /** 颜色 */
   color?: string

components/CardSelect/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, CSSProperties, RefForwardingComponent } from 'react'
+import { ReactElement, CSSProperties, FC } from 'react'
 
 interface DropDownMenuItem {
   /**
@@ -49,6 +49,6 @@ interface DropDownProps {
 /**
  * 下拉菜单组件
  */
-export declare const DropDown: RefForwardingComponent<{
-  close: () => void
-}, DropDownProps>
+export const DropDown: FC<DropDownProps> & {
+  ref?: Ref<MenuItemClickHandler>
+}

components/DropDown/index.d.ts

@@ -1,4 +1,7 @@
 {
+  "voice-right": 59083,
+  "voice-right_01": 59146,
+  "voice-right_02": 59147,
   "roundcheckfill": 58966,
   "roundcheck": 58967,
   "backspace": 58930,

components/DuxuiIcon/icons.json

@@ -1,6 +1,9 @@
 import { ComponentType, Component, CSSProperties } from 'react'
 
 interface names {
+  'voice-right'
+  'voice-right_01'
+  'voice-right_02'
   'roundcheckfill'
   'roundcheck'
   'backspace'

components/DuxuiIcon/index.d.ts

@@ -4,7 +4,7 @@ import { font, px } from '@/duxapp/utils'
 import icons from './icons.json'
 import './index.scss'
 
-font.load('DuxuiIcon', 'https://pictcdn.client.jujiang.me/fonts/DuxuiIcon.1709522237756.ttf')
+font.load('DuxuiIcon', 'https://pictcdn.client.jujiang.me/fonts/DuxuiIcon.1728705176383.ttf')
 
 export const DuxuiIcon = ({ name, color, size, style, className, ...props }) => {
 

components/DuxuiIcon/index.jsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, FC } from 'react'
 import { ViewProps } from '@tarojs/components'
 
 interface CascadeData {
@@ -69,4 +69,4 @@ interface CascadeProps extends ViewProps {
 /**
  * 级联选择组件
  */
-export const Cascade: React.FC<CascadeProps>
+export const Cascade: FC<CascadeProps>

components/Form/Cascade.d.ts

@@ -1,5 +1,5 @@
 import { View } from '@tarojs/components'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ScrollView, duxappTheme, recursionGetValue } from '@/duxapp'
 import classNames from 'classnames'
 import { Divider } from '../Divider'
@@ -321,7 +321,7 @@ const DefaultRender = ({
             group.map((item, index) => {
               const isSelect = select[groupIndex] === index
               return <View key={index} className='Cascade__left__label' onClick={() => labelClick(groupIndex, index, item)}>
-                <Text style={{ color: isSelect ? duxappTheme.primaryColor : '#373D52' }} className='Cascade__left__label__title'>{item[nameKey]}</Text>
+                <Text style={{ color: isSelect ? duxappTheme.primaryColor : duxappTheme.textColor1 }} className='Cascade__left__label__title'>{item[nameKey]}</Text>
                 {!isRadio && groupIndex === 0 && checkNumbers[index] > 0 && !anyLevel && <View style={{ color: isSelect ? duxappTheme.primaryColor : '#73778E' }} className='Cascade__left__label__select'>已选
                   <Text className='Cascade__left__label__select__num'>{checkNumbers[index]}</Text>
                 </View>}
@@ -336,20 +336,23 @@ const DefaultRender = ({
         {
           right.map((item, index) => {
             const isSelect = isRadio ? value === item[valueKey] : value?.includes?.(item[valueKey])
-            return <View key={'item' + index} className='Cascade__right__item' style={{ borderBottom: '1px solid rgba(180,180,180,0.3)' }} onClick={() => rightClick(item)}>
-              <Text style={{ color: isSelect ? duxappTheme.primaryColor : '#373D52' }} className='Cascade__right__item__label'>{item[nameKey]}</Text>
-              <DuxuiIcon
-                className='Cascade__right__item__icon'
-                color={isSelect ? duxappTheme.primaryColor : '#373D52'}
-                name={
-                  !isRadio ? (
-                    isSelect ? 'xuanzhong' : 'xuanzekuang'
-                  ) : (
-                    isSelect ? 'add_check1' : 'option'
-                  )
-                }
-              />
-            </View>
+            return <Fragment key={'item' + index}>
+              {!!index && <Divider />}
+              <View className='Cascade__right__item' onClick={() => rightClick(item)}>
+                <Text style={{ color: isSelect ? duxappTheme.primaryColor : duxappTheme.textColor1 }} className='Cascade__right__item__label'>{item[nameKey]}</Text>
+                <DuxuiIcon
+                  className='Cascade__right__item__icon'
+                  color={isSelect ? duxappTheme.primaryColor : duxappTheme.textColor1}
+                  name={
+                    !isRadio ? (
+                      isSelect ? 'xuanzhong' : 'xuanzekuang'
+                    ) : (
+                      isSelect ? 'add_check1' : 'option'
+                    )
+                  }
+                />
+              </View>
+            </Fragment>
           })
         }
       </ScrollView>

components/Form/Cascade.jsx

@@ -1,5 +1,4 @@
 .Cascade {
-  width: 100%;
   height: 300px;
   flex-direction: row;
 

components/Form/Cascade.scss

@@ -26,9 +26,13 @@ interface type {
 
 interface GradeProps extends SpaceProps {
   /**
-   * 当前评分值
+   * 当前评分值 1-5
    */
-  value: number
+  value?: number
+  /**
+   * 默认值 1-5
+   */
+  defaultValue?: number
   /**
    * 值变化回调函数
    */

components/Form/Grade.d.ts

@@ -3,39 +3,47 @@ import { DuxuiIcon } from '../DuxuiIcon'
 import { Text } from '../Text'
 import { Space } from '../Space'
 import { Row } from '../Flex'
+import { Form } from './Form'
 import './Grade.scss'
 
 const arr = [...new Array(5)]
 
 export const Grade = ({
   value,
   onChange,
+  defaultValue,
   size = 'm',
   type = 'primary',
   ...props
 }) => {
 
-  const values = value ? ('' + value).split('.') : []
+  const [val, setVal] = Form.useFormItemProxy({
+    value,
+    onChange,
+    defaultValue
+  })
+
+  const values = val ? ('' + val).split('.') : []
 
   return <Space row items='center' size={16} {...props}>
     <Row items='center'>
       {arr.map((item, index) => {
         return <Text
-          type={index < value ? type : void 0}
-          color={index < value ? void 0 : 3}
+          type={index < val ? type : void 0}
+          color={index < val ? void 0 : 3}
           key={index}
-          onClick={() => onChange?.(index + 1)}
+          onClick={() => setVal?.(index + 1)}
           className={classNames('Grade--' + size)}
         >
           <DuxuiIcon
-            name={index < value ? 'collection-fill' : 'collection'} onClick={() => {
+            name={index < val ? 'collection-fill' : 'collection'} onClick={() => {
               // RN安卓端外面的事件不触发 触发了此处
-              onChange?.(index + 1)
+              setVal?.(index + 1)
             }}
           />
         </Text>
       })}
     </Row>
-    {!!value && <Text type={type}>{values[0]}.{values[1] || 0}</Text>}
+    {!!val && <Text type={type}>{values[0]}.{values[1] || 0}</Text>}
   </Space>
 }

components/Form/Grade.jsx

@@ -0,0 +1,56 @@
+import { Upload } from '../../../duxapp/utils/net'
+import { GridProps } from '../Grid'
+
+interface RecorderProps extends GridProps {
+  /**
+   * 音频地址
+   */
+  value?: string | string[]
+  /**
+   * 操作值回调
+   */
+  onChange?: (value: string | string[]) => void
+  /**
+   * 每行显示多少
+   * 默认4
+   */
+  column?: number
+  /**
+   * 最多允许录制多少音频
+   * 默认 1
+   * 传入 1 相当于单个录制，value是字符串类型，大于1是多个录制，value是数组类型
+   */
+  max?: number
+  /** 是否禁用 */
+  disabled?: boolean
+  /**
+   * 录制提示文本
+   */
+  tip?: string
+  /** 传递给上传临时文件函数的选项 */
+  option?: Upload.Option
+}
+
+/**
+ * 音频录制表单
+ */
+export const Recorder: React.FC<RecorderProps> & {
+
+  /**
+   * 弹出音频录制功能，异步返回录制的值
+   */
+  start: () => Promise<{
+    /**
+     * 临时文件位置
+     */
+    path: string
+    /**
+     * 录音大小
+     */
+    size: number
+    /**
+     * 录音时长 ms
+     */
+    duration: number
+  }>
+}