@redocly/theme
Version:
Shared UI components lib
81 lines • 3.75 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Reasons = Reasons;
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
function Reasons({ settings, onChange, className }) {
const { label, component, items = [] } = settings;
const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
if (!items.length) {
return null;
}
const input_type = component || 'checkbox';
const handleOptionChange = (position) => {
const updatedCheckedState = component === 'checkbox'
? checkedState.map((item, index) => (index === position ? !item : item))
: items.map((_, idx) => position === idx);
setCheckedState(updatedCheckedState);
onChange(items.filter((_, index) => !!updatedCheckedState[index]));
};
return (React.createElement(ReasonsWrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "feedback.settings.reasons.label", className: className },
React.createElement(Label, null, label ||
translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
}
const ReasonsWrapper = styled_components_1.default.div `
font-family: var(--feedback-font-family);
display: flex;
flex-direction: column;
`;
const Label = styled_components_1.default.h4 `
font-family: var(--feedback-font-family);
font-weight: var(--font-weight-regular);
font-size: var(--feedback-font-size);
line-height: var(--feedback-header-line-height);
color: var(--feedback-header-text-color);
margin: 0;
`;
const OptionWrapper = styled_components_1.default.div `
margin: 5px 0;
display: flex;
input {
margin-right: 10px;
cursor: pointer;
}
label {
font-size: var(--feedback-font-size);
cursor: pointer;
}
`;
//# sourceMappingURL=Reasons.js.map