1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 10:29:48 +02:00

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
This commit is contained in:
Anuj
2017-05-04 15:11:55 -07:00
committed by Ian Storm Taylor
parent 503fde52b2
commit 7b358b4ced
2 changed files with 29 additions and 6 deletions

View File

@@ -10,6 +10,7 @@ A simple component that adds a placeholder to a node. It encapsulates all of the
- [Properties](#properties) - [Properties](#properties)
- [`children`](#children) - [`children`](#children)
- [`className`](#className) - [`className`](#className)
- [`firstOnly`](#firstOnly)
- [`node`](#node) - [`node`](#node)
- [`parent`](#parent) - [`parent`](#parent)
- [`state`](#state) - [`state`](#state)
@@ -40,6 +41,11 @@ React child elements to render inside the placeholder `<span>` element.
An optional class name string to add to the placeholder `<span>` element. An optional class name string to add to the placeholder `<span>` 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`
`Node` `Node`
@@ -48,7 +54,7 @@ The node to render the placeholder element on top of. The placeholder is positio
### `parent` ### `parent`
`Node` `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`
`State` `State`

View File

@@ -19,12 +19,23 @@ class Placeholder extends React.Component {
static propTypes = { static propTypes = {
children: Types.any.isRequired, children: Types.any.isRequired,
className: Types.string, className: Types.string,
firstOnly: Types.bool,
node: Types.object.isRequired, node: Types.object.isRequired,
parent: Types.object.isRequired, parent: Types.object,
state: Types.object.isRequired, state: Types.object.isRequired,
style: Types.object style: Types.object
} }
/**
* Default properties.
*
* @type {Object}
*/
static defaultProps = {
firstOnly: true
}
/** /**
* Should the placeholder update? * Should the placeholder update?
* *
@@ -37,6 +48,7 @@ class Placeholder extends React.Component {
return ( return (
props.children != this.props.children || props.children != this.props.children ||
props.className != this.props.className || props.className != this.props.className ||
props.firstOnly != this.props.firstOnly ||
props.parent != this.props.parent || props.parent != this.props.parent ||
props.node != this.props.node || props.node != this.props.node ||
props.style != this.props.style props.style != this.props.style
@@ -50,11 +62,16 @@ class Placeholder extends React.Component {
*/ */
isVisible = () => { isVisible = () => {
const { node, parent } = this.props const { firstOnly, node, parent } = this.props
if (node.text) return false if (node.text) return false
if (parent.nodes.size > 1) return false
if (parent.nodes.first() === node) return true if (firstOnly) {
return false if (parent.nodes.size > 1) return false
if (parent.nodes.first() === node) return true
return false
} else {
return true
}
} }
/** /**