antd-mobile 5.12.7 → 5.14.0

package/2x/cjs/components/error-block/index.js

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "createErrorBlock", {
+  enumerable: true,
+  get: function () {
+    return _createErrorBlock.createErrorBlock;
+  }
+});
 exports.default = void 0;
 
 require("./error-block.css");
 
 var _errorBlock2 = require("./error-block");
 
+var _createErrorBlock = require("./create-error-block");
+
 var _default = _errorBlock2.ErrorBlock;
 exports.default = _default;

package/2x/cjs/components/form/form-item.css

@@ -8,7 +8,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 
 .adm-form-item-label .adm-form-item-required-asterisk {
@@ -79,6 +79,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

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

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-border-color);
-  --border-top: solid 2px var(--adm-border-color);
-  --border-bottom: solid 2px var(--adm-border-color);
+  --border-inner: solid 2px var(--adm-color-border);
+  --border-top: solid 2px var(--adm-color-border);
+  --border-bottom: solid 2px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);

package/2x/cjs/components/form/index.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-border-color);
-  --border-top: solid 2px var(--adm-border-color);
-  --border-bottom: solid 2px var(--adm-border-color);
+  --border-inner: solid 2px var(--adm-color-border);
+  --border-top: solid 2px var(--adm-color-border);
+  --border-bottom: solid 2px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -34,7 +34,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 
 .adm-form-item-label .adm-form-item-required-asterisk {
@@ -105,6 +105,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

package/2x/cjs/components/image/image.css

@@ -14,7 +14,7 @@
 
 .adm-image-tip {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 48px;
   min-width: 48px;

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

@@ -97,10 +97,12 @@ const Image = (0, _stagedComponents.staged)(p => {
 
   if (props.width) {
     style['--width'] = (0, _toCssLength.toCSSLength)(props.width);
+    style['width'] = (0, _toCssLength.toCSSLength)(props.width);
   }
 
   if (props.height) {
     style['--height'] = (0, _toCssLength.toCSSLength)(props.height);
+    style['height'] = (0, _toCssLength.toCSSLength)(props.height);
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

package/2x/cjs/components/image/image.patch.css

@@ -0,0 +1,12 @@
+.adm-image {
+  width: auto;
+  height: auto;
+}
+
+.adm-image-tip {
+  background-color: #f5f5f5;
+}
+
+.adm-image-tip > svg {
+  color: #999999;
+}

package/2x/cjs/components/image-uploader/image-uploader.css

@@ -28,7 +28,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 0 0 0 24px;
   font-size: 16px;
-  color: #fff;
+  color: var(--adm-color-white);
   cursor: pointer;
 }
 
@@ -44,7 +44,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: rgba(50, 50, 51, 0.88);
 }
 
@@ -61,7 +61,7 @@
 .adm-image-uploader-cell-mask-message {
   display: inline-block;
   padding: 12px 8px;
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
 }
 
 .adm-image-uploader-cell-image {
@@ -74,7 +74,7 @@
 }
 
 .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
   text-align: center;
   line-height: var(--cell-size);
   display: block;

package/2x/cjs/components/image-viewer/image-viewer.css

@@ -1,11 +1,17 @@
 .adm-image-viewer-content {
   width: 100vw;
   height: 100vh;
-  max-height: -webkit-fill-available;
   touch-action: none;
   user-select: none;
 }
 
+.adm-image-viewer-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  z-index: 1;
+}
+
 .adm-image-viewer-slides {
   height: 100%;
   position: relative;
@@ -62,5 +68,5 @@
   top: 24px;
   transform: translateX(-50%);
   color: #e6e6e6;
-  font-size: 28px;
+  font-size: var(--adm-font-size-6);
 }

package/2x/cjs/components/image-viewer/image-viewer.d.ts

@@ -8,16 +8,19 @@ export declare type ImageViewerProps = {
     visible?: boolean;
     onClose?: () => void;
     afterClose?: () => void;
+    renderFooter?: (image: string) => React.ReactNode;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;
-export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
+export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 'renderFooter'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
+    renderFooter?: (image: string, index: number) => React.ReactNode;
 };
-export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image"> & {
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<ImageViewerProps, "image" | "renderFooter"> & {
     images?: string[] | undefined;
     defaultIndex?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
+    renderFooter?: ((image: string, index: number) => React.ReactNode) | undefined;
 } & React.RefAttributes<SlidesRef>>;

package/2x/cjs/components/image-viewer/image-viewer.js

@@ -13,6 +13,8 @@ var _renderToContainer = require("../../utils/render-to-container");
 
 var _mask = _interopRequireDefault(require("../mask"));
 
+var _safeArea = _interopRequireDefault(require("../safe-area"));
+
 var _slide = require("./slide");
 
 var _slides = require("./slides");
@@ -31,6 +33,8 @@ const defaultProps = {
 };
 
 const ImageViewer = p => {
+  var _a;
+
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
   const node = _react.default.createElement(_mask.default, {
@@ -48,6 +52,10 @@ const ImageViewer = p => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.image && _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
@@ -58,17 +66,25 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
+  var _a;
+
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
-  const [defaultIndex, setDefaultIndex] = (0, _react.useState)(props.defaultIndex);
+  const [index, setIndex] = (0, _react.useState)(props.defaultIndex);
   const slidesRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     swipeTo: (index, immediate) => {
       var _a;
 
-      setDefaultIndex(index);
+      setIndex(index);
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
+  const onSlideChange = (0, _react.useCallback)(index => {
+    var _a;
+
+    setIndex(index);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+  }, [props.onIndexChange]);
 
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
@@ -79,8 +95,8 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
     ref: slidesRef,
-    defaultIndex: defaultIndex,
-    onIndexChange: props.onIndexChange,
+    defaultIndex: index,
+    onIndexChange: onSlideChange,
     images: props.images,
     onTap: () => {
       var _a;
@@ -88,6 +104,10 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     },
     maxZoom: props.maxZoom
+  })), props.images && _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);

package/2x/cjs/components/image-viewer/index.d.ts

@@ -4,10 +4,11 @@ import { showMultiImageViewer, showImageViewer, clearImageViewer } from './metho
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
 export type { ImageViewerShowHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image"> & {
+    Multi: import("react").ForwardRefExoticComponent<Omit<import("./image-viewer").ImageViewerProps, "image" | "renderFooter"> & {
         images?: string[] | undefined;
         defaultIndex?: number | undefined;
         onIndexChange?: ((index: number) => void) | undefined;
+        renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
     } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };

package/2x/cjs/components/index-bar/index-bar.css

@@ -24,8 +24,8 @@
   height: 70px;
   padding: 0 24px;
   color: var(--adm-color-weak);
-  font-size: 26px;
-  background-color: #f5f5f5;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-box);
 }
 
 .adm-index-bar-sidebar {
@@ -36,7 +36,7 @@
   z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   user-select: none;
   touch-action: none;
 }
@@ -78,7 +78,7 @@
 }
 
 .adm-index-bar-sidebar-item-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
   border-radius: 50%;
 }

