I have a topBar with a button that toggles the Side Menu.
I have registered a navigationButtonPressed action as below
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
});
break
default:
break
}
}
But in this case, the button only makes the sideMenu visible, and Im trying to use it so it toggles the menu open and closed.
So i replaced the above with a variable approach seen below..
var sideMenuVisible = false
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
sideMenuVisible = !sideMenuVisible
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: sideMenuVisible
}
}
});
break
default:
break
}
}
Which works fine if the user only uses the button to open and closed the sideMenu, but the user can also open/close the menu by swiping to open the menu as well as tapping out the menu to close it.
Is there a way to check the visibility of the sideMenu so I can properly use an action to open/close the menu on command?
It can done much more simple.
Think you should create it as a state, because the component have to know, it should be rerendered, when the state change.
So something like
state = { isOpen: false };
toggleSidebar = () => {
this.setState({ isOpen: !isOpen })
}
And now, you should call the toggleSidebar function when you click the button
Related
I am trying to clear PnP People piker control programmatically in SharePoint online spfx webpart, I am using a simple form with save and cancel button, which save data in List, on the Cancel button I want to clear PeoplePicker value
<PeoplePicker
context={this.props.context}
personSelectionLimit={1}
groupName=""
showtooltip={false}
onChange={(value) => this.getPeoplePickerItems(value, "col")}
showHiddenInUI={false}
defaultSelectedUsers={this.state.ApprovarSelected}
principalTypes={[PrincipalType.User]}
ensureUser={true}
/>
OnChange Event
private getPeoplePickerItems(items: any[], col) {
if (items.length > 0) {
this.state.ListItem.Approvar = { id: items[0].id, secondaryText: items[0].secondaryText, text: items[0].text };
}
else {
this.state.ListItem.Approvar = { id: '', secondaryText: '', text: '' };
}
}
Cancel button
public onClickCancel() {
this.setState({ ApprovarSelected:[]});
}
I am changing state while clicking on the Cancel button, but somehow it is not working, can anyone help me with this?
Thanks.
I got the solution,
Add ref={c => { this.ppl = c }} in PeoplePicker control and write below code on cancel button.
this.ppl.onChange([]);
It works for me.
I'm trying to use lodash's debounce method to to toggle a boolean located in the state 500ms after the scroll occured.
I've look for responses on SO but none of these helped me to fix this. This seems fairly simple so there's probably something that I didn't get.
The state is:
constructor(props) {
super(props);
this.state = {
isScrolling: false
}
}
The componentDidMount part is:
componentDidMount(){
window.addEventListener('scroll', this.handleScroll, true);
window.addEventListener('scroll', _.debounce(() => {
this.setState({
isScrolling: false
})
}, 500))
}
The scroll function is:
handleScroll = (event) => {
this.setState({
isScrolling: true
})
};
In my rect chrome dev. tools, I see that isScrolling is toggling to true when I start scrolling but the debounce method does not toggle it back to false again. What am I doing wrong?
EDIT - My code was correct but this bit of css code was preventing the correct behavior to happen:
html, body {
height:100%;
}
Is there a way to display a modal dialog when user selects a tab in TabStrip component? The code below displays window.confirm, can not get modal dialog to display.
onTabSelected(e : any){
if (!window.confirm("Continue with navigation?")) {
e.prevented = true;
}
}
The dialog is not a direct substitute for window.confirm, because it cannot block the UI thread. To substitute the window.confirm with the Kendo UI dialog, you can prevent all tab selection, and wait for the dialog result:
onTabSelected(e: any) {
e.prevented = true;
this.dialogService.open({
content: "Continue with navigation?",
actions: [
{ text: "No" },
{ text: "Yes", primary: true }
]
}).result.subscribe((result) => {
if (result.primary) {
// change tab through code
this.tabStrip.selectTab(e.index);
}
});
}
See this plunkr for a working demo.
Ended up canceling the tab selection event, showing modal dialog, and resubmitting event based on the user answer.
I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!
zingchart.render({
id: "vsSelfChartDiv",
width: '100%',
height: '100%',
output: 'svg',
data: myChartVsSelf,
events:{
node_click:function(p){
zingchart.exec('vsSelfChartDiv', 'modifyplot', {
graphid : 0,
plotindex : p.plotindex,
nodeindex : p.nodeindex,
data : {
"value-box":{
"visible":true
}
}
});
var indexThis = p.nodeindex;
var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
updateTop(indexDateVal);
}
}
});
You'd probably be better off using a label instead of a value-box. I've put together a demo here.
I'm on the ZingChart team. Feel free to hit me up if you have any more questions.
// Set up your data
var myChart = {
"type":"line",
"title":{
"text":"Average Metric"
},
// The label below will be your 'value-box'
"labels":[
{
// This id allows you to access it via the API
"id":"label1",
"text":"",
// The hook describes where it attaches
"hook":"node:plot=0;index=2",
"border-width":1,
"background-color":"white",
"callout":1,
"offset-y":"-30%",
// Hide it to start
"visible":false,
"font-size":"14px",
"padding":"5px"
}
],
// Tooltips are turned off so we don't have
// hover info boxes and click info boxes
"tooltip":{
"visible":false
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69]
}
]
};
// Render the chart
zingchart.render({
id:"myChart",
data:myChart
});
// Bind your events
// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"text":p.value,
"hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
"visible":true
}
});
});
// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
if (p.target != 'node') {
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"visible":false
}
});
}
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>
How to bind a button that open jPlayer in fullscren mode ?
I have a custom user button in my html:
<a onClick="javascript:$('#top_video_player').jPlayer('fullScreen');event.preventDefault();" class="button" href="#">Open in big Screen</a>
But this don't work.
I also try:
$('#top_video_player').jPlayer('option','fullScreen',true)
or
$('#top_video_player').jPlayer('option',{fullScreen:true})
also try to add class .jp-full-screen to my button ( tag ) - no effect too ):
But failed again - nothing happened
In my jPlayer initialization i bind it to "enter" button and it works - but i also need to bind another html button:
keyBindings: {
play: {
key: 32, // space
fn: function(f) {
if(f.status.paused) {
f.play();
} else {
f.pause();
}
}
},
fullScreen: {
key: 13, // enter
fn: function(f) {
if(f.status.video || f.options.audioFullScreen) {
f._setOption("fullScreen", !f.options.fullScreen);
}
}
}
},
Thanks in advance.
I have managed to do it by using:
$('#top_video').data('jPlayer')._setOption('fullScreen', true);
where 'top_video' - jplayer div id