I have an application created with create-react-app. By default it seems to check that object keys are sorted alphabetically. This is not too bad when I'm typing the code myself, but it's crazy when I copy'n'paste from other sources. Here's an example:
const styles = theme => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9
}
},
hide: {
display: 'none'
},
menuButton: {
marginLeft: 12,
marginRight: 36
},
root: {
flexGrow: 1,
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex'
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar
}
});
I sorted the first level keys but it seems to check the nested ones too! Now I'm getting
C:/Source/portal/src/components/MenuAppBar.js
(19,5): The key 'transition' is not sorted alphabetically
I can't seem to find a way to enable the JS linting. There were hints about disabling tslint but I'm not using Typescript in this case.
I am using VS Code and have tried Sort JS object keys as well as Sort JSON objects. Unfortunately neither of them sort nested keys.
/* eslint sort-keys: 0 */
Add this on the top of the styles file
Related
I see the following example JSX code:
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
and I don't understand what is doing.
So I used babel to translate and get:
const AppBar = styled(MuiAppBar, {
shouldForwardProp: prop => prop !== 'open'
}) < AppBarProps > (({
theme,
open
}) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
})
}));
What does this ... < AppBarProps > ... mean? (The rest I I understand just fine)
Sorry if this seems like the dummest question ever, but can't imagine what is going on here.
It's a way to declare generic type parameter in typescript. styled returns a HOC that creates a component with the styles attached. I'll breakdown the code to make it more easier to digest:
const hoc = styled(MuiComponent)
// StyledMuiComponent now can accept the props with type MuiComponentProps
const StyledMuiComponent = hoc<MuiComponentProps>(styles)
Is there any way to chain animations in anime.js or have queues / groups of animations that I can wait for in order to proceed with other animations?
Each animation with anime returns a promise, so you can use async/await in combination with Promise.all, do remember, though, Promise.all makes it so that all animations run concurrently. For example, let's say you want 3 animations all to run at the same time, then, after that group is done, do another animation:
async function animateLockAndBackground() {
const bigLockAnimation = anime({
targets: '#big-lock',
strokeDashoffset: [0, 5],
easing: 'easeInOutSine',
duration: 250,
easing: 'easeInSine'
}).finished;
const lockLineAnimation = anime({
targets: '#lock-line',
strokeDashoffset: [0, 3],
translateY: [{
value: '-2px',
duration: 350,
easing: 'easeOutExpo'
},
{
value: '2px',
duration: 350,
easing: 'easeOutExpo'
},
{
value: '-2px',
duration: 350,
easing: 'easeOutExpo'
},
],
}).finished;
const innerCircleAnimation = anime({
targets: '#inner-circle',
translateY: [{
value: '-1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: '1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: '-1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: 0,
duration: 250,
easing: 'easeOutExpo'
},
],
}).finished;
await Promise.all([bigLockAnimation, lockLineAnimation, innerCircleAnimation]);
}
animateLockAndBackground().then(() => {
console.log('First animation finished.');
anime({
targets: '.plugins-not-installed-text',
translateY: [{
value: '10px',
duration: 750
}]
});
anime({
targets: '#lock-wrapper',
translateY: [{
value: '-10px',
duration: 750
}]
});
anime({
targets: '#plugins-not-installed-screen',
opacity: 0,
duration: 500,
easing: 'linear'
}).finished.then(() => {
console.log('Second animation finished.');
});
});
#plugins-not-installed-screen {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
#plugins-not-installed-screen .upper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
padding: 24px 48px;
background-image: url('../Images/component.png');
background-repeat: repeat;
}
.plugins-not-installed-text {
font-size: 15px;
text-align: center;
}
#lock {
display: block;
width: 50px;
height: 65px;
}
#plugins-not-installed-screen #lock {}
#plugins-not-installed-screen #big-lock {
stroke-dasharray: 61 62;
stroke-dashoffset: 5;
/* go to 5 */
}
#plugins-not-installed-screen #lock-line {
stroke-dasharray: 31 33;
stroke-dashoffset: 0;
/* go to 3 */
}
#components-to-install-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.install-component-individual {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/animejs#3.1.0/lib/anime.min.js"></script>
<div id="plugins-not-installed-screen" class="">
<div class="upper">
<div id="lock-wrapper">
<svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">
<style type="text/css">
#big-lock{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#inner-circle{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
#lock-line{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path id="big-lock" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9
c0.1,0,0.2,0,0.3,0c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>
<circle id="inner-circle" cx="12.7" cy="21.9" r="2.9"/>
<path id="lock-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>
</svg>
</div>
<h5 class="plugins-not-installed-text">Plugins not installed.</h5>
</div>
</div>
What, then, if you want to, inside that function, have the lock-line animate at the same time the 2 other elements are animating, so instead of 3 animation timelines, you only have 2? Here:
async function animateLockAndBackground() {
const bigLockAnimation = anime({
targets: '#big-lock',
strokeDashoffset: [0, 5],
easing: 'easeInOutSine',
duration: 250,
easing: 'easeInSine'
}).finished;
const innerCircleAnimation = anime({
targets: '#inner-circle',
translateY: [
{value: '-1px', duration: 250, easing: 'easeOutExpo'},
{value: '1px', duration: 250, easing: 'easeOutExpo'},
{value: '-1px', duration: 250, easing: 'easeOutExpo'},
{value: 0, duration: 250, easing: 'easeOutExpo'},
],
}).finished;
await Promise.all([bigLockAnimation, innerCircleAnimation]);
}
animateLockAndBackground().then(() => {
return anime({
targets: '#lock-line',
strokeDashoffset: [0, 3],
translateY: [
{value: '-2px', duration: 350, easing: 'easeOutExpo'},
{value: '2px', duration: 350, easing: 'easeOutExpo'},
{value: '-2px', duration: 350, easing: 'easeOutExpo'},
],
}).finished;
}).then(() => {
anime({
targets: '.plugins-not-installed-text',
translateY: [
{value: '10px', duration: 750}
]
});
anime({
targets: '#lock-wrapper',
translateY: [
{value: '-10px', duration: 750}
]
});
anime({
targets: '#plugins-not-installed-screen',
opacity: 0,
duration: 500,
easing: 'linear'
});
});
We moved that lock-line animation outside of the original group, made it wait for the group, then whatever else comes after the lock-line animates after.
You should think about an animation as a simple promise that you can chain.
Try the timeline function: https://animejs.com/documentation/#timelineBasics
You can do all the promise stuff yourself if you want but anime already handles it so there really isn't any point in it. Making a timeline function chains animations together and you can even force it to before the previous animation finishes by adding a time to the .add function .add({ //your animation }, time) or relative offsets with .add({ //your animation }, -/+ = time) (*plus or minus not both)
Hey i am trying to render some cards like tinder so it works but only when i use data that is already in the project, when i try to use data that i get from firebase is don't show up cause it render the cards before getting the data from firebase so how can i do it ?
I tried with this.setstate but no changes
i get the data like this and set it in the array
componentWillMount() {
Users = [
]
var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
// key will be "ada" the first time and "alan" the second time
var key = childSnapshot.key;
// childData will be the actual contents of the child
var childData = childSnapshot.val();
Users.push({ id: key, uri: {uri: childData.photo} })
});
});
}
renderUsers = () => {
console.log(Users)
return Users.map((item, i) => {
if (i < this.state.currentIndex) {
return null
}
else if (i == this.state.currentIndex) {
return (
<Animated.View
{...this.PanResponder.panHandlers}
key={item.id} style={[this.rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}>
<Animated.View style={{ opacity: this.likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
<Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>
</Animated.View>
<Animated.View style={{ opacity: this.dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
<Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>
</Animated.View>
<Image
style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
source={item.uri} />
<Text>{item.id}</Text>
</Animated.View>
)
}
else {
return (
<Animated.View
key={item.id} style={[{
opacity: this.nextCardOpacity,
transform: [{ scale: this.nextCardScale }],
height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'
}]}>
<Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
<Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>
</Animated.View>
<Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
<Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>
</Animated.View>
<Image
style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
source={item.uri} />
<Text>{item.id}</Text>
</Animated.View>
)
}
}).reverse()
}
this function render the cards
Any async operation takes time until it resolves ... if you want to use setState to solve your issue ... here's how:
state = {
users: null,
};
componentDidMount() {
users = [];
const query = firebase
.database()
.ref('users')
.orderByKey();
query.once('value').then((snapshot) => {
// Here you users are available:
this.setState({ users });
});
}
render() {
const { users } = this.state;
if (!users) return null;
return users.map(...);
}
componentWillMount should not be used anymore
Look at this piece of code:
<script src="progressbar.js"></script>
<script>
var bar = new ProgressBar.Line(containera, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
bar.animate(1.0);
</script>
The above code selects element with class "containera" and does something with them. I want change my code so it will select bellow classes too:
containerb,containerc,containerd,containere,containerf
but I don't like to repeat my code for every class. I hope you help me :) Thank you.
Why don't you wrap your configuration in a function and call it for every container you have? Could work along those lines:
var yourContainers = ['containerA','containerB']
function createProgressbars = function(container){
return new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
}
yourContainers.forEach(function(container){
createProgressbars(container).animate(1.0);
});
I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.
With the following code it renders something like this.
Here is my code :
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
I'm new to styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)
Ok, solved my problem, if anyone is passing by here is the answer:
Just had to add left: 0, and top: 0, to the styles, and yes, I'm tired.
position: 'absolute',
left: 0,
top: 0,
The first step would be to add
position: 'absolute',
then if you want the element full width, add
left: 0,
right: 0,
then, if you want to put the element in the bottom, add
bottom: 0,
// don't need set top: 0
if you want to position the element at the top, replace bottom: 0 by top: 0
This solution worked for me:
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}