How to use the react-pose.polyline function in react-pose

To help you get started, we’ve selected a few react-pose examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github beaverbuilder / assistant / src / original-ui / ui / components / panel-parts / index.js View on Github external
const classes = classname( {
		'fl-asst-screen-footer': true,
	} )
	return (
		<div>
			<div>{children}</div>
		</div>
	)
}

const MoreButton = posed.button( {
	hoverable: true,
	focusable: true,
	pressable: true,
} )
const MoreButtonPath = posed.polyline( {
	init: {
		points: '2,4 25,4 48,4',
	},
	hover: {
		points: ( { isExpanded } ) =&gt; isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
	},
	press: {
		points: ( { isExpanded } ) =&gt; isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
	},
} )

const Expander = posed.div( {
	init: {
		overflow: 'hidden',
	},
	open: {
github beaverbuilder / assistant / src / front / ui / components / panel-parts / index.js View on Github external
const classes = classname( {
		'fl-asst-screen-footer': true,
	} )
	return (
		<div>
			<div>{children}</div>
		</div>
	)
}

const MoreButton = posed.button( {
	hoverable: true,
	focusable: true,
	pressable: true,
} )
const MoreButtonPath = posed.polyline( {
	init: {
		points: '2,4 25,4 48,4',
	},
	hover: {
		points: ( { isExpanded } ) =&gt; isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
	},
	press: {
		points: ( { isExpanded } ) =&gt; isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
	},
} )

const Expander = posed.div( {
	init: {
		overflow: 'hidden',
	},
	open: {