Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4628443

Browse files
danieliserdanieliser
committed
Make general tab render using useFields for dynamic filters
1 parent 58fadad commit 4628443

2 files changed

Lines changed: 160 additions & 106 deletions

File tree

‎packages/settings-page/src/restrictions-view/edit/general.tsx‎

Lines changed: 140 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
FieldPanel,
23
RadioButtonControl,
34
SearchableMulticheckControl,
45
} from '@content-control/components';
@@ -11,32 +12,153 @@ import {
1112
} from '@wordpress/components';
1213
import { __ } from '@wordpress/i18n';
1314
import { search } from '@wordpress/icons';
15+
import { addFilter } from '@wordpress/hooks';
16+
import { type Restriction } from '@content-control/core-data';
1417

18+
import useFields from '../use-fields';
1519
import { userStatusOptions } from '../options';
1620

1721
import type { EditTabProps } from '.';
1822

1923
/* Global Var Imports */
2024
const { userRoles } = contentControlSettingsPage;
2125

22-
const GeneralTab = ( {
23-
values,
24-
updateValues,
25-
updateSettings,
26-
}: EditTabProps ) => {
27-
const { settings } = values;
26+
addFilter(
27+
'contentControl.restrictionEditor.tabFields',
28+
'content-control',
29+
(
30+
fields: Record<
31+
string,
32+
{ id: string; priority: number; component: React.JSX.Element }[]
33+
>,
34+
settings: Restriction[ 'settings' ],
35+
updateSettings: (
36+
settings: Partial< Restriction[ 'settings' ] >
37+
) => void
38+
) => {
39+
// ** TODO REVIEW - This is here to ensure old data does not throw errors.
40+
// ** It may be that if we have dedicated migration routine this can be removed.
41+
let cleanedRoles: string[] = [];
2842

29-
// ** TODO REVIEW - This is here to ensure old data does not throw errors.
30-
// ** It may be that if we have dedicated migration routine this can be removed.
31-
let cleanedRoles: string[] = [];
43+
if ( Array.isArray( settings.userRoles ) ) {
44+
cleanedRoles = settings.userRoles;
45+
} else if ( typeof settings.userRoles === 'object' ) {
46+
cleanedRoles = Object.entries( settings.userRoles ).map(
47+
( [ value ] ) => value
48+
);
49+
}
50+
return {
51+
...fields,
52+
general: [
53+
{
54+
id: 'userStatus',
55+
priority: 3,
56+
component: (
57+
<FieldPanel
58+
title={ __( 'User Status', 'content-control' ) }
59+
>
60+
<RadioButtonControl
61+
label={ __(
62+
'Who can see this content?',
63+
'content-control'
64+
) }
65+
value={ settings.userStatus }
66+
onChange={ ( newUserStatus ) =>
67+
updateSettings( {
68+
userStatus: newUserStatus,
69+
} )
70+
}
71+
options={ userStatusOptions() }
72+
className="userStatus-field"
73+
/>
3274

33-
if ( Array.isArray( settings.userRoles ) ) {
34-
cleanedRoles = settings.userRoles;
35-
} else if ( typeof settings.userRoles === 'object' ) {
36-
cleanedRoles = Object.entries( settings.userRoles ).map(
37-
( [ value ] ) => value
38-
);
75+
{ 'logged_in' === settings.userStatus && (
76+
<>
77+
<SelectControl
78+
label={ __(
79+
'User Role',
80+
'content-control'
81+
) }
82+
value={ settings.roleMatch ?? 'any' }
83+
options={ [
84+
{
85+
label: __(
86+
'Any',
87+
'content-control'
88+
),
89+
value: 'any',
90+
},
91+
{
92+
label: __(
93+
'Matching',
94+
'content-control'
95+
),
96+
value: 'match',
97+
},
98+
{
99+
label: __(
100+
'Excluding',
101+
'content-control'
102+
),
103+
value: 'exclude',
104+
},
105+
] }
106+
onChange={ ( newRoleMatch ) =>
107+
updateSettings( {
108+
roleMatch: newRoleMatch as
109+
| 'any'
110+
| 'match'
111+
| 'exclude',
112+
} )
113+
}
114+
className="is-large roleMatch-field"
115+
/>
116+
117+
{ 'any' !== settings.roleMatch && (
118+
<SearchableMulticheckControl
119+
label={
120+
'exclude' === settings.roleMatch
121+
? __(
122+
'Roles to exclude',
123+
'content-control'
124+
)
125+
: __(
126+
'Roles to include',
127+
'content-control'
128+
)
129+
}
130+
searchIcon={ search }
131+
placeholder={ __(
132+
'Search roles…',
133+
'content-control'
134+
) }
135+
className="is-large userRoles-field"
136+
value={ cleanedRoles }
137+
onChange={ ( roles ) =>
138+
updateSettings( {
139+
userRoles: roles,
140+
} )
141+
}
142+
options={ Object.entries(
143+
userRoles
144+
).map( ( [ value, label ] ) => ( {
145+
value,
146+
label,
147+
} ) ) }
148+
/>
149+
) }
150+
</>
151+
) }
152+
</FieldPanel>
153+
),
154+
},
155+
],
156+
};
39157
}
158+
);
159+
160+
const GeneralTab = ( { values, updateValues }: EditTabProps ) => {
161+
const { getTabFields } = useFields();
40162

41163
const descriptionRowEst = values.description.length / 80;
42164
const descriptionRows = clamp( descriptionRowEst, 1, 5 );
@@ -74,79 +196,9 @@ const GeneralTab = ( {
74196
</Notice>
75197
) }
76198

77-
<RadioButtonControl
78-
label={ __( 'Who can see this content?', 'content-control' ) }
79-
value={ settings.userStatus }
80-
onChange={ ( newUserStatus ) =>
81-
updateSettings( { userStatus: newUserStatus } )
82-
}
83-
options={ userStatusOptions }
84-
className="userStatus-field"
85-
/>
86-
87-
{ 'logged_in' === settings.userStatus && (
88-
<>
89-
<SelectControl
90-
label={ __( 'User Role', 'content-control' ) }
91-
value={ settings.roleMatch ?? 'any' }
92-
options={ [
93-
{
94-
label: __( 'Any', 'content-control' ),
95-
value: 'any',
96-
},
97-
{
98-
label: __( 'Matching', 'content-control' ),
99-
value: 'match',
100-
},
101-
{
102-
label: __( 'Excluding', 'content-control' ),
103-
value: 'exclude',
104-
},
105-
] }
106-
onChange={ ( newRoleMatch ) =>
107-
updateSettings( {
108-
roleMatch: newRoleMatch as
109-
| 'any'
110-
| 'match'
111-
| 'exclude',
112-
} )
113-
}
114-
className="is-large roleMatch-field"
115-
/>
116-
117-
{ 'any' !== settings.roleMatch && (
118-
<SearchableMulticheckControl
119-
label={
120-
'exclude' === settings.roleMatch
121-
? __(
122-
'Roles to exclude',
123-
'content-control'
124-
)
125-
: __(
126-
'Roles to include',
127-
'content-control'
128-
)
129-
}
130-
searchIcon={ search }
131-
placeholder={ __(
132-
'Search roles…',
133-
'content-control'
134-
) }
135-
className="is-large userRoles-field"
136-
value={ cleanedRoles }
137-
onChange={ ( roles ) =>
138-
updateSettings( { userRoles: roles } )
139-
}
140-
options={ Object.entries( userRoles ).map(
141-
( [ value, label ] ) => ( {
142-
value,
143-
label,
144-
} )
145-
) }
146-
/>
147-
) }
148-
</>
149-
) }
199+
{ getTabFields( 'general' ).map( ( field ) => (
200+
<div key={ field.id }>{ field.component }</div>
201+
) ) }
150202
</div>
151203
);
152204
};

‎packages/settings-page/src/restrictions-view/options.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,27 @@ import { __ } from '@wordpress/i18n';
88
import { home, link, login } from '@wordpress/icons';
99

1010
import type { Restriction } from '@content-control/core-data';
11+
import { applyFilters } from '@wordpress/hooks';
1112

12-
export const userStatusOptions: {
13-
value: Restriction[ 'settings' ][ 'userStatus' ];
14-
label: string;
15-
[ key: string ]: any;
16-
}[] = [
17-
{
18-
value: 'logged_in',
19-
label: __( 'Logged In Users', 'content-control' ),
20-
icon: lockedUser,
21-
// iconSize: 18,
22-
},
23-
{
24-
value: 'logged_out',
25-
label: __( 'Logged Out Users', 'content-control' ),
26-
icon: incognito,
27-
// iconSize: 18,
28-
},
29-
];
13+
export const userStatusOptions = () =>
14+
applyFilters( 'contentControl.restrictionEditor.userStatusOptions', [
15+
{
16+
value: 'logged_in',
17+
label: __( 'Logged In Users', 'content-control' ),
18+
icon: lockedUser,
19+
// iconSize: 18,
20+
},
21+
{
22+
value: 'logged_out',
23+
label: __( 'Logged Out Users', 'content-control' ),
24+
icon: incognito,
25+
// iconSize: 18,
26+
},
27+
] ) as {
28+
value: 'logged_in' | 'logged_out';
29+
label: string;
30+
[ key: string ]: any;
31+
}[];
3032

3133
type protectionMethodOptionsType = {
3234
value: Restriction[ 'settings' ][ 'protectionMethod' ];

0 commit comments

Comments
 (0)