feat(ui): popup components support dInitialVisible

xiejay97 · xiejay97 · commit 82ef3d5fecc4 · 2023-06-21T15:17:30.000+08:00
diff --git a/packages/ui/src/components/auto-complete/AutoComplete.tsx b/packages/ui/src/components/auto-complete/AutoComplete.tsx
@@ -31,6 +31,7 @@ export interface DAutoCompleteItem {
 export interface DAutoCompleteProps<T extends DAutoCompleteItem> extends React.HTMLAttributes<HTMLDivElement> {
   dList: T[];
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dLoading?: boolean;
   dVirtual?: boolean;
   dCustomItem?: (item: T) => React.ReactNode;
@@ -49,6 +50,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
     children,
     dList,
     dVisible,
+    dInitialVisible = false,
     dLoading = false,
     dVirtual = false,
     dCustomItem,
@@ -89,7 +91,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
 
   const canSelectItem = useCallback((item: T) => !item.disabled && !item.children, []);
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const [focusVisible, setFocusVisible] = useState(false);
 
diff --git a/packages/ui/src/components/cascader/Cascader.tsx b/packages/ui/src/components/cascader/Cascader.tsx
@@ -49,6 +49,7 @@ export interface DCascaderProps<V extends DId, T extends DCascaderItem<V>> exten
   dList: T[];
   dModel?: V | null | V[];
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
   dLoading?: boolean;
@@ -86,6 +87,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
     dList,
     dModel,
     dVisible,
+    dInitialVisible = false,
     dPlaceholder,
     dSize,
     dLoading = false,
@@ -163,7 +165,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
 
   const [searchValue, changeSearchValue] = useDValue<string>('', dSearchValue, onSearchValueChange);
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
   const formControlInject = useFormControl(dFormControl);
   const [_select, changeSelect] = useDValue<V | null | V[]>(
     dMultiple ? [] : null,
diff --git a/packages/ui/src/components/date-picker/DatePicker.tsx b/packages/ui/src/components/date-picker/DatePicker.tsx
@@ -29,6 +29,7 @@ export interface DDatePickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   dModel?: Date | null | [Date, Date];
   dFormat?: string;
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlacement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
   dOrder?: 'ascend' | 'descend' | false;
   dPlaceholder?: string | [string?, string?];
@@ -58,6 +59,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
     dModel,
     dFormat,
     dVisible,
+    dInitialVisible = false,
     dPlacement = 'bottom-left',
     dOrder = 'ascend',
     dPlaceholder,
@@ -90,7 +92,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
 
   const [t] = useTranslation();
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const size = dSize ?? gSize;
   const disabled = (dDisabled || gDisabled || dFormControl?.control.disabled) ?? false;
diff --git a/packages/ui/src/components/drawer/Drawer.tsx b/packages/ui/src/components/drawer/Drawer.tsx
@@ -20,6 +20,7 @@ import { DDrawerHeader } from './DrawerHeader';
 
 export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   dVisible: boolean;
+  dInitialVisible?: boolean;
   dContainer?: DRefExtra | false;
   dPlacement?: 'top' | 'right' | 'bottom' | 'left';
   dWidth?: number | string;
@@ -51,6 +52,7 @@ export const DDrawer: {
   const {
     children,
     dVisible,
+    dInitialVisible = false,
     dContainer,
     dPlacement = 'right',
     dWidth = 400,
@@ -127,7 +129,7 @@ export const DDrawer: {
         : `translateX(${(distance[dPlacement] / 3) * 2}px)`,
   };
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onClose);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onClose);
 
   const isFixed = isUndefined(dContainer);
 
diff --git a/packages/ui/src/components/dropdown/Dropdown.tsx b/packages/ui/src/components/dropdown/Dropdown.tsx
@@ -39,6 +39,7 @@ export interface DDropdownProps<ID extends DId, T extends DDropdownItem<ID>>
   children: React.ReactElement;
   dList: T[];
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlacement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
   dTrigger?: 'hover' | 'click';
   dArrow?: boolean;
@@ -57,6 +58,7 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID>>(
     children,
     dList,
     dVisible,
+    dInitialVisible = false,
     dPlacement = 'bottom-right',
     dTrigger = 'hover',
     dArrow = false,
@@ -157,7 +159,7 @@ function Dropdown<ID extends DId, T extends DDropdownItem<ID>>(
     setFocusIds(ids);
   };
 
-  const [visible, _changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, _changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
   const changeVisible = (visible: boolean) => {
     if (!visible) {
       setPopupIds([]);
diff --git a/packages/ui/src/components/modal/Modal.tsx b/packages/ui/src/components/modal/Modal.tsx
@@ -19,6 +19,7 @@ import { DModalHeader } from './ModalHeader';
 
 export interface DModalProps extends React.HTMLAttributes<HTMLDivElement> {
   dVisible: boolean;
+  dInitialVisible?: boolean;
   dWidth?: number | string;
   dTop?: number | string;
   dZIndex?: number | string;
@@ -48,6 +49,7 @@ export const DModal: {
   const {
     children,
     dVisible,
+    dInitialVisible = false,
     dWidth = 520,
     dTop = 100,
     dZIndex,
@@ -96,7 +98,7 @@ export const DModal: {
 
   const topStyle = dTop + (isNumber(dTop) ? 'px' : '');
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onClose);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onClose);
 
   const maxZIndex = useMaxIndex(visible);
   const zIndex = (() => {
diff --git a/packages/ui/src/components/popover/Popover.tsx b/packages/ui/src/components/popover/Popover.tsx
@@ -26,6 +26,7 @@ export interface DPopoverRef {
 export interface DPopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   children: React.ReactElement;
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dTrigger?: 'hover' | 'click';
   dContainer?: DRefExtra | false;
   dPlacement?: DPopupPlacement;
@@ -51,6 +52,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
   const {
     children,
     dVisible,
+    dInitialVisible = false,
     dTrigger = 'hover',
     dContainer,
     dPlacement = 'top',
@@ -112,7 +114,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
   const titleId = `${dPrefix}popover-title-${uniqueId}`;
   const bodyId = `${dPrefix}popover-content-${uniqueId}`;
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const maxZIndex = useMaxIndex(visible);
   const zIndex = (() => {
diff --git a/packages/ui/src/components/select/Select.tsx b/packages/ui/src/components/select/Select.tsx
@@ -43,6 +43,7 @@ export interface DSelectProps<V extends DId, T extends DSelectItem<V>> extends O
   dList: T[];
   dModel?: V | null | V[];
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
   dLoading?: boolean;
@@ -82,6 +83,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
     dList,
     dModel,
     dVisible,
+    dInitialVisible = false,
     dPlaceholder,
     dSize,
     dLoading = false,
@@ -147,7 +149,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
 
   const [focusVisible, setFocusVisible] = useState(false);
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
   const formControlInject = useFormControl(dFormControl);
   const [_select, changeSelect] = useDValue<V | null | V[]>(
     dMultiple ? [] : null,
diff --git a/packages/ui/src/components/time-picker/TimePicker.tsx b/packages/ui/src/components/time-picker/TimePicker.tsx
@@ -28,6 +28,7 @@ export interface DTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   dModel?: Date | null | [Date, Date];
   dFormat?: string;
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlacement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
   dOrder?: 'ascend' | 'descend' | false;
   dPlaceholder?: string | [string?, string?];
@@ -61,6 +62,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
     dModel,
     dFormat,
     dVisible,
+    dInitialVisible = false,
     dPlacement = 'bottom-left',
     dOrder = 'ascend',
     dPlaceholder,
@@ -91,7 +93,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
 
   const [t] = useTranslation();
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const size = dSize ?? gSize;
   const disabled = (dDisabled || gDisabled || dFormControl?.control.disabled) ?? false;
diff --git a/packages/ui/src/components/tooltip/Tooltip.tsx b/packages/ui/src/components/tooltip/Tooltip.tsx
@@ -22,6 +22,7 @@ export interface DTooltipRef {
 export interface DTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   children: React.ReactElement;
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dTrigger?: 'hover' | 'click';
   dContainer?: DRefExtra | false;
   dPlacement?: DPopupPlacement;
@@ -43,6 +44,7 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
   const {
     children,
     dVisible,
+    dInitialVisible = false,
     dTrigger = 'hover',
     dContainer,
     dPlacement = 'top',
@@ -91,7 +93,7 @@ function Tooltip(props: DTooltipProps, ref: React.ForwardedRef<DTooltipRef>): JS
   const uniqueId = useId();
   const id = restProps.id ?? `${dPrefix}tooltip-${uniqueId}`;
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const maxZIndex = useMaxIndex(visible);
   const zIndex = (() => {
diff --git a/packages/ui/src/components/tree-select/TreeSelect.tsx b/packages/ui/src/components/tree-select/TreeSelect.tsx
@@ -41,6 +41,7 @@ export interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends
   dModel?: V | null | V[];
   dExpands?: V[];
   dVisible?: boolean;
+  dInitialVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
   dLoading?: boolean;
@@ -81,6 +82,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
     dModel,
     dExpands,
     dVisible,
+    dInitialVisible = false,
     dPlaceholder,
     dSize,
     dLoading = false,
@@ -134,7 +136,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
 
   const [searchValue, changeSearchValue] = useDValue<string>('', dSearchValue, onSearchValueChange);
 
-  const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
+  const [visible, changeVisible] = useDValue<boolean>(dInitialVisible, dVisible, onVisibleChange);
 
   const renderNodes = useMemo<AbstractTreeNode<V, T>[]>(
     () =>
