@arco-design/mobile-react 2.19.0

package/umd/radio/group.js

@@ -0,0 +1,113 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider);
+    global.group = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.RadioGroupContext = void 0;
+  _exports.componentGenerator = componentGenerator;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+
+  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 RadioGroupContext = /*#__PURE__*/_react.default.createContext({
+    isGroup: false,
+    shape: 'circle',
+    layout: 'inline',
+    disabled: false,
+    value: [],
+    onChange: function onChange() {}
+  });
+
+  _exports.RadioGroupContext = RadioGroupContext;
+
+  function componentGenerator(Comp) {
+    return /*#__PURE__*/(0, _react.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,
+          defaultValue = 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,
+          _props$onChange = props.onChange,
+          onChange = _props$onChange === void 0 ? function () {} : _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;
+
+      var _useState = (0, _react.useState)(value || defaultValue),
+          groupValue = _useState[0],
+          setGroupValue = _useState[1];
+
+      var domRef = (0, _react.useRef)(null);
+      (0, _react.useImperativeHandle)(ref, function () {
+        return {
+          dom: domRef.current
+        };
+      });
+      (0, _react.useEffect)(function () {
+        value !== void 0 && setGroupValue(value);
+      }, [value]);
+      /**
+       * 切换Radio状态回调
+       * @en Callback when toggling radio state
+       */
+
+      var handleChange = function handleChange(checked, newValue) {
+        if (!checked) return;
+        onChange(newValue);
+
+        if (value === void 0) {
+          setGroupValue(newValue);
+        }
+      };
+
+      return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+        var prefixCls = _ref.prefixCls;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          ref: domRef,
+          style: style,
+          className: (0, _mobileUtils.cls)(className, prefixCls + "-radio-group")
+        }, /*#__PURE__*/_react.default.createElement(RadioGroupContext.Provider, {
+          value: {
+            isGroup: true,
+            shape: shape,
+            layout: layout,
+            disabled: disabled,
+            icons: icons,
+            value: groupValue === void 0 ? [] : [groupValue],
+            onChange: handleChange
+          }
+        }, children, !children && options && options.map(function (option) {
+          return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+            key: option.value
+          }, option, {
+            isRadio: true
+          }));
+        })));
+      });
+    });
+  }
+});

package/umd/radio/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").RadioProps<string | number> & import("react").RefAttributes<import("./type").RadioRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").RadioGroupProps<string | number, import("./type").RadioProps<string | number> & import("react").RefAttributes<import("./type").RadioRef>> & import("react").RefAttributes<import("./type").RadioGroupRef>>;
+};
+/**
+ * 单选框，可用状态下点击切换选择，支持禁用，支持单选项组。
+ * @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 _default;

package/umd/radio/index.js

@@ -0,0 +1,45 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@arco-design/mobile-utils", "./group", "./radio", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@arco-design/mobile-utils"), require("./group"), require("./radio"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.mobileUtils, global.group, global.radio, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _group, _radio, _type) {
+  "use strict";
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  /**
+   * 单选项组
+   * @en Radio group
+   */
+  var Group = (0, _group.componentGenerator)(_radio.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
+   */
+
+  var _default = (0, _mobileUtils.componentWrapper)(_radio.Radio, {
+    Group: Group
+  });
+
+  _exports.default = _default;
+});

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

@@ -0,0 +1,46 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "../checkbox", "./group", "../checkbox/hooks"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("../checkbox"), require("./group"), require("../checkbox/hooks"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.checkbox, global.group, global.hooks);
+    global.radio = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _checkbox, _group, _hooks) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.Radio = void 0;
+  _exports.componentGenerator = componentGenerator;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _checkbox = _interopRequireDefault(_checkbox);
+
+  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; }
+
+  function componentGenerator(Comp) {
+    return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+      var mergedProps = (0, _hooks.useMergeProps)(props, _group.RadioGroupContext);
+      var radioRef = (0, _react.useRef)(null);
+      (0, _react.useImperativeHandle)(ref, function () {
+        return radioRef.current;
+      });
+      return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+        ref: radioRef
+      }, mergedProps, {
+        isRadio: true
+      }));
+    });
+  }
+
+  var Radio = componentGenerator(_checkbox.default);
+  _exports.Radio = Radio;
+});

package/umd/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/umd/radio/style/css/index.d.ts

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

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

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

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

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

package/umd/radio/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

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

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

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

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

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