antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/2x/es/components/result-page/result-page.css

@@ -0,0 +1,130 @@
+.adm-result-page {
+  --background-color: var(--adm-color-primary);
+  position: relative;
+  background-color: var(--adm-color-box);
+  min-height: 100vh;
+  width: 100%;
+}
+
+.adm-result-page-header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: transparent;
+  position: relative;
+  padding: 40px;
+  padding-bottom: 200px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 4px;
+  margin-bottom: 16px;
+}
+
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 64px;
+}
+
+.adm-result-page-title {
+  font-size: var(--adm-font-size-10);
+  color: var(--adm-color-background);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-description {
+  margin-top: 16px;
+  margin-bottom: 48px;
+  font-size: var(--adm-font-size-6);
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-details {
+  width: 100%;
+}
+
+.adm-result-page-detail {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: var(--adm-color-background);
+  font-size: var(--adm-font-size-6);
+}
+
+.adm-result-page-detail-bold {
+  font-weight: 600;
+}
+
+.adm-result-page-collapse {
+  opacity: 0.6;
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  margin-bottom: 10px;
+  border-top: 4px solid var(--adm-color-background);
+  border-right: 4px solid var(--adm-color-background);
+  transform: rotate(135deg);
+}
+
+.adm-result-page-collapse-active {
+  transform: rotate(-45deg);
+}
+
+.adm-result-page-bgWrapper {
+  position: relative;
+  align-self: flex-start;
+  top: 108px;
+}
+
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 40px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+
+.adm-result-page-content {
+  position: relative;
+  padding: 24px;
+  top: -208px;
+  z-index: 2;
+}
+
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 24px;
+  padding-bottom: 48px;
+  display: flex;
+  justify-content: center;
+  background-color: var(--adm-color-box);
+  z-index: 3;
+}
+
+.adm-result-page-footer-btn {
+  flex: 1;
+  max-width: calc((100vw - 72px) / 2);
+}
+
+.adm-result-page-footer-space {
+  width: 24px;
+}
+
+.adm-result-page-card {
+  border-radius: 16px;
+  background-color: var(--adm-color-background);
+}

package/2x/es/components/result-page/result-page.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+interface ResultPageDetail {
+    label: ReactNode;
+    value: ReactNode;
+    bold?: boolean;
+}
+declare type ResultPageDetails = ResultPageDetail[];
+declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+export declare type ResultPageProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    details?: ResultPageDetails;
+    children?: ReactNode;
+    primaryButtonText?: ReactNode;
+    secondaryButtonText?: ReactNode;
+    onPrimaryButtonClick?: OnClick;
+    onSecondaryButtonClick?: OnClick;
+} & NativeProps<'--background-color'>;
+export declare const ResultPage: FC<ResultPageProps>;
+export {};

package/2x/es/components/result-page/result-page.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
+import Button from '../button';
+const classPrefix = `adm-result-page`;
+const iconRecord = {
+  success: CheckCircleFill,
+  error: CloseCircleFill,
+  info: InformationCircleFill,
+  waiting: ClockCircleFill,
+  warning: ExclamationCircleFill
+};
+const defaultProps = {
+  status: 'info',
+  details: []
+};
+export const ResultPage = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    status,
+    title,
+    description,
+    details,
+    icon,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick
+  } = props;
+  const resultIcon = icon || React.createElement(iconRecord[status]);
+  const [collapse, setCollapse] = useState(true);
+  const showSecondaryButton = isNodeWithContent(secondaryButtonText);
+  const showPrimaryButton = isNodeWithContent(primaryButtonText);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), isNodeWithContent(description) ? React.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null, details.length ? React.createElement("div", {
+    className: `${classPrefix}-details`
+  }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
+      key: index
+    }, React.createElement("span", null, detail.label), React.createElement("span", null, detail.value));
+  }), details.length > 3 && React.createElement("div", {
+    onClick: () => setCollapse(prev => !prev)
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
+  }))) : null, React.createElement("div", {
+    className: `${classPrefix}-bgWrapper`
+  }, React.createElement("div", {
+    className: `${classPrefix}-bg`
+  }))), React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children), React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, showSecondaryButton && React.createElement(Button, {
+    block: true,
+    color: 'default',
+    fill: 'solid',
+    size: 'large',
+    onClick: onSecondaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, secondaryButtonText), showPrimaryButton && showSecondaryButton && React.createElement("div", {
+    className: `${classPrefix}-footer-space`
+  }), showPrimaryButton && React.createElement(Button, {
+    block: true,
+    color: 'primary',
+    fill: 'solid',
+    size: 'large',
+    onClick: onPrimaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, primaryButtonText))));
+};

