React replace event.target with input - javascript

UPDATE
Here's are some demos
contentEditable demo - requires double click for H1 to become editable
replace with input demo - adopts event.target styles but makes the UI 'twitch' when rendered
So I have some functional components, let's say:
component1.js
import React from 'react';
const component1 = props => (
<div>
<h1>Title</h1>
</div>
);
export { component1 };
They are variable. event.target could be anything with text, so paragraph, heading, anything. I'm trying to let users edit content inline by clicking on it, so I'll pass a function editMode to these functional components, that'll update parent state with editing info, let's say like this:
<h1 onClick={event => {editMode(event, props.name, props.title, 'title')}}>title</h1>
This changes parent local state to have all the necessary information to grab the value from redux, define a target etc. For this example, props.name is the name of the component, props.title is the value, and 'title' is object key in redux.
So I'll add something to my component1.js and make it look a bit like this:
import React from 'react';
const component1 = props => (
<div>
{props.editState === 'true' &&
<EditLayout
name={props.name}
target={props.target}
value={props.value}
onChange={event => someFunc(event)}
/>
}
<h1>Title</h1>
</div>
);
export { component1 };
Now this works fine, except it doesn't scale. EditLayout, in this case, will just return an input with correct value. What I need it to do is to adapt to whatever is being clicked, get font size, background, padding, margin, position. Am I doing this right? Every way I try, I run into huge issues:
Idea 1 - move EditLayout component outside of the functional component
Issue: positioning
So I'll move EditLayout to parent component that contains both component1.js and EditLayout. This will allow me to manipulate it from inside the functional component, without having to include it everywhere. I'll then grab coordinates and other important information from event.target like so:
const coords = event.target.getBoundingClientRect();
const offsetX = coords.left;
const offsetY = coords.top;
const childHeight = coords.height;
const childWidth = coords.width;
const childClass = event.target.className;
I'll then wrap the EditLayout to return a container which contains an input, and apply size/coordinates to the absolutely positioned container. This'll present an issue of input being offset by a random amount of pixels, depending on how big/where is the event.target.
Idea 2 - pass relevant computed styles to EditLayout
Issue: twitching on render, and I have to add EditLayout for every possible event.target there is, as well as condition its' render
So I'll grab all important computed styles like this:
const computedTarget = window.getComputedStyle(event.target);
const childMargins = computedTarget.marginBottom;
const childPaddings = computedTarget.padding;
const childFontSize = computedTarget.fontSize;
const childTextAlign = computedTarget.textAlign;
And pass it to component1.js, and then pass it to EditLayout component inside the component1.js. I'll then condition theevent.target to hide if it's being edited like this:
<h1 className={ props.target === 'title' ? 'd-none' : ''}>Title</h1>
And condition the EditLayout to show only if it's needed:
{props.target === 'title' && <EditLayout />}
In this example, clicking h1 will show the input, but the layout itself with twitch on render. Input will have the exact same margin and font size as the h1, or event.target, but it'll appear bigger and extend the layout. Demo:
Idea 3 - Use conditional contentEditable
Issue: Requires double click to enable, doesn't work in safari, doesn't let me preselect the value
This is the weirdest of them all. I figured it'd be pretty simple, do something like this inside the functional component render:
<h1 contentEditable={props.target === 'title'} onClick={event => props.setTarget(event)}>Title</h1>
However, I have to double click to enable it. I have no idea why, if I attach a console log every time onClick is fired, I'll get correct outputs, I'll get the correct target value as well. I've tried numerous ways, but it simply requires double click. Even attempted to handle this inside the functional component, as most of the stuff is handled by a parent component, doesn't make a difference.
I have oversimplified the examples, so it's safe to assume/understand the following:
I am passing props in a correct fashion, they aren't undefined
I am using bootstrap
I am using styled components, and EditLayout is a styled component
which accepts props and turns them into CSS like: font-size: ${props
=> props.fontSize};
The values should be correct, I am not manipulating anything I get back from getComputedStyle() or getBoundingClientRect()
I am keen on keeping my functional components functional, and easy to
add. Functional components, in this case, are simple HTML structures,
and I'd like to keep them as simple as possible

So there's a neat solution to contentEditable requiring two clicks instead of one, instead of binding onClick and passing it to enable contentEditable, simply keep contentEditable true and handle the change however you like. Here's a working h1 that doesn't require two clicks to enable contentEditable, unlike the one in the demo
<h1
className="display-4 text-center"
contentEditable
suppressContentEditableWarning
onBlur={event => updateValues(event)}
>
Title
</h1>
The available methods for trigger update could be onBlur or onInput.

Related

