react-leap-feature-selector/umd/react-leap-feature-selector.js

react-leap-feature-selector React component

/*!
 * react-leap-feature-selector v0.1.1
 * MIT Licensed
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define(["react"], factory);
	else if(typeof exports === 'object')
		exports["LeapFeatureSelector"] = factory(require("react"));
	else
		root["LeapFeatureSelector"] = factory(root["React"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 15);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_0__;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

if (true) {
  var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
    Symbol.for &&
    Symbol.for('react.element')) ||
    0xeac7;

  var isValidElement = function(object) {
    return typeof object === 'object' &&
      object !== null &&
      object.$$typeof === REACT_ELEMENT_TYPE;
  };

  // By explicitly using `prop-types` you are opting into new development behavior.
  // http://fb.me/prop-types-in-prod
  var throwOnDirectAccess = true;
  module.exports = __webpack_require__(17)(isValidElement, throwOnDirectAccess);
} else {
  // By explicitly using `prop-types` you are opting into new production behavior.
  // http://fb.me/prop-types-in-prod
  module.exports = require('./factoryWithThrowingShims')();
}


/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
/* global window */
/* eslint "no-console": "off" */

var getViewPort = function getViewPort() {
  if (typeof window !== 'undefined' && window.innerWidth) {
    return window.innerWidth;
  }
  return null;
};

var screenClasses = exports.screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];

var defaultBreakpoints = exports.defaultBreakpoints = [576, 768, 992, 1200];

var defaultContainerWidths = exports.defaultContainerWidths = [540, 750, 960, 1140];

var defaultGutterWidth = exports.defaultGutterWidth = 30;

var getScreenClass = exports.getScreenClass = function getScreenClass(_ref) {
  var serverSideScreenClass = _ref.serverSideScreenClass,
      breakpoints = _ref.breakpoints;

  var theBreakpoints = breakpoints && breakpoints.length ? breakpoints : defaultBreakpoints;

  var screenClass = serverSideScreenClass || 'xl';

  var viewport = getViewPort();
  if (viewport) {
    screenClass = 'xs';
    if (theBreakpoints[0] && viewport >= theBreakpoints[0]) screenClass = 'sm';
    if (theBreakpoints[1] && viewport >= theBreakpoints[1]) screenClass = 'md';
    if (theBreakpoints[2] && viewport >= theBreakpoints[2]) screenClass = 'lg';
    if (theBreakpoints[3] && viewport >= theBreakpoints[3]) screenClass = 'xl';
  }

  return screenClass;
};

var normalizeColumnWidth = exports.normalizeColumnWidth = function normalizeColumnWidth(width) {
  return Math.max(0, Math.min(12, width));
};

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

var debounce = __webpack_require__(25),
    isObject = __webpack_require__(4);

/** Error message constants. */
var FUNC_ERROR_TEXT = 'Expected a function';

/**
 * Creates a throttled function that only invokes `func` at most once per
 * every `wait` milliseconds. The throttled function comes with a `cancel`
 * method to cancel delayed `func` invocations and a `flush` method to
 * immediately invoke them. Provide `options` to indicate whether `func`
 * should be invoked on the leading and/or trailing edge of the `wait`
 * timeout. The `func` is invoked with the last arguments provided to the
 * throttled function. Subsequent calls to the throttled function return the
 * result of the last `func` invocation.
 *
 * **Note:** If `leading` and `trailing` options are `true`, `func` is
 * invoked on the trailing edge of the timeout only if the throttled function
 * is invoked more than once during the `wait` timeout.
 *
 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
 *
 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
 * for details over the differences between `_.throttle` and `_.debounce`.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Function
 * @param {Function} func The function to throttle.
 * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
 * @param {Object} [options={}] The options object.
 * @param {boolean} [options.leading=true]
 *  Specify invoking on the leading edge of the timeout.
 * @param {boolean} [options.trailing=true]
 *  Specify invoking on the trailing edge of the timeout.
 * @returns {Function} Returns the new throttled function.
 * @example
 *
 * // Avoid excessively updating the position while scrolling.
 * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 *
 * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
 * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
 * jQuery(element).on('click', throttled);
 *
 * // Cancel the trailing throttled invocation.
 * jQuery(window).on('popstate', throttled.cancel);
 */
