@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/radio/style/index.less

@@ -0,0 +1,114 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-radio {
+    display: inline-flex;
+    align-items: center;
+
+    .radio-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);
+        }
+
+        .@{prefix}-icon-circle-disabled path {
+            .use-var(stroke, line-color);
+        }
+    }
+
+    .radio-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .radio-icon + .radio-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .radio-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-radio-group {
+    .@{prefix}-radio:not(:last-child, .block) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-radio {
+    .radio-icon {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-checkbox-icon-color);
+      }
+      &.checked {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-checked-color);
+        }
+      }
+      &.disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-disabled-color);
+        }
+      }
+      &.checked.disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-checked-disabled-color);
+        }
+      }
+      .@{prefix}-icon-circle-disabled path {
+        @{arco-dark-mode-selector} & {
+          .use-var(stroke, dark-line-color);
+        }
+      }
+    }
+    .radio-text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/radio/type.d.ts

@@ -0,0 +1,31 @@
+import { CheckboxCommonProps, CheckboxProps, CheckboxRef, ValueType } from '../checkbox';
+import { BaseRef } from '../_helpers';
+export type { ValueType } from '../checkbox';
+export interface RadioGroupProps<T extends ValueType = ValueType, P extends RadioProps<T> = RadioProps<T>> extends CheckboxCommonProps {
+    /**
+     * 可选项, 传入children后此值无效
+     * @en Optional, this value is invalid after inputing children
+     */
+    options?: P[];
+    /**
+     * 受控模式，选中的选项
+     * @en Checked option, controlled mode
+     */
+    value?: T;
+    /**
+     * 默认选中项
+     * @en Default checked value
+     */
+    defaultValue?: T;
+    /**
+     * 单选项组选中状态变化回调函数
+     * @en Callback when checked state of the radio group  changes
+     */
+    onChange?: (value: T) => void;
+}
+export interface RadioGroupRef extends BaseRef {
+}
+export interface RadioProps<T extends ValueType = ValueType> extends CheckboxProps<T> {
+}
+export interface RadioRef extends CheckboxRef {
+}

package/esnext/radio/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/rate/index.d.ts

@@ -0,0 +1,109 @@
+import React, { ReactNode } from 'react';
+export declare type RateIconType = ReactNode | ((index: number) => ReactNode);
+export interface RateProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 默认评分
+     * @en Default value
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * 当前评分(受控)
+     * @en Current value (Controlled)
+     */
+    value?: number;
+    /**
+     * 图标数量
+     * @en Number of icons
+     * @default 5
+     */
+    count?: number;
+    /**
+     * 每个图标的分值
+     * @en Points for each icon
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 选中时颜色
+     * @en Color when selected
+     */
+    color?: string;
+    /**
+     * 未选中时颜色
+     * @en Color when unselected
+     */
+    normalColor?: string;
+    /**
+     * 禁用时颜色
+     * @en Color when disabled
+     */
+    disabledColor?: string;
+    /**
+     * 是否允许半选
+     * @en Whether to allow semi-selection
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否为禁用状态
+     * @en Whether to be disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义图标大小
+     * @en Custom icon size
+     */
+    size?: number | string;
+    /**
+     * 自定义图标间距(点击热区包含间距)
+     * @en Custom icon spacing (click hotspot includes spacing)
+     */
+    offset?: number | string;
+    /**
+     * 自定义图标
+     * @en Custom icons
+     */
+    icons?: {
+        normal: RateIconType;
+        active: RateIconType;
+        halfActive?: RateIconType;
+    };
+    /**
+     * 当前分值变化触发的事件
+     * @en Callback when the current value changes
+     * @default (value) => void
+     */
+    onChange?: (value: number) => void;
+}
+export interface RateRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+declare const _default: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 评分组件，支持受控模式
+ * @en Rate component, supports controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 评分
+ * @name_en Rate
+ * @displayName Rate
+ */
+export default _default;

package/esnext/rate/index.js

