@sparklink-pro/apant
Version:
Apollo & Antd tools
109 lines • 7.4 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useMemo, useEffect } from 'react';
import { Button, Input, Table } from 'antd';
import { omit } from 'lodash-es';
import { useVT } from 'virtualizedtableforantd4';
import { useRegistry } from '../hooks';
import { useConfiguration } from '../hooks/useConfiguration';
import { useType } from '../hooks/useType';
import { useTypeAdmin } from '../hooks/useTypeAdmin';
import { useTypeList } from '../hooks/useTypeList';
import { useTypeSearch } from '../hooks/useTypeSearch';
import { ContextWrapperDefault, ContextWrapperQueries } from './AsyncWrappers';
const { Search } = Input;
const defaultHeights = {
extra: 40,
header: 50,
footer: 50,
};
export function AdminTypeHeader({ type, context, search, setSearch, extraLeft, extraRight, items, itemsFiltered, itemsSelected, onNew, }) {
const { creatable = true, searchable = true } = useTypeAdmin({ type, context });
const { translator, iconRenderer } = useConfiguration();
return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { children: [searchable && (_jsx(Search, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: translator === null || translator === void 0 ? void 0 : translator.admin.searchPlaceholder(type), style: { width: 320 }, allowClear: true })), extraLeft && extraLeft({ items, itemsFiltered, itemsSelected })] }), _jsxs("div", { children: [extraRight && extraRight({ items, itemsFiltered, itemsSelected }), creatable && onNew && (_jsxs(Button, { ghost: true, type: "primary", onClick: () => onNew({ type, context }), children: [iconRenderer('plus', { style: { width: 24 } }), " ", translator.admin.createLabel(type)] }))] })] }));
}
export function AdminTypeFooter({ type, items, itemsSelected, selectable, currentPageData, className, children }) {
const footerTranslation = useConfiguration().translator.admin.footer;
const total = items.length;
return (_jsxs("div", { className: className, children: [_jsxs("div", { children: [footerTranslation.total(type, total), ", ", footerTranslation.displayed(type, currentPageData.length), selectable && _jsxs(_Fragment, { children: [", ", footerTranslation.selected(type, itemsSelected.length)] })] }), _jsx("div", { children: children })] }));
}
// Return an Table with the given type.
export function AdminTypeInner(_a) {
var { type, extraRight, extraLeft, context: adminContext, heights, onNew, onLink, contextExtraProps, queryOptions } = _a, props = __rest(_a, ["type", "extraRight", "extraLeft", "context", "heights", "onNew", "onLink", "contextExtraProps", "queryOptions"]);
const [search, setSearch] = useState('');
const { getId } = useType({ type });
const [selected, setSelected] = useState([]);
const context = useMemo(() => (Object.assign(Object.assign({}, adminContext), { extra: contextExtraProps })), [adminContext, contextExtraProps]);
const { creatable = true, searchable = true, selectable = false, columns, filter, loading: loadingAdmin, props: propsAdmin, headerComponent, footerComponent, queryOptions: queryOptionsAdmin, } = useTypeAdmin({ type, context });
const { items: _items, loading, refetch } = useTypeList(Object.assign(Object.assign({ type, skip: !!props.dataSource }, queryOptions), queryOptionsAdmin));
const searchFilter = useTypeSearch({ type });
const HeaderComponent = headerComponent || AdminTypeHeader;
const FooterComponent = footerComponent || AdminTypeFooter;
const baseItems = props.dataSource ? props.dataSource : _items;
// It filter the items by the search string.
// if filter is defined, it will also use it to filter the items.
const items = useMemo(() => (filter ? baseItems.filter((item) => filter(item, context)) : baseItems), [baseItems, filter, context]);
const itemsFiltered = useMemo(() => {
if (search) {
return items.filter((item) => searchFilter(item, search, context));
}
return items;
}, [search, loading, items, type, filter]);
// Reset search on type change
useEffect(() => {
setSearch('');
}, [type]);
// return the columns set in the type.
const cols = useMemo(() => [
...columns.map((c) => (Object.assign(Object.assign({}, c), { render: c.link && onLink
? (content, object) => (_jsx("a", { role: "link", "aria-hidden": "true", onClick: () => onLink(object, { type, context }), children: c.render ? c.render(content, object) : content }))
: c.render }))),
], [type, loadingAdmin, columns]);
const headerFooterProps = {
type,
context,
search,
items,
itemsFiltered,
itemsSelected: selected,
selectable,
refetch,
};
const hasHeader = searchable || creatable || extraRight || extraLeft;
const headerProps = Object.assign(Object.assign({}, headerFooterProps), { setSearch,
extraLeft,
extraRight,
onNew });
const footerProps = Object.assign({}, headerFooterProps);
const title = useMemo(() => (hasHeader ? () => _jsx(HeaderComponent, Object.assign({}, headerProps)) : undefined), [hasHeader, headerProps, selected]);
const footer = (currentPageData) => _jsx(FooterComponent, Object.assign({}, footerProps, { currentPageData: currentPageData }));
// Virtualization.
// See https://github.com/wubostc/virtualized-table-for-antd
const [vt] = useVT(() => ({ scroll: { y: 1280 } }), []);
const scroll = {};
if (heights.offset) {
scroll.y = `calc(100vh - ${heights.offset +
(heights.header || defaultHeights.header) +
(heights.footer || defaultHeights.footer) +
(hasHeader ? heights.extra || defaultHeights.extra : 0)}px)`;
}
const selection = {};
if (selectable) {
selection.rowSelection = Object.assign({ onChange: (selectedRowKeys) => setSelected(selectedRowKeys), selectedRowKeys: selected }, propsAdmin === null || propsAdmin === void 0 ? void 0 : propsAdmin.rowSelection);
}
return (_jsx("div", { className: `admin-${type}`, children: _jsx(Table, Object.assign({ components: vt, title: title, footer: footer, columns: cols, dataSource: itemsFiltered || [], loading: loading || loadingAdmin, scroll: scroll, pagination: false, rowKey: getId }, selection, props, omit(propsAdmin, ['rowSelection']))) }));
}
/**
* Render a antd form wrapper with the list of fields.
*/
export function AdminType(props) {
var _a;
const registry = useRegistry();
const { type } = props;
const configuration = registry.getType(type);
const context = (_a = configuration.admin) === null || _a === void 0 ? void 0 : _a.context;
const ContextWrapperCustom = (context === null || context === void 0 ? void 0 : context.wrapper) || ContextWrapperDefault;
return (_jsx(ContextWrapperCustom, { children: (customExtraProps) => (_jsx(ContextWrapperQueries, { queries: (context === null || context === void 0 ? void 0 : context.queries) || {}, children: (queryExtraProps) => _jsx(AdminTypeInner, Object.assign({}, props, { contextExtraProps: Object.assign(Object.assign({}, customExtraProps), queryExtraProps) })) })) }));
}
export default AdminType;
//# sourceMappingURL=AdminType.js.map