There is no documentation for adding a eventWrapper and I've seen a few comments saying it's not meant to be overwritten. Should we be using this or trying to create custom eventWrapper component to override this exsisting one?
For me I don't want the .rbc-event-label also want to dynamically in JS change the styling. Or should I be just changing things in the CSS?
You can dynamically apply additional classes and styling to your events by using the eventPropGetter property. This property takes a function that should return an object of class names and styles to be applied to an event (automatically added to the eventWrapper).
const eventRenderProps = (event, start, end, isSelected) => {
let result = {};
// Code to conditionally add 'className' or 'style' to the result
return result; // {className?: String, style?: Object}
}
//
<MyCalendar eventPropGetter={eventRenderProps} />
It's important to note that this method is called on every displayed event, and will get called again on each as an event is selected or changed/updated. Also important to note that className is to be a String, and not an object, so if you require several classes you will need a space delimited list of class names.
Related
We are getting this custom setting value in aura component
Apex class below
#AuraEnabled
public static AP_ApplicantSpaceFooterWrapper getdisclaimerCS(){
AP_ApplicantSpaceFooterWrapper footerDetailsWrapper = new AP_ApplicantSpaceFooterWrapper();
List<CS_DisclaimerLink__c> disclaimerLinkList = CS_DisclaimerLink__c.getall().values();
footerDetailsWrapper.disclaimerLinkCSList = disclaimerLinkList;
footerDetailsWrapper.userLanguage = UserInfo.getLanguage();
return footerDetailsWrapper;
aura componnet helper method where we are setting the attribute from above class method.
({
doInit : function(component, event, helper) {
helper.callServer(
component,
"c.getdisclaimerCS",
function(response){
console.log('response: '+response);
if(!$A.util.isEmpty(response)){
component.set("v.disclaimerLinksCS", response);
}
}
);
}
})
On UI we are getting these value like below
but we want that CGU(capital letter ) one only comes in last rest all are correct in order.
Screenshot of custom setting records is below
Why don't you add a column to the custom setting with SortOrder__c and fetch them with plain old SOQL query with ORDER BY... instead of CS_DisclaimerLink__c.getall()?
I mean if you really want you probably can pull it off using a helper wrapper class and implements Comparable in the Apex before returning it to Aura but sounds like an overkill.
Edit
Your "#auraenabled" isn't even marked "cacheable=true", in a way you don't have "right" to talk about performance on SF platform. "Cacheable" would make aura fetch valueonly once, not on every rerender, making the getall vs soql dilemma less important.
But if you're really paranoid - add the column with sort order, fetch them with getall, put as a field in helper class that implements Comparable and sort in memory rather than with soql.
I would like to be able to open a menu that opens when you click on a hamburger element. this element is set up by an external library. the RTL query functions aren't able to access it as it does not have any attributes to match against (no text, label text, role, title, etc.).
I can retrieve it with document.querySelector, but that function returns an Element, and I need to be able to fire a click event on it which requires the element to be of class TargetElement. is there a way to retrieve the element in that type, or otherwise convert it? I've tried
const MenuButton = document.querySelector("external-lib-classname") as TargetElement;
fireEvent.click(MenuButton);
But this does not seem to work with fireEvent as it does not recognize the element as a DOM element.
This seems to be a bit of an oversight on RTL, unless I'm missing something.
You can use a manual query on the container returned by RTL's render method.
const { container } = render(<Component />);
const menuButton = container.querySelector("external-lib-classname");
fireEvent.click(menuButton);
Note that using querySelector to query by class/id is not recommended by RTL and should only be used as last resort, when everything else fails.
I am rather new to React.js, I believe I understood the major concepts, and I am struggling to find documentation on how to overwrite a single property of a class I am declaring.
In on of my components, I define a new class MyColumn based on a class from Ant Design. The architecture (of inheritance rather than composition) was already made by others, and I am not able to change that.
import { Table } from "antd";
const { Column } = Table;
// ...
class MyColumn extends Column<Interfaces.myViewEntry> { } // <---
At the moment, the column headers just flows downward, I need either ellipsis dots (and a mouse-over with the full column label), or a proper word wrap. Probably, the latter is easier.
To reach that goal, I want to set the property style: { 'white-space': 'unset' } (and just that property) for MyColumn since I read that this will allow me to get proper word-wrap for the column headers.
Could somebody please elaborate what to put into the brackets in the line I marked with <--?
Background
In interfaces.tsx, I defined something like the following
export interface myViewEntry{
LastName: string,
FirstName: string,
Result: number,
}
References
Overwriting and Extending Prototype
React.js: setState overwriting, not merging
How to do word-wrap for data using react-table?
How can we configure the Header of ant design table component?
How to update nested state properties in React
Reactjs-documentation on Components and Properties and on Composition and Inheritance
in my opinion it's better to wrap ant-design components with you own ones and add additional properties to that.
For example:
import { Table } from 'antd';
export default function MyTableColumn({ children, ...rest }) {
//...useState, useRef, useEffect, whatever you need.
return <Table.Column {...rest}>{children}</Table.Column>
}
My code is here - https://codesandbox.io/s/92xmm6zvmo
The idea is that the user clicks on an Edit link in a table, the row expands and a textarea opens in the expanded row so that the user can edit their JSON in it. This is all working great, except for the onChange event handler of the textarea. When the event fires it seems to be missing a reference to this, and is unable to bind an appropriate event handler. I don't understand why this is the case, I would expect there to be a reference to the ExpandableTable component available as the expandedRowRender() method belongs to that class.
The other form fields (that are not dynamically added) appear to be working fine.
Showing your code make things easier.
I think it's working now.
https://codesandbox.io/s/wkym185vpl
The problem is, you were not binding correctly the "this" context. if you are going to use arrow function, make sure all class functions are:
Class MyClass{
expandedRowRender = () => {}
}
if you are doing expandedRowRender(){} make sure bind it in the constructor.
Class MyClass{
constructor(){
this.expandedRowRender = this.expandedRowRender.bind(this);
}
...
expandedRowRender(){}
}
I need to do something when text, wrapped with my own blot, changed.
From parchment documentation i got that method update will called when blot changes.
I try to use it in code, but this method does't called when text, wrapped with my blot, changes.
May be I use this method incorrect? Or I should use another method?
You should use text-change event:
this.quill.on('text-change', (range, oldRange, source) => {
// Returns the leaf Blot at the specified index within the document
let [leaf, offset] = this.quill.getLeaf(range.index); // Experimental API
if(leaf.domNode.nodeName === 'yourBlotTag') {
//Do something
}
}