generated from openedx/frontend-template-application
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support merging props with PluginOperations.Modify
- Loading branch information
1 parent
bf8705b
commit 1931be1
Showing
26 changed files
with
763 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,74 @@ | ||
| import React from 'react'; | ||
| import { | ||
| Container, Row, Col, Stack, | ||
| } from '@openedx/paragon'; | ||
|
|
||
| import PluginSlotWithModifyDefaultContents from './pluginSlots/PluginSlotWithModifyDefaultContents'; | ||
| import PluginSlotWithInsert from './pluginSlots/PluginSlotWithInsert'; | ||
| import PluginSlotWithModifyWrapHide from './pluginSlots/PluginSlotWithModifyWrapHide'; | ||
| import PluginSlotWithModularPlugins from './pluginSlots/PluginSlotWithModularPlugins'; | ||
| import PluginSlotWithoutDefault from './pluginSlots/PluginSlotWithoutDefault'; | ||
|
|
||
| const pluginExamples = [ | ||
| { | ||
| id: 'plugin-operation-insert', | ||
| label: 'Plugin Operation: Insert', | ||
| Component: PluginSlotWithInsert, | ||
| }, | ||
| { | ||
| id: 'plugin-operation-modify-wrap-hide', | ||
| label: 'Plugin Operation: Modify, Wrap, and Hide', | ||
| Component: PluginSlotWithModifyWrapHide, | ||
| }, | ||
| { | ||
| id: 'plugin-operation-modify-default-content', | ||
| label: 'Plugin Operation: Modify Default Content', | ||
| Component: PluginSlotWithModifyDefaultContents, | ||
| }, | ||
| { | ||
| id: 'direct-plugins-modular-components', | ||
| label: 'Direct Plugins Using Modular Components', | ||
| Component: PluginSlotWithModularPlugins, | ||
| }, | ||
| { | ||
| id: 'no-default-content', | ||
| label: 'Default Content Set to False', | ||
| Component: PluginSlotWithoutDefault, | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ExamplePage() { | ||
| return ( | ||
| <main className="center m-5"> | ||
| <h1>Plugins Page</h1> | ||
|
|
||
| <p> | ||
| This page is here to help test the plugins module. A plugin configuration can be added in | ||
| index.jsx and this page will display that plugin. | ||
| </p> | ||
| <p> | ||
| To do this, a plugin MFE must be running on some other port. | ||
| To make it a more realistic test, you may also want to edit your | ||
| /etc/hosts file (or your system's equivalent) to provide an alternate domain for | ||
| 127.0.0.1 at which you can load the plugin. | ||
| </p> | ||
| <div className="d-flex flex-column"> | ||
| <PluginSlotWithInsert /> | ||
| <PluginSlotWithModifyWrapHide /> | ||
| <PluginSlotWithModularPlugins /> | ||
| <PluginSlotWithoutDefault /> | ||
| </div> | ||
| <main> | ||
| <Container size="lg" className="py-3"> | ||
| <Row> | ||
| <Col> | ||
| <h1>Plugins Page</h1> | ||
| <p> | ||
| This page is here to help test the plugins module. A plugin configuration can be added in | ||
| index.jsx and this page will display that plugin. | ||
| </p> | ||
| <p> | ||
| To do this, a plugin MFE must be running on some other port. | ||
| To make it a more realistic test, you may also want to edit your | ||
| /etc/hosts file (or your system's equivalent) to provide an alternate domain for | ||
| 127.0.0.1 at which you can load the plugin. | ||
| </p> | ||
| <h2>Examples</h2> | ||
| <Stack gap={3}> | ||
| <ul> | ||
| {pluginExamples.map(({ id, label }) => ( | ||
| <li key={id}> | ||
| <a href={`#${id}`}>{label}</a> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <Stack gap={5}> | ||
| {pluginExamples.map(({ Component, id, label }) => <Component key={id} id={id} label={label} />)} | ||
| </Stack> | ||
| </Stack> | ||
| </Col> | ||
| </Row> | ||
| </Container> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
example/src/pluginSlots/PluginSlotWithModifyDefaultContents.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { PluginSlot } from '@openedx/frontend-plugin-framework'; | ||
| import classNames from 'classnames'; | ||
|
|
||
|
|
||
| // Example component used as the default childen within a PluginSlot | ||
| const Username = ({ className, onClick, ...rest }) => { | ||
| const authenticatedUser = { username: 'testuser' }; | ||
| const { username } = authenticatedUser; | ||
| return ( | ||
| <span | ||
| className={classNames('default-classname', className)} | ||
| onClick={(e) => { | ||
| console.log('Username clicked!', 'default', e); | ||
| onClick?.(e); | ||
| }} | ||
| {...rest} | ||
| > | ||
| {username} | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| const UsernameWithPluginContent = ({ className, onClick, content = {} }) => { | ||
| const { | ||
| className: classNameFromPluginContent, | ||
| onClick: onClickFromPluginContent, | ||
| ...contentRest | ||
| } = content; | ||
| const updatedProps = { | ||
| className: classNames(className, classNameFromPluginContent), | ||
| onClick: (e) => { | ||
| onClick?.(e); | ||
| onClickFromPluginContent?.(e); | ||
| }, | ||
| }; | ||
| return <Username {...updatedProps} {...contentRest} />; | ||
| }; | ||
|
|
||
| function PluginSlotWithModifyDefaultContents({ id, label }) { | ||
| return ( | ||
| <div className="border border-primary px-3"> | ||
| <h3 id={id}>{label}</h3> | ||
| <p> | ||
| The following <code>PluginSlot</code> examples demonstrate the <code>PLUGIN_OPERATIONS.Modify</code> operation, when | ||
| the <code>widgetId</code> is <code>default_contents</code>. Any configured, custom plugin <code>content</code> is | ||
| merged with any existing props passed to the component(s) represented by <code>default_contents</code>. | ||
| </p> | ||
| <ul> | ||
| <li>Custom <code>className</code> overrides are concatenated with the <code>className</code> prop passed to the <code>default_contents</code> component(s), if any.</li> | ||
| <li>Custom <code>style</code> overrides are shallow merged with the <code>style</code> prop passed to the <code>default_contents</code> component(s), if any.</li> | ||
| <li>Custom event handlers (e.g., <code>onClick</code>) are executed in sequence, after any event handlers passed to the <code>default_contents</code> component(s), if any.</li> | ||
| </ul> | ||
| <PluginSlot | ||
| id="slot_with_username_pii" | ||
| as="div" | ||
| // Default slotOptions | ||
| slotOptions={{ | ||
| mergeProps: false, | ||
| }} | ||
| > | ||
| <UsernameWithPluginContent | ||
| className="tetsing" | ||
| onClick={(e) => { | ||
| console.log('Username clicked!', 'prop', e); | ||
| }} | ||
| /> | ||
| </PluginSlot> | ||
| <PluginSlot | ||
| id="slot_with_username_pii" | ||
| as="div" | ||
| slotOptions={{ | ||
| mergeProps: true, | ||
| }} | ||
| > | ||
| <Username | ||
| className="d-block abc123" | ||
| onClick={(e) => { | ||
| console.log('Username clicked!', 'prop', e); | ||
| }} | ||
| /> | ||
| {/* <Username className="ghi789" /> // Note: uncomment to see example of incorrectly using multiple `children` elements within `PluginSlot` */} | ||
| </PluginSlot> | ||
| <PluginSlot | ||
| id="slot_with_username_pii" | ||
| as="div" | ||
| pluginProps={{ | ||
| className: 'bg-accent-b', | ||
| onClick: (e) => { console.log('Username clicked!', 'pluginProps', e); }, | ||
| }} | ||
| slotOptions={{ | ||
| mergeProps: true, | ||
| }} | ||
| > | ||
| <Username | ||
| className="ghi789" | ||
| onClick={(e) => { | ||
| console.log('Username clicked!', 'prop', e); | ||
| }} | ||
| /> | ||
| </PluginSlot> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default PluginSlotWithModifyDefaultContents; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.