antd-mobile 5.0.0-rc.9 → 5.0.0

package/es/components/virtual-input/virtual-input.js

@@ -1,64 +1,54 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import classNames from 'classnames';
 import { CloseCircleFill } from 'antd-mobile-icons';
-var classPrefix = 'adm-virtual-input';
-var defaultProps = {
+import { useIsomorphicLayoutEffect } from 'ahooks';
+const classPrefix = 'adm-virtual-input';
+const defaultProps = {
   defaultValue: ''
 };
-export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var rootRef = useRef(null);
-  var contentRef = useRef(null);
-
-  var _useState = useState(false),
-      hasFocus = _useState[0],
-      setHasFocus = _useState[1];
+export const VirtualInput = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  const [hasFocus, setHasFocus] = useState(false);
 
   function scrollToEnd() {
-    var root = rootRef.current;
+    const root = rootRef.current;
     if (!root) return;
 
     if (document.activeElement !== root) {
       return;
     }
 
-    var content = contentRef.current;
+    const content = contentRef.current;
     if (!content) return;
     content.scrollLeft = content.clientWidth;
   }
 
-  useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     scrollToEnd();
   }, [value]);
-  useEffect(function () {
+  useEffect(() => {
     if (hasFocus) {
       scrollToEnd();
     }
   }, [hasFocus]);
-  useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _a;
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
 
-        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      },
-      blur: function blur() {
-        var _a;
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
 
-        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    };
-  });
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+  }));
 
   function onFocus() {
     var _a;
@@ -74,40 +64,42 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     ref: rootRef,
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = props.disabled, _classNames)),
+    className: classNames(classPrefix, {
+      [`${classPrefix}-disabled`]: props.disabled
+    }),
     tabIndex: props.disabled ? undefined : 0,
     onFocus: onFocus,
     onBlur: onBlur,
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content",
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`,
     ref: contentRef
-  }, value, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-caret-container"
-  }, hasFocus && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-caret"
-  }))), props.clearable && !!value && hasFocus && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-clear",
-    onClick: function onClick(e) {
+  }, value, React.createElement("div", {
+    className: `${classPrefix}-caret-container`
+  }, hasFocus && React.createElement("div", {
+    className: `${classPrefix}-caret`
+  }))), props.clearable && !!value && hasFocus && React.createElement("div", {
+    className: `${classPrefix}-clear`,
+    onClick: e => {
       var _a;
 
       e.stopPropagation();
       setValue('');
       (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }, /*#__PURE__*/React.createElement(CloseCircleFill, null)), !value && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-placeholder"
-  }, props.placeholder), props.keyboard && /*#__PURE__*/React.cloneElement(props.keyboard, {
-    onInput: function onInput(v) {
+  }, React.createElement(CloseCircleFill, null)), !value && React.createElement("div", {
+    className: `${classPrefix}-placeholder`
+  }, props.placeholder), props.keyboard && React.cloneElement(props.keyboard, {
+    onInput: v => {
       setValue(value + v);
     },
-    onDelete: function onDelete() {
+    onDelete: () => {
       setValue(value.slice(0, -1));
     },
     visible: hasFocus,
-    onClose: function onClose() {
+    onClose: () => {
       var _a;
 
       (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();

package/es/components/water-mark/water-mark.js

@@ -2,55 +2,38 @@ import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-water-mark";
-var defaultProps = {
+const classPrefix = `adm-water-mark`;
+const defaultProps = {
   fullPage: true
 };
-export var WaterMark = function WaterMark(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var _props$zIndex = props.zIndex,
-      zIndex = _props$zIndex === void 0 ? 2000 : _props$zIndex,
-      _props$gapX = props.gapX,
-      gapX = _props$gapX === void 0 ? 24 : _props$gapX,
-      _props$gapY = props.gapY,
-      gapY = _props$gapY === void 0 ? 48 : _props$gapY,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 120 : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 64 : _props$height,
-      _props$rotate = props.rotate,
-      rotate = _props$rotate === void 0 ? -22 : _props$rotate,
-      image = props.image,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === void 0 ? 120 : _props$imageWidth,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === void 0 ? 64 : _props$imageHeight,
-      content = props.content,
-      _props$fontStyle = props.fontStyle,
-      fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
-      _props$fontWeight = props.fontWeight,
-      fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
-      _props$fontColor = props.fontColor,
-      fontColor = _props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _props$fontColor,
-      _props$fontSize = props.fontSize,
-      fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
-      _props$fontFamily = props.fontFamily,
-      fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily;
-
-  var _useState = useState(''),
-      base64Url = _useState[0],
-      setBase64Url = _useState[1];
-
-  useEffect(function () {
-    var canvas = document.createElement('canvas');
-    var ratio = window.devicePixelRatio;
-    var ctx = canvas.getContext('2d');
-    var canvasWidth = (gapX + width) * ratio + "px";
-    var canvasHeight = (gapY + height) * ratio + "px";
-    var markWidth = width * ratio;
-    var markHeight = height * ratio;
+export const WaterMark = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    zIndex = 2000,
+    gapX = 24,
+    gapY = 48,
+    width = 120,
+    height = 64,
+    rotate = -22,
+    image,
+    imageWidth = 120,
+    imageHeight = 64,
+    content,
+    fontStyle = 'normal',
+    fontWeight = 'normal',
+    fontColor = 'rgba(0,0,0,.15)',
+    fontSize = 14,
+    fontFamily = 'sans-serif'
+  } = props;
+  const [base64Url, setBase64Url] = useState('');
+  useEffect(() => {
+    const canvas = document.createElement('canvas');
+    const ratio = window.devicePixelRatio;
+    const ctx = canvas.getContext('2d');
+    const canvasWidth = `${(gapX + width) * ratio}px`;
+    const canvasHeight = `${(gapY + height) * ratio}px`;
+    const markWidth = width * ratio;
+    const markHeight = height * ratio;
     canvas.setAttribute('width', canvasWidth);
     canvas.setAttribute('height', canvasHeight);
 
@@ -58,12 +41,12 @@ export var WaterMark = function WaterMark(p) {
       if (image) {
         ctx.translate(markWidth / 2, markHeight / 2);
         ctx.rotate(Math.PI / 180 * Number(rotate));
-        var img = new Image();
+        const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
         img.src = image;
 
-        img.onload = function () {
+        img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
@@ -74,8 +57,8 @@ export var WaterMark = function WaterMark(p) {
 
         ctx.translate(markWidth / 2, markHeight / 2);
         ctx.rotate(Math.PI / 180 * Number(rotate));
-        var markSize = Number(fontSize) * ratio;
-        ctx.font = fontStyle + " normal " + fontWeight + " " + markSize + "px/" + markHeight + "px " + fontFamily;
+        const markSize = Number(fontSize) * ratio;
+        ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
         ctx.fillStyle = fontColor;
         ctx.fillText(content, 0, 0);
         ctx.restore();
@@ -85,12 +68,14 @@ export var WaterMark = function WaterMark(p) {
       throw new Error('当前环境不支持Canvas');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-full-page"] = props.fullPage, _classNames)),
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-full-page`]: props.fullPage
+    }),
     style: {
-      zIndex: zIndex,
-      backgroundSize: gapX + width + "px",
-      backgroundImage: "url('" + base64Url + "')"
+      zIndex,
+      backgroundSize: `${gapX + width}px`,
+      backgroundImage: `url('${base64Url}')`
     }
   }));
 };

