@procraft/widget-order
Version:
Order widget for landing
77 lines • 4.42 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const colors_1 = require("../../constants/colors");
const styles_1 = require("./styles");
const Materials = ({ benefits, extraBenefits, limit, backgroundColor, textColor, linkColor, }) => {
const [showAll, showAllSetter] = (0, react_1.useState)(false);
const renderBenefit = (0, react_1.useMemo)(() => (benefit, key) => {
if (benefit.startsWith('-')) {
return (react_1.default.createElement("li", { key: key, className: "separator" },
react_1.default.createElement("span", null, benefit.replace(/^-*(.*[^-])-*$/g, '$1'))));
}
else {
let content;
const parts = benefit.split('||');
if (parts.length === 2) {
content = (react_1.default.createElement("a", { style: { color: linkColor }, href: parts[1] }, parts[0]));
}
else {
content = benefit;
}
return (react_1.default.createElement("li", { key: key, className: "item" },
react_1.default.createElement("i", null,
react_1.default.createElement("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
react_1.default.createElement("path", { d: "M4.08829 7.41955L2.69328 5.41955C2.23141 4.75706 -0.176796 6.43706 0.285124 7.09955L2.88144 10.8215C3.34332 11.484 4.26332 11.6477 4.92576 11.1858C5.11389 11.0546 5.26077 10.8852 5.36514 10.6965L5.36639 10.6971C5.36639 10.6971 5.36951 10.6896 5.37201 10.684C5.40514 10.6221 5.43514 10.559 5.45889 10.4933C5.99326 9.34334 8.82209 3.53526 12.7733 0.550781C12.7739 0.550781 7.79825 0.676407 4.08833 7.41958L4.08829 7.41955Z", fill: "#233D78" }))),
react_1.default.createElement("span", null, content)));
}
}, [linkColor]);
const showAllOnClick = (0, react_1.useCallback)(() => {
showAllSetter(true);
}, []);
const { materials, showAllButton } = (0, react_1.useMemo)(() => {
const allBenefits = extraBenefits.concat(benefits);
const total = allBenefits.length;
const hasMore = allBenefits.length > limit;
const showAllButton = hasMore && !showAll ? (react_1.default.createElement("button", { className: "showAll", onClick: showAllOnClick },
"\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 (",
total,
")")) : null;
return {
materials: showAll || !hasMore ? allBenefits : allBenefits.slice(0, limit),
showAllButton,
};
}, [showAll, showAllOnClick, limit, benefits, extraBenefits]);
return (0, react_1.useMemo)(() => {
if (!(materials === null || materials === void 0 ? void 0 : materials.length)) {
return null;
}
return (react_1.default.createElement(styles_1.MaterialsStyled, { style: {
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : colors_1.CONTENT_BG_DEFAULT_COLOR,
color: textColor !== null && textColor !== void 0 ? textColor : colors_1.CONTENT_TEXT_DEFAULT_COLOR,
}, variant: "white" },
react_1.default.createElement("ol", null, materials.map(renderBenefit)),
showAllButton));
}, [materials, renderBenefit, showAllButton, backgroundColor, textColor]);
};
exports.default = Materials;
//# sourceMappingURL=index.js.map