Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

250 rader
9.3 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.FlexibleXYPlot = exports.FlexibleHeightXYPlot = exports.FlexibleWidthXYPlot = undefined;
  6. var _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; };
  7. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8. exports.makeHeightFlexible = makeHeightFlexible;
  9. exports.makeVisFlexible = makeVisFlexible;
  10. exports.makeWidthFlexible = makeWidthFlexible;
  11. var _react = require('react');
  12. var _react2 = _interopRequireDefault(_react);
  13. var _window = require('global/window');
  14. var _window2 = _interopRequireDefault(_window);
  15. var _xyPlot = require('./plot/xy-plot');
  16. var _xyPlot2 = _interopRequireDefault(_xyPlot);
  17. var _reactUtils = require('./utils/react-utils');
  18. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  19. 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; }
  20. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  21. 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; }
  22. 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; } // Copyright (c) 2016 - 2017 Uber Technologies, Inc.
  23. //
  24. // Permission is hereby granted, free of charge, to any person obtaining a copy
  25. // of this software and associated documentation files (the "Software"), to deal
  26. // in the Software without restriction, including without limitation the rights
  27. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  28. // copies of the Software, and to permit persons to whom the Software is
  29. // furnished to do so, subject to the following conditions:
  30. //
  31. // The above copyright notice and this permission notice shall be included in
  32. // all copies or substantial portions of the Software.
  33. //
  34. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  35. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  36. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  37. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  38. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  39. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  40. // THE SOFTWARE.
  41. var CONTAINER_REF = 'container';
  42. // As a performance enhancement, we want to only listen once
  43. var resizeSubscribers = [];
  44. var DEBOUNCE_DURATION = 100;
  45. var timeoutId = null;
  46. /**
  47. * Calls each subscriber, debounced to the
  48. */
  49. function debounceEmitResize() {
  50. _window2.default.clearTimeout(timeoutId);
  51. timeoutId = _window2.default.setTimeout(emitResize, DEBOUNCE_DURATION);
  52. }
  53. /**
  54. * Calls each subscriber once syncronously.
  55. */
  56. function emitResize() {
  57. resizeSubscribers.forEach(function (cb) {
  58. return cb();
  59. });
  60. }
  61. /**
  62. * Add the given callback to the list of subscribers to be caled when the
  63. * window resizes. Returns a function that, when called, removes the given
  64. * callback from the list of subscribers. This function is also resposible for
  65. * adding and removing the resize listener on `window`.
  66. *
  67. * @param {Function} cb - Subscriber callback function
  68. * @returns {Function} Unsubscribe function
  69. */
  70. function subscribeToDebouncedResize(cb) {
  71. resizeSubscribers.push(cb);
  72. // if we go from zero to one Flexible components instances, add the listener
  73. if (resizeSubscribers.length === 1) {
  74. _window2.default.addEventListener('resize', debounceEmitResize);
  75. }
  76. return function unsubscribe() {
  77. removeSubscriber(cb);
  78. // if we have no Flexible components, remove the listener
  79. if (resizeSubscribers.length === 0) {
  80. _window2.default.clearTimeout(timeoutId);
  81. _window2.default.removeEventListener('resize', debounceEmitResize);
  82. }
  83. };
  84. }
  85. /**
  86. * Helper for removing the given callback from the list of subscribers.
  87. *
  88. * @param {Function} cb - Subscriber callback function
  89. */
  90. function removeSubscriber(cb) {
  91. var index = resizeSubscribers.indexOf(cb);
  92. if (index > -1) {
  93. resizeSubscribers.splice(index, 1);
  94. }
  95. }
  96. /**
  97. * Helper for getting a display name for the child component
  98. * @param {*} Component React class for the child component.
  99. * @returns {String} The child components name
  100. */
  101. function getDisplayName(Component) {
  102. return Component.displayName || Component.name || 'Component';
  103. }
  104. /**
  105. * Add the ability to stretch the visualization on window resize.
  106. * @param {*} Component React class for the child component.
  107. * @returns {*} Flexible component.
  108. */
  109. function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
  110. var ResultClass = function (_React$Component) {
  111. _inherits(ResultClass, _React$Component);
  112. _createClass(ResultClass, null, [{
  113. key: 'propTypes',
  114. get: function get() {
  115. var _Component$propTypes = Component.propTypes,
  116. height = _Component$propTypes.height,
  117. width = _Component$propTypes.width,
  118. otherPropTypes = _objectWithoutProperties(_Component$propTypes, ['height', 'width']); // eslint-disable-line no-unused-vars
  119. return otherPropTypes;
  120. }
  121. }]);
  122. function ResultClass(props) {
  123. _classCallCheck(this, ResultClass);
  124. var _this = _possibleConstructorReturn(this, (ResultClass.__proto__ || Object.getPrototypeOf(ResultClass)).call(this, props));
  125. _this._onResize = function () {
  126. var containerElement = (0, _reactUtils.getDOMNode)(_this[CONTAINER_REF]);
  127. var offsetHeight = containerElement.offsetHeight,
  128. offsetWidth = containerElement.offsetWidth;
  129. var newHeight = _this.state.height === offsetHeight ? {} : { height: offsetHeight };
  130. var newWidth = _this.state.width === offsetWidth ? {} : { width: offsetWidth };
  131. _this.setState(_extends({}, newHeight, newWidth));
  132. };
  133. _this.state = {
  134. height: 0,
  135. width: 0
  136. };
  137. return _this;
  138. }
  139. /**
  140. * Get the width of the container and assign the width.
  141. * @private
  142. */
  143. _createClass(ResultClass, [{
  144. key: 'componentDidMount',
  145. value: function componentDidMount() {
  146. this._onResize();
  147. this.cancelSubscription = subscribeToDebouncedResize(this._onResize);
  148. }
  149. }, {
  150. key: 'componentWillReceiveProps',
  151. value: function componentWillReceiveProps() {
  152. this._onResize();
  153. }
  154. }, {
  155. key: 'componentWillUnmount',
  156. value: function componentWillUnmount() {
  157. this.cancelSubscription();
  158. }
  159. }, {
  160. key: 'render',
  161. value: function render() {
  162. var _this2 = this;
  163. var _state = this.state,
  164. height = _state.height,
  165. width = _state.width;
  166. var props = _extends({}, this.props, {
  167. animation: height === 0 && width === 0 ? null : this.props.animation
  168. });
  169. var updatedDimensions = _extends({}, isHeightFlexible ? { height: height } : {}, isWidthFlexible ? { width: width } : {});
  170. return _react2.default.createElement(
  171. 'div',
  172. {
  173. ref: function ref(_ref) {
  174. return _this2[CONTAINER_REF] = _ref;
  175. },
  176. style: { width: '100%', height: '100%' }
  177. },
  178. _react2.default.createElement(Component, _extends({}, updatedDimensions, props))
  179. );
  180. }
  181. }]);
  182. return ResultClass;
  183. }(_react2.default.Component);
  184. ResultClass.displayName = 'Flexible' + getDisplayName(Component);
  185. return ResultClass;
  186. }
  187. function makeHeightFlexible(component) {
  188. return makeFlexible(component, false, true);
  189. }
  190. function makeVisFlexible(component) {
  191. return makeFlexible(component, true, true);
  192. }
  193. function makeWidthFlexible(component) {
  194. return makeFlexible(component, true, false);
  195. }
  196. var FlexibleWidthXYPlot = exports.FlexibleWidthXYPlot = makeWidthFlexible(_xyPlot2.default);
  197. var FlexibleHeightXYPlot = exports.FlexibleHeightXYPlot = makeHeightFlexible(_xyPlot2.default);
  198. var FlexibleXYPlot = exports.FlexibleXYPlot = makeVisFlexible(_xyPlot2.default);