@arco-design/mobile-react 2.19.0

package/cjs/ellipsis/utils/dom.js

@@ -0,0 +1,54 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLineHeight = getLineHeight;
+exports.wrapTextChildNodesWithSpan = wrapTextChildNodesWithSpan;
+
+function getLineHeight(element) {
+  var style = window.getComputedStyle(element, null);
+  var lineHeight = style.getPropertyValue('line-height');
+
+  if (lineHeight === 'normal') {
+    // Create a temp element to get line-height
+    var dom = document.createElement('span');
+    dom.style.width = '300px';
+    dom.style.position = 'absolute';
+    dom.style.visibility = 'hidden';
+    dom.innerText = 'Test';
+    element.appendChild(dom);
+    var height = dom.clientHeight;
+    element.removeChild(dom);
+    return height;
+  }
+
+  return parseFloat(lineHeight);
+}
+
+function createSpan(text, className) {
+  if (className === void 0) {
+    className = '';
+  }
+
+  var span = document.createElement('span');
+  span.className = className;
+  span.textContent = text;
+  return span;
+}
+
+function wrapTextChildNodesWithSpan(node, className) {
+  if (className === void 0) {
+    className = '';
+  }
+
+  if (node.nodeType === Node.TEXT_NODE) {
+    if (node.textContent) {
+      var _node$parentNode;
+
+      (_node$parentNode = node.parentNode) == null ? void 0 : _node$parentNode.replaceChild(createSpan(node.textContent, className), node);
+    }
+  } else {
+    node.childNodes.forEach(function (item) {
+      wrapTextChildNodesWithSpan(item, className);
+    });
+  }
+}

package/cjs/ellipsis/utils/is.d.ts

@@ -0,0 +1,3 @@
+export declare const isBrowser: () => boolean;
+/** Whether the environment support -webkit-line-clamp. */
+export declare const isSupportWebkitLineClamp: () => boolean;

package/cjs/ellipsis/utils/is.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.isSupportWebkitLineClamp = exports.isBrowser = void 0;
+
+var isBrowser = function isBrowser() {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+};
+/** Whether the environment support -webkit-line-clamp. */
+
+
+exports.isBrowser = isBrowser;
+
+var isSupportWebkitLineClamp = function isSupportWebkitLineClamp() {
+  return isBrowser() && typeof document.body.style.webkitLineClamp !== 'undefined';
+};
+
+exports.isSupportWebkitLineClamp = isSupportWebkitLineClamp;

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

@@ -0,0 +1,91 @@
+#demo-grid {
+  color:  #1d2129 ;
+}
+#demo-grid .grid-demo-block {
+  background:  #94bfff ;
+  opacity: 0.5;
+  border-radius: 2px;
+  width: 0.64rem;
+  height: 0.64rem;
+  position: relative;
+}
+#demo-grid .grid-demo-rows-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+#demo-grid .grid-demo-rows-item-text {
+  margin-top: 0.16rem;
+}
+#demo-grid .grid-demo-rows-item,
+#demo-grid .arco-grid-rows-item-title {
+  font-size: 0.3rem;
+}
+#demo-grid .demo-multi-grid {
+  background:  #ffffff ;
+  padding: 0.32rem;
+}
+#demo-grid .demo-multi-grid:not(:first-child) {
+  margin-top: 0.32rem;
+}
+#demo-grid .demo-multi-grid.col-2 .arco-grid-rows-item-title {
+  font-size: 0.32rem;
+}
+#demo-grid .demo-multi-grid.col-4 .arco-grid-rows-item-title {
+  font-size: 0.28rem;
+}
+#demo-grid .demo-multi-grid.col-5 .arco-grid-rows-item-title {
+  font-size: 0.26rem;
+}
+#demo-grid #demo-order-1,
+#demo-grid #demo-order-4 {
+  background: transparent;
+  padding: 0;
+}
+#demo-grid #demo-order-3 {
+  padding: 0;
+}
+#demo-grid #demo-order-5 .arco-grid-rows-item-title,
+#demo-grid #demo-order-6 .arco-grid-rows-item-title {
+  font-size: 0.26rem;
+}
+#demo-grid #demo-order-7 {
+  padding: 0;
+}
+#demo-grid #demo-order-7 .arco-grid-rows-item {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+          justify-content: flex-start;
+}
+#demo-grid .grid-item-more img {
+  width: 0.48rem;
+  height: 0.48rem;
+  margin: 0.08rem;
+}
+#demo-grid #demo-order-9 {
+  background: transparent;
+}
+#demo-grid #demo-order-9 .arco-grid-rows-item {
+  width: 2.08rem;
+  height: 1.92rem;
+  background:  #ffffff ;
+}
+#demo-grid #demo-order-10 .grid-demo-rows-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+}

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

