antd-mobile 5.0.0-rc.8 → 5.1.0

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

@@ -5,31 +5,39 @@ import { RadioGroupContext } from './group-context';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { CheckIcon } from '../checkbox/check-icon';
-var classPrefix = "adm-radio";
-var defaultProps = {
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+const classPrefix = `adm-radio`;
+const defaultProps = {
   defaultChecked: false
 };
-export var Radio = function Radio(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var groupContext = useContext(RadioGroupContext);
-
-  var _usePropsValue = usePropsValue({
+export const Radio = p => {
+  const props = mergeProps(defaultProps, p);
+  const groupContext = useContext(RadioGroupContext);
+  let [checked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
     onChange: props.onChange
-  }),
-      checked = _usePropsValue[0],
-      setChecked = _usePropsValue[1];
-
-  var disabled = props.disabled;
-  var value = props.value;
+  });
+  let disabled = props.disabled;
+  const {
+    value
+  } = props;
 
   if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `defaultChecked` prop of `Radio` will not work.');
+      }
+    }
+
     checked = groupContext.value.includes(value);
 
-    setChecked = function setChecked(checked) {
+    setChecked = checked => {
       var _a;
 
       if (checked) {
@@ -44,36 +52,37 @@ export var Radio = function Radio(p) {
     disabled = disabled || groupContext.disabled;
   }
 
-  var renderIcon = function renderIcon() {
+  const renderIcon = () => {
     if (props.icon) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classPrefix + "-custom-icon"
+      return React.createElement("div", {
+        className: `${classPrefix}-custom-icon`
       }, props.icon(checked));
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-icon"
-    }, checked && /*#__PURE__*/React.createElement(CheckIcon, {
-      className: classPrefix + "-icon-checked"
-    }));
+    return React.createElement("div", {
+      className: `${classPrefix}-icon`
+    }, checked && React.createElement(CheckIcon, null));
   };
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("label", {
-    className: classNames(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-checked"] = checked, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-block"] = props.block, _classNames)),
-    style: props.style
-  }, /*#__PURE__*/React.createElement("input", {
+  return withNativeProps(props, React.createElement("label", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-block`]: props.block
+    })
+  }, React.createElement("input", {
     type: 'radio',
     checked: checked,
-    onChange: function onChange(e) {
+    onChange: e => {
       setChecked(e.target.checked);
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation();
     },
     disabled: disabled,
     id: props.id
-  }), renderIcon(), props.children && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
+  }), renderIcon(), props.children && React.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children)));
 };

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

@@ -1,6 +1,7 @@
 .adm-rate {
   --star-size: 48px;
   --active-color: #ffd21e;
+  --inactive-color: var(--adm-color-light);
   display: inline-flex;
 }
 
@@ -12,7 +13,7 @@
   padding: calc(var(--star-size) / 8);
   line-height: var(--star-size);
   font-size: var(--star-size);
-  color: var(--adm-color-light);
+  color: var(--inactive-color);
   text-align: center;
   overflow: hidden;
   cursor: pointer;

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

@@ -9,5 +9,5 @@ export declare type RateProps = {
     readOnly?: boolean;
     value?: number;
     onChange?: (value: number) => void;
-} & NativeProps<'--star-size' | '--active-color'>;
+} & NativeProps<'--star-size' | '--active-color' | '--inactive-color'>;
 export declare const Rate: FC<RateProps>;

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

@@ -4,30 +4,28 @@ 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';
-var classPrefix = "adm-rate";
-var defaultProps = {
+const classPrefix = `adm-rate`;
+const defaultProps = {
   count: 5,
   allowHalf: false,
-  character: /*#__PURE__*/React.createElement(StarFill, null),
+  character: React.createElement(StarFill, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true
 };
-export var Rate = function Rate(p) {
-  var props = mergeProps(defaultProps, p);
-
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var starList = Array(props.count).fill(null);
+export const Rate = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
-    var _classNames;
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(classPrefix + "-star", (_classNames = {}, _classNames[classPrefix + "-star-active"] = value >= v, _classNames[classPrefix + "-star-half"] = half, _classNames[classPrefix + "-star-readonly"] = props.readOnly, _classNames)),
-      onClick: function onClick() {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-star`, {
+        [`${classPrefix}-star-active`]: value >= v,
+        [`${classPrefix}-star-half`]: half,
+        [`${classPrefix}-star-readonly`]: props.readOnly
+      }),
+      onClick: () => {
         if (props.readOnly) return;
 
         if (props.allowClear && value === v) {
@@ -39,12 +37,10 @@ export var Rate = function Rate(p) {
     }, props.character);
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     className: classPrefix
-  }, starList.map(function (_, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: classNames(classPrefix + "-box")
-    }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false));
-  })));
+  }, starList.map((_, i) => React.createElement("div", {
+    key: i,
+    className: classNames(`${classPrefix}-box`)
+  }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));
 };

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

