@ant-design/pro-layout/lib/components/SettingDrawer/ThemeColor.js

@ant-design/pro-layout

"use strict";

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

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

require("antd/es/tooltip/style");

var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));

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

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

require("./ThemeColor.less");

var _icons = require("@ant-design/icons");

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

var _excluded = ["color", "check"];

var Tag = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var color = _ref.color,
      check = _ref.check,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
    style: {
      backgroundColor: color
    },
    ref: ref
  }), check ? /*#__PURE__*/_react.default.createElement(_icons.CheckOutlined, null) : '');
});

var ThemeColor = function ThemeColor(_ref2, ref) {
  var value = _ref2.value,
      colorList = _ref2.colorList,
      onChange = _ref2.onChange,
      formatMessage = _ref2.formatMessage;

  if (!colorList || (colorList === null || colorList === void 0 ? void 0 : colorList.length) < 1) {
    return null;
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "theme-color",
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "theme-color-content"
  }, colorList === null || colorList === void 0 ? void 0 : colorList.map(function (_ref3) {
    var key = _ref3.key,
        color = _ref3.color;
    if (!key) return;
    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
      key: color,
      title: formatMessage({
        id: "app.setting.themecolor.".concat(key)
      })
    }, /*#__PURE__*/_react.default.createElement(Tag, {
      className: "theme-color-block",
      color: color,
      check: value === color,
      onClick: function onClick() {
        return onChange && onChange(color);
      }
    }));
  })));
};

var _default = /*#__PURE__*/_react.default.forwardRef(ThemeColor);

exports.default = _default;