I have a problem with customizing the datepicker popup dialog(For example change color of header). I can't style it by attribute style like textField by textFieldStyle. It doesn't have any class or id.
How can I do it?
The only place you can currently override this is the theme:
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MyAppRoot from './MyAppRoot';
const muiTheme = getMuiTheme({
datePicker: {
selectColor: cyan500,
},
});
class Main extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<MyAppRoot />
</MuiThemeProvider>
);
}
}
export default Main;
If you are using the latest version of Material-UI, things changed. MuiThemeProvider and getMuiTheme are replaced by createMuiTheme and ThemeProvider respectively.
You can use like this:
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
Now Material-UI is using tree-shaking mechanism to avoid unnecessary bundles, so destructing is well to go.
To change the header, use something like this:
const muiTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: { backgroundColor: 'var(--themeP)' }
},
...
Related
Has anyone else encountered this problem when importing a function from a package, it does so on a new line and not on the same line that already exists?
Attached is an image of what happens to me when I use the import suggestion
import { Fragment } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '#hookform/resolvers/zod'
import { useEffect } from 'react'
import { useState } from 'react'
import { object } from 'zod'
import { string } from 'zod'
As you can see I import several react hooks and the import is separated and not in the same line, the same happens when importing zod
import React, { useState, useEffect, Fragment } from 'react';
You can just re-write it so everything from the same resource can be imported together.
Refer to this document,
https://lit.dev/docs/api/styles/#adoptStyles
I am not able to figure out the way to use it.
Seems like I can use following way to do the import.
import styleSheet from '#material/data-table/dist/mdc.data-table.css' assert { type: 'css' };
connectedCallback() {
super.connectedCallback();
this.renderRoot.adoptedStyleSheets = [styleSheet];
}
you can use static get styles inside your class
import { adoptStyles, LitElement } from 'lit';
class youComp extends LitElement {
static get styles(){
return [adoptStyles] /* you can return array of styles */
}
}
This should do the job
I have my StackNavigator set up like this:
const Navigation = StackNavigator({
Splash:{screen: Splash},
Registration:{screen:Registration},
HomeScreen:{screen: HomeScreen},
Login:{screen: Login},
Lobby:{screen: Lobby},
Wifi:{screen: Wifi},
Mobile:{screen:Mobile},
}, {
mode: 'modal',
headerMode: 'none'
});
I'd like to redirect the user from the Splash page(which only contains a logo) to the Registration page after 2 seconds. I want to avoid using buttons(hence the automatic redirect) so that the user gets a brief look at the logo.
My Splash page:
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
export default class Splash extends Component{
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
I'm not sure I would put this.navigator.redirect('Registration') because the only way I've changed pages so far was using onPress={}
try with componentDidMount function.
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';
const EntityAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'screen:Registration' }),
]
});
export default class Splash extends Component{
componentDidMount {
setTimeout( () => {this.load()}, 2000);
}
load = () => {
this.props.navigation.dispatch(EntityAction);
}
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
Followed the content of the url to implement dynamic menu items using JSON file stored under /assets/data. The menu is working fine with stored JSON file. Now I need to dynamically retrieve the JSON of same format in real time from a Salesforce API and display its content.
Can someone please suggest what changes I need to make here? should the json path in getMainMenu() method be replaced with the actual Saleforce API?
Below is the data-service.ts
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the DataServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class DataServiceProvider {
constructor(public http: Http) {
console.log('Hello DataServiceProvider Provider');
}
getMainMenu(){
return this.http.get('assets/data/mainmenu.json')
.map((response:Response)=>response.json().Categories);
}
}
and app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { DataServiceProvider } from '../providers/data-service/data-service'
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: any[]; //Array<{title: string, component: any}>;
mainmenu: any[];
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public dataService: DataServiceProvider) {
this.initializeApp();
this.dataService.getMainMenu().subscribe((Response)=>{
this.mainmenu = Response;
console.log(this.mainmenu);
});
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
toggleSection(i) {
this.mainmenu[i].open = !this.mainmenu[i].open;
};
toggleItem(i,j) {
this.mainmenu[i].SubCategories[j].open = !this.mainmenu[i].SubCategories[j].open;
};
}
It looks like you will need to update the url in the getMainMenu method to that of your api. There might be some other changes you will need to make, such as adding authentication headers, but if the data coming from the api is the same as whats stored in the assets folder, your component shouldn't care "where" the data comes from.
Has anyone been able to use the React Leaflet Popup element to show a popup on mouseover rather than on click?
I can't seem to find a way to achieve this.
I've recently solved this problem using React Refs and the Leaflet API.
A barebones example:
import React, { Component } from 'react';
import { Circle } from 'react-leaflet';
class Foo extends Component {
render() {
const { center, radius } = this.props;
return (
<Circle
ref={circle => { this.circle = circle; }}
center={center}
radius={radius}
onMouseOver={() => {
this.circle.leafletElement.bindPopup('foo').openPopup();
}}/>
);
}
}
export default Foo;