antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

package/es/components/scroll-mask/scroll-mask.js

@@ -2,67 +2,56 @@ import React, { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { animated, useSpring } from '@react-spring/web';
 import { useThrottleFn } from 'ahooks';
-var classPrefix = "adm-scroll-mask";
-export var ScrollMask = function ScrollMask(props) {
-  var maskRef = useRef(null);
-
-  var _useSpring = useSpring(function () {
-    return {
-      leftMaskOpacity: 0,
-      rightMaskOpacity: 0,
-      config: {
-        clamp: true
-      }
-    };
-  }),
-      _useSpring$ = _useSpring[0],
-      leftMaskOpacity = _useSpring$.leftMaskOpacity,
-      rightMaskOpacity = _useSpring$.rightMaskOpacity,
-      api = _useSpring[1];
-
-  var _useThrottleFn = useThrottleFn(function (immediate) {
-    if (immediate === void 0) {
-      immediate = false;
+const classPrefix = `adm-scroll-mask`;
+export const ScrollMask = props => {
+  const maskRef = useRef(null);
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, api] = useSpring(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
     }
-
-    var mask = maskRef.current;
+  }));
+  const {
+    run: updateMask
+  } = useThrottleFn((immediate = false) => {
+    const mask = maskRef.current;
     if (!mask) return;
-    var scrollEl = props.scrollTrackRef.current;
+    const scrollEl = props.scrollTrackRef.current;
     if (!scrollEl) return;
-    var scrollLeft = scrollEl.scrollLeft;
-    var showLeftMask = scrollLeft > 0;
-    var showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
+    const scrollLeft = scrollEl.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
     api.start({
       leftMaskOpacity: showLeftMask ? 1 : 0,
       rightMaskOpacity: showRightMask ? 1 : 0,
-      immediate: immediate
+      immediate
     });
   }, {
     wait: 100,
     trailing: true,
     leading: true
-  }),
-      updateMask = _useThrottleFn.run;
-
-  useEffect(function () {
+  });
+  useEffect(() => {
     updateMask(true);
   }, []);
-  useEffect(function () {
-    var scrollEl = props.scrollTrackRef.current;
+  useEffect(() => {
+    const scrollEl = props.scrollTrackRef.current;
     if (!scrollEl) return;
     scrollEl.addEventListener('scroll', updateMask);
-    return function () {
-      return scrollEl.removeEventListener('scroll', updateMask);
-    };
+    return () => scrollEl.removeEventListener('scroll', updateMask);
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
+  return React.createElement(React.Fragment, null, React.createElement(animated.div, {
     ref: maskRef,
-    className: classNames(classPrefix, classPrefix + "-left"),
+    className: classNames(classPrefix, `${classPrefix}-left`),
     style: {
       opacity: leftMaskOpacity
     }
-  }), /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames(classPrefix, classPrefix + "-right"),
+  }), React.createElement(animated.div, {
+    className: classNames(classPrefix, `${classPrefix}-right`),
     style: {
       opacity: rightMaskOpacity
     }

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

@@ -1,11 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  --height: 32px;
+  --padding-left: 8px;
   --background: #f5f5f5;
   --border-radius: 6px;
   --placeholder-color: var(--adm-color-weak);
   ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
 }
 .adm-search-bar .adm-search-bar-input-box {
   flex: auto;
@@ -15,29 +18,40 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-left: var(--padding-left);
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
   flex: none;
-  color: var(---placeholder-color);
-  padding-left: 8px;
+  color: var(--adm-color-light);
   font-size: 16px;
 }
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 4px 8px 4px 4px;
-  height: 28px;
+  height: calc(var(--height) - 2px);
+  box-sizing: border-box;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input-wrapper {
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
   --placeholder-color: var(---placeholder-color);
+  --font-size: 15px;
 }
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 13px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 19px;
 }
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 8px;
+}
 .adm-search-bar .adm-search-bar-suffix {
   flex: none;
-  margin-left: 16px;
+  margin-left: 4px;
+}
+.adm-search-bar .adm-search-bar-cancel-button.adm-button {
+  padding: 3px 12px;
+}
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
 }
 .adm-search-bar-active .adm-search-bar-input-box {
   border-color: var(--adm-color-primary);
+  background: var(--adm-color-white);
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;
@@ -10,11 +10,12 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     clearable?: boolean;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
     cancelText?: string;
+    icon?: ReactNode;
     clearOnCancel?: boolean;
     onSearch?: (val: string) => void;
     onChange?: (val: string) => void;
     onCancel?: () => void;
-} & NativeProps<'--background' | '--border-radius' | '--placeholder-color'>;
+} & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
 export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
@@ -23,8 +24,9 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     clearable?: boolean | undefined;
     showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
     cancelText?: string | undefined;
+    icon?: ReactNode;
     clearOnCancel?: boolean | undefined;
     onSearch?: ((val: string) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
     onCancel?: (() => void) | undefined;
-} & NativeProps<"--border-radius" | "--placeholder-color" | "--background"> & React.RefAttributes<InputRef>>;
+} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--placeholder-color" | "--background"> & React.RefAttributes<InputRef>>;

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

@@ -1,59 +1,50 @@
 import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import Input from '../input';
+import Button from '../button';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { SearchOutline } from 'antd-mobile-icons';
 import { usePropsValue } from '../../utils/use-props-value';
 import { useConfig } from '../config-provider';
-var classPrefix = "adm-search-bar";
-var defaultProps = {
+const classPrefix = `adm-search-bar`;
+const defaultProps = {
   clearable: true,
   showCancelButton: false,
   defaultValue: '',
-  clearOnCancel: true
+  clearOnCancel: true,
+  icon: React.createElement(SearchOutline, null)
 };
-export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
-  var _classNames;
-
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  var props = mergeProps(defaultProps, {
+export const SearchBar = forwardRef((p, ref) => {
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, {
     cancelText: locale.common.cancel
   }, p);
+  const [value, setValue] = usePropsValue(props);
+  const [hasFocus, setHasFocus] = useState(false);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      var _a;
 
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var _useState = useState(false),
-      hasFocus = _useState[0],
-      setHasFocus = _useState[1];
-
-  var inputRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      clear: function clear() {
-        var _a;
-
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
-      },
-      focus: function focus() {
-        var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+    },
+    focus: () => {
+      var _a;
 
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      },
-      blur: function blur() {
-        var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
 
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    };
-  });
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+  }));
 
