Skip to content

Commit 54bf3ef

Browse files
hassanad94hassanad94
committed
before error
1 parent 790e472 commit 54bf3ef

File tree

4 files changed

+112
-68
lines changed

4 files changed

+112
-68
lines changed

‎packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,24 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
179179
}
180180
}, [props.actionName, getSelected])
181181

182+
const currentParent = props.content?.Path.substring(0, props.content?.Path.lastIndexOf('/')) || '/Root'
183+
184+
const getPathForReferenceHelper = () => {
185+
const paths = new Set<string>()
186+
187+
for (const root of props.settings.SelectionRoots || []) {
188+
paths.add(root)
189+
//if currenParent inside selectionRoots then add it to the list
190+
if (PathHelper.isInSubTree(currentParent, root)) {
191+
paths.add(currentParent)
192+
}
193+
}
194+
195+
return Array.from(paths)
196+
}
197+
198+
const helperPaths = getPathForReferenceHelper()
199+
182200
switch (props.actionName) {
183201
case 'new':
184202
case 'edit':
@@ -229,7 +247,8 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
229247
<ReferencePicker
230248
defaultValue={fieldValue}
231249
path={props.settings.SelectionRoots?.[0] || '/Root'}
232-
contextPath={props.content?.Path}
250+
contextPath={currentParent}
251+
helperPaths={helperPaths}
233252
repository={props.repository!}
234253
renderIcon={props.renderPickerIcon}
235254
handleSubmit={handleOkClick}

‎packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-picker.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface ReferencePickerProps<T>
1212
contextPath?: string
1313
renderIcon?: (name: T) => JSX.Element
1414
fieldSettings: ReferenceFieldSetting
15+
helperPaths?: string[]
1516
}
1617

