@arco-design/mobile-react 2.19.0

package/cjs/notify/index.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { NotifyProps, NotifyRef } from './type';
+import { NotifyBaseProps } from './methods';
+export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.FC<P>): {
+    /**
+     * 展示常规通知
+     * @desc {en} Show regular notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示成功通知
+     * @desc {en} Show success notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示错误的通知
+     * @desc {en} Show error notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示警告的通知
+     * @desc {en} Show warning notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefAttributes<NotifyRef>> & {
+    /**
+     * 展示常规通知
+     * @desc {en} Show regular notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => {
+        update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示成功通知
+     * @desc {en} Show success notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => {
+        update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示错误的通知
+     * @desc {en} Show error notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => {
+        update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示警告的通知
+     * @desc {en} Show warning notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => {
+        update: (newConfig: Pick<NotifyProps & React.RefAttributes<NotifyRef>, "style" | "content" | "transitionDuration" | "ref" | "key" | "getContainer" | "type" | "className" | "duration" | "onClose">) => void;
+        close: () => void;
+    };
+};
+/**
+ * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+ * @en The feedback information bar displayed after active operation can be called by method or by component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 消息通知
+ * @name_en Notify
+ */
+export default _default;

package/cjs/notify/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.methodsGenerator = methodsGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _helpers = require("../_helpers");
+
+var _methods = require("./methods");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Notify = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+      content = props.content,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 3000 : _props$duration,
+      onClose = props.onClose,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'info' : _props$type,
+      close = props.close,
+      getContainer = props.getContainer;
+  var domRef = (0, _react.useRef)(null);
+  var innerRef = (0, _react.useRef)(null);
+  var closeTimerRef = (0, _react.useRef)();
+  var onCloseTimeRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(!visible),
+      hasTrans = _useState[0],
+      setHasTrans = _useState[1];
+
+  var _useState2 = (0, _react.useState)(0),
+      innerHeight = _useState2[0],
+      setInnerHeight = _useState2[1];
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      updateLayout: updateLayout
+    };
+  });
+
+  function startCloseTimer() {
+    if (duration) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = window.setTimeout(function () {
+        close == null ? void 0 : close();
+      }, duration);
+    }
+  }
+
+  function updateLayout() {
+    if (innerRef.current) {
+      var _innerRef$current$get = innerRef.current.getBoundingClientRect(),
+          height = _innerRef$current$get.height;
+
+      setInnerHeight(height);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    visible && updateLayout();
+    visible && startCloseTimer();
+    return function () {
+      visible && clearTimeout(closeTimerRef.current);
+    };
+  }, [visible, duration]);
+  (0, _helpers.useUpdateEffect)(function () {
+    if (!visible) {
+      onCloseTimeRef.current = window.setTimeout(function () {
+        onClose && onClose();
+      }, transitionDuration);
+    }
+  }, [visible]);
+  (0, _react.useEffect)(function () {
+    (0, _mobileUtils.nextTick)(function () {
+      setHasTrans(true);
+    });
+    return function () {
+      clearTimeout(onCloseTimeRef.current);
+    };
+  }, []);
+
+  function renderComponent(prefixClass) {
+    return content ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixClass + "-content " + (visible ? prefixClass + "-content-transition-Y0" : prefixClass + "-content-transition-Y100"),
+      ref: innerRef,
+      style: (0, _extends2.default)({}, hasTrans ? (0, _helpers.getStyleWithVendor)({
+        transitionDuration: transitionDuration + "ms"
+      }) : {})
+    }, content) : null;
+  }
+
+  var render = function render(prefixCls) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-notify " + prefixCls + "-notify-" + type + " " + className,
+      style: (0, _extends2.default)({}, style, hasTrans ? (0, _helpers.getStyleWithVendor)({
+        transitionDuration: transitionDuration + "ms"
+      }) : {}, {
+        height: visible ? innerHeight : 0
+      }),
+      ref: domRef
+    }, renderComponent(prefixCls + "-notify"));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return getContainer ? /*#__PURE__*/_reactDom.default.createPortal(render(prefixCls), getContainer()) : render(prefixCls);
+  });
+});
+
+function methodsGenerator(Comp) {
+  return {
+    /**
+     * 展示常规通知
+     * @desc {en} Show regular notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    info: (0, _methods.notify)(Comp),
+
+    /**
+     * 展示成功通知
+     * @desc {en} Show success notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    success: (0, _methods.notify)(Comp, 'success'),
+
+    /**
+     * 展示错误的通知
+     * @desc {en} Show error notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    error: (0, _methods.notify)(Comp, 'error'),
+
+    /**
+     * 展示警告的通知
+     * @desc {en} Show warning notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    warn: (0, _methods.notify)(Comp, 'warn')
+  };
+}
+/**
+ * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+ * @en The feedback information bar displayed after active operation can be called by method or by component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 消息通知
+ * @name_en Notify
+ */
+
+
+var _default = (0, _mobileUtils.componentWrapper)(Notify, methodsGenerator(Notify));
+
+exports.default = _default;

package/cjs/notify/methods.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface NotifyBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    visible?: boolean;
+    close?: (e: any) => void;
+    type?: string;
+}
+export declare function notify<P extends NotifyBaseProps>(Component: React.FC<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+    close: () => void;
+};

package/cjs/notify/methods.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.notify = notify;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+function notify(Component, type) {
+  return function (originConfig) {
+    var config = typeof originConfig === 'string' ? {
+      content: originConfig,
+      type: 'info'
+    } : originConfig;
+
+    if (type !== void 0) {
+      config.type = type;
+    }
+
+    var div = document.createElement('div');
+    var getContainer = config.getContainer;
+
+    if (getContainer) {
+      getContainer().appendChild(div);
+    } else {
+      document.body.appendChild(div);
+    }
+
+    function render(props) {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
+    }
+
+    function destroy() {
+      var onClose = config.onClose;
+      onClose && onClose();
+
+      var unmountResult = _reactDom.default.unmountComponentAtNode(div);
+
+      if (unmountResult && div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+    }
+
+    var dynamicProps = (0, _extends2.default)({}, config, {
+      close: close,
+      onClose: destroy,
+      getContainer: function getContainer() {
+        return div;
+      },
+      visible: false
+    });
+    var leaving = false;
+
+    function update(newConfig) {
+      dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig);
+      render(dynamicProps);
+    }
+
+    function close() {
+      leaving = true;
+      dynamicProps.visible = false;
+      render(dynamicProps);
+    }
+
+    render(dynamicProps);
+    (0, _mobileUtils.nextTick)(function () {
+      if (leaving) return;
+      dynamicProps.visible = true;
+      render(dynamicProps);
+    });
+    return {
+      update: update,
+      close: close
+    };
+  };
+}

package/cjs/notify/style/css/index.css

@@ -0,0 +1,50 @@
+.arco-notify {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  -webkit-transition-property: height;
+  transition-property: height;
+  color:  #ffffff ;
+  font-size:  0.28rem ;
+}
+.arco-notify-content {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  min-height:  0.72rem ;
+}
+.arco-notify-info {
+  background: transparent;
+  color:  #165dff ;
+}
+.arco-notify-success {
+  background:  #00B42A ;
+}
+.arco-notify-error {
+  background:  #F53F3F ;
+}
+.arco-notify-warn {
+  background:  #FF7D00 ;
+}
+.arco-notify-content-transition-Y0 {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+}
+.arco-notify-content-transition-Y100 {
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
+}

package/cjs/notify/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/notify/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/notify/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/notify/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/notify/style/index.less

@@ -0,0 +1,40 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-notify {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    transition-property: height;
+    .use-var(color, notify-font-color);
+    .use-var(font-size, notify-font-size);
+    &-content {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        transition-property: transform;
+        .use-var(min-height, notify-min-height);
+    }
+    &-info {
+        background: transparent;
+        .use-var(color, notify-info-font-color);
+    }
+    &-success {
+        .use-var(background, notify-success-background);
+    }
+    &-error {
+        .use-var(background, notify-error-background);
+    }
+    &-warn {
+        .use-var(background, notify-warn-background);
+    }
+    &-content-transition-Y0 {
+        transform: translateY(0);
+    }
+    &-content-transition-Y100 {
+        transform: translateY(-100%);
+    }
+}

package/cjs/notify/type.d.ts

@@ -0,0 +1,69 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type NotifyType = 'success' | 'info' | 'warn' | 'error';
+export interface NotifyProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * 需要展示的内容
+     * @en Notification content
+     */
+    content?: ReactNode;
+    /**
+     * 通知类型
+     * @en Notification type
+     */
+    type?: NotifyType;
+    /**
+     * 是否显示通知
+     * @en Whether to show notification
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 控制通知关闭的事件
+     * @en Close function
+     */
+    close?: () => void;
+    /**
+     * 通知关闭时的回调函数
+     * @en Callback after closing
+     */
+    onClose?: () => void;
+    /**
+     * 将通知放入某个模块
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * 动画的执行时间 (单位ms)
+     * @en Animation execution time (unit: ms)
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 通知自动关闭时延 (单位ms) 设置为0时不会自动关闭
+     * @en The delay of notification automatic closing (unit: ms). Will not automatically close when it is set to 0
+     * @default 3000
+     */
+    duration?: number;
+}
+export interface NotifyRef {
+    /**
+     * 最外层dom元素
+     * @en The outermost element DOM
+     */
+    dom: HTMLElement | null;
+    /**
+     * 更新元素布局
+     * @en Update DOM layout
+     */
+    updateLayout: () => void;
+}

