antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/2x/es/components/{search/search.js → search-bar/search-bar.js}

@@ -3,23 +3,29 @@ import classNames from 'classnames';
 import Input from '../input';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-import { SearchOutlined } from '@ant-design/icons';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { SearchOutline } from 'antd-mobile-icons';
+import { usePropsValue } from '../../utils/use-props-value';
 import { useConfig } from '../config-provider';
-var classPrefix = "adm-search";
+var classPrefix = "adm-search-bar";
 var defaultProps = {
   clearable: true,
   showCancelButton: false,
-  defaultValue: ''
+  defaultValue: '',
+  clearOnCancel: true
 };
-export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
+export var SearchBar = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
-  var props = mergeProps(defaultProps, p);
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var props = mergeProps(defaultProps, {
+    cancelText: locale.common.cancel
+  }, p);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var _useState = useState(false),
       hasFocus = _useState[0],
@@ -46,25 +52,44 @@ export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
     };
   });
 
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
+  var renderCancelButton = function renderCancelButton() {
+    var isShowCancel = false;
+
+    if (typeof props.showCancelButton === 'function') {
+      isShowCancel = props.showCancelButton(hasFocus, value);
+    } else {
+      isShowCancel = props.showCancelButton && hasFocus;
+    }
+
+    return isShowCancel && /*#__PURE__*/React.createElement("div", {
+      className: classPrefix + "-suffix"
+    }, /*#__PURE__*/React.createElement("a", {
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      },
+      onTouchStart: function onTouchStart(e) {
+        e.preventDefault();
+      },
+      onClick: function onClick() {
+        var _a, _b, _c;
+
+        if (props.clearOnCancel) {
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        }
+
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      }
+    }, props.cancelText));
+  };
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = hasFocus, _classNames))
-  }, /*#__PURE__*/React.createElement("form", {
-    className: classPrefix + "-input-box",
-    action: '/',
-    onSubmit: function onSubmit(e) {
-      var _a, _b;
-
-      e.preventDefault();
-      e.stopPropagation();
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
-    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-input-box"
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-input-box-icon"
-  }, /*#__PURE__*/React.createElement(SearchOutlined, null)), /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(SearchOutline, null)), /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
     className: classPrefix + "-input",
     value: value,
@@ -72,35 +97,26 @@ export var Search = /*#__PURE__*/forwardRef(function (p, ref) {
     maxLength: props.maxLength,
     placeholder: props.placeholder,
     clearable: props.clearable,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
       var _a;
 
       setHasFocus(true);
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(e) {
       var _a;
 
       setHasFocus(false);
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     onClear: props.onClear,
-    type: 'search'
-  })), props.showCancelButton && hasFocus && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-suffix"
-  }, /*#__PURE__*/React.createElement("a", {
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-    },
-    onTouchStart: function onTouchStart(e) {
-      e.preventDefault();
-    },
-    onClick: function onClick() {
-      var _a, _b, _c;
+    type: 'search',
+    enterKeyHint: 'search',
+    onEnterPress: function onEnterPress() {
+      var _a, _b;
 
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
-      (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
     }
-  }, locale.common.cancel))));
+  })), renderCancelButton()));
 });

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

@@ -12,6 +12,8 @@ export declare type SelectorProps<V> = {
     disabled?: boolean;
     defaultValue?: V[];
     value?: V[];
-    onChange?: (v: V[]) => void;
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
 } & NativeProps<'--checked-color'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

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

