woocommerce/plugins/woocommerce-admin/client/components/animation-slider/index.js

88 lines
2.2 KiB
JavaScript
Raw Normal View History

2018-07-18 03:00:20 +00:00
/** @format */
/**
* External dependencies
*/
import { Component, createRef } from '@wordpress/element';
import classnames from 'classnames';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.scss';
/**
* This component creates slideable content controlled by an animate prop to direct the contents to slide left or right.
* All other props are passed to `CSSTransition`. More info at http://reactcommunity.org/react-transition-group/css-transition
*/
2018-07-18 03:00:20 +00:00
class AnimationSlider extends Component {
constructor() {
super();
this.state = {
animate: null,
};
this.container = createRef();
this.onExited = this.onExited.bind( this );
}
onExited() {
const { onExited, focusOnChange } = this.props;
if ( onExited ) {
onExited();
}
if ( focusOnChange ) {
const focusable = this.container.current.querySelector(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
if ( focusable ) {
focusable.focus();
}
}
}
render() {
const { children, animationKey, animate } = this.props;
const containerClasses = classnames(
'woocommerce-slide-animation',
animate && `animate-${ animate }`
);
return (
<div className={ containerClasses } ref={ this.container }>
<TransitionGroup>
<CSSTransition
timeout={ 200 }
classNames="slide"
key={ animationKey }
{ ...this.props }
onExited={ this.onExited }
>
{ status => children( { status } ) }
</CSSTransition>
</TransitionGroup>
</div>
);
}
}
AnimationSlider.propTypes = {
/**
* A function returning rendered content with argument status, reflecting `CSSTransition` status.
*/
2018-07-18 03:00:20 +00:00
children: PropTypes.func.isRequired,
/**
* A unique identifier for each slideable page.
*/
2018-07-18 03:00:20 +00:00
animationKey: PropTypes.any.isRequired,
/**
* null, 'left', 'right', to designate which direction to slide on a change.
*/
2018-07-18 03:00:20 +00:00
animate: PropTypes.oneOf( [ null, 'left', 'right' ] ),
/**
* When set to true, the first focusable element will be focused after an animation has finished.
*/
2018-07-18 03:00:20 +00:00
focusOnChange: PropTypes.bool,
};
export default AnimationSlider;