@@ -0,0 +1,110 @@
+@import "../../../../style/mixin.less";
+
+#demo-grid {
+    .use-var(color, font-color);
+
+    .grid-demo-block {
+        .use-var(background, primary-disabled-color);
+        opacity: .5;
+        border-radius: 2px;
+        .rem(width, 32);
+        .rem(height, 32);
+        position: relative;
+    }
+
+    .grid-demo-rows-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &-text {
+            .rem(margin-top, 8);
+        }
+    }
+
+    .grid-demo-rows-item,
+    .@{prefix}-grid-rows-item-title {
+        .rem(font-size, 15);
+    }
+
+    .demo-multi-grid {
+        .use-var(background, background-color);
+        .rem(padding, 16);
+
+        &:not(:first-child) {
+            .rem(margin-top, 16);
+        }
+
+        &.col-2 {
+            .@{prefix}-grid-rows-item-title {
+                .rem(font-size, 16);
+            }
+        }
+
+        &.col-4 {
+            .@{prefix}-grid-rows-item-title {
+                .rem(font-size, 14);
+            }
+        }
+
+        &.col-5 {
+            .@{prefix}-grid-rows-item-title {
+                .rem(font-size, 13);
+            }
+        }
+    }
+
+    #demo-order-1,
+    #demo-order-4 {
+        background: transparent;
+        padding: 0;
+    }
+
+    #demo-order-3 {
+        padding: 0;
+    }
+
+    #demo-order-5,
+    #demo-order-6 {
+
+        .@{prefix}-grid-rows-item-title {
+            .rem(font-size, 13);
+        }
+    }
+
+    #demo-order-7 {
+        padding: 0;
+
+        .@{prefix}-grid-rows-item {
+            justify-content: flex-start;
+        }
+    }
+
+    .grid-item-more {
+
+        img {
+            .rem(width, 24);
+            .rem(height, 24);
+            .rem(margin, 4);
+        }
+    }
+
+    #demo-order-9 {
+        background: transparent;
+
+        .@{prefix}-grid-rows-item {
+            .rem(width, 104);
+            .rem(height, 96);
+            .use-var(background, background-color);
+        }
+    }
+
+    #demo-order-10 {
+
+        .grid-demo-rows-item {
+            display: flex;
+            position: relative;
+        }
+    }
+}

package/cjs/grid/index.d.ts

@@ -0,0 +1,112 @@
+import React, { ReactNode } from 'react';
+export interface GridProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 传入的数据
+     * @en grid data
+     *  */
+    data: GridData[];
+    /**
+     * 一行的列数
+     * @en number of columns
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 是否有边框
+     * @en Whether there is a border
+     * @default false
+     */
+    border?: boolean;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 0
+     */
+    gutter?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * 格子的形状，可选值为 circle
+     * @en The shape of the grid, the optional value are circle and square
+     * @default "square"
+     */
+    shape?: string;
+    /**
+     * 溢出时是否支持滑动
+     * @en Whether to support swipe when overflowing
+     * @default false
+     */
+    isSliding?: boolean;
+    /**
+     * 格子内容排列的方向，可选值为 horizontal
+     * @en The direction in which the grid content is arranged, the optional value are horizontal and vertical
+     * @default "vertical"
+     */
+    direction?: string;
+}
+export interface GridData {
+    /**
+     * 传入图标的资源地址
+     * @en The resource address of the input icon
+     *  */
+    img: string | ReactNode;
+    /**
+     * 传入的标题文字内容
+     * @en Title text content
+     * */
+    title: ReactNode;
+    /**
+     * 传入的描述文字内容
+     * @en Description text
+     *  */
+    content?: ReactNode;
+    /**
+     * 自定义样式
+     * @en Custom classname
+     *  */
+    className?: string;
+    /**
+     * 点击后的回调函数
+     * @en Callback when clicking
+     *  */
+    onClick?: (item: GridData) => void;
+    /**
+     * 每个格子自定义样式
+     * @en Custom style for each grid
+     *  */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 自定义单个 grid 的创建函数
+     * @en Customize the creation function of a single grid
+     *  */
+    renderGrid?: (item: GridData, colIndex: number, rowIndex: number) => ReactNode;
+    [x: string]: any;
+}
+export interface GridRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+ * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
+ * @type 布局
+ * @type_en Layout
+ * @name 宫格
+ * @name_en Grid
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<GridRef>>;
+export default Grid;

