Similar to Access React Context outside of render function but I am looking to add a way of extending Alert.alert so that it will use the color scheme from theme.
const { colorScheme } = useTheming();
...
Alert.alert(t`logout`, "Are you sure you want to logout?", [
{
text: "No",
},
{
style: "destructive",
text: "Yes",
onPress: logoutAsync,
},
], {
userInterfaceStyle: colorScheme
});
I just want it so that the color scheme does not need to be added in.
I started with
import { Alert as RNAlert } from 'react-native'
export class Alert implements RNAlert {
static alert(...) {
// how do I get the data from the context?
}
static prompt(...) {
}
}
This isn't a proper answer yet since I don't wrap the Alert object, but this is the closest I have gotten.
import { useCallback } from 'react';
import { Alert as RNAlert, AlertButton, AlertOptions } from 'react-native';
import { useTheming } from "./ThemeContext";
export function useAlert(): RNAlert {
const { colorScheme } = useTheming();
const alert = useCallback((title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions): void => {
const newOptions = { userInterfaceStyle: options?.userInterfaceStyle ?? colorScheme, ...options }
RNAlert.alert(title, message, buttons, newOptions);
}, [colorScheme])
return { alert, prompt: RNAlert.prompt };
}
The key thing to watch out for is when you're using it with useCallback you have to remember to add the new alert to the dependency list.
const { alert } = useAlert();
...
const handleLogout = useCallback(() => {
alert(t`logout`, "Are you sure you want to logout?", [
{
text: "No",
},
{
text: "Yes",
onPress: logoutAsync,
},
]);
}, [logoutAsync, alert]);
I've used vue create to setup a new Vue project, and have installed Storybook - all working correctly.
I have then installed storybook-addon-designs and followed the readme on adding to my story, but it gives me the following error in my console: h is not defined.
Here's my files:
stories/2-PageTitle.stories.js:
import { withDesign } from 'storybook-addon-designs'
import {Button} from '../src/components/Button'
export default {
title: 'My stories',
component: Button,
decorators: [withDesign]
}
export const myStory = () => <Button>Hello, World!</Button>
myStory.story = {
name: 'My awesome story',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
}
}
}
babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
.storybook/main.js:
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['storybook-addon-designs']
};
src/components/Button.vue:
<template>
<button>
{{ label }}
</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
background: red;
}
</style>
Can anyone see what I'm doing wrong here?
Full code here (I'd of done a Sandbox but because it uses Storybook this seems like a better way?): https://github.com/A7DC/storybookvueaddonstest
The author of storybook-addon-designs suggests the following:
You have to replace the export
const myStory = () => <Button>Hello, World!</Button>
You need to change this line (React story) to Vue's one. For example,
export const myStory = () => ({
components: { Button },
template: '<Button>Hello, World!</Button>'
})
Updated answer -
import { withDesign } from "storybook-addon-designs";
import Button from "../src/components/Button";
export default {
title: "My Stories",
decorators: [withDesign],
};
export const myStory = () => ({
components: { Button },
template: "<Button> Hello, World!</Button >",
});
myStory.story = {
name: "My awesome story",
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
},
},
};
I use asp.net core and react for a project. Everyting is happening in Visual Studio. I make a call to the server to bring some appoinment(this is working, I checked with debuger and I have an element) but my problem is when I try to display the name of the item that was brought.
{this.state.appoinmentList.map(emp => emp.Name)} ,
here is the problem. The app opens but it won't show the name and with the debuger when I hover over 'emp' it shows:
"emp is not defined"
and
"ReferenceError: emp is not defined
How can I fix the problem?Thank you.
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '#syncfusion/ej2-react-schedule';
import { RouteComponentProps, withRouter } from 'react-router';
import { connect } from 'react-redux';
import { Ajax } from '#syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '#syncfusion/ej2-data';
import { Data } from '#syncfusion/ej2-schedule/src/schedule/actions/data';
interface ScheduleDataState {
appoinmentList: ScheduleData[],
loading: boolean;
value: string
}
export default class Scheduler extends React.Component<RouteComponentProps<{}>, ScheduleDataState> {
constructor() {
super();
this.state = { appoinmentList: [], loading: true, value: "yes" };
fetch('api/Schedule/GetAll')
.then(response => response.json() as Promise<ScheduleData[]>)
.then(data => {
this.setState({ appoinmentList: data, loading: false,value: "yes" });
});
}
render() {
return <p>
{this.state.appoinmentList.map(emp => emp.Name)}
{ this.state.value }
</p>
}
}
export class ScheduleData {
Id: number = 0;
Name: string = "";
SecondName: string = "";
DateStart: string = "";
DataStop: string = "";
Notes: string = "";
Status: string = "";
}
I want to display data from API with highcharts but still get an error because highchart config declared outside the class app and data fetched inside class app.
It works if use static data,
here is the example from static data link.
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';
const data = [
[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000,
21.66], [1221091200000, 21.81], [1221177600000, 21.28],
[1221436800000, 20.05], [1221523200000, 19.98], [1221609600000,
18.26], [1221696000000, 19.16], [1221782400000, 20.13],
[1222041600000, 18.72], [1222128000000, 18.12], [1222214400000,
18.39], [1222300800000, 18.85], [1222387200000, 18.32],
[1222646400000, 15.04], [1222732800000, 16.24], [1222819200000,
15.59], [1222905600000, 14.3], [1222992000000, 13.87],
[1223251200000, 14.02], [1223337600000, 12.74], [1223424000000,
12.83], [1223510400000, 12.68], [1223596800000, 13.8],
[1223856000000, 15.75], [1223942400000, 14.87], [1224028800000,
13.99], [1224115200000, 14.56], [1224201600000, 13.91],
[1224460800000, 14.06], [1224547200000, 13.07], [1224633600000,
13.84], [1224720000000, 14.03], [1224806400000, 13.77],
[1225065600000, 13.16], [1225152000000, 14.27], [1225238400000,
14.94], [1225324800000, 15.86], [1225411200000, 15.37],
[1225670400000, 15.28], [1225756800000, 15.86], [1225843200000,
14.76], [1225929600000, 14.16], [1226016000000, 14.03],
[1226275200000, 13.7], [1226361600000, 13.54], [1226448000000,
12.87], [1226534400000, 13.78], [1226620800000, 12.89],
[1226880000000, 12.59], [1226966400000, 12.84], [1227052800000,
12.33], [1227139200000, 11.5], [1227225600000, 11.8],
[1227484800000, 13.28], [1227571200000, 12.97], [1227657600000,
13.57], [1227830400000, 13.24], [1228089600000, 12.7],
[1228176000000, 13.21], [1228262400000, 13.7], [1228348800000,
13.06], [1228435200000, 13.43], [1228694400000, 14.25],
[1228780800000, 14.29], [1228867200000, 14.03], [1228953600000,
13.57], [1229040000000, 14.04], [1229299200000, 13.54]
];
const config = {
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
};
class App extends Component {
render() {
return (
<div className="App" />
);
}
}
render(<ReactHighstock config={config}/>,
document.getElementById('root'));
With example above, two variable data and config placed outside the class app, so i think it's not problem.
But if i want to fetch data from API, the data placed inside the class app and config still outside class app.
So i get an error 'data is not defined'
here is the link
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';
const config = {
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
};
class App extends Component {
constructor() {
super();
this.state = {
dataResults: [],
}
}
componentDidMount() {
this.getData();
}
getData = () => {
fetch('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json')
.then(res => res.json())
.then(data => {
this.setState({
dataResults: data
});
});
}
render() {
return (
<div className="App" />
);
}
}
render(<ReactHighstock config={config}/>,
document.getElementById('root'));
How to use highcharts with fetched data from API?
Your App component is currently not part of your DOM as you're rendering ReactHighstock as a root component. One solution would be to render the chart inside the App component and pass the data dynamically:
const getConfig = data => ({
rangeSelector: {
selected: 1
},
title: {
text: 'aAAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
class App extends Component {
constructor() {
super();
this.state = {
dataResults: [],
}
}
componentDidMount() {
this.getData();
}
getData = () => {
fetch('your_endpoint_url')
.then(res => res.json())
.then(data => {
this.setState({
dataResults: data
});
});
}
render() {
const { dataResults } = this.state;
const chartConfig = getConfig(dataResults);
return (
<ReactHighstock config={chartConfig}/>
);
}
}
render(<App/>,
document.getElementById('root'));
You should of course handle a use case where the data has not been fetched yet and display a placeholder.
I'm using a reactstrap dashboard theme
The side menus are populated by an array of menu objects.
I wish to:
populate the array from XHR
set the raw data blob as a global variable for the rest of the app to use.
Here is what I'm trying ...
class ClusterItems extends Component {
constructor (props) {
super(props)
this.state = {
apiurl: ' ',
clusterItems: [
{
name: 'Clusters',
title: true,
wrapper: { element: '', attributes: {} },
class: ''
},
{
divider: true
}
]
}
}
componentDidMount () {
const apiurl = 'http://validapiurl/clusters'
axios.get(apiurl).then(results => (
this.state.clusterItems.push({
icon: 'icon-layers',
name: item.clusterName,
url: '/clusters' + item.clusterName + '/instances'
})
))
}
}
The part that I'm missing is how to export this.state.clusterItems as an ARRAY and how to do the global export of the data blob clusters.