lupine.components 1.1.13 → 1.1.14

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

@@ -1,101 +1,109 @@
-/*
-MobileHeaderTitleIcon can be used in MobileHeaderComponent's Center part.
-It has it's own Left and Right icons.
-*/
-import { VNode, CssProps, HtmlVar, backActionHelper } from 'lupine.components';
-
-export const MobileHeadeIconHeight = '40px';
-export const MobileHeadeBackIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return (
-    <i
-      class={'ifc-icon mg-arrow_back_ios_new_outlined mhti-back-icon'}
-      data-back-action={backActionHelper.genBackActionId()}
-      onClick={(event) => onClick(event)}
-    ></i>
-  );
-};
-
-export const MobileHeadeCloseIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return <i class='ifc-icon ma-close mhti-close-icon' onClick={(event) => onClick(event)}></i>;
-};
-
-export const MobileHeaderEmptyIcon = () => {
-  return <div class='mhti-empty-icon' style={{ width: '28px' }}></div>;
-};
-
-export interface MobileHeaderTitleIconProps {
-  title: VNode<any> | string | HtmlVar;
-  onBack?: (event: Event) => void;
-  left?: VNode<any> | HtmlVar;
-  right?: VNode<any> | HtmlVar;
-  background?: string;
-  color?: string;
-  noShadow?: boolean;
-}
-// there may have a few MobileHeaderTitleIcon for different pages
-export const MobileHeaderTitleIcon = ({ title, onBack, left, right, background, color, noShadow }: MobileHeaderTitleIconProps) => {
-  // const processBack = (event: Event) => {
-  //   if (onBack) {
-  //     onBack(event);
-  //   }
-  // };
-  // left = left || <MobileHeadeBackIcon onClick={processBack} />;
-  // right = right || <MobileHeadeCloseIcon onClick={processBack} />;
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100vw',
-    padding: '6px 0',
-    // backgroundColor: 'var(--activatable-bg-color-normal)',
-    // boxShadow: 'var(--mobile-header-shadow)',
-    color: color || 'var(--primary-color)',
-    background: background || 'var(--activatable-bg-color-normal)',
-    boxShadow: noShadow ? 'unset' : 'var(--mobile-header-shadow)',
-    zIndex: 'var(--layer-inside)', // bring boxShadow to front
-    '.mhti-title': {
-      display: 'flex',
-      fontSize: '1.3rem',
-      flex: '1',
-      color: 'var(--activatable-text-color-normal)',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    '.mhti-title > *': {
-      display: 'flex',
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    '.mhti-left, .mhti-right': {
-      height: MobileHeadeIconHeight,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      fontSize: '16px',
-    },
-    '.mhti-left': {
-      paddingLeft: '8px',
-    },
-    '.mhti-right': {
-      paddingRight: '8px',
-    },
-    '.mhti-left i, .mhti-right i': {
-      fontSize: '28px',
-    },
-  };
-
-  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>
-      <div class='mhti-title'>{domCenter.node}</div>
-      <div class='mhti-right'>{domRight.node}</div>
-    </div>
-  );
-};
+/*
+MobileHeaderTitleIcon can be used in MobileHeaderComponent's Center part.
+It has it's own Left and Right icons.
+*/
+import { VNode, CssProps, HtmlVar, backActionHelper } from 'lupine.components';
+
+export const MobileHeadeIconHeight = '40px';
+export const MobileHeadeBackIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return (
+    <i
+      class={'ifc-icon mg-arrow_back_ios_new_outlined mhti-back-icon'}
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
+  );
+};
+
+export const MobileHeadeCloseIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return <i class='ifc-icon ma-close mhti-close-icon' onClick={(event) => onClick(event)}></i>;
+};
+
+export const MobileHeaderEmptyIcon = () => {
+  return <div class='mhti-empty-icon' style={{ width: '28px' }}></div>;
+};
+
+export interface MobileHeaderTitleIconProps {
+  title: VNode<any> | string | HtmlVar;
+  onBack?: (event: Event) => void;
+  left?: VNode<any> | HtmlVar;
+  right?: VNode<any> | HtmlVar;
+  background?: string;
+  color?: string;
+  noShadow?: boolean;
+}
+// there may have a few MobileHeaderTitleIcon for different pages
+export const MobileHeaderTitleIcon = ({
+  title,
+  onBack,
+  left,
+  right,
+  background,
+  color,
+  noShadow,
+}: MobileHeaderTitleIconProps) => {
+  // const processBack = (event: Event) => {
+  //   if (onBack) {
+  //     onBack(event);
+  //   }
+  // };
+  // left = left || <MobileHeadeBackIcon onClick={processBack} />;
+  // right = right || <MobileHeadeCloseIcon onClick={processBack} />;
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100vw',
+    padding: '6px 0',
+    // backgroundColor: 'var(--activatable-bg-color-normal)',
+    // boxShadow: 'var(--mobile-header-shadow)',
+    color: color || 'var(--primary-color)',
+    background: background || 'var(--activatable-bg-color-normal)',
+    boxShadow: noShadow ? 'unset' : 'var(--mobile-header-shadow)',
+    zIndex: 'var(--layer-inside)', // bring boxShadow to front
+    '.mhti-title': {
+      display: 'flex',
+      fontSize: '1.3rem',
+      flex: '1',
+      color: 'var(--activatable-text-color-normal)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    '.mhti-title > *': {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    '.mhti-left, .mhti-right': {
+      height: MobileHeadeIconHeight,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      fontSize: '16px',
+    },
+    '.mhti-left': {
+      paddingLeft: '8px',
+    },
+    '.mhti-right': {
+      paddingRight: '8px',
+    },
+    '.mhti-left i, .mhti-right i': {
+      fontSize: '28px',
+    },
+  };
+
+  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>
+      <div class='mhti-title'>{domCenter.node}</div>
+      <div class='mhti-right'>{domRight.node}</div>
+    </div>
+  );
+};

