How do I configure custom theming in Twilio flex 2.0?
I tried custom theming as Flex 1.0 but it's not working anymore after migrating Flex 1.0 to 2.0
import { VERSION } from '#twilio/flex-ui';
import { FlexPlugin } from '#twilio/flex-plugin';
import { ConnectorHelper } from './helpers/ConnectorHelper';
import ConnectorColorTheme from './theme/ConnectorColorTheme';
import reducers, { namespace } from './states';
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
const PLUGIN_NAME = 'ConnectorPlugin';
export default class ConnectorPlugin extends FlexPlugin {
constructor() {
super(PLUGIN_NAME);
}
async init(flex, manager) {
const configuration = {
colorTheme: ConnectorColorTheme
};
// apply theme
manager.updateConfig(configuration);
}
}
export default {
baseName: "FlexLight",
colors: {
base0: "#000000",
base1: "#222222",
base2: "#444444"
},
overrides: {
MainHeader: {
Container: {
background: "#2f5771",
color: "#ffffff"
}
},
MainHeaderProfile: {
marginRight: "1.25rem",
width: "40px",
height: "40px",
},
mainContainer: {
width: "290px"
},
SideNav: {
Container: {
background: "#4a4e60"
},
Button: {
background: "#4a4e60"
},
}
}
}
Above code was working fine in Flex 1.0 but now I am not able to customize my theme.
Related
My IOS app stuck at splash screen, I can't debug because no log when app stuck at splash, it looks like app can't loading or something else which I don't know. This is my App.js :
import AppLoading from 'expo-app-loading';
import { Asset } from 'expo-asset';
import { createDrawerNavigator } from '#react-navigation/drawer';
const MyDrawer = createDrawerNavigator();
export default class App extends Component<Props> {
state = {
isReady: false,
};
async _cacheResourcesAsync() {
const images = [require('./src/img/logo_0.png')];
const cacheImages = images.map(image => {
return Asset.fromModule(image).downloadAsync();
});
return Promise.all(cacheImages);
}
render() {
console.log(this.state.isReady);
if (!this.state.isReady) {
return(
<AppLoading
startAsync={this._cacheResourcesAsync}
onFinish={() => this.setState({ isReady: true })}
onError={console.warn}
autoHideSplash={true}
/>
);
}
return (
<MyDrawer.Navigator initialRouteName="Main" drawerContentOptions={{
activeTintColor: '#FFF',
itemStyle: { marginVertical: 5 },
}}
drawerStyle={{
backgroundColor: '#ea2d49',
width: 240,
marginTop:'23%',
color: '#fff'
}}
>
<MyDrawer.Screen name="Home" component={StackScreen}/>
<MyDrawer.Screen name="Contact US" component={ContactStackScreen}/>
<MyDrawer.Screen name="Privacy Policy" component={PrivacyStackScreen}/>
</MyDrawer.Navigator>
);
}
}
I build with expo.
Thank you everyone!
Is there a way to access the width/height of a dialog component, which is being styled in the css? This is how I'm creating the dialog
this.dialogRef = this.dialog.open(MyComponent, {
position: {
top: yPos + 'px',
left: xPos + 'px'
}
});
I'd like to know the width of the dialog. So far I'm using d3 to get the that information.
const dialog = d3.select('#my-dialog');
const bounds = (dialog.node() as HTMLElement).getBoundingClientRect();
Is there a way to do so without d3? I don't see anything in the dialog that can help. this.dialogRef.componentInstance has only one property: data.
Thanks for helping
You can get it via the DOM... so after calling this.dialog.open & then on each resize because a resize will have impact on the height and width
relevant TS:
import { Component, Inject, HostListener, OnInit} from "#angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from "#angular/material/dialog";
export interface DialogData {
animal: string;
name: string;
}
/**
* #title Dialog Overview
*/
#Component({
selector: "dialog-overview-example",
templateUrl: "dialog-overview-example.html",
styleUrls: ["dialog-overview-example.css"]
})
export class DialogOverviewExample implements OnInit {
animal: string;
name: string;
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: "250px",
data: { name: this.name, animal: this.animal }
});
let dialogDOME = <HTMLElement>(
document.getElementsByClassName("mat-dialog-container")[0]
);
console.log( " width: ", dialogDOME.offsetWidth , " height: ", dialogDOME.offsetHeight );
dialogRef.afterClosed().subscribe(result => {
console.log("The dialog was closed");
this.animal = result;
});
}
#HostListener("window:resize", ["$event"])
onResize(event: any) {
if (document.getElementsByClassName("mat-dialog-container")) {
let dialogDOME = <HTMLElement>( document.getElementsByClassName("mat-dialog-container")[0] );
console.log( " width: ", dialogDOME.offsetWidth , " height: ", dialogDOME.offsetHeight );
}
}
ngOnInit() {
}
}
#Component({
selector: "dialog-overview-example-dialog",
templateUrl: "dialog-overview-example-dialog.html"
})
export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
#Inject(MAT_DIALOG_DATA) public data: DialogData
) {}
onNoClick(): void {
this.dialogRef.close();
}
}
complete working stackblitz
So i am new to react native and JS in general, i have a huge background in native mobile development and i want to know more about Web Apps. So i try to begin with react native to experience that.
I wanted to do a side menu using createDrawerNavigator, so i created the following component :
// code for the menu
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const App = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen
},
LinksScreen: {
screen: LinksScreen
},
SettingsScreen: {
screen: SettingsScreen
}
},
{
drawerWidth: 300
});
export default createAppContainer(App);
// HomeScreen.js
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
} from 'react-native';
import { WebBrowser } from 'expo';
import { DrawerNavigator } from 'react-native-navigation';
import { MonoText } from '../components/StyledText';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import Router from './MenuNavigator';
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: 'Vapeself 2',
};
render() {
const App = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
const MyApp = createAppContainer(App);
this.props.navigation.dispatch(DrawerActions.openDrawer());
return (
<Router/>
);
}
// LinkScreen.js
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { ExpoLinksView } from '#expo/samples';
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'Links',
};
render() {
return (
<ScrollView style={styles.container}>
{/* Go ahead and delete ExpoLinksView and replace it with your
* content, we just wanted to provide you with some helpful links */}
<ExpoLinksView />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff',
},
});
// SettingsScreen.js
import React from 'react';
import { ExpoConfigView } from '#expo/samples';
export default class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'app.json',
};
render() {
/* Go ahead and delete ExpoConfigView and replace it with your
* content, we just wanted to give you a quick view of your config */
return <ExpoConfigView />;
}
}
I don't know what happened because the code doesn't work, and i have this kind of error The component for route 'HomeScreen' must be a React component . But the thing is that its actually work with a TabNavigator. So i really don't understand.
Thank you in advance for the help.
I tried to set following
Highcharts.setOptions({ lang: { thousandsSep: ',' } });
Trying to set thousand separator as default is space.
Error TS2686: 'Highcharts' refers to a UMD global, but the current
file is a module. Consider adding an import instead.
I am using "highcharts": "^6.1.0".
import {Component, OnInit, ViewEncapsulation,Inject, ViewChild,ElementRef,AfterContentInit, OnDestroy, Input} from '#angular/core';
import { chart } from 'highcharts';
import { Race } from '../../../race';
import { BaseComponent } from '../../../base/base.component';
#Component({
selector: 'nc-mobility',
templateUrl: './mobility.component.html',
styleUrls: ['./mobility.component.css']
})
export class MobilityComponent extends BaseComponent implements OnInit, AfterContentInit, OnDestroy {
#Input() mobility: Array<any>;
// highchart declarations
#ViewChild('mobilityDist') chartTarget: ElementRef;
chart: Highcharts.ChartObject;
constructor() { super(); }
ngOnInit() {
}
ngAfterContentInit() {
const options: Highcharts.Options = {
chart: {
type: 'column'
},
series: this.mobility.map(x => {
return { name: x.name, data: [x.value] };
}),
credits: {
enabled: false
}
};
this.chart = chart(this.chartTarget.nativeElement, options);
}
ngOnDestroy() {
this.chart = null;
}
}
Error occurs because you import only one function from Highcharts, by this:
import { chart } from 'highcharts';
In order to use setOptions, you need to also import this function or import whole Highcharts module, just like that:
import * as Highcharts from 'highcharts';
// import Highcharts
import Highcharts from "highcharts";
//set the options in your constructor
Highcharts.setOptions({
lang: {
thousandsSep: ","
}
});
hello every one I have an application running locally with RoR everything works fine in the backend, also I can see the Json in Postman
http://127.0.0.1:3000/api/v1/articles
[
{
"id": 1,
"title": "Barack Obama",
"description": "Sabias que? el era muy pobre",
"avatar_content_type": "/system/articles/avatars/000/000/001/original/user-two.png?1509755893"
}
]
and also in my mobile emulator I can see the Title and description that's mean everything works fine. BUT I can't see the image :/ some advice?
ProductList.js
// step 1: import libraries
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import Product from './Product';
export default class ProductList extends Component {
state = {
products: []
}
componentDidMount() {
return fetch('http://MYIP:3000/api/v1/articles')
.then((response) => response.json())
.then((responseJson) => {
this.setState({products: responseJson})
})
}
render() {
var productList = this.state.products.map(function(item) {
return (
<Product title = { item.title }
description = { item.description }
image_url = { item.avatar_content_type }
key = { item.id }/>
)
})
return (
<ScrollView>
{ productList }
</ScrollView>
);
}
}
Product.js
// step 1: import libraries
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, Image } from 'react-native';
// step 2: create component
export default class Product extends Component {
render() {
return (
<View>
<Image source={{uri: this.props.image_url }} style={{width: 60,height: 60,}}/>
<Text style = { style.textStyle }>{ this.props.title }</Text>
<Text style = { style.textStyle }>{ this.props.description }</Text>
</View>
);
}
}
const style = StyleSheet.create({
textStyle: {
fontSize: 20,
padding: 20
},
amountStyle: {
fontSize: 15,
paddingLeft: 20
}
})
I dont get exceptions or something similar, I'm not just be able to see the Image in my mobile emulator
It may be because It is empty during the first render as you are trying to perform an asynchronous operation
So what you could do is u can check by giving a condition I normally do it with lodash using _.isEmpty method
try this:
<Image source={{uri: (_.isEmpty(this.props.image_url) ? null : this.props.image_url) }}