@arco-design/mobile-react 2.19.0

package/cjs/checkbox/checkbox.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Checkbox = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _IconCircleUnchecked = _interopRequireDefault(require("../icon/IconCircleUnchecked"));
+
+var _IconCircleChecked = _interopRequireDefault(require("../icon/IconCircleChecked"));
+
+var _IconCircleDisabled = _interopRequireDefault(require("../icon/IconCircleDisabled"));
+
+var _IconSquareChecked = _interopRequireDefault(require("../icon/IconSquareChecked"));
+
+var _IconSquareUnchecked = _interopRequireDefault(require("../icon/IconSquareUnchecked"));
+
+var _IconSquareDisabled = _interopRequireDefault(require("../icon/IconSquareDisabled"));
+
+var _group = require("./group");
+
+var _type = require("./type");
+
+var _hooks = require("./hooks");
+
+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 getDefaultIcon = function getDefaultIcon(shape, status) {
+  var defaultIcons = {
+    circle: {
+      normal: /*#__PURE__*/_react.default.createElement(_IconCircleUnchecked.default, null),
+      active: /*#__PURE__*/_react.default.createElement(_IconCircleChecked.default, null),
+      disabled: /*#__PURE__*/_react.default.createElement(_IconCircleDisabled.default, null),
+      activeDisabled: /*#__PURE__*/_react.default.createElement(_IconCircleChecked.default, null)
+    },
+    square: {
+      normal: /*#__PURE__*/_react.default.createElement(_IconSquareUnchecked.default, null),
+      active: /*#__PURE__*/_react.default.createElement(_IconSquareChecked.default, null),
+      disabled: /*#__PURE__*/_react.default.createElement(_IconSquareDisabled.default, null),
+      activeDisabled: /*#__PURE__*/_react.default.createElement(_IconSquareChecked.default, null)
+    },
+    justify: {
+      normal: /*#__PURE__*/_react.default.createElement(_IconCircleUnchecked.default, null),
+      active: /*#__PURE__*/_react.default.createElement(_IconCircleChecked.default, null),
+      disabled: /*#__PURE__*/_react.default.createElement(_IconCircleDisabled.default, null),
+      activeDisabled: /*#__PURE__*/_react.default.createElement(_IconCircleChecked.default, null)
+    }
+  };
+  return defaultIcons[shape][status];
+};
+
+var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useMergeProps = (0, _hooks.useMergeProps)(props, _group.CheckboxGroupContext),
+      _useMergeProps$style = _useMergeProps.style,
+      style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
+      _useMergeProps$classN = _useMergeProps.className,
+      className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
+      _useMergeProps$childr = _useMergeProps.children,
+      children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
+      _useMergeProps$label = _useMergeProps.label,
+      label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
+      _useMergeProps$layout = _useMergeProps.layout,
+      layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
+      value = _useMergeProps.value,
+      _useMergeProps$defaul = _useMergeProps.defaultCheck,
+      defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
+      _useMergeProps$disabl = _useMergeProps.disabled,
+      disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
+      _useMergeProps$shape = _useMergeProps.shape,
+      shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
+      icons = _useMergeProps.icons,
+      _useMergeProps$isRadi = _useMergeProps.isRadio,
+      isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
+      propsChecked = _useMergeProps.checked,
+      onChange = _useMergeProps.onChange;
+
+  var _useState = (0, _react.useState)(propsChecked === void 0 ? defaultCheck : propsChecked),
+      checked = _useState[0],
+      setChecked = _useState[1];
+
+  var _useState2 = (0, _react.useState)(isRadio ? 'radio' : 'checkbox'),
+      componentName = _useState2[0];
+
+  var domRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (propsChecked !== void 0) setChecked(Boolean(propsChecked));
+  }, [propsChecked]);
+  /**
+   * 获得图标样式
+   * @en Get icon style
+   */
+
+  var getStatus = function getStatus() {
+    if (checked) {
+      if (disabled) return _type.IconStatus.ACTIVE_DISABLED;
+      return _type.IconStatus.ACTIVE;
+    }
+
+    if (disabled) return _type.IconStatus.DISABLED;
+    return _type.IconStatus.NORMAL;
+  };
+  /**
+   * 计算展示的icon
+   * @en Calculate the displayed icon
+   */
+
+
+  var renderIcon = function renderIcon() {
+    var Icon;
+    var iconKey = getStatus();
+
+    if (icons && icons[iconKey] !== void 0) {
+      Icon = icons[iconKey];
+    } else if (icons === null) {
+      Icon = null;
+    } else {
+      Icon = layout === 'justify' ? getDefaultIcon('justify', iconKey) : getDefaultIcon(shape, iconKey);
+    }
+
+    return Icon ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(componentName + "-icon", {
+        disabled: disabled,
+        checked: checked
+      })
+    }, Icon) : null;
+  };
+  /**
+   * 处理点击事件
+   * @en Handling click events
+   */
+
+
+  var onClick = function onClick(e) {
+    if (disabled) return; // Radio组件不支持点击取消选中
+    // @en Radio component does not support click to uncheck
+
+    if (isRadio && checked) return;
+    onChange && onChange(!checked, value, e);
+
+    if (propsChecked === void 0) {
+      setChecked(!checked);
+    }
+  };
+
+  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 + "-" + componentName, "shape-" + shape, {
+        disabled: disabled
+      }, layout),
+      onClick: onClick
+    }, layout !== 'justify' && renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
+      className: componentName + "-text"
+    }, children || label || value), layout === 'justify' && renderIcon());
+  });
+});
+exports.Checkbox = Checkbox;

