kepler.gl.geoiq

Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
72 lines (55 loc) • 9.79 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");

var _templateObject, _templateObject2, _templateObject3;

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

var StyledColorPalette = _styledComponents["default"].div(_templateObject || (_templateObject = (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"])));

var StyledColorColumn = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  justify-content: space-between;\n"])));

var StyledColorBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  height: ", ";\n  border-width: 1px;\n  border-style: solid;\n"])), PALETTE_HEIGHT);

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

SingleColorPalette.propTypes = propTypes;

var _default = exports["default"] = SingleColorPalette;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3NpZGUtcGFuZWwvbGF5ZXItcGFuZWwvc2luZ2xlLWNvbG9yLXBhbGV0dGUuanMiXSwibmFtZXMiOlsicHJvcFR5cGVzIiwib25TZWxlY3RDb2xvciIsIlByb3BUeXBlcyIsImZ1bmMiLCJpc1JlcXVpcmVkIiwic2VsZWN0ZWRDb2xvciIsInN0cmluZyIsIlBBTEVUVEVfSEVJR0hUIiwiUk9XUyIsIlN0eWxlZENvbG9yUGFsZXR0ZSIsInN0eWxlZCIsImRpdiIsIlN0eWxlZENvbG9yQ29sdW1uIiwiU3R5bGVkQ29sb3JCbG9jayIsIlNpbmdsZUNvbG9yUGFsZXR0ZSIsIlRoZW1lcyIsIm1hcCIsInRoZW1lIiwiY29sIiwia2V5IiwiaSIsImJhY2tncm91bmRDb2xvciIsIkNvbG9yc0J5VGhlbWUiLCJib3JkZXJDb2xvciIsInRvVXBwZXJDYXNlIiwiZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFvQkE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBRUE7Ozs7QUFFQSxJQUFNQSxTQUFTLEdBQUc7QUFDaEJDLEVBQUFBLGFBQWEsRUFBRUMsc0JBQVVDLElBQVYsQ0FBZUMsVUFEZDtBQUVoQjtBQUNBQyxFQUFBQSxhQUFhLEVBQUVILHNCQUFVSSxNQUFWLENBQWlCRjtBQUhoQixDQUFsQjtBQU1BLElBQU1HLGNBQWMsR0FBRyxLQUF2QjtBQUNBLElBQU1DLElBQUksR0FBRyxFQUFiOztBQUVBLElBQU1DLGtCQUFrQixHQUFHQyw2QkFBT0MsR0FBVixnT0FBeEI7O0FBV0EsSUFBTUMsaUJBQWlCLEdBQUdGLDZCQUFPQyxHQUFWLDJMQUF2Qjs7QUFPQSxJQUFNRSxnQkFBZ0IsR0FBR0gsNkJBQU9DLEdBQVYsMktBRVZKLGNBRlUsQ0FBdEI7O0FBT0EsSUFBTU8sa0JBQWtCLEdBQUcsU0FBckJBLGtCQUFxQjtBQUFBLE1BQUVULGFBQUYsUUFBRUEsYUFBRjtBQUFBLE1BQWlCSixhQUFqQixRQUFpQkEsYUFBakI7QUFBQSx1QkFDekIsZ0NBQUMsa0JBQUQ7QUFBb0IsTUFBQSxTQUFTLEVBQUM7QUFBOUIsT0FDR2MscUJBQU9DLEdBQVAsQ0FBVyxVQUFDQyxLQUFELEVBQVFDLEdBQVI7QUFBQSwyQkFDVixnQ0FBQyxpQkFBRDtBQUFtQixVQUFBLEdBQUcsRUFBRUQsS0FBeEI7QUFBK0IsVUFBQSxTQUFTLEVBQUM7QUFBekMsV0FDRyxvQkFBTSxDQUFOLEVBQVNULElBQUksR0FBRyxDQUFoQixFQUFtQixDQUFuQixFQUFzQlEsR0FBdEIsQ0FBMEIsVUFBQ0csR0FBRCxFQUFNQyxDQUFOO0FBQUEsK0JBQ3pCLGdDQUFDLGdCQUFEO0FBQ0UsY0FBQSxTQUFTLEVBQUMsNkJBRFo7QUFFRSxjQUFBLEtBQUssRUFBRTtBQUNMQyxnQkFBQUEsZUFBZSxFQUFFQyw0QkFBY0wsS0FBZCxFQUFxQkUsR0FBckIsQ0FEWjtBQUVMSSxnQkFBQUEsV0FBVyxFQUNUbEIsYUFBYSxLQUNiaUIsNEJBQWNMLEtBQWQsRUFBcUJFLEdBQXJCLEVBQTBCSyxXQUExQixFQURBLEdBRUksT0FGSixHQUdJRiw0QkFBY0wsS0FBZCxFQUFxQkUsR0FBckI7QUFORCxlQUZUO0FBVUUsY0FBQSxHQUFHLFlBQUtGLEtBQUwsY0FBY0UsR0FBZCxDQVZMO0FBV0UsY0FBQSxRQUFRLEVBQ05kLGFBQWEsS0FBS2lCLDRCQUFjTCxLQUFkLEVBQXFCRSxHQUFyQixFQUEwQkssV0FBMUIsRUFadEI7QUFjRSxjQUFBLE9BQU8sRUFBRSxpQkFBQUMsQ0FBQztBQUFBLHVCQUNSeEIsYUFBYSxDQUFDLDBCQUFTcUIsNEJBQWNMLEtBQWQsRUFBcUJFLEdBQXJCLENBQVQsQ0FBRCxFQUFzQ00sQ0FBdEMsQ0FETDtBQUFBO0FBZFo7QUFEeUI7QUFBQSxTQUExQixDQURIO0FBRFU7QUFBQSxLQUFYLENBREg7QUFEeUI7QUFBQSxDQUEzQjs7QUE2QkFYLGtCQUFrQixDQUFDZCxTQUFuQixHQUErQkEsU0FBL0I7O29DQUVlYyxrQiIsInNvdXJjZXNDb250ZW50IjpbIi8vIENvcHlyaWdodCAoYykgMjAyMyBVYmVyIFRlY2hub2xvZ2llcywgSW5jLlxuLy9cbi8vIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbi8vIG9mIHRoaXMgc29mdHdhcmUgYW5kIGFzc29jaWF0ZWQgZG9jdW1lbnRhdGlvbiBmaWxlcyAodGhlIFwiU29mdHdhcmVcIiksIHRvIGRlYWxcbi8vIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZSByaWdodHNcbi8vIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yIHNlbGxcbi8vIGNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpc1xuLy8gZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczpcbi8vXG4vLyBUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpblxuLy8gYWxsIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4vL1xuLy8gVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuLy8gSU1QTElFRCwgSU5DTFVESU5HIEJVVCBOT1QgTElNSVRFRCBUTyBUSEUgV0FSUkFOVElFUyBPRiBNRVJDSEFOVEFCSUxJVFksXG4vLyBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEVcbi8vIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbi8vIExJQUJJTElUWSwgV0hFVEhFUiBJTiBBTiBBQ1RJT04gT0YgQ09OVFJBQ1QsIFRPUlQgT1IgT1RIRVJXSVNFLCBBUklTSU5HIEZST00sXG4vLyBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOXG4vLyBUSEUgU09GVFdBUkUuXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHtyYW5nZX0gZnJvbSAnZDMtYXJyYXknO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQge2hleFRvUmdifSBmcm9tICd1dGlscy9jb2xvci11dGlscyc7XG5cbmltcG9ydCB7Q29sb3JzQnlUaGVtZSwgVGhlbWVzfSBmcm9tICdjb25zdGFudHMvY29sb3ItcGFsZXR0ZSc7XG5cbmNvbnN0IHByb3BUeXBlcyA9IHtcbiAgb25TZWxlY3RDb2xvcjogUHJvcFR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcbiAgLy8gaGV4IHZhbHVlXG4gIHNlbGVjdGVkQ29sb3I6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZFxufTtcblxuY29uc3QgUEFMRVRURV9IRUlHSFQgPSAnOHB4JztcbmNvbnN0IFJPV1MgPSAyMjtcblxuY29uc3QgU3R5bGVkQ29sb3JQYWxldHRlID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBwYWRkaW5nOiAxMnB4O1xuXG4gIDpob3ZlciB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRDb2xvckNvbHVtbiA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuYDtcblxuY29uc3QgU3R5bGVkQ29sb3JCbG9jayA9IHN0eWxlZC5kaXZgXG4gIGZsZXgtZ3JvdzogMTtcbiAgaGVpZ2h0OiAke1BBTEVUVEVfSEVJR0hUfTtcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG5gO1xuXG5jb25zdCBTaW5nbGVDb2xvclBhbGV0dGUgPSAoe3NlbGVjdGVkQ29sb3IsIG9uU2VsZWN0Q29sb3J9KSA9PiAoXG4gIDxTdHlsZWRDb2xvclBhbGV0dGUgY2xhc3NOYW1lPVwic2luZ2xlLWNvbG9yLXBhbGV0dGVcIj5cbiAgICB7VGhlbWVzLm1hcCgodGhlbWUsIGNvbCkgPT4gKFxuICAgICAgPFN0eWxlZENvbG9yQ29sdW1uIGtleT17dGhlbWV9IGNsYXNzTmFtZT1cInNpbmdsZS1jb2xvci1wYWxldHRlX19jb2x1bW5cIj5cbiAgICAgICAge3JhbmdlKDEsIFJPV1MgKyAxLCAxKS5tYXAoKGtleSwgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRDb2xvckJsb2NrXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJzaW5nbGUtY29sb3ItcGFsZXR0ZV9fYmxvY2tcIlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBDb2xvcnNCeVRoZW1lW3RoZW1lXVtrZXldLFxuICAgICAgICAgICAgICBib3JkZXJDb2xvcjpcbiAgICAgICAgICAgICAgICBzZWxlY3RlZENvbG9yID09PVxuICAgICAgICAgICAgICAgIENvbG9yc0J5VGhlbWVbdGhlbWVdW2tleV0udG9VcHBlckNhc2UoKVxuICAgICAgICAgICAgICAgICAgPyAnd2hpdGUnXG4gICAgICAgICAgICAgICAgICA6IENvbG9yc0J5VGhlbWVbdGhlbWVdW2tleV1cbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICBrZXk9e2Ake3RoZW1lfV8ke2tleX1gfVxuICAgICAgICAgICAgc2VsZWN0ZWQ9e1xuICAgICAgICAgICAgICBzZWxlY3RlZENvbG9yID09PSBDb2xvcnNCeVRoZW1lW3RoZW1lXVtrZXldLnRvVXBwZXJDYXNlKClcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIG9uQ2xpY2s9e2UgPT5cbiAgICAgICAgICAgICAgb25TZWxlY3RDb2xvcihoZXhUb1JnYihDb2xvcnNCeVRoZW1lW3RoZW1lXVtrZXldKSwgZSlcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgIDwvU3R5bGVkQ29sb3JDb2x1bW4+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29sb3JQYWxldHRlPlxuKTtcblxuU2luZ2xlQ29sb3JQYWxldHRlLnByb3BUeXBlcyA9IHByb3BUeXBlcztcblxuZXhwb3J0IGRlZmF1bHQgU2luZ2xlQ29sb3JQYWxldHRlO1xuIl19