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

package/es/components/progress-bar/progress-bar.js

@@ -1,20 +1,40 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import classNames from 'classnames';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
 const classPrefix = `adm-progress-bar`;
+const defaultProps = {
+  percent: 0,
+  rounded: true,
+  text: false
+};
 export const ProgressBar = p => {
-  const props = mergeProps({
-    percent: 0
-  }, p);
+  const props = mergeProps(defaultProps, p);
   const fillStyle = {
     width: `${props.percent}%`
   };
+
+  const textElement = function () {
+    if (props.text === true) {
+      return `${props.percent}%`;
+    }
+
+    if (typeof props.text === 'function') {
+      return props.text(props.percent);
+    }
+
+    return props.text;
+  }();
+
   return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
+    className: classNames(classPrefix, props.rounded && `${classPrefix}-rounded`)
   }, React.createElement("div", {
     className: `${classPrefix}-trail`
   }, React.createElement("div", {
     className: `${classPrefix}-fill`,
     style: fillStyle
-  }))));
+  })), isNodeWithContent(textElement) && React.createElement("div", {
+    className: `${classPrefix}-text`
+  }, textElement)));
 };

package/es/components/radio/radio.css

@@ -1,6 +1,6 @@
 .adm-radio {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,7 +41,7 @@
 .adm-radio.adm-radio-disabled .adm-radio-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-radio .adm-radio-custom-icon {
   font-size: var(--icon-size);

package/es/components/radio/radio.js

@@ -38,16 +38,16 @@ export const Radio = p => {
 
     checked = groupContext.value.includes(value);
 
-    setChecked = checked => {
+    setChecked = innerChecked => {
       var _a;
 
-      if (checked) {
+      if (innerChecked) {
         groupContext.check(value);
       } else {
         groupContext.uncheck(value);
       }
 
-      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
     };
 
     disabled = disabled || groupContext.disabled;

package/es/components/rate/rate.css

@@ -1,14 +1,18 @@
 .adm-rate {
   --star-size: 24px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-light);
+  --inactive-color: #e5e5e5;
+  --inactive-color-half: #dbdbdb;
   display: inline-flex;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-rate-box {
   position: relative;
 }
 .adm-rate-star {
-  padding: calc(var(--star-size) / 8);
+  padding: 0.125em;
   line-height: var(--star-size);
   font-size: var(--star-size);
   color: var(--inactive-color);
@@ -16,6 +20,7 @@
   overflow: hidden;
   cursor: pointer;
   box-sizing: border-box;
+  transition: all 0.3s;
 }
 .adm-rate-star-half {
   padding-right: 0;
@@ -30,3 +35,6 @@
 .adm-rate-star-readonly {
   cursor: unset;
 }
+.adm-rate.adm-rate-half .adm-rate-star-half:not(.adm-rate-star-active) {
+  color: var(--inactive-color-half);
+}

package/es/components/rate/rate.js

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-import { StarFill } from 'antd-mobile-icons';
 import { usePropsValue } from '../../utils/use-props-value';
+import { Star } from './star';
+import { useDrag } from '@use-gesture/react';
+import { bound } from '../../utils/bound';
 const classPrefix = `adm-rate`;
 const defaultProps = {
   count: 5,
   allowHalf: false,
-  character: React.createElement(StarFill, null),
+  character: React.createElement(Star, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true
@@ -16,6 +18,7 @@ const defaultProps = {
 export const Rate = p => {
   const props = mergeProps(defaultProps, p);
   const [value, setValue] = usePropsValue(props);
+  const containerRef = useRef(null);
   const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
@@ -25,21 +28,48 @@ export const Rate = p => {
         [`${classPrefix}-star-half`]: half,
         [`${classPrefix}-star-readonly`]: props.readOnly
       }),
-      onClick: () => {
-        if (props.readOnly) return;
-
-        if (props.allowClear && value === v) {
-          setValue(0);
-        } else {
-          setValue(v);
-        }
-      }
+      role: 'radio',
+      "aria-checked": value >= v,
+      "aria-label": '' + v
     }, props.character);
   }
 
-  return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
-  }, starList.map((_, i) => React.createElement("div", {
+  const bind = useDrag(state => {
+    if (props.readOnly) return;
+    const {
+      xy: [clientX],
+      tap
+    } = state;
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const rawValue = (clientX - rect.left) / rect.width * props.count;
+    const ceiledValue = props.allowHalf ? Math.ceil(rawValue * 2) / 2 : Math.ceil(rawValue);
+    const boundValue = bound(ceiledValue, 0, props.count);
+
+    if (tap) {
+      if (props.allowClear && boundValue === value) {
+        setValue(0);
+        return;
+      }
+    }
+
+    setValue(boundValue);
+  }, {
+    axis: 'x',
+    pointer: {
+      touch: true
+    },
+    filterTaps: true
+  });
+  return withNativeProps(props, React.createElement("div", Object.assign({
+    className: classNames(classPrefix, {
+      [`${classPrefix}-half`]: props.allowHalf
+    }),
+    role: 'radiogroup',
+    "aria-readonly": props.readOnly,
+    ref: containerRef
+  }, bind()), starList.map((_, i) => React.createElement("div", {
     key: i,
     className: classNames(`${classPrefix}-box`)
   }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));

package/es/components/rate/star.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Star: FC;

package/es/components/rate/star.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export const Star = () => {
+  return React.createElement("svg", {
+    viewBox: '0 0 42 40',
+    height: '1em',
+    xmlns: 'http://www.w3.org/2000/svg',
+    style: {
+      verticalAlign: '-0.125em'
+    }
+  }, React.createElement("path", {
+    d: 'm21 34-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L39.815 14a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L21 34Z',
+    fill: 'currentColor',
+    fillRule: 'evenodd'
+  }));
+};

package/es/components/result/result.css

@@ -1,6 +1,6 @@
 .adm-result {
   padding: 32px 12px;
-  background-color: var(--adm-color-white);
+  background-color: var(--adm-color-background);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -14,14 +14,14 @@
 }
 .adm-result-title {
   color: var(--adm-color-text);
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 1.4;
   text-align: center;
 }
 .adm-result-description {
   margin-top: 8px;
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   line-height: 1.4;
   text-align: center;
 }

package/es/components/result/result.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ResultProps = {
-    status: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
     title: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;

package/es/components/result/result.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = `adm-result`;
 const iconRecord = {
   success: CheckCircleFill,
@@ -10,7 +11,11 @@ const iconRecord = {
   waiting: ClockCircleFill,
   warning: ExclamationCircleFill
 };
-export const Result = props => {
+const defaultProps = {
+  status: 'info'
+};
+export const Result = p => {
+  const props = mergeProps(defaultProps, p);
   const {
     status,
     title,

package/es/components/result-page/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './result-page.less';
+export type { ResultPageProps } from './result-page';
+declare const _default: import("react").FC<import("./result-page").ResultPageProps> & {
+    Card: import("react").FC<import("./result-page-card").ResultPageCardProps>;
+};
+export default _default;

package/es/components/result-page/index.js

@@ -0,0 +1,7 @@
+import "./result-page.css";
+import { ResultPage } from './result-page';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { ResultPageCard } from './result-page-card';
+export default attachPropertiesToComponent(ResultPage, {
+  Card: ResultPageCard
+});

package/es/components/result-page/result-page-card.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type ResultPageCardProps = {
+    children?: ReactNode;
+} & NativeProps;
+export declare const ResultPageCard: FC<ResultPageCardProps>;

package/es/components/result-page/result-page-card.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+const classPrefix = `adm-result-page-card`;
+export const ResultPageCard = props => {
+  return withNativeProps(props, React.createElement('div', {
+    className: classNames(`${classPrefix}`)
+  }, props.children));
+};

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

@@ -0,0 +1,113 @@
+.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: 20px;
+  padding-bottom: 100px;
+  z-index: 1;
+  overflow: hidden;
+}
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 2px;
+  margin-bottom: 8px;
+}
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 32px;
+}
+.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: 8px;
+  margin-bottom: 24px;
+  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: 5px;
+  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: 10px;
+  height: 10px;
+  margin: auto;
+  margin-bottom: 5px;
+  border-top: 2px solid var(--adm-color-background);
+  border-right: 2px 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: 54px;
+}
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 20px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+.adm-result-page-content {
+  position: relative;
+  padding: 12px;
+  top: -104px;
+  z-index: 2;
+}
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 12px;
+  padding-bottom: 24px;
+  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 - 36px) / 2);
+}
+.adm-result-page-footer-space {
+  width: 12px;
+}
+.adm-result-page-card {
+  border-radius: 8px;
+  background-color: var(--adm-color-background);
+}

package/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/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/es/components/safe-area/safe-area.css

@@ -1,10 +1,11 @@
 .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/es/components/scroll-mask/scroll-mask.css

@@ -9,9 +9,9 @@
 }
 .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/es/components/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,6 @@
+.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/es/components/search-bar/search-bar.css

@@ -1,7 +1,7 @@
 .adm-search-bar {
   --height: 32px;
   --padding-left: 8px;
-  --background: #f5f5f5;
+  --background: var(--adm-color-box);
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
@@ -23,7 +23,7 @@
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
   color: var(--adm-color-light);
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
@@ -33,7 +33,7 @@
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
-  --font-size: 15px;
+  --font-size: var(--adm-font-size-7);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
@@ -53,5 +53,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/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>>;