antd-mobile 5.0.0-rc.6 → 5.0.0

package/cjs/components/radio/group.js

@@ -11,31 +11,36 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _groupContext = require("./group-context");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var defaultProps = {
+const defaultProps = {
   disabled: false,
   defaultValue: null
 };
 
-var Group = function Group(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+const Group = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: v => {
+      var _a;
 
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  return /*#__PURE__*/_react["default"].createElement(_groupContext.RadioGroupContext.Provider // TODO: 性能优化
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  return _react.default.createElement(_groupContext.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/cjs/components/radio/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./radio.css");
 
@@ -17,4 +17,4 @@ var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_ra
   Group: _group.Group
 });
 
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/radio/radio.css

@@ -13,20 +13,17 @@
 }
 .adm-radio .adm-radio-icon {
   flex: none;
-  border: 1px solid #ccc;
+  border: 1px 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 {
   display: flex;
@@ -39,18 +36,18 @@
   cursor: not-allowed;
 }
 .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 {
   font-size: var(--icon-size);
 }
 .adm-radio-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/cjs/components/radio/radio.js

@@ -13,44 +13,54 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _groupContext = require("./group-context");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _checkIcon = require("../checkbox/check-icon");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _devLog = require("../../utils/dev-log");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _isDev = require("../../utils/is-dev");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-radio";
-var defaultProps = {
-  defaultChecked: false
-};
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var Radio = function Radio(p) {
-  var _classNames;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var groupContext = (0, _react.useContext)(_groupContext.RadioGroupContext);
+const classPrefix = `adm-radio`;
+const defaultProps = {
+  defaultChecked: false
+};
 
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+const Radio = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const groupContext = (0, _react.useContext)(_groupContext.RadioGroupContext);
+  let [checked, setChecked] = (0, _usePropsValue.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.isDev) {
+      if (p.checked !== undefined) {
+        (0, _devLog.devWarning)('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        (0, _devLog.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) {
@@ -65,37 +75,38 @@ var Radio = function Radio(p) {
     disabled = disabled || groupContext.disabled;
   }
 
-  var renderIcon = function renderIcon() {
+  const renderIcon = () => {
     if (props.icon) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classPrefix + "-custom-icon"
+      return _react.default.createElement("div", {
+        className: `${classPrefix}-custom-icon`
       }, props.icon(checked));
     }
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: classPrefix + "-icon"
-    }, checked && /*#__PURE__*/_react["default"].createElement(_checkIcon.CheckIcon, {
-      className: classPrefix + "-icon-checked"
-    }));
+    return _react.default.createElement("div", {
+      className: `${classPrefix}-icon`
+    }, checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("label", {
-    className: (0, _classnames["default"])(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-checked"] = checked, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-block"] = props.block, _classNames)),
-    style: props.style
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-block`]: props.block
+    })
+  }, _react.default.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["default"].createElement("div", {
-    className: classPrefix + "-content"
+  }), renderIcon(), props.children && _react.default.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children)));
 };
 

package/cjs/components/rate/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./rate.css");
 
 var _rate2 = require("./rate");
 
 var _default = _rate2.Rate;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/rate/rate.css

@@ -1,6 +1,7 @@
 .adm-rate {
   --star-size: 24px;
   --active-color: #ffd21e;
+  --inactive-color: var(--adm-color-light);
   display: inline-flex;
 }
 .adm-rate-box {
@@ -10,10 +11,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 {
   padding-right: 0;

package/cjs/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/cjs/components/rate/rate.js

@@ -15,35 +15,33 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-rate";
-var defaultProps = {
+const classPrefix = `adm-rate`;
+const defaultProps = {
   count: 5,
   allowHalf: false,
-  character: /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.StarFill, null),
+  character: _react.default.createElement(_antdMobileIcons.StarFill, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true
 };
 
-var Rate = function Rate(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var starList = Array(props.count).fill(null);
+const Rate = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
+  const starList = Array(props.count).fill(null);
 
   function renderStar(v, half) {
-    var _classNames;
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])(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.default.createElement("div", {
+      className: (0, _classnames.default)(`${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) {
@@ -55,14 +53,12 @@ var Rate = function Rate(p) {
     }, props.character);
   }
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, starList.map(function (_, i) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: i,
-      className: (0, _classnames["default"])(classPrefix + "-box")
-    }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false));
-  })));
+  }, starList.map((_, i) => _react.default.createElement("div", {
+    key: i,
+    className: (0, _classnames.default)(`${classPrefix}-box`)
+  }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));
 };
 
 exports.Rate = Rate;