function throttle(func, wait, options) {
  var leading = true,
      trailing = true;

  if (typeof func != 'function') {
    throw new TypeError(FUNC_ERROR_TEXT);
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  return debounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  });
}

module.exports = throttle;


/***/ }),
/* 4 */
/***/ (function(module, exports) {

/**
 * Checks if `value` is the
 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Lang
 * @param {*} value The value to check.
 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
 * @example
 *
 * _.isObject({});
 * // => true
 *
 * _.isObject([1, 2, 3]);
 * // => true
 *
 * _.isObject(_.noop);
 * // => true
 *
 * _.isObject(null);
 * // => false
 */
function isObject(value) {
  var type = typeof value;
  return value != null && (type == 'object' || type == 'function');
}

module.exports = isObject;


/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var RenderAny = function RenderAny(_ref) {
  var children = _ref.children;

  if (!children) return null;
  if (typeof children === 'function') {
    return children();
  }
  if ((typeof children === 'undefined' ? 'undefined' : _typeof(children)) === 'object' && Array.isArray(children)) {
    return _react2.default.createElement(
      'div',
      null,
      children
    );
  }
  return children;
};

RenderAny.propTypes = {
  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func])
};

RenderAny.defaultProps = {
  children: null
};

exports.default = RenderAny;

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * 
 */

function makeEmptyFunction(arg) {
  return function () {
    return arg;
  };
}

/**
 * This function accepts and discards inputs; it has no side effects. This is
 * primarily useful idiomatically for overridable function endpoints which
 * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
 */
var emptyFunction = function emptyFunction() {};

emptyFunction.thatReturns = makeEmptyFunction;
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
emptyFunction.thatReturnsThis = function () {
  return this;
};
emptyFunction.thatReturnsArgument = function (arg) {
  return arg;
};

module.exports = emptyFunction;

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */



/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */

var validateFormat = function validateFormat(format) {};

if (true) {
  validateFormat = function validateFormat(format) {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  };
}

function invariant(condition, format, a, b, c, d, e, f) {
  validateFormat(format);

  if (!condition) {
    var error;
    if (format === undefined) {
      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(format.replace(/%s/g, function () {
        return args[argIndex++];
      }));
      error.name = 'Invariant Violation';
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }
}

module.exports = invariant;

/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright (c) 2014-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */



var emptyFunction = __webpack_require__(6);

/**
 * Similar to invariant but only logs a warning if the condition is not met.
 * This can be used to log issues in development environments in critical
 * paths. Removing the logging code for production environments will keep the
 * same logic and follow the same code paths.
 */

var warning = emptyFunction;

if (true) {
  var printWarning = function printWarning(format) {
    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    var argIndex = 0;
    var message = 'Warning: ' + format.replace(/%s/g, function () {
      return args[argIndex++];
    });
    if (typeof console !== 'undefined') {
      console.error(message);
    }
    try {
      // --- Welcome to debugging React ---
      // This error was thrown as a convenience so that you can use this stack
      // to find the callsite that caused this warning to fire.
      throw new Error(message);
    } catch (x) {}
  };

  warning = function warning(condition, format) {
    if (format === undefined) {
      throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
    }

    if (format.indexOf('Failed Composite propType: ') === 0) {
      return; // Ignore CompositeComponent proptype check.
    }

    if (!condition) {
      for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
        args[_key2 - 2] = arguments[_key2];
      }

      printWarning.apply(undefined, [format].concat(args));
    }
  };
}

module.exports = warning;

/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */



var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';

module.exports = ReactPropTypesSecret;


