@wordpress/components
Version:
UI components for WordPress.
95 lines (91 loc) • 3.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _native = require("@react-navigation/native");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _bottomSheet = _interopRequireDefault(require("../bottom-sheet"));
var _body = _interopRequireDefault(require("../../panel/body"));
var _footerMessageControl = _interopRequireDefault(require("../../footer-message-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BottomSheetTextControl = ({
initialValue,
onChange,
placeholder,
label,
icon,
footerNote,
cellPlaceholder,
disabled
}) => {
const [showSubSheet, setShowSubSheet] = (0, _element.useState)(false);
const navigation = (0, _native.useNavigation)();
const goBack = () => {
setShowSubSheet(false);
navigation.goBack();
};
const openSubSheet = () => {
navigation.navigate(_bottomSheet.default.SubSheet.screenName);
setShowSubSheet(true);
};
const horizontalBorderStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.horizontalBorder, _styles.default.horizontalBorderDark);
const textEditorStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.textEditor, _styles.default.textEditorDark);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.default.SubSheet, {
navigationButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
icon: icon,
label: label,
onPress: openSubSheet,
value: initialValue || '',
placeholder: cellPlaceholder || placeholder || '',
disabled: disabled,
children: disabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.chevronRight
})
}),
showSheet: showSubSheet,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.default.NavBar, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.BackButton, {
onPress: goBack
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.Heading, {
children: label
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
style: horizontalBorderStyle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
label: label,
onChangeText: text => onChange(text),
defaultValue: initialValue,
multiline: true,
placeholder: placeholder,
placeholderTextColor: "#87a6bc",
style: textEditorStyle,
textAlignVertical: "top"
})
})]
}), footerNote && /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
style: _styles.default.textFooternote,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_footerMessageControl.default, {
label: footerNote,
textAlign: "left"
})
})]
});
};
var _default = exports.default = BottomSheetTextControl;
//# sourceMappingURL=index.native.js.map