diff --git a/lib/core/src/react/components/lazy-content.tsx b/lib/core/src/react/components/lazy-content.tsx index 9f6e6a2a17..3c07f96af0 100644 --- a/lib/core/src/react/components/lazy-content.tsx +++ b/lib/core/src/react/components/lazy-content.tsx @@ -1,6 +1,7 @@ -import {Component} from 'preact'; +import {Component, createRef} from 'preact'; import type {LazyContentProps, CustomContentType} from '../types'; -import {fetchData, type Ajax} from '../../ajax'; +import {$} from '../../cash'; +import {fetchData, FetcherSetting, type Ajax} from '../../ajax'; import {HtmlContent} from './html-content'; import {CustomContent} from './custom-content'; import {classes} from '../../helpers'; @@ -20,14 +21,16 @@ export class LazyContent extends Component { state: LazyContentState = {}; + protected _ref = createRef(); + protected _ajax?: Ajax; - async load() { + async load(newFetcher?: FetcherSetting) { const {props} = this; const {fetcher, type, fetcherArgs, fetcherThis = this} = props; this.setState({loading: true, error: undefined, content: undefined}); try { - const content = await fetchData(fetcher, fetcherArgs, {throws: true, dataType: type === 'custom' ? 'json' : 'text'}, fetcherThis, (ajax) => { + const content = await fetchData(newFetcher || fetcher, fetcherArgs, {throws: true, dataType: type === 'custom' ? 'json' : 'text'}, fetcherThis, (ajax) => { this._ajax = ajax; }); this.setState({content: content as CustomContentType, loading: false}); @@ -39,6 +42,10 @@ export class LazyContent extends Component { componentDidMount(): void { this.load(); + $(this._ref.current).on('loadContent.zui', (event: Event, fetcher?: FetcherSetting) => { + event.stopPropagation(); + this.load(fetcher); + }); } componentDidUpdate(previousProps: Readonly): void { @@ -49,11 +56,12 @@ export class LazyContent extends Component { componentWillUnmount(): void { this._ajax?.abort(); + $(this._ref.current).off('.zui'); } - protected _renderContent(props: LazyContentProps) { + protected _renderContent(_props: LazyContentProps, others: Partial) { const {loading, error, content = ''} = this.state; - const {loadingContent, errorText, type} = props; + const {loadingContent, errorText, type, ...otherProps} = others; if (loading) { return loadingContent; } @@ -61,20 +69,20 @@ export class LazyContent extends Component { return errorText ?? error.message; } if (type === 'html') { - return ; + return ; } if (type === 'text') { return content; } - return ; + return ; } render(props: LazyContentProps) { const {loading} = this.state; - const {loadingClass, loadingIndicator, className, style, attrs, loadingText} = props; + const {id, loadingClass, loadingIndicator, className, style, attrs, loadingText, ...others} = props; return ( -
- {this._renderContent(props)} +
+ {this._renderContent(props, others)}
); } diff --git a/lib/core/src/react/types/lazy-content-props.ts b/lib/core/src/react/types/lazy-content-props.ts index 16375a9ba0..6ab7227429 100644 --- a/lib/core/src/react/types/lazy-content-props.ts +++ b/lib/core/src/react/types/lazy-content-props.ts @@ -4,6 +4,7 @@ import type {ClassNameLike} from '../../helpers'; import type {CustomContentType} from './custom-content-type'; export type LazyContentProps = { + id?: string; className?: ClassNameLike; style?: JSX.CSSProperties; attrs?: Record;