/***/ }),
/* 10 */
/***/ (function(module, exports) {

var g;

// This works in non-strict mode
g = (function() {
	return this;
})();

try {
	// This works if eval is allowed (see CSP)
	g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
	// This works if the window reference is available
	if(typeof window === "object")
		g = window;
}

// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}

module.exports = g;


/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

var freeGlobal = __webpack_require__(27);

/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;

/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();

module.exports = root;


/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {

var root = __webpack_require__(11);

/** Built-in value references. */
var Symbol = root.Symbol;

module.exports = Symbol;


/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Visible = __webpack_require__(14);

var _Visible2 = _interopRequireDefault(_Visible);

var _style = __webpack_require__(40);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ClearFix = function (_React$Component) {
  _inherits(ClearFix, _React$Component);

  function ClearFix() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ClearFix);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ClearFix.__proto__ || Object.getPrototypeOf(ClearFix)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
      return _react2.default.createElement(
        _Visible2.default,
        {
          xs: _this.props.xs,
          sm: _this.props.sm,
          md: _this.props.md,
          lg: _this.props.lg,
          xl: _this.props.xl
        },
        _react2.default.createElement(
          'div',
          { style: (0, _style.getAfterStyle)() },
          _react2.default.createElement(
            'span',
            { style: (0, _style.getAfterContentStyle)() },
            '\xA0'
          )
        )
      );
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  return ClearFix;
}(_react2.default.Component);

ClearFix.propTypes = {
  /**
   * Show on extra small devices
   */
  xs: _propTypes2.default.bool,
  /**
   * Show on small devices
   */
  sm: _propTypes2.default.bool,
  /**
   * Show on medium devices
   */
  md: _propTypes2.default.bool,
  /**
   * Show on large devices
   */
  lg: _propTypes2.default.bool,
  /**
   * Show on xl devices
   */
  xl: _propTypes2.default.bool
};
ClearFix.defaultProps = {
  xs: false,
  sm: false,
  md: false,
  lg: false,
  xl: false
};
exports.default = ClearFix;

/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = __webpack_require__(0);

var _react2 = _interopRequireDefault(_react);

var _propTypes = __webpack_require__(1);

var _propTypes2 = _interopRequireDefault(_propTypes);

var _throttle = __webpack_require__(3);

var _throttle2 = _interopRequireDefault(_throttle);

var _style = __webpack_require__(39);

var style = _interopRequireWildcard(_style);

var _utils = __webpack_require__(2);

var _RenderAny = __webpack_require__(5);

var _RenderAny2 = _interopRequireDefault(_RenderAny);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window */

var Visible = function (_React$Component) {
  _inherits(Visible, _React$Component);

  function Visible() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Visible);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Visible.__proto__ || Object.getPrototypeOf(Visible)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillMount = function () {
      _this.setScreenClass();
    }, _this.componentDidMount = function () {
      _this.eventListener = (0, _throttle2.default)(_this.setScreenClass, 100);
      window.addEventListener('resize', _this.eventListener);
    }, _this.componentWillUnmount = function () {
      _this.eventListener.cancel();
      window.removeEventListener('resize', _this.eventListener);
    }, _this.setScreenClass = function () {
      _this.setState({ screenClass: (0, _utils.getScreenClass)(_this.context) });
    }, _this.render = function () {
      if (!style.visible({
        screenClass: _this.state.screenClass,
        xs: _this.props.xs,
        sm: _this.props.sm,
        md: _this.props.md,
        lg: _this.props.lg,
        xl: _this.props.xl
      })) return false;
      return _react2.default.createElement(
        _RenderAny2.default,
        null,
        _this.props.children
      );
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  return Visible;
}(_react2.default.Component);

Visible.propTypes = {
  /**
   * Content of the component
   */
  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired,
  /**
   * Show on extra small devices
   */
  xs: _propTypes2.default.bool,
  /**
   * Show on small devices
   */
  sm: _propTypes2.default.bool,
  /**
   * Show on medium devices
   */
  md: _propTypes2.default.bool,
  /**
   * Show on large devices
   */
  lg: _propTypes2.default.bool,
  /**
   * Show on xl devices
   */
  xl: _propTypes2.default.bool
};
Visible.contextTypes = {
  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
};
Visible.defaultProps = {
  xs: false,
  sm: false,
  md: false,
  lg: false,
  xl: false
};
exports.default = Visible;

/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(16);


/***/ }),
/* 16 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_lodash_omit__ = __webpack_require__(22);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_lodash_omit___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_lodash_omit__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_grid_system__ = __webpack_require__(23);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_grid_system___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_react_grid_system__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__index_css__ = __webpack_require__(44);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__index_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__index_css__);
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }



// import { withLeapContainer } from './LeapProvider.js'





function LeapHandData(props) {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    { className: 'hand' },
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      'div',
      { className: 'handLabel' },
      props.name + ' ' + props.selectedData.id
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Direction', name: props.selectedData.id + '.0.direction.',
      x: props.d_x, y: props.d_y, z: props.d_z,
      selectedData: props.selectedData.direction,
      onSelectedDataChange: props.onSelectedDataChange }),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Palm Position', name: props.selectedData.id + '.0.position.',
      x: props.pp_x, y: props.pp_y, z: props.pp_z,
      selectedData: props.selectedData.position,
      onSelectedDataChange: props.onSelectedDataChange }),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Palm Velocity', name: props.selectedData.id + '.0.velocity.',
      x: props.pv_x, y: props.pv_y, z: props.pv_z,
      selectedData: props.selectedData.velocity,
      onSelectedDataChange: props.onSelectedDataChange }),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Palm Normal', name: props.selectedData.id + '.0.normal.',
      x: props.pn_x, y: props.pn_y, z: props.pn_z,
      selectedData: props.selectedData.normal,
      onSelectedDataChange: props.onSelectedDataChange })
  );
}

// const LeapHandDataContainer = connect(state => state)(LeapHandData);

function LeapFingerData(props) {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    { className: 'finger' },
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      'div',
      { className: 'fingerLabel' },
      props.name
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Direction',
      name: props.selectedData.hand + '.' + props.selectedData.id + '.direction.',
      x: props.d_x, y: props.d_y, z: props.d_z,
      selectedData: props.selectedData.direction,
      onSelectedDataChange: props.onSelectedDataChange }),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Tip Position',
      name: props.selectedData.hand + '.' + props.selectedData.id + '.position.',
      x: props.pp_x, y: props.pp_y, z: props.pp_z,
      selectedData: props.selectedData.position,
      onSelectedDataChange: props.onSelectedDataChange }),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_2__FeatureSelector_js__["a" /* default */], { label: 'Tip Velocity',
      name: props.selectedData.hand + '.' + props.selectedData.id + '.velocity.',
      x: props.pv_x, y: props.pv_y, z: props.pv_z,
      selectedData: props.selectedData.velocity,
      onSelectedDataChange: props.onSelectedDataChange })
  );
}

