I have a component which has a conditional prop that is called onClose and can receive a callback function. Depending on whether this prop is passed, the design of the component will look different.
In order to demonstrate this in my component I have these properties in my Storybooks default export:
argTypes: {
onClose: {
options: [
() => console.log('test');
null,
],
control: {
type: 'radio',
labels: {
null: 'some value' // <-- works
???: 'some other value' // <-- what to provide for the function?
}
},
},
},
how can I alias the values of options so that it won't look like this:
I want the behaviour of those options, but I want a label for those options.
Is argTypes maybe the wrong thing to set this?
Related
In storybook (React), I have set-up the following control that correctly displays iconClass as a select. I want it to provide those three "most used" options, but also give the user the ability to input a custom value. How to get this hybrid select / input text control? Thanks
argTypes: {
iconClass: {
control: {
type: 'select',
options: [
'fa-arrows-alt-v',
'fa-arrows-alt-h',
'fa-link',
]
},
}
}
I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links.
I ended up only seeing the raw HTML output, so after some searching on Google I found this post on Github suggesting to use RawHTML.
So I put this code together which does create the red notice, but it doesn’t show the actual HTML only [object Object]. So I’m clearly doing something wrong here, but not sure what? Anyone who can point me in the right direction how to make the notices show the raw HTML?
wp.data.dispatch( 'core/notices' ).createNotice(
'error',
wp.element.createElement( wp.element.RawHTML, null, '<p>test</p>' ),
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true
}
);
The notice component has an actions property which enables links to be rendered inside a notice, removing the need to use RawHTML.
options.actions [Array]: User actions to be presented with notice.
A notice can have one or more actions, each action has a label and must specify either a url or onClick function, eg:
wp.data.dispatch('core/notices').createNotice(
'error', // type of notice
'Something went wrong..', // message
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true,
actions: [
{
label: 'Option A',
url: '#link' // styled as plain link
},
{
label: 'Option B',
onClick: () => { alert('ok') } // styled as a button link
}
]
}
);
Result:
How do I add and then access additional values My_Custom_Value to the Event Object?
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
}
],
Access your value through "extendedProps":
A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given extendedProps hash as well as other non-standard properties."
https://fullcalendar.io/docs/event-object
eventRender: function(info){
console.log("_______ info _______\n");
console.log(info.event.extendedProps.My_Custom_Value);
}
Use extendedProps. You can include them in the event object directly (https://fullcalendar.io/docs/event-object), or add them afterwards using method Calendar::setExtendedProp (https://fullcalendar.io/docs/Event-setExtendedProp)
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
extendedProps: {
description: 'whatever',
madeupProperty: 'banana'
}
}
]
The answer to this is contained in the Event Parsing documentation at https://fullcalendar.io/docs/event-parsing.
The way you're setting the custom property in your object is fine. As per that documentation, fullCalendar will read it, and then place it in the extendedProps property of the event object it creates internally.
So if you then need come to access that event later (e.g. via one of fullCalendar's callbacks such as eventClick, perhaps) you would use event.extendedProps.My_Custom_Value to access it.
I am using Reactive-Table to display data saved in my Meteor app as shown from the code below, in each row of the table there is a link to edit the document related to this row. I am trying using the edit link 'click event' to capture the _id of the document related to the row being selected but can't seem to get the _id, can someone please check my code and let me know what I am missing / doing wrong here and how to capture the _id? Thanks
customerslist.html
<template name="customerslist">
<div class="customerslist">
<div class="page-header">
<h1>Customers List</h1>
</div>
<div>
{{> reactiveTable class="table table-bordered table-hover" collection=customersCollection settings=settings}}
</div>
</div>
</template>
customerslist.js
Template.customerslist.helpers({
customersCollection: function () {
return Customers.find({},{sort: {title: 1}});
},
settings: function () {
return {
rowsPerPage: 10,
showFilter: true,
showColumnToggles: false,
fields: [
{ key: 'name', label: 'Customer Name' },
{ key: 'email', label: 'Email' },
{ key: 'phone', label: 'Phone' },
{ key: '_id', label: 'Action', sortByValue: false, fn: function(_id){ return new Spacebars.SafeString('<a name="' + _id +'" class="edtlnk" target="_blank" href="' + _id + '/edit"> Edit </a>'); } }
]
};
}
});
Template.customerslist.customers = function () {
return Customers.find({},{sort: {title: 1}});
};
Template.customerslist.events({
'click .edtlnk': function(e) {
var cust = this;
event.preventDefault();
console.log('Customer ID: '+cust._id);
}
});
The way the package sets up data contexts, this will only be set to the customer object if the event selector matches the tr element. That makes event.currentTarget the tr, but event.target is still the edit link.
You could try something like this:
Template.customerslist.events({
'click .customerslist tr': function(e) {
if ($(e.target).hasClass('edtlnk')) {
var cust = this;
e.preventDefault();
console.log('Customer ID: '+cust._id);
}
}
});
I don't know Meteor though I am starting to play around with it so I don't care about up or down votes at all but learning the answer your question.
I found the Event Maps docs which I am sure you saw as well:
https://docs.meteor.com/#/full/eventmaps
This was listed in the doc:
{
'click p': function (event) {
var paragraph = event.currentTarget; // always a P
var clickedElement = event.target; // could be the P or a child element
}
}
If a selector matches multiple elements that an event bubbles to, it will be called multiple times, for example in the case of 'click
div' or 'click *'. If no selector is given, the handler will only be called once, on the original target element.
The following properties and methods are available on the event object passed to handlers:
type String
The event's type, such as "click", "blur" or "keypress".
target DOM Element
The element that originated the event.
currentTarget DOM Element
The element currently handling the event. This is the element that matched the selector in the event map. For events that bubble, it may be target or an ancestor of target, and its value changes as the event bubbles.
It seems to me that since target and currentTarget are DOM elements can't you get what you need from those or are you referring to the _id available in Meteor on an insert callback?
This may be obvious but I can't figure out how to bind a static json object to to a FormPanel in extjs. I am new to ExtJs so I'm still learning. I have a TreePanel with various additional attributes contained on the node.attributes object. When a node is clicked id like to display the data in a form. Below is what I have. The data does not get bound to the fields.
All the examples for extjs cover loading data from a store or a url.
tree.on('click', function (n) {
var detailEl = details.body;
if (n.attributes.iconCls == 'page') {
detailEl.hide();
var form = new Ext.FormPanel({
frame: true,
renderTo: detailEl,
title: 'Page Details',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: { width: 230 },
defaultType: 'textfield',
data: n.attributes,
items: [{
fieldLabel: 'Title',
name: 'title',
allowBlank: false
}, {
fieldLabel: 'Url',
name: 'url',
allowBlank: false
}, {
fieldLabel: 'Live',
name: 'islive',
xtype: 'checkbox'
}
],
buttons: [{
text: 'Save'
}]
});
detailEl.slideIn('l', { stopFx: true, duration: .2 });
}
});
Also is it best practise to create a new FormPanel each time or to rebind the existing formPanel?
Thanks,
Ian
The best practice is to have the form rendered once and change the values according to the nodes selected.
As already mentioned, data isn't the field to use. To assign values in a bulk manner, you should use Ext.form.BasicForm.setValues( Array/Object values ) method. You are getting BasicForm object using FormPanel's getForm() method.
Summarizing,
var form = new Ext.FormPanel({/*...*/});
tree.on('click', function (node){
form.getForm().setValues(node.attributes);
});
Pay attention, that form fields' names and attributes' names should correspond.
I don't believe the data configuration key does what you think it does.
Try setting values individually in the field definitions.