react-mapfilter
Version:
A React Component for viewing and filtering GeoJSON
190 lines (149 loc) • 7.18 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Grid = require('react-virtualized/dist/commonjs/Grid/Grid');
var _Grid2 = _interopRequireDefault(_Grid);
var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');
var _AutoSizer2 = _interopRequireDefault(_AutoSizer);
var _getScrollbarWidth = require('get-scrollbar-width');
var _getScrollbarWidth2 = _interopRequireDefault(_getScrollbarWidth);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _reactRedux = require('react-redux');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
require('insert-css')('.ReactVirtualized__Table__headerRow{font-weight:700;text-transform:uppercase;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__headerTruncatedText{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn{margin-right:10px;min-width:0px;}.ReactVirtualized__Table__rowColumn{text-overflow:ellipsis;white-space:nowrap;}.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type{margin-left:10px;}.ReactVirtualized__Table__sortableHeaderColumn{cursor:pointer;}.ReactVirtualized__Table__sortableHeaderIconContainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.ReactVirtualized__Table__sortableHeaderIcon{-webkit-box-flex:0;-ms-flex:0 0 24px;flex:0 0 24px;height:1em;width:1em;fill:currentColor;}');
var pixelRatio = window.devicePixelRatio || 1;
var styles = {
image: {
border: '1px solid white',
boxSizing: 'border-box',
display: 'block',
height: '100%',
objectFit: 'cover',
width: '100%',
cursor: 'pointer',
backgroundColor: 'rgb(240, 240, 240)'
}
};
var grid = null;
var ImageGrid = function (_React$Component) {
(0, _inherits3.default)(ImageGrid, _React$Component);
function ImageGrid() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, ImageGrid);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ImageGrid.__proto__ || (0, _getPrototypeOf2.default)(ImageGrid)).call.apply(_ref, [this].concat(args))), _this), _this._renderCell = function (width, _ref2) {
var columnIndex = _ref2.columnIndex,
rowIndex = _ref2.rowIndex,
key = _ref2.key,
style = _ref2.style;
var _this$props = _this.props,
images = _this$props.images,
thumbSize = _this$props.thumbSize,
resizer = _this$props.resizer;
var columnsCount = Math.floor(width / thumbSize);
var image = images[rowIndex * columnsCount + columnIndex];
if (!image) return;
var imgSize = thumbSize * pixelRatio;
var imageUrl = resizer(image.url, imgSize);
return _react2.default.createElement('img', {
src: imageUrl,
key: key,
style: (0, _objectAssign2.default)({}, styles.image, style),
onClick: function onClick() {
return _this.handleImageClick(image.featureId);
}
});
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(ImageGrid, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.scrollbarWidth = (0, _getScrollbarWidth2.default)();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.images !== nextProps.images) {
grid && grid.recomputeGridSize();
}
}
}, {
key: 'handleImageClick',
value: function handleImageClick(featureId) {
this.props.onImageClick(featureId);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
images = _props.images,
thumbSize = _props.thumbSize;
return _react2.default.createElement(
'div',
{ style: { width: '100%', height: '100%', position: 'absolute' } },
_react2.default.createElement(
_AutoSizer2.default,
null,
function (_ref3) {
var height = _ref3.height,
width = _ref3.width;
var columnsCount = Math.floor(width / thumbSize);
var rowsCount = Math.ceil(images.length / columnsCount);
var cellSize = width / columnsCount;
var overflow = cellSize * rowsCount > height;
if (overflow && _this2.scrollbarWidth) {
cellSize = (width - _this2.scrollbarWidth) / columnsCount;
}
return _react2.default.createElement(_Grid2.default, {
ref: function ref(inst) {
grid = inst;
},
columnCount: columnsCount,
columnWidth: cellSize,
height: height,
cellRenderer: function cellRenderer(d) {
return _this2._renderCell(width, d);
},
rowCount: rowsCount,
rowHeight: cellSize,
width: width
});
}
)
);
}
}]);
return ImageGrid;
}(_react2.default.Component);
ImageGrid.propTypes = {
images: _propTypes2.default.array.isRequired,
thumbSize: _propTypes2.default.number.isRequired,
onImageClick: _propTypes2.default.func
};
ImageGrid.defaultProps = {
thumbSize: 200
};
exports.default = (0, _reactRedux.connect)(function (state) {
return { resizer: state.resizer };
})(ImageGrid);
//# sourceMappingURL=ImageGrid.js.map