@talend/react-faceted-search
Version:
179 lines (176 loc) • 7.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BadgeCheckboxesForm = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _utils = require("@talend/utils");
var _constants = require("../../../constants");
var _usage = require("../../../helpers/usage.helpers");
var _BadgeCheckboxesModule = _interopRequireDefault(require("./BadgeCheckboxes.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-autofocus */
const createCheckboxEntity = value => checkbox => {
const entity = value.find(v => v.id === checkbox.id);
return {
id: checkbox.id,
label: checkbox.label,
checked: entity ? entity.checked : checkbox.checked || false
};
};
const getCheckboxes = (checkboxes, value, filterValue, showAll) => {
const formatFilterValue = filterValue.trim().toLocaleLowerCase();
return checkboxes.filter(checkbox => (0, _lodash.get)(checkbox, 'label', '').toLocaleLowerCase().includes(formatFilterValue)).map(createCheckboxEntity(value)).filter(checkbox => showAll ? true : checkbox.checked);
};
const BadgeCheckboxesForm = ({
checkboxValues,
id,
onChange,
onSubmit,
value,
feature,
filterBarPlaceholder,
allSelector,
...rest
}) => {
const {
t
} = (0, _reactI18next.useTranslation)(_constants.I18N_DOMAIN_FACETED_SEARCH);
const [filter, setFilter] = (0, _react.useState)('');
const [showAll, setShowAll] = (0, _react.useState)(true);
const leftBtnLabel = showAll ? t('NB_SELECTED_TAGS', {
count: value.length,
defaultValue: '{{count}} selected'
}) : t('SHOW_ALL_TAGS', {
defaultValue: 'Show all'
});
const badgeCheckBoxesFormId = `${id}-checkboxes-form`;
const checkboxes = (0, _react.useCallback)(getCheckboxes(checkboxValues, value, filter, showAll), [checkboxValues, value, filter, showAll]);
const applyDataFeature = (0, _react.useMemo)(() => (0, _usage.getApplyDataFeature)(feature), [feature]);
const onChangeCheckBoxes = (event, checkboxId) => {
const entity = checkboxes.find(checkboxValue => checkboxValue.id === checkboxId);
if (entity) {
entity.checked = event.target.checked;
}
onChange(event, checkboxes.filter(c => c.checked));
};
const onToggleAll = event => {
const checked = event.target.checked;
if (checked) {
const checkedCheckboxes = checkboxes.map(entity => ({
...entity,
checked: true
}));
onChange(event, checkedCheckboxes);
} else {
onChange(event, []);
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form, {
id: `${badgeCheckBoxesFormId}-form`,
onSubmit: onSubmit,
children: [allSelector ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Checkbox, {
id: 'selectAll-checkbox',
onChange: onToggleAll,
label: t('FACETED_SEARCH_VALUE_ALL', {
defaultValue: 'All'
}),
checked: checkboxes.filter(c => c.checked).length === checkboxValues.length,
"data-test": "badge-checkbox-form-checkbox-selectAll",
"data-testid": "badge-checkbox-form-checkbox-selectAll"
}, "selectAll"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Divider, {
orientation: "horizontal"
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Search, {
id: `${badgeCheckBoxesFormId}-filter`,
placeholder: filterBarPlaceholder || t('FIND_COLUMN_FILTER_PLACEHOLDER', {
defaultValue: 'Find a column'
}),
onChange: event => {
var _event$target;
setFilter((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '');
},
value: filter,
"data-test": "badge-checkbox-form-filter",
"data-testid": "badge-checkbox-form-filter"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _BadgeCheckboxesModule.default['fs-badge-checkbox-form-checkboxes'],
children: !rest.isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.StackVertical, {
gap: "S",
children: checkboxes.map(checkbox => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Checkbox, {
id: `${checkbox.id}-checkbox`,
label: checkbox.label,
onChange: event => {
onChangeCheckBoxes(event, checkbox.id);
},
checked: checkbox.checked,
"data-testid": `badge-checkbox-form-checkbox-${checkbox.id}`,
"data-test": `badge-checkbox-form-checkbox-${checkbox.id}`
}, checkbox.id);
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackVertical, {
gap: "S",
"data-testid": "badge-checkbox-form-skeleton-item",
"data-test": "badge-checkbox-form-skeleton-item",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
size: "L",
width: "100"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
size: "L",
width: "100"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
size: "L",
width: "100"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form.Buttons, {
padding: {
x: 0,
bottom: 0,
top: 'M'
},
children: [value.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
type: "button",
onClick: () => {
setFilter('');
setShowAll(!showAll);
},
children: leftBtnLabel
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonPrimary, {
"data-feature": applyDataFeature,
type: "submit",
disabled: rest.isLoading,
...(0, _utils.getDataAttrFromProps)(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})]
})]
})
});
};
exports.BadgeCheckboxesForm = BadgeCheckboxesForm;
BadgeCheckboxesForm.propTypes = {
checkboxValues: _propTypes.default.arrayOf(_propTypes.default.shape({
checked: _propTypes.default.bool,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string.isRequired
})),
id: _propTypes.default.string.isRequired,
onChange: _propTypes.default.func,
onSubmit: _propTypes.default.func.isRequired,
value: _propTypes.default.array,
feature: _propTypes.default.string.isRequired,
filterBarPlaceholder: _propTypes.default.string,
allSelector: _propTypes.default.bool
};
// eslint-disable-next-line import/prefer-default-export
//# sourceMappingURL=BadgeCheckboxesForm.component.js.map