Merge pull request #1807 from XiaoMi/develop

Develop

CHANGELOG.md

@@ -1,4 +1,32 @@
 # 更新日志
+# 3.7.0
+- 新增 `Message` 组件 onClick、onClose方法[#1727](https://github.com/XiaoMi/hiui/issues/1727)
+- 新增 `From` 组件 setListItemFieldsValue 方法, 设置表单中From.List的指定项的值[#1760](https://github.com/XiaoMi/hiui/issues/1760)
+- 新增 `Table` 组件 onLoadChildren 方法, 树形表格下异步加载子数据 [#1725](https://github.com/XiaoMi/hiui/issues/1725)
+- 新增 `Badge` 组件 offset 属性设置状态点的位置偏移 [#1786](https://github.com/XiaoMi/hiui/issues/1786)
+- 新增 `Slider` 组件 showRangeLabel 属性设置是否显示范围值 [#1783](https://github.com/XiaoMi/hiui/issues/1783)
+- 优化 `Table` 组件树形表格，允许控制指定节点的展开收起 [#1784](https://github.com/XiaoMi/hiui/issues/1784)
+- 优化 `Grid` 组件接受原生属性 [#1609](https://github.com/XiaoMi/hiui/issues/1609)
+- 优化 `Select` onChang 回调方法中，获取全部选项详细内容 [#1726](https://github.com/XiaoMi/hiui/issues/1726)
+- 优化 `Form` 组件允许 FormItem 中的表单类组件设置 value [#1741](https://github.com/XiaoMi/hiui/issues/1741)
+- 优化 `Table` 组件 showColHighlight 属性，修改内部触发逻辑 [#1759](https://github.com/XiaoMi/hiui/issues/1759)
+- 优化 `Table` 组件 render 自定义渲染函数，可以获取列的位置 [#1808](https://github.com/XiaoMi/hiui/issues/1808)
+- 优化 `Tree` 组件文字较多折行时，遮盖问题 [#1768](https://github.com/XiaoMi/hiui/issues/1768)
+- 修复 `Table` 组件表头吸顶问题 [#1789](https://github.com/XiaoMi/hiui/issues/1789)
+- 修复 `Tree` 编辑形态，不能输入空格问题 [#1768](https://github.com/XiaoMi/hiui/issues/1768)
+- 修复 `Select` disabled 情况下，输入框仍能删除选项问题 [#1707](https://github.com/XiaoMi/hiui/issues/1707)
+- 修复 `Table` 组件表头分组中使用 fixedToColumn 属性导致表头错乱 [#1732](https://github.com/XiaoMi/hiui/issues/1732)
+- 修复 `Upload` 组件 onRemove 回调 api 导致外部引用闭包的问题 [#1739](https://github.com/XiaoMi/hiui/issues/1739)
+- 修复 `Form` 组件 Form.Item 子节点 onChange 方法中设置表单值异常问题 [#1745](https://github.com/XiaoMi/hiui/issues/1745)
+- 修复 `Table` 组件 批量选择形态中，在 data 为空数组时，表头全选项会默认勾选问题 [#1749](https://github.com/XiaoMi/hiui/issues/1749)
+- 修复 `Table` 组件 批量选择形态中，表格禁用行，全选时会被勾选问题 [#1752](https://github.com/XiaoMi/hiui/issues/1752)
+- 修复 `Tree` 组件 editable 受控状态下，编辑菜单显示问题 [#1761](https://github.com/XiaoMi/hiui/issues/1761)
+- 修复 `Tree` LegacyTree 组件 draggable 为 true 时，节点展开且无法选中节点问题 [#1781](https://github.com/XiaoMi/hiui/issues/1781)
+- 修复 `Slider` 组件 max、min 受控问题，Modal 中不能拖拽 [#1783](https://github.com/XiaoMi/hiui/issues/1783)
+- 修复 `DatePicker` 组件 yearrange、monthrange 无法通过 min、max 限制时间区间问题 [#1780](https://github.com/XiaoMi/hiui/issues/1780)
+- 修复 `Form` 组件值校验问题 [#1802](https://github.com/XiaoMi/hiui/issues/1802)
+- 修复 `Tree` 自定义右侧菜单参数错误问题 [#1812](https://github.com/XiaoMi/hiui/issues/1812)
+- 修复 `Tree` 在 onBeforeSave 返回 false后依然可以新增子节点问题 [#1813](https://github.com/XiaoMi/hiui/issues/1813)
 
 # 3.6.1
 - 修复部分组件 'regeneratorRuntime is not defined' 问题 [#1719](https://github.com/XiaoMi/hiui/issues/1719)
@@ -237,4 +265,4 @@
 ## 1.x
 
 [更新日志汇总](https://github.com/XiaoMi/hiui/blob/stable/1.x/CHANGELOG.md)
-
+

components/badge/Badge.js

@@ -20,13 +20,14 @@ class Badge extends Component {
     visible: true
   }
 
-  render () {
-    const { content, prefixCls, max, type, visible, style } = this.props
+  render() {
+    const { content, prefixCls, max, type, visible, style, color, offset = [] } = this.props
+    const [left, top] = offset
     const badage =
       type === 'dot' ? (
-        <span className={`${prefixCls}-dot`} />
+        <span className={`${prefixCls}-dot`} style={{ backgroundColor: color, left, top }} />
       ) : (
-        <span className={`${prefixCls}-value`}>
+        <span className={`${prefixCls}-value`} style={{ backgroundColor: color, left, top }}>
           {typeof content === 'number' ? (content > max ? max + '+' : content) : content}
         </span>
       )

components/badge/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+
+interface BadgeProps {
+  content?: string | number
+  type?:'bubble' | 'dot'
+  max?: number
+  visible?: boolean
+  color?: string
+  offset?: [number | string, number | string]
+}
+
+declare class Badge extends React.Component<BadgeProps, any> {}
+
+export default Badge

components/badge/style/index.scss

@@ -20,6 +20,7 @@
     color: use-color('white');
     letter-spacing: 0;
     text-align: center;
+    z-indx: 1;
 
     &.hi-hide {
       display: none;
@@ -35,6 +36,7 @@
     background: get-color($palette-secondary, 'danger');
     border: 1px solid use-color('white');
     border-radius: 50%;
+    z-index: 1;
 
     &.hi-hide {
       display: none;

components/breadcrumb/index.d.ts

@@ -0,0 +1,16 @@
+type DataItem = {
+  content: string | JSX.Element
+  path?: string
+  href?: boolean
+  icon?: string
+  target?: '_self' | '_blank' | '_parent' | '_top'
+}
+
+interface Props {
+  data: DataItem[]
+  separator?: string
+  onClick?: (path: string) => void
+
+}
+declare const Breadcrumb: React.ComponentType<Props>
+export default Breadcrumb

components/button/index.d.ts

@@ -1,4 +1,4 @@
-interface ButtonProps {
+export interface ButtonProps {
   type?: 'primary' | 'line' | 'success' | 'danger' | 'default' | 'warning'
   size?: 'large' | 'small' | 'normal' | 'default'
   appearance?: 'button' | 'link'

components/card/index.d.ts

@@ -10,6 +10,7 @@ interface Props {
   content?: string | JSX.Element
   style?: CSSProperties
   className?: string
+  showHeaderDivider?: boolean
 }
 declare class Card extends React.Component<Props, any> {
 }

components/checkbox/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react"
 
 type DataItem = {
-  content: string
+  content: string | number
   id: string | number
   disabled?: boolean
 }

components/date-picker/TimePicker.d.ts

@@ -1,5 +1,8 @@
 interface TimeProps extends CommonProps {
   type?: 'default' | 'timerange'
+  hourStep?: number
+  minuteStep?: number
+  secondStep?: number
   disabledHours?: () => number[]
   disabledMinutes?: (selectedHour: number) => number[]
   disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]

components/date-picker/hooks/useCalenderData.js

@@ -37,15 +37,52 @@ const getYearOrMonthRows = ({ originDate, renderDate, type, view, range, localeD
           col.type = 'selected'
           col.range = false
         }
+        // 判断年月可选状态
+        const _y = currentYM.year()
+        const _m = currentYM.month()
+        if (disabledDate && view.includes('year')) {
+          col.type = disabledDate(_y) ? 'disabled' : col.type
+        }
+        if (disabledDate && view.includes('month')) {
+          col.type = disabledDate(_y + '-' + _m) ? 'disabled' : col.type
+        }
+        // 年的状态
+        if (view.includes('year') && (min || max)) {
+          if (min) {
+            const minYear = moment(min).year()
+            col.type = _y < minYear ? 'disabled' : col.type
+          }
+          if (max) {
+            const maxYear = moment(max).year()
+            col.type = _y > maxYear ? 'disabled' : col.type
+          }
+        }
+
+        if (view.includes('month') && (min || max)) {
+          if (min) {
+            const minMoment = moment(min)
+            const minYear = minMoment.year()
+            const minMonth = minMoment.month()
+            col.type = _y < minYear ? 'disabled' : col.type
+            col.type = _y === minYear && _m < minMonth ? 'disabled' : col.type
+          }
+          if (max) {
+            const maxMoment = moment(max)
+            const maxYear = maxMoment.year()
+            const maxMonth = maxMoment.month()
+            col.type = _y > maxYear ? 'disabled' : col.type
+            col.type = _y === maxYear && _m > maxMonth ? 'disabled' : col.type
+          }
+        }
         continue
       }
       if (originDate && (y === originDate.year() || y === originDate.month())) {
         col.type = 'selected'
       }
+
       // 判断年月可选状态
       const _y = currentYM.year()
       const _m = currentYM.month()
-
       if (disabledDate && view.includes('year')) {
         col.type = disabledDate(_y) ? 'disabled' : col.type
       }
@@ -147,7 +184,6 @@ const getDateRows = ({ originDate, range, type, weekOffset, min, max, renderDate
           isPN = true
         }
       }
-
       if (isDisabled) {
         col.type = 'disabled'
       }

components/date-picker/index.d.ts

@@ -19,6 +19,8 @@ export interface CommonProps {
   clearable?: boolean
   placeholder?: string | string[]
   format?: string
+  inputReadOnly?: boolean
+  timeInterval?: number
   onChange?: (date: Date | DateRange, dateStr: string | DateRangeString) => void
   onSelect?: (date: Date, isCompleted: boolean) => void
 }

components/dropdown/index.d.ts

@@ -5,7 +5,9 @@ type DataItem = {
   id: string | number
   disabled?: boolean
   href?: string
+  target?: '_self' | '_blank' | '_parent' | '_top'
 }
+
 interface TriggersArray {
   [index: number]: 'click' | 'contextmenu' | 'hover'
 }

components/form/Form.js

@@ -41,13 +41,14 @@ const InternalForm = (props) => {
   const { fields, listNames, listValues } = _Immutable.current.currentState()
   // 用户手动设置表单数据
   const setFieldsValue = useCallback(
-    (values) => {
+    (values = {}, listcoordinate) => {
+      const _values = _.cloneDeep(values)
       const _fields = _Immutable.current.currentStateFields()
       const { listNames } = _Immutable.current.currentState()
       _fields.forEach((item) => {
         const { field } = item
         // eslint-disable-next-line no-prototype-builtins
-        if (values.hasOwnProperty(field)) {
+        if (_values.hasOwnProperty(field)) {
           const value = values[field]
           item.value = value
           item.setValue(value)
@@ -60,19 +61,39 @@ const InternalForm = (props) => {
         })
       })
       // 处理 list value
-      Object.keys(values).forEach((key) => {
+      Object.keys(_values).forEach((key) => {
         if (listNames.includes(key)) {
           _Immutable.current.setState({ type: FILEDS_REMOVE_LIST, payload: key })
           _Immutable.current.setState({
             type: FILEDS_UPDATE_LIST,
-            payload: { [key]: values[key] }
+            payload: { [key]: _values[key] }
           })
         }
       })
       dispatch({ type: FILEDS_UPDATE_STATE })
     },
     [fields, listValues, listNames, _Immutable]
   )
+  // 更新指定listItem的值
+  const setListItemFieldsValue = useCallback(
+    (listcoordinate = []) => {
+      const _fields = _Immutable.current.currentStateFields()
+
+      if (listcoordinate && listcoordinate.length) {
+        listcoordinate.forEach((coordinate) => {
+          _fields.forEach((item) => {
+            const { name, row, listname, setValue, updateField } = item
+            const { name: updateName, listname: updateListName, row: updateRow, value } = coordinate
+            if (updateListName === listname && name === updateName && row === updateRow) {
+              setValue(value)
+              updateField(value)
+            }
+          })
+        })
+      }
+    },
+    [fields]
+  )
   // 转换值的输出
   const internalValuesChange = useCallback(
     (changeValues, allValues) => {
@@ -245,7 +266,7 @@ const InternalForm = (props) => {
           const { field, value } = item
           values[field] = value
         })
-      return values
+      return transformValues(values, fields)
     },
     [fields, _Immutable]
   )
@@ -283,7 +304,8 @@ const InternalForm = (props) => {
     getFieldsValue,
     clearValidates,
     getFieldsError,
-    updateFormSchema
+    updateFormSchema,
+    setListItemFieldsValue
   }))
   return (
     <form