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

Issue 10 lazy loading #46

Merged
merged 8 commits into from
Nov 17, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 .prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = {
singleQuote: true,
arrowParens: 'always',
trailingComma: 'all',
jsxBracketSameLine: true,
bracketSameLine: true,
jsxSingleQuote: true,
endOfLine: 'lf',
//quoteProps: 'consistent',
Expand Down
54 changes: 27 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@agentlab/ldkg-ui-react",
"version": "0.1.15",
"version": "0.1.16",
"description": "LDKG Forms UI Components",
"license": "GPL-3.0",
"author": "Alexey Ivanov <[email protected]>",
Expand Down Expand Up @@ -52,28 +52,28 @@
"lint-staged": "lint-staged"
},
"peerDependencies": {
"@agentlab/sparql-jsld-client": ">=5.0.1",
"@agentlab/sparql-jsld-client": ">=5.0.3",
"@ant-design/icons": ">=4.7.0",
"@rdfjs/data-model": ">=1.3.4",
"@tinymce/tinymce-react": ">=3.13.0",
"antd": ">=4.16.13",
"history": ">=5.1.0",
"lodash-es": ">=4.17.21",
"mobx": ">=6.3.6",
"mobx": ">=6.3.7",
"mobx-react-lite": ">=3.2.2",
"mobx-state-tree": ">=5.0.4",
"mobx-state-tree": ">=5.0.5",
"moment": ">=2.29.1",
"rc-util": ">=5.14.0",
"rc-util": ">=5.15.0",
"react": ">=17.0.2",
"react-base-table": ">=1.13.0",
"react-collapse-pane": ">=2.0.1",
"react-dnd": ">=13.1.1",
"react-dnd-html5-backend": ">=12.1.1",
"react-dom": ">=17.0.2",
"react-error-boundary": ">=3.1.4",
"react-horizontal-scrolling-menu": ">=2.5.1",
"react-router": ">=6.0.1",
"react-router-dom": ">=6.0.1",
"react-horizontal-scrolling-menu": ">=2.5.2",
"react-router": ">=6.0.2",
"react-router-dom": ">=6.0.2",
"react-sortable-hoc": ">=2.0.0",
"react-split-pane": ">=2.0.3",
"react-virtualized": ">=9.22.3",
Expand All @@ -83,32 +83,32 @@
"uuid62": ">=1.0.1"
},
"dependencies": {
"@agentlab/sparql-jsld-client": "^5.0.1",
"@agentlab/sparql-jsld-client": "^5.0.3",
"@ant-design/icons": "^4.7.0",
"@tinymce/tinymce-react": "^3.13.0",
"@types/react": "^17.0.34",
"@types/react": "^17.0.35",
"@types/react-dom": "^17.0.11",
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.3.2",
"@types/react-virtualized": "^9.21.14",
"@types/react-virtualized": "^9.21.15",
"@types/styled-components": "^5.1.15",
"@types/tinymce": "^4.6.4",
"antd": "^4.16.13",
"history": "^5.1.0",
"mobx-react-lite": "^3.2.2",
"mst-middlewares": "^5.0.4",
"mst-middlewares": "^5.0.5",
"react": "^17.0.2",
"react-base-table": "^1.13.0",
"react-collapse-pane": "^2.0.1",
"react-dnd": "13.1.1",
"react-dnd-html5-backend": "12.1.1",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.4",
"react-horizontal-scrolling-menu": "^2.5.1",
"react-horizontal-scrolling-menu": "^2.5.2",
"react-is": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^6.0.1",
"react-router-dom": "^6.0.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-sortable-hoc": "^2.0.0",
"react-split-pane": "^2.0.3",
"react-virtualized": "^9.22.3",
Expand All @@ -135,34 +135,34 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"autoprefixer": "^10.4.0",
"babel-loader": "^8.2.3",
"cross-env": "^7.0.3",
"cssnano": "^5.0.10",
"cssnano": "^5.0.11",
"cypress": "^8.7.0",
"cypress-storybook": "^0.5.1",
"eslint": "^7.32.0",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-flowtype": "^6.1.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^25.2.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"husky": "^7.0.4",
"jest": "^27.3.1",
"jest-watch-typeahead": "^1.0.0",
"lint-staged": "^11.2.6",
"lint-staged": "^12.0.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"prettier": "2.3.2",
"prettier": "2.4.1",
"rimraf": "^3.0.2",
"rollup": "^2.59.0",
"rollup": "^2.60.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.1",
Expand Down
1 change: 1 addition & 0 deletions src/DispatchCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
...rest
}) => {
const { cells } = useContext(MstContext);
if (schema && schema.items) schema = { ...schema, ...schema.items };
const renderer = maxBy(cells, (r) => r.tester(viewKindElement, schema));
if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
return (
Expand Down
6 changes: 4 additions & 2 deletions src/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { JsonSchema7 } from './models/jsonSchema7';
//import ModalAntd from './antd/util/AntdModal';
import { MstContext } from './MstContext';
import { UnknownRenderer } from './UnknownRenderer';
import { Actions } from './actions';
import { RankedTester } from './testers';
import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema';

Expand Down Expand Up @@ -59,7 +60,7 @@ export interface FormsDispatchProps {
}
export interface RenderProps extends FormsDispatchProps {
viewDescrElement?: IViewDescrElement;

actions?: Actions;
id: string;
schema: JsonSchema7;
readOnly?: boolean;
Expand Down Expand Up @@ -127,7 +128,7 @@ export const processViewKindOverride = (
};

export const FormsDispatch = observer<FormsDispatchProps>((props) => {
const { store, renderers } = useContext(MstContext);
const { store, renderers, actions } = useContext(MstContext);
const { viewKind, viewDescr, form, enabled } = props;

const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
Expand Down Expand Up @@ -166,6 +167,7 @@ export const FormsDispatch = observer<FormsDispatchProps>((props) => {
viewDescr={viewDescr}
viewDescrElement={viewDescrElement}
schema={schema}
actions={actions}
enabled={enabled}
form={form}
/>
Expand Down
7 changes: 6 additions & 1 deletion src/MstContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,33 @@
import React, { createContext, PropsWithChildren } from 'react';
import { CellRendererRegistryEntry, RendererRegistryEntry } from './renderers';
import { registerMstViewDescrSchema, registerMstViewKindSchema } from './models/MstViewDescr';
import { Actions } from './actions';

export interface MstContextProps {
store: any;
renderers: RendererRegistryEntry[];
cells: CellRendererRegistryEntry[];
actions: Actions;
}

export const MstContext = createContext<MstContextProps>({
store: {},
renderers: [],
cells: [],
actions: {},
});

export const MstContextProvider = ({
store,
renderers,
cells = [],
children,
actions = {},
}: PropsWithChildren<{
store: any;
renderers: RendererRegistryEntry[];
cells?: CellRendererRegistryEntry[];
actions?: Actions;
}>): JSX.Element => {
renderers.forEach((r) => {
const mstVkeType = (r as any).mstVkeType;
Expand All @@ -53,5 +58,5 @@ export const MstContextProvider = ({
registerMstViewDescrSchema(mstVdeType, true);
}
});
return <MstContext.Provider value={{ store, renderers, cells }}>{children}</MstContext.Provider>;
return <MstContext.Provider value={{ store, renderers, cells, actions }}>{children}</MstContext.Provider>;
};
32 changes: 32 additions & 0 deletions src/actions/baseActions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { ActionFunctionProps } from './types';
import { getSnapshot, applySnapshot } from 'mobx-state-tree';

export const addObjects = ({ root, coll, selection, options }: ActionFunctionProps) => {
console.log('SELECTION', selection);
//coll.testOnAddObjs([selection]);
};

export const addTreeObj = ({ root, coll, selection, options }: ActionFunctionProps) => {
const node = selection[0] as any;
const newObj = {
[node.titlePropName]: 'New node',
[node.parentKey]: node['@id'],
};
return coll.testOnAddObjs([newObj]);
};
export const deleteObjects = ({ root, coll, selection, options }: ActionFunctionProps) => {
coll.testOnDeleteObjs(selection.map((obj: any) => obj['@id']));
};

export const addConectionToTarget = ({ root, coll, selection, options }: ActionFunctionProps) => {
const target = options?.target;
if (target) {
const targetColl = root.getColl(target);
const targetData = targetColl?.data;
if (targetData) {
const snapData = getSnapshot(targetData) as any;
const newData = [...snapData, ...selection];
applySnapshot(targetData, newData);
}
}
};
1 change: 1 addition & 0 deletions src/actions/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const NoTitleProvided = 'No title provided';
11 changes: 11 additions & 0 deletions src/actions/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { addObjects, deleteObjects, addConectionToTarget, addTreeObj } from './baseActions';
import { Actions } from './types';
export * from './types';
export * from './utils';

export const actions: Actions = {
'ldkg:addObjects': addObjects,
'ldkg:deleteObjects': deleteObjects,
'ldkg:addConectionToTarget': addConectionToTarget,
'ldkg:addTreeObj': addTreeObj,
};
8 changes: 8 additions & 0 deletions src/actions/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type ActionFunctionProps = {
root: any;
coll: any;
selection: unknown[];
options?: { [key: string]: unknown };
};

export type Actions = Partial<{ [key: string]: (args: ActionFunctionProps) => Promise<void> | void }>;
31 changes: 31 additions & 0 deletions src/actions/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Actions } from './types';
import { NoTitleProvided } from './constants';

type MapViewKindPropsToActionsProps = {
actions: Actions;
viewKindActionProps?: { '@id': string; '@type': string; title?: string; options: { [key: string]: unknown } }[];
coll: unknown;
root: any;
};

type ReturnShape = {
title: string;
action: (selection: unknown[]) => Promise<void> | void;
};
export const mapViewKindPropsToActions = ({
actions,
viewKindActionProps,
coll,
root,
}: MapViewKindPropsToActionsProps): ReturnShape[] | undefined =>
viewKindActionProps &&
viewKindActionProps.reduce((acc: ReturnShape[], props): ReturnShape[] => {
const actionType = props['@type'];
if (actionType in actions) {
acc.push({
title: props.title || NoTitleProvided,
action: (selection: unknown[]) => actions[actionType]?.({ coll, options: props.options, selection, root }),
});
}
return acc;
}, [] as ReturnShape[]);
42 changes: 42 additions & 0 deletions src/components/ContextMenu/ContextMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/********************************************************************************
* Copyright (c) 2021 Agentlab and others.
*
* This program and the accompanying materials are made available under the
* terms of the GNU General Public License v. 3.0 which is available at
* https://www.gnu.org/licenses/gpl-3.0.html.
*
* SPDX-License-Identifier: GPL-3.0-only
********************************************************************************/
import React from 'react';
import { JsObject } from '@agentlab/sparql-jsld-client';

import './index.css';

interface ContextMenuProps {
record: JsObject;
selection: any[];
visible: boolean;
x: number | string;
y: number | string;
actionsMap?: { title: string; action: (selection: unknown[]) => Promise<void> | void }[];
onClick: () => void;
}

export const ContextMenu: React.FC<ContextMenuProps> = ({ record, selection, visible, x, y, actionsMap, onClick }) => {
return (
(actionsMap && visible && (
<ul className='popup' style={{ left: `${x}px`, top: `${y}px`, position: 'fixed' }}>
{actionsMap.map(({ title, action }) => (
<li
onClick={() => {
action(selection);
onClick();
}}>
{title}
</li>
))}
</ul>
)) ||
null
);
};
Loading