High Order Components
SetkaEditor.HOC.withTranslation
SetkaEditor.HOC.withAnimation
SetkaEditor.HOC.withStyleAttribute
SetkaEditor.HOC.withClickToSelect
SetkaEditor.HOC.focusOnMount
SetkaEditor.HOC.focusOnUpdate
SetkaEditor.HOC.withEnter
SetkaEditor.HOC.withEmptyContent
SetkaEditor.HOC.withHighlight
SetkaEditor.HOC.withContextMenu
SetkaEditor.HOC.withTranslation
Passes special tr
function prop to component.
const locales = {
en: {title: 'Title'},
ru: {title: 'Заголовок'},
};
const Component = SetkaEditor.HOC.withTranslation(locales)(({tr}) => (
<SetkaEditor.UI.Button>
{tr('title')}
</SetkaEditor.UI.Button>
));
SetkaEditor.HOC.withAnimation
Adds ability of animation to component.
const Component = SetkaEditor.HOC.withAnimation(({element}) => (
<div {...element.attributes}>
Custom Content Element
</div>
));
SetkaEditor.HOC.withStyleAttribute
Adds style attribute to Custom Element component.
const Component = ({element}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withStyleAttribute,
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};
SetkaEditor.HOC.withClickToSelect
Adds click event listener to Content Element component.
const Component = ({element, actions}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withClickToSelect(dispatch),
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};
SetkaEditor.HOC.focusOnMount
SetkaEditor.HOC.focusOnUpdate
Calls DOM's focus event on selected element.
class Component extends SetkaEditor.lib.React.Component {
componentDidMount() {
HOC.focusOnMount(this);
}
componentDidUpdate(prevProps) {
HOC.focusOnUpdate(this, prevProps);
}
render() {
return (
<div
{...this.props.element.attributes}
ref: el => this._domElement = el
>
Custom Content Element
</div>
);
}
}
SetkaEditor.HOC.withEnter
Inserts Paragraph after selected element, when Enter key is pressed.
const Component = ({element, actions}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withClickToSelect(dispatch),
SetkaEditor.HOC.withEnter(actions),
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};
SetkaEditor.HOC.withEmptyContent
Adds special empty classes to element, if it has no content.
const Component = ({element}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withEmptyContent,
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};
SetkaEditor.HOC.withHighlight
Adds special highlight class, when element is highlighted (from context menu, for example).
const Component = ({element}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withHighlight,
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};
SetkaEditor.HOC.withContextMenu
Opens context menu on right click.
const Component = ({element, actions}) => {
el = SetkaEditor.lib.ramda.compose(
SetkaEditor.HOC.withContextMenu,
);
return (
<div {...el.attributes}>
Custom Content Element
</div>
);
};