just starting with antd and Typescript.
I have a data structure for my tree with some extra information, this is the interface for it:
export interface TreeStructure {
title: string;
key: string;
idPadre?: string | undefined;
assetType: string;
assetTypePadre?: string | undefined;
children?: TreeStructure[]}
I can see the tree structure without problem, but I am trying to implent a function for the right click and acces to that extra information:
const onRightClick:TreeProps['onRightClick']= ({event,node} ) => {
console.log(node)
console.log(node.assetType)
}
console.log(node) is showing all the information:
But I can´t acces to that information destructuring node:
I suppose it is due the typing TreeProps... How could I acces to that information??
Thanks in advance
If your functions are not inline then you can approach 1 otherwise use second one to infer custom node types.
Type 1
Type 2
import { Tree, TreeDataNode, TreeProps } from 'antd';
export interface TreeStructure extends TreeDataNode {
title: string;
key: string;
idPadre?: string | undefined;
assetType: string;
assetTypePadre?: string | undefined;
children?: TreeStructure[];
}
type CustomTreeNode = TreeProps<TreeStructure>;
const App = () => {
const onRightClick: CustomTreeNode['onRightClick'] = (e) => {};
return (
<>
{/* Approach 1 */}
<Tree onRightClick={onRightClick} />
{/* ================= */}
{/* Approach 2 */}
<Tree<TreeStructure> onRightClick={(e) => {}} />;
</>
);
};
export default App;
Related
I'm building an application for Student Information System using serenity platform. In the dashboard I've one widget showing number of active students, when click on "More info" I want to display only the active students, I got the below error: "Element has no widget of type 'Serenity.EnumEditor'!"
I've followed the same steps as the Northwind order example but no success:
protected ESTS_CODEFilter: Serenity.EnumEditor;
protected createQuickFilters(): void {
super.createQuickFilters();
let fld = Students.EnrollmentRow.Fields;
this.ESTS_CODEFilter = this.findQuickFilter(Serenity.EnumEditor, fld.ESTS_CODE);
}
public set_ESTS_CODE(value: string): void {
this.ESTS_CODEFilter.value = value == null ? '' : value;
}
In the StudentsIndex.cshtml page I've the below code to get the query string:
<script type="text/javascript">
jQuery(function () {
var EnrollGrid = new Portal.Students.EnrollmentGrid($('#GridDiv'), {});
var q = Q.parseQueryString();
console.log(q.ESTS_CODE);
if (q.ESTS_CODE != null && q.ESTS_CODE.length) {
EnrollGrid.set_ESTS_CODE(q.ESTS_CODE);
}
Q.initFullHeightGridPage($('#GridDiv'));
});
</script>
Any idea how to define a widget of type Serenity.EnumEditor?
Thanks
Are you sure you have a EnumEditor there? Not a LookupEditor?
protected createQuickFilters(): void {
super.createQuickFilters();
let fld = Students.EnrollmentRow.Fields;
this.ESTS_CODEFilter = this.findQuickFilter(Serenity.LookupEditor, fld.ESTS_CODE);
}
I created a const object at app.config.dart with the following code:
const configObj = const {
'webServer': const {
'appBaseHref' : "/"
},
'auth0': const {
'apiKey': "foo",
'domain': "bar",
'callbackUrl': "callback"
}
};
now in my main dart file I import the app.config.dart and I try to get the values there and now idea how to do that. configObj.auth0.apiKey produces the error EXCEPTION: Class 'ImmutableMap' has no instance getter 'auth0'.
so how do I do this ?
thanks!
Dart doesn't support to access map entries with .
It should be:
configObj['auth0']['apiKey'];
Alternatively you can create classes for your configuration like
class WebServerConfig {
final String appBaseHref;
const WebServerConfig(this.appBaseHref);
}
class Auth0Config {
final String apiKey;
final String domain;
final String callbackUrl;
const Auth0(this.apiKey, this.domain, this.callbackUrl);
}
class MyConfig {
final WebServerConfig webServer;
final Auth0Config auth0;
const MyConfig(this.webServer, this.auth0);
}
const configObj = const MyConfig(
const WebServerConfig("/"),
const Auth0Config(
"foo",
"bar",
"callback"
)
);
This way you also get proper auto-completion when you access the config properties and can use the simple . notation to access properties.
I am trying to understand some typescript but mostly works with Dart.
I see the following example code relevant to what I am doing
import {Component} from 'angular2/core';
import {Validators, MaxLengthValidator, Control, ControlGroup} from 'angular2/common';
import {isPresent} from 'angular2/src/facade/lang';
import {bootstrap} from 'angular2/platform/browser';
export class CustomValidators {
static minLengthWithDescription(minLength: number, desc: string): Function {
return (control: modelModule.Control): {[key: string]: any} => {
if (isPresent(Validators.required(control))) return null;
var v: string = control.value;
return v.length < minLength ?
{"minlength": {"requiredLength": minLength, "actualLength": v.length, "desc": desc}} :
null;
};
}
}
I can follow most of the code but what is the following really doing
return (control: modelModule.Control): {[key: string]: any} =>
Could someone who understands both language convert this small class to Dart?
Thanks
It's mostly about moving types from right to left.
I guess the confusing part is {[key: string]: any} which I think is also just the return type of the returned function. I guess it translates to Map<String,dynamic> but there is currently no way to add a return type annotation for a closure in Dart anyway. A workaround would be to create a typedef
typedef Map<String,dynamic> SomeFunc(modelModule.Control control);
class CustomValidators {
static SomeFunc minLengthWithDescription(int minLength, String desc) {
return (modelModule.Control control) {
if (isPresent(Validators.required(control))) return null;
String v = control.value;
return v.length < minLength ?
{"minlength": {"requiredLength": minLength, "actualLength": v.length, "desc": desc}} :
null;
};
}
}
I can't derive what modelModule. is from the code you provided, but I guess it is some namespace or nested scope to refer to the class Control.
I'm having to restructure some ancient code, and there's quite a bit of it in lots of different files. The approach is to use the revealing module pattern, as described in JavaScript Module Pattern: In-Depth (section Cross-File Private State).
The first function expression works great, and I can see in Firebug that the function components are also assigned correctly in the second block. But then the variable suddenly ends up undefined.
I put together a simplified example, and the console shows the variable is undefined after the second assignment.
var test = (function ($, ns, undefined)
{
function test1()
{
console.log("executing test1");
ns.testx.test2();
}
return { test1: test1 };
}(jQuery, test || {}));
console.log(test);
var test = (function ($, ns, undefined)
{
ns.testx = (function ()
{
function test2()
{
console.log("executing test2");
}
return { test2: test2 }
})();
}(jQuery, test || {}));
console.log(test);
// DOM ready
$(function ()
{
test.test1();
});
Several variations, such as defining the variable just once at the top don't work either. If the two function expressions are swapped, test 1 is executed but ns.testx is undefined.
I fear I'm missing the blindingly obvious and would really like to understand why this does not work. I also need to get it to work, so any help is greatly appreciated (merging the files into one is not an option).
Try
var test = (function ($, ns, undefined)
{
function test1()
{
console.log("executing test1");
ns.testx.test2();
}
ns.test1 = test1;
return ns;
}(jQuery, test || {}));
console.log(test);
var test = (function ($, ns, undefined)
{
ns.testx = (function ()
{
function test2()
{
console.log("executing test2");
}
return { test2: test2 }
})();
return ns;
/*
This will be
{
test1: test1,
testx: {
test2: test2
}
}
*/
}(jQuery, test || {}));
This question already has answers here:
Create an instance of an object from a String in Dart?
(3 answers)
Closed 8 years ago.
if have a Type, using Mirrors can get the Type name. inversely, given a Type's name, how do you get the Type?
for example, from a Dart-centric version of Angular:
index.html
<form ng-controller='word?reset=true' >
...
</form>
mylib.dart
class Controller {
Controller( Brando brando, Element elem, Map args ) { ... }
}
class Word extends Controller { ... }
class LangList extends Controller { ... }
// Brando, the godfather
class Brando {
...
void compile( Element el ) {
...
// add controller
if( el.attributes.contains( 'ng-controller' ) {
var name = el.attributes.getTypeName(); <== "Word"
var args = el.attributes.getTypeArgs(); <== { 'reset': 'true' }
var type = <get type from camelized Type name> <=== how??
this.controllers.add( reflectClass(type).newInstance(
const Symbol(''), [this,el,args]).reflectee ); <=== instance from type
}
...
}
}
know how to get name of Type, how to get Type from class and Object, and know how to instantiate a Type. missing final piece - how do you derive the Type from its name?
Note: The mirror API is `unstable', so this answer may change over time.
*Note: This may (will) bloat your generated javascript see: https://api.dartlang.org/docs/channels/stable/latest/dart_mirrors/MirrorSystem.html#getSymbol*
import 'dart:mirrors';
class Bar {
}
ClassMirror findClassMirror(String name) {
for (var lib in currentMirrorSystem().libraries.values) {
var mirror = lib.declarations[MirrorSystem.getSymbol(name)];
if (mirror != null) return mirror;
}
throw new ArgumentError("Class $name does not exist");
}
void main() {
ClassMirror mirror = findClassMirror("Bar");
print("mirror: $mirror");
}
output:
mirror: ClassMirror on 'Bar'