When i use ref to nuxt-link, i can't change styles on it (Nuxt.js)

In my function I am using ref, which is binded to link, and when I try to change color (ref.style.color = 'red'), I see a error. Because ref which is binded to nuxt-link is Object, and it hasn't style property. I know that I can use the tag <a></a>, but does someone has ideas how can i make it with nuxt-link?
More info:
I have a link
<nuxt-link
ref="card"
#mousemove.native="move"
#mouseleave.native="leave"
#mouseover.native="over">
Click
</nuxt-link>
In my function i want to change link position, useng transform.
move () {
const card = this.$refs.card
card.style.transform = `perspective(500px)`
}
End i get this message in console
TypeError: Cannot set properties of undefined (setting 'transform')
By selecting nuxt-link using $refs will only return Vue Component instead of node element due to nuxt-link is a component in Nuxt.js.
The correct way to selecting node element is using $el.
Answer referred from here.
Example:
const card = this.$refs.card.$el
card.style.transform = `perspective(500px)`
To be mentioned, I'm not sure what you trying to achieve but assuming you want to modify the style of an element in Vue way, you are supposed to use :style="theElementStyles" then only you update the element style with this.theElementStyles = { transform: 'perspective(500px)' }.
More details about inline style binding can check on Vue documentation.

SVG react component grabbing element by id

I have a SVG as a react component called AdultDog. My plan is to make all the tags in this react component that dont contain a certain number in the ID field disappear so that only tags with an id that contains a number are shown. i.e tags that have an ID 402 in it are shown. Ive tried to use document.querySelectorAll(":not([id^='402'])"); but this has two problems.
document.querySelectorAll grabs the whole html page not the AdultDog component, so how can i make it only select AdultDog?
with document.querySelectorAll(":not([id^='402'])"); it only selects ids called '402' but i want ids that have other words in it. i.e 402-tooth and 402-recede
import {ReactComponent as AdultDog} from '../../images/dog-dental-chart-with-treatments_v6.svg';
function DisplayTooth(props) {
const navigate = useNavigate();
console.log(props.toothnumber, 'Display tooth')
useEffect(() => {
var elements = document.querySelectorAll(":not([id^='tooth-402-GH-02'])");
console.log('elements', elements)
}, [props.toothnumber])
return (<div>
<div className='tooth-box'>
<AdultDog></AdultDog>
</div>
</div>
);
}
export default DisplayTooth;
This is quite a lot so any help would be appreciated! i cant find much documentation on SVGs as is.
Typically, you'd be creating all the <AdultDog> components, e.g. {dogs.map(dog => <AdultDogs key={dog.id} dog={dog}/>)} and you could just add a filter e.g. dogs.filter(your filter logic here).map() to drop some of the dogs.
Another approach is to add a class to some elements so you can toggle it on/off.

Change id of multiple item of array React

