I'm calling an obj for my index.js screen like that ...
index.js
import React from 'react';
import { View, Text } from 'react-native';
import ScreenUsers from './ScreenUsers';
const Users = (props) => {
const username = props?.route?.params?.user.map(name => (
name.userDetails.nameUser
));
return (
<Text>{username}</Text>
{ScreenUsers()}
);
}
Until then my index.js works, pull the username, however my index has a component from another screen called ScreenUsers.js where I make a list of users. In this other component that is breaking because it does not return what I want.
ScreenUsers.js
import React from 'react';
import { View, Text } from 'react-native';
function ScreenUsers(props) {
const fullnanme = props?.route?params?.user.users;
return <Text>{fullname}</Text>
}
ScreenUsers have route error
you use ScreenUsers as component not as screen, you can't handle route in this case, if you want to use it as navigation screen you must use navigation read here
and if you want to use it only as component
edit this line {ScreenUsers()} to
//pass prop fullname down
<ScreenUsers fullname={"user name1"} />
//recieve props fullname
function ScreenUsers(props) {
return <Text>{props?.fullname}</Text>
}
if you already use ScreenUsers as screen in navigation and you want also to use it as component you can do something like this
//pass prop route
<ScreenUsers route={{params : {fullname : "user name1"}} />
//recieve props fullname
function ScreenUsers(props) {
return <Text>{props?.route?.params?.fullname}</Text>
}
Related
I created a simple LitElement with CodeMirror6 I can see the Editor, but when I call the same LitElement in Vaadin , the styling is completely gone.
I have tried both 14 and 23. Same issue.
CodeMirror6 Lit
import { LitElement, html } from 'lit';
import { EditorState, EditorView, basicSetup } from "#codemirror/basic-setup"
import { sql } from '#codemirror/lang-sql';
import { oneDark } from '#codemirror/theme-one-dark';
export class App extends LitElement {
static get properties() {
return {
value: String,
};
}
render() {
return html`
<div id="codeeditor"></div>`;
}
firstUpdated() {
let editorState = EditorState.create({
doc: this.value, extensions: [
basicSetup,
oneDark,
sql(),
]
});
var element = document.getElementById('codeeditor');
const editor = new EditorView(
{
state: editorState,
parent: element
}
);
}
createRenderRoot() {
return this;
}
}
customElements.define('code-mirror', App);
LitElement Code Editor Image - https://i.stack.imgur.com/0MsjU.png
No issue here works perfectly, but When I call the above litelement into Vaadin . The formatting and styling is completely gone.
LitElement in Vaadin Image : https://i.stack.imgur.com/RP35C.png
Any suggestion or pointer for me to fix this issue.
The problem is way on which vaadin renders child components in a Vertical|Horizontal layout (shadowRoot with slots).
If you add your implementation to the ROOT content (first layout), the codemirror will work fine as the styles will be applied correctly.
I tried extending new module about #CssImport with codemirror styles. The module was displaying correctly but the codemirror events stopped working because of the vaadin structure ;/
The problem can be worked around as follows. I know it's not elegant, but it works.
Create a new element in document.body
Init codemirror in the new element
Move codemirror from created element to element rendered by module
import {EditorState, EditorView, basicSetup} from "#codemirror/basic-setup"
import {sql} from "#codemirror/lang-sql"
import {html, LitElement} from "lit";
import { oneDark } from '#codemirror/theme-one-dark';
export class App extends LitElement {
static get properties() {
return {
value: String,
};
}
createRenderRoot() {
return this;
}
render() {
return html`<span id="codeeditor"></span>`;
}
firstUpdated() {
var element = document.getElementById('codeeditor');
var parent = document.createElement("div");
document.body.append(parent);
new EditorView({
state: EditorState.create({
extensions: [basicSetup, oneDark ,sql()]
}),
parent: parent
})
document.body.removeChild(parent);
element.appendChild(parent);
}
}
customElements.define('code-mirror', App);
I would like to print out the content of a homepage created with Vaadin 14 from a button.
with Vaadin 8 was a solution that unfortunately is no longer applicable:
Button print = new Button("Print This Page");
print.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
// Print the current page
JavaScript.getCurrent().execute("print();");
}
});
Any Idea how to do this in Vaadin14 please?
In Vaadin 10 and later, you can run arbitrary JavaScript by calling Page::executeJs
UI.getCurrent().getPage().executeJs( … )
There you should be able to call the same print function. See: Executing JavaScript in the Browser.
So in your case, for printing the current page:
UI.getCurrent().getPage().executeJs( "print();" ) ;
Full example in Vaadin 14.0.12, using lambda syntax:
package com.example;
import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
/**
* The main view contains a button and a click listener.
*/
#Route ( "" )
public class MainView extends VerticalLayout
{
public MainView ( )
{
this.add( new H1( "Print example" ) );
Button printButton = new Button( "Print…" );
printButton.addClickListener( ( ClickEvent < Button > clickEvent ) ->
{
UI.getCurrent().getPage().executeJs( "print();" );
} );
this.add(printButton);
}
}
I am using the following code, though the status bar appears to be displaying white text instead of black. Any help would be great
// #flow
import React, { Component } from 'react'
import { View, StatusBar } from 'react-native'
import NavigationRouter from '../Navigation/NavigationRouter'
import { connect } from 'react-redux'
import StartupActions from '../Redux/StartupRedux'
import ReduxPersist from '../Config/ReduxPersist'
// Styles
import styles from './Styles/RootContainerStyle'
class RootContainer extends Component {
componentDidMount () {
// if redux persist is not active fire startup action
if (!ReduxPersist.active) {
this.props.startup()
}
}
render () {
return (
<View style={styles.applicationView}>
<StatusBar barStyle='dark-content' />
<NavigationRouter />
</View>
)
}
}
// wraps dispatch to create nicer functions to call within our component
const mapDispatchToProps = (dispatch) => ({
startup: () => dispatch(StartupActions.startup())
})
export default connect(null, mapDispatchToProps)(RootContainer)
Issue ended up being 2 root containers and the incorrect one was being updated
I have some code:
// main.dart:
void main{
initPolymer();
var view = new ChatAppConsumer();
}
//chat_app.dart
#CustomTag('chat-app')
class ChatApp extends PolymerElement{
ChatApp.created():super.created();
}
class ChatAppConsumer{
final ChatApp view = new Element.tag('chat-app');
}
as far as I can tell I have all my files properly referenced and Im calling initPolymer(); before I attempt to create my custom tag, but I get the type error that the HtmlElement returned by new Element.tag('chat-app'); is not of typeChatApp` but I use this exact same pattern in another package I have and it works perfectly there. Anyone come across something like this before?
initPolymer is not enough, you should pass a closure to initPolymer.run(() => ...) which executes your Polymer related code.
See how to implement a main function in polymer apps for more details
= Polymer 0.16.0
// main.dart:
void main{
initPolymer().then((zone) => zone.run(() {
var view = new ChatAppConsumer();
}));
}
< Polymer 0.16.0
// main.dart:
void main{
initPolymer().run(() {
var view = new ChatAppConsumer();
});
}
I came through DART custom elements, from dartlang.org site, here and here.
If I understood correctly,this is a vanilla DART custom element, not related to Polymer custom tags.
I wrote the below code,
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() {
print('CustomElement created!');
}
}
void main() {
document.registerElement('x-custom', CustomElement);
}
and got the "CustomElement created!" statement printed in the console, which means the element had been created!
my question is, what else? how can I use this customs element, and what can I do with it can I write HTML template, if yes, how?
I read this but unfortunately could not how to do same with DART.
any thoughts!
This is also used by Polymer. Polymer is just the combination of Custom Element, HTML Imports, Template, Polymer, Polyfills and some builerplate to connect these parts and provider a nice API.
If you want to reinvent the wheel you can go with CustomElement alone.
Change your main to
void main() {
document.registerElement('x-custom', CustomElement);
var elem = new Element.tag('x-element');
elem.appendText('x-element');
document.body.append(elem);
elem.onClick.listen((e) {
print('clicked');
});
}
and you can react to click events
I was ableto write the below, which had been worked, feel I did it the long way,
I could not use the tag
Not sure if the way I used to callback the elements in the custumElement in the correct way, as I was forced to use .append for all the items, and not sure if there is an easier way to do it.
my index.html file is
pick a color:<input type="color" name="colorname" id="colorname"> the color you selected is: <output id="picked-color"></output> click it !
<div id='my-element'></div>
my index.dart file is:
import 'dart:html';
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() { }
Element launchElement(Element o1){
o1.onClick.listen((e) => window.alert('the input color is: ${o1.text}'));
print('CustomElement created!');
var output = new Element.html('<div></div>');
var statement = new Element.html('<div></div>');
var bind = new Element.html('<div></div>')
..text='this text will be dynamically replaced by what you are entering down';
var input = new InputElement()
..id ='input'
..type ='text'
..placeholder='enter data here';
input.onInput.listen((e) => bind.text=input.value);
var element = new Element.html('<span>content: </span>')
..style.color='red';
var button = new ButtonElement()
..id = 'awesome'
..classes.add('important')
..onClick.listen((e) => pop(input.value)) // "Hi There!!!")
..text = 'Click Me man!'
..style.color='orange';
statement.innerHtml="<b>I'm an x-custom-with-markup!</b> ";
output.node..add(statement)..add(bind)..add(input)..add(element)..add(button);
return (output);
}
var button1 = new ButtonElement()
..id = 'awesome2'
..text = 'External Click Me man!';
void pop(i){ window.alert("input is: $i"); }
}
void main() {
document.registerElement('x-custom', CustomElement);
var xFoo = new Element.tag('x-custom');
InputElement colorname = querySelector('#colorname');
Element theColor = querySelector('#picked-color');
xFoo = xFoo.launchElement(theColor);
theColor.text = colorname.value;
Element myDiv=querySelector('#my-element');
myDiv.children.add(xFoo);
colorname.onInput.listen((Event e) {
theColor.text = colorname.value;
});
}
Not available now
document.registerElement is deprecated: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/registerElement
window.customElements.define with Dart is blocked by https://github.com/dart-lang/sdk/issues/35829