package/es/global/index.js

@@ -2,5 +2,5 @@ import "./global.css";
 import { canUseDom } from '../utils/can-use-dom';
 
 if (canUseDom) {
-  document.addEventListener('touchstart', function () {}, true);
+  document.addEventListener('touchstart', () => {}, true);
 }

package/es/index.d.ts

@@ -2,8 +2,10 @@ import './global';
 export { setDefaultConfig } from './components/config-provider';
 export { default as ActionSheet } from './components/action-sheet';
 export { default as AutoCenter } from './components/auto-center';
+export { default as Avatar } from './components/avatar';
 export { default as Badge } from './components/badge';
 export { default as Button } from './components/button';
+export { default as Calendar } from './components/calendar';
 export { default as CapsuleTabs } from './components/capsule-tabs';
 export { default as Card } from './components/card';
 export { default as CascadePicker } from './components/cascade-picker';
@@ -18,6 +20,7 @@ export { default as DatePicker } from './components/date-picker';
 export { default as DatePickerView } from './components/date-picker-view';
 export { default as Dialog } from './components/dialog';
 export { default as Divider } from './components/divider';
+export { default as DotLoading } from './components/dot-loading';
 export { default as Dropdown } from './components/dropdown';
 export { default as Ellipsis } from './components/ellipsis';
 export { default as Empty } from './components/empty';
