AlkantarClanX12
Your IP : 18.119.192.2
/**
* JavaScript code for the "Edit" section integration of the "Table Options".
*
* @package TablePress
* @subpackage Views JavaScript
* @author Tobias Bäthge
* @since 3.0.0
*/
/**
* WordPress dependencies.
*/
import {
CheckboxControl,
FormTokenField,
__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
__experimentalNumberControl as NumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
SelectControl,
__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
} from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
/**
* Internal dependencies.
*/
import { initializeReactComponentInPortal } from '../common/react-loader';
const Section = ( { tableOptions, updateTableOptions } ) => {
return (
<VStack
spacing="16px"
style={ {
paddingTop: '6px',
} }
>
<table className="tablepress-postbox-table fixed">
<tbody>
<tr>
<th className="column-1" scope="row">{ __( 'Table Header', 'tablepress' ) }:</th>
<td className="column-2">
<label htmlFor="option-table_head">
<HStack alignment="left">
{
createInterpolateElement(
__( 'The first <input /> rows are the table header.', 'tablepress' ),
{
input: (
<NumberControl
id="option-table_head"
title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
isDragEnabled={ false }
value={ tableOptions.table_head }
onChange={ ( table_head ) => {
table_head = '' !== table_head ? parseInt( table_head, 10 ) : 0;
updateTableOptions( { table_head } );
} }
min={ 0 }
max={ 9 }
required={ true }
style={ {
width: '65px',
} }
/>
),
},
)
}
</HStack>
</label>
</td>
</tr>
<tr className="bottom-border">
<th className="column-1" scope="row">{ __( 'Table Footer', 'tablepress' ) }:</th>
<td className="column-2">
<label htmlFor="option-table_foot">
<HStack alignment="left">
{
createInterpolateElement(
__( 'The last <input /> rows are the table footer.', 'tablepress' ),
{
input: (
<NumberControl
id="option-table_foot"
title={ __( 'This field must contain a non-negative number.', 'tablepress' ) }
isDragEnabled={ false }
value={ tableOptions.table_foot }
onChange={ ( table_foot ) => {
table_foot = '' !== table_foot ? parseInt( table_foot, 10 ) : 0;
updateTableOptions( { table_foot } );
} }
min={ 0 }
max={ 9 }
required={ true }
style={ {
width: '65px',
} }
/>
),
},
)
}
</HStack>
</label>
</td>
</tr>
<tr className="top-border">
<th className="column-1" scope="row">{ __( 'Alternating Row Colors', 'tablepress' ) }:</th>
<td className="column-2">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'The background colors of consecutive rows shall alternate.', 'tablepress' ) }
checked={ tableOptions.alternating_row_colors }
onChange={ ( alternating_row_colors ) => updateTableOptions( { alternating_row_colors } ) }
/>
</td>
</tr>
<tr className="bottom-border">
<th className="column-1" scope="row">{ __( 'Row Hover Highlighting', 'tablepress' ) }:</th>
<td className="column-2">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Highlight a row while the mouse cursor hovers above it by changing its background color.', 'tablepress' ) }
checked={ tableOptions.row_hover }
onChange={ ( row_hover ) => updateTableOptions( { row_hover } ) }
/>
</td>
</tr>
<tr className="top-border">
<th className="column-1" scope="row">{ __( 'Print Table Name', 'tablepress' ) }:</th>
<td className="column-2">
<CheckboxControl
__nextHasNoMarginBottom
className="checkbox-select-in-label"
label={
createInterpolateElement(
_x( 'Show the table name <select /> the table.', 'position (above or below)', 'tablepress' ),
{
select: (
<SelectControl
__nextHasNoMarginBottom
value={ tableOptions.print_name_position }
disabled={ ! tableOptions.print_name }
onChange={ ( print_name_position ) => updateTableOptions( { print_name_position } ) }
options={ [
{ label: __( 'above', 'tablepress' ), value: 'above' },
{ label: __( 'below', 'tablepress' ), value: 'below' },
] }
/>
),
},
)
}
checked={ tableOptions.print_name }
onChange={ ( print_name ) => updateTableOptions( { print_name } ) }
/>
</td>
</tr>
<tr className="bottom-border">
<th className="column-1" scope="row">{ __( 'Print Table Description', 'tablepress' ) }:</th>
<td className="column-2">
<CheckboxControl
__nextHasNoMarginBottom
className="checkbox-select-in-label"
label={
createInterpolateElement(
_x( 'Show the table description <select /> the table.', 'position (above or below)', 'tablepress' ),
{
select: (
<SelectControl
__nextHasNoMarginBottom
value={ tableOptions.print_description_position }
disabled={ ! tableOptions.print_description }
onChange={ ( print_description_position ) => updateTableOptions( { print_description_position } ) }
options={ [
{ label: __( 'above', 'tablepress' ), value: 'above' },
{ label: __( 'below', 'tablepress' ), value: 'below' },
] }
/>
),
},
)
}
checked={ tableOptions.print_description }
onChange={ ( print_description ) => updateTableOptions( { print_description } ) }
/>
</td>
</tr>
<tr className="top-border">
<th className="column-1 top-align" scope="row"><label htmlFor="option-extra_css_classes">{ __( 'Extra CSS Classes', 'tablepress' ) }:</label></th>
<td className="column-2">
<VStack>
<FormTokenField
__nextHasNoMarginBottom
id="option-extra_css_classes"
label=""
className="code"
title={ __( 'This field can only contain letters, numbers, spaces, hyphens (-), underscores (_), and colons (:).', 'tablepress' ) }
pattern="[A-Za-z0-9 _:\-]*"
onChange={ ( extra_css_classes ) => updateTableOptions( { extra_css_classes: extra_css_classes.join( ' ' ).trim().replace( /[^A-Za-z0-9 _:-]/g, '' ) } ) }
value={ '' !== tableOptions.extra_css_classes ? tableOptions.extra_css_classes.split( ' ' ) : [] }
tokenizeOnBlur={ true }
tokenizeOnSpace={ true }
__experimentalShowHowTo={ false }
/>
<span style={ {
fontSize: '12px',
color: '#757575',
} }>
{
createInterpolateElement(
__( 'Additional CSS classes for styling purposes can be entered here.', 'tablepress' ) + ' ' + __( 'This is NOT the place to enter <a>Custom CSS</a> code!', 'tablepress' ),
{
a: <a href={ tp.screen_options.optionsUrl } />, // eslint-disable-line jsx-a11y/anchor-has-content
},
)
}
</span>
</VStack>
</td>
</tr>
</tbody>
</table>
</VStack>
);
};
initializeReactComponentInPortal(
'table-options',
'edit',
Section,
);