@arco-design/mobile-react 2.19.0

package/cjs/checkbox/type.d.ts

@@ -0,0 +1,162 @@
+import React from 'react';
+import { BaseRef, BaseProps } from '../_helpers/type';
+export declare type ValueType = string | number;
+/**
+ * 图标状态枚举
+ * @en Icon status enum
+ *  */
+export declare enum IconStatus {
+    /**
+     * 未选中
+     * @en unselected
+     */
+    NORMAL = "normal",
+    /**
+     * 禁用态
+     * @en disabled
+     */
+    DISABLED = "disabled",
+    /**
+     * 选中态
+     * @en active
+     */
+    ACTIVE = "active",
+    /**
+     * 禁用选中态
+     * @en active but disabled
+     */
+    ACTIVE_DISABLED = "activeDisabled"
+}
+export interface IconType {
+    /**
+     * 未选中
+     * @en unselected
+     */
+    normal?: React.ReactNode;
+    /**
+     * 选中态
+     * @en selected
+     */
+    active?: React.ReactNode;
+    /**
+     * 禁用态
+     * @en disabled
+     */
+    disabled?: React.ReactNode;
+    /**
+     * 禁用选中态
+     * @en active but disabled
+     */
+    activeDisabled?: React.ReactNode;
+}
+export interface CheckboxCommonProps extends BaseProps {
+    /**
+     * 图标的形状
+     * @en Icon shape
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * 排版样式(内联|块级|图标靠右两端对齐)
+     * @en Typography style (inline | block level | justified with right icon)
+     * @default 'inline'
+     */
+    layout?: 'inline' | 'block' | 'justify';
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义图标合集，传 null 表示无图标
+     * @en Custom icon collection, input null to indicate no icon
+     * @default Default icon
+     */
+    icons?: IconType | null;
+    /**
+     * 是否为Radio组件，不推荐使用，仅用于支持Radio组件
+     * @en Whether it is a Radio component. It is deprecated, only used to support Radio component
+     * @default false
+     */
+    isRadio?: boolean;
+}
+export interface CheckboxProps<T extends ValueType = ValueType> extends CheckboxCommonProps {
+    /**
+     * 选项的文字说明，传入children时此属性无效
+     * @en The text description of the option, invalid when the component has children
+     * @default ""
+     */
+    label?: string;
+    /**
+     * Checkbox的值
+     * @en Checkbox value
+     */
+    value: T;
+    /**
+     * 默认选中状态
+     * @en Default selected status
+     * @default false
+     */
+    defaultCheck?: boolean;
+    /**
+     * 是否选中，传值即为受控模式
+     * @en Whether it is selected or not, the component is in the controlled mode when the property is set
+     */
+    checked?: boolean;
+    /**
+     * 复选框选中状态回调函数
+     * @en Callback when the checkbox status changes
+     * @default () => {}
+     */
+    onChange?: (checked: boolean, value: T, e: React.MouseEvent) => void;
+}
+export interface CheckboxRef extends BaseRef {
+}
+export interface CheckboxGroupProps<T extends ValueType = ValueType, P extends CheckboxProps<T> = CheckboxProps<T>> extends CheckboxCommonProps {
+    /**
+     * 复选框组可选项, 传入children后此值无效
+     * @en Checkbox group options, invalid after inputing children
+     */
+    options?: P[];
+    /**
+     * 受控模式，复选框选中的选项值
+     * @en Checkbox value in controlled mode
+     */
+    value?: T[];
+    /**
+     * 默认选中项
+     * @en Default selected option
+     * @default []
+     */
+    defaultValue?: T[];
+    /**
+     * 最小可选值数量
+     * @en Minimum number of options
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大可选值数量，0表示没有限制
+     * @en Maximum number of options, 0 means no limit
+     * @default 0
+     */
+    max?: number;
+    /**
+     * 点击复选框值变化回调
+     * @en  Callback when the checkbox value changes
+     * @default () => {}
+     */
+    onChange?: (value: T[]) => void;
+}
+export interface CheckboxGroupRef extends BaseRef {
+}
+export interface GroupContextParams<T extends ValueType> {
+    isGroup: boolean;
+    shape: 'circle' | 'square';
+    layout: 'inline' | 'block' | 'justify';
+    disabled: boolean;
+    icons?: IconType | null;
+    value: T[];
+    onChange: (checked: boolean, value: T, e: React.MouseEvent) => void;
+}

