lupine.components 1.1.6 → 1.1.8

package/package.json

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

package/src/components/action-sheet.tsx

@@ -226,3 +226,45 @@ export class ActionSheetMessage {
     return handleClose;
   }
 }
+
+export type ActionSheetInputProps = Omit<
+  ActionSheetShowProps,
+  'children' | 'handleClicked' | 'closeEvent' | 'handleConfirmClicked'
+> & {
+  defaultValue?: string;
+  handleConfirmValue: (value: string, close: ActionSheetCloseProps) => void;
+};
+export class ActionSheetInput {
+  static async show({
+    title,
+    defaultValue,
+    contentMaxHeight,
+    closeWhenClickOutside = true,
+    confirmButtonText = 'OK',
+    handleConfirmValue: handleConfirmValue,
+    cancelButtonText = 'Cancel',
+  }: ActionSheetInputProps): Promise<ActionSheetCloseProps> {
+    let value: string = defaultValue || '';
+    const handleClose = 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>
+      ),
+      contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked: (close) => {
+        handleConfirmValue(value, close);
+      },
+      cancelButtonText,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}

package/src/components/html-var.tsx

@@ -20,17 +20,17 @@ export class HtmlVar implements HtmlVarResult {
         // in case new resolve is created while updating
         const res = this.resolve;
         if (this._dirty) {
-          await this.update(this._value);
+          await this.update();
         }
         res();
       },
     };
   }
 
-  private async update(value: string | VNode<any>): Promise<void> {
+  private async update(): Promise<void> {
+    await this._ref.mountInnerComponent!(this._value);
     this._dirty = false;
     this._value = '';
-    await this._ref.mountInnerComponent!(value);
   }
 
   // need to wait before use ref.current
@@ -40,14 +40,17 @@ export class HtmlVar implements HtmlVarResult {
 
   set value(value: string | VNode<any>) {
     this._value = value;
-    if (this._dirty || !this._ref.current) {
+    if (this._dirty) {
       return;
     }
 
     this._dirty = true;
+    if (!this._ref.current) {
+      return;
+    }
     this.promise = new Promise<void>(async (res) => {
       this.resolve = res;
-      await this.update(value);
+      await this.update();
       this.resolve();
     });
   }

package/src/components/popup-menu.tsx

@@ -4,6 +4,7 @@ import { stopPropagation } from '../lib';
 export type PopupMenuHookProps = {
   openMenu?: (event?: MouseEvent) => void;
   getValue?: () => string;
+  setLabel?: (label: string) => void;
 };
 
 // defaultValue=<i class='ifc-icon co-cil-hamburger-menu'></i>
@@ -231,6 +232,9 @@ export const PopupMenu = ({
   if (hook) {
     hook.openMenu = openMenu;
     hook.getValue = () => selectedValue;
+    hook.setLabel = (label: string) => {
+      ref.$('.popup-menu-item .popup-menu-text').innerText = label;
+    };
   }
   const itemClick = (event: any) => {
     stopPropagation(event);