From 603814d581cde3a57c78da5a6570933f6a791290 Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Fri, 13 May 2022 22:47:32 +0900 Subject: [PATCH] fix typing --- src/admin/index.ts | 28 +++--- src/editor/components/DatetimeControl.tsx | 49 +++++++--- src/editor/index.tsx | 105 ++++++++++++---------- 3 files changed, 113 insertions(+), 69 deletions(-) diff --git a/src/admin/index.ts b/src/admin/index.ts index 604671b..590105e 100644 --- a/src/admin/index.ts +++ b/src/admin/index.ts @@ -1,14 +1,18 @@ -document.addEventListener('click', function (e) { +document.addEventListener( 'click', function ( e ) { const target = e.target as HTMLElement; - if (target.classList.contains('editinline')) { - const tr = target.closest('tr'); - const id = tr.id; - const checked = !!document - .getElementById(id) - ?.querySelector('[data-schedule-terms-active]'); - const checkbox = document.querySelector( - '.inline-edit-row input[name=term-use_schedule]' - ) as HTMLInputElement; - checkbox.checked = checked; + if ( target.classList.contains( 'editinline' ) ) { + const tr = target.closest( 'tr' ); + const id = tr?.id; + if ( id ) { + const checked = !!document + .getElementById( id ) + ?.querySelector( '[data-schedule-terms-active]' ); + const checkbox = document.querySelector( + '.inline-edit-row input[name=term-use_schedule]' + ) as HTMLInputElement; + checkbox.checked = checked; + } } -}); +} ); + +export {}; diff --git a/src/editor/components/DatetimeControl.tsx b/src/editor/components/DatetimeControl.tsx index b57998d..0a0ff2b 100644 --- a/src/editor/components/DatetimeControl.tsx +++ b/src/editor/components/DatetimeControl.tsx @@ -21,6 +21,19 @@ interface DatetimeControlProps { type: 'attach' | 'detach'; } +interface ScheduleTermsMeta { + type: 'attach' | 'detach'; + datetime: string; + term: string; + taxonomy: string; +} + +interface PostMeta { + [ key: string ]: any; + + schedule_terms: ScheduleTermsMeta[]; +} + export const DatetimeControl = ( { term, taxonomy, @@ -28,14 +41,20 @@ export const DatetimeControl = ( { postType, type, }: DatetimeControlProps ) => { - const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' ); + const [ meta, setMeta ]: [ PostMeta, ( meta: PostMeta ) => void ] = useEntityProp( + 'postType', + postType, + 'meta' + ); const anchorRef = useRef(); const getTimezoneOffsetString = () => { // @ts-ignore const { timezone } = getSettings(); const [ hour, time ] = timezone.offset.toString().split( '.' ); - return `${ Number( hour ) > 0 ? '+' : '-' }${ String( Math.abs( hour ) ).padStart( 2, '0' ) }:${ String( + return `${ Number( hour ) > 0 ? '+' : '-' }${ String( + Math.abs( hour ) + ).padStart( 2, '0' ) }:${ String( Math.floor( Number( `0.${ time || 0 }` ) * 60 ) ).padStart( 2, '0' ) }`; }; @@ -50,14 +69,20 @@ export const DatetimeControl = ( { ...meta, schedule_terms: [ ...otherItems, - datetime && { - term, - taxonomy, - type, - // convert to UTC. - datetime: moment(`${ datetime }${ getTimezoneOffsetString() }`).utc().format(), - }, - ].filter( ( e ) => e ), + datetime + ? { + term, + taxonomy, + type, + // convert to UTC. + datetime: moment( + `${ datetime }${ getTimezoneOffsetString() }` + ) + .utc() + .format(), + } + : null, + ].filter( ( e ): e is ScheduleTermsMeta => e !== null ), } ); }; @@ -67,7 +92,9 @@ export const DatetimeControl = ( { } ); if ( val?.datetime ) { - return moment(val.datetime).utcOffset( getTimezoneOffsetString() ).format( TIMEZONELESS_FORMAT ); + return moment( val.datetime ) + .utcOffset( getTimezoneOffsetString() ) + .format( TIMEZONELESS_FORMAT ); } return undefined; diff --git a/src/editor/index.tsx b/src/editor/index.tsx index 638ce0d..0070e11 100644 --- a/src/editor/index.tsx +++ b/src/editor/index.tsx @@ -5,7 +5,7 @@ import { store as coreStore, useEntityProp } from '@wordpress/core-data'; // @ts-ignore import { store as editorStore } from '@wordpress/editor'; import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; -import { WP_Taxonomy_Name } from 'wp-types'; +import type { WP_Taxonomy_Name } from 'wp-types'; import { DatetimeControl } from './components/DatetimeControl'; interface Term { @@ -19,62 +19,75 @@ interface Term { parent: number; count: number; } + +interface Taxonomy { + slug: string; +} + interface Props { currentPostType: string; - taxonomies: Term[]; + taxonomies: Taxonomy[]; terms: Record; } -const ControlUI = ({ taxonomies, terms, currentPostType }: Props) => { +const ControlUI = ( { taxonomies, terms, currentPostType }: Props ) => { return (
- {taxonomies?.map((taxonomy) => ( -
- {terms[taxonomy.slug] && - terms[taxonomy.slug].length > 0 && - terms[taxonomy.slug]?.map((term) => ( -
-

- {taxonomy.slug}: {term.name} -

- - -
- ))} + { taxonomies?.map( ( taxonomy ) => ( +
+ { terms[ taxonomy.slug ] && + terms[ taxonomy.slug ].length > 0 && + terms[ taxonomy.slug ]?.map( ( term ) => ( +
+

+ { taxonomy.slug }: { term.name } +

+ + +
+ ) ) }
- ))} + ) ) }
); }; const PluginDocumentSetting = () => { - const { postType, taxonomies, terms } = useSelect((select) => { + const { postType, taxonomies, terms } = useSelect( ( select ) => { // @ts-ignore - const { getTaxonomies, getEntityRecords } = select(coreStore); + const { getTaxonomies, getEntityRecords } = select( coreStore ); // @ts-ignore - const _postType = select(editorStore).getCurrentPostType(); - const _taxonomies = (getTaxonomies({ per_page: -1 }) || []).filter( - (taxonomy) => taxonomy.types.includes(_postType) - ); + const _postType = select( editorStore ).getCurrentPostType() as string; + const _taxonomies = ( + getTaxonomies( { per_page: -1 } ) || [] + ).filter( + // @ts-ignore + ( taxonomy ) => taxonomy.types.includes( _postType ) + ) as Taxonomy[]; const _terms = Object.fromEntries( - _taxonomies.map((taxonomy) => { - const terms = getEntityRecords('taxonomy', taxonomy.slug, { + _taxonomies.map( ( taxonomy ) => { + const terms = getEntityRecords( 'taxonomy', taxonomy.slug, { per_page: -1, - })?.filter(({ meta: { schedule_terms_active } }) => schedule_terms_active); - return [taxonomy.slug, terms]; - }) + } )?.filter( + ( + // @ts-ignore + { meta: { schedule_terms_active } } + ) => schedule_terms_active + ); + return [ taxonomy.slug, terms as Term[] ]; + } ) ); return { @@ -82,7 +95,7 @@ const PluginDocumentSetting = () => { taxonomies: _taxonomies, terms: _terms, }; - }); + } ); return ( { className="schedule-terms" > ); }; -registerPlugin('schedule-terms', { +registerPlugin( 'schedule-terms', { render: PluginDocumentSetting, icon: 'clock', -}); +} );