@arco-design/mobile-react 2.19.0

package/cjs/collapse/type.d.ts

@@ -0,0 +1,139 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface CollapseCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 可选受控，展开折叠面板时触发
+     * @en Optional controlled, triggered when the collapse panel is expanded
+     * */
+    onCollapse?: (value: string) => void;
+    /**
+     * 动画时间
+     * @en Animation duration
+     * */
+    animationTimeout?: number;
+    /**
+     * 动画函数
+     * @en Animation function
+     */
+    animationFunction?: string;
+}
+export interface CollapseProps extends CollapseCommonProps {
+    /**
+     * 标题
+     * @en Title
+     * */
+    header?: ReactNode;
+    /**
+     * 折叠面板的唯一标识
+     * @en Unique ID of the accordion panel
+     * */
+    value: string;
+    /**
+     * 折叠面板的展开图标
+     * @en Expand icon for collapse panels
+     * */
+    icon?: ReactNode;
+    /**
+     * 是否隐藏图标
+     * @en whether to hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * 是否不可展开
+     * @en Whether it is not expandable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 面板内容
+     * @en Panel content
+     * */
+    content: ReactNode;
+    /**
+     * 是否展开
+     * @en whether to expand
+     * */
+    active?: boolean;
+    /**
+     * 默认展开情况
+     * @en Default expanded status
+     * @default false
+     */
+    defaultActive?: boolean;
+}
+export interface CollapseRef {
+    /**
+     * 组件外层dom元素
+     * @en The outer DOM of the component
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 折叠面板头部元素
+     * @en Collapse panel header DOM
+     */
+    head: HTMLDivElement | null;
+    /**
+     * 手动更新组件布局(高度计算)
+     * @en Manually update component layout (height calculation)
+     * */
+    updateLayout: () => void;
+}
+export interface GroupContextParams {
+    isGroup: boolean;
+    value?: string[];
+    disabled?: boolean;
+    onCollapse: (value: string) => void;
+}
+export declare type CollapseItemContent = Omit<CollapseProps, 'active' | 'defaultActive'>;
+export declare type CollapseGroupProps<P extends CollapseItemContent = CollapseItemContent> = CollapseCommonProps & {
+    /**
+     * 是否使用手风琴模式
+     * @en Whether to use accordion mode
+     * @default false
+     */
+    useAccordion?: boolean;
+    /**
+     * 可选受控，可传展开的item数组，或者每个item对应的状态
+     * @en Optional controlled, expandable item array, or the state corresponding to each item
+     * */
+    activeItems?: string[];
+    /**
+     * 默认状态
+     * @en Default state
+     * */
+    defaultActiveItems?: string[];
+    /**
+     * 一键禁用
+     * @en Disable all
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 折叠面板数组
+     * @en array of collapse panels
+     * */
+    items?: P[];
+    /**
+     * 子元素，优先级高于items
+     * @en Children elements, which have higher priority than items
+     * */
+    children?: ReactNode;
+    /**
+     * 区分不同 group，有group 嵌套时建议传入
+     * @en Distinguish different groups, it is recommended to pass in when groups are nested
+     * */
+    groupKey?: string;
+};
+export interface CollapseGroupRef {
+    dom: HTMLDivElement | null;
+}

package/cjs/collapse/type.js

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

package/cjs/collapse/utils.d.ts

@@ -0,0 +1,8 @@
+import React, { Context } from 'react';
+import { GroupContextParams } from './type';
+export declare const defaultContextKey = "__COLLAPSE_CONTEXT__";
+export declare const allContexts: Record<string, Context<GroupContextParams>>;
+export declare function getCollapseContext(key: string): React.Context<GroupContextParams>;
+export declare const CollapseKeyContext: React.Context<{
+    key: string;
+}>;

package/cjs/collapse/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.defaultContextKey = exports.allContexts = exports.CollapseKeyContext = void 0;
+exports.getCollapseContext = getCollapseContext;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultContextKey = '__COLLAPSE_CONTEXT__';
+exports.defaultContextKey = defaultContextKey;
+var allContexts = {};
+exports.allContexts = allContexts;
+
+function getCollapseContext(key) {
+  if (!allContexts[key]) {
+    allContexts[key] = /*#__PURE__*/_react.default.createContext({
+      isGroup: false,
+      value: [],
+      onCollapse: function onCollapse() {}
+    });
+  }
+
+  return allContexts[key];
+}
+
+var CollapseKeyContext = /*#__PURE__*/_react.default.createContext({
+  key: defaultContextKey
+});
+
+exports.CollapseKeyContext = CollapseKeyContext;

