feat(DateInput): 添加autoClose自动隐藏弹层API #660 #665 (#705)

* chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * chore: update workflows config. * docs(SearchTree): 文档整理 * doc(Tag): 修复文档示例错误 (#599) #598 修复 * Revert "doc(Tag): 修复文档示例错误 (#599)" (#600) * doc(Tag): 修复文档示例错误 (#599) #598 修复 * Revert "doc(Tag): 修复文档示例错误 (#599)" (#600) * 暂存 * clean:无效代码 * feat(Tabs): 选项卡过多,超过宽度时,收缩超出部分 #559 (#626) * fix(SearchTree): 修复数字key为0导致无法选中问题 * fix(Drawer): 修复层级问题,Dropdown被遮挡 #620 * revert:撤销 * fix(Drawer): 修复层级问题,Dropdown被遮挡 #620 * feat(SearchTree): 操作流程优化 #629 #631 * chore(Form): Select 跟Input 在表单中使用，错误样式统一 #622 (#628) * fix react-search-tree: remove remark * style(Tabs): 收缩菜单优化 * clean:删除调试代码 * chore: 更改'提交问题'链接地址 * fix(SearchSelect): 修复单选模式无法显示初始lable问题 & 文档补全 * feat(SearchSelect): 和SearchTree统一操作流程 * fix(SearchSelect): 修复单选模式无法显示初始lable问题 & 文档补全 * feat(SearchSelect): 和SearchTree统一操作流程 * docs(FileInput): 补全示例文档 #642 * fix(SearchTree): 修复数字key无法被选中问题&增加示例文档 * fix(SearchTree): 修复数字key无法被选中问题&增加示例文档 * fix(Tree): 节点key为0时children无法渲染 #619 * style(Progress): 进度起始和末尾圆角溢出 * style(Progress): 进度起始和末尾圆角溢出 * fix(SearchSelect): 清空操作不再展开下拉选项&文档补全 * fix(SearchSelect): 清空操作不再展开下拉选项&文档补全 * fix(Popover): 修复children为Icon弹窗无法准确定位问题 #639 * docs(Popover): 文档格式化 * fix(SearchSelect): 修复form在没有initValue情况默认赋值了空字符串问题 * feat(Transfer): 增加双栏穿梭选择框 * 暂存 * feat(Transfer): 增加选项搜索功能 * chore: 依赖撤销 * chore：transfer组件发布 * fix(Transfer): 选项为多层tree时总数统计错误 * docs(Transfer): 文档与菜单统一名称 * docs(Steps)：示例文档错误 * style(Transfer): 添加穿梭箭头边框样式 * feat(Transfer): 增加选项栏全选功能 * style:样式调整 * faeat(Transfer): 添加Tree节点多选支持 * style(Transfer): 添加选中样式 * fix(Transfer): 潜在bug * fix(Transfer): 修复潜在BUG * style(Tree): Tree没有子节点时展开箭头不再占位 #641 * fix(Tree): 被隐藏(hideNode)的子节点，勾选父节点时，不再选中 * fix(Transfer): 修复Map对象引用拷贝导致的BUG * fix(SearchSelect): 样式调整 #652 * faeat(Carousel): 增加走马灯组件Carousel * clean:删除多余包引用 * chore: 添加发布代码 * fix: 代码格式调整 * docs: 文字描述错误 * fix(SearchSelect): 修复禁用后任然可以删除问题 * feat(Carousel)：滚动效果总是从左向右滚动 * docs：描述错误 * fix(Carousel)：添加ref类型 * fix(SearchTree): 修复禁用后可以删问题 * fix(FileInput): 隐藏原生input file提示文字 #700 * fix(Popover): children为Icon定位错误问题 * feat(Carousel): 增加竖向滚动功能 * upd(DateInput): 添加autoClose自动隐藏弹层API #660 Co-authored-by: jaywcjlove <398188662@qq.com> Co-authored-by: gssggssg <490104722@qq.com> Co-authored-by: 小弟调调™ <kennyiseeyou@gmail.com> Co-authored-by: 崔兰鑫 <1192065030@qq.com>
uiwjs · Mar 23, 2022 · 443f356 · 443f356
1 parent cd312ac
commit 443f356
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 32 deletions.
diff --git a/packages/react-date-input/README.md b/packages/react-date-input/README.md
@@ -26,40 +26,41 @@ function Demo () {
 
   const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])
 
