antd-mobile 5.3.1 → 5.4.0

package/2x/cjs/components/floating-bubble/floating-bubble.d.ts

@@ -2,5 +2,7 @@ import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    axis?: 'x' | 'y' | 'xy' | 'lock';
+    magnetic?: 'x' | 'y';
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/2x/cjs/components/floating-bubble/floating-bubble.js

@@ -20,45 +20,72 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 const classPrefix = `adm-floating-bubble`;
-const defaultProps = {};
+const defaultProps = {
+  axis: 'y'
+};
 
 const FloatingBubble = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const boundaryRef = (0, _react.useRef)(null);
+  const buttonRef = (0, _react.useRef)(null);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
    * to prevent an unintended restart
    */
 
-  const [animationStyles, animation] = (0, _web.useSpring)(() => ({
+  const [{
+    x,
+    y,
+    opacity
+  }, api] = (0, _web.useSpring)(() => ({
+    x: 0,
     y: 0,
-    scale: 1,
     opacity: 1
   }));
   const bind = (0, _react2.useDrag)(state => {
-    if (state.down) {
-      // be movable in y axis
-      animation.start({
-        y: state.offset[1]
-      });
-    } // active status
+    let nextX = state.offset[0];
+    let nextY = state.offset[1];
+
+    if (state.last) {
+      const boundary = boundaryRef.current;
+      const button = buttonRef.current;
+      if (!boundary || !button) return;
+
+      if (props.magnetic === 'x') {
+        const compensation = x.goal - x.get();
+        const boundaryRect = boundary.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        const leftDistance = buttonRect.left + compensation - boundaryRect.left;
+        const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
 
+        if (rightDistance <= leftDistance) {
+          nextX += rightDistance;
+        } else {
+          nextX -= leftDistance;
+        }
+      }
+    }
 
-    animation.start({
-      scale: state.active ? 1.1 : 1,
+    api.start({
+      x: nextX,
+      y: nextY // immediate: !state.last,
+
+    }); // active status
+
+    api.start({
       opacity: state.active ? 0.8 : 1
     });
   }, {
-    // only trigger if a movement is detected on the specified axis.
-    axis: 'y',
+    axis: props.axis === 'xy' ? undefined : props.axis,
     pointer: {
       touch: true
     },
     // the component won't trigger drag logic if the user just clicked on the component.
     filterTaps: true,
     // set constraints to the user gesture
-    bounds: boundaryRef
+    bounds: boundaryRef,
+    from: () => [x.get(), y.get()]
   });
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
@@ -68,9 +95,13 @@ const FloatingBubble = p => {
     className: `${classPrefix}-boundary`,
     ref: boundaryRef
   })), _react.default.createElement(_web.animated.div, Object.assign({}, bind(), {
-    style: Object.assign({}, animationStyles),
+    style: {
+      opacity,
+      transform: (0, _web.to)([x, y], (x, y) => `translate(${x}px, ${y}px)`)
+    },
     onClick: props.onClick,
-    className: `${classPrefix}-button`
+    className: `${classPrefix}-button`,
+    ref: buttonRef
   }), props.children)));
 };
 

package/2x/cjs/components/form/form.js

@@ -66,7 +66,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     items = [];
   }
 