@@ -54,13 +57,13 @@ export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
-export { default as Search } from './components/search-bar';
 export { default as SearchBar } from './components/search-bar';
 export { default as Selector } from './components/selector';
 export { default as SideBar } from './components/side-bar';
 export { default as Skeleton } from './components/skeleton';
 export { default as Slider } from './components/slider';
 export { default as Space } from './components/space';
+export { default as SpinLoading } from './components/spin-loading';
 export { default as Stepper } from './components//stepper';
 export { default as Steps } from './components/steps';
 export { default as SwipeAction } from './components/swipe-action';

package/es/index.js

@@ -2,8 +2,10 @@ import './global';
 export { setDefaultConfig } from './components/config-provider';
 export { default as ActionSheet } from './components/action-sheet';
 export { default as AutoCenter } from './components/auto-center';
+export { default as Avatar } from './components/avatar';
 export { default as Badge } from './components/badge';
 export { default as Button } from './components/button';
+export { default as Calendar } from './components/calendar';
 export { default as CapsuleTabs } from './components/capsule-tabs';
 export { default as Card } from './components/card';
 export { default as CascadePicker } from './components/cascade-picker';
@@ -18,6 +20,7 @@ export { default as DatePicker } from './components/date-picker';
 export { default as DatePickerView } from './components/date-picker-view';
 export { default as Dialog } from './components/dialog';
 export { default as Divider } from './components/divider';
+export { default as DotLoading } from './components/dot-loading';
 export { default as Dropdown } from './components/dropdown';
 export { default as Ellipsis } from './components/ellipsis';
 export { default as Empty } from './components/empty';
@@ -54,14 +57,13 @@ export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
-export { default as Search } from './components/search-bar'; // TODO: deprecated
-
 export { default as SearchBar } from './components/search-bar';
 export { default as Selector } from './components/selector';
 export { default as SideBar } from './components/side-bar';
 export { default as Skeleton } from './components/skeleton';
 export { default as Slider } from './components/slider';
 export { default as Space } from './components/space';
+export { default as SpinLoading } from './components/spin-loading';
 export { default as Stepper } from './components//stepper';
 export { default as Steps } from './components/steps';
 export { default as SwipeAction } from './components/swipe-action';

package/es/locales/base.d.ts

@@ -3,6 +3,10 @@ export declare const base: {
         confirm: string;
         cancel: string;
     };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
     Cascader: {
         placeholder: string;
     };

package/es/locales/base.js

