feat: DateRangePicker和CascaderPicker支持visible和defaultVisible

compiled/alipay/demo/pages/CascaderPicker/index.axml

@@ -49,3 +49,27 @@
     </ant-button>
   </view>
 </ant-list>
+
+<ant-container style="margin-top: 20rpx">
+  <ant-list header="外部控制选择器是否显示">
+    <ant-list-item>
+      请选择省市
+      <ant-cascader-picker
+        slot="extra"
+        visible="{{ pickerVisible }}"
+        placeholder="请选择归属地"
+        options="{{ cityList }}"
+        onChange="handleCityPickerChange"
+        onVisibleChange="handleTriggerControlledPicker"
+        onOk="handleCityOnOk"
+        onCancel="handleDismiss" />
+    </ant-list-item>
+  </ant-list>
+
+  <ant-button
+    size="medium"
+    type="primary"
+    onTap="handleOpenPicker">
+    打开 CascaderPicker
+  </ant-button>
+</ant-container>

compiled/alipay/demo/pages/CascaderPicker/index.js

@@ -1,6 +1,7 @@
 import cityList from './city';
 Page({
     data: {
+        pickerVisible: false,
         cityList,
         value: ['34', '330'],
     },
@@ -23,4 +24,15 @@ Page({
     handleDismiss(e) {
         console.log('handleDismiss', e);
     },
+    handleTriggerControlledPicker(visible, e) {
+        console.log('handleTriggerControlledPicker', visible, e);
+        this.setData({
+            pickerVisible: visible,
+        });
+    },
+    handleOpenPicker() {
+        this.setData({
+            pickerVisible: true,
+        });
+    },
 });

compiled/alipay/demo/pages/CascaderPicker/index.json

@@ -4,6 +4,7 @@
     "ant-cascader-picker": "../../../src/Picker/CascaderPicker/index",
     "ant-list-item": "../../../src/List/ListItem/index",
     "ant-list": "../../../src/List/index",
-    "ant-button": "../../../src/Button/index"
+    "ant-button": "../../../src/Button/index",
+    "ant-container": "../../../src/Container/index"
   }
 }

compiled/alipay/demo/pages/DatePicker/index.axml

@@ -138,3 +138,25 @@
     打开 DatePicker
   </ant-button>
 </ant-container>
+<ant-container style="margin-top: 20rpx">
+  <ant-list header="外部控制日期范围选择器是否显示">
+    <ant-list-item>
+      请选择日期范围
+      <ant-range-picker
+        slot="extra"
+        visible="{{ dateRangePickerVisible }}"
+        placeholder="请选择"
+        defaultValue="{{ defaultDateRange }}"
+        onPickerChange="handlePickerRangeChange"
+        onVisibleChange="handleTriggerControlledDateRangePicker"
+        onOk="handleRangeOk" />
+    </ant-list-item>
+  </ant-list>
+
+  <ant-button
+    size="medium"
+    type="primary"
+    onTap="handleOpenDateRangePicker">
+    打开 DateRangePicker
+  </ant-button>
+</ant-container>

compiled/alipay/demo/pages/DatePicker/index.js

@@ -1,6 +1,7 @@
 Page({
     data: {
         pickerVisible: false,
+        dateRangePickerVisible: false,
         min: new Date('2019/01/15').getTime(),
         max: new Date('2023/08/20').getTime(),
         defaultDate: new Date('2019/02/02').getTime(),
@@ -55,4 +56,15 @@ Page({
             pickerVisible: true,
         });
     },
+    handleTriggerControlledDateRangePicker(visible, e) {
+        console.log('handleTriggerControlledDateRangePicker', visible, e);
+        this.setData({
+            dateRangePickerVisible: visible,
+        });
+    },
+    handleOpenDateRangePicker() {
+        this.setData({
+            dateRangePickerVisible: true,
+        });
+    },
 });

compiled/alipay/src/DatePicker/RangePicker/index.axml

@@ -23,6 +23,7 @@
   formattedValueText="{{ formattedValueText }}"
   className="ant-range-picker {{ className || '' }}"
   popClassName="{{ !currentStartDate || !currentEndDate ? 'ant-range-picker-confirm-disabled' : '' }} {{ popClassName || '' }}"
+  visible="{{ state.visible }}"
   style="{{ style }}"
   animationType="{{ animationType }}"
   options="{{ columns }}"

compiled/alipay/src/DatePicker/RangePicker/index.ts

