antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

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

@@ -1,86 +1,48 @@
-import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { resolveContainer } from '../../utils/get-container';
+import React from 'react';
 import { InternalToast } from './toast';
 import { mergeProps } from '../../utils/with-default-props';
-import { render, unmount as reactUnmount } from '../../utils/render';
-const containers = [];
-
-function unmount(container) {
-  const unmountResult = reactUnmount(container);
-
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
-
+import { renderImperatively } from '../../utils/render-imperatively';
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
+
+const ToastInner = props => React.createElement(InternalToast, Object.assign({}, props));
+
 export function show(p) {
   const props = mergeProps(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement('div');
-  const bodyContainer = resolveContainer(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = forwardRef((_, ref) => {
-    const [visible, setVisible] = useState(true);
-    useEffect(() => {
-      return () => {
-        var _a;
+  const element = React.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
+    }
+  }));
 
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    useEffect(() => {
-      if (props.duration === 0) {
-        return;
-      }
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = renderImperatively(element);
+  }
 
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    useImperativeHandle(ref, () => ({
-      close: () => setVisible(false)
-    }));
-    return React.createElement(InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible: visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = createRef();
-  render(React.createElement(TempToast, {
-    ref: ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
 
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
 }
 export function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container) break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 export function config(val) {
   if (val.duration !== undefined) {

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

@@ -14,7 +14,7 @@
   transform: translate(-50%, -50%);
   width: auto;
   min-width: 192px;
-  max-width: 70%;
+  max-width: 400px;
   max-height: 70%;
   overflow: auto;
   color: white;
@@ -22,7 +22,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 16px;
   pointer-events: all;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }

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

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
     afterClose?: () => void;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;

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

@@ -23,10 +23,14 @@ export const InternalToast = p => {
 
     switch (icon) {
       case 'success':
-        return React.createElement(CheckOutline, null);
+        return React.createElement(CheckOutline, {
+          className: `${classPrefix}-icon-success`
+        });
 
       case 'fail':
-        return React.createElement(CloseOutline, null);
+        return React.createElement(CloseOutline, {
+          className: `${classPrefix}-icon-fail`
+        });
 
       case 'loading':
         return React.createElement(SpinLoading, {

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

@@ -0,0 +1,13 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 30px;
+}
+
+.adm-toast-loading.adm-toast-loading {
+  width: 96px;
+  height: 96px;
+  margin: 0 auto 16px;
+}
+
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/2x/es/components/tree-select/tree-select.css

@@ -15,7 +15,7 @@
 
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-tree-select-column:nth-child(2),

package/2x/es/components/virtual-input/virtual-input.css

@@ -1,5 +1,5 @@
 .adm-virtual-input {
-  --font-size: 34px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -109,5 +109,5 @@
 
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

package/2x/es/components/virtual-input/virtual-input.d.ts

@@ -21,4 +21,8 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;

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

@@ -44,13 +44,14 @@ export const WaterMark = p => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
-        img.src = image;
 
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+
+        img.src = image;
       } else if (content) {
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -65,7 +66,7 @@ export const WaterMark = p => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error('当前环境不支持Canvas');
+      throw new Error('Canvas is not supported in the current environment');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
   return withNativeProps(props, React.createElement("div", {

package/2x/es/global/css-vars-patch.css

@@ -0,0 +1,399 @@
+@supports not (color: var(--adm-color-text)) {
+  .adm-button {
+    color: #333333;
+    background-color: #ffffff;
+    font-size: 34px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #eeeeee;
+    border-radius: 8px;
+  }
+
+  .adm-button::before {
+    transform: translate(-2px, -2px);
+    border: 2px solid #000;
+    border-radius: 8px;
+  }
+
+  .adm-button-default.adm-button-fill-outline {
+    background-color: transparent;
+    border-color: #333333;
+  }
+
+  .adm-button-default.adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+
+  .adm-button:not(.adm-button-default) {
+    color: #ffffff;
+  }
+
+  .adm-button:not(.adm-button-default).adm-button-fill-outline {
+    background-color: transparent;
+  }
+
+  .adm-button:not(.adm-button-default).adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+
+  .adm-button-primary {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+
+  .adm-button-primary.adm-button-fill-outline,
+  .adm-button-primary.adm-button-fill-none {
+    color: #1677ff;
+  }
+
+  .adm-button-success {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+
+  .adm-button-success.adm-button-fill-outline,
+  .adm-button-success.adm-button-fill-none {
+    color: #00b578;
+  }
+
+  .adm-button-danger {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+
+  .adm-button-danger.adm-button-fill-outline,
+  .adm-button-danger.adm-button-fill-none {
+    color: #00b578;
+  }
+
+  .adm-button-warning {
+    background-color: #ff8f1f;
+    border-color: #ff8f1f;
+  }
+
+  .adm-button-warning.adm-button-fill-outline,
+  .adm-button-warning.adm-button-fill-none {
+    color: #ff8f1f;
+  }
+
+  .adm-button.adm-button-mini {
+    font-size: 26px;
+  }
+
+  .adm-button.adm-button-small {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 30px;
+  }
+
+  .adm-button.adm-button-large {
+    padding-top: 22px;
+    padding-bottom: 22px;
+    font-size: 36px;
+  }
+
+  .adm-button.adm-button-shape-rounded {
+    border-radius: 2000px;
+  }
+
+  .adm-button.adm-button-shape-rounded::before {
+    border-radius: 2000px;
+  }
+
+  .adm-button.adm-button-shape-rectangular {
+    border-radius: 0;
+  }
+
+  .adm-center-popup {
+    z-index: 1000;
+  }
+
+  .adm-center-popup-wrap {
+    min-width: 560px;
+    max-width: 75vw;
+  }
+
+  .adm-center-popup-body {
+    background-color: #ffffff;
+    border-radius: 16px;
+  }
+
+  .adm-error-block-image {
+    height: 200px;
+    width: auto;
+  }
+
+  .adm-error-block-description {
+    font-size: var(--adm-font-size-4);
+  }
+
+  .adm-error-block-description-title {
+    font-size: var(--adm-font-size-7);
+  }
+
+  .adm-error-block-full-page {
+    padding-top: calc(50vh - 400px);
+  }
+
+  .adm-error-block-full-page .adm-error-block-image {
+    height: 400px;
+    width: auto;
+  }
+
+  .adm-error-block-full-page .adm-error-block-description {
+    font-size: var(--adm-font-size-main);
+  }
+
+  .adm-error-block-full-page .adm-error-block-description-title {
+    color: #333333;
+  }
+
+  .adm-image {
+    width: auto;
+    height: auto;
+  }
+
+  .adm-image-tip {
+    background-color: #f5f5f5;
+  }
+
+  .adm-image-tip > svg {
+    color: #999999;
+  }
+
+  .adm-mask {
+    z-index: 1000;
+  }
+
+  .adm-modal-body {
+    font-size: 28px;
+  }
+
+  .adm-modal-title {
+    font-size: 36px;
+  }
+
+  .adm-modal-content {
+    font-size: 30px;
+    color: #333333;
+  }
+
+  .adm-modal-close {
+    color: #999999;
+    font-size: 36px;
+  }
+
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+    margin-bottom: 40px;
+  }
+
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .adm-modal-footer .adm-modal-button {
+    font-size: 36px;
+  }
+
+  .adm-page-indicator-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .adm-page-indicator-dot-active {
+    border-radius: 2px;
+    background: #1677ff;
+  }
+
+  .adm-page-indicator-color-white .adm-page-indicator-dot-active.adm-page-indicator-dot-active {
+    background: #ffffff;
+  }
+
+  .adm-page-indicator-horizontal .adm-page-indicator-dot {
+    margin-right: 6px;
+  }
+
+  .adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+    width: 26px;
+  }
+
+  .adm-page-indicator-vertical .adm-page-indicator-dot {
+    margin-bottom: 6px;
+  }
+
+  .adm-page-indicator-vertical .adm-page-indicator-dot-active {
+    height: 26px;
+  }
+
+  .adm-popover-menu.adm-popover .adm-popover-inner-content {
+    padding: 0 !important;
+  }
+
+  .adm-popover-menu-item-text {
+    border-top: solid 2px #eeeeee;
+  }
+
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #eeeeee;
+  }
+
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-bottom: solid 2px #eeeeee;
+  }
+
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+    border-color: #333333;
+  }
+
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #333333;
+  }
+
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-color: #333333;
+  }
+
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+  .adm-popover {
+    z-index: 1030;
+  }
+
+  .adm-popover.adm-popover-dark {
+    color: #ffffff;
+  }
+
+  .adm-popover.adm-popover-dark .adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+
+  .adm-popover-inner {
+    background-color: #ffffff;
+    font-size: 30px;
+  }
+
+  .adm-popover-inner-content {
+    padding: 16px 24px;
+  }
+
+  .adm-popover-arrow {
+    display: none !important;
+  }
+
+  .adm-scroll-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+
+  .adm-scroll-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+
+  .adm-space-vertical > .adm-space-item {
+    margin-bottom: 16px;
+  }
+
+  .adm-space-horizontal > .adm-space-item {
+    margin-right: 16px;
+  }
+
+  .adm-space-horizontal.adm-space-wrap {
+    flex-wrap: wrap;
+    margin-bottom: -16px;
+  }
+
+  .adm-space-horizontal.adm-space-wrap > .adm-space-item {
+    padding-bottom: 16px;
+  }
+
+  .adm-spin-loading {
+    width: 64px;
+    height: 64px;
+  }
+
+  .adm-spin-loading-svg {
+    width: 100%;
+    height: 100%;
+    animation: adm-spin-loading-rotate 0.8s infinite linear;
+  }
+
+  .adm-spin-loading-svg > .adm-spin-loading-fill {
+    stroke: #999999;
+  }
+
+  .adm-swiper {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0;
+  }
+
+  .adm-swiper-track {
+    padding: 0;
+  }
+
+  .adm-swiper-horizontal .adm-swiper-track {
+    transform: translateX(0%);
+  }
+
+  .adm-swiper-horizontal .adm-swiper-track-inner {
+    width: 100%;
+  }
+
+  .adm-swiper-vertical .adm-swiper-track {
+    transform: translateY(0%);
+  }
+
+  .adm-swiper-vertical .adm-swiper-track-inner {
+    height: 100%;
+  }
+
+  .adm-tabs-header {
+    border-bottom: solid 2px #eeeeee;
+  }
+
+  .adm-tabs-tab {
+    font-size: 34px;
+  }
+
+  .adm-tabs-tab-active {
+    color: #1677ff;
+  }
+
+  .adm-tabs-tab-line {
+    height: 4px;
+    background: #1677ff;
+    border-radius: 4px;
+  }
+
+  .adm-tabs-content {
+    padding: 24px;
+  }
+
+  .adm-tabs-header-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+
+  .adm-tabs-header-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+
+  .adm-toast-mask .adm-toast-main {
+    font-size: 30px;
+  }
+
+  .adm-toast-loading.adm-toast-loading {
+    width: 96px;
+    height: 96px;
+    margin: 0 auto 16px;
+  }
+
+  .adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+    stroke: #ffffff;
+  }
+}

package/2x/es/global/global.css

@@ -1,18 +1,49 @@
 :root {
+  --adm-radius-s: 8px;
+  --adm-radius-m: 16px;
+  --adm-radius-l: 24px;
+  --adm-font-size-1: 18px;
+  --adm-font-size-2: 20px;
+  --adm-font-size-3: 22px;
+  --adm-font-size-4: 24px;
+  --adm-font-size-5: 26px;
+  --adm-font-size-6: 28px;
+  --adm-font-size-7: 30px;
+  --adm-font-size-8: 32px;
+  --adm-font-size-9: 34px;
+  --adm-font-size-10: 36px;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
   --adm-color-white: #ffffff;
+  --adm-color-text: #333333;
+  --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
-  --adm-border-color: #eeeeee;
-  --adm-font-size-main: 26px;
-  --adm-color-text: #333333;
-  --adm-hd: 2;
+  --adm-color-border: #eeeeee;
+  --adm-color-box: #f5f5f5;
+  --adm-color-background: #ffffff;
+  --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-border-color: var(--adm-color-border);
+}
+
+html[data-prefers-color-scheme='dark'] {
+  --adm-color-primary: #3086ff;
+  --adm-color-success: #34b368;
+  --adm-color-warning: #ffa930;
+  --adm-color-danger: #ff4a58;
+  --adm-color-text: #e6e6e6;
+  --adm-color-text-secondary: #b3b3b3;
+  --adm-color-weak: #808080;
+  --adm-color-light: #4d4d4d;
+  --adm-color-border: #2b2b2b;
+  --adm-color-box: #0a0a0a;
+  --adm-color-background: #1a1a1a;
+  --adm-border-color: var(--adm-color-border);
 }
 
 :root {
@@ -59,6 +90,7 @@ div.adm-px-tester {
   position: fixed;
   right: -100vw;
   bottom: -100vh;
+  -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
 }

package/2x/es/global/index.js

@@ -5,4 +5,5 @@ if (canUseDom) {
   // Make sure the `:active` CSS selector of `button` and `a` take effect
   // See: https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
   document.addEventListener('touchstart', () => {}, true);
-}
+} // Only for debugging. Must COMMENT this line before commit:
+// import './css-vars-patch.less'