@@ -1,9 +1,6 @@
 .adm-result {
-  --bg-color: var(--adm-color-white);
-  --color: var(--adm-color-text);
-  --adm-color-weak: var(--adm-color-weak);
   padding: 64px 24px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 
 .adm-result-icon {
@@ -19,7 +16,7 @@
 }
 
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 36px;
   line-height: 1.4;
   text-align: center;

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

@@ -2,28 +2,30 @@ import React from 'react';
 import classNames from 'classnames';
 import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
-var classPrefix = "adm-result";
-var iconRecord = {
+const classPrefix = `adm-result`;
+const iconRecord = {
   success: CheckCircleFill,
   error: CloseCircleFill,
   info: InformationCircleFill,
   waiting: ClockCircleFill,
   warning: ExclamationCircleFill
 };
-export var Result = function Result(props) {
-  var status = props.status,
-      title = props.title,
-      description = props.description,
-      icon = props.icon;
+export const Result = props => {
+  const {
+    status,
+    title,
+    description,
+    icon
+  } = props;
   if (!status) return null;
-  var resultIcon = icon || /*#__PURE__*/React.createElement(iconRecord[status]);
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-" + status)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-icon"
-  }, resultIcon), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-title"
-  }, title), description ? /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-description"
+  const resultIcon = icon || React.createElement(iconRecord[status]);
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${status}`)
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), description ? React.createElement("div", {
+    className: `${classPrefix}-description`
   }, description) : null));
 };

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

@@ -1,9 +1,9 @@
 import { withNativeProps } from '../../utils/native-props';
 import React from 'react';
 import classNames from 'classnames';
-var classPrefix = 'adm-safe-area';
-export var SafeArea = function SafeArea(props) {
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-position-" + props.position)
+const classPrefix = 'adm-safe-area';
+export const SafeArea = props => {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-position-${props.position}`)
   }));
 };

package/2x/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/2x/es/components/search-bar/search-bar.css

@@ -1,11 +1,14 @@
 .adm-search-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  --height: 64px;
+  --padding-left: 16px;
   --background: #f5f5f5;
   --border-radius: 12px;
   --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 {
@@ -16,28 +19,28 @@
   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: 16px;
+  color: var(--adm-color-light);
   font-size: 32px;
 }
 
 .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
   flex: auto;
   padding: 8px 16px 8px 8px;
-  height: 56px;
+  height: calc(var(--height) - 4px);
   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: 30px;
 }
 
-.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input {
-  font-size: 26px;
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
   line-height: 38px;
 }
 
@@ -47,9 +50,18 @@
 
 .adm-search-bar .adm-search-bar-suffix {
   flex: none;
-  margin-left: 32px;
+  margin-left: 8px;
+}
+
+.adm-search-bar .adm-search-bar-cancel-button.adm-button {
+  padding: 6px 24px;
+}
+
+.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/2x/es/components/search-bar/search-bar.d.ts

@@ -15,7 +15,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
     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;
@@ -29,4 +29,4 @@ export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps,
     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/2x/es/components/search-bar/search-bar.js

@@ -1,60 +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,
-  icon: /*#__PURE__*/React.createElement(SearchOutline, null)
+  icon: React.createElement(SearchOutline, null)
 };
-export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
-  var _classNames, _classNames2;
-
-  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);
@@ -62,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) {
@@ -84,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"
-  }, props.icon && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-input-box-icon"
-  }, props.icon), /*#__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: classNames(classPrefix + "-input", (_classNames2 = {}, _classNames2[classPrefix + "-input-without-icon"] = !props.icon, _classNames2)),
+    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);
@@ -113,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/2x/es/components/selector/check-mark.d.ts

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