cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
339 lines (336 loc) • 21.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.modes = exports.Palette = void 0;
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _accent, _accent2, _accent3, _accent4, _accent5, _accent6, _accent7, _accent8, _accent9;
var modes = {
light: "light",
dark: "dark"
};
exports.modes = modes;
var opacity = {
accent50: (_accent = {}, (0, _defineProperty2["default"])(_accent, modes.light, 0.04), (0, _defineProperty2["default"])(_accent, modes.dark, 0.04), _accent),
accent100: (_accent2 = {}, (0, _defineProperty2["default"])(_accent2, modes.light, 0.08), (0, _defineProperty2["default"])(_accent2, modes.dark, 0.08), _accent2),
accent200: (_accent3 = {}, (0, _defineProperty2["default"])(_accent3, modes.light, 0.15), (0, _defineProperty2["default"])(_accent3, modes.dark, 0.14), _accent3),
accent300: (_accent4 = {}, (0, _defineProperty2["default"])(_accent4, modes.light, 0.24), (0, _defineProperty2["default"])(_accent4, modes.dark, 0.23), _accent4),
accent400: (_accent5 = {}, (0, _defineProperty2["default"])(_accent5, modes.light, 0.33), (0, _defineProperty2["default"])(_accent5, modes.dark, 0.34), _accent5),
accent500: (_accent6 = {}, (0, _defineProperty2["default"])(_accent6, modes.light, 0.46), (0, _defineProperty2["default"])(_accent6, modes.dark, 0.46), _accent6),
accent600: (_accent7 = {}, (0, _defineProperty2["default"])(_accent7, modes.light, 0.58), (0, _defineProperty2["default"])(_accent7, modes.dark, 0.58), _accent7),
accent700: (_accent8 = {}, (0, _defineProperty2["default"])(_accent8, modes.light, 0.69), (0, _defineProperty2["default"])(_accent8, modes.dark, 0.71), _accent8),
accent800: (_accent9 = {}, (0, _defineProperty2["default"])(_accent9, modes.light, 0.82), (0, _defineProperty2["default"])(_accent9, modes.dark, 0.84), _accent9)
};
var getAccentOpacity = function getAccentOpacity(colorCode, opacity) {
if (colorCode.startsWith("#")) {
return hexToRGBA(colorCode, opacity);
}
return RGBToRGBA(colorCode, opacity);
};
var hexToRGBA = function hexToRGBA(hex, opacity) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return "rgba(" + +r + "," + +g + "," + +b + "," + opacity + ")";
};
var RGBToRGBA = function RGBToRGBA(rgb, opacity) {
// Choose correct separator
var sep = rgb.indexOf(",") > -1 ? "," : " ";
// Turn "rgb(r,g,b)" into [r,g,b]
rgb = rgb.substr(4).split(")")[0].split(sep);
var r = (+rgb[0]).toString(16),
g = (+rgb[1]).toString(16),
b = (+rgb[2]).toString(16);
return "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
};
/**
* @class PaletteItem
* @param {String} light
* @param {String} dark
*/
var PaletteItem = /*#__PURE__*/(0, _createClass2["default"])(function PaletteItem(_ref) {
var _ref$light = _ref.light,
light = _ref$light === void 0 ? "" : _ref$light,
_ref$dark = _ref.dark,
dark = _ref$dark === void 0 ? "" : _ref$dark;
(0, _classCallCheck2["default"])(this, PaletteItem);
this.light = light;
this.dark = dark;
}); /**
* @class Palette
* @param {String} mode
* @param {Object} background
* @param {Object} primary
* @param {Object} secondary
* @param {Object} error
* @param {Object} success
* @param {Object} accent
* @param {Object} accent50
* @param {Object} accent100
* @param {Object} accent200
* @param {Object} accent300
* @param {Object} accent400
* @param {Object} accent500
* @param {Object} accent600
* @param {Object} accent700
* @param {Object} accent800
* @param {Object} accent900
*/
var Palette = /*#__PURE__*/function () {
function Palette(_ref2) {
var _PaletteItem,
_PaletteItem2,
_PaletteItem3,
_PaletteItem4,
_PaletteItem5,
_PaletteItem6,
_PaletteItem7,
_PaletteItem8,
_PaletteItem9,
_PaletteItem10,
_PaletteItem11,
_PaletteItem12,
_PaletteItem13,
_PaletteItem14,
_PaletteItem15,
_PaletteItem16,
_this = this;
var _ref2$mode = _ref2.mode,
mode = _ref2$mode === void 0 ? modes.light : _ref2$mode,
_ref2$background = _ref2.background,
background = _ref2$background === void 0 ? new PaletteItem((_PaletteItem = {}, (0, _defineProperty2["default"])(_PaletteItem, modes.light, "rgb(255,255,255)"), (0, _defineProperty2["default"])(_PaletteItem, modes.dark, "rgb(0,0,0)"), _PaletteItem)) : _ref2$background,
_ref2$primary = _ref2.primary,
primary = _ref2$primary === void 0 ? new PaletteItem((_PaletteItem2 = {}, (0, _defineProperty2["default"])(_PaletteItem2, modes.light, "rgb(51, 153, 255)"), (0, _defineProperty2["default"])(_PaletteItem2, modes.dark, "rgb(51, 153, 255)"), _PaletteItem2)) : _ref2$primary,
_ref2$secondary = _ref2.secondary,
secondary = _ref2$secondary === void 0 ? new PaletteItem((_PaletteItem3 = {}, (0, _defineProperty2["default"])(_PaletteItem3, modes.light, "rgba(248, 248, 248, 0.92)"), (0, _defineProperty2["default"])(_PaletteItem3, modes.dark, "rgba(248, 248, 248, 0.92)"), _PaletteItem3)) : _ref2$secondary,
_ref2$error = _ref2.error,
error = _ref2$error === void 0 ? new PaletteItem((_PaletteItem4 = {}, (0, _defineProperty2["default"])(_PaletteItem4, modes.light, "rgb(255, 59, 48)"), (0, _defineProperty2["default"])(_PaletteItem4, modes.dark, "rgb(255, 59, 48)"), _PaletteItem4)) : _ref2$error,
_ref2$success = _ref2.success,
success = _ref2$success === void 0 ? new PaletteItem((_PaletteItem5 = {}, (0, _defineProperty2["default"])(_PaletteItem5, modes.light, "rgb(0, 200, 111)"), (0, _defineProperty2["default"])(_PaletteItem5, modes.dark, "rgb(0, 200, 111)"), _PaletteItem5)) : _ref2$success,
_ref2$accent = _ref2.accent,
accent = _ref2$accent === void 0 ? new PaletteItem((_PaletteItem6 = {}, (0, _defineProperty2["default"])(_PaletteItem6, modes.light, "rgb(20, 20, 20)"), (0, _defineProperty2["default"])(_PaletteItem6, modes.dark, "rgb(255, 255, 255)"), _PaletteItem6)) : _ref2$accent,
_ref2$accent2 = _ref2.accent50,
accent50 = _ref2$accent2 === void 0 ? new PaletteItem((_PaletteItem7 = {}, (0, _defineProperty2["default"])(_PaletteItem7, modes.light, "rgba(20, 20, 20, 0.04)"), (0, _defineProperty2["default"])(_PaletteItem7, modes.dark, "rgba(255, 255, 255, 0.04)"), _PaletteItem7)) : _ref2$accent2,
_ref2$accent3 = _ref2.accent100,
accent100 = _ref2$accent3 === void 0 ? new PaletteItem((_PaletteItem8 = {}, (0, _defineProperty2["default"])(_PaletteItem8, modes.light, "rgba(20, 20, 20, 0.08)"), (0, _defineProperty2["default"])(_PaletteItem8, modes.dark, "rgba(255, 255, 255, 0.08)"), _PaletteItem8)) : _ref2$accent3,
_ref2$accent4 = _ref2.accent200,
accent200 = _ref2$accent4 === void 0 ? new PaletteItem((_PaletteItem9 = {}, (0, _defineProperty2["default"])(_PaletteItem9, modes.light, "rgba(20, 20, 20, 0.15)"), (0, _defineProperty2["default"])(_PaletteItem9, modes.dark, "rgba(255, 255, 255, 0.14)"), _PaletteItem9)) : _ref2$accent4,
_ref2$accent5 = _ref2.accent300,
accent300 = _ref2$accent5 === void 0 ? new PaletteItem((_PaletteItem10 = {}, (0, _defineProperty2["default"])(_PaletteItem10, modes.light, "rgba(20, 20, 20, 0.24)"), (0, _defineProperty2["default"])(_PaletteItem10, modes.dark, "rgba(255, 255, 255, 0.23)"), _PaletteItem10)) : _ref2$accent5,
_ref2$accent6 = _ref2.accent400,
accent400 = _ref2$accent6 === void 0 ? new PaletteItem((_PaletteItem11 = {}, (0, _defineProperty2["default"])(_PaletteItem11, modes.light, "rgba(20, 20, 20, 0.33)"), (0, _defineProperty2["default"])(_PaletteItem11, modes.dark, "rgba(255, 255, 255, 0.34)"), _PaletteItem11)) : _ref2$accent6,
_ref2$accent7 = _ref2.accent500,
accent500 = _ref2$accent7 === void 0 ? new PaletteItem((_PaletteItem12 = {}, (0, _defineProperty2["default"])(_PaletteItem12, modes.light, "rgba(20, 20, 20, 0.46)"), (0, _defineProperty2["default"])(_PaletteItem12, modes.dark, "rgba(255, 255, 255, 0.46)"), _PaletteItem12)) : _ref2$accent7,
_ref2$accent8 = _ref2.accent600,
accent600 = _ref2$accent8 === void 0 ? new PaletteItem((_PaletteItem13 = {}, (0, _defineProperty2["default"])(_PaletteItem13, modes.light, "rgba(20, 20, 20, 0.58)"), (0, _defineProperty2["default"])(_PaletteItem13, modes.dark, "rgba(255, 255, 255, 0.58)"), _PaletteItem13)) : _ref2$accent8,
_ref2$accent9 = _ref2.accent700,
accent700 = _ref2$accent9 === void 0 ? new PaletteItem((_PaletteItem14 = {}, (0, _defineProperty2["default"])(_PaletteItem14, modes.light, "rgba(20, 20, 20, 0.69)"), (0, _defineProperty2["default"])(_PaletteItem14, modes.dark, "rgba(255, 255, 255, 0.71)"), _PaletteItem14)) : _ref2$accent9,
_ref2$accent10 = _ref2.accent800,
accent800 = _ref2$accent10 === void 0 ? new PaletteItem((_PaletteItem15 = {}, (0, _defineProperty2["default"])(_PaletteItem15, modes.light, "rgba(20, 20, 20, 0.82)"), (0, _defineProperty2["default"])(_PaletteItem15, modes.dark, "rgba(255, 255, 255, 0.84)"), _PaletteItem15)) : _ref2$accent10,
_ref2$accent11 = _ref2.accent900,
accent900 = _ref2$accent11 === void 0 ? new PaletteItem((_PaletteItem16 = {}, (0, _defineProperty2["default"])(_PaletteItem16, modes.light, "rgb(255, 255, 255)"), (0, _defineProperty2["default"])(_PaletteItem16, modes.dark, "rgb(20, 20, 20)"), _PaletteItem16)) : _ref2$accent11;
(0, _classCallCheck2["default"])(this, Palette);
(0, _defineProperty2["default"])(this, "getAccent", function () {
return _this.accent[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent50", function () {
return _this.accent50[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent100", function () {
return _this.accent100[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent200", function () {
return _this.accent200[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent300", function () {
return _this.accent300[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent400", function () {
return _this.accent400[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent500", function () {
return _this.accent500[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent600", function () {
return _this.accent600[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent700", function () {
return _this.accent700[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent800", function () {
return _this.accent800[_this.mode];
});
(0, _defineProperty2["default"])(this, "getAccent900", function () {
return _this.accent900[_this.mode];
});
(0, _defineProperty2["default"])(this, "getSuccess", function () {
return _this.success[_this.mode];
});
(0, _defineProperty2["default"])(this, "getError", function () {
return _this.error[_this.mode];
});
(0, _defineProperty2["default"])(this, "getPrimary", function () {
return _this.primary[_this.mode];
});
(0, _defineProperty2["default"])(this, "getSecondary", function () {
return _this.secondary[_this.mode];
});
(0, _defineProperty2["default"])(this, "getBackground", function () {
return _this.background[_this.mode];
});
this.mode = mode;
this.background = background;
this.primary = primary;
this.secondary = secondary;
this.error = error;
this.success = success;
this.accent = accent;
this.accent50 = accent50;
this.accent100 = accent100;
this.accent200 = accent200;
this.accent300 = accent300;
this.accent400 = accent400;
this.accent500 = accent500;
this.accent600 = accent600;
this.accent700 = accent700;
this.accent800 = accent800;
this.accent900 = accent900;
}
/**
* Getters
*/
(0, _createClass2["default"])(Palette, [{
key: "setMode",
value:
/**
* Setters
*/
function setMode(mode) {
this.mode = mode;
}
}, {
key: "setBackground",
value: function setBackground(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
this.background = colorset;
}
}
}, {
key: "setPrimary",
value: function setPrimary(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
this.primary = colorset;
}
}
}, {
key: "setError",
value: function setError(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
this.error = colorset;
}
}
}, {
key: "setAccent",
value: function setAccent(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent, _this$setAccent, _this$setAccent2, _this$setAccent3, _this$setAccent4, _this$setAccent5, _this$setAccent6, _this$setAccent7, _this$setAccent8, _this$setAccent9, _this$setAccent10;
this.accent = (_this$accent = {}, (0, _defineProperty2["default"])(_this$accent, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent, modes.dark, colorset[modes.dark]), _this$accent);
this.setAccent900((_this$setAccent = {}, (0, _defineProperty2["default"])(_this$setAccent, modes.light, colorset[modes.dark]), (0, _defineProperty2["default"])(_this$setAccent, modes.dark, colorset[modes.light]), _this$setAccent));
this.setAccent50((_this$setAccent2 = {}, (0, _defineProperty2["default"])(_this$setAccent2, modes.light, getAccentOpacity(colorset[modes.light], opacity.accent50[modes.light])), (0, _defineProperty2["default"])(_this$setAccent2, modes.dark, getAccentOpacity(colorset[modes.light], opacity.accent50[modes.dark])), _this$setAccent2));
this.setAccent100((_this$setAccent3 = {}, (0, _defineProperty2["default"])(_this$setAccent3, modes.light, getAccentOpacity(colorset.light, opacity.accent100[modes.light])), (0, _defineProperty2["default"])(_this$setAccent3, modes.dark, getAccentOpacity(colorset.dark, opacity.accent100[modes.dark])), _this$setAccent3));
this.setAccent200((_this$setAccent4 = {}, (0, _defineProperty2["default"])(_this$setAccent4, modes.light, getAccentOpacity(colorset.light, opacity.accent200[modes.light])), (0, _defineProperty2["default"])(_this$setAccent4, modes.dark, getAccentOpacity(colorset.dark, opacity.accent200[modes.dark])), _this$setAccent4));
this.setAccent300((_this$setAccent5 = {}, (0, _defineProperty2["default"])(_this$setAccent5, modes.light, getAccentOpacity(colorset.light, opacity.accent300[modes.light])), (0, _defineProperty2["default"])(_this$setAccent5, modes.dark, getAccentOpacity(colorset.dark, opacity.accent300[modes.dark])), _this$setAccent5));
this.setAccent400((_this$setAccent6 = {}, (0, _defineProperty2["default"])(_this$setAccent6, modes.light, getAccentOpacity(colorset.light, opacity.accent400[modes.light])), (0, _defineProperty2["default"])(_this$setAccent6, modes.dark, getAccentOpacity(colorset.dark, opacity.accent400[modes.dark])), _this$setAccent6));
this.setAccent500((_this$setAccent7 = {}, (0, _defineProperty2["default"])(_this$setAccent7, modes.light, getAccentOpacity(colorset.light, opacity.accent500[modes.light])), (0, _defineProperty2["default"])(_this$setAccent7, modes.dark, getAccentOpacity(colorset.dark, opacity.accent500[modes.dark])), _this$setAccent7));
this.setAccent600((_this$setAccent8 = {}, (0, _defineProperty2["default"])(_this$setAccent8, modes.light, getAccentOpacity(colorset.light, opacity.accent600[modes.light])), (0, _defineProperty2["default"])(_this$setAccent8, modes.dark, getAccentOpacity(colorset.dark, opacity.accent600[modes.dark])), _this$setAccent8));
this.setAccent700((_this$setAccent9 = {}, (0, _defineProperty2["default"])(_this$setAccent9, modes.light, getAccentOpacity(colorset.light, opacity.accent700[modes.light])), (0, _defineProperty2["default"])(_this$setAccent9, modes.dark, getAccentOpacity(colorset.dark, opacity.accent700[modes.dark])), _this$setAccent9));
this.setAccent800((_this$setAccent10 = {}, (0, _defineProperty2["default"])(_this$setAccent10, modes.light, getAccentOpacity(colorset.light, opacity.accent800[modes.light])), (0, _defineProperty2["default"])(_this$setAccent10, modes.dark, getAccentOpacity(colorset.dark, opacity.accent800[modes.dark])), _this$setAccent10));
}
}
}, {
key: "setAccent50",
value: function setAccent50(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent2;
this.accent50 = (_this$accent2 = {}, (0, _defineProperty2["default"])(_this$accent2, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent2, modes.dark, colorset[modes.dark]), _this$accent2);
}
}
}, {
key: "setAccent100",
value: function setAccent100(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent3;
this.accent100 = (_this$accent3 = {}, (0, _defineProperty2["default"])(_this$accent3, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent3, modes.dark, colorset[modes.dark]), _this$accent3);
}
}
}, {
key: "setAccent200",
value: function setAccent200(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent4;
this.accent200 = (_this$accent4 = {}, (0, _defineProperty2["default"])(_this$accent4, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent4, modes.dark, colorset[modes.dark]), _this$accent4);
}
}
}, {
key: "setAccent300",
value: function setAccent300(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent5;
this.accent300 = (_this$accent5 = {}, (0, _defineProperty2["default"])(_this$accent5, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent5, modes.dark, colorset[modes.dark]), _this$accent5);
}
}
}, {
key: "setAccent400",
value: function setAccent400(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent6;
this.accent400 = (_this$accent6 = {}, (0, _defineProperty2["default"])(_this$accent6, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent6, modes.dark, colorset[modes.dark]), _this$accent6);
}
}
}, {
key: "setAccent500",
value: function setAccent500(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent7;
this.accent500 = (_this$accent7 = {}, (0, _defineProperty2["default"])(_this$accent7, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent7, modes.dark, colorset[modes.dark]), _this$accent7);
}
}
}, {
key: "setAccent600",
value: function setAccent600(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent8;
this.accent600 = (_this$accent8 = {}, (0, _defineProperty2["default"])(_this$accent8, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent8, modes.dark, colorset[modes.dark]), _this$accent8);
}
}
}, {
key: "setAccent700",
value: function setAccent700(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent9;
this.accent700 = (_this$accent9 = {}, (0, _defineProperty2["default"])(_this$accent9, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent9, modes.dark, colorset[modes.dark]), _this$accent9);
}
}
}, {
key: "setAccent800",
value: function setAccent800(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent10;
this.accent800 = (_this$accent10 = {}, (0, _defineProperty2["default"])(_this$accent10, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent10, modes.dark, colorset[modes.dark]), _this$accent10);
}
}
}, {
key: "setAccent900",
value: function setAccent900(colorset) {
if (colorset && colorset[modes.light] && colorset[modes.dark]) {
var _this$accent11;
this.accent900 = (_this$accent11 = {}, (0, _defineProperty2["default"])(_this$accent11, modes.light, colorset[modes.light]), (0, _defineProperty2["default"])(_this$accent11, modes.dark, colorset[modes.dark]), _this$accent11);
}
}
}]);
return Palette;
}();
exports.Palette = Palette;