"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.BGRuler = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));

var _getDOMRect = require("../lib/dom/getDOMRect");
var _createPropsGetter = require("../lib/createPropsGetter");













/**
 * Компонент рисует пиксельную линейку на заднем фоне.
 * Помогает контролировать размеры элементов при скриншотном тестировании.
 *
 * @see FxInput/__stories__/FxInput.stories.tsx
 */var
BGRuler = exports.BGRuler = /*#__PURE__*/function (_React$Component) {function BGRuler() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.








    getProps = (0, _createPropsGetter.createPropsGetter)(BGRuler.defaultProps);_this.

    iframe = null;_this.

    componentDidMount = function () {
      if (_this.iframe && _this.iframe.contentWindow) {
        _this.iframe.contentWindow.addEventListener('resize', _this.update, true);
      }
      _this.update();
    };_this.

    componentWillUnmount = function () {
      if (_this.iframe && _this.iframe.contentWindow) {
        _this.iframe.contentWindow.removeEventListener('resize', _this.update, true);
      }
    };_this.

    update = function () {
      _this.forceUpdate();
    };_this.



















































































    iframeRef = function (ref) {
      _this.iframe = ref;
    };return _this;}(0, _inheritsLoose2.default)(BGRuler, _React$Component);var _proto = BGRuler.prototype;_proto.render = function render() {var _this$props = this.props,width = _this$props.width,bottom = _this$props.bottom;var _this$getProps = this.getProps(),height = _this$getProps.height,top = _this$getProps.top,left = _this$getProps.left,right = _this$getProps.right,color = _this$getProps.color;var wrapper = { position: 'absolute', width: width, height: height, top: top, bottom: bottom, left: left, right: right, overflow: 'hidden' };var iframe = { position: 'absolute', width: '100%', height: '100%', border: 0, visibility: 'hidden' };var marks = { position: 'absolute', top: 0, left: 0, width: '100%', backgroundSize: '100px 20px', backgroundRepeat: 'repeat-x' };var highMarks = (0, _extends2.default)({}, marks, { height: '100%', backgroundImage: "linear-gradient(90deg, " + color + " 0, " + color + " 1px, transparent 1px)" });var middleMarks = (0, _extends2.default)({}, marks, { height: '75%', backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, " + color + " 49px, " + color + " 50px, transparent 50px)" });var shortMarks = (0, _extends2.default)({}, marks, { height: '40%', backgroundImage: "\n        linear-gradient(90deg, transparent 0, transparent 9px, " + color + " 9px, " + color + " 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, " + color + " 19px, " + color + " 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, " + color + " 29px, " + color + " 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, " + color + " 39px, " + color + " 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, " + color + " 59px, " + color + " 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, " + color + " 69px, " + color + " 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, " + color + " 79px, " + color + " 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, " + color + " 89px, " + color + " 90px, transparent 90px)\n      " });var rulerWidth = (0, _getDOMRect.getDOMRect)(this.iframe).width;var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {var label = { position: 'absolute', fontFamily: 'Arial', fontSize: 10, lineHeight: 1, color: color, bottom: -1, left: index * 100 + 5 };return /*#__PURE__*/_react.default.createElement("span", { key: index, style: label }, index * 100);});return /*#__PURE__*/_react.default.createElement("div", { style: wrapper }, /*#__PURE__*/_react.default.createElement("div", { style: highMarks }), /*#__PURE__*/_react.default.createElement("div", { style: middleMarks }), /*#__PURE__*/_react.default.createElement("div", { style: shortMarks }), labels, /*#__PURE__*/_react.default.createElement("iframe", { title: "BGRuler", style: iframe, ref: this.iframeRef }));};return BGRuler;}(_react.default.Component);BGRuler.defaultProps = { height: 20, top: 0, left: 0, right: 0, color: '#333' };