@arco-design/mobile-react 2.19.0

package/esm/checkbox/group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GroupContextParams, CheckboxGroupProps, CheckboxGroupRef, ValueType, CheckboxProps, CheckboxRef } from './type';
+export declare const CheckboxGroupContext: React.Context<GroupContextParams<string | number>>;
+export declare function componentGenerator<T extends ValueType = ValueType, P extends CheckboxProps<T> = CheckboxProps<T>, R extends CheckboxRef = CheckboxRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<CheckboxGroupProps<T, P> & React.RefAttributes<CheckboxGroupRef>>;

package/esm/checkbox/group.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+export var CheckboxGroupContext = /*#__PURE__*/React.createContext({
+  isGroup: false,
+  shape: 'circle',
+  layout: 'inline',
+  disabled: false,
+  value: [],
+  onChange: function onChange() {}
+});
+export function componentGenerator(Comp) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$defaultValue = props.defaultValue,
+        defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$shape = props.shape,
+        shape = _props$shape === void 0 ? 'circle' : _props$shape,
+        options = props.options,
+        icons = props.icons,
+        onChange = props.onChange,
+        value = props.value,
+        _props$children = props.children,
+        children = _props$children === void 0 ? null : _props$children,
+        _props$layout = props.layout,
+        layout = _props$layout === void 0 ? 'inline' : _props$layout,
+        _props$min = props.min,
+        min = _props$min === void 0 ? 0 : _props$min,
+        _props$max = props.max,
+        max = _props$max === void 0 ? 0 : _props$max;
+
+    var _useState = useState(value || defaultValue),
+        groupValue = _useState[0],
+        setGroupValue = _useState[1];
+
+    var domRef = useRef(null);
+    useImperativeHandle(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+    useEffect(function () {
+      value !== void 0 && setGroupValue(value);
+    }, [value]);
+    /**
+     * 切换checkbox状态回调
+     * @en callback when toggling checkbox state
+     */
+
+    var handleChange = function handleChange(checked, val) {
+      if (!checked && groupValue.length <= min || max && checked && groupValue.length >= max) return;
+      var newGroupValue = checked ? [].concat(groupValue, [val]) : groupValue.filter(function (item) {
+        return item !== val;
+      });
+      onChange && onChange(newGroupValue);
+
+      if (value === void 0) {
+        setGroupValue(newGroupValue);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: domRef,
+        style: style,
+        className: cls(className, prefixCls + "-checkbox-group")
+      }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+        value: {
+          isGroup: true,
+          shape: shape,
+          layout: layout,
+          disabled: disabled,
+          icons: icons,
+          value: groupValue,
+          onChange: handleChange
+        }
+      }, children, !children && options && options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Comp, _extends({
+          key: option.value
+        }, option));
+      })));
+    });
+  });
+}

package/esm/checkbox/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useMergeProps';

package/esm/checkbox/hooks/index.js

@@ -0,0 +1 @@
+export * from './useMergeProps';

package/esm/checkbox/hooks/useMergeProps.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps, GroupContextParams, ValueType } from '../type';
+export declare const useMergeProps: <T extends string | number = string | number, P extends CheckboxProps<T> = CheckboxProps<T>>(props: P, groupContext: React.Context<GroupContextParams<ValueType>>) => P;

package/esm/checkbox/hooks/useMergeProps.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { useContext } from 'react';
+export var useMergeProps = function useMergeProps(props, groupContext) {
+  var _useContext = useContext(groupContext),
+      disabled = _useContext.disabled,
+      shape = _useContext.shape,
+      layout = _useContext.layout,
+      icons = _useContext.icons,
+      value = _useContext.value,
+      _onChange = _useContext.onChange,
+      isGroup = _useContext.isGroup;
+
+  if (!isGroup) return props;
+  return _extends({
+    disabled: disabled,
+    shape: shape,
+    layout: layout,
+    icons: icons
+  }, props, {
+    // 在Group内checkbox的选中状态由GroupValue决定
+    // The checked state of the checkbox in the Group is determined by the GroupValue
+    checked: value.indexOf(props.value) > -1,
+    onChange: function onChange(checked, val, e) {
+      _onChange(checked, val, e);
+
+      props.onChange && props.onChange(checked, val, e);
+    }
+  });
+};