package/cjs/checkbox/type.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.IconStatus = void 0;
+
+/**
+ * 图标状态枚举
+ * @en Icon status enum
+ *  */
+var IconStatus;
+exports.IconStatus = IconStatus;
+
+(function (IconStatus) {
+  IconStatus["NORMAL"] = "normal";
+  IconStatus["DISABLED"] = "disabled";
+  IconStatus["ACTIVE"] = "active";
+  IconStatus["ACTIVE_DISABLED"] = "activeDisabled";
+})(IconStatus || (exports.IconStatus = IconStatus = {}));

package/cjs/circle-progress/demo/style/css/mobile.css

@@ -0,0 +1,6 @@
+.circle-progress-demo-custom {
+  display: inline-block;
+}
+.circle-progress-demo-custom:nth-child(2) {
+  margin-left: 0.96rem;
+}

package/cjs/circle-progress/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin.less";
+
+.circle-progress-demo-custom {
+    display: inline-block;
+
+    &:nth-child(2) {
+        .rem(margin-left, 48);
+    }
+}

package/cjs/circle-progress/index.d.ts

@@ -0,0 +1,141 @@
+import React from 'react';
+export interface CircleProgressProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /** 文字显示位置
+     * @en Text display position
+     * @default "center"
+     */
+    percentPosition?: 'center' | 'bottom';
+    /**
+     * 是否显示圆环内部文字
+     * @en Whether to display the text inside the ring
+     * @default true
+     */
+    showPercent?: boolean;
+    /**
+     * 进度环百分比
+     * @en Progress ring Percentage
+     */
+    percentage: number;
+    /**
+     * 圆环内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）
+     * @en The text inside the ring (a function that returns the ReactNode type, and the callback parameter is the current progress percentage)
+     */
+    renderPercent?: (percentage: number) => React.ReactNode;
+    /**
+     * 轨道颜色
+     * @en Track color
+     */
+    trackColor?: string;
+    /**
+     * 进度环颜色
+     * @en progress ring color
+     */
+    progressColor?: string;
+    /**
+     * 是否置灰
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 轨道宽度
+     * @en Track width
+     * @default 10
+     */
+    trackStroke?: number;
+    /**
+     * 进度环宽度
+     * @en Progress ring width
+     * @default 12
+     */
+    progressStroke?: number;
+    /**
+     * 进度环渐变开始的颜色(当设置progressColorStart和progressColorEnd其中一个时，颜色会覆盖掉progressColor的颜色)
+     * @en The start gradient color of the progress ring (when one of progressColorStart and progressColorEnd is set, the color will override the color of progressColor)
+     */
+    progressColorStart?: string;
+    /**
+     * 进度环渐变结束的颜色
+     * @en The end gradient color of the progress ring
+     */
+    progressColorEnd?: string;
+    /**
+     * 每增加step步长所需的毫秒数
+     * @en The number of milliseconds required to increase the step size
+     * @default 30
+     */
+    duration?: number;
+    /**
+     * 步长（增加步长，以step增长）
+     * @en Step size (increase the step size, grow by step)
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 是否逆时针增加
+     * @en Whether to increase counterclockwise
+     * @default false
+     */
+    clockwise?: boolean;
+    /**
+     * 圆环半径
+     * @en Ring radius
+     */
+    radius?: number;
+    /**
+     * 进度条两端是否圆角
+     * @en Whether the ends of the progress bar are rounded
+     * @default true
+     */
+    filleted?: boolean;
+    /**
+     * 初始化percentage时是否以动画形式过渡到目的值
+     * @en Whether to animate the transition to the destination value when initializing percentage
+     * @default true
+     */
+    mountedTransition?: boolean;
+    /**
+     * 进度环尺寸
+     * @en Progress ring size
+     * @default "default"
+     */
+    size?: 'mini' | 'default';
+    /**
+     * 初始化时动画的贝塞尔曲线
+     * @en Bezier curve of animation at initialization
+     * @default [0.34, 0.69, 0.1, 1]
+     */
+    mountedBezier?: [number, number, number, number];
+    /**
+     * 区分不同svg的`<def>`内容
+     * @en Distinguish `<def>` content of different svg
+     */
+    svgKey?: string;
+}
+export interface CircleProgressRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 环形进度条组件，以圆环形式表示百分比进度
+ * @en Annular progress bar component, representing percentage progress in the form of a circle
+ * @type 反馈
+ * @type_en Feedback
+ * @name 环形进度条
+ * @name_en CircleProgress
+ */
+declare const CircleProgress: React.ForwardRefExoticComponent<CircleProgressProps & React.RefAttributes<CircleProgressRef>>;
+export default CircleProgress;

