canvas / components / basic-elements / block-tabs / edit.jsx

edit.jsx in Canvas 2.4.9, at components/basic-elements/block-tabs/edit.jsx

186 lines 3.8 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames';
5
6	/**
7	* WordPress dependencies
8	*/
9	const { __ } = wp.i18n;
10
11	const {
12	Component,
13	Fragment,
14	} = wp.element;
15
16	const {
17	PanelBody,
18	RangeControl,
19	} = wp.components;
20
21	const {
22	InspectorControls,
23	InnerBlocks,
24	RichText,
25	} = wp.blockEditor;
26
27	/**
28	* Component
29	*/
30	export default class TabsBlockEdit extends Component {
31	constructor() {
32	super( ...arguments );
33
34	this.state = {
35	// fix for WP 5.2
36	// styles control generates error
37	showInnerBlocks: !! this.props.clientId,
38	};
39
40	this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
41	}
42
43	/**
44	* Returns the template configuration for a given section layout.
45	*
46	* @return {Object[]} Layout configuration.
47	*/
48	getLayoutTemplate() {
49	const {
50	attributes,
51	} = this.props;
52
53	let {
54	tabsData,
55	} = attributes;
56
57	const result = [];
58
59	for ( let k = 0; k < tabsData.length; k++ ) {
60	result.push( [
61	'canvas/tab',
62	{},
63	] );
64	}
65
66	return result;
67	}
68
69	render() {
70	const {
71	setAttributes,
72	} = this.props;
73
74	let {
75	className,
76	} = this.props;
77
78	const {
79	tabActive,
80	tabsData,
81	tabsPosition,
82	canvasClassName,
83	} = this.props.attributes;
84
85	className = classnames(
86	'cnvs-block-tabs',
87	`cnvs-block-tabs-${ tabsData.length }`,
88	'vertical' === tabsPosition ? `cnvs-block-tabs-${ tabsPosition }` : '',
89	canvasClassName,
90	className,
91	);
92
93	return (
94	<Fragment>
95	<InspectorControls>
96	<PanelBody>
97	<RangeControl
98	label={ __( 'Tabs' ) }
99	value={ tabsData.length }
100	min={ 1 }
101	max={ 20 }
102	onChange={ ( val ) => {
103	const newTabsData = [];
104
105	for ( let k = 0; k < val; k += 1 ) {
106	if ( tabsData[ k ] ) {
107	newTabsData.push( tabsData[ k ] );
108	} else {
109	newTabsData.push( `Tab ${ k + 1 }` );
110	}
111	}
112
113	setAttributes( { tabsData: newTabsData } );
114	} }
115	/>
116	</PanelBody>
117	</InspectorControls>
118	<div className={ className }>
119	<div className="cnvs-block-tabs-buttons">
120	{
121	tabsData.map( ( title, i ) => {
122	const selected = tabActive === i;
123
124	return (
125	<div
126	className={
127	classnames(
128	'cnvs-block-tabs-button',
129	{
130	'cnvs-block-tabs-button-active': selected,
131	}
132	)
133	}
134	key={ `tab_button_${ i }` }
135	onClick={ () => setAttributes( { tabActive: i } ) }
136	>
137	<RichText
138	tagName="span"
139	placeholder={ __( 'Tab label' ) }
140	onChange={ ( value ) => {
141	if ( tabsData[ i ] ) {
142	const newTabsData = tabsData.map( ( oldTabData, newIndex ) => {
143	if ( i === newIndex ) {
144	return value;
145	}
146
147	return oldTabData;
148	} );
149
150	setAttributes( {
151	tabsData: newTabsData,
152	} );
153	}
154	} }
155	keepPlaceholderOnFocus
156	/>
157	</div>
158	);
159	} )
160	}
161	</div>
162	<div className="cnvs-block-tabs-content">
163	{ this.state.showInnerBlocks ? (
164	<InnerBlocks
165	template={ this.getLayoutTemplate() }
166	templateLock="all"
167	allowedBlocks={ [ 'canvas/tab' ] }
168	/>
169	) : __( 'Tab content' ) }
170	</div>
171	</div>
172	<style>
173	{ `
174	[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
175	display: none;
176	}
177	[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ tabActive + 1 }) {
178	display: block;
179	}
180	` }
181	</style>
182	</Fragment>
183	);
184	}
185	}
186