package/2x/es/components/safe-area/safe-area.css

@@ -1,12 +1,13 @@
 .adm-safe-area {
+  --multiple: var(--adm-safe-area-multiple, 1);
   display: block;
   width: 100%;
 }
 
 .adm-safe-area-position-top {
-  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
+  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
 }
 
 .adm-safe-area-position-bottom {
-  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
 }

package/2x/es/components/scroll-mask/scroll-mask.css

@@ -10,10 +10,10 @@
 
 .adm-scroll-mask-left {
   left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
 }
 
 .adm-scroll-mask-right {
   right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
 }

package/2x/es/components/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,7 @@
+.adm-scroll-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+
+.adm-scroll-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/2x/es/components/search-bar/search-bar.css

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 64px;
   --padding-left: 16px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 12px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -25,7 +25,7 @@
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 32px;
+  font-size: var(--adm-font-size-8);
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
@@ -37,7 +37,7 @@
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 30px;
+  --font-size: var(--adm-font-size-7);
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
@@ -63,5 +63,5 @@
 
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }

package/2x/es/components/search-bar/search-bar.d.ts

@@ -31,4 +31,8 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<InputRef>>;

package/2x/es/components/search-bar/search-bar.js

@@ -26,6 +26,7 @@ export const SearchBar = forwardRef((p, ref) => {
   const [value, setValue] = usePropsValue(props);
   const [hasFocus, setHasFocus] = useState(false);
   const inputRef = useRef(null);
+  const composingRef = useRef(false);
   useImperativeHandle(ref, () => ({
     clear: () => {
       var _a;
@@ -52,7 +53,7 @@ export const SearchBar = forwardRef((p, ref) => {
   }));
 
   const renderCancelButton = () => {
-    let isShowCancel = false;
+    let isShowCancel;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);
@@ -61,13 +62,7 @@ export const SearchBar = forwardRef((p, ref) => {
     }
 
     return isShowCancel && React.createElement("div", {
-      className: `${classPrefix}-suffix`,
-      onMouseDown: e => {
-        e.preventDefault();
-      },
-      onTouchStart: e => {
-        e.preventDefault();
-      }
+      className: `${classPrefix}-suffix`
     }, React.createElement(Button, {
       fill: 'none',
       className: `${classPrefix}-cancel-button`,
@@ -80,6 +75,9 @@ export const SearchBar = forwardRef((p, ref) => {
 
         (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
         (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      },
+      onMouseDown: e => {
+        e.preventDefault();
       }
     }, props.cancelText));
   };
@@ -121,8 +119,17 @@ export const SearchBar = forwardRef((p, ref) => {
     onEnterPress: () => {
       var _a, _b;
 
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      if (!composingRef.current) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+      }
+    },
+    "aria-label": locale.SearchBar.name,
+    onCompositionStart: () => {
+      composingRef.current = true;
+    },
+    onCompositionEnd: () => {
+      composingRef.current = false;
     }
   })), renderCancelButton()));
 });

package/2x/es/components/selector/selector.css

@@ -1,5 +1,5 @@
 .adm-selector {
-  --color: #f5f5f5;
+  --color: var(--adm-color-box);
   --checked-color: #e7f1ff;
   --text-color: var(--adm-color-text);
   --checked-text-color: var(--adm-color-primary);
@@ -7,8 +7,12 @@
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 
@@ -16,6 +20,12 @@
   --gap: 24px;
 }
 
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
+
 .adm-selector-item {
   padding: var(--padding);
   position: relative;
@@ -32,7 +42,7 @@
 }
 
 .adm-selector-item-description {
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 

package/2x/es/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/2x/es/components/selector/selector.js

@@ -4,7 +4,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
-import { convertPx } from '../../utils/convert-px';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
@@ -65,7 +64,6 @@ export const Selector = p => {
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {
-    columns: props.columns,
-    gap: convertPx(8)
+    columns: props.columns
   }, items)));
 };

