Merge pull request #1865 from XiaoMi/feature/#1864

feat: #1864
XiaoMi · Aug 4, 2021 · d9bc532 · d9bc532
2 parents bd39774 + 3193532
commit d9bc532
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - 新增 `Cascader` onOpen 下拉菜单打开、onClose 下拉菜单关闭回调方法，优化动态加载数据功能 [#1854](https://github.com/XiaoMi/hiui/issues/1854)
 - 新增 `Table` 组件 align 属性接受 center 属性 [#1835](https://github.com/XiaoMi/hiui/issues/1835)
 - 新增 `Table` 组件 拖拽功能 [#1851](https://github.com/XiaoMi/hiui/issues/1851)
+- 新增 `Select` 组件 renderExtraFooter 自定义下拉菜单底部渲染函数[#1864](https://github.com/XiaoMi/hiui/issues/1864)
 - 优化 `DatePicker` 组件在 `Table` 组件中受控形态下无法选中问题 [#1844](https://github.com/XiaoMi/hiui/issues/1844)
 - 优化 `Carousel` 内容宽度根据容器改变自适应 [#1834](https://github.com/XiaoMi/hiui/issues/1834)
 - 修复 `Preview` 组件，图片打开失败时，页面一直处在加载状态 [#1816](https://github.com/XiaoMi/hiui/issues/1816)

diff --git a/components/select/Select.js b/components/select/Select.js
@@ -41,7 +41,8 @@ const InternalSelect = (props) => {
     overlayClassName,
     setOverlayContainer,
     bordered = true,
-    overlayClickOutSideEventName = 'click'
+    overlayClickOutSideEventName = 'click',
+    renderExtraFooter
   } = props
   const selectInputContainer = useRef()
   const autoloadFlag = useRef(autoload) // 多选情况下，需要记录是否进行了筛选
@@ -646,6 +647,7 @@ const InternalSelect = (props) => {
       >
         <SelectDropdown
           emptyContent={emptyContent}
+          renderExtraFooter={renderExtraFooter}
           fieldNames={fieldNames}
           localeMap={localeDatas.select || {}}
           mode={type}

diff --git a/components/select/SelectDropdown.js b/components/select/SelectDropdown.js
@@ -34,6 +34,7 @@ const SelectDropdown = ({
   onOverlayScroll,
   setFocusedIndex,
   targetByKeyDown,
+  renderExtraFooter,
   autoloadFlag
 }) => {
   const [filterItems, setFilterItems] = useState(dropdownItems)
@@ -334,10 +335,10 @@ const SelectDropdown = ({
 
       {!loading && renderItems()}
 
-      {mode === 'multiple' && (showCheckAll || showJustSelected) && (
+      {(showCheckAll || showJustSelected || renderExtraFooter) && (
         <div className={`hi-select__dropdown-check-all theme__${theme}`}>
           <div>
-            {showCheckAll && (
+            {mode === 'multiple' && showCheckAll && (
               <Checkbox
                 checked={isCheckAll}
                 onChange={(e) => {
@@ -348,8 +349,9 @@ const SelectDropdown = ({
               </Checkbox>
             )}
           </div>
+          {renderExtraFooter && renderExtraFooter()}
           <div>
-            {showJustSelected && (
+            {mode === 'multiple' && showJustSelected && (
               <Checkbox
                 onChange={(e) => {
                   showSelected(e.target.checked)

diff --git a/components/select/index.d.ts b/components/select/index.d.ts
@@ -56,6 +56,7 @@ interface Props {
   onSearch?: (keyword: string) => void
   onOverlayScroll?: (e: Event<HTMLDivElement>) => void
   render?: (item: DataItem, selected: boolean) => JSX.Element
+  renderExtraFooter?: () => JSX.Element
   overlayClassName?: string
   setOverlayContainer?: (triggerNode: any) => any
 }

diff --git a/docs/demo/select/section-custom.jsx b/docs/demo/select/section-custom.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import DocViewer from '../../../libs/doc-viewer'
 import Select from '../../../components/select'
+import Input from '../../../components/input'
+import Button from '../../../components/button'
 const prefix = 'select-custom'
 const desc = ['选项结构：可自定义选项的信息结构或样式', '搜索条件：可自定义搜索条件的算法']
 const rightOptions = ['选项结构', '搜索条件']
@@ -35,6 +37,12 @@ class Demo extends React.Component {
         onChange={(item) => {
           console.log('单选结果', item)
         }}
+        renderExtraFooter={()=>{
+          return <div style={{width: '100%'}}>
+            <Input style={{width: '100px'}}/>
+            <Button type="line" appearance="link" icon="plus">新增</Button>
+          </div>
+        }}
         render={(item, isSelected) => {
           return (
             <React.Fragment>
@@ -92,6 +100,6 @@ class Demo extends React.Component {
   }
 ]
 const DemoCustom = () => (
-  <DocViewer code={code} scope={{ Select }} prefix={prefix} desc={desc} rightOptions={rightOptions} />
+  <DocViewer code={code} scope={{ Select, Button, Input }} prefix={prefix} desc={desc} rightOptions={rightOptions} />
 )
 export default DemoCustom
diff --git a/docs/zh-CN/components/select.mdx b/docs/zh-CN/components/select.mdx
@@ -84,6 +84,7 @@ import DemoSelectsearchbypinyin from '../../demo/select/section-searchbypinyin'
 | bordered            | 是否有边框                                                                                               | boolean                                                              | true \| false                                                |             true                                                          |
 | optionWidth         | 自定义下拉选项宽度                                                                                       | number                                                              | -                                            |                                                                       |
 | render              | 自定义下拉菜单渲染函数，回调值为选项数据和是否被选中                                                     | (item: DataItem, selected: boolean) => ReactNode                    | -                                            | 无内容                                                                |
+| renderExtraFooter   | 自定义下拉菜单底部渲染                                                     | () => ReactNode                    | -                                            | 无内容                                                                |
 | overlayClassName    | 下拉根元素的类名称 (3.0 新增)                                                                            | string                                                              | -                                            | -                                                                     |
 | onOverlayScroll    | 下拉列表滚动时的回调                                                                            | function                                                              | -                                            | -                                                                     |
 | onSearch            | 下拉弹层中文本框值变化时回调                                                                            | function(value: string)                                                              | -                                            | -                                                                     |

diff --git a/gulpfile.js b/gulpfile.js
@@ -46,7 +46,8 @@ const compile = (modules) => {
     .pipe(
       babel({
         presets: ['@babel/preset-env', '@babel/preset-react'],
-        plugins: ['@babel/plugin-transform-runtime', ['transform-remove-console', { exclude: ['error', 'warn'] }]]
+        plugins: ['@babel/plugin-transform-runtime', ['transform-remove-console', { exclude: ['error', 'warn'] }]],
+        ignore: ['components/index.js']
       })
     )
     .pipe(

diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "es",
     "types/*.d.ts"
   ],
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0"