@reactjsonforms/antd-renderers
Version:
Ant Design Renderer Set for JSON Forms
86 lines • 5.04 kB
JavaScript
/* eslint-disable react/display-name */
import merge from 'lodash/merge';
import get from 'lodash/get';
import React, { useMemo } from 'react';
import { JsonFormsDispatch, withJsonFormsContext, } from '@reactjsonforms/react';
import { composePaths, findUISchema, getFirstPrimitiveProp, moveDown, moveUp, Resolve, update, } from '@reactjsonforms/core';
import { Avatar, Button, Collapse, Space, Tooltip, Typography } from 'antd';
import { ArrowDownOutlined, ArrowUpOutlined, DeleteFilled, } from '@ant-design/icons';
import Hidden from '../util/Hidden';
const ExpandPanelRenderer = (props) => {
const { childLabel, childPath, index, key, moveDown, moveUp, enableMoveDown, enableMoveUp, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config, isExpanded, translations, ...panelProps } = props;
const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
const appliedUiSchemaOptions = merge({}, config, uischema.options);
const avatarStyle = useMemo(() => {
const style = { marginRight: '10px' };
if (isExpanded) {
style.backgroundColor = '#1890FF';
}
return style;
}, [isExpanded]);
const getExtra = () => {
return (React.createElement(React.Fragment, null,
React.createElement(Tooltip, { key: '1', title: 'Move up' },
React.createElement(Button, { shape: 'circle', "aria-label": translations.upAriaLabel, icon: React.createElement(ArrowUpOutlined, { rev: undefined }), onClick: moveUp(path, index), disabled: !enableMoveUp })),
React.createElement(Tooltip, { key: '2', title: 'Move down' },
React.createElement(Button, { shape: 'circle', "aria-label": translations.downAriaLabel, icon: React.createElement(ArrowDownOutlined, { rev: undefined }), onClick: moveDown(path, index), disabled: !enableMoveDown })),
appliedUiSchemaOptions.showSortButtons ? (React.createElement(Tooltip, { key: '3', title: 'Delete' },
React.createElement(Button, { shape: 'circle', "aria-label": translations.removeAriaLabel, onClick: removeItems(path, [index]), icon: React.createElement(DeleteFilled, { rev: undefined }) }))) : null));
};
return (React.createElement(Collapse.Panel, { ...panelProps, key: key, header: React.createElement(React.Fragment, null,
React.createElement(Avatar, { style: avatarStyle }, index + 1),
React.createElement(Hidden, { hidden: !childLabel },
React.createElement(Typography.Text, null, childLabel))), extra: React.createElement(Space, null, getExtra()) },
React.createElement(JsonFormsDispatch, { schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells })));
};
/**
* Maps state to dispatch properties of an expand pandel control.
*
* @param dispatch the store's dispatch method
* @returns {DispatchPropsOfArrayControl} dispatch props of an expand panel control
*/
export const ctxDispatchToExpandPanelProps = (dispatch) => ({
removeItems: (path, toDelete) => (event) => {
event.stopPropagation();
dispatch(update(path, (array) => {
toDelete
.sort()
.reverse()
.forEach((s) => array.splice(s, 1));
return array;
}));
},
moveUp: (path, toMove) => (event) => {
event.stopPropagation();
dispatch(update(path, (array) => {
moveUp(array, toMove);
return array;
}));
},
moveDown: (path, toMove) => (event) => {
event.stopPropagation();
dispatch(update(path, (array) => {
moveDown(array, toMove);
return array;
}));
},
});
/**
* Map state to control props.
* @param state the JSON Forms state
* @param ownProps any own props
* @returns {StatePropsOfControl} state props for a control
*/
export const withContextToExpandPanelProps = (Component) => function WithContextToExpandPanelProps({ ctx, props, }) {
const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
const { childLabelProp, schema, path, index, uischemas } = props;
const childPath = composePaths(path, `${index}`);
const childData = Resolve.data(ctx.core.data, childPath);
const childLabel = childLabelProp
? get(childData, childLabelProp, '')
: get(childData, getFirstPrimitiveProp(schema), '');
return (React.createElement(Component, { ...props, ...dispatchProps, childLabel: childLabel, childPath: childPath, uischemas: uischemas }));
};
export const withJsonFormsExpandPanelProps = (Component) => withJsonFormsContext(withContextToExpandPanelProps(Component));
export default withJsonFormsExpandPanelProps(ExpandPanelRenderer);
//# sourceMappingURL=ExpandPanelRenderer.js.map