package/2x/es/components/side-bar/corner.js

@@ -9,6 +9,6 @@ export const Corner = memo(props => withNativeProps(props, React.createElement("
   fillRule: 'evenodd'
 }, React.createElement("path", {
   d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
-  fill: 'var(--adm-color-white)',
+  fill: 'var(--adm-color-background)',
   transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
 })))));

package/2x/es/components/side-bar/side-bar.css

@@ -2,11 +2,11 @@
   --height: 100%;
   --width: 210px;
   --item-border-radius: 16px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -49,7 +49,7 @@
 
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
   position: relative;
 }
 
@@ -59,6 +59,7 @@
   position: absolute;
   z-index: 100;
   right: 0;
+  -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
 }

package/2x/es/components/side-bar/side-bar.d.ts

@@ -1,10 +1,11 @@
 import { FC, ReactNode } from 'react';
 import React from 'react';
+import { BadgeProps } from '../badge';
 import { NativeProps } from '../../utils/native-props';
 export declare type SideBarItemProps = {
     title?: ReactNode;
     disabled?: boolean;
-    badge?: ReactNode;
+    badge?: BadgeProps['content'];
 } & NativeProps;
 export declare const SideBarItem: FC<SideBarItemProps>;
 export declare type SideBarProps = {

package/2x/es/components/side-bar/side-bar.js

@@ -6,6 +6,8 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { Corner } from './corner';
 import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-side-bar`;
+/* istanbul ignore next */
+
 export const SideBarItem = () => {
   return null;
 };

package/2x/es/components/slider/slider.css

@@ -1,7 +1,8 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 8px 24px;
+  padding: 10px 28px;
   list-style: none;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -12,33 +13,34 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 8px;
-  background-color: #f5f5f5;
+  height: 6px;
+  background-color: var(--adm-color-box);
+  border-radius: 6px;
 }
 
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 8px;
+  height: 6px;
+  border-radius: 6px;
   background-color: var(--fill-color);
 }
 
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 8px;
+  height: 6px;
   background: transparent;
 }
 
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 22px;
-  height: 22px;
-  margin-left: -10px;
-  background-color: #f5f5f5;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+  margin-left: -6px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 
 .adm-slider-tick-active {
@@ -46,14 +48,15 @@
 }
 
 .adm-slider-thumb {
-  width: 44px;
-  height: 44px;
-  margin: 10px;
+  width: 56px;
+  height: 56px;
+  margin: 4px;
   border-radius: 50%;
   text-align: center;
-  line-height: 44px;
+  line-height: 56px;
   background: var(--adm-color-white);
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 
 .adm-slider-thumb:focus {
@@ -61,13 +64,15 @@
 }
 
 .adm-slider-thumb-icon {
-  width: 20px;
-  height: 20px;
-  margin: 12px;
+  width: 24px;
+  height: 24px;
+  margin: 16px;
+  -webkit-user-select: none;
   user-select: none;
 }
 
 .adm-slider-thumb-container {
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
   position: absolute;
@@ -83,28 +88,43 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 24px;
-  height: 24px;
-  margin-top: 8px;
+  font-size: var(--adm-font-size-3);
+  height: 22px;
+  margin-top: 20px;
 }
 
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 32px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
+  -webkit-user-select: none;
   user-select: none;
   transform: translateX(-50%);
 }
 
-.adm-slider-disabled {
+.adm-slider-disabled .adm-slider-mark,
+.adm-slider-disabled .adm-slider-thumb-icon {
   opacity: 0.4;
 }
 
+.adm-slider-disabled .adm-slider-tick-active::after,
+.adm-slider-disabled .adm-slider-fill::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
 .adm-slider-disabled .adm-slider-thumb {
   cursor: not-allowed;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
 }
 
 .adm-slider-disabled .adm-slider-mark-text,