@orca-fe/pocket/lib/eq-ratio-box/demo/Ruler.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Ruler = function Ruler(props) {
  var _props$size = props.size,
    size = _props$size === void 0 ? 50 : _props$size,
    _props$num = props.num,
    num = _props$num === void 0 ? 3 : _props$num;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      position: 'relative',
      width: size * num,
      height: size * num
    },
    children: new Array(num * num).fill(0).map(function (_, index) {
      var row = Math.floor(index / num);
      var col = index % num;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: {
          position: 'absolute',
          width: size,
          height: size,
          top: col * size,
          left: row * size,
          border: '1px solid #CCCCCC',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        },
        children: [size, "px"]
      }, index);
    })
  });
};
var _default = exports.default = Ruler;