lupine.components 1.1.8 → 1.1.10

package/package.json

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

package/src/components/action-sheet.tsx

@@ -1,14 +1,16 @@
 import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
 import { backActionHelper } from '../lib';
 
-export type ActionSheetCloseProps = () => void;
+export type ActionSheetCloseProps = (reason?: ActionSheetCloseReasonProps) => void;
+
+export type ActionSheetCloseReasonProps = 'cancel' | 'confirm' | 'select' | undefined;
 
 export type ActionSheetShowProps = {
   title: string;
   children: string | VNode<any>;
   contentMaxWidth?: string;
   contentMaxHeight?: string;
-  closeEvent?: () => void;
+  closeEvent?: (reason?: ActionSheetCloseReasonProps) => void;
   closeWhenClickOutside?: boolean; // default true
   confirmButtonText?: string; // no showing if not set
   handleConfirmClicked?: (close: ActionSheetCloseProps) => void;
@@ -36,19 +38,19 @@ export class ActionSheet {
       if (handleConfirmClicked) {
         handleConfirmClicked(handleClose);
       } else {
-        handleClose();
+        handleClose('confirm');
       }
     };
     const onCancel = () => {
-      handleClose();
+      handleClose('cancel');
     };
     const onClickContainer = (event: any) => {
       if (closeWhenClickOutside !== false && event.target.classList.contains('act-sheet-box')) {
-        handleClose();
+        handleClose('cancel');
       }
     };
-    const handleClose = () => {
-      closeEvent?.();
+    const handleClose = (reason?: ActionSheetCloseReasonProps) => {
+      closeEvent?.(reason);
       ref.current.classList.remove('animation-open');
       setTimeout(() => {
         base.remove();
@@ -208,6 +210,7 @@ export class ActionSheetMessage {
   static async show({
     title,
     message,
+    contentMaxWidth,
     contentMaxHeight,
     closeWhenClickOutside = true,
     confirmButtonText,
@@ -216,7 +219,15 @@ export class ActionSheetMessage {
   }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
       title,
-      children: <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>{message}</div>,
+      children: (
+        <div
+          css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}
+          onClick={() => handleClose('select')}
+        >
+          {message}
+        </div>
+      ),
+      contentMaxWidth,
       contentMaxHeight,
       confirmButtonText,
       handleConfirmClicked,
@@ -227,6 +238,41 @@ export class ActionSheetMessage {
   }
 }
 
+export type ActionSheetMessagePromiseProps = {
+  message: string | VNode<any>;
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  closeWhenClickOutside?: boolean;
+  confirmButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetMessagePromise = async ({
+  title,
+  message,
+  contentMaxWidth,
+  contentMaxHeight,
+  closeWhenClickOutside = true,
+  confirmButtonText,
+  zIndex,
+}: ActionSheetMessagePromiseProps): Promise<void> => {
+  return new Promise(async (resolve, reject) => {
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      resolve();
+    };
+    await ActionSheet.show({
+      title,
+      children: <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>{message}</div>,
+      contentMaxWidth,
+      contentMaxHeight,
+      confirmButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};
+
 export type ActionSheetInputProps = Omit<
   ActionSheetShowProps,
   'children' | 'handleClicked' | 'closeEvent' | 'handleConfirmClicked'
@@ -268,3 +314,106 @@ export class ActionSheetInput {
     return handleClose;
   }
 }
+
+export type ActionSheetInputPromiseProps = {
+  defaultValue?: string;
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  closeWhenClickOutside?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetInputPromise = async ({
+  title,
+  defaultValue,
+  contentMaxWidth,
+  contentMaxHeight,
+  closeWhenClickOutside = true,
+  confirmButtonText = 'OK',
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetInputPromiseProps): Promise<string | undefined> => {
+  return new Promise(async (resolve, reject) => {
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'confirm') {
+        resolve(undefined);
+      }
+    };
+    let value: string = defaultValue || '';
+    await ActionSheet.show({
+      title,
+      children: (
+        <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>
+          <input
+            class='input-base w-100p'
+            type='text'
+            value={value}
+            onInput={(e) => (value = (e.target as HTMLInputElement).value)}
+          />
+        </div>
+      ),
+      contentMaxWidth,
+      contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked: (close) => {
+        resolve(value);
+        close('confirm');
+      },
+      closeEvent,
+      cancelButtonText,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};
+
+export type ActionSheetSelectPromiseProps = {
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  options?: string[];
+  closeWhenClickOutside?: boolean;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetSelectPromise = async ({
+  title,
+  contentMaxWidth,
+  contentMaxHeight,
+  options = ActionSheetSelectOptionsProps.Ok,
+  closeWhenClickOutside = true,
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetSelectPromiseProps): Promise<number> => {
+  return new Promise(async (resolve, reject) => {
+    const handleClicked = async (index: number, close: ActionSheetCloseProps) => {
+      resolve(index);
+      close('select');
+    };
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'select') {
+        resolve(-1);
+      }
+    };
+    const handleClose = await ActionSheet.show({
+      title,
+      children: (
+        <div>
+          {options.map((option, index) => (
+            <div class='act-sheet-item' key={index} onClick={() => handleClicked(index, handleClose)}>
+              {option}
+            </div>
+          ))}
+        </div>
+      ),
+      contentMaxWidth,
+      contentMaxHeight,
+      cancelButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};

package/src/components/html-load.tsx

@@ -0,0 +1,41 @@
+import { RefProps, VNode } from 'lupine.web';
+
+// load async html
+/*
+<HtmlLoad
+  html={async () => {
+    return <Footer title={await WebConfig.get('footer', `XXX`)}></Footer>;
+  }}
+></HtmlLoad>
+*/
+export type HtmlLoadHookProps = {
+  getRef?: () => RefProps;
+  render?: (html: string | VNode<any>) => void;
+};
+export type HtmlLoadProps = {
+  html: () => Promise<VNode<any>>;
+  initialHtml?: string | VNode<any>;
+  hook?: HtmlLoadHookProps;
+};
+export const HtmlLoad = (props: HtmlLoadProps) => {
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      const dom = await props.html();
+      await ref.mountInnerComponent!(dom);
+    },
+  };
+  if (props.hook) {
+    props.hook.getRef = () => ref;
+    props.hook.render = (html: string | VNode<any>) => {
+      ref.mountInnerComponent!(html);
+    };
+  }
+  return {
+    type: 'Fragment',
+    props: {
+      ref: ref,
+      children: props.initialHtml || '',
+    },
+    html: [],
+  };
+};

package/src/components/html-var.tsx

@@ -1,15 +1,15 @@
 import { RefProps, VNode } from 'lupine.web';
 
-export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
-
+export type HtmlVarValueProps = string | VNode<any> | (() => Promise<VNode<any>>);
+export type HtmlVarResult = { value: HtmlVarValueProps; ref: RefProps; node: VNode<any> };
 export class HtmlVar implements HtmlVarResult {
-  private _value: string | VNode<any>;
+  private _value: HtmlVarValueProps;
   private _dirty = false;
   private _ref: RefProps;
   private resolve!: () => void;
   private promise: Promise<void>;
 
-  constructor(initial?: string | VNode<any>) {
+  constructor(initial?: HtmlVarValueProps) {
     this.promise = new Promise<void>((res) => {
       this.resolve = res;
     });
@@ -28,7 +28,8 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   private async update(): Promise<void> {
-    await this._ref.mountInnerComponent!(this._value);
+    const v = typeof this._value === 'function' ? await this._value() : this._value;
+    await this._ref.mountInnerComponent!(v);
     this._dirty = false;
     this._value = '';
   }
@@ -38,7 +39,7 @@ export class HtmlVar implements HtmlVarResult {
     await this.promise;
   }
 
-  set value(value: string | VNode<any>) {
+  set value(value: HtmlVarValueProps) {
     this._value = value;
     if (this._dirty) {
       return;
@@ -55,7 +56,7 @@ export class HtmlVar implements HtmlVarResult {
     });
   }
 
-  get value(): string | VNode<any> {
+  get value(): HtmlVarValueProps {
     return this._ref.current ? this._ref.current.innerHTML : this._value;
   }
 
@@ -64,13 +65,15 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   get node(): VNode<any> {
-    this._dirty = false;
+    // if value is a function, it will be loaded later in onLoad
+    const delayLoad = typeof this._value === 'function';
+    this._dirty = delayLoad ? true : false;
     // the Fragment Tag will be present in the html if ref is assigned
     return {
       type: 'Fragment',
       props: {
         ref: this._ref,
-        children: this._value,
+        children: delayLoad ? '' : this._value,
       },
       html: [],
     };

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './drag-refresh';
 export * from './editable-label';
 export * from './float-window';
 export * from './grid';
+export * from './html-load';
 export * from './html-var';
 export * from './input-with-title';
 export * from './link-item';

package/src/components/input-with-title.tsx

@@ -9,7 +9,7 @@ export const InputWithTitle = (
 ) => {
   return (
     <div>
-      <div>{title}</div>
+      <div style={{ paddingBottom: '4px' }}>{title}</div>
       <div>
         <input
           class={className}

package/src/components/tabs.tsx

@@ -169,6 +169,10 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
       display: 'flex',
       height: 'auto',
       'border-bottom': '1px solid grey',
+      'overflow-x': 'auto',
+      'overflow-y': 'hidden',
+      'scrollbar-width': 'thin',
+      'scrollbar-color': '#ababab4d #d5d5d552',
       '> div > .tab': {
         padding: '2px 3px',
         width: 'auto',