Merge pull request #1487 from XiaoMi/develop

3.3.0
XiaoMi · Dec 31, 2020 · c40c393 · c40c393
2 parents ee16ce6 + 889c98b
commit c40c393
Show file tree

Hide file tree

Showing 100 changed files with 2,274 additions and 938 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,31 @@
 # 更新日志
 
+## 3.3.0
+- 新增 `Card` 模式模式下 loading 加载中状态 [#1454](https://github.com/XiaoMi/hiui/issues/1454)
+- 新增 `Table` loading 加载中状态 [#1466](https://github.com/XiaoMi/hiui/issues/1466)
+- 新增 `Table` 列冻结结合树形使用 [#1424](https://github.com/XiaoMi/hiui/issues/1424)
+- 新增 `Table` rowSelection getCheckboxConfig 方法配置行选择 [#1444](https://github.com/XiaoMi/hiui/issues/1444)
+- 新增 `SelectTree` valueRender 自定义渲染 Input 中展示内容 [#1407](https://github.com/XiaoMi/hiui/issues/1407)
+- 新增 `SelectTree` 通过关键字异步搜索功能 [#1479](https://github.com/XiaoMi/hiui/issues/1479)
+- 修复 `Input` type = textarea 的时候，className 设置无效 [#1458](https://github.com/XiaoMi/hiui/issues/1458)
+- 修复 `Form` 在页面渲染完成后 调用中 setFieldsValue 无效问题 [#1408](https://github.com/XiaoMi/hiui/issues/1408)
+- 修复 `Form` 在 Form.Item 中调用 setFieldsValue 数据获取错误 [#1456](https://github.com/XiaoMi/hiui/issues/1456)
+- 修复 `Rate` 组件在快速移动显示异常问题 [#1410](https://github.com/XiaoMi/hiui/issues/1410)
+- 修复 `DatePicker` type 不受控问题 [#1401](https://github.com/XiaoMi/hiui/issues/1401)
+- 修复 `DatePicker` 点击空白区域触发 onChange 问题 [#1477](https://github.com/XiaoMi/hiui/issues/1477)
+- 修复 `DatePicker` 跨年或跨月选择周，数据显示错误 [#1476](https://github.com/XiaoMi/hiui/issues/1476)
+- 修复 `Select` 下拉框默认选中行显示错误 [#1405](https://github.com/XiaoMi/hiui/issues/1405)
+- 修复 `DatePicker` 在 type 为 daterange 时候，传入不合法日期，面板显示异常 [#1418](https://github.com/XiaoMi/hiui/issues/1418)
+- 修复 `Table` 对其他组件造成的样式污染问题 [#1428](https://github.com/XiaoMi/hiui/issues/1428)
+- 修复 `Table` 数据为空时右侧冻结展示不正确的问题 [#1473](https://github.com/XiaoMi/hiui/issues/1473)
+- 修复 `Tree` onDrop 回调函数参数不正确的问题 [#1425](https://github.com/XiaoMi/hiui/issues/1425)
+- 修复 `Select` 异步多选值返显问题 [#1425](https://github.com/XiaoMi/hiui/issues/1425)
+- 修复 `Modal` confirm 方法为适配主题色的问题 [#1446](https://github.com/XiaoMi/hiui/issues/1446)
+- 修复 `Loading` children 不存在时，设置 visible 为 false 无效的问题 [#1461](https://github.com/XiaoMi/hiui/issues/1461)
+- 优化 `Tabs` 组件弹出层样式[#1437](https://github.com/XiaoMi/hiui/issues/1437)
+- 优化 `DatePicker` 类型为 week 时输入框显示内容以及周起始方式 [#1475](https://github.com/XiaoMi/hiui/issues/1475)
+- 优化 `Progress` width、height 属性支持传入String类型 [#1480](https://github.com/XiaoMi/hiui/issues/1480)
+
 ## 3.2.0
 
 - 新增 HiUI 基础样式 css 文件 [#1338](https://github.com/XiaoMi/hiui/issues/1338)

diff --git a/components/_util/EventEmitter.js b/components/_util/EventEmitter.js
@@ -0,0 +1,27 @@
+class EventEmitter {
+  constructor() {
+    this.event = {}
+  }
+
+  // 监听
+  on(type, listener) {
+    this.event[type] = listener
+  }
+
+  // 触发事件
+  emit(type, ...arg) {
+    console.log(this.event)
+    this.event[type] && this.event[type](...arg)
+  }
+
+  removeListener(type) {
+    if (this.event[type]) {
+      delete this.event[type]
+    }
+  }
+
+  removeAll(type) {
+    this.event = {}
+  }
+}
+export default new EventEmitter()
diff --git a/components/_util/hi-request/axios.js b/components/_util/hi-request/axios.js
@@ -4,8 +4,7 @@ const callBackInter = new Map()
 
 const axiosInstance = axios.create({
   type: 'basics',
-  url: '',
-  responseType: 'json'
+  url: ''
 })
 
 axiosInstance.interceptors.request.use(

diff --git a/components/_util/hi-request/download.js b/components/_util/hi-request/download.js
@@ -1,24 +1,33 @@
 import axiosIns from './axios'
 
 const download = (options, host) => {
-  const { filename = '未命名' } = options
+  const { filename } = options
   const url = host ? host + options.url : options.url
 
   // 设置类型，防止出现乱码
   Object.assign(options, { responseType: 'blob' })
-  axiosIns({ ...options, url }).then(
+  return axiosIns({ ...options, url }).then(
     (res) => {
-      const { downloadSuccess } = options
+      const { downloadSuccess, fileType } = options
       const blob = new window.Blob([res.data])
       const downloadElement = document.createElement('a')
-      const href = window.URL.createObjectURL(blob) // 创建下载的链接
+      let serverFilename = filename
+      if (!filename) {
+        const contentdisposition = res && res.headers && res.headers['content-disposition']
+        serverFilename = contentdisposition && decodeURI(contentdisposition.split(';')[1].split('filename=')[1])
+      }
+
+      const href = window.URL.createObjectURL(blob, {
+        type: fileType
+      }) // 创建下载的链接
       downloadElement.href = href
-      downloadElement.download = filename // 下载后文件名
+      downloadElement.download = serverFilename || '未命名' // 下载后文件名
       document.body.appendChild(downloadElement)
       downloadElement.click() // 点击下载
       document.body.removeChild(downloadElement) // 下载完成移除元素
       window.URL.revokeObjectURL(href) // 释放blob对象
       downloadSuccess && downloadSuccess(res)
+      return res
     },
     (error) => {
       const { downloadFail } = options

diff --git a/components/_util/hi-request/index.js b/components/_util/hi-request/index.js
@@ -10,21 +10,23 @@ import axiosIns, { axios } from './axios'
  */
 
 const InternalRequest = (options, host) => {
-  const { type = 'basics' } = options
+  const { type = 'basics', responseType = 'json' } = options
   const url = host ? host + options.url : options.url
   if (type === 'jsonp' || type === 'download') {
-    return type === 'jsonp' ? jsonp : download
+    return type === 'jsonp' ? jsonp(options, host) : download(options, host)
   }
   return axiosIns(
     type === 'upload'
       ? {
           url,
           method: 'post',
+          responseType,
           ...upload(options).options
         }
       : {
           url,
           type: 'basics',
+          responseType,
           ...options
         }
   )

diff --git a/components/card/NormalCard.jsx b/components/card/NormalCard.jsx
@@ -1,7 +1,19 @@
 import React from 'react'
 import classNames from 'classnames'
+import Loading from '../loading'
 
-const NormalCard = ({ children, size, title, extra, showHeaderDivider, style, className, hoverable, bordered }) => {
+const NormalCard = ({
+  children,
+  size,
+  title,
+  extra,
+  showHeaderDivider,
+  style,
+  className,
+  hoverable,
+  bordered,
+  loading
+}) => {
   return (
     <div
       className={classNames('hi-card', className, showHeaderDivider ? 'hi-card--standard' : 'hi-card--normal', {
@@ -17,7 +29,13 @@ const NormalCard = ({ children, size, title, extra, showHeaderDivider, style, cl
           {extra}
         </div>
       )}
-      <div className="hi-card__content">{children}</div>
+      {loading !== undefined ? (
+        <Loading visible={loading}>
+          <div className="hi-card__content">{children}</div>
+        </Loading>
+      ) : (
+        <div className="hi-card__content">{children}</div>
+      )}
     </div>
   )
 }

diff --git a/components/card/index.js b/components/card/index.js
@@ -17,7 +17,8 @@ const Card = ({
   children,
   showHeaderDivider,
   type,
-  bordered = true
+  bordered = true,
+  loading
 }) => {
   if (cover || coverUrl) {
     return (
@@ -52,6 +53,7 @@ const Card = ({
         showHeaderDivider={showHeaderDivider}
         hoverable={hoverable}
         bordered={bordered}
+        loading={loading}
       >
         {children}
       </NormalCard>

diff --git a/components/carousel/index.d.ts b/components/carousel/index.d.ts
@@ -4,7 +4,7 @@ interface Props {
   showArrows?: boolean
   defaultActive?: number
   showPages?: boolean
-  children: JSX.Element
+  children: JSX.Element[]
 }
 declare const Carousel: React.ComponentType<Props>
 export default Carousel
diff --git a/components/cascader/Cascader.js b/components/cascader/Cascader.js
@@ -137,7 +137,7 @@ const Cascader = (props) => {
         }
       }
     },
-    [changeOnSelect, expandTrigger]
+    [changeOnSelect, expandTrigger, onChange, cascaderValue, popperShow]
   )
 
   const clearValue = useCallback(

diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js
@@ -7,25 +7,28 @@ const prefixCls = 'hi-checkbox'
 
 class Checkbox extends Component {
   static displayName = 'Checkbox'
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = getChecked(props)
   }
-  static getDerivedStateFromProps (nextProps) {
+
+  static getDerivedStateFromProps(nextProps) {
     if (hasChecked(nextProps)) {
       return getChecked(nextProps)
     }
     return null
   }
-  handleChange = event => {
+
+  handleChange = (event) => {
     const { onChange } = this.props
     onChange && onChange(event)
     hasChecked(this.props) ||
       this.setState({
         checked: event.target.checked
       })
   }
-  render () {
+
+  render() {
     const {
       autoFocus,
       className,
@@ -35,15 +38,11 @@ class Checkbox extends Component {
       style,
       theme,
       name,
-      value
+      value,
+      focusable = true
     } = this.props
     const { checked } = this.state
-    const checkboxCls = classNames(
-      prefixCls,
-      className,
-      disabled && `${prefixCls}--disabled`,
-      `theme__${theme}`
-    )
+    const checkboxCls = classNames(prefixCls, className, disabled && `${prefixCls}--disabled`, `theme__${theme}`)
     const inputCls = classNames(
       `${prefixCls}__input`,
       checked && !indeterminate && `${prefixCls}__input--checked`,
@@ -52,18 +51,17 @@ class Checkbox extends Component {
     return (
       <label className={checkboxCls} style={style}>
         <input
-          type='checkbox'
+          type="checkbox"
           autoFocus={autoFocus}
           onChange={this.handleChange}
           checked={checked}
           disabled={disabled}
           name={name}
           value={value}
+          tabIndex={focusable ? 0 : -1}
         />
         <span className={inputCls} />
-        {children !== undefined && (
-          <span className={`${prefixCls}__text`}>{children}</span>
-        )}
+        {children !== undefined && <span className={`${prefixCls}__text`}>{children}</span>}
       </label>
     )
   }
@@ -87,12 +85,12 @@ Checkbox.defaultProps = {
 
 Checkbox._displayName = 'Checkbox'
 
-function hasChecked (props) {
-  const has = key => Object.prototype.hasOwnProperty.call(props, key)
+function hasChecked(props) {
+  const has = (key) => Object.prototype.hasOwnProperty.call(props, key)
   return has('checked')
 }
 
-function getChecked (props) {
+function getChecked(props) {
   const { checked, defaultChecked } = props
   return {
     checked: hasChecked(props) ? checked || false : defaultChecked

diff --git a/components/checkbox/index.d.ts b/components/checkbox/index.d.ts
@@ -12,7 +12,8 @@ interface Props {
   disabled?: boolean
   indeterminate?: boolean
   className?: string
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
+  focusable?: boolean
 }
 interface GroupProps {
   className?: string

diff --git a/components/context/index.d.ts b/components/context/index.d.ts
@@ -0,0 +1,3 @@
+const ThemeContext: React.Context<string>
+const LocaleContext: React.Context<string>
+export {ThemeContext, LocaleContext}
diff --git a/components/context/index.js b/components/context/index.js
@@ -6,25 +6,21 @@ export const LocaleContext = React.createContext('zh-CN')
 /**
  * 临时解决 notice组件获取不到theme的问题
  */
-let noticeTheme = ''
-export default WrappedComponent => {
+let fromTheme = ''
+export default (WrappedComponent) => {
   class WrapperComponent extends Component {
     static displayName = WrappedComponent.name
-    render () {
+    render() {
       const { theme, locale, innerRef, ...restProps } = this.props
-      let ConsumerComponent = (
+      const ConsumerComponent = (
         <ThemeContext.Consumer>
-          {contextTheme => {
-            noticeTheme = noticeTheme || contextTheme
+          {(contextTheme) => {
+            fromTheme = fromTheme || contextTheme
             return (
               <LocaleContext.Consumer>
-                {contextLocale => (
+                {(contextLocale) => (
                   <WrappedComponent
-                    theme={
-                      WrappedComponent.IS_HIUI_NOTICE
-                        ? noticeTheme
-                        : contextTheme
-                    }
+                    theme={WrappedComponent.IS_FROM_HIUI ? fromTheme : contextTheme}
                     locale={contextLocale}
                     localeDatas={locales[contextLocale]}
                     ref={innerRef}
@@ -37,17 +33,15 @@ export default WrappedComponent => {
           }}
         </ThemeContext.Consumer>
       )
-      return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(
-        ConsumerComponent
-      )
+      return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(ConsumerComponent)
     }
   }
   return forwardRef((props, ref) => {
     return <WrapperComponent {...props} innerRef={ref} />
   })
 }
 
-function wrapProvider (value, context) {
+function wrapProvider(value, context) {
   wrapProvider.Providers || (wrapProvider.Providers = [])
   if (value !== undefined && context) {
     wrapProvider.Providers.push({
@@ -57,12 +51,8 @@ function wrapProvider (value, context) {
   }
   if (!context) {
     let component = value
-    wrapProvider.Providers.reverse().map(obj => {
-      component = (
-        <obj.context.Provider value={obj.value}>
-          {component}
-        </obj.context.Provider>
-      )
+    wrapProvider.Providers.reverse().map((obj) => {
+      component = <obj.context.Provider value={obj.value}>{component}</obj.context.Provider>
     })
     wrapProvider.Providers = []
     return component
-Original file line number
+Diff line change
@@ Expand Up / @@ -137,7 +137,7 @@ const Cascader = (props) => { @@
             }
           }
         },
-        [changeOnSelect, expandTrigger]
+        [changeOnSelect, expandTrigger, onChange, cascaderValue, popperShow]
       )
       const clearValue = useCallback(
@@ Expand Down @@