@@ -6,7 +6,7 @@ import Space from '../space';
 import Grid from '../grid';
 import { convertPx } from '../../utils/convert-px';
 import selectorCheckMarkImg from '../../assets/selector-check-mark.svg';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = "adm-selector";
 var defaultProps = {
   multiple: false,
@@ -15,9 +15,25 @@ var defaultProps = {
 export var Selector = function Selector(p) {
   var props = mergeProps(defaultProps, p);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: function onChange(val) {
+      var _a;
+
+      var extend = {
+        get items() {
+          return props.options.filter(function (option) {
+            return val.includes(option.value);
+          });
+        }
+
+      };
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  }),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var items = props.options.map(function (option) {
     var _classNames;
@@ -34,11 +50,14 @@ export var Selector = function Selector(p) {
         }
 
         if (props.multiple) {
-          setValue(active ? value.filter(function (v) {
+          var val = active ? value.filter(function (v) {
             return v !== option.value;
-          }) : [].concat(value, [option.value]));
+          }) : [].concat(value, [option.value]);
+          setValue(val);
         } else {
-          setValue(active ? [] : [option.value]);
+          var _val = active ? [] : [option.value];
+
+          setValue(_val);
         }
       }
     }, option.label, active && props.multiple && /*#__PURE__*/React.createElement("div", {

package/2x/es/components/side-bar/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './side-bar.less';
+export type { SideBarProps, SideBarItemProps } from './side-bar';
+declare const _default: import("react").FC<import("./side-bar").SideBarProps> & {
+    Item: import("react").FC<import("./side-bar").SideBarItemProps>;
+};
+export default _default;

package/2x/es/components/side-bar/index.js

@@ -0,0 +1,6 @@
+import "./side-bar.css";
+import { SideBar, SideBarItem } from './side-bar';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(SideBar, {
+  Item: SideBarItem
+});

package/2x/es/components/side-bar/side-bar.css

@@ -0,0 +1,58 @@
+.adm-side-bar {
+  --height: 100%;
+  --width: 192px;
+  --item-border-radius: 16px;
+  width: var(--width);
+  height: var(--height);
+  font-size: 30px;
+  overflow-y: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.adm-side-bar-item {
+  display: flex;
+  align-items: center;
+  min-height: 100px;
+  padding: 12px 44px;
+  position: relative;
+  cursor: pointer;
+  background-color: #f5f5f5;
+}
+
+.adm-side-bar-item-active {
+  color: var(--adm-color-primary);
+  background-color: white;
+  font-weight: bold;
+  position: relative;
+}
+
+.adm-side-bar-item-active + .adm-side-bar-item {
+  border-top-right-radius: var(--item-border-radius);
+}
+
+.adm-side-bar-item-active::before {
+  content: '';
+  width: var(--item-border-radius);
+  height: var(--item-border-radius);
+  background-color: white;
+  position: absolute;
+  top: calc(var(--item-border-radius) * -1);
+  right: 0;
+}
+
+.adm-side-bar-item-active::after {
+  content: '';
+  width: var(--item-border-radius);
+  height: var(--item-border-radius);
+  background-color: #f5f5f5;
+  border-bottom-right-radius: var(--item-border-radius);
+  position: absolute;
+  top: calc(var(--item-border-radius) * -1);
+  right: 0;
+}
+
+.adm-side-bar-item-disabled {
+  cursor: not-allowed;
+  color: var(--adm-color-light);
+}

package/2x/es/components/side-bar/side-bar.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SideBarItemProps = {
+    title?: string;
+    disabled?: boolean;
+    badge?: ReactNode;
+} & NativeProps;
+export declare const SideBarItem: FC<SideBarItemProps>;
+export declare type SideBarProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onChange?: (key: string) => void;
+} & NativeProps<'--width' | '--height' | '--item-border-radius'>;
+export declare const SideBar: FC<SideBarProps>;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import Badge from '../badge';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+var classPrefix = "adm-side-bar";
+export var SideBarItem = function SideBarItem() {
+  return null;
+};
+export var SideBar = function SideBar(props) {
+  var _a;
+
+  var firstActiveKey = null;
+  var items = [];
+  React.Children.forEach(props.children, function (child, index) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    items.push(child);
+  });
+
+  var _usePropsValue = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: props.onChange
+  }),
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix)
+  }, items.map(function (item) {
+    var _classNames;
+
+    var active = item.key === activeKey;
+    return withNativeProps(item.props, /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      onClick: function onClick() {
+        var key = item.key;
+        if (key === undefined || key === null || item.props.disabled) return;
+        setActiveKey(key.toString());
+      },
+      className: classNames(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = active, _classNames[classPrefix + "-item-disabled"] = item.props.disabled, _classNames))
+    }, /*#__PURE__*/React.createElement(Badge, {
+      content: item.props.badge
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classPrefix + "-item-title"
+    }, item.props.title))));
+  })));
+};

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

@@ -62,6 +62,7 @@
 }
 
 .adm-slider-thumb-container {
+  touch-action: none;
   position: absolute;
   width: 64px;
   height: 64px;
@@ -72,8 +73,8 @@
 
 .adm-slider-mark {
   position: relative;
-  overflow: visible;
   width: 100%;
+  overflow: visible;
   font-size: 24px;
   height: 24px;
   margin-top: 8px;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];
@@ -15,4 +15,4 @@ export declare type SliderProps = {
     onChange?: (value: SliderValue) => void;
     onAfterChange?: (value: SliderValue) => void;
 } & NativeProps<'--fill-color'>;
-export declare const Slider: React.FC<SliderProps>;
+export declare const Slider: FC<SliderProps>;

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

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import Ticks from './ticks';
 import Marks from './marks';
 import Thumb from './thumb';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 import { nearest } from '../../utils/nearest';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = "adm-slider";
 var defaultProps = {
   min: 0,
@@ -16,11 +16,12 @@ var defaultProps = {
   range: false,
   disabled: false
 };
-export var Slider = withDefaultProps(defaultProps)(function (props) {
+export var Slider = function Slider(p) {
   var _classNames;
 
   var _a;
 
+  var props = mergeProps(defaultProps, p);
   var min = props.min,
       max = props.max,
       disabled = props.disabled,
@@ -48,13 +49,13 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.value,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
     onChange: props.onChange
   }),
-      rawValue = _useNewControllableVa[0],
-      setRawValue = _useNewControllableVa[1];
+      rawValue = _usePropsValue[0],
+      setRawValue = _usePropsValue[1];
 
   var sliderValue = sortValue(convertValue(rawValue));
 
@@ -106,8 +107,10 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     if (dragLockRef.current > 0) return;
     event.stopPropagation();
     if (disabled) return;
-    var sliderOffsetLeft = trackRef.current.getBoundingClientRect().left;
-    var position = (event.clientX - sliderOffsetLeft) / Math.ceil(trackRef.current.offsetWidth) * (max - min) + min;
+    var track = trackRef.current;
+    if (!track) return;
+    var sliderOffsetLeft = track.getBoundingClientRect().left;
+    var position = (event.clientX - sliderOffsetLeft) / Math.ceil(track.offsetWidth) * (max - min) + min;
     var targetValue = getValueByPosition(position);
     var nextSliderValue;
 
@@ -187,4 +190,4 @@ export var Slider = withDefaultProps(defaultProps)(function (props) {
     lowerBound: sliderValue[0],
     upperBound: sliderValue[1]
   })));
-});
+};