package/cjs/context-provider/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-context-provider {
+  padding-bottom: 0.54rem;
+}
+#demo-context-provider .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}

package/cjs/context-provider/demo/style/mobile.less

@@ -0,0 +1,12 @@
+@import '../../../../style/mixin.less';
+
+#demo-context-provider {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}

package/cjs/context-provider/index.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ILocale } from '@arco-design/mobile-utils';
+export interface GlobalContextParams {
+    /**
+     * 组件类名前缀
+     * @en Component classname prefix
+     * @default "arco"
+     */
+    prefixCls?: string;
+    /**
+     * 手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用
+     * @en Manually control the current system, and the incoming value will be used directly after being passed in. It is applicable when the initial value of the system needs to be specified in the ssr scenario.
+     * @default ""
+     */
+    system?: 'pc' | 'android' | 'ios' | '';
+    /**
+     * 是否使用暗黑模式
+     * @en Whether to use dark mode
+     * @default false
+     */
+    useDarkMode?: boolean;
+    /**
+     * 是否处于暗黑模式，指定后以指定的值为准
+     * @en Whether it is in dark mode
+     * @default false
+     */
+    isDarkMode?: boolean;
+    /**
+     * 主题变量，传入后将在线替换css变量，需设置less变量 @use-css-vars: 1
+     * @en Theme variable. The css variable will be replaced online after input. The less variable needs to be set @use-css-vars: 1
+     */
+    theme?: Record<string, string>;
+    /**
+     * 国际化语言包配置
+     * @en Internationalized language configuration
+     */
+    locale?: ILocale;
+}
+export declare const defaultContext: GlobalContextParams;
+export declare const GlobalContext: React.Context<GlobalContextParams>;
+export interface ContextProviderProps extends GlobalContextParams {
+    children: React.ReactNode;
+}
+/**
+ * 全局数据控制组件，用于替换全局数据。
+ * @en Global data control component, used to replace global data.
+ * @type 其他
+ * @type_en Others
+ * @name 全局配置
+ * @name_en ContextProvider
+ */
+export default function ContextProvider(props: ContextProviderProps): JSX.Element;
+export declare const ContextLayout: React.Consumer<GlobalContextParams>;

package/cjs/context-provider/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.GlobalContext = exports.ContextLayout = void 0;
+exports.default = ContextProvider;
+exports.defaultContext = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"];
+
+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 defaultContext = {
+  prefixCls: 'arco',
+  system: '',
+  useDarkMode: false,
+  isDarkMode: false,
+  locale: _mobileUtils.defaultLocale
+};
+exports.defaultContext = defaultContext;
+var GlobalContext = /*#__PURE__*/(0, _react.createContext)(defaultContext);
+exports.GlobalContext = GlobalContext;
+
+/**
+ * 全局数据控制组件，用于替换全局数据。
+ * @en Global data control component, used to replace global data.
+ * @type 其他
+ * @type_en Others
+ * @name 全局配置
+ * @name_en ContextProvider
+ */
+function ContextProvider(props) {
+  var children = props.children,
+      useDarkMode = props.useDarkMode,
+      isDarkMode = props.isDarkMode,
+      theme = props.theme,
+      _props$locale = props.locale,
+      locale = _props$locale === void 0 ? _mobileUtils.defaultLocale : _props$locale,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(),
+      isDarkModeState = _useState[0],
+      setIsDarkModeState = _useState[1];
+
+  var changeDarkMode = (0, _react.useCallback)(function (res) {
+    return setIsDarkModeState(res.matches);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+
+    if (useDarkMode) {
+      var dark = matchMedia.matches;
+      setIsDarkModeState(dark);
+
+      if (typeof matchMedia.addEventListener === 'function') {
+        matchMedia.addEventListener('change', changeDarkMode);
+      } else if (typeof matchMedia.addListener === 'function') {
+        matchMedia.addListener(changeDarkMode);
+      }
+    }
+
+    return function () {
+      if (useDarkMode) {
+        if (typeof matchMedia.removeEventListener === 'function') {
+          matchMedia.removeEventListener('change', changeDarkMode);
+        } else if (typeof matchMedia.removeListener === 'function') {
+          matchMedia.removeListener(changeDarkMode);
+        }
+      }
+    };
+  }, [useDarkMode]);
+  (0, _react.useEffect)(function () {
+    if (!theme) {
+      return;
+    }
+
+    (0, _mobileUtils.addCssRules)('arcoCustomTheme', theme);
+    return function () {
+      (0, _mobileUtils.removeCssStyleDom)('arcoCustomTheme');
+    };
+  }, [theme]);
+  return /*#__PURE__*/_react.default.createElement(GlobalContext.Provider, {
+    value: (0, _extends2.default)({}, defaultContext, restProps, {
+      isDarkMode: isDarkMode === void 0 ? isDarkModeState : isDarkMode,
+      useDarkMode: useDarkMode,
+      locale: locale || _mobileUtils.defaultLocale
+    })
+  }, children);
+}
+
+var ContextLayout = GlobalContext.Consumer;
+exports.ContextLayout = ContextLayout;

