* core: support for reloading lazy content by trigger a event.

easysoft · Nov 1, 2024 · 70bcd1f · 70bcd1f
1 parent bc7288d
commit 70bcd1f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git 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<LazyContentProps, LazyContentState> {
 
     state: LazyContentState = {};
 
+    protected _ref = createRef<HTMLDivElement>();
+
     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<LazyContentProps, LazyContentState> {
 
     componentDidMount(): void {
         this.load();
+        $(this._ref.current).on('loadContent.zui', (event: Event, fetcher?: FetcherSetting) => {
+            event.stopPropagation();
+            this.load(fetcher);
+        });
     }
 
     componentDidUpdate(previousProps: Readonly<LazyContentProps>): void {
@@ -49,32 +56,33 @@ export class LazyContent extends Component<LazyContentProps, LazyContentState> {
 
     componentWillUnmount(): void {
         this._ajax?.abort();
+        $(this._ref.current).off('.zui');
     }
 
-    protected _renderContent(props: LazyContentProps) {
+    protected _renderContent(_props: LazyContentProps, others: Partial<LazyContentProps>) {
         const {loading, error, content = ''} = this.state;
-        const {loadingContent, errorText, type} = props;
+        const {loadingContent, errorText, type, ...otherProps} = others;
         if (loading) {
             return loadingContent;
         }
         if (error) {
             return errorText ?? error.message;
         }
         if (type === 'html') {
-            return <HtmlContent html={content as string} />;
+            return <HtmlContent html={content as string} executeScript {...otherProps} />;
         }
         if (type === 'text') {
             return content;
         }
-        return <CustomContent content={content} />;
+        return <CustomContent content={content} {...otherProps} />;
     }
 
     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 (
-            <div className={classes('lazy-content', className, loading ? loadingClass : '', loadingIndicator ? 'load-indicator' : '')} data-loading={loadingText} style={style} {...attrs}>
-                {this._renderContent(props)}
+            <div id={id} ref={this._ref} className={classes('lazy-content', className, loading ? loadingClass : '', loadingIndicator ? 'load-indicator' : '')} data-loading={loadingText} style={style} {...attrs}>
+                {this._renderContent(props, others)}
             </div>
         );
     }

diff --git 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<T = string | CustomContentType, A extends unknown[] = unknown[], THIS = unknown> = {
+    id?: string;
     className?: ClassNameLike;
     style?: JSX.CSSProperties;
     attrs?: Record<string, unknown>;