rax-view/lib/common/index.js

View component for Rax.

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _rax = require("rax");

var _dedupe = _interopRequireDefault(require("classnames/dedupe"));

var _wrapDefaultProperties = _interopRequireDefault(require("../utils/wrapDefaultProperties"));

var _index = _interopRequireDefault(require("../index.css"));

var _excluded = ["className", "style", "onFirstAppear", "onAppear"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var _styleSheet = _index.default;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var cache = _styleSheet.__cache || (_styleSheet.__cache = {});

  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = cache[className];

  if (!style) {
    style = {};

    if (classNameArr.length === 1) {
      style = _styleSheet[classNameArr[0].trim()];
    } else {
      classNameArr.forEach(function (cls) {
        var value = _styleSheet[cls.trim()];

        if (typeof value === 'object') {
          style = Object.assign(style, _styleSheet[cls.trim()]);
        }
      });
    }

    cache[className] = style;
  }

  return style;
}

var View = (0, _rax.forwardRef)(function (props, ref) {
  var selfRef = (0, _rax.useRef)(null);

  var className = props.className,
      style = props.style,
      onFirstAppear = props.onFirstAppear,
      onAppear = props.onAppear,
      rest = _objectWithoutPropertiesLoose(props, _excluded);

  var handleAppear = onAppear;

  if (onFirstAppear) {
    handleAppear = function (event) {
      onAppear && onAppear(event);

      if (!selfRef.current || !selfRef.current.triggeredAppear) {
        onFirstAppear && onFirstAppear(event);
        selfRef.current = {
          triggeredAppear: true
        };
      }
    };
  }

  return (0, _rax.createElement)("div", _extends({}, rest, {
    onAppear: handleAppear,
    ref: ref,
    className: (0, _dedupe.default)('rax-view-v2', className),
    style: Object.assign({}, _getStyle((0, _dedupe.default)('rax-view-v2', className)), style)
  }));
});

var _default = (0, _wrapDefaultProperties.default)(View);

exports.default = _default;