DatePicker支持visible和defaultVisible (#1152)

* feat: DatePicker支持visible和defaultVisible * feat: 适配微信小程序 * feat: 更新Picker、DatePicker文档
ant-design · Apr 12, 2024 · 65c2baa · 65c2baa
1 parent 8dd5c25
commit 65c2baa
Show file tree

Hide file tree

Showing 27 changed files with 255 additions and 34 deletions.
diff --git a/compiled/alipay/demo/pages/DatePicker/index.axml b/compiled/alipay/demo/pages/DatePicker/index.axml
@@ -113,3 +113,28 @@
       onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
   </ant-list-item>
 </ant-list>
+<ant-container style="margin-top: 20rpx">
+  <ant-list header="外部控制选择器是否显示">
+    <ant-list-item>
+      请选择时间
+      <ant-date-picker
+        min="{{ min }}"
+        max="{{ max }}"
+        slot="extra"
+        visible="{{ pickerVisible }}"
+        defaultValue="{{ defaultDate }}"
+        placeholder="请选择"
+        onPickerChange="handlePickerChange"
+        onVisibleChange="handleTriggerControlledPicker"
+        onCancel="handleDismiss"
+        onOk="handleOk" />
+    </ant-list-item>
+  </ant-list>
+
+  <ant-button
+    size="medium"
+    type="primary"
+    onTap="handleOpenPicker">
+    打开 DatePicker
+  </ant-button>
+</ant-container>
diff --git a/compiled/alipay/demo/pages/DatePicker/index.js b/compiled/alipay/demo/pages/DatePicker/index.js
@@ -1,5 +1,6 @@
 Page({
     data: {
+        pickerVisible: false,
         min: new Date('2019/01/15').getTime(),
         max: new Date('2023/08/20').getTime(),
         defaultDate: new Date('2019/02/02').getTime(),
@@ -43,4 +44,15 @@ Page({
     handleFormatLabel(type, value) {
         return String(value);
     },
+    handleTriggerControlledPicker(visible, e) {
+        console.log('handleTriggerControlledPicker', visible, e);
+        this.setData({
+            pickerVisible: visible,
+        });
+    },
+    handleOpenPicker() {
+        this.setData({
+            pickerVisible: true,
+        });
+    },
 });
diff --git a/compiled/alipay/demo/pages/DatePicker/index.json b/compiled/alipay/demo/pages/DatePicker/index.json
@@ -4,6 +4,8 @@
     "ant-date-picker": "../../../src/DatePicker/index",
     "ant-range-picker": "../../../src/DatePicker/RangePicker/index",
     "ant-list-item": "../../../src/List/ListItem/index",
-    "ant-list": "../../../src/List/index"
+    "ant-list": "../../../src/List/index",
+    "ant-button": "../../../src/Button/index",
+    "ant-container": "../../../src/Container/index"
   }
 }
diff --git a/compiled/alipay/src/DatePicker/index.axml b/compiled/alipay/src/DatePicker/index.axml
@@ -1,6 +1,7 @@
 <ant-picker
   className="ant-date-picker"
   popClassName="ant-date-picker-popup {{ popClassName || '' }}"
+  visible="{{ state.visible }}"
   style="{{ style }}"
   popStyle="{{ popStyle }}"
   animationType="{{ animationType }}"

diff --git a/compiled/alipay/src/DatePicker/index.md b/compiled/alipay/src/DatePicker/index.md
@@ -49,6 +49,8 @@ toc: 'content'
 | suffix | 后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |
 | value | 选中的时间 | Date | - |
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
 | onCancel | 点击取消按钮/蒙层，触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
 | onPickerChange | 选中项发生变化，触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

diff --git a/compiled/alipay/src/DatePicker/index.ts b/compiled/alipay/src/DatePicker/index.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useEvent, useState, useMemo } from 'functional-mini/component';
+import { useEvent, useState, useEffect, useMemo } from 'functional-mini/component';
 import '../_util/assert-component2';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
@@ -72,12 +72,28 @@ const DatePicker = (props: IDatePickerProps) => {
     return `${value}${suffixMap[type]}`;
   }
 
-  const [{ visible, value, columns }, setState] = useState({
-    visible: false,
+  const [{ value, columns }, setState] = useState({
     value: [],
     columns: [],
   });
 
+  const [visible, { update: updateVisible }] = useMixState(
+    props.defaultVisible,
+    {
+      value: props.visible,
+    }
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (visible) {
+        updateDateColumnsAndValue(true);
+      } else {
+        updateDateColumnsAndValue(false);
+      }
+    })
+  }, [visible]);
+
   function generateData(currentValue, currentProps) {
     const { precision, min: propsMin, max: propsMax } = currentProps;
     const min = getMin(propsMin);
@@ -119,23 +135,29 @@ const DatePicker = (props: IDatePickerProps) => {
     }
   }
 
