forked from openedx/frontend-app-authoring
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ComponentPicker.tsx
88 lines (76 loc) · 2.62 KB
/
ComponentPicker.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useState } from 'react';
import { Stepper } from '@openedx/paragon';
import {
type ComponentSelectedEvent,
LibraryProvider,
useLibraryContext,
} from '../common/context';
import LibraryAuthoringPage from '../LibraryAuthoringPage';
import LibraryCollectionPage from '../collections/LibraryCollectionPage';
import SelectLibrary from './SelectLibrary';
interface LibraryComponentPickerProps {
returnToLibrarySelection: () => void;
}
const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({ returnToLibrarySelection }) => {
const { collectionId } = useLibraryContext();
if (collectionId) {
return <LibraryCollectionPage />;
}
return <LibraryAuthoringPage returnToLibrarySelection={returnToLibrarySelection} />;
};
const defaultComponentSelectedCallback: ComponentSelectedEvent = ({ usageKey, blockType }) => {
window.parent.postMessage({
usageKey,
type: 'pickerComponentSelected',
category: blockType,
}, '*');
};
type ComponentPickerProps = {
componentPickerMode?: 'single',
onComponentSelected?: ComponentSelectedEvent,
} | {
componentPickerMode: 'multiple'
onComponentSelected: never,
};
// eslint-disable-next-line import/prefer-default-export
export const ComponentPicker: React.FC<ComponentPickerProps> = ({
componentPickerMode = 'single',
/** This default callback is used to send the selected component back to the parent window,
* when the component picker is used in an iframe.
*/
onComponentSelected = defaultComponentSelectedCallback,
}) => {
const [currentStep, setCurrentStep] = useState('select-library');
const [selectedLibrary, setSelectedLibrary] = useState('');
const handleLibrarySelection = (library: string) => {
setCurrentStep('pick-components');
setSelectedLibrary(library);
};
const returnToLibrarySelection = () => {
setCurrentStep('select-library');
setSelectedLibrary('');
};
const libraryProviderProps = componentPickerMode === 'single' ? {
componentPickerMode,
onComponentSelected,
} : {
componentPickerMode,
};
return (
<Stepper
activeKey={currentStep}
>
<Stepper.Step eventKey="select-library" title="Select a library">
<SelectLibrary selectedLibrary={selectedLibrary} setSelectedLibrary={handleLibrarySelection} />
</Stepper.Step>
<Stepper.Step eventKey="pick-components" title="Pick some components">
<LibraryProvider
libraryId={selectedLibrary}
{...libraryProviderProps}
>
<InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
</LibraryProvider>
</Stepper.Step>
</Stepper>
);
};