package/cjs/circle-progress/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _contextProvider = require("../context-provider");
+
+var _helpers = require("../_helpers");
+
+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; }
+
+/**
+ * 环形进度条组件，以圆环形式表示百分比进度
+ * @en Annular progress bar component, representing percentage progress in the form of a circle
+ * @type 反馈
+ * @type_en Feedback
+ * @name 环形进度条
+ * @name_en CircleProgress
+ */
+var CircleProgress = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size;
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$percentPositio = props.percentPosition,
+      percentPosition = _props$percentPositio === void 0 ? 'center' : _props$percentPositio,
+      _props$showPercent = props.showPercent,
+      showPercent = _props$showPercent === void 0 ? size !== 'mini' : _props$showPercent,
+      renderPercent = props.renderPercent,
+      trackColor = props.trackColor,
+      progressColor = props.progressColor,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$trackStroke = props.trackStroke,
+      trackStroke = _props$trackStroke === void 0 ? size === 'mini' ? 4 : 2 : _props$trackStroke,
+      _props$progressStroke = props.progressStroke,
+      progressStroke = _props$progressStroke === void 0 ? 4 : _props$progressStroke,
+      progressColorStart = props.progressColorStart,
+      progressColorEnd = props.progressColorEnd,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 300 : _props$duration,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$clockwise = props.clockwise,
+      clockwise = _props$clockwise === void 0 ? false : _props$clockwise,
+      _props$radius = props.radius,
+      radius = _props$radius === void 0 ? size === 'mini' ? 9 : 30 : _props$radius,
+      _props$filleted = props.filleted,
+      filleted = _props$filleted === void 0 ? size !== 'mini' : _props$filleted,
+      _props$mountedTransit = props.mountedTransition,
+      mountedTransition = _props$mountedTransit === void 0 ? true : _props$mountedTransit,
+      _props$mountedBezier = props.mountedBezier,
+      mountedBezier = _props$mountedBezier === void 0 ? [0.34, 0.69, 0.1, 1] : _props$mountedBezier,
+      _props$svgKey = props.svgKey,
+      userSetSvgKey = _props$svgKey === void 0 ? '' : _props$svgKey;
+  var domRef = (0, _react.useRef)(null);
+  var maxStroke = Math.max(progressStroke, trackStroke);
+  var circlePos = maxStroke + radius;
+  var circleSize = (radius + maxStroke) * 2;
+  var circleLen = 2 * Math.PI * radius;
+  var percentage = Math.min(100, Math.max(props.percentage, 0));
+
+  var _useGenSvgKey = (0, _helpers.useGenSvgKey)(userSetSvgKey),
+      svgKey = _useGenSvgKey.svgKey;
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  var isRenderNormal = !(Boolean(progressColorStart) && Boolean(progressColorEnd));
+
+  var _useProgress = (0, _helpers.useProgress)(mountedTransition, percentage, duration, mountedBezier, step),
+      currentPercentage = _useProgress[0],
+      transitionControl = _useProgress[1];
+
+  var color = (0, _react.useMemo)(function () {
+    if (isRenderNormal) {
+      if (progressColorStart) {
+        return progressColorStart;
+      } else if (progressColorEnd) {
+        return progressColorEnd;
+      } else {
+        return progressColor;
+      }
+    }
+  }, [progressColorStart, progressColorEnd, progressColor]);
+
+  function renderNormalProgress() {
+    return /*#__PURE__*/_react.default.createElement("circle", {
+      cx: circlePos,
+      cy: circlePos,
+      r: radius,
+      strokeWidth: progressStroke,
+      className: (0, _mobileUtils.cls)('color', {
+        disabled: disabled
+      }),
+      strokeDashoffset: circleLen - currentPercentage / 100 * circleLen || 0,
+      strokeDasharray: circleLen,
+      strokeLinecap: filleted ? 'round' : 'square',
+      style: (0, _helpers.getStyleWithVendor)({
+        transition: transitionControl ? "stroke-dashoffset " + duration / 1000 + "s linear" : '',
+        stroke: color
+      }),
+      fill: "none"
+    });
+  }
+
+  function renderLinearGradient() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+      id: svgKey + "-grad-circle-progress",
+      x1: "0%",
+      y1: "0%",
+      x2: "0%",
+      y2: "100%"
+    }, /*#__PURE__*/_react.default.createElement("stop", {
+      offset: "0%",
+      style: {
+        stopColor: progressColorEnd
+      },
+      className: "linear-gradient-end"
+    }), /*#__PURE__*/_react.default.createElement("stop", {
+      offset: "100%",
+      style: {
+        stopColor: progressColorStart
+      },
+      className: "linear-gradient-start"
+    }))), /*#__PURE__*/_react.default.createElement("circle", {
+      cx: circlePos,
+      cy: circlePos,
+      r: radius,
+      strokeDashoffset: circleLen - currentPercentage / 100 * circleLen || 0,
+      strokeDasharray: circleLen,
+      strokeWidth: progressStroke,
+      strokeLinecap: filleted ? 'round' : 'square',
+      style: (0, _helpers.getStyleWithVendor)({
+        transition: transitionControl ? "stroke-dashoffset " + duration / 1000 + "s linear" : ''
+      }),
+      className: (0, _mobileUtils.cls)({
+        disabled: disabled
+      }),
+      stroke: "url(#" + svgKey + "-grad-circle-progress)",
+      fill: "none"
+    }));
+  }
+
+  function renderProgress() {
+    return isRenderNormal ? renderNormalProgress() : renderLinearGradient();
+  }
+
+  function renderCircleProgress(_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
+      style: (0, _extends2.default)({
+        width: circleSize,
+        height: circleSize
+      }, style),
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      style: (0, _helpers.getStyleWithVendor)({
+        transform: "rotateY(" + (clockwise ? 180 : 0) + "deg) rotateZ(-90deg)"
+      }),
+      viewBox: "0 0 " + circleSize + " " + circleSize
+    }, /*#__PURE__*/_react.default.createElement("circle", {
+      cx: circlePos,
+      cy: circlePos,
+      r: radius,
+      style: {
+        stroke: trackColor
+      },
+      className: "" + (size === 'mini' ? 'mini' : 'track-color'),
+      strokeWidth: trackStroke,
+      fill: "none"
+    }), renderProgress()), showPercent ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-circle-progress-text", "" + (isRenderNormal ? 'color' : 'linear-gradient-text'), prefixCls + "-circle-progress-text-" + percentPosition, {
+        disabled: disabled
+      }),
+      style: {
+        color: color
+      }
+    }, renderPercent !== void 0 ? renderPercent(currentPercentage) : currentPercentage + "%") : null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderCircleProgress);
+});
+var _default = CircleProgress;
+exports.default = _default;

