kepler.gl.geoiq

Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
95 lines (71 loc) • 9.87 kB
JavaScript
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _d3Array = require("d3-array");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _colorUtils = require("../../../utils/color-utils");

var _colorPalette = require("../../../constants/color-palette");

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  height: ", ";\n  border-width: 1px;\n  border-style: solid;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  justify-content: space-between;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 12px;\n\n  :hover {\n    cursor: pointer;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var propTypes = {
  onSelectColor: _propTypes["default"].func.isRequired,
  // hex value
  selectedColor: _propTypes["default"].string.isRequired
};
var PALETTE_HEIGHT = '8px';
var ROWS = 16;

var StyledColorPalette = _styledComponents["default"].div(_templateObject());

var StyledColorColumn = _styledComponents["default"].div(_templateObject2());

var StyledColorBlock = _styledComponents["default"].div(_templateObject3(), PALETTE_HEIGHT);

var SingleColorPalette = function SingleColorPalette(_ref) {
  var selectedColor = _ref.selectedColor,
      onSelectColor = _ref.onSelectColor;
  return _react["default"].createElement(StyledColorPalette, {
    className: "single-color-palette"
  }, _colorPalette.Themes.map(function (theme, col) {
    return _react["default"].createElement(StyledColorColumn, {
      key: theme
    }, (0, _d3Array.range)(1, ROWS + 1, 1).map(function (key, i) {
      return _react["default"].createElement(StyledColorBlock, {
        style: {
          backgroundColor: _colorPalette.ColorsByTheme[theme][String(key)],
          borderColor: selectedColor === _colorPalette.ColorsByTheme[theme][String(key)].toUpperCase() ? 'white' : _colorPalette.ColorsByTheme[theme][String(key)]
        },
        key: "".concat(theme, "_").concat(key),
        selected: selectedColor === _colorPalette.ColorsByTheme[theme][String(key)].toUpperCase(),
        onClick: function onClick(e) {
          return onSelectColor((0, _colorUtils.hexToRgb)(_colorPalette.ColorsByTheme[theme][String(key)]), e);
        }
      });
    }));
  }));
};

SingleColorPalette.propTypes = propTypes;
var _default = SingleColorPalette;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3NpZGUtcGFuZWwvd2lkZ2V0LXBhbmVsL3NpbmdsZS1jb2xvci1wYWxldHRlLmpzIl0sIm5hbWVzIjpbInByb3BUeXBlcyIsIm9uU2VsZWN0Q29sb3IiLCJQcm9wVHlwZXMiLCJmdW5jIiwiaXNSZXF1aXJlZCIsInNlbGVjdGVkQ29sb3IiLCJzdHJpbmciLCJQQUxFVFRFX0hFSUdIVCIsIlJPV1MiLCJTdHlsZWRDb2xvclBhbGV0dGUiLCJzdHlsZWQiLCJkaXYiLCJTdHlsZWRDb2xvckNvbHVtbiIsIlN0eWxlZENvbG9yQmxvY2siLCJTaW5nbGVDb2xvclBhbGV0dGUiLCJUaGVtZXMiLCJtYXAiLCJ0aGVtZSIsImNvbCIsImtleSIsImkiLCJiYWNrZ3JvdW5kQ29sb3IiLCJDb2xvcnNCeVRoZW1lIiwiU3RyaW5nIiwiYm9yZGVyQ29sb3IiLCJ0b1VwcGVyQ2FzZSIsImUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBb0JBOztBQUNBOztBQUNBOztBQUNBOztBQUNBOztBQUVBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVBLElBQU1BLFNBQVMsR0FBRztBQUNoQkMsRUFBQUEsYUFBYSxFQUFFQyxzQkFBVUMsSUFBVixDQUFlQyxVQURkO0FBRWhCO0FBQ0FDLEVBQUFBLGFBQWEsRUFBRUgsc0JBQVVJLE1BQVYsQ0FBaUJGO0FBSGhCLENBQWxCO0FBTUEsSUFBTUcsY0FBYyxHQUFHLEtBQXZCO0FBQ0EsSUFBTUMsSUFBSSxHQUFHLEVBQWI7O0FBRUEsSUFBTUMsa0JBQWtCLEdBQUdDLDZCQUFPQyxHQUFWLG1CQUF4Qjs7QUFXQSxJQUFNQyxpQkFBaUIsR0FBR0YsNkJBQU9DLEdBQVYsb0JBQXZCOztBQU9BLElBQU1FLGdCQUFnQixHQUFHSCw2QkFBT0MsR0FBVixxQkFFVkosY0FGVSxDQUF0Qjs7QUFPQSxJQUFNTyxrQkFBa0IsR0FBRyxTQUFyQkEsa0JBQXFCO0FBQUEsTUFBRVQsYUFBRixRQUFFQSxhQUFGO0FBQUEsTUFBaUJKLGFBQWpCLFFBQWlCQSxhQUFqQjtBQUFBLFNBQ3pCLGdDQUFDLGtCQUFEO0FBQW9CLElBQUEsU0FBUyxFQUFDO0FBQTlCLEtBQ0djLHFCQUFPQyxHQUFQLENBQVcsVUFBQ0MsS0FBRCxFQUFRQyxHQUFSO0FBQUEsV0FDVixnQ0FBQyxpQkFBRDtBQUFtQixNQUFBLEdBQUcsRUFBRUQ7QUFBeEIsT0FDRyxvQkFBTSxDQUFOLEVBQVNULElBQUksR0FBRyxDQUFoQixFQUFtQixDQUFuQixFQUFzQlEsR0FBdEIsQ0FBMEIsVUFBQ0csR0FBRCxFQUFNQyxDQUFOO0FBQUEsYUFDekIsZ0NBQUMsZ0JBQUQ7QUFDRSxRQUFBLEtBQUssRUFBRTtBQUNMQyxVQUFBQSxlQUFlLEVBQUVDLDRCQUFjTCxLQUFkLEVBQXFCTSxNQUFNLENBQUNKLEdBQUQsQ0FBM0IsQ0FEWjtBQUVMSyxVQUFBQSxXQUFXLEVBQ1RuQixhQUFhLEtBQ2JpQiw0QkFBY0wsS0FBZCxFQUFxQk0sTUFBTSxDQUFDSixHQUFELENBQTNCLEVBQWtDTSxXQUFsQyxFQURBLEdBRUksT0FGSixHQUdJSCw0QkFBY0wsS0FBZCxFQUFxQk0sTUFBTSxDQUFDSixHQUFELENBQTNCO0FBTkQsU0FEVDtBQVNFLFFBQUEsR0FBRyxZQUFLRixLQUFMLGNBQWNFLEdBQWQsQ0FUTDtBQVVFLFFBQUEsUUFBUSxFQUNOZCxhQUFhLEtBQUtpQiw0QkFBY0wsS0FBZCxFQUFxQk0sTUFBTSxDQUFDSixHQUFELENBQTNCLEVBQWtDTSxXQUFsQyxFQVh0QjtBQWFFLFFBQUEsT0FBTyxFQUFFLGlCQUFBQyxDQUFDO0FBQUEsaUJBQ1J6QixhQUFhLENBQUMsMEJBQVNxQiw0QkFBY0wsS0FBZCxFQUFxQk0sTUFBTSxDQUFDSixHQUFELENBQTNCLENBQVQsQ0FBRCxFQUE4Q08sQ0FBOUMsQ0FETDtBQUFBO0FBYlosUUFEeUI7QUFBQSxLQUExQixDQURILENBRFU7QUFBQSxHQUFYLENBREgsQ0FEeUI7QUFBQSxDQUEzQjs7QUE0QkFaLGtCQUFrQixDQUFDZCxTQUFuQixHQUErQkEsU0FBL0I7ZUFFZWMsa0IiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBDb3B5cmlnaHQgKGMpIDIwMTkgVWJlciBUZWNobm9sb2dpZXMsIEluYy5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4vLyBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzXG4vLyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsXG4vLyBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7cmFuZ2V9IGZyb20gJ2QzLWFycmF5JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IHtoZXhUb1JnYn0gZnJvbSAndXRpbHMvY29sb3ItdXRpbHMnO1xuXG5pbXBvcnQge0NvbG9yc0J5VGhlbWUsIFRoZW1lc30gZnJvbSAnY29uc3RhbnRzL2NvbG9yLXBhbGV0dGUnO1xuXG5jb25zdCBwcm9wVHlwZXMgPSB7XG4gIG9uU2VsZWN0Q29sb3I6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG4gIC8vIGhleCB2YWx1ZVxuICBzZWxlY3RlZENvbG9yOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWRcbn07XG5cbmNvbnN0IFBBTEVUVEVfSEVJR0hUID0gJzhweCc7XG5jb25zdCBST1dTID0gMTY7XG5cbmNvbnN0IFN0eWxlZENvbG9yUGFsZXR0ZSA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMTJweDtcblxuICA6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkQ29sb3JDb2x1bW4gPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbmA7XG5cbmNvbnN0IFN0eWxlZENvbG9yQmxvY2sgPSBzdHlsZWQuZGl2YFxuICBmbGV4LWdyb3c6IDE7XG4gIGhlaWdodDogJHtQQUxFVFRFX0hFSUdIVH07XG4gIGJvcmRlci13aWR0aDogMXB4O1xuICBib3JkZXItc3R5bGU6IHNvbGlkO1xuYDtcblxuY29uc3QgU2luZ2xlQ29sb3JQYWxldHRlID0gKHtzZWxlY3RlZENvbG9yLCBvblNlbGVjdENvbG9yfSkgPT4gKFxuICA8U3R5bGVkQ29sb3JQYWxldHRlIGNsYXNzTmFtZT1cInNpbmdsZS1jb2xvci1wYWxldHRlXCI+XG4gICAge1RoZW1lcy5tYXAoKHRoZW1lLCBjb2wpID0+IChcbiAgICAgIDxTdHlsZWRDb2xvckNvbHVtbiBrZXk9e3RoZW1lfT5cbiAgICAgICAge3JhbmdlKDEsIFJPV1MgKyAxLCAxKS5tYXAoKGtleSwgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRDb2xvckJsb2NrXG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IENvbG9yc0J5VGhlbWVbdGhlbWVdW1N0cmluZyhrZXkpXSxcbiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgICAgICAgICAgc2VsZWN0ZWRDb2xvciA9PT1cbiAgICAgICAgICAgICAgICBDb2xvcnNCeVRoZW1lW3RoZW1lXVtTdHJpbmcoa2V5KV0udG9VcHBlckNhc2UoKVxuICAgICAgICAgICAgICAgICAgPyAnd2hpdGUnXG4gICAgICAgICAgICAgICAgICA6IENvbG9yc0J5VGhlbWVbdGhlbWVdW1N0cmluZyhrZXkpXVxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIGtleT17YCR7dGhlbWV9XyR7a2V5fWB9XG4gICAgICAgICAgICBzZWxlY3RlZD17XG4gICAgICAgICAgICAgIHNlbGVjdGVkQ29sb3IgPT09IENvbG9yc0J5VGhlbWVbdGhlbWVdW1N0cmluZyhrZXkpXS50b1VwcGVyQ2FzZSgpXG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBvbkNsaWNrPXtlID0+XG4gICAgICAgICAgICAgIG9uU2VsZWN0Q29sb3IoaGV4VG9SZ2IoQ29sb3JzQnlUaGVtZVt0aGVtZV1bU3RyaW5nKGtleSldKSwgZSlcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgIDwvU3R5bGVkQ29sb3JDb2x1bW4+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29sb3JQYWxldHRlPlxuKTtcblxuU2luZ2xlQ29sb3JQYWxldHRlLnByb3BUeXBlcyA9IHByb3BUeXBlcztcblxuZXhwb3J0IGRlZmF1bHQgU2luZ2xlQ29sb3JQYWxldHRlO1xuIl19