package/cjs/context-provider/style/css/index.d.ts

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

package/cjs/context-provider/style/css/index.js

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

package/cjs/context-provider/style/index.d.ts

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

package/cjs/context-provider/style/index.js

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

package/cjs/context-provider/style/index.less

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

package/cjs/count-down/demo/style/css/mobile.css

@@ -0,0 +1,59 @@
+.count-down-demo-define-style .colon {
+  display: inline-block;
+  margin: 0 0.12rem;
+  color: #165dff;
+}
+.count-down-demo-define-style .block {
+  width: 0.5rem;
+  font-size: 0.28rem;
+  line-height: 0.48rem;
+  font-weight: 500;
+  color: #165dff;
+  background: #e8f3ff;
+  border-radius: 2PX;
+  display: inline-block;
+  text-align: center;
+}
+.count-down-demo-control {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+.count-down-demo-control .count-down {
+  -webkit-flex-basis: 300px;
+          flex-basis: 300px;
+}
+.count-down-demo-control .btn-wrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.count-down-demo-control .btn-wrap .arco-button.type-primary {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  padding: 0.08rem 0.32rem;
+  width: auto;
+  height: auto;
+  border: 0.5px solid;
+  border-color:  #165dff ;
+  background-color: transparent;
+  border-radius: 0.4rem;
+}
+.count-down-demo-control .btn-wrap .arco-button.type-primary .btn-text {
+  font-size: 0.28rem;
+  color:  #165dff ;
+}
+.count-down-demo-control .btn-wrap .arco-button.type-primary:last-child {
+  margin-left: 0.2rem;
+}

package/cjs/count-down/demo/style/mobile.less

@@ -0,0 +1,57 @@
+@import "../../../../style/mixin.less";
+
+.count-down-demo-define-style {
+
+    .colon {
+        display: inline-block;
+        .rem(margin, 0, 6);
+        color: #165dff;
+    }
+
+    .block {
+        .rem(width, 25);
+        .rem(font-size, 14);
+        .rem(line-height, 24);
+        font-weight: 500;
+        color: #165dff;
+        background: #e8f3ff;
+        border-radius: 2PX;
+        display: inline-block;
+        text-align: center;
+    }
+}
+
+.count-down-demo-control {
+    display: flex;
+    justify-content: space-between;
+
+    .count-down {
+        flex-basis: 300px;
+    }
+
+    .btn-wrap {
+        display: flex;
+
+        .arco-button.type-primary {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .rem(padding, 4, 16);
+            width: auto;
+            height: auto;
+            border: .5px solid;
+            .use-var(border-color, primary-color);
+            background-color: transparent;
+            .rem(border-radius, 20);
+
+            .btn-text {
+                .rem(font-size, 14);
+                .use-var(color, primary-color);
+            }
+
+            &:last-child {
+                .rem(margin-left, 10);
+            }
+        }
+    }
+}

package/cjs/count-down/hooks.d.ts

@@ -0,0 +1,10 @@
+import { CountDownProps, TimeDataType } from './type';
+export declare type UseCountDownOptions = {
+    time: number;
+} & Pick<CountDownProps, 'millisecond' | 'autoStart' | 'onChange' | 'onFinish'>;
+export declare const useCountDown: (options: UseCountDownOptions) => {
+    start: (reStart?: boolean) => void;
+    pause: () => void;
+    reset: () => void;
+    current: TimeDataType;
+};

package/cjs/count-down/hooks.js

@@ -0,0 +1,142 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCountDown = void 0;
+
+var _react = require("react");
+
+var _helpers = require("../_helpers");
+
+var _singleton = require("./singleton");
+
+var _util = require("./util");
+
+var useCountDown = function useCountDown(options) {
+  var taskIdRef = (0, _react.useRef)(0);
+  var endTimeRef = (0, _react.useRef)();
+  var countingRef = (0, _react.useRef)();
+
+  var _useRefState = (0, _helpers.useRefState)(options.time),
+      remain = _useRefState[0],
+      remainRef = _useRefState[1],
+      setRemain = _useRefState[2];
+
+  var _useState = (0, _react.useState)((0, _util.parseTime)(options.time)),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  var taskType = options.millisecond ? 'micro' : 'macro'; // 暂停
+  // @en Pause
+
+  var pause = function pause() {
+    countingRef.current = false;
+    (0, _singleton.stopTask)(taskType, taskIdRef.current);
+  }; // 计算当前剩余时间，以毫秒为单位
+  // @en Calculate the current remaining time in milliseconds
+
+
+  var getCurrentRemain = function getCurrentRemain() {
+    var leftTime = Math.max(endTimeRef.current - Date.now(), 0);
+
+    if (options.millisecond) {
+      return leftTime;
+    }
+
+    return Math.round(leftTime / 1000) * 1000;
+  };
+
+  var setRemainCallback = function setRemainCallback(value) {
+    setRemain(value);
+    var time = (0, _util.parseTime)(value);
+
+    if (options.onChange && value !== options.time) {
+      options.onChange(time, value);
+    }
+
+    if (value === 0) {
+      setCurrent(time);
+      pause();
+      options.onFinish == null ? void 0 : options.onFinish();
+    }
+  }; // 开启任务
+  // @en start tasks
+
+
+  var tick = function tick() {
+    taskIdRef.current = (0, _singleton.startTask)(taskType, function () {
+      if (countingRef.current) {
+        setRemainCallback(getCurrentRemain());
+        return remainRef.current > 0;
+      }
+
+      return false;
+    });
+  }; // 开始
+  // @en Start
+
+
+  var start = function start(reStart) {
+    if (reStart === void 0) {
+      reStart = false;
+    }
+
+    if (!countingRef.current) {
+      if (reStart) {
+        endTimeRef.current = Date.now() + options.time;
+      } else {
+        endTimeRef.current = Date.now() + remainRef.current;
+      }
+
+      countingRef.current = true;
+      tick();
+    }
+  }; // 重置
+  // @en Reset
+
+
+  var reset = function reset() {
+    var totalTime = options.time;
+    endTimeRef.current = Date.now() + totalTime;
+    pause();
+    setRemainCallback(totalTime);
+
+    if (options.autoStart) {
+      start(true);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    // ummounted时如果正在运行倒计时则暂停
+    // @en Pause if the countdown is running when ummounted
+    return function () {
+      if (countingRef.current) {
+        pause();
+      }
+    };
+  }, []); // 设置自动开始倒计时时自动启动
+  // @en Set to start automatically when the countdown starts automatically
+
+  (0, _react.useEffect)(function () {
+    if (options.autoStart) {
+      start();
+    }
+  }, [options.autoStart]); // 倒计时设置变化时重新计时
+  // @en Re-time when countdown settings change
+
+  (0, _react.useEffect)(function () {
+    reset();
+  }, [options.time]); // remain变化时同步current 即把毫秒转化为TimeDataType类型
+  // @en Synchronize current when remain changes, that is, convert milliseconds to TimeDataType
+
+  (0, _react.useEffect)(function () {
+    setCurrent((0, _util.parseTime)(remain));
+  }, [remain]);
+  return {
+    start: start,
+    pause: pause,
+    reset: reset,
+    current: current
+  };
+};
+
+exports.useCountDown = useCountDown;

package/cjs/count-down/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CountDownProps, CountDownRef } from './type';
+export * from './type';
+/**
+ * 倒计时组件
+ * @en Countdown Component
+ * @name 倒计时
+ * @name_en CountDown
+ * @type 数据展示
+ * @type_en Data Display
+ */
+declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownRef>>;
+export default CountDown;