I want to set one specific node non-editable by
Transforms.setNodes(editor,{at:[1]},{voids:true})
But it seems not working. Does anyone know how to do it? Thanks!
You need to make your element render with contentEditable prop to false
contentEditable={false} can also add style={{ userSelect: "none" }} to make it non selectable. You can make it dynamic base on the node props and set them them with the trasnformer.
export default function (props: any) {
const { attributes, children, element } = props;
const selected = useSelected()
const focused = useFocused()
return (
<span
{...attributes}
contentEditable={false}
style={{ userSelect: "none" }}
>
{
element.content
?
`【${element.content}】`
: null
}
{children}
</span>
)
}
Related
enter image description herethis problem show in ios,when i use TextInput of react-native,but it can't type Chinese when using soft keyboard，so i modify the code like picture1,but a new problem has arisen,when i enter the key to send ,the value of the TextInput cant clear.
what can i do?enter image desenter code herecription here
<TextareaItem clear={true} type="text" ref="text" value={this.state.meg}
editable={true} disabled={false} onChange={(value) => {
if (Platform.OS =='ios'){
this.meg = value
} else {
this.setState({
meg:value
})}}} />
sendMeg = () => {
let message = ''
if (this.meg !== '')
messahe = this.meg
}else{message = this.state.meg}
this.meg = ''
this.setState({ meg:''})
}
solve with this answer https://github.com/CHANOMA/react-native/pull/3/files#diff-8eb50d68d87e28556c034717cd58a86e
Set this.state.text to initially be an empty string ‘’
Add an actual placeholder to your component and set the value to the string ‘Enter text…’
Add the method submitAndClear to your class and set the component’s onPress prop to this.submitAndClear
Add the prop clearButtonMode='always’ to the <TextInput /> component — this will give you an option to clear the text at any time
The following can be used to clear the text
submitAndClear = () => {
this.props.writeText(this.state.text)
this.setState({
text: ''
})
}
You're good to go!!
Add this code where you want to reset meg field:
this.setState({meg: ''})
I want to manually close the tooltip but there are no documents on the react-native-elements site.
So I look over the tooltip code from github and noticed that it has a toggleTooltip function to toggle. Unfortunately I couldn't make it work.
This is the sample code for the tooltip
import { Tooltip } from 'react-native-elements';
render() {
return (
<Tooltip
ref="tooltip"
popover={
<ComponentTest
toggle={this.refs.tooltip}
>
>
<Text>Click me</Text>
</Tooltip>
);
}
The sample code for the ComponentTest
import { Button } from 'react-native-elements';
toggleOff = () => {
this.props.toggleTooltip;
}
render() {
return (
<Button
title="hide"
type="outline"
onPress={this.toggleOff}
/>
);
}
And this is the function from the tooltip.js that I am trying to use. The full code of the tooltip can found here https://github.com/react-native-training/react-native-elements/blob/master/src/tooltip/Tooltip.js
toggleTooltip = () => {
const { onClose } = this.props;
this.getElementPosition();
this.setState(prevState => {
if (prevState.isVisible && !isIOS) {
onClose && onClose();
}
return { isVisible: !prevState.isVisible };
});
};
i am new to react-native and was trying to use tooltip, what i found out that whenever u click inside the component which is popovered , it navigates to whatever onpress function u have written on that particular component and the tooltip doesn't closes,,it also remain mounted when u navigate to other pages,,one solution to it is that use react-native-popup-menu.its the best that we can use for now as a tooltip https://www.npmjs.com/package/react-native-popup-menu
It may be a stupid solution, but did you tried using this.props.toggleTooltip() ?
OH , and ref is not a string anymore, it's a function
<Tooltip
ref={ref => (this.tooltip = ref)}
popover={
<ComponentTest
toggle={this.tooltip}
>
>
On line 191 of Tooltip.js:
<TouchableOpacity onPress={this.toggleTooltip}>
{this.renderContent(true)}
</TouchableOpacity>
and in the definition of renderContent:112 on line 137, it is rendered your popover:
Thus wherever you touch in your popover will make it disappear. I don't know how to disable this behaviour, but I still want to know if and how the visibility of the popover can be controlled from the Tooltip's child element at least.
Just set its style to display:'none' after you touch your popover.
maybe try this way:
state = { theDisplay: 'flex' };
...
componentDidUpdate(prevProps: any) {
if (!prevProps.isFocused && this.props.isFocused) {
this.setState({ theDisplay: 'flex' });
}
}
...
<Popover.Item
value={'response'}
onSelect={() => {
this.setState({ theDisplay: 'none' });
navigate('NoticeResponse', { id: item.id });
}}>
<Text style={styles.toolsItem}>已读信息</Text>
</Popover.Item>
This is my own way of dealing with it. I hope it will help you.
DISCLAIMER I used the ref example in order to get my code to work, but it's something like this:
const tooltipRef = useRef(null);
const foo = (event, index) => {
event.stopPropagation();
tooltipRef.current.toggleTooltip()
}
...
<Tooltip
height={200}
ref={tooltipRef}
popover={<TouchableOpacity onPress={(event) => foo(event, index)}
/>
I had originally tried to implement this by simply using the tooltipRef.current.toggleTooltip() like in the example but it never ended up working because the event was propagating and continuing to toggle it on its own (effectively toggling it twice).
Without any 3rd party library, simple tooltip for both iOS and android can be implemented as follows:
onPress={() =>
Alert.alert("My Title", "My Msg", [], {
cancelable: true
})
}
React native elements documentation show that we can manually turn off the tooltip.
Docs
Store a reference to the Tooltip in your component by using the ref prop provided by React
const tooltipRef = useRef(null);
...
<Tooltip
ref={tooltipRef}
...
/>
Then you can manually trigger tooltip from anywhere for example when screen loads:
useEffect(() => {
tooltipRef.current.toggleTooltip();
}, []);
I am getting a problem that when I am setting shadow as true in my component I am getting whole dom when any image(other element too) clicked instead of the element which is clicked.
How can I resolve this issue.
Thanks in advance
Here is the answer:
#Listen('click')
onHandleClickEvent(ev) {
// This will give you the clicked element (composedPath()[0])
console.log('===== 31 =====', ev.composedPath()[0]);
}
You can use the currentTarget property of the event arguments object which is passed to the event handler in order to get the element which was clicked. For example, look at the following code:
import { Component, Prop } from '#stencil/core';
#Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
#Prop() first: string;
#Prop() middle: string;
#Prop() last: string;
constructor() {
this.imgClicked = this.imgClicked.bind(this);
}
format(): string {
return (
(this.first || '') +
(this.middle ? ` ${this.middle}` : '') +
(this.last ? ` ${this.last}` : '')
);
}
imgClicked(evt) {
console.log(evt.currentTarget);
}
render() {
return <div>Hello, World! I'm {this.format()}<img src="https://twitter.com/gilfink" onClick={this.imgClicked}/></div>;
}
}
In the code, the onClick handler (which is the imgClicked function) will print the image element which was clicked to the console.
I am trying to have a div show if an option is selected using the Select2 plug in.
I tried using the following code but it does not work:
$(document).ready(function() {
var h = $(".shipment-details--other-description");
$("#shipment-details-select-pacakage-types").change(function() {
if (this.checked && this.value == "Other") {
h.show();
} else {
h.hide();
}
}).change()
});
The div is being hid but not being shown if the Other option is selected.
Is there a different way to do this with Select2?
Edit: Forgot to mention that this a multiple select field. Also, adjusted the code and took out the this.checked as that was for a check field.
try to create a new css class, is-hidden{ display:none;}
$(document).ready(function() {
var h = $(".shipment-details--other-description");
$("#shipment-details-select-pacakage-types").change(function() {
if (this.checked && this.value == "Other") {
h.addClass('is-hidden');
} else {
h.removeClass('is-hidden');
}
}).change()
});
I'm trying to use select2 jQuery plugin to enhance a select element in HTML app. The select allow to choose multiple items.
I'll like to remove the items that are currently selected from the dropdown. I didn't find explicit solution in the docs.
The current solution I've found was to use templateResult option and have the template function return null if the item is selected. This cause Results.prototype.template function to set container.style.display = 'none' but this has the side-effect of causing the keyboard to still select those items even though they are not visible.
Just apply this CSS.
.select2-results__option[aria-selected=true] { display: none;}
Small Update for recent versions :
.select2-results__option--selected { display: none;}
Source
Check out the answer provided here, provided by Hakam Fostok.
I've reproduced his answer below here for completeness:
my solution was modified the select2.js (the core, version 4.0.3) in the line #3158. Add the following verification :
if ($option[0].selected == true) {
return;
}
With this verification, we can exclude from the dropdown list, the selected ones. And if you write the name of a selected option, appear the text of option "noResult" .
Here the complete code:
SelectAdapter.prototype.query = function (params, callback) {
var data = [];
var self = this;`
var $options = this.$element.children();`
$options.each(function () {
var $option = $(this);
if (!$option.is('option') && !$option.is('optgroup') ) {
return;
}
if ($option[0].selected == true) {
return;
}
var option = self.item($option);
var matches = self.matches(params, option);
if (matches !== null) {
data.push(matches);
}
});
callback({
results: data
});
};
For my purposes, I was using the select2.js file, so I made the change at line 3195.
For versions 4 and 4.1
.select2-container--default .select2-results__option[aria-selected=true] {
display: none !important;
}
Works fine!
In addition to #Satheez answer, this script will let you maintain the placeholder after hiding all the selected items.
$('.selector').select2().on("change", function (e) {
$('.select2-search__field').attr('placeholder', 'Here is your placeholder');
});