package/cjs/checkbox/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-checkbox .custom-color .checkbox-icon {
+  color: #FF5722;
+}
+#demo-checkbox .custom-size .checkbox-icon svg {
+  width: 20px;
+  height: 20px;
+}
+#demo-checkbox .demo-checkbox-cell-group {
+  margin: -0.32rem;
+}

package/cjs/checkbox/demo/style/mobile.less

@@ -0,0 +1,20 @@
+@import '../../../../style/mixin.less';
+
+#demo-checkbox {
+    .custom-color {
+        .checkbox-icon {
+            color: #FF5722;
+        }
+    }
+    .custom-size {
+        .checkbox-icon {
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+    .demo-checkbox-cell-group {
+        .rem(margin, -16);
+    }
+}

package/cjs/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/cjs/checkbox/group.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.CheckboxGroupContext = void 0;
+exports.componentGenerator = componentGenerator;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+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 CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({
+  isGroup: false,
+  shape: 'circle',
+  layout: 'inline',
+  disabled: false,
+  value: [],
+  onChange: function onChange() {}
+});
+
+exports.CheckboxGroupContext = CheckboxGroupContext;
+
+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,
+        _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 = (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]);
+    /**
+     * 切换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.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 + "-checkbox-group")
+      }, /*#__PURE__*/_react.default.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.default.createElement(Comp, (0, _extends2.default)({
+          key: option.value
+        }, option));
+      })));
+    });
+  });
+}

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

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

package/cjs/checkbox/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _useMergeProps = require("./useMergeProps");
+
+Object.keys(_useMergeProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMergeProps[key]) return;
+  exports[key] = _useMergeProps[key];
+});

package/cjs/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/cjs/checkbox/hooks/useMergeProps.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useMergeProps = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("react");
+
+var useMergeProps = function useMergeProps(props, groupContext) {
+  var _useContext = (0, _react.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 (0, _extends2.default)({
+    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);
+    }
+  });
+};
+
+exports.useMergeProps = useMergeProps;

package/cjs/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/cjs/checkbox/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _group = require("./group");
+
+var _checkbox = require("./checkbox");
+
+var _type = require("./type");
+
+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 Checkbox group
+ *  */
+var Group = (0, _group.componentGenerator)(_checkbox.Checkbox);
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据输入
+ * @type_en Data Entry
+ */
+
+var _default = (0, _mobileUtils.componentWrapper)(_checkbox.Checkbox, {
+  Group: Group
+});
+
+exports.default = _default;

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

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

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

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

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

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

package/cjs/checkbox/style/index.js

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

package/cjs/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;
+        }
+    }
+}