cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
233 lines (232 loc) • 6.98 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.tableStyle = exports.tableFootStyle = exports.tableCaptionStyle = exports.tableBodyStyle = exports.sendButtonStyle = exports.pollQuestionStyle = exports.pollOptionStyle = exports.modalWrapperStyle = exports.modalTableStyle = exports.modalErrorStyle = exports.modalCloseStyle = exports.modalBodyStyle = exports.iconWrapperStyle = exports.answersStyle = exports.addOptionIconStyle = exports.addItemStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var modalWrapperStyle = function modalWrapperStyle() {
return {
minWidth: "360px",
minHeight: "620px",
height: "40%",
overflow: "hidden",
backgroundColor: "#fff",
position: "fixed",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
zIndex: "1002",
margin: "0 auto",
boxShadow: "rgba(20, 20, 20, 0.2) 0 16px 32px, rgba(20, 20, 20, 0.04) 0 0 0 1px",
borderRadius: "12px",
display: "block"
};
};
exports.modalWrapperStyle = modalWrapperStyle;
var modalCloseStyle = function modalCloseStyle(props) {
return {
position: "absolute",
width: "32px",
height: "32px",
borderRadius: "50%",
top: "16px",
right: "16px",
webkitMask: "url(".concat(props.closeIconURL, ") center center no-repeat"),
backgroundColor: "RGB(51, 153, 255)",
cursor: "pointer"
};
};
exports.modalCloseStyle = modalCloseStyle;
var modalBodyStyle = function modalBodyStyle() {
return {
padding: "24px",
height: "100%",
width: "100%"
};
};
exports.modalBodyStyle = modalBodyStyle;
var modalErrorStyle = function modalErrorStyle() {
return {
fontSize: "12px",
color: "red",
textAlign: "center",
margin: "8px 0",
width: "100%"
};
};
exports.modalErrorStyle = modalErrorStyle;
var modalTableStyle = function modalTableStyle() {
return {
borderCollapse: "collapse",
margin: "0",
padding: "0",
width: "100%",
height: "90%",
tr: {
borderBottom: "1px solid #39f",
display: "table",
width: "100%",
tableLayout: "fixed"
}
};
};
exports.modalTableStyle = modalTableStyle;
var tableCaptionStyle = function tableCaptionStyle() {
return {
fontSize: "20px",
marginBottom: "15px",
fontWeight: "bold",
textAlign: "center"
};
};
exports.tableCaptionStyle = tableCaptionStyle;
var tableBodyStyle = function tableBodyStyle() {
return {
height: "calc(100% - 40px)",
overflowY: "auto",
display: "block",
"tr": {
"td": {
padding: "8px 16px",
fontSize: "14px",
"input": {
width: "100%",
border: "none",
padding: "8px 16px",
fontSize: "14px",
"&:focus": {
outline: "none"
}
},
"label": {
padding: "8px 16px"
},
":first-of-type": {
width: "120px"
}
}
}
};
};
exports.tableBodyStyle = tableBodyStyle;
var tableFootStyle = function tableFootStyle(isCreating, img) {
var loadingState = {};
var textMargin = {};
if (isCreating) {
loadingState = {
disabled: "true",
pointerEvents: "none",
background: "url(".concat(img, ") no-repeat right 10px center #39f")
};
textMargin = {
marginRight: "24px"
};
}
return {
display: "inline-block",
tr: {
border: "none",
td: {
textAlign: "center",
button: _objectSpread(_objectSpread({
cursor: "pointer",
padding: "8px 16px",
backgroundColor: "#39f",
borderRadius: "5px",
color: "#fff",
fontSize: "14px",
outline: "0",
border: "0"
}, loadingState), {}, {
span: _objectSpread({}, textMargin)
})
}
}
};
};
exports.tableFootStyle = tableFootStyle;
var iconWrapperStyle = function iconWrapperStyle() {
return {
width: "30px"
};
};
exports.iconWrapperStyle = iconWrapperStyle;
var addOptionIconStyle = function addOptionIconStyle(img) {
return {
backgroundSize: "28px 28px",
cursor: "pointer",
display: "block",
height: "24px",
width: "40px",
WebkitMask: "url(".concat(img, ") center center no-repeat"),
background: " RGB(51, 153, 255)"
};
};
exports.addOptionIconStyle = addOptionIconStyle;
var addItemStyle = function addItemStyle() {
return {
width: "360px",
height: "28px",
padding: '30px 0px 0px 0px',
font: "1px",
color: "RGB(51, 153, 255)"
};
};
exports.addItemStyle = addItemStyle;
var answersStyle = function answersStyle() {
return {
padding: '6px'
};
};
exports.answersStyle = answersStyle;
var pollQuestionStyle = function pollQuestionStyle(props) {
return {
width: props.style.width,
height: props.style.height,
borderRadius: props.style.borderRadius,
border: props.style.border,
background: props.style.background,
padding: "10px",
font: "15px"
};
};
exports.pollQuestionStyle = pollQuestionStyle;
var pollOptionStyle = function pollOptionStyle(props) {
return {
width: props.style.width,
height: props.style.height,
borderRadius: props.style.borderRadius,
border: props.style.border,
background: props.style.background,
padding: "10px",
font: "15px"
};
};
exports.pollOptionStyle = pollOptionStyle;
var sendButtonStyle = function sendButtonStyle(props) {
return {
width: props.style.width,
height: props.style.height,
borderRadius: "15px",
border: props.style.border,
background: "RGB(51, 153, 255)",
//padding: "10px",
font: "15px",
color: "white",
textAlign: "center"
};
};
exports.sendButtonStyle = sendButtonStyle;
var tableStyle = function tableStyle(props) {
return {
width: props.style.width,
height: "28px",
padding: '30px 8px 6px 0px',
font: "15px",
color: "RGBA(20, 20, 20, 0.46)"
};
};
exports.tableStyle = tableStyle;