From 1a9f9c20568983b79f07bc8a672a6bacfbf00735 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 23 Feb 2018 14:32:52 -0700 Subject: [PATCH 1/6] added support for the singleSlot --- client/coral-framework/components/Slot.js | 34 +++++++++++++--------- client/coral-framework/services/plugins.js | 16 ++++++++-- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index fe63b4f30..516e23e50 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -7,6 +7,7 @@ import PropTypes from 'prop-types'; import isEqual from 'lodash/isEqual'; import get from 'lodash/get'; import { getShallowChanges } from 'coral-framework/utils'; +import omit from 'lodash/omit'; const emptyConfig = {}; @@ -32,27 +33,29 @@ class Slot extends React.Component { } getSlotProps(props = this.props) { - const { - fill: _a, - inline: _b, - className: _c, - reduxState: _d, - defaultComponent_: _e, - queryData: _f, - childFactory: _g, - component: _h, - ...rest - } = props; - return rest; + return omit(props, [ + 'fill', + 'inline', + 'className', + 'reduxState', + 'singleSlot', + 'defaultComponent_', + 'queryData', + 'childFactory', + 'component', + ]); } getChildren(props = this.props) { + const { singleSlot = false } = props; const { plugins } = this.context; + return plugins.getSlotElements( props.fill, props.reduxState, this.getSlotProps(props), - props.queryData + props.queryData, + { singleSlot } ); } @@ -109,6 +112,11 @@ Slot.propTypes = { reduxState: PropTypes.object, defaultComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + /** + * When true, only the first plugin will take the slot. + */ + singleSlot: PropTypes.bool, + /** * You may specify the component to use as the root wrapper. * Defaults to 'div'. diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js index 6f99a2291..03e3177e0 100644 --- a/client/coral-framework/services/plugins.js +++ b/client/coral-framework/services/plugins.js @@ -94,11 +94,19 @@ class PluginsService { }; } + getSlotElement(slot, reduxState, props = {}, queryData = {}, options = {}) { + return this.getSlotElements(slot, reduxState, props, queryData, { + ...options, + singleSlot: true, + }); + } + /** * Returns React Elements for given slot. */ - getSlotElements(slot, reduxState, props = {}, queryData = {}) { + getSlotElements(slot, reduxState, props = {}, queryData = {}, options = {}) { const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig; + const { singleSlot = false } = options; const isDisabled = component => { if ( @@ -129,11 +137,13 @@ class PluginsService { return false; }; - return flatten( + const slots = flatten( this.plugins .filter(o => o.module.slots && o.module.slots[slot]) .map(o => o.module.slots[slot]) - ) + ); + + return (singleSlot ? slots.slice(0, 1) : slots) .map((component, i) => ({ component, disabled: isDisabled(component), From 105ed1454d19c8dc6a914fdb81f5f17f9fe50be9 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 23 Feb 2018 14:35:48 -0700 Subject: [PATCH 2/6] added singleSlot on the commentContent --- client/coral-embed-stream/src/tabs/stream/components/Comment.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js index 521b28742..c0abb7d92 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js @@ -604,6 +604,7 @@ export default class Comment extends React.Component { defaultComponent={CommentContent} {...slotProps} queryData={queryData} + singleSlot /> )} From 894940cd0b71ad64a831a3d72ca9bfdec9e9145e Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Fri, 23 Feb 2018 14:48:57 -0700 Subject: [PATCH 3/6] replaced singleSlot with slotSize --- .../src/tabs/stream/components/Comment.js | 2 +- client/coral-framework/components/Slot.js | 10 +++++----- client/coral-framework/services/plugins.js | 11 ++--------- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js index c0abb7d92..f0dcc1017 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js @@ -604,7 +604,7 @@ export default class Comment extends React.Component { defaultComponent={CommentContent} {...slotProps} queryData={queryData} - singleSlot + slotSize={1} /> )} diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 516e23e50..6287358bb 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -38,7 +38,7 @@ class Slot extends React.Component { 'inline', 'className', 'reduxState', - 'singleSlot', + 'slotSize', 'defaultComponent_', 'queryData', 'childFactory', @@ -47,7 +47,7 @@ class Slot extends React.Component { } getChildren(props = this.props) { - const { singleSlot = false } = props; + const { slotSize = 0 } = props; const { plugins } = this.context; return plugins.getSlotElements( @@ -55,7 +55,7 @@ class Slot extends React.Component { props.reduxState, this.getSlotProps(props), props.queryData, - { singleSlot } + { slotSize } ); } @@ -113,9 +113,9 @@ Slot.propTypes = { defaultComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** - * When true, only the first plugin will take the slot. + * Specifies the number of children that can fill the slot. */ - singleSlot: PropTypes.bool, + slotSize: PropTypes.number, /** * You may specify the component to use as the root wrapper. diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js index 03e3177e0..21605e684 100644 --- a/client/coral-framework/services/plugins.js +++ b/client/coral-framework/services/plugins.js @@ -94,19 +94,12 @@ class PluginsService { }; } - getSlotElement(slot, reduxState, props = {}, queryData = {}, options = {}) { - return this.getSlotElements(slot, reduxState, props, queryData, { - ...options, - singleSlot: true, - }); - } - /** * Returns React Elements for given slot. */ getSlotElements(slot, reduxState, props = {}, queryData = {}, options = {}) { const pluginConfig = get(reduxState, 'config.plugin_config') || emptyConfig; - const { singleSlot = false } = options; + const { slotSize = 0 } = options; const isDisabled = component => { if ( @@ -143,7 +136,7 @@ class PluginsService { .map(o => o.module.slots[slot]) ); - return (singleSlot ? slots.slice(0, 1) : slots) + return (slotSize > 0 ? slots.slice(0, slotSize) : slots) .map((component, i) => ({ component, disabled: isDisabled(component), From 9158faf29559764d1bd53d530e4e678ff8328b34 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Mon, 26 Feb 2018 08:42:39 -0700 Subject: [PATCH 4/6] Update Slot.js --- client/coral-framework/components/Slot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 6287358bb..dfe2d80d5 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -39,7 +39,7 @@ class Slot extends React.Component { 'className', 'reduxState', 'slotSize', - 'defaultComponent_', + 'defaultComponent', 'queryData', 'childFactory', 'component', From d1951c8504c0cccc29b9c0f53583763252a58eec Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Mon, 26 Feb 2018 08:48:11 -0700 Subject: [PATCH 5/6] Update plugins.js --- client/coral-framework/services/plugins.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js index 21605e684..d6c8b7760 100644 --- a/client/coral-framework/services/plugins.js +++ b/client/coral-framework/services/plugins.js @@ -135,6 +135,10 @@ class PluginsService { .filter(o => o.module.slots && o.module.slots[slot]) .map(o => o.module.slots[slot]) ); + + if (slotSize > 0 && slots.length > slotSize) { + console.warn(`Slot[${slot}] supports a maximum of ${slotSize} plugins providing slots, got ${slots.length}, will only use the first ${slotSize}`); + } return (slotSize > 0 ? slots.slice(0, slotSize) : slots) .map((component, i) => ({ From 31e5eb8685ee12bb70fa0f73808b8222e8781331 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Mon, 26 Feb 2018 09:10:55 -0700 Subject: [PATCH 6/6] linting --- client/coral-framework/services/plugins.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js index d6c8b7760..222cc1b42 100644 --- a/client/coral-framework/services/plugins.js +++ b/client/coral-framework/services/plugins.js @@ -135,9 +135,13 @@ class PluginsService { .filter(o => o.module.slots && o.module.slots[slot]) .map(o => o.module.slots[slot]) ); - + if (slotSize > 0 && slots.length > slotSize) { - console.warn(`Slot[${slot}] supports a maximum of ${slotSize} plugins providing slots, got ${slots.length}, will only use the first ${slotSize}`); + console.warn( + `Slot[${slot}] supports a maximum of ${slotSize} plugins providing slots, got ${ + slots.length + }, will only use the first ${slotSize}` + ); } return (slotSize > 0 ? slots.slice(0, slotSize) : slots)