package/2x/cjs/components/index-bar/index-bar.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarProps = {
     sticky?: boolean;
+    onIndexChange?: (index: string) => void;
     children?: React.ReactNode;
 } & NativeProps<'--sticky-offset-top'>;
 export declare type IndexBarRef = {
@@ -9,5 +10,6 @@ export declare type IndexBarRef = {
 };
 export declare const IndexBar: React.ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: React.ReactNode;
 } & NativeProps<"--sticky-offset-top"> & React.RefAttributes<IndexBarRef>>;

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

@@ -72,6 +72,8 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
   }));
 
   function scrollTo(index) {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const children = body.children;
@@ -84,6 +86,7 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
       if (panelIndex === index) {
         body.scrollTop = panel.offsetTop;
         setActiveIndex(index);
+        activeIndex !== index && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index));
         return;
       }
     }
@@ -92,6 +95,8 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
   const {
     run: checkActiveIndex
   } = (0, _ahooks.useThrottleFn)(() => {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const scrollTop = body.scrollTop;
@@ -105,6 +110,7 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
 
       if (panel.offsetTop + panel.clientHeight - titleHeight > scrollTop) {
         setActiveIndex(panelIndex);
+        activeIndex !== panelIndex && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, panelIndex));
         return;
       }
     }

package/2x/cjs/components/index-bar/index.d.ts

@@ -4,6 +4,7 @@ export type { IndexBarProps, IndexBarRef } from './index-bar';
 export type { IndexBarPanelProps } from './panel';
 declare const _default: import("react").ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: import("react").ReactNode;
 } & import("../../utils/native-props").NativeProps<"--sticky-offset-top"> & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
     Panel: import("react").FC<import("./panel").IndexBarPanelProps>;

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

@@ -4,5 +4,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
+}
+
+.adm-infinite-scroll-failed-text {
+  display: inline-block;
+  margin-right: 16px;
 }

package/2x/cjs/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type InfiniteScrollProps = {
-    loadMore: () => Promise<void>;
+    loadMore: (isRetry: boolean) => Promise<void>;
     hasMore: boolean;
     threshold?: number;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => React.ReactNode);
 } & NativeProps;
 export declare const InfiniteScroll: FC<InfiniteScrollProps>;

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

@@ -32,21 +32,26 @@ function isWindow(element) {
 }
 
 const classPrefix = `adm-infinite-scroll`;