@@ -0,0 +1,87 @@
+import React, { useState, useRef, forwardRef, useImperativeHandle, useMemo, } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import IconStarFill from '../icon/IconStarFill';
+import IconStarHalf from '../icon/IconStarHalf';
+import { useUpdateEffect } from '../_helpers';
+const Rate = forwardRef((props, ref) => {
+    const { className, style, defaultValue = 0, value, count = 5, step = 1, color, normalColor, disabledColor, allowHalf = false, disabled = false, size, offset, icons, onChange, } = props;
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const starIndex = useMemo(() => {
+        const actualValue = value !== void 0 ? value : innerValue;
+        return actualValue / step || 0;
+    }, [value, innerValue, step]);
+    const domRef = useRef(null);
+    const helpArray = useMemo(() => Array(count).fill(''), [count]);
+    useUpdateEffect(() => {
+        handleStarIndexChange(starIndex);
+    }, [step]);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    function handleStarIndexChange(newIndex) {
+        if (disabled) {
+            return;
+        }
+        const newValue = newIndex * step;
+        setInnerValue(newValue);
+        onChange && onChange(newValue);
+    }
+    function renderIconByAttr(defaultNode, index, attr) {
+        if (!attr) {
+            return defaultNode;
+        }
+        if (typeof attr === 'function') {
+            // 对外的index从0开始
+            // @en External index starts from 0
+            return attr(index - 1);
+        }
+        return attr;
+    }
+    function getIconStatus(index) {
+        if (starIndex >= index) {
+            return 'active';
+        }
+        if (starIndex >= index - 0.5 && allowHalf) {
+            return 'half-active';
+        }
+        return 'normal';
+    }
+    function renderRateIcon(prefix, status, index) {
+        if (status === 'active') {
+            return renderIconByAttr(React.createElement(IconStarFill, { className: cls(`${prefix}-icon active`, { disabled }), style: { fontSize: size, color: disabled ? disabledColor : color } }), index, icons?.active);
+        }
+        if (status === 'half-active') {
+            const { active, halfActive } = icons || {};
+            const customIcon = halfActive || active;
+            return renderIconByAttr(React.createElement(React.Fragment, null,
+                React.createElement(IconStarFill, { className: cls(`${prefix}-icon normal`, { disabled }), style: { fontSize: size, color: normalColor } }),
+                React.createElement(IconStarHalf, { className: cls(`${prefix}-icon half-active`, { disabled }), style: {
+                        fontSize: size,
+                        color: disabled ? disabledColor : color,
+                    } })), index, customIcon);
+        }
+        return renderIconByAttr(React.createElement(IconStarFill, { className: cls(`${prefix}-icon normal`, { disabled }), style: { fontSize: size, color: normalColor } }), index, icons?.normal);
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls, useRtl }) => (React.createElement("div", { role: "slider", "aria-valuemin": 0, "aria-valuemax": count, "aria-valuenow": innerValue, "aria-disabled": disabled, className: cls(`${prefixCls}-rate`, className, { disabled }), style: style, ref: domRef }, helpArray.map((_, i) => {
+        // 对内的index从1开始，方便计算
+        // @en The index of the pair starts from 1, which is convenient for calculation
+        const index = i + 1;
+        const halfIndex = allowHalf ? index - 0.5 : index;
+        const status = getIconStatus(index);
+        return (React.createElement("div", { key: index, style: { padding: offset }, className: `${prefixCls}-rate-icon-wrap ${status}` },
+            renderRateIcon(`${prefixCls}-rate`, status, index),
+            React.createElement("div", { className: `${prefixCls}-rate-icon-click-half left`, onClick: () => handleStarIndexChange(useRtl ? index : halfIndex) }),
+            React.createElement("div", { className: `${prefixCls}-rate-icon-click-half right`, onClick: () => handleStarIndexChange(useRtl ? halfIndex : index) })));
+    })))));
+});
+/**
+ * 评分组件，支持受控模式
+ * @en Rate component, supports controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 评分
+ * @name_en Rate
+ * @displayName Rate
+ */
+export default componentWrapper(Rate, 'Rate');