antd-mobile 5.0.0-rc.9 → 5.2.0

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

@@ -1,72 +1,56 @@
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = 'adm-text-area';
-var defaultProps = {
+import { devError } from '../../utils/dev-log';
+const classPrefix = 'adm-text-area';
+const defaultProps = {
   rows: 2,
   showCount: false,
   autoSize: false,
   defaultValue: ''
 };
-export var TextArea = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
-
-  var className = props.className,
-      style = props.style,
-      outerDefaultValue = props.defaultValue,
-      outerValue = props.value,
-      outerOnChange = props.onChange,
-      rows = props.rows,
-      autoSize = props.autoSize,
-      showCount = props.showCount,
-      textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
-
-  var _usePropsValue = usePropsValue(props),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var nativeTextAreaRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      clear: function clear() {
-        setValue('');
-      },
-      focus: function focus() {
-        var _a;
-
-        (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      },
-      blur: function blur() {
-        var _a;
-
-        (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    };
-  });
-  useEffect(function () {
+export const TextArea = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
+  const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
+    value: props.value === null ? '' : props.value
+  }));
+
+  if (props.value === null) {
+    devError('TextArea', '`value` prop on `TextArea` should not be `null`. Consider using an empty string to clear the component.');
+  }
+
+  const nativeTextAreaRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      setValue('');
+    },
+    focus: () => {
+      var _a;
+
+      (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+
+      (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+  }));
+  useEffect(() => {
     if (!autoSize) return;
-    var textArea = nativeTextAreaRef.current;
+    const textArea = nativeTextAreaRef.current;
     if (!textArea) return;
     textArea.style.height = 'auto';
-    var height = textArea.scrollHeight;
+    let height = textArea.scrollHeight;
 
     if (typeof autoSize === 'object') {
-      var computedStyle = window.getComputedStyle(textArea);
-      var lineHeight = parseFloat(computedStyle.lineHeight);
+      const computedStyle = window.getComputedStyle(textArea);
+      const lineHeight = parseFloat(computedStyle.lineHeight);
 
       if (autoSize.minRows) {
         height = Math.max(height, autoSize.minRows * lineHeight);
@@ -77,41 +61,60 @@ export var TextArea = /*#__PURE__*/forwardRef(function (p, ref) {
       }
     }
 
-    textArea.style.height = height + "px";
+    textArea.style.height = `${height}px`;
   }, [value, autoSize]);
-  var count;
+  const compositingRef = useRef(false);
+  let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
-    count = /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-count"
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    count = React.createElement("div", {
+      className: `${classPrefix}-count`
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix + "-wrapper", className),
-    style: style
-  }, /*#__PURE__*/React.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
-    onChange: function onChange(e) {
-      setValue(e.target.value);
+    placeholder: props.placeholder,
+    onChange: e => {
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: function onFocus(e) {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: function onBlur(e) {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 TextArea.defaultProps = defaultProps;

package/2x/es/components/toast/index.d.ts

@@ -1,6 +1,6 @@
 import './toast.less';
 import { clear, show, config } from './methods';
-export type { ToastShowProps } from './methods';
+export type { ToastShowProps, ToastHandler } from './methods';
 declare const Toast: {
     show: typeof show;
     clear: typeof clear;

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

@@ -1,8 +1,8 @@
 import "./toast.css";
 import { clear, show, config } from './methods';
-var Toast = {
-  show: show,
-  clear: clear,
-  config: config
+const Toast = {
+  show,
+  clear,
+  config
 };
 export default Toast;

package/2x/es/components/toast/methods.d.ts

@@ -1,5 +1,8 @@
 import { ToastProps } from './toast';
 export declare type ToastShowProps = Omit<ToastProps, 'visible'>;
-export declare function show(p: ToastShowProps | string): void;
+export declare type ToastHandler = {
+    close: () => void;
+};
+export declare function show(p: ToastShowProps | string): ToastHandler;
 export declare function clear(): void;
 export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/2x/es/components/toast/methods.js

@@ -1,78 +1,83 @@
-import React, { useEffect, useState } from 'react';
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { resolveContainer } from '../../utils/get-container';
 import ReactDOM from 'react-dom';
 import { InternalToast } from './toast';
 import { mergeProps } from '../../utils/with-default-props';
-var containers = [];
+const containers = [];
 
 function unmount(container) {
-  var unmountResult = ReactDOM.unmountComponentAtNode(container);
+  const unmountResult = ReactDOM.unmountComponentAtNode(container);
 
   if (unmountResult && container.parentNode) {
     container.parentNode.removeChild(container);
   }
 }
 
-var defaultProps = {
+const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
 export function show(p) {
-  var props = mergeProps(defaultProps, typeof p === 'string' ? {
+  const props = mergeProps(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  var timer = 0;
-  var _props$getContainer = props.getContainer,
-      getContainer = _props$getContainer === void 0 ? function () {
-    return document.body;
-  } : _props$getContainer;
-  var container = document.createElement('div');
-  var bodyContainer = resolveContainer(getContainer);
+  let timer = 0;
+  const {
+    getContainer = () => document.body
+  } = props;
+  const container = document.createElement('div');
+  const bodyContainer = resolveContainer(getContainer);
   bodyContainer.appendChild(container);
   clear();
   containers.push(container);
-
-  var TempToast = function TempToast() {
-    var _useState = useState(true),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
-      return function () {
+  const TempToast = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(true);
+    useEffect(() => {
+      return () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
       };
     }, []);
-    useEffect(function () {
+    useEffect(() => {
       if (props.duration === 0) {
         return;
       }
 
-      timer = window.setTimeout(function () {
+      timer = window.setTimeout(() => {
         setVisible(false);
       }, props.duration);
-      return function () {
+      return () => {
         window.clearTimeout(timer);
       };
     }, []);
-    return /*#__PURE__*/React.createElement(InternalToast, Object.assign({}, props, {
-      getContainer: function getContainer() {
-        return container;
-      },
+    useImperativeHandle(ref, () => ({
+      close: () => setVisible(false)
+    }));
+    return React.createElement(InternalToast, Object.assign({}, props, {
+      getContainer: () => container,
       visible: visible,
-      afterClose: function afterClose() {
+      afterClose: () => {
         unmount(container);
       }
     }));
-  };
+  });
+  const ref = createRef();
+  ReactDOM.render(React.createElement(TempToast, {
+    ref: ref
+  }), container);
+  return {
+    close: () => {
+      var _a;
 
-  ReactDOM.render( /*#__PURE__*/React.createElement(TempToast, null), container);
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  };
 }
 export function clear() {
   while (true) {
-    var container = containers.pop();
+    const container = containers.pop();
     if (!container) break;
     unmount(container);
   }

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

@@ -1,7 +1,17 @@
 .adm-toast-mask .adm-toast-wrap {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-toast-mask .adm-toast-main {
+  display: inline-block;
+  position: relative;
   top: 50%;
   left: 50%;
+  transform: translate(-50%, -50%);
   width: auto;
   min-width: 192px;
   max-width: 70%;
@@ -11,22 +21,21 @@
   word-break: break-all;
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 16px;
-  transform: translate(-50%, -50%);
   pointer-events: all;
   font-size: 30px;
   line-height: 1.5;
   box-sizing: border-box;
 }
 
-.adm-toast-mask .adm-toast-wrap-text {
+.adm-toast-mask .adm-toast-main-text {
   padding: 24px;
 }
 
-.adm-toast-mask .adm-toast-wrap-icon {
+.adm-toast-mask .adm-toast-main-icon {
   padding: 70px 80px;
 }
 
-.adm-toast-mask .adm-toast-wrap-icon .adm-toast-icon {
+.adm-toast-mask .adm-toast-main-icon .adm-toast-icon {
   text-align: center;
   margin-bottom: 16px;
   font-size: 72px;
@@ -34,5 +43,6 @@
 }
 
 .adm-toast-loading {
-  font-size: 48px;
+  --size: 96px;
+  margin: 0 auto 16px;
 }

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

@@ -1,42 +1,44 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { CheckOutline, CloseOutline } from 'antd-mobile-icons';
-import Loading from '../loading';
 import Mask from '../mask';
 import { mergeProps } from '../../utils/with-default-props';
 import AutoCenter from '../auto-center';
-var classPrefix = "adm-toast";
-var defaultProps = {
+import SpinLoading from '../spin-loading';
+const classPrefix = `adm-toast`;
+const defaultProps = {
   maskClickable: true,
   stopPropagation: ['click']
 };
-export var InternalToast = function InternalToast(p) {
-  var props = mergeProps(defaultProps, p);
-  var maskClickable = props.maskClickable,
-      content = props.content,
-      icon = props.icon,
-      position = props.position;
-  var iconElement = useMemo(function () {
+export const InternalToast = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    maskClickable,
+    content,
+    icon,
+    position
+  } = props;
+  const iconElement = useMemo(() => {
     if (icon === null || icon === undefined) return null;
 
     switch (icon) {
       case 'success':
-        return /*#__PURE__*/React.createElement(CheckOutline, null);
+        return React.createElement(CheckOutline, null);
 
       case 'fail':
-        return /*#__PURE__*/React.createElement(CloseOutline, null);
+        return React.createElement(CloseOutline, null);
 
       case 'loading':
-        return /*#__PURE__*/React.createElement(Loading, {
+        return React.createElement(SpinLoading, {
           color: 'white',
-          className: classPrefix + "-loading"
+          className: `${classPrefix}-loading`
         });
 
       default:
         return icon;
     }
   }, [icon]);
-  var top = useMemo(function () {
+  const top = useMemo(() => {
     switch (position) {
       case 'top':
         return '20%';
@@ -48,7 +50,7 @@ export var InternalToast = function InternalToast(p) {
         return '50%';
     }
   }, [position]);
-  return /*#__PURE__*/React.createElement(Mask, {
+  return React.createElement(Mask, {
     visible: props.visible,
     destroyOnClose: true,
     opacity: 0,
@@ -58,14 +60,16 @@ export var InternalToast = function InternalToast(p) {
     style: Object.assign({
       pointerEvents: maskClickable ? 'none' : 'auto'
     }, props.maskStyle),
-    className: classNames(classPrefix + "-mask", props.maskClassName),
+    className: classNames(`${classPrefix}-mask`, props.maskClassName),
     stopPropagation: props.stopPropagation
-  }, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-wrap`)
+  }, React.createElement("div", {
     style: {
-      top: top
+      top
     },
-    className: classNames(classPrefix + "-wrap", icon ? classPrefix + "-wrap-icon" : classPrefix + "-wrap-text")
-  }, iconElement && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-icon"
-  }, iconElement), /*#__PURE__*/React.createElement(AutoCenter, null, content)));
+    className: classNames(`${classPrefix}-main`, icon ? `${classPrefix}-main-icon` : `${classPrefix}-main-text`)
+  }, iconElement && React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, iconElement), React.createElement(AutoCenter, null, content))));
 };

package/2x/es/components/tree-select/index.js

@@ -3,5 +3,5 @@ import { TreeSelect } from './tree-select';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { Multiple } from './multiple';
 export default attachPropertiesToComponent(TreeSelect, {
-  Multiple: Multiple
+  Multiple
 });