-  var renderCancelButton = function renderCancelButton() {
-    var isShowCancel = false;
+  const renderCancelButton = () => {
+    let isShowCancel = false;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);
@@ -61,16 +52,18 @@ export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
       isShowCancel = props.showCancelButton && hasFocus;
     }
 
-    return isShowCancel && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-suffix"
-    }, /*#__PURE__*/React.createElement("a", {
-      onMouseDown: function onMouseDown(e) {
+    return isShowCancel && React.createElement("div", {
+      className: `${classPrefix}-suffix`,
+      onMouseDown: e => {
         e.preventDefault();
       },
-      onTouchStart: function onTouchStart(e) {
+      onTouchStart: e => {
         e.preventDefault();
-      },
-      onClick: function onClick() {
+      }
+    }, React.createElement(Button, {
+      fill: 'none',
+      className: `${classPrefix}-cancel-button`,
+      onClick: () => {
         var _a, _b, _c;
 
         if (props.clearOnCancel) {
@@ -83,27 +76,31 @@ export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
     }, props.cancelText));
   };
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-input-box"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-input-box-icon"
-  }, /*#__PURE__*/React.createElement(SearchOutline, null)), /*#__PURE__*/React.createElement(Input, {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, React.createElement("div", {
+    className: `${classPrefix}-input-box`
+  }, props.icon && React.createElement("div", {
+    className: `${classPrefix}-input-box-icon`
+  }, props.icon), React.createElement(Input, {
     ref: inputRef,
-    className: classPrefix + "-input",
+    className: classNames(`${classPrefix}-input`, {
+      [`${classPrefix}-input-without-icon`]: !props.icon
+    }),
     value: value,
     onChange: setValue,
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
-    onFocus: function onFocus(e) {
+    onFocus: e => {
       var _a;
 
       setHasFocus(true);
       (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: function onBlur(e) {
+    onBlur: e => {
       var _a;
 
       setHasFocus(false);
@@ -112,7 +109,7 @@ export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
     onClear: props.onClear,
     type: 'search',
     enterKeyHint: 'search',
-    onEnterPress: function onEnterPress() {
+    onEnterPress: () => {
       var _a, _b;
 
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();

package/es/components/selector/check-mark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckMark: React.MemoExoticComponent<() => JSX.Element>;

package/es/components/selector/check-mark.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+export const CheckMark = memo(() => {
+  return React.createElement("svg", {
+    width: '17px',
+    height: '13px',
+    viewBox: '0 0 17 13',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, React.createElement("g", {
+    transform: 'translate(-2832.000000, -1103.000000)',
+    stroke: '#FFFFFF',
+    strokeWidth: '3'
+  }, React.createElement("g", {
+    transform: 'translate(2610.000000, 955.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(24.000000, 91.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(179.177408, 36.687816)'
+  }, React.createElement("polyline", {
+    points: '34.2767388 22 24.797043 31.4796958 21 27.6826527'
+  })))))));
+});

package/es/components/selector/selector.css

@@ -5,8 +5,11 @@
   font-size: 15px;
   line-height: 1.4;
 }
+.adm-selector .adm-space.adm-space {
+  --gap: 12px;
+}
 .adm-selector-item {
-  padding: 8px;
+  padding: 8px 16px;
   position: relative;
   background-color: #f5f5f5;
   border-radius: 2px;
@@ -18,6 +21,10 @@
   overflow: hidden;
   vertical-align: top;
 }
+.adm-selector-item-description {
+  font-size: 13px;
+  color: var(--adm-color-weak);
+}
 .adm-selector-item-active,
 .adm-selector-item-multiple-active {
   color: var(--adm-color-primary);
@@ -34,7 +41,7 @@
   border-left: solid 10px transparent;
   border-right: solid 10px var(--adm-color-primary);
 }
-.adm-selector-item .adm-selector-check-mark-wrapper > img {
+.adm-selector-item .adm-selector-check-mark-wrapper > svg {
   position: absolute;
   left: 0;
   top: 0;

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export interface SelectorOption<V> {
     label: ReactNode;
+    description?: ReactNode;
     value: V;
     disabled?: boolean;
 }

package/es/components/selector/selector.js

@@ -5,72 +5,65 @@ import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
 import { convertPx } from '../../utils/convert-px';
-import selectorCheckMarkImg from '../../assets/selector-check-mark.svg';
 import { usePropsValue } from '../../utils/use-props-value';
-var classPrefix = "adm-selector";
-var defaultProps = {
+import { CheckMark } from './check-mark';
+const classPrefix = `adm-selector`;
+const defaultProps = {
   multiple: false,
   defaultValue: []
 };
-export var Selector = function Selector(p) {
-  var props = mergeProps(defaultProps, p);
-
-  var _usePropsValue = usePropsValue({
+export const Selector = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue,
-    onChange: function onChange(val) {
+    onChange: val => {
       var _a;
 
-      var extend = {
+      const extend = {
         get items() {
-          return props.options.filter(function (option) {
-            return val.includes(option.value);
-          });
+          return props.options.filter(option => val.includes(option.value));
         }
 
       };
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
     }
-  }),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var items = props.options.map(function (option) {
-    var _classNames;
-
-    var active = (value || []).includes(option.value);
-    var disabled = option.disabled || props.disabled;
-    var itemCls = classNames(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active && !props.multiple, _classNames[classPrefix + "-item-multiple-active"] = active && props.multiple, _classNames[classPrefix + "-item-disabled"] = disabled, _classNames));
-    return /*#__PURE__*/React.createElement("div", {
+  });
+  const items = props.options.map(option => {
+    const active = (value || []).includes(option.value);
+    const disabled = option.disabled || props.disabled;
+    const itemCls = classNames(`${classPrefix}-item`, {
+      [`${classPrefix}-item-active`]: active && !props.multiple,
+      [`${classPrefix}-item-multiple-active`]: active && props.multiple,
+      [`${classPrefix}-item-disabled`]: disabled
+    });
+    return React.createElement("div", {
       key: option.value,
       className: itemCls,
-      onClick: function onClick() {
+      onClick: () => {
         if (disabled) {
           return;
         }
 
         if (props.multiple) {
-          var val = active ? value.filter(function (v) {
-            return v !== option.value;
-          }) : [].concat(value, [option.value]);
+          const val = active ? value.filter(v => v !== option.value) : [...value, option.value];
           setValue(val);
         } else {
-          var _val = active ? [] : [option.value];
-
-          setValue(_val);
+          const val = active ? [] : [option.value];
+          setValue(val);
         }
       }
-    }, option.label, active && props.multiple && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-check-mark-wrapper"
-    }, /*#__PURE__*/React.createElement("img", {
-      src: selectorCheckMarkImg
-    })));
+    }, option.label, option.description && React.createElement("div", {
+      className: `${classPrefix}-item-description`
+    }, option.description), active && React.createElement("div", {
+      className: `${classPrefix}-check-mark-wrapper`
+    }, React.createElement(CheckMark, null)));
   });
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, !props.columns && /*#__PURE__*/React.createElement(Space, {
+  }, !props.columns && React.createElement(Space, {
     wrap: true
-  }, items), props.columns && /*#__PURE__*/React.createElement(Grid, {
+  }, items), props.columns && React.createElement(Grid, {
     columns: props.columns,
     gap: convertPx(8)
   }, items)));

package/es/components/side-bar/corner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Corner: React.NamedExoticComponent<NativeProps<never>>;

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

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Corner = memo(props => withNativeProps(props, React.createElement("svg", {
+  viewBox: '0 0 30 30'
+}, React.createElement("g", {
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  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)',
+  transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
+})))));

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

@@ -1,52 +1,74 @@
 .adm-side-bar {
   --height: 100%;
-  --width: 96px;
+  --width: 105px;
   --item-border-radius: 8px;
+  --background-color: #f5f5f5;
   width: var(--width);
   height: var(--height);
-  font-size: 15px;
+  box-sizing: border-box;
+  font-size: 13px;
   overflow-y: auto;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
+  background-color: var(--background-color);
+  display: flex;
+  flex-direction: column;
+}
+.adm-side-bar-items {
+  flex: none;
+  overflow: hidden;
+}
+.adm-side-bar-extra-space {
+  flex: auto;
+  overflow: hidden;
+  position: relative;
 }
 .adm-side-bar-item {
   display: flex;
   align-items: center;
-  min-height: 50px;
-  padding: 6px 22px;
+  box-sizing: border-box;
+  padding: 16px 12px;
   position: relative;
   cursor: pointer;
-  background-color: #f5f5f5;
+  background-color: var(--background-color);
+  overflow: visible;
+}
+.adm-side-bar-item-highlight {
+  position: absolute;
+  height: 100%;
+  width: 2px;
+  left: -12px;
+  top: 0;
+  background: var(--adm-color-primary);
+  border-radius: 2px;
 }
 .adm-side-bar-item-active {
   color: var(--adm-color-primary);
-  background-color: white;
-  font-weight: bold;
+  background-color: var(--adm-color-white);
   position: relative;
 }
-.adm-side-bar-item-active + .adm-side-bar-item {
-  border-top-right-radius: var(--item-border-radius);
-}
-.adm-side-bar-item-active::before {
-  content: '';
+.adm-side-bar-item-corner {
   width: var(--item-border-radius);
   height: var(--item-border-radius);
-  background-color: white;
   position: absolute;
-  top: calc(var(--item-border-radius) * -1);
+  z-index: 100;
   right: 0;
+  user-select: none;
+  pointer-events: none;
 }
-.adm-side-bar-item-active::after {
-  content: '';
-  width: var(--item-border-radius);
-  height: var(--item-border-radius);
-  background-color: #f5f5f5;
-  border-bottom-right-radius: var(--item-border-radius);
-  position: absolute;
-  top: calc(var(--item-border-radius) * -1);
-  right: 0;
+.adm-side-bar-item-corner-top {
+  top: 0;
+  transform: rotate(-90deg);
+}
+.adm-side-bar-item-corner-bottom {
+  bottom: 0;
 }
 .adm-side-bar-item-disabled {
   cursor: not-allowed;
-  color: var(--adm-color-light);
+}
+.adm-side-bar-item-disabled .adm-side-bar-item-title {
+  opacity: 0.4;
+}
+.adm-side-bar-badge.adm-badge {
+  --right: -4px;
 }