package/esm/checkbox/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").CheckboxGroupProps<string | number, import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & import("react").RefAttributes<import("./type").CheckboxGroupRef>>;
+};
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据输入
+ * @type_en Data Entry
+ */
+export default _default;

package/esm/checkbox/index.js

@@ -0,0 +1,22 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './group';
+import { Checkbox } from './checkbox';
+export * from './type';
+/**
+ * 复选项组
+ * @en Checkbox group
+ *  */
+
+var Group = componentGenerator(Checkbox);
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据输入
+ * @type_en Data Entry
+ */
+
+export default componentWrapper(Checkbox, {
+  Group: Group
+});

package/esm/checkbox/style/css/index.css

@@ -0,0 +1,53 @@
+.arco-checkbox {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-checkbox .checkbox-icon {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  font-size:  20PX ;
+  color:  #c2c6cc ;
+}
+.arco-checkbox .checkbox-icon.checked {
+  color:  #165dff ;
+}
+.arco-checkbox .checkbox-icon.disabled {
+  color:  #f7f8fa ;
+}
+.arco-checkbox .checkbox-icon.checked.disabled {
+  color:  rgba(51, 112, 255, 0.5) ;
+}
+.arco-checkbox .checkbox-text {
+  font-size:  0.32rem ;
+  color:  #1d2129 ;
+}
+.arco-checkbox .checkbox-icon + .checkbox-text {
+  margin-left:  0.16rem ;
+}
+.arco-checkbox.disabled .checkbox-text {
+  opacity:  0.5 ;
+}
+.arco-checkbox.block {
+  width: 100%;
+}
+.arco-checkbox.justify {
+  width: 100%;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+.arco-checkbox-group .arco-checkbox:not(:last-child) {
+  margin-right:  0.48rem ;
+}
+.arco-checkbox-group .arco-checkbox:not(:last-child).block,
+.arco-checkbox-group .arco-checkbox:not(:last-child).justify {
+  margin-right: 0;
+}

package/esm/checkbox/style/css/index.d.ts

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

package/esm/checkbox/style/css/index.js

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

package/esm/checkbox/style/index.d.ts

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

package/esm/checkbox/style/index.js

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

package/esm/checkbox/style/index.less

@@ -0,0 +1,58 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-checkbox {
+    display: inline-flex;
+    align-items: center;
+
+    .checkbox-icon {
+        display: inline-flex;
+        align-items: center;
+        .use-var(font-size, checkbox-icon-font-size);
+        .use-var(color, checkbox-icon-color);
+
+        &.checked {
+            .use-var(color, checkbox-icon-checked-color);
+        }
+
+        &.disabled {
+            .use-var(color, checkbox-icon-disabled-color);
+        }
+
+        &.checked.disabled {
+            .use-var(color, checkbox-icon-checked-disabled-color);
+        }
+    }
+
+    .checkbox-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .checkbox-icon + .checkbox-text {
+        .use-var(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .checkbox-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-checkbox-group {
+    .@{prefix}-checkbox:not(:last-child) {
+        .use-var(margin-right, checkbox-group-gutter);
+
+        &.block,
+        &.justify {
+            margin-right: 0;
+        }
+    }
+}

package/esm/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/esm/checkbox/type.js

@@ -0,0 +1,12 @@
+/**
+ * 图标状态枚举
+ * @en Icon status enum
+ *  */
+export var IconStatus;
+
+(function (IconStatus) {
+  IconStatus["NORMAL"] = "normal";
+  IconStatus["DISABLED"] = "disabled";
+  IconStatus["ACTIVE"] = "active";
+  IconStatus["ACTIVE_DISABLED"] = "activeDisabled";
+})(IconStatus || (IconStatus = {}));

package/esm/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/esm/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/esm/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;