Decoration component #476
Decoration component #476
Conversation
| const optionKeys = Object.keys(this.props.options); | ||
| const nextOptionKeys = Object.keys(nextProps.options); | ||
|
|
||
| if (optionKeys.length !== nextOptionKeys.length) { |
There was a problem hiding this comment.
Do we have access to a shallowEqual check we can use here?
There was a problem hiding this comment.
Ah, React does have a shallowCompare utility, but it's deprecated and gated in a separate dependency. Lodash also has _.isEqualWith which could be used to do this pretty easily.
Worth adding a new dependency for, do you think? Personally I'm leaning toward the lodash route.
There was a problem hiding this comment.
Okay, I just spent a fair amount of time trying to get this to work with Lodash, but I didn't have any luck (...possibly because it's Monday). In any case, I'll ship with this and we can touch up later 😄
| static defaultProps = { | ||
| options: {}, | ||
| position: 'head', | ||
| getItem: ({portal, subtree}) => subtree, |
There was a problem hiding this comment.
I think we should default this to returning the portal, instead of the React subtree component. IIRC we should only really reach into the subtree in the case of using Etch components (to call getWrappedComponent on the EtchWrapper)
There was a problem hiding this comment.
👍 Ah right you are.
I'd had it in my mind that the portal <div> was rendered in the detached DOM tree and the subtree was root of the tree rendered into the container, but re-reading the source, I see the portal <div> is the root (which makes more sense anyway).
There was a problem hiding this comment.
The portal ref assignment gets the instance, not the DOM element. I've changed it to default to portal.node to return the root element instead. If that's wrong we can always change it later 😁
|
|
||
| this.decoration = this.props.editor.decorateMarker(this.props.marker, options); | ||
| this.subscriptions.add(this.decoration.onDidDestroy(() => { | ||
| this.decoration = null; |
There was a problem hiding this comment.
Should we also clear out the subscription when it gets destroyed? If there's only one at a time a common pattern is
this.subscription = this.thing.onDidDestroy(() => {
this.thing = null
this.subscription.dispose();
});There was a problem hiding this comment.
💯 Oops, thanks for the catch!
Also, I think you just fixed a bug I'd noticed when I'd taken the conflict resolution PR for a spin 🎯
|
The portal implements the Atom view interface so should work
…On Jan 30, 2017 8:34 AM, "Ash Wilson" ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In lib/views/decoration.js <#476>:
> +export default class Decoration extends React.Component {
+ static propTypes = {
+ editor: React.PropTypes.object.isRequired,
+ marker: React.PropTypes.object.isRequired,
+ type: React.PropTypes.oneOf(['line', 'line-number', 'highlight', 'overlay', 'gutter', 'block']).isRequired,
+ position: React.PropTypes.oneOf(['head', 'tail']),
+ class: React.PropTypes.string,
+ children: React.PropTypes.element,
+ getItem: React.PropTypes.func,
+ options: React.PropTypes.object,
+ }
+
+ static defaultProps = {
+ options: {},
+ position: 'head',
+ getItem: ({portal, subtree}) => subtree,
The portal ref assignment gets the *instance*, not the *DOM element*.
I've changed it to default to portal.node to return the root element
instead. If that's wrong we can always change it later 😁
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#476>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AALkpjqaB7lr8fZ05Xvn88zldrVkcXcPks5rXhENgaJpZM4LrQmE>
.
|
Oh! Good to know. |
922d1ab to
c4869d6
Compare
Split the
Decorationcomponent and its tests out from #385 so that @BinaryMuse can start using it in the GitHub integration.