-
-const InfiniteScrollContent = ({
-  hasMore
-}) => {
-  const {
-    locale
-  } = (0, _configProvider.useConfig)();
-  return _react.default.createElement(_react.default.Fragment, null, hasMore ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", null, locale.common.loading), _react.default.createElement(_dotLoading.default, null)) : _react.default.createElement("span", null, locale.InfiniteScroll.noMore));
+const defaultProps = {
+  threshold: 250,
+  children: (hasMore, failed, retry) => _react.default.createElement(InfiniteScrollContent, {
+    hasMore: hasMore,
+    failed: failed,
+    retry: retry
+  })
 };
 
 const InfiniteScroll = p => {
-  const props = (0, _withDefaultProps.mergeProps)({
-    threshold: 250
-  }, p);
-  const doLoadMore = (0, _ahooks.useLockFn)(() => props.loadMore());
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [failed, setFailed] = (0, _react.useState)(false);
+  const doLoadMore = (0, _ahooks.useLockFn)(isRetry => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+    try {
+      yield props.loadMore(isRetry);
+    } catch (e) {
+      setFailed(true);
+      throw e;
+    }
+  }));
   const elementRef = (0, _react.useRef)(null); // Prevent duplicated trigger of `check` function
 
   const [flag, setFlag] = (0, _react.useState)({});
@@ -68,7 +73,7 @@ const InfiniteScroll = p => {
     if (current >= elementTop - props.threshold) {
       const nextFlag = {};
       nextFlagRef.current = nextFlag;
-      yield doLoadMore();
+      yield doLoadMore(false);
       setFlag(nextFlag);
     }
   })); // 确保在内容不足时会自动触发加载事件
@@ -90,12 +95,38 @@ const InfiniteScroll = p => {
       scrollParent.removeEventListener('scroll', onScroll);
     };
   }, [scrollParent]);
+
+  function retry() {
+    setFailed(false);
+    doLoadMore(true);
+  }
+
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix,
     ref: elementRef
-  }, props.children && props.children, !props.children && _react.default.createElement(InfiniteScrollContent, {
-    hasMore: props.hasMore
-  })));
+  }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry) : props.children));
 };
 
-exports.InfiniteScroll = InfiniteScroll;
+exports.InfiniteScroll = InfiniteScroll;
+
+const InfiniteScrollContent = props => {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+
+  if (!props.hasMore) {
+    return _react.default.createElement("span", null, locale.InfiniteScroll.noMore);
+  }
+
+  if (props.failed) {
+    return _react.default.createElement("span", null, _react.default.createElement("span", {
+      className: `${classPrefix}-failed-text`
+    }, locale.InfiniteScroll.failedToLoad), _react.default.createElement("a", {
+      onClick: () => {
+        props.retry();
+      }
+    }, locale.InfiniteScroll.retry));
+  }
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", null, locale.common.loading), _react.default.createElement(_dotLoading.default, null));
+};

package/2x/cjs/components/input/input.css

@@ -1,5 +1,5 @@
 .adm-input {
-  --font-size: 34px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --text-align: left;
@@ -100,5 +100,5 @@
 
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }

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

@@ -21,6 +21,8 @@ var _ahooks = require("ahooks");
 
 var _bound = require("../../utils/bound");
 
+var _validate = require("../../utils/validate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,6 +38,7 @@ const Input = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const compositionStartRef = (0, _react.useRef)(false);
   const nativeInputRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
@@ -142,8 +145,18 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
     onKeyUp: props.onKeyUp,
-    onCompositionStart: props.onCompositionStart,
-    onCompositionEnd: props.onCompositionEnd,
+    onCompositionStart: e => {
+      var _a;
+
+      compositionStartRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onCompositionEnd: e => {
+      var _a;
+
+      compositionStartRef.current = false;
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
     onClick: props.onClick
   }), shouldShowClear && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
@@ -151,10 +164,15 @@ const Input = (0, _react.forwardRef)((p, ref) => {
       e.preventDefault();
     },
     onClick: () => {
-      var _a;
+      var _a, _b;
 
       setValue('');
-      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props); // https://github.com/ant-design/ant-design-mobile/issues/5212
+
+      if ((0, _validate.isIOS)() && compositionStartRef.current) {
+        compositionStartRef.current = false;
+        (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
     }
   }, _react.default.createElement(_antdMobileIcons.CloseCircleFill, null))));
 });

package/2x/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -6,7 +6,7 @@
 
 .adm-jumbo-tabs-header {
   position: relative;
-  border-bottom: solid 2px var(--adm-border-color);
+  border-bottom: solid 2px var(--adm-color-border);
 }
 
 .adm-jumbo-tabs-tab-list {
@@ -39,7 +39,7 @@
   margin: 0 auto;
   padding: 24px 0;
   cursor: pointer;
-  font-size: 34px;
+  font-size: var(--adm-font-size-9);
   white-space: nowrap;
 }
 
@@ -54,7 +54,7 @@
   border-radius: 20px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 
 .adm-jumbo-tabs-tab-active {
@@ -62,7 +62,7 @@
 }
 
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 
@@ -73,24 +73,4 @@
 
 .adm-jumbo-tabs-content {
   padding: 24px;
-}
-
-.adm-jumbo-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 60px;
-  height: 100%;
-  pointer-events: none;
-}
-
-.adm-jumbo-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-
-.adm-jumbo-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
 }