@sparklink-pro/apant
Version:
Apollo & Antd tools
85 lines • 4.06 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
import { Select, Checkbox, Radio } from 'antd';
import clsx from 'clsx';
import { find, get, values, includes, isArray, isString, orderBy, overEvery, keys } from 'lodash-es';
import { useType } from '../hooks/useType';
import { useTypeList } from '../hooks/useTypeList';
import { useTypeSearch } from '../hooks/useTypeSearch';
/**
* SelectType
* Returns a Select, Radio group or Checkbox group component with a list of options
*/
export const SelectType = forwardRef((_a, ref) => {
var { type, column, isLoading, label, search, fragment, multiple, filter, expand = false, extraOptions = [] } = _a, props = __rest(_a, ["type", "column", "isLoading", "label", "search", "fragment", "multiple", "filter", "expand", "extraOptions"]);
if (!type) {
console.error('Missing the type in SelectType');
}
const { getId, getLabel, getOrder, getSelectOptions } = useType({ type });
const selectOptions = getSelectOptions();
const { items, loading } = useTypeList({ type, fragment: fragment || selectOptions.fragment });
const typeSearch = useTypeSearch({ type });
const searchFilter = search || typeSearch;
const load = loading || isLoading;
let labelCallback = label || selectOptions.label || getLabel;
if (isString(labelCallback)) {
labelCallback = (object) => get(object, labelCallback);
}
const order = getOrder();
const orderFields = isString(order) ? [order] : keys(order);
const orderFieldsOrder = isString(order) ? ['asc'] : values(order);
const options = useMemo(() => [
...extraOptions,
...orderBy(items.filter((item) => {
if (!filter) {
return true;
}
if (isArray(filter)) {
if (filter.length === 0) {
return true;
}
const check = overEvery(filter);
if (check(item)) {
return true;
}
}
else if (filter(item)) {
return true;
}
const currentValue = props.value;
return multiple ? includes(currentValue || [], item.id) : currentValue === item.id;
}), orderFields, orderFieldsOrder).map((item) => ({
value: getId(item),
label: labelCallback(item),
entry: item,
})),
], [items, filter, labelCallback, props.value, multiple, extraOptions, orderFields, orderFieldsOrder]);
useEffect(() => {
if (props.onOptions) {
props.onOptions(options);
}
}, [options]);
useImperativeHandle(ref, () => ({
getObject: (id, objects) => find(objects, (o) => o.id === id),
}));
if (expand) {
if (multiple) {
return _jsx(Checkbox.Group, Object.assign({ options: options }, props));
}
return _jsx(Radio.Group, Object.assign({ options: options }, props));
}
const selectProps = Object.assign({}, props);
if (multiple) {
selectProps.mode = 'multiple';
if (column) {
selectProps.className = clsx(selectProps.className, 'apant-select-column');
}
}
else if (selectProps.allowClear === undefined) {
selectProps.allowClear = true;
}
return (_jsx(Select, Object.assign({ showSearch: true, placeholder: "S\u00E9lectionnez un \u00E9l\u00E9ment", optionFilterProp: "children", notFoundContent: "Aucun \u00E9l\u00E9ment trouv\u00E9", filterOption: (input, option) => (option ? searchFilter(option === null || option === void 0 ? void 0 : option.entry, input) : false), options: options }, selectProps, { loading: (selectProps === null || selectProps === void 0 ? void 0 : selectProps.loading) || load, disabled: (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled) || load })));
});
export default SelectType;
//# sourceMappingURL=SelectType.js.map