@wordpress/components
Version:
UI components for WordPress.
152 lines (150 loc) • 4.28 kB
JavaScript
/**
* External dependencies
*/
import { ScrollView, TextInput } from 'react-native';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { parse } from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
import { addFilter, removeFilter } from '@wordpress/hooks';
import { withInstanceId, compose, withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import KeyboardAvoidingView from '../keyboard-avoiding-view';
import styles from './style.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export class HTMLTextInput extends Component {
constructor() {
super(...arguments);
this.edit = this.edit.bind(this);
this.stopEditing = this.stopEditing.bind(this);
this.getHTMLForParent = this.getHTMLForParent.bind(this);
addFilter('native.persist-html', 'html-text-input', this.getHTMLForParent);
this.state = {};
}
static getDerivedStateFromProps(props, state) {
if (state.isDirty) {
return null;
}
return {
value: props.value,
isDirty: false
};
}
componentWillUnmount() {
removeFilter('native.persist-html', 'html-text-input');
// TODO: Blocking main thread.
this.stopEditing();
}
edit(html) {
this.props.onChange(html);
this.setState({
value: html,
isDirty: true
});
}
getHTMLForParent() {
return this.state.value;
}
stopEditing() {
if (this.state.isDirty) {
this.props.onPersist(this.state.value);
this.setState({
isDirty: false
});
}
}
render() {
const {
editTitle,
getStylesFromColorScheme,
parentHeight,
style,
title
} = this.props;
const titleStyle = [getStylesFromColorScheme(styles.htmlViewTitle, styles.htmlViewTitleDark), style?.text && {
color: style.text
}];
const htmlStyle = [getStylesFromColorScheme(styles.htmlView, styles.htmlViewDark), style?.text && {
color: style.text
}];
const placeholderStyle = {
...getStylesFromColorScheme(styles.placeholder, styles.placeholderDark),
...(style?.text && {
color: style.text
})
};
return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
style: styles.keyboardAvoidingView,
parentHeight: parentHeight,
children: /*#__PURE__*/_jsxs(ScrollView, {
style: styles.scrollView,
children: [/*#__PURE__*/_jsx(TextInput, {
autoCorrect: false,
accessibilityLabel: "html-view-title",
textAlignVertical: "center",
numberOfLines: 1,
style: titleStyle,
value: title,
placeholder: __('Add title'),
placeholderTextColor: placeholderStyle.color,
onChangeText: editTitle
}), /*#__PURE__*/_jsx(TextInput, {
ref: this.contentTextInputRef,
autoCorrect: false,
accessibilityLabel: "html-view-content",
textAlignVertical: "top",
multiline: true,
style: htmlStyle,
value: this.state.value,
onChangeText: this.edit,
onBlur: this.stopEditing,
placeholder: __('Start writing…'),
placeholderTextColor: placeholderStyle.color,
scrollEnabled: false
// [Only iOS] This prop prevents the text input from
// automatically getting focused after scrolling
// content.
,
rejectResponderTermination: false
})]
})
});
}
}
export default compose([withSelect(select => {
const {
getEditedPostAttribute,
getEditedPostContent
} = select('core/editor');
return {
title: getEditedPostAttribute('title'),
value: getEditedPostContent()
};
}), withDispatch(dispatch => {
const {
editPost,
resetEditorBlocks
} = dispatch('core/editor');
return {
editTitle(title) {
editPost({
title
});
},
onChange(content) {
editPost({
content
});
},
onPersist(content) {
const blocks = parse(content);
resetEditorBlocks(blocks);
}
};
}), withInstanceId, withPreferredColorScheme])(HTMLTextInput);
//# sourceMappingURL=index.native.js.map