I'm trying to make a view like Firebase's console with React and material-ui.
How can I build a Drawer that will automatically close when view(browser) width is decreasing.
Quite easy, you can hook up the listener on resize event on your react class:
var RootPage = React.createClass({
render: function() {
return <Drawer refs={'drawer'} />;
},
// we trigger our drawer here
componentWillUpdate: function(nextProp, nextState) {
if(nextState.width < this.state.width) {
this.refs.drawer.open = false;
}
},
windowOnResize: function() {
var width = $(window).width();
this.setState({ width: width });
},
componentWillMount: function() {
this.windowOnResize();
},
componentDidMount: function() {
window.addEventListener("resize", this.windowOnResize);
},
componentWillUnmount: function() {
window.removeEventListener("resize", this.windowOnResize);
}
});
Related
For react native application navigation I use react-native-navigation v2 here I've created navigation with bottomTabs. Here is the navigation handler
import { Navigation } from "react-native-navigation";
import { width, height } from "../utils/screenResolution";
import { bottomTabIcon, topBarOpts } from "../components";
const sideBarWidth = width * 0.65;
export const goToAuth = () =>
Navigation.setRoot({
root: {
stack: {
id: "AuthNav",
children: [
{
component: {
name: "SignInScreen",
options: {
topBar: { visible: false, height: 0 }
}
}
}
]
}
}
});
export const goHome = async () => {
let icon1 = await bottomTabIcon("CollectionScreen", "Collection", "archive");
let icon2 = await bottomTabIcon("MainScreen", "Home", "home");
let icon3 = await bottomTabIcon("CaptureScreen", "Capture", "camera");
Navigation.setRoot({
root: {
sideMenu: {
right: {
component: {
name: "SideBar"
}
},
center: {
bottomTabs: {
id: "AppNav",
children: [icon1, icon2, icon3]
}
},
options: {
sideMenu: {
right: {
width: sideBarWidth
}
}
}
}
}
});
Navigation.mergeOptions("MainScreen", {
bottomTabs: {
currentTabIndex: 1
}
});
};
Icons tab creating with this bottomTabIcon function.
import Icon from "react-native-vector-icons/FontAwesome";
import { topBarOpts } from "./";
import { PRIMARY, BOTTOM_TAB_BACKGROUND, TAB_ICON } from "../../assets/color";
let bottomTabIcon = async (name, text, iconName) => {
let icon = {
stack: {
children: [
{
component: {
name: name,
id: name,
options: {
bottomTab: {
text: text,
fontSize: 12,
selectedIconColor: PRIMARY,
iconColor: TAB_ICON,
icon: await Icon.getImageSource(iconName, 20)
}
}
}
}
]
}
};
if (name === "CaptureScreen") {
icon.stack.children[0].component.options.bottomTabs = {
visible: false,
drawBehind: true,
animate: true
};
icon.stack.children[0].component.options.topBar = {
visible: false,
height: 0
};
} else {
icon.stack.children[0].component.options.bottomTabs = {
backgroundColor: BOTTOM_TAB_BACKGROUND
};
icon.stack.children[0].component.options.topBar = await topBarOpts("Example");
}
return icon;
};
export { bottomTabIcon };
Here is the problem, when user logging in application,its asking for permissions (camera,audio etc.) in MainScreen I want to do that in specific screen,after that I find out that all screens in bottomTabs mounted.So if I call something to do in componentDidMount in CaptureScreen it will work in MainScreen.How I can solve this part? I am pretty new in react-native so something you can find weird in this code.Thanks for help and for attention.
Have the permission calls only in did mount of the specific screens or in the child screen where it is needed not in the parent screen or in navigators.
In your case you are calling them by taking the route index in the react navigation. Add the permission code on the child screen or where the permissions are required and they will start working.
I need to stop the video when the slide is changed. The current code reacts to changing the variable, but does not stop the video. I use Clappr ^0.3.3, Vue-cli ^3.5.0 and Swiper ^4.5.0.
I change the boolean value to use it for the trigger in the player:
data: () => ({
slider_is_move: false,
}),
After request:
.then(() => {
// init slider
new Swiper('.content__slider', {
// Note: I removed extra options
on: {
slideChange: function () {
this.slider_is_move = true; // if slide is change
setTimeout(() => {
this.slider_is_move = false; // set the previous value
}, 1500);
}
}
});
// init clappr (video player)
if ( document.querySelector('.content-video') ) {
for (let i = 0; i < this.project_videos.length; i++) {
new Clappr.Player({
source: '/storage/' + this.project_videos[i],
parentId: '#container_' + (this.project_images.length + i),
mute: true,
width: document.querySelector('.content-item').offsetWidth,
height: document.querySelector('.content-item').offsetHeight,
events: {
onPlay: () => {
setInterval(() => {
if (this.slider_is_move === true) {
this.pause();
}
}, 1000);
}
}
});
}
}
});
If I add a console.log(), the code will work as it should, but it will not stop the video.
onPlay: () => {
setInterval(() => {
if (this.slider_is_move === true) {
this.pause();
}
}, 1000);
}
To make the video stop when you change the slide, you need to add a few lines in the code:
add name to object
let player_video = new Clappr.Player...
and pause it
player_video.pause();
You should watch the data attribute slider_is_move, and react to any changes in the state.
watch: {
slider_is_move: {
handler(nowMoving) {
if (nowMoving) {
this.pause();
}
},
}
}
I'm using the electron-vue boilerplate, and I want to make my mainWindow a fullScreen after clicking a button.
Electron Window API: electron.atom.io/docs/api/browser-window
HTML:
<button #click="setFullScreen">Switch to Full Screen</button>
Vue:
export default {
name: 'mainComponent',
methods: {
setFullScreen: function() {
mainWindow.setFullScreen(true);
}
}
This is not working. How can I use the Electron API in electron-vue?
and the index.js:
'use strict'
import { app, BrowserWindow } from 'electron'
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:${require('../../../config').port}`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 728,
width: 1024,
fullscreen: false,
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
// eslint-disable-next-line no-console
console.log('mainWindow opened')
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
you will find it as it is in electron-Vue
the picture shows How the Structure of the folder
enter image description here
mainWindow is not available in your Vue code because it is defined in your main process.
In your single file component, however, you can import remote from electron, where you can get access to the current window. So your code would look something like this.
const {remote} = require("electron")
export default {
name: 'mainComponent',
methods: {
setFullScreen: function() {
remote.getCurrentWindow().setFullScreen(true);
}
}
}
I'm trying to use WebView in my react-native app (Android).
When i press home button and when start app again webview doesn't save his state.
I read some articles and my code now is:
var freetime = React.createClass({
getInitialState: function() {
return {
url: DEFAULT_URL,
backButtonEnabled: false,
forwardButtonEnabled: false,
loading: true,
scalesPageToFit: true,
};
},
render: function() {
return(
<WebView
url={this.state.url}
onNavigationStateChange={this.onNavStateChanged}/>
);
},
onNavStateChanged: function(navState) {
console.log("Url: " + navState.url);
console.log("Source: " + navState.source);
this.setState({
url: navState.url,
status: navState.title,
scalesPageToFit: true
});
}
});
But it didn't work too.
How to modify the state in the onLeftButtonPress?Because I need to click to do animation, show or hide me is stored in the state
_getRoute(component) {
var com = new component();
return {
component: component,
title: com.getNavTitle(),
passProps: { myProp: 'foo' },
leftButtonIcon: com.getNavLeft().icon,
onLeftButtonPress: com.getNavLeft().onPress,
interactivePopGestureEnabled: true
};
}
getNavLeft() {
return {
icon: require('../Images/wo_de.png'),
onPress: () => {
console.log(this);
this.setState({leftShow: true});
Animated.timing( // Uses easing functions
this.state.leftWidthAnim, // The value to drive
{toValue: 0} // Configuration
).start();
}
};
}