1718
const createTypeFilterString = (allowedTypes: string[]) => {
@@ -70,6 +71,7 @@ export const ReferencePicker: React.FC<ReferencePickerProps<GenericContentWithIs
7071

7172
return (
7273
<Picker
74+
helperPaths={props.helperPaths}
7375
defaultValue={props.defaultValue}
7476
repository={props.repository}
7577
currentPath={props.path}

‎packages/sn-pickers-react/src/components/picker/picker-props.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,4 +179,5 @@ export interface PickerProps<T> {
179179

180180
navigationPath?: string
181181
setNavigationPath?: React.Dispatch<React.SetStateAction<string>>
182+
helperPaths?: string[]
182183
}

‎packages/sn-pickers-react/src/components/picker/picker.tsx

Lines changed: 89 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,24 @@ const useStyles = makeStyles((theme: Theme) => {
2929
treeActiveIcon: {
3030
color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
3131
},
32+
3233
showSelected: {
3334
textAlign: 'right',
35+
marginLeft: 'auto',
36+
marginTop: '5px',
3437
},
3538
jumpCurrentPath: {
36-
paddingLeft: '16px',
3739
cursor: 'pointer',
3840
},
3941
toolbar: {
4042
display: 'flex',
4143
alignItems: 'center',
44+
paddingRight: '24px',
45+
flexWrap: 'wrap',
46+
marginBottom: '10px',
47+
'& .MuiFormControl-root': {
48+
width: 'calc(100% - 48px)',
49+
},
4250
},
4351
cancelButton: {},
4452
currentLocationIcon: {
@@ -122,12 +130,8 @@ export const Picker: React.FunctionComponent<PickerProps<GenericContent>> = (pro
122130
return () => ac.abort()
123131
}, [term, props.repository, props.selectionRoots])
124132

125-
const handleJumpToCurrentPath = async () => {
126-
if (!props.currentPath) {
127-
return
128-
}
129-
130-
setNavigationPath(props.currentPath)
133+
const handleJumpToCurrentPath = (path: string) => {
134+
setNavigationPath(path)
131135
}
132136

133137
return (
@@ -138,70 +142,88 @@ export const Picker: React.FunctionComponent<PickerProps<GenericContent>> = (pro
138142
<div
139143
style={{
140144
display: 'flex',
141-
flexDirection: 'row',
142-
flexWrap: 'wrap',
143-
height: '100%',
145+
flexDirection: 'column',
146+
flexWrap: 'nowrap',
147+
height: '85%',
144148
justifyContent: 'space-between',
145149
}}>
146-
<PickerContainer>
147-
<Box className={classes.toolbar}>
148-
<IconButton
149-
title={props.localization?.treeViewButton ?? 'Tree view'}
150-
onClick={() => setMode(treePickerMode)}
151-
className={`${classes.treeIcon} ${mode === treePickerMode ? classes.treeActiveIcon : ''}`}>
152-
<AccountTree />
153-
</IconButton>
154-
<TextField
155-
fullWidth={true}
156-
placeholder={props.localization?.searchPlaceholder ?? 'Search'}
157-
onFocus={() => setMode(PickerModes.SEARCH)}
158-
onChange={(ev) => {
159-
debouncedQuery(ev.target.value)
160-
}}
161-
/>
162-
</Box>
163-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
164-
<Link variant="body2" onClick={handleJumpToCurrentPath} className={classes.jumpCurrentPath}>
165-
Jumping to current path
166-
</Link>
167-
168-
<ShowSelectedButton
169-
className={classes.showSelected}
170-
handleClick={() => setMode(PickerModes.SELECTION)}
171-
localization={{ label: props.localization?.showSelected ?? 'Show selected' }}
172-
/>
150+
<Box className={classes.toolbar}>
151+
<IconButton
152+
title={props.localization?.treeViewButton ?? 'Tree view'}
153+
onClick={() => setMode(treePickerMode)}
154+
className={`${classes.treeIcon} ${mode === treePickerMode ? classes.treeActiveIcon : ''}`}>
155+
<AccountTree />
156+
</IconButton>
157+
<TextField
158+
fullWidth={true}
159+
placeholder={props.localization?.searchPlaceholder ?? 'Search'}
160+
onFocus={() => setMode(PickerModes.SEARCH)}
161+
onChange={(ev) => {
162+
debouncedQuery(ev.target.value)
163+
}}
164+
/>
165+
<ShowSelectedButton
166+
className={classes.showSelected}
167+
handleClick={() => setMode(PickerModes.SELECTION)}
168+
localization={{ label: props.localization?.showSelected ?? 'Show selected' }}
169+
/>
170+
</Box>
171+
172+
<div className="selection-container" style={{ width: '100%', display: 'flex' }}>
173+
<div
174+
style={{
175+
display: 'flex',
176+
flexDirection: 'column',
177+
justifyContent: 'flex-start',
178+
alignItems: 'center',
179+
rowGap: '10px',
180+
width: '140px',
181+
paddingInline: '10px',
182+
}}>
183+
{props.helperPaths?.map((path) => (
184+
<Link
185+
key={path}
186+
variant="body2"
187+
onClick={() => handleJumpToCurrentPath(path)}
188+
className={classes.jumpCurrentPath}>
189+
{path === props.contextPath ? 'Current Content' : path}
190+
</Link>
191+
))}
173192
</div>
174-
{mode === PickerModes.TREE && (
175-
<TreePicker setNavigationPath={setNavigationPath} navigationPath={navigationPath} {...props} />
176-
)}
177-
{mode === PickerModes.COPY_MOVE_TREE && <CopyMoveTreePicker {...props} />}
178-
{mode === PickerModes.SEARCH && <SearchPicker {...props} items={result} error={searchError} />}
179-
{mode === PickerModes.SELECTION && <SelectionList {...props} />}
180-
</PickerContainer>
181-
<SelectionContext.Consumer>
182-
{({ selection }) =>
183-
props.renderActions ? (
184-
props.renderActions(selection)
185-
) : (
186-
<ActionsContainer style={{ marginLeft: 'auto', width: '100%' }}>
187-
<Button
188-
aria-label={props.localization?.cancelButton ?? 'Cancel'}
189-
className={classes.cancelButton}
190-
disabled={!!props.isExecInProgress}
191-
onClick={() => props.handleCancel?.()}>
192-
{props.localization?.cancelButton ?? 'Cancel'}
193-
</Button>
194-
<SaveButton
195-
data-test="picker-submit"
196-
disabled={(props.required && selection.length < props.required) || !!props.isExecInProgress}
197-
localization={{ label: props.localization?.submitButton ?? 'Submit' }}
198-
onClick={() => props.handleSubmit?.(selection)}
199-
/>
200-
</ActionsContainer>
201-
)
202-
}
203-
</SelectionContext.Consumer>
193+
194+
<PickerContainer style={{ height: '545px', paddingTop: 0, position: 'relative', top: '-7px' }}>
195+
{mode === PickerModes.TREE && (
196+
<TreePicker setNavigationPath={setNavigationPath} navigationPath={navigationPath} {...props} />
197+
)}
198+
{mode === PickerModes.COPY_MOVE_TREE && <CopyMoveTreePicker {...props} />}
199+
{mode === PickerModes.SEARCH && <SearchPicker {...props} items={result} error={searchError} />}
200+
{mode === PickerModes.SELECTION && <SelectionList {...props} />}
201+
</PickerContainer>
202+
</div>
204203
</div>
204+
<SelectionContext.Consumer>
205+
{({ selection }) =>
206+
props.renderActions ? (
207+
props.renderActions(selection)
208+
) : (
209+
<ActionsContainer style={{ marginLeft: 'auto', width: '100%' }}>
210+
<Button
211+
aria-label={props.localization?.cancelButton ?? 'Cancel'}
212+
className={classes.cancelButton}
213+
disabled={!!props.isExecInProgress}
214+
onClick={() => props.handleCancel?.()}>
215+
{props.localization?.cancelButton ?? 'Cancel'}
216+
</Button>
217+
<SaveButton
218+
data-test="picker-submit"
219+
disabled={(props.required && selection.length < props.required) || !!props.isExecInProgress}
220+
localization={{ label: props.localization?.submitButton ?? 'Submit' }}
221+
onClick={() => props.handleSubmit?.(selection)}
222+
/>
223+
</ActionsContainer>
224+
)
225+
}
226+
</SelectionContext.Consumer>
205227
</SelectionProvider>
206228
)
207229
}

0 commit comments

Comments
 (0)