// const LeapFingerDataContainer = connect(state => state)(LeapFingerData);

function LeapHand(props) {

  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Row"],
    null,
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapHandData, { name: 'Hand',
        d_x: props.frameData.direction[0], d_y: props.frameData.direction[1], d_z: props.frameData.direction[2],
        pp_x: props.frameData.palmPosition[0], pp_y: props.frameData.palmPosition[1], pp_z: props.frameData.palmPosition[2],
        pn_x: props.frameData.palmNormal[0], pn_y: props.frameData.palmNormal[1], pn_z: props.frameData.palmNormal[2],
        pv_x: props.frameData.palmVelocity[0], pv_y: props.frameData.palmVelocity[1], pv_z: props.frameData.palmVelocity[2],
        selectedData: props.selectedData,
        onSelectedDataChange: props.onSelectedDataChange })
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapFingerData, { name: 'Fingertip 1',
        d_x: props.frameData.fingers[0].direction[0], d_y: props.frameData.fingers[0].direction[1], d_z: props.frameData.fingers[0].direction[2],
        pp_x: props.frameData.fingers[0].tipPosition[0], pp_y: props.frameData.fingers[0].tipPosition[1], pp_z: props.frameData.fingers[0].tipPosition[2],
        pv_x: props.frameData.fingers[0].tipVelocity[0], pv_y: props.frameData.fingers[0].tipVelocity[0], pv_z: props.frameData.fingers[0].tipVelocity[2],
        selectedData: props.selectedData.finger1,
        onSelectedDataChange: props.onSelectedDataChange })
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapFingerData, { name: 'Fingertip 2',
        d_x: props.frameData.fingers[1].direction[0], d_y: props.frameData.fingers[1].direction[1], d_z: props.frameData.fingers[1].direction[2],
        pp_x: props.frameData.fingers[1].tipPosition[0], pp_y: props.frameData.fingers[1].tipPosition[1], pp_z: props.frameData.fingers[1].tipPosition[2],
        pv_x: props.frameData.fingers[1].tipVelocity[0], pv_y: props.frameData.fingers[1].tipVelocity[1], pv_z: props.frameData.fingers[1].tipVelocity[2],
        selectedData: props.selectedData.finger2,
        onSelectedDataChange: props.onSelectedDataChange })
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapFingerData, { name: 'Fingertip 3',
        d_x: props.frameData.fingers[2].direction[0], d_y: props.frameData.fingers[2].direction[1], d_z: props.frameData.fingers[2].direction[2],
        pp_x: props.frameData.fingers[2].tipPosition[0], pp_y: props.frameData.fingers[2].tipPosition[1], pp_z: props.frameData.fingers[2].tipPosition[2],
        pv_x: props.frameData.fingers[2].tipVelocity[0], pv_y: props.frameData.fingers[2].tipVelocity[1], pv_z: props.frameData.fingers[2].tipVelocity[2],
        selectedData: props.selectedData.finger3,
        onSelectedDataChange: props.onSelectedDataChange })
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapFingerData, { name: 'Fingertip 4',
        d_x: props.frameData.fingers[3].direction[0], d_y: props.frameData.fingers[3].direction[1], d_z: props.frameData.fingers[3].direction[2],
        pp_x: props.frameData.fingers[3].tipPosition[0], pp_y: props.frameData.fingers[3].tipPosition[1], pp_z: props.frameData.fingers[3].tipPosition[2],
        pv_x: props.frameData.fingers[3].tipVelocity[0], pv_y: props.frameData.fingers[3].tipVelocity[1], pv_z: props.frameData.fingers[3].tipVelocity[2],
        selectedData: props.selectedData.finger4,
        onSelectedDataChange: props.onSelectedDataChange })
    ),
    __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
      __WEBPACK_IMPORTED_MODULE_4_react_grid_system__["Col"],
      { sm: 2 },
      __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(LeapFingerData, { name: 'Fingertip 5',
        d_x: props.frameData.fingers[4].direction[0], d_y: props.frameData.fingers[4].direction[1], d_z: props.frameData.fingers[4].direction[2],
        pp_x: props.frameData.fingers[4].tipPosition[0], pp_y: props.frameData.fingers[4].tipPosition[1], pp_z: props.frameData.fingers[4].tipPosition[2],
        pv_x: props.frameData.fingers[4].tipVelocity[0], pv_y: props.frameData.fingers[4].tipVelocity[1], pv_z: props.frameData.fingers[4].tipVelocity[2],
        selectedData: props.selectedData.finger5,
        onSelectedDataChange: props.onSelectedDataChange })
    )
  );
}

