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.

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

feat: add runtime implementation of document preview component #1332

Merged
Prev Previous commit
Next Next commit
refactor: update document preview properties panel
vsgoulart committed Dec 12, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit aaf47131bc4e83f06ac968e34688a4fc563ff1b2
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import {
TableHeaderGroups,
LayoutGroup,
SecurityAttributesGroup,
DownloadSettings,
} from './groups';

import { hasEntryConfigured } from './Util';
@@ -57,6 +58,7 @@ export class PropertiesProvider {
groups = [
...groups,
GeneralGroup(field, editField, getService),
DownloadSettings(field, editField),
...OptionsGroups(field, editField, getService),
...TableHeaderGroups(field, editField),
SecurityAttributesGroup(field, editField),
Original file line number Diff line number Diff line change
@@ -70,5 +70,18 @@ function DocumentsDataSource(props) {
setValue,
variables,
tooltip,
validate,
});
}

// helpers //////////

/**
* @param {string|undefined} value
* @returns {string|null}
*/
const validate = (value) => {
if (typeof value !== 'string' || value.length === 0) {
return 'The document data source is required.';
}
};
Original file line number Diff line number Diff line change
@@ -64,16 +64,27 @@ function EndpointKey(props) {
element: field,
getValue,
id,
label: 'Document API endpoint key',
label: 'Document URL',
feel: 'required',
singleLine: true,
setValue,
variables,
description,
tooltip,
validate,
});
}

// helpers //////////

const description = <>An API endpoint for downloading a document</>;
/**
* @param {string|undefined} value
* @returns {string|null}
*/
const validate = (value) => {
if (typeof value !== 'string' || value.length === 0) {
return 'The document reference is required.';
}
};

const description = <>Define an API URL for downloading a document</>;
Original file line number Diff line number Diff line change
@@ -38,12 +38,13 @@ function MaxHeight(props) {

return NumberFieldEntry({
debounce,
label: 'Max height',
label: 'Max height of preview container',
element: field,
id,
getValue,
setValue,
validate,
description,
});
}

@@ -70,3 +71,5 @@ const validate = (value) => {
return 'Should be greater than zero.';
}
};

const description = <>Documents with height that exceeds the defined value will be vertically scrollable</>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { EndpointKeyEntry } from '../entries';

export function DownloadSettings(field, editField) {
const entries = [...EndpointKeyEntry({ field, editField })];

if (!entries.length) {
return null;
}

return {
id: 'downloadSettings',
label: 'Download settings',
entries,
};
}
Original file line number Diff line number Diff line change
@@ -27,7 +27,6 @@ import {
AcceptEntry,
MultipleEntry,
DocumentsDataSourceEntry,
EndpointKeyEntry,
} from '../entries';

export function GeneralGroup(field, editField, getService) {
@@ -60,7 +59,6 @@ export function GeneralGroup(field, editField, getService) {
...PaginationEntry({ field, editField }),
...RowCountEntry({ field, editField }),
...DocumentsDataSourceEntry({ field, editField }),
...EndpointKeyEntry({ field, editField }),
];

if (entries.length === 0) {
Original file line number Diff line number Diff line change
@@ -9,3 +9,4 @@ export { LayoutGroup } from './LayoutGroup';
export { SecurityAttributesGroup } from './SecurityAttributesGroup';
export { ConditionGroup } from './ConditionGroup';
export { TableHeaderGroups } from './TableHeaderGroups';
export { DownloadSettings } from './DownloadSettings';
Original file line number Diff line number Diff line change
@@ -3449,9 +3449,10 @@ describe('properties panel', function () {

// then
expectPanelStructure(container, {
General: ['Title', 'Documents metadata source', 'Document API endpoint key'],
General: ['Title', 'Documents metadata source'],
'Download settings': ['Document URL'],
Condition: [],
Appearance: ['Max height'],
Appearance: ['Max height of preview container'],
'Custom properties': [],
});
});

Unchanged files with check annotations Beta

return () => {
if (ref.current) {
observer.unobserve(ref.current);

Check warning on line 303 in packages/form-js-viewer/src/render/components/form-fields/DocumentPreview.js

GitHub Actions / Build (macos-latest, 20)

The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function

Check warning on line 303 in packages/form-js-viewer/src/render/components/form-fields/DocumentPreview.js

GitHub Actions / Build (ubuntu-20.04, 20)

The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function

Check warning on line 303 in packages/form-js-viewer/src/render/components/form-fields/DocumentPreview.js

GitHub Actions / Build (windows-latest, 20)

The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function
}
};
}, [ref]);