antd-mobile 5.0.0-rc.6 → 5.0.0

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

@@ -2,26 +2,31 @@ import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { RadioGroupContext } from './group-context';
 import { usePropsValue } from '../../utils/use-props-value';
-var defaultProps = {
+const defaultProps = {
   disabled: false,
   defaultValue: null
 };
-export var Group = function Group(p) {
-  var props = mergeProps(defaultProps, p);
+export const Group = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: v => {
+      var _a;
 
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider // TODO: 性能优化
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  return React.createElement(RadioGroupContext.Provider // TODO: 性能优化
   , {
     // TODO: 性能优化
     value: {
       value: value === null ? [] : [value],
-      check: function check(v) {
+      check: v => {
         setValue(v);
       },
-      uncheck: function uncheck() {},
+      uncheck: () => {},
       disabled: props.disabled
     }
   }, props.children);

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

@@ -3,5 +3,5 @@ import { attachPropertiesToComponent } from '../../utils/attach-properties-to-co
 import { Group } from './group';
 import { Radio } from './radio';
 export default attachPropertiesToComponent(Radio, {
-  Group: Group
+  Group
 });

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

@@ -15,21 +15,18 @@
 
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 2px solid #ccc;
+  border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-radio .adm-radio-icon-checked {
+.adm-radio .adm-radio-icon > svg {
   display: block;
-  width: 65%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-radio.adm-radio-block {
@@ -46,13 +43,13 @@
 }
 
 .adm-radio.adm-radio-disabled .adm-radio-content {
-  color: var(--adm-color-weak);
+  opacity: 0.4;
 }
 
 .adm-radio.adm-radio-disabled .adm-radio-icon {
-  color: #ccc;
-  border-color: #ccc;
-  background-color: #ebedf0;
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
 }
 
 .adm-radio .adm-radio-custom-icon {
@@ -60,7 +57,7 @@
 }
 
 .adm-radio-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

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,10 +13,11 @@
   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;
+  box-sizing: border-box;
 }
 
 .adm-rate-star-half {

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,35 +19,49 @@
   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;
 }
 
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 16px;
+}
+
 .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

@@ -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>>;