From 443f356f8bc27825bcd14e984bb52e97de9dbf4a Mon Sep 17 00:00:00 2001 From: WmW <48251883+nullptr-z@users.noreply.github.com> Date: Wed, 23 Mar 2022 15:57:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(DateInput):=20=E6=B7=BB=E5=8A=A0autoClose?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E9=9A=90=E8=97=8F=E5=BC=B9=E5=B1=82API=20=20?= =?UTF-8?q?#660=20#665=20(#705)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: 小弟调调™ Co-authored-by: 崔兰鑫 <1192065030@qq.com> --- packages/react-date-input/README.md | 94 ++++++++++++++++--------- packages/react-date-input/src/index.tsx | 8 +++ 2 files changed, 70 insertions(+), 32 deletions(-) diff --git a/packages/react-date-input/README.md b/packages/react-date-input/README.md index 2575f24030..0f3e28d111 100644 --- 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 ( -
- - - - - - - - - - - - - -
- ) + + return ( +
+ + + + + + + + + + + + + +
+ ) } ReactDOM.render(, _mount_); ``` @@ -196,6 +197,34 @@ class Demo extends React.Component { ReactDOM.render(, _mount_); ``` +## 自动隐藏弹层 + + +```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 ( +
+ +
+ ) + } +} +ReactDOM.render(, _mount_); +``` + ## Props | 参数 | 说明 | 类型 | 默认值 | @@ -208,6 +237,7 @@ ReactDOM.render(, _mount_); | popoverProps | 将参数传递给 [``](#/components/popover) 组件 | Object | - | | datePickerProps | 将参数传递给 [``](#/components/date-picker) 组件 | Object | - | | disabled | 组件 [``](#/components/input) 的属性，禁用日历 | Boolean | - | +| autoClose | 是否自动关闭弹层 | Boolean | false | 组件 `DateInput` 继承 `` 组件，更多属性文档请参考 [``](#/components/input)。 diff --git a/packages/react-date-input/src/index.tsx b/packages/react-date-input/src/index.tsx index 75ae01dac8..f97025b0be 100644 --- 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 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) { handleChange(undefined)} type="close" /> ); } + + const [isOpen, setIsOpen] = useState(false); + return ( setIsOpen(open)} {...popoverProps} content={