I'm using React JSX with Hooks, and I have a problem. I'd like to change a p id of all the vector items when I click on one of them.
In particular:
I have a vector and for every item of this vector I call a component:
cards.map((item, index) => (<Card key={index} card={item} index={index} hover={hover} /> ))}
Inside the Card componet I have the div tag with onClick event: <div onClick={TitleTransition}>
The TitleTransition function changes a state of click: function TitleTransition() { setClick(true);}
This is the p tag inside the Card component: <p id={click ? "titleTransition" : ""}>{props.card.p1}</p>
Hence, when I click in one of these item (I have called them card) I'd like to change the p id for all the items (cards).
Anyone could help me? Thank you!
this is more a guess answer than anything else, but i'm unable to comment before 50 reputation.
If i had to guess, I'd say you are trying to change the styling onClick on a Card component and maybe additionally reset the styling of the other cards.
In that case you should try to use instead of the id prop of the p tag either the style or the className prop. I imagine you have a css file with something similar to
#titleTransition {
/* Your styling if element is clicked */
}
If you use the className prop, which is the React equivalent of the html class attribute, you have to change your css line to something like
.titleTransition {
/* Your styling if element is clicked */
}
or
:global(.titleTransition) {
/* Your styling if element is clicked */
}
or whatever way of styling you prefer in react, there are so many.
If you want to change all Card elements, onClick you will probably have to save the dataset for the cards in a state in their parent component (where the .map(...) is used to add the elements) and add an attribute to that data, such as 'isClicked'. Then define a function that takes the index of the and add the function to the props of the Card, like () and call that function in the Card by adding it in the . Then use it in the :
<div onClick={() => props.onChildClickChangeDataState(props.index)} />
This will trigger the function in the parent, where you can iterate over the dataset and change the isClicked attribute to the value you like.
To change the styling you then can use
<p className={props.item.isClicked ? 'titleTransition' : '' />
This an approach that helps you changing all at once as well as avoiding the invalid HTML #CertainPerformance mentioned.
I hope i guessed right and it helps you on the right track. It is hard to help you more at the moment. Maybe you could share the Code of you Card Parent Component, Card, your CSS file, and why you would like to change all id's at once. Then somebody might be able to help you a bit better.

draft.js: making editor content multipage

I have a difficult problem to solve.
Here is my sample project
Basically I want to create a editable book-like container and since each book page is another container, I can't figure how to make an editor transition from one page to another, once the page is filled with text.
Here is what I'm trying to achieve:
My first thought was to use a shared state for multiple editor instances, but as you can see in the example code, it doesn't work as expected and same text appears in two pages.
How can I achieve a multi-container transition when using draft.js?
The logic in general is to listen to changes of the first editor, count characters / word / lines (or more advanced calculation, if the editor has scroll for example) and finally focus the second editor if needed.
This answer covers, listen, dummy calculation and focus on the next editor.
This answer doesn't cover the calculation itself nor dynamic number of pages nor moving back from second editor when deleting content etc. But I believe that it's a direction to your final goal.
Listen
First of all, I moved the state creation and handling back to the Editor component itself. What "interests" the parent component ("App") is to get notified when its content changed.
But now, App needs to access the ("draft-js") editor in order to call focus. This will solve by creating "ref" in App and propagate it using forwardRef.
const editorRef = React.useRef();
const Editor = React.forwardRef((props, ref) => {
return <MyEditor name="editor-2" forwardRef={ref} />;
});
...
return (
...
<Editor ref={editorRef} />
)
and in Editor.js
function MyEditor({ onChange, forwardRef }) {
...
return (
<Editor
ref={forwardRef}
)
});
Next thing is to add onChange to Editor so App get notified when the content has been changed.
<Editor
ref={forwardRef}
stripPastedStyles
editorState={editorState}
onChange={editorState => {
setEditorState(editorState);
onChange && onChange(editorState); // <---
}}
/>
Handle the change and focus
The first editor is now
<MyEditor name="editor-1" onChange={onEditorChange} />
and onEditorChange is
const onEditorChange = editorState => {
const text = editorState.getCurrentContent().getPlainText();
if (text.length >= 5) {
setTimeout(() => {
editorRef.current.focus();
});
}
};
Currently it checks if the content's length is 5. You probably want to calculate it in a more sophisticated way.
The last question is, why setTimeout? Well, the simple answer is that without it, "draft-js" throw an error. I believe that it's something with their implementation of release / delete / clear global variables or something.
And the most important part, the code and live demo :)
https://codesandbox.io/s/young-shape-t6kcc?file=/src/App.js

Using the hidden attribute vs conditionally rendering a component

I have recently discovered an alternative to conditionally rendering a component in JSX, which is to use the hidden HTML attribute.
Example
function Parent() {
return {!hideChild && <Child />}
}
vs
function Parent() {
return <Child hidden={hideChild} />
}
function Child({ hidden }) {
return (
<div hidden={hidden} >
//my content
</div>
)
}
So far I have not noticed any performance or alike issues when using hidden. In saying that, are there any downsides to have lots of HTML on the page that is hidden?
For me, this approach has served well when I want to retain the component state and have the functionality of toggling the visibility of the components UI.
Is this bad practice? Should we be conditionally rendering components instead?
The difference is that when using conditional rendering, the logic inside the conditionally rendered UI will not be executed if the condition fails.
But using the hidden attribute will execute the logic but only hides the UI.
Example:
import React from 'react';
const A = () => {
console.log('A rendrerd');
return <h1>A</h1>;
};
const B = ({ hidden }) => {
console.log('B rendrerd');
return <h1 hidden={hidden}>B</h1>;
};
const Test = () => {
return (
<div>
{false && <A />}
<B hidden={true} />
</div>
);
};
export default Test;
A will never call its console.log statement.
B is hidden but it will log B rendered.
I think this is worth mentioning. hidden attribute acts more or less like display: none with css. The truth is "the component will be rendered but only hidden from your display."
Just to illustrate, below is a photo of some html and their output. you realize that the output doesn't show the <p> that is decorated with hidden attribute but if when you inspect the rendered code, you realize that <p> was actually renderd. So you can image have multiple components in react where they will all be rendered but only displayed based on that hidden attribute.
Well I may not be sure of the performance involved but it's obvious that doign a simple if() to condition render a component will depending on the size of your components be much quicker than rendering everything and only relying on their hidden attribute decoration. And this also means that a user can just Inspect element and remove hidden attribute to display that component which is intended to be hidden.

Categories