package/src/components/mobile-components/mobile-header-with-back.tsx

@@ -1,117 +1,127 @@
-/*
-HeaderWithBackFrame is a full page frame with header for mobile sliders.
-It has Back icon at Left and Close icon at Right.
-*/
-import { VNode, CssProps, RefProps, HtmlVar, backActionHelper } from 'lupine.components';
-import { MobileHeaderTitleIcon } from './mobile-header-title-icon';
-
-export const HeaderWithBackFrameHeight = '40px';
-export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return (
-    <i
-      class='ifc-icon mg-arrow_back_ios_new_outlined header-back-left-icon'
-      data-back-action={backActionHelper.genBackActionId()}
-      onClick={(event) => onClick(event)}
-    ></i>
-  );
-};
-
-export const HeaderWithBackFrameRight = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return <i class='ifc-icon ma-close header-back-right-icon' onClick={(event) => onClick(event)}></i>;
-};
-
-export const HeaderWithBackFrameEmpty = () => {
-  return <div class='header-back-top-empty'></div>;
-};
-
-// there may have a few HeaderWithBackFrame one over another at the same time
-export const HeaderWithBackFrame = ({
-  children,
-  title,
-  onBack,
-  left,
-  right,
-  noHeader = false,
-  background,
-  color,
-  noShadow,
-  contentColor,
-  contentBackground,
-}: {
-  children: VNode<any>;
-  title: VNode<any> | string | HtmlVar;
-  onBack: (event: Event) => void;
-  left?: VNode<any> | HtmlVar;
-  right?: VNode<any> | HtmlVar;
-  noHeader?: boolean;
-  color?: string;
-  background?: string;
-  noShadow?: boolean;
-  contentColor?: string;
-  contentBackground?: string;
-}) => {
-  left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
-  right = right || <HeaderWithBackFrameRight onClick={onBack} />;
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-    minHeight: '100%',
-    background: background || 'var(--activatable-bg-color-normal)',
-    '.header-back-top': {
-      display: 'flex',
-      flexDirection: 'row',
-      width: '100vw',
-      padding: '6px 0',
-      backgroundColor: 'var(--activatable-bg-color-normal)',
-      boxShadow: 'var(--mobile-header-shadow)',
-    },
-    '.header-back-content': {
-      display: 'flex',
-      flex: '1',
-      flexDirection: 'column',
-      overflowY: 'auto',
-      scrollbarWidth: 'none',
-      position: 'relative',
-      color: contentColor || 'var(--primary-color)',
-      background: contentBackground || 'var(--activatable-bg-color-normal)',
-      '&::-webkit-scrollbar': {
-        display: 'none',
-        // height: '0',
-      },
-    },
-    '.header-back-title': {
-      fontSize: '15px',
-      flex: '1',
-      color: 'var(--activatable-text-color-normal)',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    },
-    '.header-back-left, .header-back-right': {
-      // width: HeaderWithBackFrameHeight,
-      height: HeaderWithBackFrameHeight,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      fontSize: '16px',
-      padding: '0 8px',
-    },
-    '.header-back-left i, .header-back-right i': {
-      fontSize: '28px',
-    },
-  };
-
-  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} title={domCenter} right={domRight} background={background} color={color} noShadow={noShadow} />}
-      <div class='header-back-content'>{children}</div>
-    </div>
-  );
-};
+/*
+HeaderWithBackFrame is a full page frame with header for mobile sliders.
+It has Back icon at Left and Close icon at Right.
+*/
+import { VNode, CssProps, RefProps, HtmlVar, backActionHelper } from 'lupine.components';
+import { MobileHeaderTitleIcon } from './mobile-header-title-icon';
+
+export const HeaderWithBackFrameHeight = '40px';
+export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return (
+    <i
+      class='ifc-icon mg-arrow_back_ios_new_outlined header-back-left-icon'
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
+  );
+};
+
+export const HeaderWithBackFrameRight = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return <i class='ifc-icon ma-close header-back-right-icon' onClick={(event) => onClick(event)}></i>;
+};
+
+export const HeaderWithBackFrameEmpty = () => {
+  return <div class='header-back-top-empty'></div>;
+};
+
+// there may have a few HeaderWithBackFrame one over another at the same time
+export const HeaderWithBackFrame = ({
+  children,
+  title,
+  onBack,
+  left,
+  right,
+  noHeader = false,
+  background,
+  color,
+  noShadow,
+  contentColor,
+  contentBackground,
+}: {
+  children: VNode<any>;
+  title: VNode<any> | string | HtmlVar;
+  onBack: (event: Event) => void;
+  left?: VNode<any> | HtmlVar;
+  right?: VNode<any> | HtmlVar;
+  noHeader?: boolean;
+  color?: string;
+  background?: string;
+  noShadow?: boolean;
+  contentColor?: string;
+  contentBackground?: string;
+}) => {
+  left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
+  right = right || <HeaderWithBackFrameRight onClick={onBack} />;
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    minHeight: '100%',
+    background: background || 'var(--activatable-bg-color-normal)',
+    '.header-back-top': {
+      display: 'flex',
+      flexDirection: 'row',
+      width: '100vw',
+      padding: '6px 0',
+      backgroundColor: 'var(--activatable-bg-color-normal)',
+      boxShadow: 'var(--mobile-header-shadow)',
+    },
+    '.header-back-content': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      scrollbarWidth: 'none',
+      position: 'relative',
+      color: contentColor || 'var(--primary-color)',
+      background: contentBackground || 'var(--activatable-bg-color-normal)',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+        // height: '0',
+      },
+    },
+    '.header-back-title': {
+      fontSize: '15px',
+      flex: '1',
+      color: 'var(--activatable-text-color-normal)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+    '.header-back-left, .header-back-right': {
+      // width: HeaderWithBackFrameHeight,
+      height: HeaderWithBackFrameHeight,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      fontSize: '16px',
+      padding: '0 8px',
+    },
+    '.header-back-left i, .header-back-right i': {
+      fontSize: '28px',
+    },
+  };
+
+  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}
+          title={domCenter}
+          right={domRight}
+          background={background}
+          color={color}
+          noShadow={noShadow}
+        />
+      )}
+      <div class='header-back-content'>{children}</div>
+    </div>
+  );
+};