@@ -1,4 +1,4 @@
-import { useState, useEvent, useMemo } from 'functional-mini/component';
+import { useState, useEvent, useEffect, useMemo } from 'functional-mini/component';
 import { DateRangePickerFunctionalProps, IDateRangePickerProps } from './props';
 import dayjs from 'dayjs';
 import {
@@ -55,6 +55,26 @@ const RangePicker = (props: IDateRangePickerProps) => {
 
   const onFormatLabel = useFormatLabel(props.onFormatLabel);
 
+  const [visible, { update: updateVisible }] = useMixState(
+    props.defaultVisible,
+    {
+      value: props.visible,
+    }
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (visible) {
+        const state = init(realValue);
+        const currentValue = getValueByDate(
+          state.pickerType === 'start' ? state.start : state.end,
+          props.precision
+        );
+        updateColumns(currentValue, props);
+      }
+    })
+  }, [visible]);
+
   function updateColumns(currentValue, currentProps) {
     const { precision, min: propsMin, max: propsMax } = currentProps;
     const min = getMin(propsMin);
@@ -85,12 +105,9 @@ const RangePicker = (props: IDateRangePickerProps) => {
   useEvent('onVisibleChange', (event) => {
     const visible = resolveEventValue(event)
     if (visible) {
-      const state = init(realValue);
-      const currentValue = getValueByDate(
-        state.pickerType === 'start' ? state.start : state.end,
-        props.precision
-      );
-      updateColumns(currentValue, props);
+      updateVisible(true);
+    } else {
+      updateVisible(false);
     }
     triggerEvent('visibleChange', visible);
   });
@@ -148,6 +165,9 @@ const RangePicker = (props: IDateRangePickerProps) => {
   });
 
   return {
+    state: {
+      visible
+    },
     formattedValueText,
     realValue,
     columns,

compiled/alipay/src/DatePicker/RangePicker/props.ts

@@ -5,6 +5,8 @@ export type PickerValue = [Date, Date];
  * @description 对话框
  */
 export interface IDateRangePickerProps extends IBaseProps {
+  visible?: boolean;
+  defaultVisible?: boolean;
   /**
    * @desciption  动画类型
    * @default "transform"
@@ -165,6 +167,8 @@ export const DateRangePickerDefaultProps: Partial<IDateRangePickerProps> = {
 };
 
 export const DateRangePickerFunctionalProps: Partial<IDateRangePickerProps> = {
+  visible: null,
+  defaultVisible: null,
   animationType: 'transform',
   format: 'YYYY/MM/DD',
   min: null,

compiled/alipay/src/DatePicker/index.md

@@ -90,6 +90,8 @@ toc: 'content'
 | suffix | 后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |
 | value | 选中的时间范围 | [Date, Date] | - |
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (date: [Date, Date], dateStr: [string, 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 | 选中项发生变化，触发回调 | (type: `start` \| `end`, date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

compiled/alipay/src/Picker/CascaderPicker/index.axml

@@ -4,6 +4,7 @@
   animationType="{{ animationType }}"
   popClassName="ant-cascader-picker-popup {{ popClassName || '' }}"
   popStyle="{{ popStyle }}"
+  visible="{{ state.visible }}"
   options="{{ columns }}"
   value="{{ currentValue }}"
   disabled="{{ disabled }}"

compiled/alipay/src/Picker/CascaderPicker/index.ts

@@ -1,4 +1,4 @@
-import { useEvent, useMemo, useState } from 'functional-mini/component';
+import { useEvent, useMemo, useEffect, useState } from 'functional-mini/component';
 import { mountComponent } from '../../_util/component';
 import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
 import { useComponentUpdateEffect } from '../../_util/hooks/useLayoutEffect';
@@ -83,12 +83,28 @@ const CascaderPicker = (props: ICascaderProps) => {
     return defaultFormat(realValue, getOptionByValue(realValue, props.options));
   }, [realValue]);
 
+  const [visible, { update: updateVisible }] = useMixState(
+    props.defaultVisible,
+    {
+      value: props.visible,
+    }
+  );
+  useEffect(() => {
+    setTimeout(() => {
+      if (visible) {
+        const newColumns = getterColumns(realValue, props.options);
+        const currentValue = getValidValue(realValue, newColumns);
+        setState({ value: currentValue, columns: newColumns });
+      }
+    })
+  }, [visible]);
+
   useEvent('onVisibleChange', (event) => {
     const visible = resolveEventValue(event)
     if (visible) {
-      const newColumns = getterColumns(realValue, props.options);
-      const currentValue = getValidValue(realValue, newColumns);
-      setState({ value: currentValue, columns: newColumns });
+      updateVisible(true);
+    } else {
+      updateVisible(false);
     }
     triggerEvent('visibleChange', visible);
   });
@@ -98,7 +114,9 @@ const CascaderPicker = (props: ICascaderProps) => {
     const validValue = getValidValue(value, columns);
 
     if (!isRealValueControlled) {
-      updateRealValue(validValue);
+      setTimeout(() => {
+        updateRealValue(validValue);
+      })
     }
 
     triggerEventValues('ok', [
@@ -119,6 +137,9 @@ const CascaderPicker = (props: ICascaderProps) => {
   });
 
   return {
+    state: {
+      visible
+    },
     formattedValueText,
     currentValue: value,
     columns,

compiled/alipay/src/Picker/CascaderPicker/props.ts

@@ -10,6 +10,8 @@ export interface ICascaderOption {
  * @description 级联组件，基于Picker封装
  */
 export interface ICascaderProps extends IBaseProps {
+  visible?: boolean;
+  defaultVisible?: boolean;
   /**
    * @desciption  动画类型
    * @default "transform"
@@ -127,6 +129,8 @@ export const CascaderDefaultProps: Partial<ICascaderProps> = {
 };
 
 export const CascaderFunctionalProps: Partial<ICascaderProps> = {
+  visible: null,
+  defaultVisible: null,
   animationType: 'transform',
   value: null,
   defaultValue: null,

compiled/alipay/src/Picker/index.md

@@ -83,6 +83,8 @@ Picker 选择器显示一个或多个选项集合的可滚动列表，相比于
 | suffix |  后缀 | slot | - |
 | title | 弹出框标题 | string \| slot | - |  
 | value | 选中的值 | string[] | - | 
+| visible | 是否显示 | boolean | false |
+| defaultVisible | 默认是否显示 | boolean | false |
 | onOk | 点击确定按钮，触发回调 | (value: string[], selectedOptions: [CascaderOption](#cascaderoption)[], 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: string[], selectedOptions: [CascaderOption](#cascaderoption)[], event:  [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | 

compiled/wechat/demo/pages/CascaderPicker/index.js

@@ -1,6 +1,7 @@
 import cityList from './city';
 Page({
     data: {
+        pickerVisible: false,
         cityList,
         value: ['34', '330'],
     },
@@ -23,4 +24,15 @@ Page({
     handleDismiss(e) {
         console.log('handleDismiss', e);
     },
+    handleTriggerControlledPicker(visible, e) {
+        console.log('handleTriggerControlledPicker', visible);
+        this.setData({
+            pickerVisible: visible.detail,
+        });
+    },
+    handleOpenPicker() {
+        this.setData({
+            pickerVisible: true,
+        });
+    },
 });

compiled/wechat/demo/pages/CascaderPicker/index.json

@@ -4,6 +4,7 @@
     "ant-cascader-picker": "../../../src/Picker/CascaderPicker/index",
     "ant-list-item": "../../../src/List/ListItem/index",
     "ant-list": "../../../src/List/index",
-    "ant-button": "../../../src/Button/index"
+    "ant-button": "../../../src/Button/index",
+    "ant-container": "../../../src/Container/index"
   }
 }

compiled/wechat/demo/pages/CascaderPicker/index.wxml

@@ -49,3 +49,27 @@
     </ant-button>
   </view>
 </ant-list>
+
+<ant-container style="margin-top: 20rpx">
+  <ant-list header="外部控制选择器是否显示">
+    <ant-list-item>
+      请选择省市
+      <ant-cascader-picker
+        slot="extra"
+        visible="{{ pickerVisible }}"
+        placeholder="请选择归属地"
+        options="{{ cityList }}"
+        bind:change="handleCityPickerChange"
+        bind:visiblechange="handleTriggerControlledPicker"
+        bind:ok="handleCityOnOk"
+        bind:cancel="handleDismiss" />
+    </ant-list-item>
+  </ant-list>
+
+  <ant-button
+    size="medium"
+    type="primary"
+    bind:tap="handleOpenPicker">
+    打开 CascaderPicker
+  </ant-button>
+</ant-container>

compiled/wechat/demo/pages/DatePicker/index.js

@@ -1,6 +1,7 @@
 Page({
     data: {
         pickerVisible: false,
+        dateRangePickerVisible: false,
         min: new Date('2019/01/15').getTime(),
         max: new Date('2023/08/20').getTime(),
         defaultDate: new Date('2019/02/02').getTime(),
@@ -59,4 +60,15 @@ Page({
             pickerVisible: true,
         });
     },
+    handleTriggerControlledDateRangePicker(visible, e) {
+        console.log('handleTriggerControlledDateRangePicker', visible);
+        this.setData({
+            dateRangePickerVisible: visible.detail,
+        });
+    },
+    handleOpenDateRangePicker() {
+        this.setData({
+            dateRangePickerVisible: true,
+        });
+    },
 });