package/cjs/notify/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/pagination/arrow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Arrow(): JSX.Element;

package/cjs/pagination/arrow.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = Arrow;
+
+var _react = _interopRequireDefault(require("react"));
+
+function Arrow() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "8",
+    height: "14",
+    viewBox: "0 0 8 14",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.40514 12.7583C7.6004 12.563 7.6004 12.2465 7.40514 12.0512L2.40095 7.04701L7.36396 2.084C7.55922 1.88874 7.55922 1.57216 7.36396 1.37689L7.01041 1.02334C6.81515 0.828077 6.49856 0.828077 6.3033 1.02334L0.646447 6.68019C0.470402 6.85624 0.453075 7.1309 0.594469 7.32636C0.617837 7.37275 0.64889 7.41626 0.687628 7.455L6.34448 13.1119C6.53974 13.3071 6.85633 13.3071 7.05159 13.1119L7.40514 12.7583Z",
+    fill: "currentColor"
+  }));
+}

package/cjs/pagination/demo/style/css/index.css

@@ -0,0 +1,6 @@
+#demo-pagination .demo-btn {
+  font-size: 16px;
+}
+#demo-pagination .arcodesign-mobile-demo-content {
+  padding: 0;
+}

package/cjs/pagination/demo/style/index.less

@@ -0,0 +1,10 @@
+@import '../../../../style/mixin.less';
+
+#demo-pagination {
+    .demo-btn {
+        font-size: 16px;
+    }
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+}