-  useEvent('onVisibleChange', (event) => {
-    const visible = resolveEventValue(event)
+  function updateDateColumnsAndValue(visible) {
     if (visible) {
       const currentValue = getCurrentValueWithCValue(props);
       const newColumns = generateData(currentValue, props);
       setState({
         value: currentValue,
         columns: newColumns,
-        visible: true,
       });
     } else {
       setState({
         value: [],
         columns: [],
-        visible: false,
       });
     }
+  }
+
+  useEvent('onVisibleChange', (event) => {
+    const visible = resolveEventValue(event)
+    if (visible) {
+      updateVisible(true);
+    } else {
+      updateVisible(false);
+    }
     triggerEvent('visibleChange', visible, {});
   });
 
@@ -157,7 +179,6 @@ const DatePicker = (props: IDatePickerProps) => {
     const newColumns = generateData(selectedIndex, props);
 
     setState({
-      visible: true,
       columns: newColumns,
       value: selectedIndex,
     });
@@ -202,6 +223,9 @@ const DatePicker = (props: IDatePickerProps) => {
   }, [realValue]);
 
   return {
+    state: {
+      visible
+    },
     formattedValueText,
     currentValue: visible ? value : realValue,
     columns,

diff --git a/compiled/alipay/src/DatePicker/props.ts b/compiled/alipay/src/DatePicker/props.ts
@@ -5,6 +5,8 @@ export type PickerValue = Date | string | number;
  * @description 对话框
  */
 export interface IDatePickerProps extends IBaseProps {
+  visible?: boolean;
+  defaultVisible?: boolean;
   /**
    * @desciption  动画类型
    * @default "transform"
@@ -145,6 +147,8 @@ export const DatePickerDefaultProps: IDatePickerProps = {
 };
 
 export const DatePickerFunctionalProps: IDatePickerProps = {
+  visible: null,
+  defaultVisible: null,
   animationType: 'transform',
   format: 'YYYY/MM/DD',
   min: null,

diff --git a/compiled/alipay/src/Picker/index.axml b/compiled/alipay/src/Picker/index.axml
@@ -84,8 +84,8 @@
       </picker-view>
     </block>
     <block a:else>
-      <picker-view>
-        <picker-view-column>
+      <picker-view class="ant-picker-picker-view">
+        <picker-view-column class="ant-picker-picker-view-column">
           <!-- display: inline -->
           <text style="color: #ccc">{{ emptyText }}</text>
         </picker-view-column>

diff --git a/compiled/alipay/src/Picker/index.md b/compiled/alipay/src/Picker/index.md
@@ -50,6 +50,8 @@ Picker 选择器显示一个或多个选项集合的可滚动列表，相比于
 | suffix |  后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |  
 | value | 选中的值 | string \| number \| Array\<string \| number\> | - | 
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (value: [PickerColumnItem](#pickercolumnitem),  column: [PickerColumnItem](#pickercolumnitem), event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 
 | onCancel | 点击取消按钮/蒙层，触发回调 | (event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 
 | onChange | 选中项发生变化，触发回调 | (value: [PickerColumnItem](#pickercolumnitem), column: [PickerColumnItem](#pickercolumnitem), event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 

diff --git a/compiled/wechat/demo/pages/DatePicker/index.js b/compiled/wechat/demo/pages/DatePicker/index.js
@@ -1,5 +1,6 @@
 Page({
     data: {
+        pickerVisible: false,
         min: new Date('2019/01/15').getTime(),
         max: new Date('2023/08/20').getTime(),
         defaultDate: new Date('2019/02/02').getTime(),
@@ -47,4 +48,15 @@ Page({
     handleFormatLabel(type, value) {
         return String(value);
     },
+    handleTriggerControlledPicker(visible, e) {
+        console.log('handleTriggerControlledPicker', visible);
+        this.setData({
+            pickerVisible: visible.detail,
+        });
+    },
+    handleOpenPicker() {
+        this.setData({
+            pickerVisible: true,
+        });
+    },
 });
diff --git a/compiled/wechat/demo/pages/DatePicker/index.json b/compiled/wechat/demo/pages/DatePicker/index.json
@@ -4,6 +4,8 @@
     "ant-date-picker": "../../../src/DatePicker/index",
     "ant-range-picker": "../../../src/DatePicker/RangePicker/index",
     "ant-list-item": "../../../src/List/ListItem/index",
-    "ant-list": "../../../src/List/index"
+    "ant-list": "../../../src/List/index",
+    "ant-button": "../../../src/Button/index",
+    "ant-container": "../../../src/Container/index"
   }
 }
diff --git a/compiled/wechat/demo/pages/DatePicker/index.wxml b/compiled/wechat/demo/pages/DatePicker/index.wxml
@@ -113,3 +113,28 @@
       onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
   </ant-list-item>
 </ant-list>
+<ant-container style="margin-top: 20rpx">
+  <ant-list header="外部控制选择器是否显示">
+    <ant-list-item>
+      请选择时间
+      <ant-date-picker
+        min="{{ min }}"
+        max="{{ max }}"
+        slot="extra"
+        visible="{{ pickerVisible }}"
+        defaultValue="{{ defaultDate }}"
+        placeholder="请选择"
+        bind:pickerchange="handlePickerChange"
+        bind:visiblechange="handleTriggerControlledPicker"
+        bind:cancel="handleDismiss"
+        bind:ok="handleOk" />
+    </ant-list-item>
+  </ant-list>
+
+  <ant-button
+    size="medium"
+    type="primary"
+    bind:tap="handleOpenPicker">
+    打开 DatePicker
+  </ant-button>
+</ant-container>
diff --git a/compiled/wechat/src/DatePicker/index.js b/compiled/wechat/src/DatePicker/index.js
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useEvent, useState, useMemo } from 'functional-mini/component';
+import { useEvent, useState, useEffect, useMemo } from 'functional-mini/component';
 import '../_util/assert-component2';
 import { mountComponent } from '../_util/component';
 import { useComponentEvent } from '../_util/hooks/useComponentEvent';
@@ -58,10 +58,22 @@ var DatePicker = function (props) {
         return "".concat(value).concat(suffixMap[type]);
     }
     var _d = useState({
-        visible: false,
         value: [],
         columns: [],
-    }), _e = _d[0], visible = _e.visible, value = _e.value, columns = _e.columns, setState = _d[1];
+    }), _e = _d[0], value = _e.value, columns = _e.columns, setState = _d[1];
+    var _f = useMixState(props.defaultVisible, {
+        value: props.visible,
+    }), visible = _f[0], updateVisible = _f[1].update;
+    useEffect(function () {
+        setTimeout(function () {
+            if (visible) {
+                updateDateColumnsAndValue(true);
+            }
+            else {
+                updateDateColumnsAndValue(false);
+            }
+        });
+    }, [visible]);
     function generateData(currentValue, currentProps) {
         var precision = currentProps.precision, propsMin = currentProps.min, propsMax = currentProps.max;
         var min = getMin(propsMin);
@@ -95,24 +107,30 @@ var DatePicker = function (props) {
             }
         }
     }
-    useEvent('onVisibleChange', function (event) {
-        var visible = resolveEventValue(event);
+    function updateDateColumnsAndValue(visible) {
         if (visible) {
             var currentValue = getCurrentValueWithCValue(props);
             var newColumns = generateData(currentValue, props);
             setState({
                 value: currentValue,
                 columns: newColumns,
-                visible: true,
             });
         }
         else {
             setState({
                 value: [],
                 columns: [],
-                visible: false,
             });
         }
+    }
+    useEvent('onVisibleChange', function (event) {
+        var visible = resolveEventValue(event);
+        if (visible) {
+            updateVisible(true);
+        }
+        else {
+            updateVisible(false);
+        }
         triggerEvent('visibleChange', visible, {});
     });
     useEvent('onChange', function (event) {
@@ -132,7 +150,6 @@ var DatePicker = function (props) {
         }
         var newColumns = generateData(selectedIndex, props);
         setState({
-            visible: true,
             columns: newColumns,
             value: selectedIndex,
         });
@@ -161,6 +178,9 @@ var DatePicker = function (props) {
         return defaultFormat(realValue, realValue ? dayjs(realValue).format(format) : null);
     }, [realValue]);
     return {
+        state: {
+            visible: visible
+        },
         formattedValueText: formattedValueText,
         currentValue: visible ? value : realValue,
         columns: columns,

diff --git a/compiled/wechat/src/DatePicker/index.md b/compiled/wechat/src/DatePicker/index.md
@@ -49,6 +49,8 @@ toc: 'content'
 | suffix | 后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |
 | value | 选中的时间 | Date | - |
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
 | onCancel | 点击取消按钮/蒙层，触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
 | onPickerChange | 选中项发生变化，触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

diff --git a/compiled/wechat/src/DatePicker/index.wxml b/compiled/wechat/src/DatePicker/index.wxml
@@ -1,6 +1,7 @@
 <ant-picker
   className="ant-date-picker"
   popClassName="ant-date-picker-popup {{ popClassName || '' }}"
+  visible="{{ state.visible }}"
   style="{{ style }}"
   popStyle="{{ popStyle }}"
   animationType="{{ animationType }}"

diff --git a/compiled/wechat/src/DatePicker/props.js b/compiled/wechat/src/DatePicker/props.js
@@ -7,6 +7,8 @@ export var DatePickerDefaultProps = {
     precision: 'day',
 };
 export var DatePickerFunctionalProps = {
+    visible: null,
+    defaultVisible: null,
     animationType: 'transform',
     format: 'YYYY/MM/DD',
     min: null,

diff --git a/compiled/wechat/src/Picker/index.md b/compiled/wechat/src/Picker/index.md
@@ -50,6 +50,8 @@ Picker 选择器显示一个或多个选项集合的可滚动列表，相比于
 | suffix |  后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |  
 | value | 选中的值 | string \| number \| Array\<string \| number\> | - | 
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (value: [PickerColumnItem](#pickercolumnitem),  column: [PickerColumnItem](#pickercolumnitem), event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 
 | onCancel | 点击取消按钮/蒙层，触发回调 | (event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 
 | onChange | 选中项发生变化，触发回调 | (value: [PickerColumnItem](#pickercolumnitem), column: [PickerColumnItem](#pickercolumnitem), event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |