Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 66x 66x 445x 5x 5x 66x 3x 3x 66x 5x 5x 5x 5x 66x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { ReactElement } from 'react';
import { Collapse, Space, Tooltip } from 'antd';
import { DynamicIcon } from '../components';
import { GroupedFormFields, GroupMetaProps } from "@props/RecordProps";
import { QuestionCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
import i18n from "@config/i18n";
import { stripPackagePart } from '@utils/StringUtils';
import { DataCollectFormHideFieldClassName } from '@config/ui';
const { Panel } = Collapse;
export const isFieldNotReadonlyBasedOnGroupMeta = (
groupId: number | undefined, groups: GroupMetaProps[]
): boolean => {
if (groupId == null) { return true; }
const groupObj = groups.filter(g => g.id === groupId)?.[0];
return (groupObj?.displayMode !== "readonly");
};
export const getTranslatedFormGroupLabel = (domainName: string, group: GroupMetaProps): React.ReactNode => {
const transKey = `formGroup:${stripPackagePart(domainName)}.${group.label}`;
return (i18n.exists(transKey))? i18n.t(transKey) : group.label;
};
export const panel = (
domainName: string,
group: GroupMetaProps,
fields: Array<ReactElement>,
callback: () => void,
nowDisplay: boolean
): ReactElement => {
const allFieldsHidden = fields.every(field =>
field.props?.className?.includes(DataCollectFormHideFieldClassName)
);
const panelClassName = allFieldsHidden ?
`${DataCollectFormHideFieldClassName} site-collapse-custom-panel` : 'site-collapse-custom-panel';
const header = (group.icon != null) ? (
<span
onClick={callback}
>
<CaretRightOutlined
rotate={nowDisplay ? 90 : 0}
style={{ marginRight: "1em" }}
/>
<Space
size="small"
>
<DynamicIcon type={group.icon} /> {getTranslatedFormGroupLabel(domainName, group)}
</Space>
</span>
) : group.label;
return (
<Panel
header={header}
extra={
<Tooltip title={group.helpText}><QuestionCircleOutlined /> </Tooltip>
}
key={group.id}
className={panelClassName}
>
{fields}
</Panel>
);
};
export const panels = (
domainName: string,
fields: GroupedFormFields,
groups: Array<GroupMetaProps>,
activeGroups: Array<GroupMetaProps>,
setActiveGroups: (value: Array<GroupMetaProps>) => void
): Array<React.ReactElement> => {
const result = [] as Array<ReactElement>;
for (const [key, value] of Object.entries(fields)) {
const group = groups.find(g => g.id.toString() === key.toString());
Eif (group != null && group.displayMode !== 'hide') {
const nowDisplay = (activeGroups.find(g => g.id === group.id) != null);
const callback = (): void => {
const nowDisplay = (activeGroups.find(g => g.id === group.id) != null);
if (nowDisplay) {
setActiveGroups(activeGroups.filter(g => g.id !== group.id));
} else {
setActiveGroups([...activeGroups, group]);
}
};
const groupIdx = groups.findIndex(g => g.id === group.id);
result[groupIdx] = panel(domainName, group, value, callback, nowDisplay);
}
}
return result;
};
|