@@ -1,8 +1,12 @@
-export var base = {
+export const base = {
   common: {
     confirm: 'Confirm',
     cancel: 'Cancel'
   },
+  Calendar: {
+    markItems: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    renderYearAndMonth: (year, month) => `${year}/${month}`
+  },
   Cascader: {
     placeholder: 'Selecting'
   },
@@ -10,7 +14,7 @@ export var base = {
     ok: 'OK'
   },
   ErrorBlock: {
-    "default": {
+    default: {
       title: 'Oops, something went wrong',
       description: 'Please wait a minute and try again'
     },

package/es/locales/en-US.d.ts

@@ -3,6 +3,10 @@ declare const enUS: {
         confirm: string;
         cancel: string;
     };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
     Cascader: {
         placeholder: string;
     };

package/es/locales/en-US.js

@@ -1,4 +1,4 @@
 import { mergeLocale } from '../utils/merge-locale';
 import { base } from './base';
-var enUS = mergeLocale(base, {});
+const enUS = mergeLocale(base, {});
 export default enUS;

package/es/locales/zh-CN.d.ts

@@ -3,6 +3,10 @@ declare const zhCN: {
         confirm: string;
         cancel: string;
     };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
     Cascader: {
         placeholder: string;
     };

package/es/locales/zh-CN.js

@@ -1,10 +1,14 @@
 import { mergeLocale } from '../utils/merge-locale';
 import { base } from './base';
-var zhCN = mergeLocale(base, {
+const zhCN = mergeLocale(base, {
   common: {
     confirm: '确定',
     cancel: '取消'
   },
+  Calendar: {
+    markItems: ['一', '二', '三', '四', '五', '六', '日'],
+    renderYearAndMonth: (year, month) => `${year}年${month}月`
+  },
   Cascader: {
     placeholder: '请选择'
   },
@@ -12,7 +16,7 @@ var zhCN = mergeLocale(base, {
     ok: '我知道了'
   },
   ErrorBlock: {
-    "default": {
+    default: {
       title: '页面遇到一些小问题',
       description: '待会来试试'
     },

package/es/utils/attach-properties-to-component.js

@@ -1,7 +1,7 @@
 export function attachPropertiesToComponent(component, properties) {
-  var ret = component;
+  const ret = component;
 
-  for (var key in properties) {
+  for (const key in properties) {
     if (properties.hasOwnProperty(key)) {
       ret[key] = properties[key];
     }

package/es/utils/bound.js

@@ -1,5 +1,5 @@
 export function bound(position, min, max) {
-  var ret = position;
+  let ret = position;
 
   if (min !== undefined) {
     ret = Math.max(position, min);

package/es/utils/can-use-dom.js

@@ -1 +1 @@
-export var canUseDom = !!(typeof window !== 'undefined' && typeof document !== 'undefined' && window.document && window.document.createElement);
+export const canUseDom = !!(typeof window !== 'undefined' && typeof document !== 'undefined' && window.document && window.document.createElement);

package/es/utils/convert-px.js

@@ -1,8 +1,8 @@
 import { canUseDom } from './can-use-dom';
 import { isDev } from './is-dev';
 import { devError } from './dev-log';
-var tenPxTester = null;
-var tester = null;
+let tenPxTester = null;
+let tester = null;
 
 if (canUseDom) {
   tenPxTester = document.createElement('div');

package/es/utils/create-icon-component.js

@@ -1,5 +1,5 @@
 export function createIconComponent(svg) {
-  var Icon = function Icon() {
+  const Icon = () => {
     return svg;
   };
 

package/es/utils/dev-log.js

@@ -1,11 +1,11 @@
 import { isDev } from './is-dev';
 export function devWarning(component, message) {
   if (isDev) {
-    console.warn("[antd-mobile: " + component + "] " + message);
+    console.warn(`[antd-mobile: ${component}] ${message}`);
   }
 }
 export function devError(component, message) {
   if (isDev) {
-    console.error("[antd-mobile: " + component + "] " + message);
+    console.error(`[antd-mobile: ${component}] ${message}`);
   }
 }

package/es/utils/generate-int-array.js

@@ -1,7 +1,7 @@
 export function generateIntArray(from, to) {
-  var array = [];
+  const array = [];
 
-  for (var i = from; i <= to; i++) {
+  for (let i = from; i <= to; i++) {
     array.push(i);
   }
 

package/es/utils/get-container.js

@@ -1,4 +1,4 @@
 export function resolveContainer(getContainer) {
-  var container = typeof getContainer === 'function' ? getContainer() : getContainer;
+  const container = typeof getContainer === 'function' ? getContainer() : getContainer;
   return container || document.body;
 }

package/es/utils/get-scroll-parent.js

@@ -1,23 +1,20 @@
 import { canUseDom } from './can-use-dom';
-var overflowScrollReg = /scroll|auto/i;
-var defaultRoot = canUseDom ? window : undefined;
+const overflowScrollReg = /scroll|auto|overlay/i;
+const defaultRoot = canUseDom ? window : undefined;
 
 function isElement(node) {
-  var ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+  const ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
 } // https://github.com/youzan/vant/issues/3823
 
 
-export function getScrollParent(el, root) {
-  if (root === void 0) {
-    root = defaultRoot;
-  }
-
-  var node = el;
+export function getScrollParent(el, root = defaultRoot) {
+  let node = el;
 
   while (node && node !== root && isElement(node)) {
-    var _window$getComputedSt = window.getComputedStyle(node),
-        overflowY = _window$getComputedSt.overflowY;
+    const {
+      overflowY
+    } = window.getComputedStyle(node);
 
     if (overflowScrollReg.test(overflowY)) {
       return node;

package/es/utils/is-dev.js

@@ -1 +1 @@
-export var isDev = process.env.NODE_ENV === 'development';
+export const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';

package/es/utils/native-props.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 export function withNativeProps(props, element) {
-  var p = Object.assign({}, element.props);
+  const p = Object.assign({}, element.props);
 
   if (props.className) {
     p.className = classNames(element.props.className, props.className);
@@ -15,7 +15,7 @@ export function withNativeProps(props, element) {
     p.tabIndex = props.tabIndex;
   }
 
-  for (var key in props) {
+  for (const key in props) {
     if (!props.hasOwnProperty(key)) continue;
 
     if (key.startsWith('data-') || key.startsWith('aria-')) {
@@ -23,5 +23,5 @@ export function withNativeProps(props, element) {
     }
   }
 
-  return /*#__PURE__*/React.cloneElement(element, p);
+  return React.cloneElement(element, p);
 }

package/es/utils/nearest.js

@@ -1,5 +1,5 @@
 export function nearest(arr, target) {
-  return arr.reduce(function (pre, cur) {
+  return arr.reduce((pre, cur) => {
     return Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur;
   });
 }

package/es/utils/noop.js

@@ -1 +1 @@
-export var noop = function noop() {};
+export const noop = () => {};

package/es/utils/render-to-body.js

@@ -1,10 +1,10 @@
 import ReactDOM from 'react-dom';
 export function renderToBody(element) {
-  var container = document.createElement('div');
+  const container = document.createElement('div');
   document.body.appendChild(container);
 
   function unmount() {
-    var unmountResult = ReactDOM.unmountComponentAtNode(container);
+    const unmountResult = ReactDOM.unmountComponentAtNode(container);
 
     if (unmountResult && container.parentNode) {
       container.parentNode.removeChild(container);

package/es/utils/render-to-container.js

@@ -3,8 +3,8 @@ import { resolveContainer } from './get-container';
 import { canUseDom } from './can-use-dom';
 export function renderToContainer(getContainer, node) {
   if (canUseDom && getContainer) {
-    var container = resolveContainer(getContainer);
-    return /*#__PURE__*/createPortal(node, container);
+    const container = resolveContainer(getContainer);
+    return createPortal(node, container);
   }
 
   return node;

package/es/utils/rubberband.js

@@ -2,11 +2,7 @@ import { bound } from './bound';
 export function rubberband(distance, dimension, constant) {
   return distance * dimension * constant / (dimension + constant * distance);
 }
-export function rubberbandIfOutOfBounds(position, min, max, dimension, constant) {
-  if (constant === void 0) {
-    constant = 0.15;
-  }
-
+export function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
   if (constant === 0) return bound(position, min, max);
   if (position < min) return -rubberband(min - position, dimension, constant) + min;
   if (position > max) return +rubberband(position - max, dimension, constant) + max;