Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/generator/custom component panel #486

Merged
merged 2 commits into from
Aug 28, 2024
Merged

Fix/generator/custom component panel #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
79c2357
fix: table custom component selector
helloqian12138 Aug 26, 2024
eca9527
fix: group cell hook
helloqian12138 Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/drip-table-generator/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "drip-table-generator",
"version": "3.2.1-alpha.3",
"version": "3.2.1-alpha.5",
"description": "A visualization tool for generating schema of drip-table.",
"main": "dist/index.min.js",
"module": "lib/index.js",
Expand Down
77 changes: 38 additions & 39 deletions ...ip-table-generator/src/layouts/table-workstation/editable-table/components/cell/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,37 @@ export interface GroupCellProps<
const getIndex = (layout: number[], rowIndex: number, colIndex: number) => layout.slice(0, rowIndex).reduce((prev, curr) => prev + curr, 0) + colIndex;

function GroupCell<
RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
ExtraOptions extends Partial<DripTableExtraOptions> = never,
RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
ExtraOptions extends Partial<DripTableExtraOptions> = never,
>(props: GroupCellProps<RecordType, ExtraOptions>) {
const [dropDownIndex, setDropDownIndex] = React.useState([] as (number | 'content' | 'popover')[]);
const { currentComponentID } = React.useContext(GeneratorContext);
const columnToRender = 'schema' in props.column ? props.column.schema as DripTableBuiltInColumnSchema : props.column;
const DropdownRender = React.useCallback((colLength: number, componentIndex: number) => (
<ComponentsSelector
open={dropDownIndex.join(',') === [...props.path, componentIndex].join(',')}
tableId={props.tableConfig.tableId}
showFilter
customComponentPanel={props.customComponentPanel}
customColumnAddPanel={props.customColumnAddPanel}
onClose={() => setDropDownIndex([])}
onConfirm={(column, tableIndex) => {
const columnSchema = {
...column,
style: { width: `${100 / colLength}%` },
} as DripTableBuiltInColumnSchema;
props.onAddColumnItem([componentIndex], columnSchema, tableIndex);
}}
/>
), [
dropDownIndex,
props.path,
props.tableConfig.tableId,
props.customComponentPanel,
props.customColumnAddPanel,
setDropDownIndex,
props.onAddColumnItem,
]);
if (columnToRender?.component === 'group') {
const options = columnToRender.options;
const rootColumn = props.tableConfig.columns[props.columnIndex];
Expand All @@ -76,32 +101,6 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
const itemColumn = options.items[componentIndex] ?? null;
const itemColumnSchema = itemColumn && 'component' in itemColumn ? itemColumn : itemColumn?.schema;
const colChecked = currentComponentID && currentComponentID === itemColumnSchema?.key;
const DropdownRender = React.useCallback(() => (
<ComponentsSelector
open={dropDownIndex.join(',') === [...props.path, componentIndex].join(',')}
tableId={props.tableConfig.tableId}
showFilter
customComponentPanel={props.customComponentPanel}
customColumnAddPanel={props.customColumnAddPanel}
onClose={() => setDropDownIndex([])}
onConfirm={(column, tableIndex) => {
const columnSchema = {
...column,
style: { width: `${100 / colLength}%` },
} as DripTableBuiltInColumnSchema;
props.onAddColumnItem([componentIndex], columnSchema, tableIndex);
}}
/>
), [
dropDownIndex,
props.path,
componentIndex,
props.tableConfig.tableId,
props.customComponentPanel,
props.customColumnAddPanel,
setDropDownIndex,
props.onAddColumnItem,
]);
return (
<Col
key={colIndex}
Expand All @@ -126,16 +125,16 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
}}
>
{ itemColumnSchema && itemColumnSchema.key === currentComponentID && (
<div className="jfe-drip-table-generator-workstation-table-cell-group-close danger">
<Tooltip title="点击删除子组件">
<CloseOutlined
onClick={(e) => {
e.stopPropagation();
props.onRemoveColumnItem([componentIndex], props.columnIndex, props.tableConfig.tableId);
}}
/>
</Tooltip>
</div>
<div className="jfe-drip-table-generator-workstation-table-cell-group-close danger">
<Tooltip title="点击删除子组件">
<CloseOutlined
onClick={(e) => {
e.stopPropagation();
props.onRemoveColumnItem([componentIndex], props.columnIndex, props.tableConfig.tableId);
}}
/>
</Tooltip>
</div>
) }
{ itemColumnSchema
? (
Expand Down Expand Up @@ -167,7 +166,7 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
trigger={['click']}
open={dropDownIndex.join(',') === [...props.path, componentIndex].join(',')}
onOpenChange={(open) => { if (!open) { setDropDownIndex([]); } }}
dropdownRender={DropdownRender}
dropdownRender={() => DropdownRender(colLength, componentIndex)}
>
<div
className="jfe-drip-table-generator-workstation-table-cell-group-empty"
Expand Down
4 changes: 2 additions & 2 deletions ...tor/src/layouts/table-workstation/editable-table/components/components-selector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSour
ExtraOptions extends Partial<DripTableExtraOptions> = never,
>(props: ComponentsSelectorProps<RecordType, ExtraOptions>) {
const [groups, setGroups] = React.useState(getGroups(props.customComponentPanel));
const [components, setComponents] = React.useState(getComponentsConfigs('', props.customComponentPanel));
const [components, setComponents] = React.useState(getComponentsConfigs('', props.customComponentPanel, 'ComponentsSelector'));
const [title, setTitle] = React.useState('');
const [componentConfig, setComponentConfig] = React.useState(void 0 as DripTableComponentAttrConfig | undefined);
const [popoverConfig, setPopoverConfig] = React.useState(void 0 as DripTableComponentAttrConfig | undefined);
Expand All @@ -79,7 +79,7 @@ ExtraOptions extends Partial<DripTableExtraOptions> = never,
setTitle('');
setComponentConfig(void 0);
setGroups(getGroups(props.customComponentPanel));
setComponents(getComponentsConfigs('', props.customComponentPanel));
setComponents(getComponentsConfigs('', props.customComponentPanel, 'ComponentsSelector'));
}, []);

React.useEffect(() => {
Expand Down
8 changes: 6 additions & 2 deletions packages/drip-table-generator/src/layouts/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,19 @@ export const getGroups = <
export const getComponentsConfigs = <
RecordType extends DataSourceTypeAbbr<NonNullable<ExtraOptions['SubtableDataSourceKey']>>,
ExtraOptions extends Partial<DripTableExtraOptions> = never,
>(groupName?: string, customComponentPanel?: DripTableGeneratorProps<RecordType, ExtraOptions>['customComponentPanel']) => {
>(
groupName?: string,
customComponentPanel?: DripTableGeneratorProps<RecordType, ExtraOptions>['customComponentPanel'],
filterType?: string,
) => {
let componentsToUse = cloneDeep(tableComponents);
if (customComponentPanel) {
const customComponents = customComponentPanel.configs;
componentsToUse = customComponentPanel.mode === 'add' ? [...tableComponents, ...customComponents] : [...customComponents];
if (customComponentPanel.exclude) {
componentsToUse = componentsToUse.filter(item => !customComponentPanel.exclude?.includes(item['ui:type']));
} else if (customComponentPanel.filter) {
componentsToUse = componentsToUse.filter(customComponentPanel.filter);
componentsToUse = componentsToUse.filter(item => customComponentPanel.filter?.(item, filterType));
}
}
return groupName ? [...componentsToUse].filter(item => item.group === groupName) : [...componentsToUse];
Expand Down
2 changes: 1 addition & 1 deletion packages/drip-table-generator/src/typing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export interface DripTableGeneratorPanel<T> {
configs: T[];
orders?: string[];
exclude?: string[];
filter?: (item: DripTableComponentAttrConfig) => boolean;
filter?: (item: DripTableComponentAttrConfig, filterType?: string) => boolean;
}

export interface DTGCustomThemeOptions<
Expand Down
Loading