package/cjs/grid/index.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+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; }
+
+/**
+ * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+ * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
+ * @type 布局
+ * @type_en Layout
+ * @name 宫格
+ * @name_en Grid
+ */
+var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      data = props.data,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? 3 : _props$columns,
+      _props$border = props.border,
+      border = _props$border === void 0 ? false : _props$border,
+      _props$gutter = props.gutter,
+      gutter = _props$gutter === void 0 ? 0 : _props$gutter,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'square' : _props$shape,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'vertical' : _props$direction,
+      _props$isSliding = props.isSliding,
+      isSliding = _props$isSliding === void 0 ? false : _props$isSliding;
+  var domRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var getRows = function getRows(prefix, rowsData, rows, row) {
+    var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
+    var widthStyle = {
+      minWidth: 1 / columns * 100 + "%"
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefix + "-rows",
+      key: row
+    }, rowsData.map(function (item, index) {
+      var img = item.img,
+          title = item.title,
+          content = item.content,
+          itemClassName = item.className,
+          _onClick = item.onClick,
+          itemStyle = item.itemStyle,
+          renderGrid = item.renderGrid;
+
+      if (renderGrid) {
+        return renderGrid(item, index, row);
+      }
+
+      var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
+      var rowLen = rowsData.length;
+      var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        style: (0, _extends2.default)({
+          marginBottom: marginBottom,
+          marginRight: marginRight
+        }, itemStyle),
+        onClick: function onClick() {
+          _onClick && _onClick(item);
+        },
+        className: (0, _mobileUtils.cls)(prefix + "-rows-item", {
+          horizontal: direction === 'horizontal',
+          border: border && gutter === 0
+        }, itemClassName)
+      }, typeof img === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
+        src: img,
+        className: prefix + "-rows-item-icon " + (shape === 'circle' ? 'circle' : '')
+      }) : img, title || content ? /*#__PURE__*/_react.default.createElement("div", {
+        className: prefix + "-rows-item-text"
+      }, title ? /*#__PURE__*/_react.default.createElement("span", {
+        className: prefix + "-rows-item-title"
+      }, title) : null, content ? /*#__PURE__*/_react.default.createElement("span", {
+        className: prefix + "-rows-item-content"
+      }, content) : null) : null, (index + 1) % columns !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
+        className: "vertical-border"
+      }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
+        className: "horizontal-border"
+      }) : null);
+    }), fakeGrids.map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
+        key: i,
+        style: widthStyle
+      });
+    }));
+  };
+
+  var getGrid = function getGrid(prefix, dataArr) {
+    var rows = dataArr.length || 1;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dataArr.map(function (item, index) {
+      return getRows(prefix, item, rows, index);
+    }));
+  };
+
+  var renderEl = function renderEl(_ref) {
+    var prefixCls = _ref.prefixCls;
+    var prefix = prefixCls + "-grid";
+    var dataLength = (data == null ? void 0 : data.length) || 0;
+
+    if (dataLength === 0) {
+      return null;
+    }
+
+    var index = 0;
+    var newArr = [];
+
+    while (index < dataLength) {
+      newArr.push(data.slice(index, isSliding ? index += dataLength : index += columns));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefix, className, isSliding ? 'sliding' : ''),
+      style: style,
+      ref: domRef
+    }, getGrid(prefix, newArr));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderEl);
+});
+var _default = Grid;
+exports.default = _default;

package/cjs/grid/style/css/index.css

@@ -0,0 +1,115 @@
+.arco-grid {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+}
+.arco-grid-rows {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-grid-rows-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  width: 100%;
+}
+.arco-grid-rows-item-icon {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-grid-rows-item-icon.circle {
+  border-radius: 50%;
+}
+.arco-grid-rows-item-text {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  margin-top:  0.16rem ;
+  text-align: center;
+}
+.arco-grid-rows-item-title {
+  font-size:  0.32rem ;
+  line-height:  0.4rem ;
+}
+.arco-grid-rows-item-content {
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+  margin-top:  0.04rem ;
+  color:  #86909c ;
+}
+.arco-grid-rows-item.horizontal {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+}
+.arco-grid-rows-item.horizontal .arco-grid-rows-item-text {
+  margin-left:  0.24rem ;
+  margin-top: 0;
+  text-align: left;
+}
+.arco-grid-rows-item.horizontal .arco-grid-rows-item-content {
+  margin-top:  0 ;
+}
+.arco-grid-rows-item.border {
+  position: relative;
+  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;
+}
+.arco-grid-rows-item.border .vertical-border:after {
+  content: "";
+  width: 1px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  -webkit-transform: scaleX(0.5) translateY(-50%);
+          transform: scaleX(0.5) translateY(-50%);
+  height:  66.66% ;
+  background-color:  #e5e6eb ;
+}
+.arco-grid-rows-item.border .horizontal-border:after {
+  content: "";
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -webkit-transform: scaleY(0.5) translateX(-50%);
+          transform: scaleY(0.5) translateX(-50%);
+  width:  66.66% ;
+  background-color:  #e5e6eb ;
+}
+.arco-grid.sliding {
+  display: inline-block;
+  overflow-x: auto;
+}
+.arco-grid.sliding::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}

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

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

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

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

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

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

package/cjs/grid/style/index.js

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