package/cjs/circle-progress/style/css/index.css

@@ -0,0 +1,42 @@
+.arco-circle-progress {
+  position: relative;
+}
+.arco-circle-progress-text {
+  position: absolute;
+  font-size:  0.28rem ;
+}
+.arco-circle-progress-text-center {
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.arco-circle-progress-text-bottom {
+  bottom: -0.4rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.arco-circle-progress .track-color {
+  stroke:  #F2F3F5 ;
+}
+.arco-circle-progress .color {
+  stroke:  #165dff ;
+  color:  #165dff ;
+}
+.arco-circle-progress .mini {
+  stroke:  #E8F3FF ;
+}
+.arco-circle-progress .disabled {
+  color:  #c9cdd4 ;
+  stroke:  #c9cdd4 ;
+}
+.arco-circle-progress .linear-gradient-start {
+  stop-color:  #4776E6 ;
+}
+.arco-circle-progress .linear-gradient-text {
+  color:  #3C89EC ;
+}
+.arco-circle-progress .linear-gradient-end {
+  stop-color:  #14CAFF ;
+}

package/cjs/circle-progress/style/css/index.d.ts

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

package/cjs/circle-progress/style/css/index.js

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

package/cjs/circle-progress/style/index.d.ts

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

package/cjs/circle-progress/style/index.js

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

package/cjs/circle-progress/style/index.less

@@ -0,0 +1,52 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-circle-progress {
+    position: relative;
+
+    &-text {
+        position: absolute;
+        .use-var(font-size, circle-progress-font-size);
+    }
+
+    &-text-center {
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &-text-bottom {
+        .rem(bottom, -20);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .track-color {
+        .use-var(stroke, circle-progress-track-color);
+    }
+
+    .color {
+        .use-var(stroke, circle-progress-primary-color);
+        .use-var(color, circle-progress-primary-color);
+    }
+
+    .mini {
+        .use-var(stroke, circle-progress-mini-track-color);
+    }
+
+    .disabled {
+        .use-var(color, circle-progress-disabled-color);
+        .use-var(stroke, circle-progress-disabled-color);
+    }
+
+    .linear-gradient-start {
+        .use-var(stop-color, circle-progress-linear-gradient-start-color);
+    }
+
+    .linear-gradient-text {
+        .use-var(color, circle-progress-linear-gradient-text-color);
+    }
+
+    .linear-gradient-end {
+        .use-var(stop-color, circle-progress-linear-gradient-end-color);
+    }
+}

package/cjs/collapse/collapse.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CollapseProps, CollapseRef } from './type';
+export declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<CollapseRef>>;