lupine.components 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",

package/src/components/action-sheet.tsx

@@ -0,0 +1,191 @@
+import { CssProps, RefProps, VNode, mountComponents } from 'lupine.web';
+
+export type ActionSheetCloseProps = () => void;
+
+export type ActionSheetShowProps = {
+  title: string;
+  children: VNode<any>;
+  contentMaxHeight?: string;
+  closeEvent?: () => void;
+  closeWhenClickOutside?: boolean; // default true
+  cancelButtonText?: string; // no showing if not set
+  zIndex?: string;
+};
+
+// because it's over a mask, so it can use primary colors
+export class ActionSheet {
+  static hostNode: HTMLElement;
+
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    closeEvent,
+    closeWhenClickOutside = true,
+    cancelButtonText = 'Cancel',
+    zIndex,
+  }: ActionSheetShowProps): Promise<ActionSheetCloseProps> {
+    const onCancel = () => {
+      handleClose();
+    };
+    const onClickContainer = (event: any) => {
+      if (closeWhenClickOutside !== false && event.target.className === 'act-sheet-box') {
+        handleClose();
+      }
+    };
+    const handleClose = () => {
+      closeEvent?.();
+      ref.current.classList.remove('animation-open');
+      setTimeout(() => {
+        base.remove();
+      }, 300);
+    };
+
+    const base = document.createElement('div');
+    const ref: RefProps = {
+      onLoad: async () => {
+        setTimeout(() => {
+          ref.current.classList.add('animation-open');
+        }, 1);
+      },
+    };
+    const cssContainer: CssProps = {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'var(--cover-mask-bg-color)',
+      '.act-sheet-body': {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'center',
+        position: 'fixed',
+        bottom: '0px',
+        left: '0px',
+        width: '100%',
+        maxHeight: contentMaxHeight ? contentMaxHeight : '',
+        color: 'var(--primary-color)',
+        padding: '8px',
+        transition: 'all 0.3s',
+        transform: 'translateY(100%)',
+        '&.animation-open': {
+          transform: 'translateY(0)',
+        },
+        '.act-sheet-title': {
+          padding: '20px 15px 10px 15px',
+          opacity: 0.5,
+        },
+        '.act-sheet-content': {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          overflowY: 'auto',
+          borderRadius: '8px',
+          backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
+          width: '100%',
+          maxWidth: '450px',
+          margin: '0 auto',
+        },
+        '.act-sheet-bottom-item, .act-sheet-item': {
+          backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
+          padding: '20px 0',
+          cursor: 'pointer',
+          transition: 'all 0.3s ease',
+          width: '100%',
+          maxWidth: '450px',
+          borderTop: '1px solid var(--primary-border-color)',
+        },
+        '.act-sheet-bottom-item': {
+          borderRadius: '8px',
+          margin: '0 auto',
+          marginTop: '4px',
+        },
+        '.act-sheet-bottom-item:hover, .act-sheet-item:hover': {
+          fontWeight: 'bold',
+        },
+      },
+    };
+    const component = (
+      <div css={cssContainer} class='act-sheet-box' onClick={onClickContainer}>
+        <div ref={ref} class='act-sheet-body'>
+          <div class='act-sheet-content'>
+            <div class='act-sheet-title'>{title}</div>
+            {children}
+          </div>
+          {cancelButtonText && (
+            <div class='act-sheet-bottom-item' onClick={onCancel}>
+              {cancelButtonText}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+    base.style.position = 'fixed';
+    base.style.zIndex = zIndex || 'var(--layer-actionsheet-window)';
+    document.body.appendChild(base);
+    await mountComponents(base, component);
+    return handleClose;
+  }
+}
+
+export const ActionSheetSelectOptionsProps = {
+  YesNo: ['Yes', 'No'],
+  OkCancel: ['OK'],
+};
+export type ActionSheetSelectProps = Omit<ActionSheetShowProps, 'children'> & {
+  options: string[];
+  handleClicked: (index: number, close: ActionSheetCloseProps) => void;
+};
+
+export class ActionSheetSelect {
+  static async show({
+    title,
+    contentMaxHeight,
+    options = ActionSheetSelectOptionsProps.OkCancel,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = true,
+    cancelButtonText = 'Cancel',
+  }: ActionSheetSelectProps): Promise<ActionSheetCloseProps> {
+    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>
+      ),
+      contentMaxHeight,
+      cancelButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}
+
+export type ActionSheetMessageProps = Omit<ActionSheetShowProps, 'children' | 'handleClicked' | 'closeEvent'> & {
+  message: string;
+};
+export class ActionSheetMessage {
+  static async show({
+    title,
+    message,
+    contentMaxHeight,
+    closeWhenClickOutside = true,
+    cancelButtonText = '',
+  }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
+    const handleClose = await ActionSheet.show({
+      title,
+      children: <div css={{ padding: '0 8px 16px 8px' }}>{message}</div>,
+      contentMaxHeight,
+      cancelButtonText,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}

package/src/components/float-window.tsx

@@ -14,6 +14,7 @@ export type FloatWindowShowProps = {
   closeEvent?: () => void;
   handleClicked: (index: number, close: FloatWindowCloseProps) => void;
   closeWhenClickOutside?: boolean; // default false
+  zIndex?: string;
 };
 
 // because it's over a mask, so it can use primary colors
@@ -43,6 +44,7 @@ export class FloatWindow {
     closeEvent,
     handleClicked,
     closeWhenClickOutside = false,
+    zIndex,
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     const onClickContainer = (event: any) => {
       if (closeWhenClickOutside !== false && event.target.className === 'fwin-box') {
@@ -78,7 +80,10 @@ export class FloatWindow {
 
     const ref: RefProps = {
       onLoad: async () => {
-        ref.current.classList.add('transition', 'animation');
+        ref.current.classList.add('transition');
+        setTimeout(() => {
+          ref.current.classList.add('animation');
+        }, 1);
         setTimeout(() => {
           // don't need transition for moving
           ref.current.classList.remove('transition');
@@ -177,7 +182,7 @@ export class FloatWindow {
       </div>
     );
     base.style.position = 'fixed';
-    base.style.zIndex = 'var(--layer-float-window)';
+    base.style.zIndex = zIndex || 'var(--layer-float-window)';
     document.body.appendChild(base);
     await mountComponents(base, component);
     return handleClose;

package/src/components/index.ts

@@ -1,4 +1,5 @@
 
+export * from './action-sheet';
 export * from './button-push-animation';
 export * from './button';
 export * from './drag-refresh';

package/src/styles/shared-themes.ts

@@ -11,6 +11,7 @@ export const sharedThemes: ThemeProps = {
   '--layer-modal': '600',
   '--layer-modal-over': '610',
   '--layer-float-window': '700',
+  '--layer-actionsheet-window': '710',
   '--layer-menu': '800', // popup menu
   '--layer-menu-sub': '810',
   '--layer-notice': '900', // notice, loading, toast