From 7b358b4ced767c6e524982b513446f9ac0759cfa Mon Sep 17 00:00:00 2001 From: Anuj Date: Thu, 4 May 2017 15:11:55 -0700 Subject: [PATCH] Add firstOnly prop to Placeholder (#765) * Adding firstOnly prop to Placeholder Partly addresses #737 * Updating placeholder logic to check for parent only if firstOnly is set to true * removing extra newlines * simplifying shouldComponentUpdate condition --- docs/reference/components/placeholder.md | 8 ++++++- src/components/placeholder.js | 27 +++++++++++++++++++----- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/docs/reference/components/placeholder.md b/docs/reference/components/placeholder.md index c71975610..a4bff0ac3 100644 --- a/docs/reference/components/placeholder.md +++ b/docs/reference/components/placeholder.md @@ -10,6 +10,7 @@ A simple component that adds a placeholder to a node. It encapsulates all of the - [Properties](#properties) - [`children`](#children) - [`className`](#className) + - [`firstOnly`](#firstOnly) - [`node`](#node) - [`parent`](#parent) - [`state`](#state) @@ -40,6 +41,11 @@ React child elements to render inside the placeholder `` element. An optional class name string to add to the placeholder `` element. +### `firstOnly` +`Boolean` + +An optional toggle that allows the Placeholder to render even if it is not the first node of the parent. This is useful for cases where the Placeholder should show up at every empty instance of the node. Defaults to `true`. + ### `node` `Node` @@ -48,7 +54,7 @@ The node to render the placeholder element on top of. The placeholder is positio ### `parent` `Node` -The node to check for non-empty content, to determine whether the placeholder should be shown or not. +The node to check for non-empty content, to determine whether the placeholder should be shown or not, if `firstOnly` is set to `false`. ### `state` `State` diff --git a/src/components/placeholder.js b/src/components/placeholder.js index 123638dcb..75f28533b 100644 --- a/src/components/placeholder.js +++ b/src/components/placeholder.js @@ -19,12 +19,23 @@ class Placeholder extends React.Component { static propTypes = { children: Types.any.isRequired, className: Types.string, + firstOnly: Types.bool, node: Types.object.isRequired, - parent: Types.object.isRequired, + parent: Types.object, state: Types.object.isRequired, style: Types.object } + /** + * Default properties. + * + * @type {Object} + */ + + static defaultProps = { + firstOnly: true + } + /** * Should the placeholder update? * @@ -37,6 +48,7 @@ class Placeholder extends React.Component { return ( props.children != this.props.children || props.className != this.props.className || + props.firstOnly != this.props.firstOnly || props.parent != this.props.parent || props.node != this.props.node || props.style != this.props.style @@ -50,11 +62,16 @@ class Placeholder extends React.Component { */ isVisible = () => { - const { node, parent } = this.props + const { firstOnly, node, parent } = this.props if (node.text) return false - if (parent.nodes.size > 1) return false - if (parent.nodes.first() === node) return true - return false + + if (firstOnly) { + if (parent.nodes.size > 1) return false + if (parent.nodes.first() === node) return true + return false + } else { + return true + } } /**