package/cjs/components/result/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./result.css");
 
 var _result2 = require("./result");
 
 var _default = _result2.Result;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/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: 32px 12px;
-  background-color: var(--bg-color);
+  background-color: var(--adm-color-white);
 }
 .adm-result-icon {
   box-sizing: border-box;
@@ -16,7 +13,7 @@
   font-size: 52px;
 }
 .adm-result-title {
-  color: var(--color);
+  color: var(--adm-color-text);
   font-size: 18px;
   line-height: 1.4;
   text-align: center;

package/cjs/components/result/result.js

@@ -13,10 +13,10 @@ var _antdMobileIcons = require("antd-mobile-icons");
 
 var _nativeProps = require("../../utils/native-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-result";
-var iconRecord = {
+const classPrefix = `adm-result`;
+const iconRecord = {
   success: _antdMobileIcons.CheckCircleFill,
   error: _antdMobileIcons.CloseCircleFill,
   info: _antdMobileIcons.InformationCircleFill,
@@ -24,23 +24,25 @@ var iconRecord = {
   warning: _antdMobileIcons.ExclamationCircleFill
 };
 
-var Result = function Result(props) {
-  var status = props.status,
-      title = props.title,
-      description = props.description,
-      icon = props.icon;
+const Result = props => {
+  const {
+    status,
+    title,
+    description,
+    icon
+  } = props;
   if (!status) return null;
 
-  var resultIcon = icon || /*#__PURE__*/_react["default"].createElement(iconRecord[status]);
+  const resultIcon = icon || _react.default.createElement(iconRecord[status]);
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + status)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-icon"
-  }, resultIcon), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-title"
-  }, title), description ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-description"
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${status}`)
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), description ? _react.default.createElement("div", {
+    className: `${classPrefix}-description`
   }, description) : null));
 };
 

package/cjs/components/safe-area/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./safe-area.css");
 
 var _safeArea2 = require("./safe-area");
 
 var _default = _safeArea2.SafeArea;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/safe-area/safe-area.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = 'adm-safe-area';
+const classPrefix = 'adm-safe-area';
 
-var SafeArea = function SafeArea(props) {
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-position-" + props.position)
+const SafeArea = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-position-${props.position}`)
   }));
 };
 

package/cjs/components/scroll-mask/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./scroll-mask.css");
 
 var _scrollMask2 = require("./scroll-mask");
 
 var _default = _scrollMask2.ScrollMask;
-exports["default"] = _default;
+exports.default = _default;

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

@@ -13,74 +13,63 @@ var _web = require("@react-spring/web");
 
 var _ahooks = require("ahooks");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var classPrefix = "adm-scroll-mask";
+const classPrefix = `adm-scroll-mask`;
 
-var ScrollMask = function ScrollMask(props) {
-  var maskRef = (0, _react.useRef)(null);
-
-  var _useSpring = (0, _web.useSpring)(function () {
-    return {
-      leftMaskOpacity: 0,
-      rightMaskOpacity: 0,
-      config: {
-        clamp: true
-      }
-    };
-  }),
-      _useSpring$ = _useSpring[0],
-      leftMaskOpacity = _useSpring$.leftMaskOpacity,
-      rightMaskOpacity = _useSpring$.rightMaskOpacity,
-      api = _useSpring[1];
-
-  var _useThrottleFn = (0, _ahooks.useThrottleFn)(function (immediate) {
-    if (immediate === void 0) {
-      immediate = false;
+const ScrollMask = props => {
+  const maskRef = (0, _react.useRef)(null);
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, api] = (0, _web.useSpring)(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
     }
-
-    var mask = maskRef.current;
+  }));
+  const {
+    run: updateMask
+  } = (0, _ahooks.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;
-
-  (0, _react.useEffect)(function () {
+  });
+  (0, _react.useEffect)(() => {
     updateMask(true);
   }, []);
-  (0, _react.useEffect)(function () {
-    var scrollEl = props.scrollTrackRef.current;
+  (0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_web.animated.div, {
     ref: maskRef,
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-left"),
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-left`),
     style: {
       opacity: leftMaskOpacity
     }
-  }), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-right"),
+  }), _react.default.createElement(_web.animated.div, {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-right`),
     style: {
       opacity: rightMaskOpacity
     }

package/cjs/components/search-bar/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./search-bar.css");
 
 var _searchBar2 = require("./search-bar");
 
 var _default = _searchBar2.SearchBar;
-exports["default"] = _default;
+exports.default = _default;