import { memo, useEffect, useMemo, useState } from 'react';
import { __ } from '@wordpress/i18n/';
import {
useInfiniteFetch,
SortBy,
SingleSelectMenu,
InputField,
Checkbox,
Loader,
Table,
ModuleViewHeaderBottom,
TooltipSortingFiltering,
TagsMenu,
TextArea,
RowActionButtons,
TableSelectCheckbox,
} from '../lib/tableImports';
import useChangeRow from '../hooks/useChangeRow';
import useTablePanels from '../hooks/useTablePanels';
import useTableStore from '../hooks/useTableStore';
import DescriptionBox from '../elements/DescriptionBox';
import RolesMenu from '../elements/RolesMenu';
import CapabilitiesMenu from '../elements/CapabilitiesMenu';
import useColumnTypesQuery from '../queries/useColumnTypesQuery';
const title = __( 'Add Custom Code', 'urlslab' );
const paginationId = 'rule_id';
const header = {
name: __( 'Rule name', 'urlslab' ),
is_active: __( 'Active rule', 'urlslab' ),
labels: __( 'Tags', 'urlslab' ),
};
const editRowCells = {
match_type: __( 'Match type', 'urlslab' ),
match_url: __( 'Match URL', 'urlslab' ),
rule_order: __( 'Order', 'urlslab' ),
match_headers: __( 'Request headers', 'urlslab' ),
match_cookie: __( 'Cookies', 'urlslab' ),
match_params: __( 'Request parameters', 'urlslab' ),
match_ip: __( 'Visitor IP', 'urlslab' ),
match_roles: __( 'Roles', 'urlslab' ),
match_capabilities: __( 'Capabilities', 'urlslab' ),
match_browser: __( 'Browser', 'urlslab' ),
is_logged: __( 'Is logged in', 'urlslab' ),
is_single: __( 'Is single', 'urlslab' ),
is_singular: __( 'Is singular', 'urlslab' ),
is_attachment: __( 'Is attachment', 'urlslab' ),
is_page: __( 'Is page', 'urlslab' ),
is_home: __( 'Is home', 'urlslab' ),
is_front_page: __( 'Is front page', 'urlslab' ),
is_category: __( 'Is category', 'urlslab' ),
is_search: __( 'Is search', 'urlslab' ),
is_tag: __( 'Is tag', 'urlslab' ),
is_author: __( 'Is author', 'urlslab' ),
is_archive: __( 'Is archive', 'urlslab' ),
is_sticky: __( 'Is sticky', 'urlslab' ),
is_tax: __( 'Is taxonomy', 'urlslab' ),
is_feed: __( 'Is feed', 'urlslab' ),
is_paged: __( 'Is paged', 'urlslab' ),
add_http_headers: __( 'Custom HTTP Headers', 'urlslab' ),
add_start_headers: __( 'After ``', 'urlslab' ),
add_end_headers: __( 'Before ``', 'urlslab' ),
add_start_body: __( 'After ``', 'urlslab' ),
add_end_body: __( 'Before ``', 'urlslab' ),
};
// init table state with fixed states which we do not need to update anymore during table lifecycle
export default function TableInit( { slug } ) {
const setTable = useTableStore( ( state ) => state.setTable );
const [ init, setInit ] = useState( false );
useEffect( () => {
setInit( true );
setTable( slug, {
title,
paginationId,
slug,
header,
id: 'name',
} );
}, [ setTable, slug ] );
return init && ;
}
function CustomHtmlTable( { slug } ) {
const {
columnHelper,
data,
isLoading,
isSuccess,
isFetchingNextPage,
ref,
} = useInfiniteFetch( { slug } );
const tableData = useMemo( () => data?.pages?.flatMap( ( page ) => page ?? [] ), [ data?.pages ] );
const setTable = useTableStore( ( state ) => state.setTable );
const { deleteRow, updateRow } = useChangeRow();
const columns = useMemo( () => [
columnHelper.accessor( 'check', {
className: 'nolimit checkbox',
cell: ( cell ) => ,
header: ( head ) => ,
} ),
columnHelper.accessor( 'name', {
className: 'nolimit',
cell: ( cell ) => updateRow( { newVal, cell } ) } />,
header: ( th ) => ,
size: 200,
} ),
columnHelper.accessor( 'is_active', {
className: 'nolimit',
cell: ( cell ) => updateRow( { newVal, cell } ) } />,
header: ( th ) => ,
size: 100,
} ),
columnHelper.accessor( 'labels', {
className: 'nolimit',
cell: ( cell ) => updateRow( { newVal, cell } ) } />,
header: header.labels,
size: 160,
} ),
columnHelper.accessor( 'editRow', {
className: 'editRow',
cell: ( cell ) => updateRow( { cell, id: 'name' } ) }
onDelete={ () => deleteRow( { cell, id: 'name' } ) }
>
,
header: () => null,
size: 0,
} ),
], [ columnHelper, deleteRow, slug, updateRow ] );
useEffect( () => {
setTable( slug, { data } );
}, [ data, setTable, slug ] );
if ( isLoading ) {
return ;
}
return (
<>
{ __( 'The table displays a list of code injection rules applied to the generated page. If the page matches the rule conditions, the HTML headers and content are supplemented with the provided HTML, CSS, or JavaScript codes. With the option to define custom rules, you can create a variety of code injection combinations based on numerous condition types. To implement a specific code onto all pages of your website, navigate to the Settings tab to establish an injection applicable to all pages.', 'urlslab' ) }
);
}
const TableEditorManager = memo( ( { slug } ) => {
const rowToEdit = useTablePanels( ( state ) => state.rowToEdit );
const setRowToEdit = useTablePanels( ( state ) => state.setRowToEdit );
const { columnTypes } = useColumnTypesQuery( slug );
const booleanValueTypes = columnTypes?.is_single.values;
const rowEditorCells = useMemo( () => ( {
name: setRowToEdit( { name: val } ) } />,
rule_order: setRowToEdit( { rule_order: val } ) } />,
is_active: setRowToEdit( { is_active: val } ) }>{ header.is_active },
labels: setRowToEdit( { labels: val } ) } />,
match_type: setRowToEdit( { match_type: val } ) }>{ editRowCells.match_type },
match_url: setRowToEdit( { match_url: val } ) } />,
match_headers: setRowToEdit( { match_headers: val } ) } />,
match_cookie: setRowToEdit( { match_cookie: val } ) } />,
match_params: setRowToEdit( { match_params: val } ) } />,
match_roles: setRowToEdit( { match_roles: val } ) } />,
match_capabilities: setRowToEdit( { match_capabilities: val } ) } />,
match_ip: setRowToEdit( { match_ip: val } ) } />,
match_browser: setRowToEdit( { match_browser: val } ) } />,
is_logged: setRowToEdit( { is_logged: val } ) }>{ editRowCells.is_logged },
is_single: setRowToEdit( { is_single: val } ) }>{ editRowCells.is_single },
is_singular: setRowToEdit( { is_singular: val } ) }>{ editRowCells.is_singular },
is_attachment: setRowToEdit( { is_attachment: val } ) }>{ editRowCells.is_attachment },
is_page: setRowToEdit( { is_page: val } ) }>{ editRowCells.is_page },
is_home: setRowToEdit( { is_home: val } ) }>{ editRowCells.is_home },
is_front_page: setRowToEdit( { is_front_page: val } ) }>{ editRowCells.is_front_page },
is_category: setRowToEdit( { is_category: val } ) }>{ editRowCells.is_category },
is_search: setRowToEdit( { is_search: val } ) }>{ editRowCells.is_search },
is_tag: setRowToEdit( { is_tag: val } ) }>{ editRowCells.is_tag },
is_author: setRowToEdit( { is_author: val } ) }>{ editRowCells.is_author },
is_archive: setRowToEdit( { is_archive: val } ) }>{ editRowCells.is_archive },
is_sticky: setRowToEdit( { is_sticky: val } ) }>{ editRowCells.is_sticky },
is_tax: setRowToEdit( { is_tax: val } ) }>{ editRowCells.is_tax },
is_feed: setRowToEdit( { is_feed: val } ) }>{ editRowCells.is_feed },
is_paged: setRowToEdit( { is_paged: val } ) }>{ editRowCells.is_paged },
add_http_headers: