How would I go about checking if this is is active:
When its not active its just
The "style" is the part that makes it "active" and visible on screen. Is there a way that I can get the Jump button by that style inside the div?
You can check to see if the element has a style attribute by putting [style] in a selector:
if (document.querySelector('#jump[style]')) {
console.log('style attribute exists on jump element');
} else {
console.log('style attribute doesn\'t exist');
}
Related
I would like to find out how you can hide and show div element in react typescript. This is the code that I have so far. Any feedbacks
function GetUserInfo (user:User)
{
let userInfo = USERINFO.find((d) => d.Address === user.Address);
if(userInfo)
{
//Show Div
showDiv
}
return userInfo.data
}
function showDiv(props) {
return <div id="missingPO">Unable at identify user info.</div>
}
The code you have written is a bit unclear about how you wanna hide it,
But for example, you want to hide an element in case a variable is true, in your case can be something with an address or what you are trying to do.
for example, I want to hide a value when const isHidden=true
I will discuss two ways.
You can declare a class that hides the div, for example in your global class add a CSS class
.hidden{
display: none;
}
then in your div, you can check if isHidden enables class.
<div className={isHidden && 'hidden'} />
you can check like this
//in your method return div in case you are not hidden, pass the isHidden as props.
function showDiv(props) {
return props.isHidden ?<></>: <div id="missingPO">Unable at identify user info</div>
}
// or just check with &&
!isHidden && <div> will show only if is hidden false</div>
// the pros of using the second one are because you are unmounting div, but this can be a downside too, depends what you need
// with display it will remove from the page, but now from the dom, also you can make visibility: hidden if you do not want to remove it from the page just to hide.
If you have any question please ask 😄
This is a Framer/React question:
I have a bunch of text fields in a "page" component and I want the focus to shift on every "page" change.
There's a button controlling the pager but no trigger (onPageChange / onClick) is changing the attribute of "focus" on the relevant text input.
This is the code I tried using to change the value of foc2 (the focus attribute) to true
When I manually change it to true it works, but in this case it doesn't
export function Page(): Override {
return {
currentPage: state.page,
onChangePage: (index) => {
state.page = index
state.foc2 = true
},
}
}
Do you have more complete code you could share?
Make sure you set the state to the index of the current focused input, and use that to change the currentPage property.
Happy to help if you send more context, you can also find more help in Framer's community at https://framer.com/r/discord
I'm new to LWC in salesforce and want to hide/show the button based status. I write below code but it is hiding for all statuses. Can you please help me if am wrong.
<template for:each={savedCampaignList} for:item="savedCampaignListvar">
<a name={savedCampaignListvar.Id} >View</a>
|
<a hidden =!IF(savedCampaignListvar.Status === 'Saved')" name={savedCampaignListvar.Id} >Delete</a>
</template>
Expressions are different in LWC than in aura and visualforce
You need to have a getter defined in your controller the template uses for expressions or have a tracked variable you update.
See this for migrating to lwc
You'll end up making a getter like this
get hideLink() {
return this.savedCampaignListvar.Status === 'Saved';
}
and then in your lwc markup you should have this
<template if:false={hideLink}>
<a name={savedCampaignListvar.Id}>Delete</a>
</template>
Note: the hidden attribute is not a boolean attribute. If the attribute exists regardless of setting it to true/false hides the element. See here
Use this code in your HTML template - remember don't put any attribute in your root 'template' element use another div as a holder for for:each directive. You must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time.
<template>
<div for:each={savedCampaignList} for:item="savedCampaignListvar" key={savedCampaignListvar.Id}>
<a name={savedCampaignListvar.Id} >View</a>
|
<a if:true={savedCampaignListvar.shouldShow} name={savedCampaignListvar.Id} >Delete</a>
</div>
</template>
We can use connectedCallback function - it's build in LWC function called when the element is inserted into a document. There we can put some condition and add 'shouldShow'(you can call if whatever you want of course;)) attribute to our Objects inside the array. Based on this attribute we will show delete button or not. Your JS should looks like:
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
#track savedCampaignList = [
{Id: "1", status: 'Saved'},
{Id: "2", status: 'Not Saved'}
]
connectedCallback() {
this.savedCampaignList.forEach((el)=> {
el.shouldShow = el.status === 'Saved';
})
}
}
You can use if:true or if:hide.
Go through this https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component
I can't figure out how to disable a button for a custom Button component in React. I want it to be conditional so it only disables when the word is written.
<Button disabled>Disabled</Button>
Here is a working example of the Button component : https://codesandbox.io/s/y08xk0vzxz
And here is the code :
function Button({ disabled, children }) {
return <button disabled={disabled}>{children}</button>;
}
You can check the log in codesanbox and see that by default if noting is specify for the value in your JSX, the value of the prop is set to true.
let isEmpty = true;
<Button disabled={isEmpty}>Disabled</Button>
here default value of disabled is true. We also can pass conditional value as needed
I am experimenting with different React popup libraries. I found reactjs-popup and began playing with the codesandbox. I created a fork of the environment here https://codesandbox.io/s/pp60zjkxlj
When I click the first (or second) button, it displays the corresponding popup. What i'd like is so that when I click other button, it will display that button's popup and hide any other popups that are visible. The goal is that only one popup should be visible on screen at any time.
Is this possible with this library?
See https://codesandbox.io/s/pp60zjkxlj
have a common state for popup when first button is clicked set the state to first button and based on the state
I would look into Portals where you can use a portal that sits outside of the jsx that wishes to use it.
imo it is the best way to implement a modal and i believe there's not to much need to add another dependency to your project and just create one this way that matches your needs.
You will need to pass props into the Popup to tell it when to open and when not to open.
Your component should have state set for each popover or be passed in props to tell the Popovers when to display. You can set in a constructor a default state and spread those before setting the new state with the new Popover open. This is how I handle modals.
constructor(props) {
super(props);
this.state = {
vendor: {} // Just showing my default state this gets set and this.defaultState is spread after my fetch request completes in componentWillMount()
};
this.defaultState = {
isPopoverOpen: {
// ---- Default Popover booleans can go here
editVendor: false
}
};
}
Actual function that controls the Popover status in the state.
// onClick of element would be onClick={this.handleTogglePopover('editVendor')}
handleTogglePopover = id => {
const currentState = Object.assign({}, this.state);
this.setState({
currentState,
...this.defaultState, // spreading default will set everything to false
isPopoverOpen: {
[id]: true // then the newly clicked to true
}
});
};