kwikid-components-react
Version:
KwikID's Component Library in React
192 lines (191 loc) • 8.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _fa = require("react-icons/fa6");
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
var _LabelValuePairs = require("./LabelValuePairs.definition");
var _LabelValuePairs2 = require("./LabelValuePairs.helper");
var _LabelValuePairs3 = require("./LabelValuePairs.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const renderValueBasedOnType = (value, type) => {
switch ((0, _kwikidToolkit.isNotEmptyValue)(type) ? type : (0, _LabelValuePairs2.assignTypeToValue)(value)) {
case _LabelValuePairs.EKwikUILabelValuePairType.BOOLEAN:
return value ? /*#__PURE__*/_react.default.createElement(_fa.FaCircleCheck, {
color: "#4bae4f",
size: 16
}) : /*#__PURE__*/_react.default.createElement(_fa.FaCircleXmark, {
color: "#f44336",
size: 16
});
case _LabelValuePairs.EKwikUILabelValuePairType.IMAGE:
if ((0, _LabelValuePairs2.isValidBase64Image)(value)) {
value = "data:image/png;base64,".concat(value);
}
return /*#__PURE__*/_react.default.createElement("img", {
src: value,
alt: "kwikid-image",
style: {
width: "100%",
height: "auto",
maxHeight: 200,
objectFit: "contain"
}
});
case _LabelValuePairs.EKwikUILabelValuePairType.PDF:
return /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(value),
target: "_blank",
rel: "noopener noreferrer"
}, "View PDF");
case _LabelValuePairs.EKwikUILabelValuePairType.DOC:
return /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(value),
target: "_blank",
rel: "noopener noreferrer"
}, "View DOC");
case _LabelValuePairs.EKwikUILabelValuePairType.VIDEO:
return /*#__PURE__*/_react.default.createElement("video", {
style: {
borderRadius: "var(--kwikui-radius-m)",
width: "100%"
},
controls: true
}, /*#__PURE__*/_react.default.createElement("source", {
src: value
}), "Unable to show the media file");
default:
return /*#__PURE__*/_react.default.createElement("div", null, value);
// Compulsorily return a JSX element to make changes wrt KwikUITooltip
}
};
const KwikUILabelValuePairLabel = _ref => {
let {
label,
customStyles,
config
} = _ref;
const convertedKey = (0, _kwikidToolkit.convertSnakeCaseToNormalText)(label);
switch (config === null || config === void 0 ? void 0 : config.case) {
case _LabelValuePairs.EKwikUILabelValuePairCase.UPPER:
return /*#__PURE__*/_react.default.createElement(_LabelValuePairs3.KwikUIStyleLabelValuePairLabel, {
orientation: config.orientation,
style: customStyles
}, convertedKey.toUpperCase());
case _LabelValuePairs.EKwikUILabelValuePairCase.LOWER:
return /*#__PURE__*/_react.default.createElement(_LabelValuePairs3.KwikUIStyleLabelValuePairLabel, {
orientation: config.orientation,
style: customStyles
}, convertedKey.toLowerCase());
default:
return /*#__PURE__*/_react.default.createElement(_LabelValuePairs3.KwikUIStyleLabelValuePairLabel, {
orientation: config.orientation,
style: customStyles
}, convertedKey);
}
};
const KwikUILabelValuePairValue = _ref2 => {
var _config$tooltip;
let {
value,
customStyles,
config,
type
} = _ref2;
type = (0, _LabelValuePairs2.assignTypeToValue)(value);
const boolConditionCheck = type !== _LabelValuePairs.EKwikUILabelValuePairType.BOOLEAN;
const imageConditionCheck = type === _LabelValuePairs.EKwikUILabelValuePairType.IMAGE;
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
open: config === null || config === void 0 ? void 0 : (_config$tooltip = config.tooltip) === null || _config$tooltip === void 0 ? void 0 : _config$tooltip.show,
isExternalCheckCondition: boolConditionCheck,
isInternalZoom: imageConditionCheck,
closeOnClickOutside: false,
variant: "fullscreen",
customStyles: {
childWrapper: customStyles
}
}, renderValueBasedOnType(value, type));
};
const KwikUILabelValuePairPlaceholder = _ref3 => {
let {
placeholder
} = _ref3;
if ((0, _kwikidToolkit.isNotEmptyValue)(placeholder)) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder);
}
return "-";
};
const KwikUILabelValuePairs = _ref4 => {
let {
data = [],
config = {
case: {
label: _LabelValuePairs.EKwikUILabelValuePairCase.UPPER,
value: _LabelValuePairs.EKwikUILabelValuePairCase.UPPER
},
orientation: _LabelValuePairs.EKwikUILabelValuePairOrientation.VERTICAL,
tooltip: {
show: false
}
},
placeholder = "-",
customStyles = {
label: {},
value: {},
placeholder: {},
container: {}
}
} = _ref4;
const formattedData = (0, _LabelValuePairs2.formatData)(data);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedData.map((kv, index) => {
var _config$case, _kv$value, _config$case3;
const currentLabelValuePairOrientation = (0, _kwikidToolkit.isBoolean)(kv.value) ? _LabelValuePairs.EKwikUILabelValuePairOrientation.HORIZONTAL : (0, _kwikidToolkit.isNotEmptyValue)(config === null || config === void 0 ? void 0 : config.orientation) ? config.orientation : _LabelValuePairs.EKwikUILabelValuePairOrientation.VERTICAL;
return /*#__PURE__*/_react.default.createElement(_LabelValuePairs3.KwikUIStyleLabelValuePairsContainer, {
key: index,
style: customStyles.container,
orientation: currentLabelValuePairOrientation
}, (0, _kwikidToolkit.isNotEmptyString)(kv.key) ? /*#__PURE__*/_react.default.createElement(KwikUILabelValuePairLabel, {
label: kv.key,
customStyles: customStyles.label,
config: {
case: config === null || config === void 0 ? void 0 : (_config$case = config.case) === null || _config$case === void 0 ? void 0 : _config$case.label,
orientation: currentLabelValuePairOrientation
}
}) : null, (0, _kwikidToolkit.isObject)(kv.value) && (0, _kwikidToolkit.isNotEmptyValue)(kv.value) ? // Handle Nested JSON
(_kv$value = kv.value) === null || _kv$value === void 0 ? void 0 : _kv$value.map((val, id) => {
var _config$case2;
return /*#__PURE__*/_react.default.createElement("ul", {
key: id
}, (0, _kwikidToolkit.isNotEmptyValue)(val.title) && /*#__PURE__*/_react.default.createElement(_LabelValuePairs3.KwikUIStyleLabelValuePairLabelList, {
style: customStyles.label
}, (0, _kwikidToolkit.convertSnakeCaseToNormalText)(val.title)), (0, _kwikidToolkit.isNotEmptyValue)(val.info) ? /*#__PURE__*/_react.default.createElement(KwikUILabelValuePairValue, {
value: val.info,
customStyles: customStyles.value,
config: {
case: config === null || config === void 0 ? void 0 : (_config$case2 = config.case) === null || _config$case2 === void 0 ? void 0 : _config$case2.value,
tooltip: config.tooltip
}
}) : "-");
}) : (0, _kwikidToolkit.isNotEmptyValue)(kv.value) ?
/*#__PURE__*/
// Handle Key-Value
_react.default.createElement(KwikUILabelValuePairValue, {
value: kv.value,
customStyles: customStyles.value,
config: {
case: config === null || config === void 0 ? void 0 : (_config$case3 = config.case) === null || _config$case3 === void 0 ? void 0 : _config$case3.value,
tooltip: config.tooltip
}
}) :
/*#__PURE__*/
// Handle Empty Value
_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(KwikUILabelValuePairPlaceholder, {
customStyles: customStyles.placeholder,
placeholder: placeholder
})));
}));
};
var _default = exports.default = KwikUILabelValuePairs;