@arco-design/mobile-react 2.19.0

package/cjs/cell/group.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.GroupContext = 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 GroupContext = /*#__PURE__*/_react.default.createContext({
+  isFromGroup: false
+});
+
+exports.GroupContext = GroupContext;
+
+function componentGenerator(Comp) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        header = props.header,
+        footer = props.footer,
+        _props$bordered = props.bordered,
+        bordered = _props$bordered === void 0 ? true : _props$bordered,
+        options = props.options,
+        children = props.children,
+        onClick = props.onClick;
+    var domRef = (0, _react.useRef)(null);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    function handleClick(e) {
+      onClick && onClick(e);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-cell-group", 'all-border-box', className),
+        ref: domRef,
+        onClick: handleClick,
+        style: style
+      }, header ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "cell-group-header"
+      }, header) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)('cell-group-body', {
+          bordered: bordered
+        })
+      }, /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
+        value: {
+          isFromGroup: true
+        }
+      }, children, options && options.map(function (option, index) {
+        return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+          key: index
+        }, option));
+      }))), footer ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "cell-group-footer"
+      }, footer) : null);
+    });
+  });
+}

package/cjs/cell/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").CellProps & import("react").RefAttributes<import("./type").CellRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").CellGroupProps<import("./type").CellProps & import("react").RefAttributes<import("./type").CellRef>> & import("react").RefAttributes<import("./type").CellGroupRef>>;
+};
+/**
+ * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+ * @en Cell, including cells and cell group, are often used to set items, forms, etc.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 单元格
+ * @name_en Cell
+ */
+export default _default;

package/cjs/cell/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _group = require("./group");
+
+var _cell = require("./cell");
+
+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];
+});
+var Group = (0, _group.componentGenerator)(_cell.Cell);
+/**
+ * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
+ * @en Cell, including cells and cell group, are often used to set items, forms, etc.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 单元格
+ * @name_en Cell
+ */
+
+var _default = (0, _mobileUtils.componentWrapper)(_cell.Cell, {
+  Group: Group
+});
+
+exports.default = _default;

package/cjs/cell/style/css/index.css

@@ -0,0 +1,264 @@
+.arco-cell {
+  color:  #86909c ;
+  font-size:  0.32rem ;
+  margin-left:  0.32rem ;
+  padding-right:  0.32rem ;
+}
+.arco-cell:not(:first-of-type).bordered {
+  position: relative;
+  border-width: 0;
+}
+.arco-cell:not(:first-of-type).bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell:not(:first-of-type).bordered::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell:not(:first-of-type).bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell.without-group {
+  background-color:  #ffffff ;
+  padding-left:  0.32rem ;
+  margin-left: 0;
+}
+.arco-cell.without-group.bordered {
+  position: relative;
+  border-width: 0;
+}
+.arco-cell.without-group.bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell.without-group.bordered::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell.without-group.bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell.without-group.bordered::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell.without-group.bordered::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell.without-group.bordered::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell-inner {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  height:  1.08rem ;
+}
+.arco-cell-inner.has-desc {
+  height:  1.48rem ;
+}
+.arco-cell .cell-label {
+  color:  #1d2129 ;
+  margin-right:  0.48rem ;
+}
+.arco-cell .cell-desc {
+  color:  #86909c ;
+  font-size:  0.28rem ;
+  margin-top:  0.04rem ;
+}
+.arco-cell .cell-content {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  height: 100%;
+}
+.arco-cell .cell-content.has-label {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+          justify-content: flex-end;
+}
+.arco-cell .cell-content .cell-text {
+  width: 100%;
+  text-align: right;
+  font-size:  0.28rem ;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}
+.arco-cell .cell-label-icon {
+  margin-right:  0.24rem ;
+  font-size: 0;
+}
+.arco-cell .cell-label-icon .arco-icon {
+  line-height: initial;
+  font-size:  0.4rem ;
+  color:  #4e5969 ;
+}
+.arco-cell .cell-arrow-icon {
+  margin-left:  0.16rem ;
+  font-size: 0;
+}
+.arco-cell .cell-arrow-icon .arco-icon {
+  font-size:  0.24rem ;
+  color:  #c9cdd4 ;
+}
+.arco-cell .cell-arrow-icon .arrow-icon-svg {
+  width: 0.16rem;
+}
+.arco-cell .cell-arrow-icon .arrow-icon-svg path {
+  fill:  #c9cdd4 ;
+}
+.arco-cell .arco-input-wrap {
+  padding-left: 0;
+}
+.arco-cell-group .cell-group-header,
+.arco-cell-group .cell-group-footer {
+  color:  #86909c ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+  padding:  0.24rem 0.32rem ;
+}
+.arco-cell-group .cell-group-body {
+  background-color:  #ffffff ;
+}
+.arco-cell-group .cell-group-body.bordered {
+  position: relative;
+  border-width: 0;
+}
+.arco-cell-group .cell-group-body.bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell-group .cell-group-body.bordered::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell-group .cell-group-body.bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell-group .cell-group-body.bordered::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell-group .cell-group-body.bordered::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell-group .cell-group-body.bordered::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}

