@arco-design/mobile-react 2.19.0

package/esm/radio/index.js

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

package/esm/radio/radio.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CheckboxProps, CheckboxRef } from '../checkbox';
+import { RadioProps, RadioRef, ValueType } from './type';
+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<RadioProps<T> & React.RefAttributes<RadioRef>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps<string | number> & React.RefAttributes<RadioRef>>;

package/esm/radio/radio.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import Checkbox from '../checkbox';
+import { RadioGroupContext } from './group';
+import { useMergeProps } from '../checkbox/hooks';
+export function componentGenerator(Comp) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var mergedProps = useMergeProps(props, RadioGroupContext);
+    var radioRef = useRef(null);
+    useImperativeHandle(ref, function () {
+      return radioRef.current;
+    });
+    return /*#__PURE__*/React.createElement(Comp, _extends({
+      ref: radioRef
+    }, mergedProps, {
+      isRadio: true
+    }));
+  });
+}
+export var Radio = componentGenerator(Checkbox);

package/esm/radio/style/css/index.css

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

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

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

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

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

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

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

package/esm/radio/style/index.js

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

package/esm/radio/style/index.less

@@ -0,0 +1,53 @@
+@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);
+        }
+    }
+
+    .radio-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .radio-icon + .radio-text {
+        .use-var(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(margin-right, checkbox-group-gutter);
+    }
+}

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

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

package/esm/rate/demo/style/css/mobile.css

@@ -0,0 +1,4 @@
+#demo-rate .arco-rate {
+  margin-left: -0.2rem;
+  margin-top: -0.18rem;
+}

package/esm/rate/demo/style/mobile.less

@@ -0,0 +1,8 @@
+@import "../../../../style/mixin.less";
+
+#demo-rate {
+    .@{prefix}-rate {
+        .rem(margin-left, -10);
+        .rem(margin-top, -9);
+    }
+}

package/esm/rate/index.d.ts

@@ -0,0 +1,106 @@
+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;
+}
+/**
+ * 评分组件，支持受控模式
+ * @en Rate component, supports controlled mode
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 评分
+ * @name_en Rate
+ */
+declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
+export default Rate;

package/esm/rate/index.js

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

package/esm/rate/style/css/index.css

@@ -0,0 +1,55 @@
+.arco-rate {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+}
+.arco-rate.disabled {
+  cursor: not-allowed;
+}
+.arco-rate-icon-wrap {
+  padding:  6PX ;
+  font-size:  24PX ;
+  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: relative;
+}
+.arco-rate-icon-wrap.active,
+.arco-rate-icon.active,
+.arco-rate-icon-wrap.half-active,
+.arco-rate-icon.half-active {
+  color:  #FFB400 ;
+}
+.arco-rate-icon-wrap.active.disabled,
+.arco-rate-icon.active.disabled,
+.arco-rate-icon-wrap.half-active.disabled,
+.arco-rate-icon.half-active.disabled {
+  color:  #C9CDD4 ;
+}
+.arco-rate-icon-wrap.normal,
+.arco-rate-icon.normal {
+  color:  #E5E6EB ;
+}
+.arco-rate-icon.half-active {
+  position: absolute;
+  z-index: 1;
+}
+.arco-rate-icon-click-half {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+}
+.arco-rate-icon-click-half.left {
+  left: 0;
+}
+.arco-rate-icon-click-half.right {
+  right: 0;
+}

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

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

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

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

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

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

package/esm/rate/style/index.js

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

package/esm/rate/style/index.less

@@ -0,0 +1,59 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-rate {
+    display: inline-flex;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
+
+    &-icon-wrap {
+        .use-var(padding, rate-icon-offset);
+        .use-var(font-size, rate-icon-size);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    &-icon-wrap,
+    &-icon {
+
+        &.active,
+        &.half-active {
+            .use-var(color, rate-icon-active-color);
+
+            &.disabled {
+                .use-var(color, rate-icon-disabled-active-color);
+            }
+        }
+
+        &.normal {
+            .use-var(color, rate-icon-normal-color);
+        }
+    }
+
+    &-icon {
+
+        &.half-active {
+            position: absolute;
+            z-index: 1;
+        }
+    }
+
+    &-icon-click-half {
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        z-index: 2;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+}

package/esm/show-monitor/demo/style/css/mobile.css

@@ -0,0 +1,50 @@
+#demo-show-monitor .show-monitor-demo-1-wrapper {
+  position: relative;
+  background: #F2F3F5;
+  overflow: hidden;
+  height: 255px;
+}
+#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-title {
+  position: relative;
+  font-size: 14px;
+  color:  #86909c ;
+  top: 16px;
+  text-align: center;
+}
+#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller .show-monitor-demo-scroller-inner {
+  padding-top: 500px;
+  padding-bottom: 72px;
+}
+#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller .arco-show-monitor {
+  bottom: 72px;
+  width: 100%;
+}
+#demo-show-monitor #demo-order-2 {
+  padding: 400px 16px 40px;
+}
+#demo-show-monitor #demo-order-3,
+#demo-show-monitor #demo-order-4 {
+  padding: 500px 16px 40px;
+}
+#demo-show-monitor .show-monitor-content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  height: 44px;
+  color: #FFF;
+  font-size: 14px;
+  background:  #165dff ;
+}