-  _react.default.Children.forEach(props.children, (child, index) => {
+  _react.default.Children.forEach(props.children, child => {
     if (_react.default.isValidElement(child) && child.type === _header.Header) {
       collect();
       currentHeader = child.props.children;

package/2x/cjs/components/infinite-scroll/infinite-scroll.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfiniteScroll = void 0;
 
+var _tslib = require("tslib");
+
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -41,25 +43,27 @@ const InfiniteScroll = p => {
   }, p);
   const doLoadMore = (0, _ahooks.useLockFn)(() => props.loadMore());
   const elementRef = (0, _react.useRef)(null);
-  const checkTimeoutRef = (0, _react.useRef)();
-  const check = (0, _ahooks.useMemoizedFn)(() => {
-    window.clearTimeout(checkTimeoutRef.current);
-    checkTimeoutRef.current = window.setTimeout(() => {
-      if (!props.hasMore) return;
-      const element = elementRef.current;
-      if (!element) return;
-      if (!element.offsetParent) return;
-      const parent = (0, _getScrollParent.getScrollParent)(element);
-      if (!parent) return;
-      const rect = element.getBoundingClientRect();
-      const elementTop = rect.top;
-      const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
-
-      if (current >= elementTop - props.threshold) {
-        doLoadMore();
-      }
-    });
-  }); // 确保在内容不足时会自动触发加载事件
+  const [flag, setFlag] = (0, _react.useState)({});
+  const nextFlagRef = (0, _react.useRef)(flag);
+  const check = (0, _ahooks.useMemoizedFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+    if (nextFlagRef.current !== flag) return;
+    if (!props.hasMore) return;
+    const element = elementRef.current;
+    if (!element) return;
+    if (!element.offsetParent) return;
+    const parent = (0, _getScrollParent.getScrollParent)(element);
+    if (!parent) return;
+    const rect = element.getBoundingClientRect();
+    const elementTop = rect.top;
+    const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+
+    if (current >= elementTop - props.threshold) {
+      const nextFlag = {};
+      nextFlagRef.current = nextFlag;
+      yield doLoadMore();
+      setFlag(nextFlag);
+    }
+  })); // 确保在内容不足时会自动触发加载事件
 
   (0, _react.useEffect)(() => {
     check();

package/2x/cjs/components/modal/modal.js

@@ -41,7 +41,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const classPrefix = `adm-modal`;
 const defaultProps = {
   visible: false,
   actions: [],

package/2x/cjs/components/notice-bar/notice-bar.js

@@ -76,7 +76,7 @@ const NoticeBar = (0, _react.memo)(p => {
     delayLockRef.current = false;
     start();
   }, props.delay);
-  (0, _useResizeEffect.useResizeEffect)(text => {
+  (0, _useResizeEffect.useResizeEffect)(() => {
     start();
   }, containerRef);
   (0, _useMutationEffect.useMutationEffect)(() => {

package/2x/cjs/components/search-bar/search-bar.js

@@ -67,7 +67,6 @@ const SearchBar = (0, _react.forwardRef)((p, ref) => {
 
   const renderCancelButton = () => {
     let isShowCancel = false;
-    const showCancelButton = props.showCancelButton;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);

package/2x/cjs/components/swiper/swiper.js

@@ -258,7 +258,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, _react.default.Children.map(validChildren, (child, index) => {
+        }, _react.default.Children.map(validChildren, child => {
           return _react.default.createElement("div", {
             className: 'adm-swiper-slide'
           }, child);

package/2x/cjs/components/text-area/text-area.css

@@ -3,6 +3,8 @@
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --count-text-align: right;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
@@ -27,6 +29,7 @@
   outline: none;
   appearance: none;
   min-height: 1.5em;
+  text-align: var(--text-align);
 }
 
 .adm-text-area-element::placeholder {
@@ -62,7 +65,7 @@
 }
 
 .adm-text-area-count {
-  text-align: right;
+  text-align: var(--count-text-align);
   color: var(--adm-color-weak);
   font-size: 34px;
   padding-top: 16px;

package/2x/cjs/components/text-area/text-area.d.ts

@@ -14,7 +14,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
         maxRows?: number;
     };
     id?: string;
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--count-text-align'>;
 export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
@@ -33,4 +33,4 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color"> & React.RefAttributes<TextAreaRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;

package/2x/es/components/floating-bubble/floating-bubble.d.ts

@@ -2,5 +2,7 @@ import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    axis?: 'x' | 'y' | 'xy' | 'lock';
+    magnetic?: 'x' | 'y';
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/2x/es/components/floating-bubble/floating-bubble.js

@@ -1,47 +1,74 @@
 import React, { useRef } from 'react';
-import { useSpring, animated } from '@react-spring/web';
+import { useSpring, animated, to } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 const classPrefix = `adm-floating-bubble`;
-const defaultProps = {};
+const defaultProps = {
+  axis: 'y'
+};
 export const FloatingBubble = p => {
   const props = mergeProps(defaultProps, p);
   const boundaryRef = useRef(null);
+  const buttonRef = useRef(null);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
    * to prevent an unintended restart
    */
 
-  const [animationStyles, animation] = useSpring(() => ({
+  const [{
+    x,
+    y,
+    opacity
+  }, api] = useSpring(() => ({
+    x: 0,
     y: 0,
-    scale: 1,
     opacity: 1
   }));
   const bind = useDrag(state => {
-    if (state.down) {
-      // be movable in y axis
-      animation.start({
-        y: state.offset[1]
-      });
-    } // active status
+    let nextX = state.offset[0];
+    let nextY = state.offset[1];
 
+    if (state.last) {
+      const boundary = boundaryRef.current;
+      const button = buttonRef.current;
+      if (!boundary || !button) return;
 
-    animation.start({
-      scale: state.active ? 1.1 : 1,
+      if (props.magnetic === 'x') {
+        const compensation = x.goal - x.get();
+        const boundaryRect = boundary.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        const leftDistance = buttonRect.left + compensation - boundaryRect.left;
+        const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
+
+        if (rightDistance <= leftDistance) {
+          nextX += rightDistance;
+        } else {
+          nextX -= leftDistance;
+        }
+      }
+    }
+
+    api.start({
+      x: nextX,
+      y: nextY // immediate: !state.last,
+
+    }); // active status
+
+    api.start({
       opacity: state.active ? 0.8 : 1
     });
   }, {
-    // only trigger if a movement is detected on the specified axis.
-    axis: 'y',
+    axis: props.axis === 'xy' ? undefined : props.axis,
     pointer: {
       touch: true
     },
     // the component won't trigger drag logic if the user just clicked on the component.
     filterTaps: true,
     // set constraints to the user gesture
-    bounds: boundaryRef
+    bounds: boundaryRef,
+    from: () => [x.get(), y.get()]
   });
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
@@ -51,8 +78,12 @@ export const FloatingBubble = p => {
     className: `${classPrefix}-boundary`,
     ref: boundaryRef
   })), React.createElement(animated.div, Object.assign({}, bind(), {
-    style: Object.assign({}, animationStyles),
+    style: {
+      opacity,
+      transform: to([x, y], (x, y) => `translate(${x}px, ${y}px)`)
+    },
     onClick: props.onClick,
-    className: `${classPrefix}-button`
+    className: `${classPrefix}-button`,
+    ref: buttonRef
   }), props.children)));
 };

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

@@ -45,7 +45,7 @@ export const Form = forwardRef((p, ref) => {
     items = [];
   }
 
-  React.Children.forEach(props.children, (child, index) => {
+  React.Children.forEach(props.children, child => {
     if (React.isValidElement(child) && child.type === Header) {
       collect();
       currentHeader = child.props.children;

package/2x/es/components/infinite-scroll/infinite-scroll.js

@@ -1,5 +1,6 @@
+import { __awaiter } from "tslib";
 import { mergeProps } from '../../utils/with-default-props';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useLockFn, useMemoizedFn } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { getScrollParent } from '../../utils/get-scroll-parent';
@@ -23,25 +24,27 @@ export const InfiniteScroll = p => {
   }, p);
   const doLoadMore = useLockFn(() => props.loadMore());
   const elementRef = useRef(null);
-  const checkTimeoutRef = useRef();
-  const check = useMemoizedFn(() => {
-    window.clearTimeout(checkTimeoutRef.current);
-    checkTimeoutRef.current = window.setTimeout(() => {
-      if (!props.hasMore) return;
-      const element = elementRef.current;
-      if (!element) return;
-      if (!element.offsetParent) return;
-      const parent = getScrollParent(element);
-      if (!parent) return;
-      const rect = element.getBoundingClientRect();
-      const elementTop = rect.top;
-      const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+  const [flag, setFlag] = useState({});
+  const nextFlagRef = useRef(flag);
+  const check = useMemoizedFn(() => __awaiter(void 0, void 0, void 0, function* () {
+    if (nextFlagRef.current !== flag) return;
+    if (!props.hasMore) return;
+    const element = elementRef.current;
+    if (!element) return;
+    if (!element.offsetParent) return;
+    const parent = getScrollParent(element);
+    if (!parent) return;
+    const rect = element.getBoundingClientRect();
+    const elementTop = rect.top;
+    const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
 
-      if (current >= elementTop - props.threshold) {
-        doLoadMore();
-      }
-    });
-  }); // 确保在内容不足时会自动触发加载事件
+    if (current >= elementTop - props.threshold) {
+      const nextFlag = {};
+      nextFlagRef.current = nextFlag;
+      yield doLoadMore();
+      setFlag(nextFlag);
+    }
+  })); // 确保在内容不足时会自动触发加载事件
 
   useEffect(() => {
     check();

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

@@ -13,7 +13,6 @@ import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
 import { CloseOutline } from 'antd-mobile-icons';
-const classPrefix = `adm-modal`;
 const defaultProps = {
   visible: false,
   actions: [],

package/2x/es/components/notice-bar/notice-bar.js

@@ -55,7 +55,7 @@ export const NoticeBar = memo(p => {
     delayLockRef.current = false;
     start();
   }, props.delay);
-  useResizeEffect(text => {
+  useResizeEffect(() => {
     start();
   }, containerRef);
   useMutationEffect(() => {

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

@@ -45,7 +45,6 @@ export const SearchBar = forwardRef((p, ref) => {
 
   const renderCancelButton = () => {
     let isShowCancel = false;
-    const showCancelButton = props.showCancelButton;
 
     if (typeof props.showCancelButton === 'function') {
       isShowCancel = props.showCancelButton(hasFocus, value);

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

@@ -230,7 +230,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
-        }, React.Children.map(validChildren, (child, index) => {
+        }, React.Children.map(validChildren, child => {
           return React.createElement("div", {
             className: 'adm-swiper-slide'
           }, child);

package/2x/es/components/text-area/text-area.css

@@ -3,6 +3,8 @@
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --count-text-align: right;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
@@ -27,6 +29,7 @@
   outline: none;
   appearance: none;
   min-height: 1.5em;
+  text-align: var(--text-align);
 }
 
 .adm-text-area-element::placeholder {
@@ -62,7 +65,7 @@
 }
 
 .adm-text-area-count {
-  text-align: right;
+  text-align: var(--count-text-align);
   color: var(--adm-color-weak);
   font-size: 34px;
   padding-top: 16px;

package/2x/es/components/text-area/text-area.d.ts

@@ -14,7 +14,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
         maxRows?: number;
     };
     id?: string;
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--count-text-align'>;
 export declare type TextAreaRef = {
     clear: () => void;
     focus: () => void;
@@ -33,4 +33,4 @@ export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.Detail
         maxRows?: number | undefined;
     } | undefined;
     id?: string | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--disabled-color"> & React.RefAttributes<TextAreaRef>>;
+} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align"> & React.RefAttributes<TextAreaRef>>;

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "dependencies": {
     "@react-spring/web": "^9.4.3",
     "@types/resize-observer-browser": "^0.1.7",

package/cjs/components/floating-bubble/floating-bubble.d.ts

@@ -2,5 +2,7 @@ import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    axis?: 'x' | 'y' | 'xy' | 'lock';
+    magnetic?: 'x' | 'y';
 } & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/cjs/components/floating-bubble/floating-bubble.js

@@ -20,45 +20,72 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 const classPrefix = `adm-floating-bubble`;
-const defaultProps = {};
+const defaultProps = {
+  axis: 'y'
+};
 
 const FloatingBubble = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const boundaryRef = (0, _react.useRef)(null);
+  const buttonRef = (0, _react.useRef)(null);
   /**
    * memoize the `to` function
    * inside a component that renders frequently
    * to prevent an unintended restart
    */
 
-  const [animationStyles, animation] = (0, _web.useSpring)(() => ({
+  const [{
+    x,
+    y,
+    opacity
+  }, api] = (0, _web.useSpring)(() => ({
+    x: 0,
     y: 0,
-    scale: 1,
     opacity: 1
   }));
   const bind = (0, _react2.useDrag)(state => {
-    if (state.down) {
-      // be movable in y axis
-      animation.start({
-        y: state.offset[1]
-      });
-    } // active status
+    let nextX = state.offset[0];
+    let nextY = state.offset[1];
+
+    if (state.last) {
+      const boundary = boundaryRef.current;
+      const button = buttonRef.current;
+      if (!boundary || !button) return;
+
+      if (props.magnetic === 'x') {
+        const compensation = x.goal - x.get();
+        const boundaryRect = boundary.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        const leftDistance = buttonRect.left + compensation - boundaryRect.left;
+        const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
 
+        if (rightDistance <= leftDistance) {
+          nextX += rightDistance;
+        } else {
+          nextX -= leftDistance;
+        }
+      }
+    }
 
-    animation.start({
-      scale: state.active ? 1.1 : 1,
+    api.start({
+      x: nextX,
+      y: nextY // immediate: !state.last,
+
+    }); // active status
+
+    api.start({
       opacity: state.active ? 0.8 : 1
     });
   }, {
-    // only trigger if a movement is detected on the specified axis.
-    axis: 'y',
+    axis: props.axis === 'xy' ? undefined : props.axis,
     pointer: {
       touch: true
     },
     // the component won't trigger drag logic if the user just clicked on the component.
     filterTaps: true,
     // set constraints to the user gesture
-    bounds: boundaryRef
+    bounds: boundaryRef,
+    from: () => [x.get(), y.get()]
   });
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
@@ -68,9 +95,13 @@ const FloatingBubble = p => {
     className: `${classPrefix}-boundary`,
     ref: boundaryRef
   })), _react.default.createElement(_web.animated.div, Object.assign({}, bind(), {
-    style: Object.assign({}, animationStyles),
+    style: {
+      opacity,
+      transform: (0, _web.to)([x, y], (x, y) => `translate(${x}px, ${y}px)`)
+    },
     onClick: props.onClick,
-    className: `${classPrefix}-button`
+    className: `${classPrefix}-button`,
+    ref: buttonRef
   }), props.children)));
 };
 

package/cjs/components/form/form.js

@@ -66,7 +66,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     items = [];
   }
 
-  _react.default.Children.forEach(props.children, (child, index) => {
+  _react.default.Children.forEach(props.children, child => {
     if (_react.default.isValidElement(child) && child.type === _header.Header) {
       collect();
       currentHeader = child.props.children;