- function onChange(selectedDate,dataRange) {
+  function onChange(selectedDate,dataRange) {
     console.log('selectedDate',selectedDate,dataRange)
   }
-    return (
-      <div>
-        <Row gutter={10} style={{ maxWidth: 360,marginBottom:10 }}>
-          <Col fixed>
-            <DateInput
-              value={new Date()}
-              datePickerProps={{ todayButton: '今天' }}
-              onChange={onChange}
-            />
-          </Col>
-          <Col>
-            <DateInput
-              value={new Date()}
-              disabled
-              onChange={onChange}
-            />
-          </Col>
-        </Row>
-        <Row gutter={10}>
-          <Col>
-            <DateInputRange
-              bodyStyle={{width:350}}
-              format="YYYY/MM/DD HH:mm:ss"
-              value={dataRange}
-              datePickerProps={{ todayButton: '今天',showTime:true }}
-              onChange={onChange}
-            />
-          </Col>
-        </Row>
-      </div>
-    )
+
+  return (
+    <div>
+      <Row gutter={10} style={{ maxWidth: 360,marginBottom:10 }}>
+        <Col fixed>
+          <DateInput
+            value={new Date()}
+            datePickerProps={{ todayButton: '今天' }}
+            onChange={onChange}
+          />
+        </Col>
+        <Col>
+          <DateInput
+            value={new Date()}
+            disabled
+            onChange={onChange}
+          />
+        </Col>
+      </Row>
+      <Row gutter={10}>
+        <Col>
+          <DateInputRange
+            bodyStyle={{width:350}}
+            format="YYYY/MM/DD HH:mm:ss"
+            value={dataRange}
+            datePickerProps={{ todayButton: '今天',showTime:true }}
+            onChange={onChange}
+          />
+        </Col>
+      </Row>
+    </div>
+  )
 }
 ReactDOM.render(<Demo />, _mount_);
 ```
@@ -196,6 +197,34 @@ class Demo extends React.Component {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 自动隐藏弹层
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DateInput } from 'uiw';
+
+class Demo extends React.Component {
+  onChange(selectedDate) {
+    console.log('selectedDate:', selectedDate);
+  }
+  render() {
+    return (
+      <div style={{ maxWidth: 200 }}>
+        <DateInput
+          autoClose={true}
+          format="YYYY/MM/DD HH:mm:ss"
+          datePickerProps={{ showTime: true, todayButton: '今天' }}
+          onChange={this.onChange.bind(this)}
+        />
+      </div>
+    )
+  }
+}
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Props
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -208,6 +237,7 @@ ReactDOM.render(<Demo />, _mount_);
 | popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |
 | datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |
 | disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |
+| autoClose | 是否自动关闭弹层 | Boolean | false |
 
 组件 `DateInput` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。
 

diff --git a/packages/react-date-input/src/index.tsx b/packages/react-date-input/src/index.tsx
@@ -15,6 +15,7 @@ export interface DateInputProps extends IProps, Omit<InputProps, 'onChange' | 'v
   format?: string;
   allowClear?: boolean;
   onChange?: (selectedDate?: Date) => void;
+  autoClose?: boolean;
 }
 
 export default function DateInput(props: DateInputProps) {
@@ -24,6 +25,7 @@ export default function DateInput(props: DateInputProps) {
     popoverProps,
     datePickerProps,
     allowClear = true,
+    autoClose = false,
     format = 'YYYY/MM/DD',
     onChange,
     ...inputProps
@@ -40,6 +42,7 @@ export default function DateInput(props: DateInputProps) {
   }, [props.value]);
 
   function handleChange(cdate?: Date) {
+    autoClose && setIsOpen(false);
     setDate(cdate);
     onChange && onChange(cdate);
   }
@@ -48,11 +51,16 @@ export default function DateInput(props: DateInputProps) {
       <Icon className={`${prefixCls}-close-btn`} onClick={() => handleChange(undefined)} type="close" />
     );
   }
+
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
     <Popover
       trigger="focus"
       placement="bottomLeft"
       autoAdjustOverflow
+      isOpen={isOpen}
+      onVisibleChange={(open) => setIsOpen(open)}
       {...popoverProps}
       content={
         <DatePicker