<commit_before>/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import Indicator from './indicator';
import { Reorderer } from '../';
import { STORY_PAGE_INNER_WIDTH } from '../../stories-editor/constants';
import './edit.css';

const PAGE_MARGIN = 20;

class EditorCarousel extends Component {
	constructor() {
		super( ...arguments );

		this.translateWrapper.bind( this );
	}

	translateWrapper() {
		const wrapper = document.querySelector( '.editor-writing-flow .editor-block-list__layout' );

		if ( ! wrapper ) {
			return;
		}

		if ( this.props.isReordering ) {
			wrapper.style.display = 'none';
		} else {
			wrapper.style.display = '';
			wrapper.style.transform = `translateX(calc(50% - ${ STORY_PAGE_INNER_WIDTH / 2 }px - ${ ( this.props.currentIndex ) * PAGE_MARGIN }px - ${ this.props.currentIndex * STORY_PAGE_INNER_WIDTH }px))`;
		}
	}

	componentDidMount() {
		this.translateWrapper();
	}<commit_msg>Extract variable<commit_after>/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { IconButton } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import Indicator from './indicator';
import { Reorderer } from '../';
import { STORY_PAGE_INNER_WIDTH } from '../../stories-editor/constants';
import './edit.css';

const PAGE_MARGIN = 20;

class EditorCarousel extends Component {
	constructor() {
		super( ...arguments );

		this.translateWrapper.bind( this );
	}

	translateWrapper() {
		const wrapper = document.querySelector( '.editor-writing-flow .editor-block-list__layout' );

		if ( ! wrapper ) {
			return;
		}

		const { currentIndex } = this.props;

		if ( this.props.isReordering ) {
			wrapper.style.display = 'none';
		} else {
			wrapper.style.display = '';
			wrapper.style.transform = `translateX(calc(50% - ${ STORY_PAGE_INNER_WIDTH / 2 }px - ${ ( currentIndex ) * PAGE_MARGIN }px - ${ currentIndex * STORY_PAGE_INNER_WIDTH }px))`;
		}
	}

	componentDidMount() {
		this.translateWrapper();
	}
{'fraction_non_alphanumeric': 0.15439034540158136, 'fraction_numerical': 0.005826050769870994, 'mean_word_length': 3.9465020576131686, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4034080', 'n_tokens_mistral': 802, 'n_tokens_neox': 731, 'n_words': 162}