package/2x/es/components/slider/thumb.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDrag, subV } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 var classPrefix = "adm-slider";
 
 var Thumb = function Thumb(props) {
@@ -26,15 +26,16 @@ var Thumb = function Thumb(props) {
       prevValue.current = value;
     }
 
-    var _subV = subV(state.xy, state.initial),
-        x = _subV[0];
-
+    var x = state.xy[0] - state.initial[0];
     var sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     if (!sliderOffsetWith) return;
     var diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
   }, {
-    axis: 'x'
+    axis: 'x',
+    pointer: {
+      touch: true
+    }
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classPrefix + "-thumb-container",

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

@@ -4,8 +4,9 @@
 
 .adm-space {
   display: inline-flex;
-  --vertical-size: 16px;
-  --horizontal-size: 16px;
+  --gap: 16px;
+  --gap-vertical: var(--gap);
+  --gap-horizontal: var(--gap);
 }
 
 .adm-space-vertical {
@@ -13,7 +14,7 @@
 }
 
 .adm-space-vertical > .adm-space-item {
-  margin-bottom: var(--vertical-size);
+  margin-bottom: var(--gap-vertical);
 }
 
 .adm-space-vertical > .adm-space-item:last-child {
@@ -25,7 +26,7 @@
 }
 
 .adm-space-horizontal > .adm-space-item {
-  margin-right: var(--horizontal-size);
+  margin-right: var(--gap-horizontal);
 }
 
 .adm-space-horizontal > .adm-space-item:last-child {
@@ -34,11 +35,11 @@
 
 .adm-space-horizontal.adm-space-wrap {
   flex-wrap: wrap;
-  margin-bottom: calc(var(--vertical-size) * -1);
+  margin-bottom: calc(var(--gap-vertical) * -1);
 }
 
 .adm-space-horizontal.adm-space-wrap > .adm-space-item {
-  padding-bottom: var(--vertical-size);
+  padding-bottom: var(--gap-vertical);
 }
 
 .adm-space.adm-space-block {
@@ -73,10 +74,6 @@
   justify-content: flex-end;
 }
 
-.adm-space-justify-baseline {
-  justify-content: baseline;
-}
-
 .adm-space-justify-between {
   justify-content: space-between;
 }

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpaceProps = {
-    size?: number | number[] | string | string[];
     direction?: 'horizontal' | 'vertical';
     align?: 'start' | 'end' | 'center' | 'baseline';
-    justify?: 'start' | 'end' | 'center' | 'baseline' | 'between' | 'around' | 'evenly' | 'stretch';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
     wrap?: boolean;
     block?: boolean;
-} & NativeProps;
-export declare const Space: React.FC<SpaceProps>;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Space: FC<SpaceProps>;

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

@@ -1,34 +1,23 @@
 import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-space";
-export var Space = withDefaultProps({
+var defaultProps = {
   direction: 'horizontal'
-})(function (props) {
+};
+export var Space = function Space(p) {
   var _classNames;
 
-  var size = props.size,
-      direction = props.direction;
-  var sizeStyle = {};
-
-  if (size) {
-    var _ref = Array.isArray(size) ? size : [size, size],
-        horizontalSize = _ref[0],
-        verticalSize = _ref[1];
-
-    sizeStyle = {
-      '--vertical-size': typeof verticalSize === 'number' ? verticalSize + "px" : verticalSize,
-      '--horizontal-size': typeof horizontalSize === 'number' ? horizontalSize + "px" : horizontalSize
-    };
-  }
-
+  var props = mergeProps(defaultProps, p);
+  var direction = props.direction,
+      onClick = props.onClick;
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-wrap"] = props.wrap, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-" + direction] = true, _classNames[classPrefix + "-align-" + props.align] = !!props.align, _classNames[classPrefix + "-justify-" + props.justify] = !!props.justify, _classNames)),
-    style: sizeStyle
+    onClick: onClick
   }, React.Children.map(props.children, function (child) {
     return child !== null && child !== undefined && /*#__PURE__*/React.createElement("div", {
       className: classPrefix + "-item"
     }, child);
   })));
-});
+};