antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

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) {
@@ -33,13 +36,37 @@ export const Rate = p => {
         } 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]
+    } = state;
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const rawValue = (clientX - rect.left) / rect.width * props.count;
+    const roundedValue = props.allowHalf ? Math.round(rawValue * 2) / 2 : Math.round(rawValue);
+    setValue(bound(roundedValue, 0, props.count));
+  }, {
+    axis: 'x',
+    preventScroll: true,
+    pointer: {
+      touch: true
+    }
+  });
+  return withNativeProps(props, React.createElement("div", Object.assign({
+    className: classPrefix,
+    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/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>>;

package/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/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);
@@ -8,7 +8,7 @@
   --border-radius: 2px;
   --padding: 8px 16px;
   overflow: hidden;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
 }
 .adm-selector .adm-space.adm-space {
@@ -29,7 +29,7 @@
   vertical-align: top;
 }
 .adm-selector-item-description {
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   color: var(--adm-color-weak);
 }
 .adm-selector-item-active,

package/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/es/components/side-bar/side-bar.css

@@ -2,11 +2,11 @@
   --height: 100%;
   --width: 105px;
   --item-border-radius: 8px;
-  --background-color: #f5f5f5;
+  --background-color: var(--adm-color-box);
   width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
@@ -44,7 +44,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;
 }
 .adm-side-bar-item-corner {
@@ -53,7 +53,8 @@
   position: absolute;
   z-index: 100;
   right: 0;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   pointer-events: none;
 }
 .adm-side-bar-item-corner-top {

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

@@ -1,8 +1,9 @@
 .adm-slider {
   --fill-color: var(--adm-color-primary);
-  padding: 4px 12px;
+  padding: 5px 14px;
   list-style: none;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-track-container {
   padding: 8px 0;
@@ -10,54 +11,58 @@
 .adm-slider-track {
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: #f5f5f5;
+  height: 3px;
+  background-color: var(--adm-color-box);
+  border-radius: 3px;
 }
 .adm-slider-fill {
   position: absolute;
   z-index: 1;
-  height: 4px;
+  height: 3px;
+  border-radius: 3px;
   background-color: var(--fill-color);
 }
 .adm-slider-ticks {
   position: absolute;
   width: 100%;
-  height: 4px;
+  height: 3px;
   background: transparent;
 }
 .adm-slider-tick {
   position: absolute;
-  top: 50%;
-  width: 11px;
-  height: 11px;
-  margin-left: -5px;
-  background-color: #f5f5f5;
+  top: -2px;
+  width: 7px;
+  height: 7px;
+  margin-left: -3px;
+  background-color: var(--adm-color-box);
   border-radius: 50%;
-  transform: translate(0, -50%);
 }
 .adm-slider-tick-active {
   background-color: var(--fill-color);
 }
 .adm-slider-thumb {
-  width: 22px;
-  height: 22px;
-  margin: 5px;
+  width: 28px;
+  height: 28px;
+  margin: 2px;
   border-radius: 50%;
   text-align: center;
-  line-height: 22px;
+  line-height: 28px;
   background: var(--adm-color-white);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.12), 0 1.5px 3px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--fill-color);
 }
 .adm-slider-thumb:focus {
   outline: none;
 }
 .adm-slider-thumb-icon {
-  width: 10px;
-  height: 10px;
-  margin: 6px;
-  user-select: none;
+  width: 12px;
+  height: 12px;
+  margin: 8px;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-slider-thumb-container {
+  cursor: -webkit-grab;
   cursor: grab;
   touch-action: none;
   position: absolute;
@@ -72,18 +77,19 @@
   position: relative;
   width: 100%;
   overflow: visible;
-  font-size: 12px;
-  height: 12px;
-  margin-top: 4px;
+  font-size: var(--adm-font-size-3);
+  height: 11px;
+  margin-top: 10px;
 }
 .adm-slider-mark-text {
   position: absolute;
   display: inline-block;
-  line-height: 16px;
-  color: #999;
+  line-height: 1;
+  color: var(--adm-color-text);
   text-align: center;
   word-break: keep-all;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   transform: translateX(-50%);
 }
 .adm-slider-disabled {

package/es/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];
@@ -12,7 +12,8 @@ export declare type SliderProps = {
     ticks?: boolean;
     disabled?: boolean;
     range?: boolean;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    popover?: boolean | ((value: number) => ReactNode);
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;

package/es/components/slider/slider.js

@@ -14,7 +14,8 @@ const defaultProps = {
   step: 1,
   ticks: false,
   range: false,
-  disabled: false
+  disabled: false,
+  popover: false
 };
 export const Slider = p => {
   var _a;
@@ -127,13 +128,14 @@ export const Slider = p => {
 
   const renderThumb = index => {
     return React.createElement(Thumb, {
-      icon: icon,
       key: index,
       value: sliderValue[index],
       min: min,
       max: max,
       disabled: disabled,
       trackRef: trackRef,
+      icon: icon,
+      popover: props.popover,
       onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;
@@ -153,7 +155,8 @@ export const Slider = p => {
             dragLockRef.current -= 1;
           }, 100);
         }
-      }
+      },
+      "aria-label": props['aria-label']
     });
   };
 

package/es/components/slider/thumb-icon.js

@@ -2,24 +2,26 @@ import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 export const ThumbIcon = props => {
   return withNativeProps(props, React.createElement("svg", {
-    viewBox: '0 0 20 20'
+    viewBox: '0 0 24 24',
+    xmlns: 'http://www.w3.org/2000/svg'
   }, React.createElement("g", {
-    stroke: 'none',
-    strokeWidth: '1',
-    fill: 'none',
+    fill: 'currentColor',
     fillRule: 'evenodd'
-  }, React.createElement("g", {
-    transform: 'translate(-604.000000, -656.000000)',
-    fill: '#999999'
-  }, React.createElement("g", {
-    transform: 'translate(592.000000, 644.000000)'
-  }, React.createElement("g", {
-    transform: 'translate(12.000000, 12.000000)'
-  }, React.createElement("polygon", {
-    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
-  }), React.createElement("polygon", {
-    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
-  }), React.createElement("path", {
-    d: 'M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z'
-  })))))));
+  }, React.createElement("rect", {
+    x: 10,
+    width: 4,
+    height: 24,
+    rx: 2
+  }), React.createElement("rect", {
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }), React.createElement("rect", {
+    x: 20,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }))));
 };

package/es/components/slider/thumb.d.ts

@@ -1,4 +1,5 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC, RefObject, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
 declare type ThumbProps = {
     value: number;
     min: number;
@@ -7,6 +8,7 @@ declare type ThumbProps = {
     onDrag: (value: number, first: boolean, last: boolean) => void;
     trackRef: RefObject<HTMLDivElement>;
     icon?: React.ReactNode;
-};
+    popover: boolean | ((value: number) => ReactNode);
+} & NativeProps;
 declare const Thumb: FC<ThumbProps>;
 export default Thumb;