lupine.components 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/float-window.tsx

@@ -46,7 +46,7 @@ export class FloatWindow {
     handleClicked,
     closeWhenClickOutside = false,
     zIndex,
-    contentOverflowY = 'auto',
+    contentOverflowY = 'auto', // set to unset for having popup menu inside
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     const onClickContainer = (event: any) => {
       if (closeWhenClickOutside !== false && event.target.className === 'fwin-box') {

package/src/components/html-var.tsx

@@ -1,35 +1,56 @@
 import { RefProps, VNode } from 'lupine.web';
 
 export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
-export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
-  let _value: string | VNode<any> = initial || '';
-  let _dirty = false;
-  const waitUpdate = async (value: string | VNode<any>) => {
-    if (!ref.current) return;
-    await ref.mountInnerComponent!(value);
-    _dirty = false;
-  };
-  const ref: RefProps = {
-    onLoad: async (el: Element) => {
-      _dirty && waitUpdate(_value);
-    },
-  };
-  return {
-    set value(value: string | VNode<any>) {
-      _value = value;
-      _dirty = true;
-      waitUpdate(value);
-    },
-    get value() {
-      return ref.current ? ref.current.innerHTML : _value;
-    },
-    get ref() {
-      return ref;
-    },
-    get node() {
-      _dirty = false;
-      // the Fragment Tag will be present in the html if ref is assigned
-      return { type: 'Fragment', props: { ref, children: _value }, html: [] };
-    },
-  };
+
+export class HtmlVar implements HtmlVarResult {
+  private _value: string | VNode<any>;
+  private _dirty = false;
+  private _ref: RefProps;
+
+  constructor(initial?: string | VNode<any>) {
+    this._value = initial || '';
+    this._ref = {
+      onLoad: async (el: Element) => {
+        this._dirty && this.waitUpdate(this._value);
+      },
+    };
+  }
+
+  private async waitUpdate(value: string | VNode<any>): Promise<void> {
+    if (!this._ref.current) return;
+    await this._ref.mountInnerComponent!(value);
+    this._dirty = false;
+  }
+
+  set value(value: string | VNode<any>) {
+    this._value = value;
+    this._dirty = true;
+    this.waitUpdate(value);
+  }
+
+  get value(): string | VNode<any> {
+    return this._ref.current ? this._ref.current.innerHTML : this._value;
+  }
+
+  get ref(): RefProps {
+    return this._ref;
+  }
+
+  get node(): VNode<any> {
+    this._dirty = false;
+    // the Fragment Tag will be present in the html if ref is assigned
+    return { 
+      type: 'Fragment', 
+      props: { 
+        ref: this._ref, 
+        children: this._value 
+      }, 
+      html: [] 
+    };
+  }
+}
+
+// For backward compatibility
+export const createHtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
+  return new HtmlVar(initial);
 };

package/src/components/mobile-components/index.ts

@@ -1,6 +1,6 @@
 export * from './icon-menu-item-props';
 export * from './mobile-footer-menu';
-export * from './mobile-frame-with-header';
+export * from './mobile-header-with-back';
 export * from './mobile-header-component';
 export * from './mobile-header-title-icon';
 export * from './mobile-side-menu';

package/src/components/mobile-components/mobile-header-component.tsx

@@ -15,9 +15,9 @@ import { CssProps, HtmlVar, VNode } from 'lupine.components';
 export class MobileHeaderHelper {
   private static instance: MobileHeaderHelper;
 
-  private leftContent = HtmlVar('');
-  private centerContent = HtmlVar('');
-  private rightContent = HtmlVar('');
+  private leftContent = new HtmlVar('');
+  private centerContent = new HtmlVar('');
+  private rightContent = new HtmlVar('');
   private constructor() {}
 
   public static getInstance(): MobileHeaderHelper {

package/src/components/mobile-components/mobile-header-title-icon.tsx

@@ -17,20 +17,14 @@ export const MobileHeaderEmptyIcon = () => {
   return <div class='mhti-empty-icon' style={{ width: '28px' }}></div>;
 };
 
-export interface MobileHeaderTitleIconHookProps {
-  updateTitle?: (title: VNode<any> | string) => void;
-  updateLeft?: (left: VNode<any>) => void;
-  updateRight?: (right: VNode<any>) => void;
-}
 export interface MobileHeaderTitleIconProps {
-  title: VNode<any> | string;
+  title: VNode<any> | string | HtmlVar;
   onBack?: (event: Event) => void;
-  left?: VNode<any>;
-  right?: VNode<any>;
-  hook?: MobileHeaderTitleIconHookProps;
+  left?: VNode<any> | HtmlVar;
+  right?: VNode<any> | HtmlVar;
 }
 // there may have a few MobileHeaderTitleIcon for different pages
-export const MobileHeaderTitleIcon = ({ title, onBack, left, right, hook }: MobileHeaderTitleIconProps) => {
+export const MobileHeaderTitleIcon = ({ title, onBack, left, right }: MobileHeaderTitleIconProps) => {
   // const processBack = (event: Event) => {
   //   if (onBack) {
   //     onBack(event);
@@ -81,20 +75,9 @@ export const MobileHeaderTitleIcon = ({ title, onBack, left, right, hook }: Mobi
     },
   };
 
-  if (hook) {
-    hook.updateTitle = (title: VNode<any> | string) => {
-      domCenter.value = title;
-    };
-    hook.updateLeft = (left: VNode<any>) => {
-      domLeft.value = left;
-    };
-    hook.updateRight = (right: VNode<any>) => {
-      domRight.value = right;
-    };
-  }
-  const domLeft = HtmlVar(left);
-  const domCenter = HtmlVar(title);
-  const domRight = HtmlVar(right);
+  const domLeft = left instanceof HtmlVar ? left : new HtmlVar(left);
+  const domCenter = title instanceof HtmlVar ? title : new HtmlVar(title);
+  const domRight = right instanceof HtmlVar ? right : new HtmlVar(right);
   return (
     <div css={css} class='mobile-header-title-icon-top'>
       <div class='mhti-left'>{domLeft.node}</div>

package/src/components/mobile-components/{mobile-frame-with-header.tsx → mobile-header-with-back.tsx}

@@ -20,11 +20,6 @@ export const HeaderWithBackFrameEmpty = () => {
   return <div class='header-back-top-empty'></div>;
 };
 
-export interface HeaderWithBackFrameHookProps {
-  updateTitle?: (title: VNode<any> | string) => void;
-  updateLeft?: (left: VNode<any>) => void;
-  updateRight?: (right: VNode<any>) => void;
-}
 // there may have a few HeaderWithBackFrame one over another at the same time
 export const HeaderWithBackFrame = ({
   children,
@@ -32,15 +27,13 @@ export const HeaderWithBackFrame = ({
   onBack,
   left,
   right,
-  hook,
   noHeader = false,
 }: {
   children: VNode<any>;
-  title: VNode<any> | string;
+  title: VNode<any> | string | HtmlVar;
   onBack: (event: Event) => void;
-  left?: VNode<any>;
-  right?: VNode<any>;
-  hook?: HeaderWithBackFrameHookProps;
+  left?: VNode<any> | HtmlVar;
+  right?: VNode<any> | HtmlVar;
   noHeader?: boolean;
 }) => {
   left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
@@ -94,32 +87,13 @@ export const HeaderWithBackFrame = ({
     },
   };
 
-  if (hook) {
-    hook.updateTitle = (title: VNode<any> | string) => {
-      domCenter.value = title;
-    };
-    hook.updateLeft = (left: VNode<any>) => {
-      domLeft.value = left;
-    };
-    hook.updateRight = (right: VNode<any>) => {
-      domRight.value = right;
-    };
-  }
-  const domLeft = HtmlVar(left);
-  const domCenter = HtmlVar(title);
-  const domRight = HtmlVar(right);
+  const domLeft = left instanceof HtmlVar ? left : new HtmlVar(left);
+  const domCenter = title instanceof HtmlVar ? title : new HtmlVar(title);
+  const domRight = right instanceof HtmlVar ? right : new HtmlVar(right);
   const ref: RefProps = {};
   return (
     <div ref={ref} css={css} class='header-back-frame'>
-      {!noHeader && (
-        <MobileHeaderTitleIcon
-          onBack={onBack}
-          left={domLeft.node}
-          title={domCenter.node}
-          right={domRight.node}
-          hook={hook}
-        />
-      )}
+      {!noHeader && <MobileHeaderTitleIcon onBack={onBack} left={domLeft} title={domCenter} right={domRight} />}
       <div class='header-back-content'>{children}</div>
     </div>
   );

package/src/components/modal.tsx

@@ -13,6 +13,7 @@ export class ModalWindow {
     handleClicked,
     closeWhenClickOutside = true,
     zIndex,
+    contentOverflowY,
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     return FloatWindow.show({
       title,
@@ -26,6 +27,7 @@ export class ModalWindow {
       handleClicked,
       closeWhenClickOutside,
       zIndex,
+      contentOverflowY,
     });
   }
 }

package/src/components/progress.tsx

@@ -74,8 +74,8 @@ export const Progress = (props: ProgressProps) => {
   };
 
   const ref: RefProps = {};
-  const domTitle = HtmlVar('Progress');
-  const dom = HtmlVar('0 %');
+  const domTitle = new HtmlVar('Progress');
+  const dom = new HtmlVar('0 %');
   return (
     <div ref={ref} css={css} class='progress-top d-none'>
       <div class='progress-box'>

package/src/frames/slider-frame.tsx

@@ -51,7 +51,7 @@ export const SliderFrame = (props: SliderFrameProps) => {
       ref.current?.classList.add(className);
     };
   }
-  const dom = HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
+  const dom = new HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
   const ref: RefProps = {};
   const css: CssProps = {
     display: 'flex',