// const LeapHandContainer = connect(state => state)(LeapHand);


function format(num) {
  return (Math.floor(num * 100000) / 100000). // slice decimal digits after the 2nd one
  toFixed(4) // format with two decimal places
  .substr(0, 6) // get the leading four characters
  .replace(/\.$/, ''); // remove trailing decimal place separator
}

function getCurrentSelectedFrameValues(props) {

  var listOfSelectedFrameValues = [];

  if (props.frameData.hands && props.frameData.hands.length) {

    if (props.frameData.hands.length === 1) {
      if (props.selectedData.hand1.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].direction[0]);
      if (props.selectedData.hand1.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].direction[1]);
      if (props.selectedData.hand1.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].direction[2]);
      if (props.selectedData.hand1.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].palmPosition[0]);
      if (props.selectedData.hand1.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].palmPosition[1]);
      if (props.selectedData.hand1.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].palmPosition[2]);
      if (props.selectedData.hand1.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].palmVelocity[0]);
      if (props.selectedData.hand1.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].palmVelocity[1]);
      if (props.selectedData.hand1.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].palmVelocity[2]);
      if (props.selectedData.hand1.normal.x) listOfSelectedFrameValues.push(props.frameData.hands[0].palmNormal[0]);
      if (props.selectedData.hand1.normal.y) listOfSelectedFrameValues.push(props.frameData.hands[0].palmNormal[1]);
      if (props.selectedData.hand1.normal.z) listOfSelectedFrameValues.push(props.frameData.hands[0].palmNormal[2]);
      if (props.selectedData.hand1.finger1.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].direction[0]);
      if (props.selectedData.hand1.finger1.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].direction[1]);
      if (props.selectedData.hand1.finger1.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].direction[2]);
      if (props.selectedData.hand1.finger1.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipPosition[0]);
      if (props.selectedData.hand1.finger1.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipPosition[1]);
      if (props.selectedData.hand1.finger1.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipPosition[2]);
      if (props.selectedData.hand1.finger1.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipVelocity[0]);
      if (props.selectedData.hand1.finger1.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipVelocity[1]);
      if (props.selectedData.hand1.finger1.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[0].tipVelocity[2]);
      if (props.selectedData.hand1.finger2.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].direction[0]);
      if (props.selectedData.hand1.finger2.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].direction[1]);
      if (props.selectedData.hand1.finger2.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].direction[2]);
      if (props.selectedData.hand1.finger2.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipPosition[0]);
      if (props.selectedData.hand1.finger2.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipPosition[1]);
      if (props.selectedData.hand1.finger2.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipPosition[2]);
      if (props.selectedData.hand1.finger2.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipVelocity[0]);
      if (props.selectedData.hand1.finger2.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipVelocity[1]);
      if (props.selectedData.hand1.finger2.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[1].tipVelocity[2]);
      if (props.selectedData.hand1.finger3.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].direction[0]);
      if (props.selectedData.hand1.finger3.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].direction[1]);
      if (props.selectedData.hand1.finger3.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].direction[2]);
      if (props.selectedData.hand1.finger3.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipPosition[0]);
      if (props.selectedData.hand1.finger3.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipPosition[1]);
      if (props.selectedData.hand1.finger3.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipPosition[2]);
      if (props.selectedData.hand1.finger3.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipVelocity[0]);
      if (props.selectedData.hand1.finger3.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipVelocity[1]);
      if (props.selectedData.hand1.finger3.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[2].tipVelocity[2]);
      if (props.selectedData.hand1.finger4.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].direction[0]);
      if (props.selectedData.hand1.finger4.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].direction[1]);
      if (props.selectedData.hand1.finger4.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].direction[2]);
      if (props.selectedData.hand1.finger4.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipPosition[0]);
      if (props.selectedData.hand1.finger4.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipPosition[1]);
      if (props.selectedData.hand1.finger4.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipPosition[2]);
      if (props.selectedData.hand1.finger4.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipVelocity[0]);
      if (props.selectedData.hand1.finger4.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipVelocity[1]);
      if (props.selectedData.hand1.finger4.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[3].tipVelocity[2]);
      if (props.selectedData.hand1.finger5.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].direction[0]);
      if (props.selectedData.hand1.finger5.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].direction[1]);
      if (props.selectedData.hand1.finger5.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].direction[2]);
      if (props.selectedData.hand1.finger5.position.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipPosition[0]);
      if (props.selectedData.hand1.finger5.position.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipPosition[1]);
      if (props.selectedData.hand1.finger5.position.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipPosition[2]);
      if (props.selectedData.hand1.finger5.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipVelocity[0]);
      if (props.selectedData.hand1.finger5.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipVelocity[1]);
      if (props.selectedData.hand1.finger5.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[0].fingers[4].tipVelocity[2]);
    }
    if (props.frameData.hands.length === 2) {
      if (props.selectedData.hand2.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].direction[0]);
      if (props.selectedData.hand2.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].direction[1]);
      if (props.selectedData.hand2.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].direction[2]);
      if (props.selectedData.hand2.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].palmPosition[0]);
      if (props.selectedData.hand2.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].palmPosition[1]);
      if (props.selectedData.hand2.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].palmPosition[2]);
      if (props.selectedData.hand2.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[1].palmVelocity[0]);
      if (props.selectedData.hand2.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[1].palmVelocity[1]);
      if (props.selectedData.hand2.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[1].palmVelocity[2]);
      if (props.selectedData.hand2.normal.x) listOfSelectedFrameValues.push(props.frameData.hands[1].palmNormal[0]);
      if (props.selectedData.hand2.normal.y) listOfSelectedFrameValues.push(props.frameData.hands[1].palmNormal[1]);
      if (props.selectedData.hand2.normal.z) listOfSelectedFrameValues.push(props.frameData.hands[1].palmNormal[2]);
      if (props.selectedData.hand2.finger1.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].direction[0]);
      if (props.selectedData.hand2.finger1.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].direction[1]);
      if (props.selectedData.hand2.finger1.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].direction[2]);
      if (props.selectedData.hand2.finger1.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipPosition[0]);
      if (props.selectedData.hand2.finger1.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipPosition[1]);
      if (props.selectedData.hand2.finger1.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipPosition[2]);
      if (props.selectedData.hand2.finger1.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipVelocity[0]);
      if (props.selectedData.hand2.finger1.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipVelocity[1]);
      if (props.selectedData.hand2.finger1.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[0].tipVelocity[2]);
      if (props.selectedData.hand2.finger2.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].direction[0]);
      if (props.selectedData.hand2.finger2.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].direction[1]);
      if (props.selectedData.hand2.finger2.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].direction[2]);
      if (props.selectedData.hand2.finger2.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipPosition[0]);
      if (props.selectedData.hand2.finger2.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipPosition[1]);
      if (props.selectedData.hand2.finger2.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipPosition[2]);
      if (props.selectedData.hand2.finger2.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipVelocity[0]);
      if (props.selectedData.hand2.finger2.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipVelocity[1]);
      if (props.selectedData.hand2.finger2.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[1].tipVelocity[2]);
      if (props.selectedData.hand2.finger3.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].direction[0]);
      if (props.selectedData.hand2.finger3.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].direction[1]);
      if (props.selectedData.hand2.finger3.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].direction[2]);
      if (props.selectedData.hand2.finger3.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipPosition[0]);
      if (props.selectedData.hand2.finger3.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipPosition[1]);
      if (props.selectedData.hand2.finger3.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipPosition[2]);
      if (props.selectedData.hand2.finger3.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipVelocity[0]);
      if (props.selectedData.hand2.finger3.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipVelocity[1]);
      if (props.selectedData.hand2.finger3.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[2].tipVelocity[2]);
      if (props.selectedData.hand2.finger4.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].direction[0]);
      if (props.selectedData.hand2.finger4.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].direction[1]);
      if (props.selectedData.hand2.finger4.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].direction[2]);
      if (props.selectedData.hand2.finger4.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipPosition[0]);
      if (props.selectedData.hand2.finger4.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipPosition[1]);
      if (props.selectedData.hand2.finger4.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipPosition[2]);
      if (props.selectedData.hand2.finger4.velocity.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipVelocity[0]);
      if (props.selectedData.hand2.finger4.velocity.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipVelocity[1]);
      if (props.selectedData.hand2.finger4.velocity.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[3].tipVelocity[2]);
      if (props.selectedData.hand2.finger5.direction.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].direction[0]);
      if (props.selectedData.hand2.finger5.direction.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].direction[1]);
      if (props.selectedData.hand2.finger5.direction.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].direction[2]);
      if (props.selectedData.hand2.finger5.position.x) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].tipPosition[0]);
      if (props.selectedData.hand2.finger5.position.y) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].tipPosition[1]);
      if (props.selectedData.hand2.finger5.position.z) listOfSelectedFrameValues.push(props.frameData.hands[1].fingers[4].tipPosition[2]);
      if (props.selectedData