Skip to content

Commit 5d12fd6

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: add new defaultOpen prop to dialog components
1 parent 33f9d4f commit 5d12fd6

11 files changed

Lines changed: 111 additions & 14 deletions

File tree

‎apps/showcase/assets/apidoc/index.json‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87277,6 +87277,14 @@
8727787277
"default": "false",
8727887278
"description": "Specifies the visibility of the dialog."
8727987279
},
87280+
{
87281+
"name": "defaultOpen",
87282+
"optional": true,
87283+
"readonly": false,
87284+
"type": "boolean",
87285+
"default": "false",
87286+
"description": "Specifies the default visibility of the dialog."
87287+
},
8728087288
{
8728187289
"name": "draggable",
8728287290
"optional": true,
@@ -144448,6 +144456,14 @@
144448144456
"default": "false",
144449144457
"description": "Specifies the visibility of the dialog."
144450144458
},
144459+
{
144460+
"name": "defaultOpen",
144461+
"optional": true,
144462+
"readonly": false,
144463+
"type": "boolean",
144464+
"default": "false",
144465+
"description": "Specifies the default visibility of the dialog."
144466+
},
144451144467
{
144452144468
"name": "draggable",
144453144469
"optional": true,
@@ -144877,13 +144893,21 @@
144877144893
"default": "false",
144878144894
"description": "Specifies the visibility of the confirmpopup."
144879144895
},
144896+
{
144897+
"name": "defaultOpen",
144898+
"optional": true,
144899+
"readonly": false,
144900+
"type": "boolean",
144901+
"default": "false",
144902+
"description": "Specifies the default visibility of the confirmpopup."
144903+
},
144880144904
{
144881144905
"name": "defaultFocus",
144882144906
"optional": true,
144883144907
"readonly": false,
144884144908
"type": "\"accept\" | \"reject\"",
144885144909
"default": "undefined",
144886-
"description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
144910+
"description": "Element to receive the focus when the confirmpopup gets visible, valid values are \"accept\" and \"reject\"."
144887144911
},
144888144912
{
144889144913
"name": "onOpenChange",
@@ -179706,13 +179730,21 @@
179706179730
"default": "false",
179707179731
"description": "Specifies the visibility of the confirmpopup."
179708179732
},
179733+
{
179734+
"name": "defaultOpen",
179735+
"optional": true,
179736+
"readonly": false,
179737+
"type": "boolean",
179738+
"default": "false",
179739+
"description": "Specifies the default visibility of the confirmpopup."
179740+
},
179709179741
{
179710179742
"name": "defaultFocus",
179711179743
"optional": true,
179712179744
"readonly": false,
179713179745
"type": "\"accept\" | \"reject\"",
179714179746
"default": "undefined",
179715-
"description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
179747+
"description": "Element to receive the focus when the confirmpopup gets visible, valid values are \"accept\" and \"reject\"."
179716179748
},
179717179749
{
179718179750
"name": "onOpenChange",
@@ -180108,6 +180140,14 @@
180108180140
"default": "false",
180109180141
"description": "Specifies the visibility of the dialog."
180110180142
},
180143+
{
180144+
"name": "defaultOpen",
180145+
"optional": true,
180146+
"readonly": false,
180147+
"type": "boolean",
180148+
"default": "false",
180149+
"description": "Specifies the default visibility of the dialog."
180150+
},
180111180151
{
180112180152
"name": "draggable",
180113180153
"optional": true,
@@ -227023,6 +227063,14 @@
227023227063
"default": "false",
227024227064
"description": "Specifies the visibility of the dialog."
227025227065
},
227066+
{
227067+
"name": "defaultOpen",
227068+
"optional": true,
227069+
"readonly": false,
227070+
"type": "boolean",
227071+
"default": "false",
227072+
"description": "Specifies the default visibility of the dialog."
227073+
},
227026227074
{
227027227075
"name": "draggable",
227028227076
"optional": true,
@@ -233837,6 +233885,14 @@
233837233885
"default": "false",
233838233886
"description": "Specifies the visibility of the drawer."
233839233887
},
233888+
{
233889+
"name": "defaultOpen",
233890+
"optional": true,
233891+
"readonly": false,
233892+
"type": "boolean",
233893+
"default": "false",
233894+
"description": "Specifies the default visibility of the drawer."
233895+
},
233840233896
{
233841233897
"name": "modal",
233842233898
"optional": true,
@@ -270497,6 +270553,14 @@
270497270553
"default": "false",
270498270554
"description": "Specifies the visibility of the drawer."
270499270555
},
270556+
{
270557+
"name": "defaultOpen",
270558+
"optional": true,
270559+
"readonly": false,
270560+
"type": "boolean",
270561+
"default": "false",
270562+
"description": "Specifies the default visibility of the drawer."
270563+
},
270500270564
{
270501270565
"name": "modal",
270502270566
"optional": true,

‎packages/headless/src/confirmdialog/useConfirmDialog.props.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { useConfirmDialogProps } from '@primereact/types/shared/confirmdial
22

33
export const defaultProps: useConfirmDialogProps = {
44
open: false,
5+
defaultOpen: false,
56
draggable: true,
67
keepInViewport: true,
78
modal: true,

‎packages/headless/src/confirmpopup/useConfirmPopup.props.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { useConfirmPopupProps } from '@primereact/types/shared/confirmpopup
22

33
export const defaultProps: useConfirmPopupProps = {
44
open: false,
5+
defaultOpen: false,
56
defaultFocus: undefined,
67
onOpenChange: undefined
78
};

‎packages/headless/src/confirmpopup/useConfirmPopup.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const useConfirmPopup = withHeadless({
1010
name: 'useConfirmPopup',
1111
defaultProps,
1212
setup: ({ props, $primereact }) => {
13-
const [openState, setOpenState] = React.useState<boolean>(props.open ?? false);
13+
const [openState, setOpenState] = React.useState<boolean>(props.open ?? props.defaultOpen ?? false);
1414
const motionRef = React.useRef<{ elementRef: React.RefObject<HTMLDivElement> } | null>(null);
1515
const triggerRef = React.useRef<{ elementRef: React.RefObject<HTMLButtonElement> } | null>(null);
1616
const acceptRef = React.useRef<{ elementRef: React.RefObject<HTMLButtonElement> } | null>(null);
@@ -21,11 +21,25 @@ export const useConfirmPopup = withHeadless({
2121
opened: openState
2222
};
2323

24+
React.useEffect(() => {
25+
if (props.defaultOpen) {
26+
open();
27+
}
28+
}, [props.defaultOpen]);
29+
2430
useUnmountEffect(() => {
2531
ZIndex.clear(motionRef.current?.elementRef.current as HTMLDivElement);
2632
});
2733

2834
//methods
35+
const open = () => {
36+
setOpenState(true);
37+
38+
props?.onOpenChange?.({
39+
value: true
40+
});
41+
};
42+
2943
const close = () => {
3044
setOpenState(false);
3145

‎packages/headless/src/dialog/useDialog.props.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { useDialogProps } from '@primereact/types/shared/dialog';
22

33
export const defaultProps: useDialogProps = {
44
open: false,
5+
defaultOpen: false,
56
draggable: true,
67
keepInViewport: true,
78
minX: 0,

‎packages/headless/src/dialog/useDialog.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ export const useDialog = withHeadless({
99
name: 'useDialog',
1010
defaultProps,
1111
setup: ({ props, $primereact }) => {
12-
const [openState, setOpenState] = React.useState<boolean>(props.open ?? false);
12+
const [openState, setOpenState] = React.useState<boolean>(props.open ?? props.defaultOpen ?? false);
1313
const [maximizedState, setMaximizedState] = React.useState<boolean>(false);
14-
const [maskVisibleState, setMaskVisibleState] = React.useState<boolean>(props.open ?? false);
14+
const [maskVisibleState, setMaskVisibleState] = React.useState<boolean>(props.open ?? props.defaultOpen ?? false);
1515
const maskRef = React.useRef<HTMLDivElement | null>(null);
1616
const motionRef = React.useRef<{ elementRef: React.RefObject<HTMLDivElement> } | null>(null);
1717
const maximizableButtonRef = React.useRef<{ elementRef: React.RefObject<HTMLButtonElement> } | null>(null);
@@ -29,16 +29,16 @@ export const useDialog = withHeadless({
2929
};
3030

3131
useMountEffect(() => {
32-
if (props.open) {
32+
if (props.open || props.defaultOpen) {
3333
setMaskVisibleState(true);
3434
}
3535
});
3636

3737
useUpdateEffect(() => {
38-
if (props.open && !maskVisibleState) {
38+
if (props.open || (props.defaultOpen && !maskVisibleState)) {
3939
setMaskVisibleState(true);
4040
}
41-
}, [props.open]);
41+
}, [props.open, props.defaultOpen]);
4242

4343
useUpdateEffect(() => {
4444
if (maskVisibleState && !openState) {

‎packages/headless/src/drawer/useDrawer.props.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { useDrawerProps } from '@primereact/types/shared/drawer';
22

33
export const defaultProps: useDrawerProps = {
44
open: false,
5+
defaultOpen: false,
56
modal: true,
67
blockScroll: false,
78
dismissable: true,

‎packages/headless/src/drawer/useDrawer.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const useDrawer = withHeadless({
99
name: 'useDrawer',
1010
defaultProps,
1111
setup: ({ props, elementRef, $primereact }) => {
12-
const [openState, setOpenState] = React.useState<boolean>(props.open ?? false);
13-
const [maskVisibleState, setMaskVisibleState] = React.useState<boolean>(props.open ?? false);
12+
const [openState, setOpenState] = React.useState<boolean>(props.open ?? props.defaultOpen ?? false);
13+
const [maskVisibleState, setMaskVisibleState] = React.useState<boolean>(props.open ?? props.defaultOpen ?? false);
1414
const maskRef = React.useRef<HTMLDivElement | null>(null);
1515
const motionRef = React.useRef<{ elementRef: React.RefObject<HTMLDivElement> } | null>(null);
1616
const closeButtonRef = React.useRef<{ elementRef: React.RefObject<HTMLButtonElement> } | null>(null);
@@ -21,16 +21,16 @@ export const useDrawer = withHeadless({
2121
};
2222

2323
useMountEffect(() => {
24-
if (props.open) {
24+
if (props.open || props.defaultOpen) {
2525
setMaskVisibleState(true);
2626
}
2727
});
2828

2929
useUpdateEffect(() => {
30-
if (props.open && !maskVisibleState) {
30+
if (props.open || (props.defaultOpen && !maskVisibleState)) {
3131
setMaskVisibleState(true);
3232
}
33-
}, [props.open]);
33+
}, [props.open, props.defaultOpen]);
3434

3535
useUpdateEffect(() => {
3636
if (maskVisibleState && !openState) {

‎packages/types/src/shared/confirmpopup/useConfirmPopup.types.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,12 @@ export interface useConfirmPopupProps {
3030
*/
3131
open?: boolean | undefined;
3232
/**
33-
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
33+
* Specifies the default visibility of the confirmpopup.
34+
* @default false
35+
*/
36+
defaultOpen?: boolean | undefined;
37+
/**
38+
* Element to receive the focus when the confirmpopup gets visible, valid values are "accept" and "reject".
3439
* @default undefined
3540
*/
3641
defaultFocus?: 'accept' | 'reject' | undefined;

‎packages/types/src/shared/dialog/useDialog.types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ export interface useDialogProps {
2929
* @default false
3030
*/
3131
open?: boolean | undefined;
32+
/**
33+
* Specifies the default visibility of the dialog.
34+
* @default false
35+
*/
36+
defaultOpen?: boolean | undefined;
3237
/**
3338
* Enables dragging to change the position using header.
3439
* @default true

0 commit comments

Comments
 (0)