| 1 |
/** |
| 2 |
* JavaScript code for the "Export Screen" component. |
| 3 |
* |
| 4 |
* @package TablePress |
| 5 |
* @subpackage Export Screen |
| 6 |
* @author Tobias Bäthge |
| 7 |
* @since 2.2.0 |
| 8 |
*/ |
| 9 |
|
| 10 |
/* globals tp */ |
| 11 |
|
| 12 |
/** |
| 13 |
* WordPress dependencies. |
| 14 |
*/ |
| 15 |
import { useState } from 'react'; |
| 16 |
import { |
| 17 |
Icon, |
| 18 |
} from '@wordpress/components'; |
| 19 |
import { info } from '@wordpress/icons'; |
| 20 |
import { __, _x, sprintf } from '@wordpress/i18n'; |
| 21 |
|
| 22 |
// Number of tables. |
| 23 |
const tablesCount = Object.keys( tp.export.tables ).length; |
| 24 |
|
| 25 |
// Show at least one empty row in the select, and between 3 and 12 total rows. |
| 26 |
let exportTablesSelectSize = tablesCount + 1; |
| 27 |
const maxExportTablesSelectSize = 12; |
| 28 |
exportTablesSelectSize = Math.max( exportTablesSelectSize, 3 ); |
| 29 |
exportTablesSelectSize = Math.min( exportTablesSelectSize, maxExportTablesSelectSize ); |
| 30 |
|
| 31 |
// The <option> entries for the dropdowns do not depend on the state, so they can be created once. |
| 32 |
const tablesSelectOptions = Object.entries( tp.export.tables ).map( ( [ tableId, tableName ] ) => { |
| 33 |
if ( '' === tableName.trim() ) { |
| 34 |
tableName = __( '(no name)', 'tablepress' ); |
| 35 |
} |
| 36 |
const optionText = sprintf( __( 'ID %1$s: %2$s', 'tablepress' ), tableId, tableName ); |
| 37 |
return <option key={ tableId } value={ tableId }>{ optionText }</option>; |
| 38 |
} ); |
| 39 |
const exportFormatsSelectOptions = Object.entries( tp.export.exportFormats ).map( ( [ exportFormat, exportFormatName ] ) => |
| 40 |
<option key={ exportFormat } value={ exportFormat }>{ exportFormatName }</option> |
| 41 |
); |
| 42 |
const csvDelimitersSelectOptions = Object.entries( tp.export.csvDelimiters ).map( ( [ csvDelimiter, csvDelimiterName ] ) => |
| 43 |
<option key={ csvDelimiter } value={ csvDelimiter }>{ csvDelimiterName }</option> |
| 44 |
); |
| 45 |
|
| 46 |
/** |
| 47 |
* Returns the "Export Screen" component's JSX markup. |
| 48 |
* |
| 49 |
* @return {Object} Export Screen component. |
| 50 |
*/ |
| 51 |
const Screen = () => { |
| 52 |
const [ screenData, setScreenData ] = useState( { |
| 53 |
selectedTables: tp.export.selectedTables, |
| 54 |
exportFormat: tp.export.exportFormat, |
| 55 |
csvDelimiter: tp.export.csvDelimiter, |
| 56 |
createZipFile: false, |
| 57 |
reverseList: false, |
| 58 |
} ); |
| 59 |
|
| 60 |
// If more than one table is selected, force the ZIP file checkbox to checked. |
| 61 |
const zipFileRequired = screenData.selectedTables.length > 1; |
| 62 |
|
| 63 |
/** |
| 64 |
* Handles screen data state changes. |
| 65 |
* |
| 66 |
* @param {Object} updatedData Data in the screen data state that should be updated. |
| 67 |
*/ |
| 68 |
const updateScreenData = ( updatedData ) => { |
| 69 |
const newScreenData = { |
| 70 |
...screenData, |
| 71 |
...updatedData, |
| 72 |
}; |
| 73 |
setScreenData( newScreenData ); |
| 74 |
}; |
| 75 |
|
| 76 |
return ( |
| 77 |
<table className="tablepress-postbox-table fixed"> |
| 78 |
<tbody> |
| 79 |
<tr> |
| 80 |
<th className="column-1 top-align" scope="row"> |
| 81 |
<label htmlFor="tables-export-list"> |
| 82 |
{ __( 'Tables to Export', 'tablepress' ) }: |
| 83 |
</label> |
| 84 |
{ tp.export.zipSupportAvailable && |
| 85 |
<> |
| 86 |
{ |
| 87 |
// Show a "Select all" checkbox to select all entries in the export tables dropdown. |
| 88 |
} |
| 89 |
<br /><br /> |
| 90 |
<label htmlFor="tables-export-select-all"> |
| 91 |
<input |
| 92 |
type="checkbox" |
| 93 |
id="tables-export-select-all" |
| 94 |
checked={ screenData.selectedTables.length === tablesCount } |
| 95 |
onChange={ () => { |
| 96 |
const selectedTables = ( screenData.selectedTables.length === tablesCount ) ? [] : Object.keys( tp.export.tables ); |
| 97 |
updateScreenData( { selectedTables } ); |
| 98 |
} } |
| 99 |
/> { __( 'Select all', 'tablepress' ) } |
| 100 |
</label> |
| 101 |
{ tablesCount > maxExportTablesSelectSize && |
| 102 |
<> |
| 103 |
{ |
| 104 |
// Show a "Reverse List" checkbox if more tables are shown than what the height of the export tables dropdown holds. |
| 105 |
} |
| 106 |
<br /><br /> |
| 107 |
<label htmlFor="tables-export-reverse-list"> |
| 108 |
<input |
| 109 |
id="tables-export-reverse-list" |
| 110 |
type="checkbox" |
| 111 |
checked={ screenData.reverseList } |
| 112 |
onChange={ () => { |
| 113 |
updateScreenData( { reverseList: ! screenData.reverseList } ); |
| 114 |
tablesSelectOptions.reverse(); |
| 115 |
} } |
| 116 |
/> { __( 'Reverse list', 'tablepress' ) } |
| 117 |
</label> |
| 118 |
</> |
| 119 |
} |
| 120 |
</> |
| 121 |
} |
| 122 |
</th> |
| 123 |
<td className="column-2"> |
| 124 |
<select |
| 125 |
id="tables-export-list" |
| 126 |
size={ tp.export.zipSupportAvailable ? exportTablesSelectSize : 1 } |
| 127 |
multiple={ tp.export.zipSupportAvailable } |
| 128 |
value={ screenData.selectedTables } |
| 129 |
onChange={ ( event ) => { |
| 130 |
const selectedTables = [ ...event.target.selectedOptions ].map( ( option ) => option.value ); |
| 131 |
updateScreenData( { selectedTables } ); |
| 132 |
} } |
| 133 |
style={ { |
| 134 |
width: '100%', |
| 135 |
} } |
| 136 |
> |
| 137 |
{ tablesSelectOptions } |
| 138 |
</select> |
| 139 |
{ tp.export.zipSupportAvailable && |
| 140 |
<> |
| 141 |
<br /> |
| 142 |
<p className="info-text"> |
| 143 |
<Icon icon={ info } /> |
| 144 |
<span> |
| 145 |
{ sprintf( |
| 146 |
__( 'You can select multiple tables by holding down the “%1$s” key or the “%2$s” key for ranges.', 'tablepress' ), |
| 147 |
window?.navigator?.platform?.includes( 'Mac' ) ? _x( '⌘', 'keyboard shortcut modifier key on a Mac keyboard', 'tablepress' ) : _x( 'Ctrl', 'keyboard key', 'tablepress' ), |
| 148 |
_x( 'Shift', 'keyboard key', 'tablepress' ) ) |
| 149 |
} |
| 150 |
</span> |
| 151 |
</p> |
| 152 |
</> |
| 153 |
} |
| 154 |
</td> |
| 155 |
</tr> |
| 156 |
<tr> |
| 157 |
<th className="column-1" scope="row"> |
| 158 |
<label htmlFor="tables-export-format"> |
| 159 |
{ __( 'Export Format', 'tablepress' ) }: |
| 160 |
</label> |
| 161 |
</th> |
| 162 |
<td className="column-2"> |
| 163 |
<select |
| 164 |
id="tables-export-format" |
| 165 |
name="export[format]" |
| 166 |
value={ screenData.exportFormat } |
| 167 |
onChange={ ( event ) => updateScreenData( { exportFormat: event.target.value } ) } |
| 168 |
> |
| 169 |
{ exportFormatsSelectOptions } |
| 170 |
</select> |
| 171 |
</td> |
| 172 |
</tr> |
| 173 |
<tr> |
| 174 |
<th className="column-1" scope="row"> |
| 175 |
<label htmlFor="tables-export-csv-delimiter"> |
| 176 |
{ __( 'CSV Delimiter', 'tablepress' ) }: |
| 177 |
</label> |
| 178 |
</th> |
| 179 |
<td className="column-2"> |
| 180 |
<select |
| 181 |
id="tables-export-csv-delimiter" |
| 182 |
name="export[csv_delimiter]" |
| 183 |
disabled={ 'csv' !== screenData.exportFormat } |
| 184 |
value={ screenData.csvDelimiter } |
| 185 |
onChange={ ( event ) => updateScreenData( { csvDelimiter: event.target.value } ) } |
| 186 |
> |
| 187 |
{ csvDelimitersSelectOptions } |
| 188 |
</select> |
| 189 |
{ 'csv' !== screenData.exportFormat && |
| 190 |
<> |
| 191 |
{ ' ' } |
| 192 |
<span className="description"> |
| 193 |
{ __( '(Only needed for CSV export.)', 'tablepress' ) } |
| 194 |
</span> |
| 195 |
</> |
| 196 |
} |
| 197 |
</td> |
| 198 |
</tr> |
| 199 |
<tr className="bottom-border"> |
| 200 |
<th className="column-1" scope="row"> |
| 201 |
{ __( 'ZIP file', 'tablepress' ) }: |
| 202 |
</th> |
| 203 |
<td className="column-2"> |
| 204 |
{ tp.export.zipSupportAvailable && |
| 205 |
<label htmlFor="tables-export-zip-file"> |
| 206 |
<input |
| 207 |
type="checkbox" |
| 208 |
id="tables-export-zip-file" |
| 209 |
checked={ screenData.createZipFile || zipFileRequired } |
| 210 |
disabled={ zipFileRequired } |
| 211 |
onChange={ () => updateScreenData( { createZipFile: ! screenData.createZipFile } ) } |
| 212 |
/> { __( 'Create a ZIP archive.', 'tablepress' ) } |
| 213 |
{ zipFileRequired && |
| 214 |
<> |
| 215 |
{ ' ' } |
| 216 |
<span className="description"> |
| 217 |
{ __( '(Mandatory if more than one table is selected.)', 'tablepress' ) } |
| 218 |
</span> |
| 219 |
</> |
| 220 |
} |
| 221 |
</label> |
| 222 |
} |
| 223 |
{ ! tp.export.zipSupportAvailable && |
| 224 |
__( 'Note: Support for ZIP file creation seems not to be available on this server.', 'tablepress' ) |
| 225 |
} |
| 226 |
</td> |
| 227 |
</tr> |
| 228 |
<tr className="top-border"> |
| 229 |
<td className="column-1"></td> |
| 230 |
<td className="column-2"> |
| 231 |
<input |
| 232 |
type="hidden" |
| 233 |
name="export[tables_list]" |
| 234 |
value={ screenData.selectedTables.join() } |
| 235 |
/> |
| 236 |
<input |
| 237 |
type="hidden" |
| 238 |
name="export[zip_file]" |
| 239 |
value={ screenData.createZipFile || zipFileRequired } |
| 240 |
/> |
| 241 |
<input |
| 242 |
type="submit" |
| 243 |
value={ __( 'Download Export File', 'tablepress' ) } |
| 244 |
className="button button-primary button-large" |
| 245 |
disabled={ 0 === screenData.selectedTables.length } |
| 246 |
/> |
| 247 |
</td> |
| 248 |
</tr> |
| 249 |
</tbody> |
| 250 |
</table> |
| 251 |
); |
| 252 |
}; |
| 253 |
|
| 254 |
export default Screen; |
| 255 |
|