package/cjs/cell/style/css/index.d.ts

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

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

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

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

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

package/cjs/cell/style/index.js

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

package/cjs/cell/style/index.less

@@ -0,0 +1,113 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-cell {
+    .use-var(color, cell-text-color);
+    .use-var(font-size, cell-font-size);
+    .use-var(margin-left, cell-horizontal-padding);
+    .use-var(padding-right, cell-horizontal-padding);
+
+    &:not(:first-of-type).bordered {
+        .onepx-border-var(top, line-color);
+    }
+
+    &.without-group {
+        .use-var(background-color, cell-background-color);
+        .use-var(padding-left, cell-horizontal-padding);
+        margin-left: 0;
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-color);
+        }
+    }
+
+    &-inner {
+        display: flex;
+        align-items: center;
+        .use-var(height, cell-item-height);
+
+        &.has-desc {
+            .use-var(height, cell-item-has-desc-height);
+        }
+    }
+
+    .cell-label {
+        .use-var(color, cell-label-color);
+        .use-var(margin-right, cell-label-gutter);
+    }
+
+    .cell-desc {
+        .use-var(color, cell-desc-color);
+        .use-var(font-size, cell-desc-font-size);
+        .use-var(margin-top, cell-desc-margin-top);
+    }
+
+    .cell-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        &.has-label {
+            justify-content: flex-end;
+        }
+
+        .cell-text {
+            width: 100%;
+            text-align: right;
+            .use-var(font-size, cell-content-font-size);
+            .text-overflow(2);
+        }
+    }
+
+    .cell-label-icon {
+        .use-var(margin-right, cell-label-icon-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            line-height: initial;
+            .use-var(font-size, cell-label-icon-font-size);
+            .use-var(color, cell-label-icon-color);
+        }
+    }
+
+    .cell-arrow-icon {
+        .use-var(margin-left, cell-arrow-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            .use-var(font-size, cell-arrow-font-size);
+            .use-var(color, cell-arrow-color);
+        }
+
+        .arrow-icon-svg {
+            .rem(width, 8);
+
+            path {
+                .use-var(fill, cell-arrow-color);
+            }
+        }
+    }
+
+    .@{prefix}-input-wrap {
+        padding-left: 0;
+    }
+}
+
+.@{prefix}-cell-group {
+
+    .cell-group-header,
+    .cell-group-footer {
+        .use-var(color, cell-text-color);
+        .use-var(font-size, cell-extra-font-size);
+        .use-var(line-height, cell-extra-line-height);
+        .use-var(padding, cell-extra-padding);
+    }
+
+    .cell-group-body {
+        .use-var(background-color, cell-background-color);
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-color);
+        }
+    }
+}

package/cjs/cell/type.d.ts

@@ -0,0 +1,125 @@
+import React, { ReactNode } from 'react';
+export interface CellProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 单元格左侧图标
+     * @en Cell left icon
+     * */
+    icon?: ReactNode;
+    /**
+     * 标签名
+     * @en Label name
+     *  */
+    label?: ReactNode;
+    /**
+     * 描述
+     * @en Description
+     * */
+    desc?: ReactNode;
+    /**
+     * 主体文字，如果有标签名则靠右，否则靠左
+     * @en The primary text, if there is a label name, it is to the right, otherwise it is to the left
+     *  */
+    text?: string;
+    /**
+     * 主体内容，如果有标签名则靠右，否则靠左
+     * @en The primary content, if there is a label name, it is to the right, otherwise it is to the left
+     *  */
+    children?: ReactNode;
+    /**
+     * 是否展示右侧箭头
+     * @en Whether to show the right arrow
+     *  */
+    showArrow?: boolean;
+    /**
+     * 右侧箭头内容
+     * @en Right arrow content
+     * */
+    arrow?: ReactNode;
+    /**
+     * 单元格前缀内容，在单元格上方
+     * @en Cell prefix content, above the cell
+     * */
+    prepend?: ReactNode;
+    /** 单元格后缀内容，在单元格下方
+     * @en Cell suffix content, below the cell
+     */
+    append?: ReactNode;
+    /**
+     * 是否有外边框
+     * @en Whether there is a border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 点击单元格事件回调
+     * @en Callback for cell click event
+     * */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface CellRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface CellGroupProps<T extends CellProps = CellProps> {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义头部内容
+     * @en custom header content
+     * */
+    header?: ReactNode;
+    /**
+     * 自定义尾部内容
+     * @en custom footer content
+     *  */
+    footer?: ReactNode;
+    /**
+     * 是否有外边框
+     * @en Whether there is a border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 单元格配置，优先级高于children
+     * @en Cell setting
+     *  */
+    options?: T[];
+    /**
+     * 内部单元格
+     * @en inner cell
+     *  */
+    children?: ReactNode;
+    /**
+     * 点击单元格组回调
+     * @en Callback of clicking the cell group
+     *  */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface CellGroupRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/cjs/cell/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/checkbox/checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps, CheckboxRef } from './type';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps<string | number> & React.RefAttributes<CheckboxRef>>;