Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
exit: {
x: 1000,
opacity: 0,
delay: 800,
staggerChildren: 50,
transition: {
opacity: {
duration: animationTimings.gridLeave,
ease: easing.linear
},
x: { type: 'spring' }
}
}
}
const Grid = posed.ul(GridProps)
const itemProps = {
preEnter: {
y: -30,
opacity: 0,
transition: { type: 'spring' }
},
enter: {
y: 0,
opacity: 1,
transition: { type: 'spring' }
},
exit: {
y: -30,
opacity: 0,
transition: { type: 'spring' }
staggerChildren: 60
}
};
const itemProps = {
closed: {
y: 20,
opacity: 0
},
open: {
y: 0,
opacity: 1
}
};
const Sidepanel = styled(posed.ul(sidepanelProps))`
background: ${color.blue};
width: 300px;
padding: 20px;
`;
const Item = styled(posed.li(itemProps))`
width: 100%;
border-radius: 5px;
height: 35px;
background: ${color.white};
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
`;
`;
const sidepanelProps = {};
const itemProps = {
closed: {
y: 20,
opacity: 0
},
open: {
y: 0,
opacity: 1
}
};
const Sidepanel = styled(posed.ul(sidepanelProps))`
width: 300px;
padding: 20px;
`;
const Item = styled(posed.li())`
width: 100%;
border-radius: 5px;
height: 35px;
background: ${color.white};
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&[data-key='0'] {
import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import Img from 'gatsby-image'
import posed from 'react-pose'
import { appear, slideUp, staggerChildren } from '../../styles/poses'
const List = styled(posed.ul(staggerChildren))`
width: 100%;
display: inline-flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0 0 -1.5rem 0;
@media screen and (min-width: ${props => props.theme.responsive.medium}) {
padding: 1rem 0;
margin: 0;
flex-flow: column;
justify-content: center;
width: 50%;
min-height: calc(100vh - 8rem);
}
`
const Overflow = styled.span`
id={tag.id}
aria-selected={tag.selected}>
{tag.selected ? : }
<span>{tag.val}</span>
)
}
const FilterDisplaySpan = posed.span({
initial: {
width: props => props.wiidth || 0,
height: props => props.heiight,
},
})
const ListIdBox = posed.ul({
expanded: {
height: "auto",
},
hidden: {
height: props => props.heiight,
},
})
export const FilterListbox = ({ tags = [], className, onFilter }) => {
const {
ref: listBoxRef,
active,
values,
selected,
selectIndex,
import React, { memo, useState, useEffect } from 'react';
import posed, { PoseGroup } from 'react-pose';
import IntlRelativeFormat from 'intl-relativeformat';
import '../../assets/style/commentsList.css';
const Ul = posed.ul({});
const Li = posed.li({
enter: { opacity: 1 },
exit: { opacity: 0 }
});
const rf = new IntlRelativeFormat();
let ws;
export const CommentsList = memo(() => {
const [comments, updateComments] = useState([]);
useEffect(() => {
if (!ws) {
ws = new WebSocket(`ws://${window.location.hostname}:${process.env.SERVER_PORT}`);
ws.onmessage = ({ data }) => {
const fetchedComments = JSON.parse(data);
onClick={e => expanded && selectIndex(index, e, e.type)}
id={tag.id}
aria-selected={tag.selected}>
<span>{tag.val}</span>
)
}
const FilterDisplaySpan = posed.span({
initial: {
width: props => props.wiidth || 0,
height: props => props.heiight,
},
})
const ListIdBox = posed.ul({
expanded: {
height: "auto",
},
hidden: {
height: props => props.heiight,
},
})
/**
*
* @param valArr
* @param {React.ReactElement} childComp
* @param {'single' | 'mutli' | false} allowSelect
* @param onPress
* @returns {*}