Skip to content

Commit

Permalink
Merge pull request #23 from AokiApp/issues-fix
Browse files Browse the repository at this point in the history
Batch Issues Fix
  • Loading branch information
yuki-js authored May 27, 2024
2 parents 96d0269 + cd52f25 commit fab4e37
Show file tree
Hide file tree
Showing 22 changed files with 286 additions and 80 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,5 +62,6 @@
"rollup-plugin-esbuild": "^6.1.1",
"rollup-plugin-postcss": "^4.0.2",
"typescript": "^5.3.3"
}
},
"packageManager": "npm@9.6.6+sha1.553376bb7b5de4b1cf2b5f3471f674b678c7e14d"
}
7 changes: 6 additions & 1 deletion packages/mantine-corporate/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ npm run start

## Installation

replace module name from @aokiapp/rjsf-mantine-theme
replace module name from `@aokiapp/rjsf-mantine-theme` to `@aokiapp/mantine-theme-corporate`

If you use `FileWidget` you need to install `@mantine/dropzone` as well, and make sure to `import '@mantine/dropzone/styles.css';` in your project.


```bash

## License

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,17 @@ export default function ArrayFieldItemTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any,
>(props: ArrayFieldTemplateItemType<T, S, F>) {
const { children, className, disabled, hasToolbar, index, readonly } = props;
const isDraggable = !disabled && !readonly && hasToolbar;
>(
props: ArrayFieldTemplateItemType<T, S, F> & {
orderable?: boolean;
removable?: boolean;
},
) {
const { children, className, disabled, index, readonly, orderable, removable, registry, uiSchema, onDropIndexClick } =
props;
const isDraggable = !disabled && !readonly && orderable;
const key = useId();
const { RemoveButton } = registry.templates.ButtonTemplates;
return (
<Draggable index={index} draggableId={key} key={key} isDragDisabled={!isDraggable}>
{(provided) => (
Expand All @@ -25,11 +32,19 @@ export default function ArrayFieldItemTemplate<
className={`armt-template-arrayfielditem ${className}`}
>
<Group style={{ flexGrow: 1 }} gap={0}>
{isDraggable && (
{isDraggable ? (
<div {...provided.dragHandleProps} className={classes.dragHandle}>
<IconGripVertical style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
</div>
)}
) : removable ? (
<RemoveButton
className='armt-template-afit-remove'
disabled={disabled || readonly}
onClick={onDropIndexClick(index)}
uiSchema={uiSchema}
registry={registry}
/>
) : null}
<Box style={{ flexGrow: 1 }}>{children}</Box>
</Group>
</Box>
Expand Down
18 changes: 10 additions & 8 deletions packages/mantine-corporate/src/templates/ArrayFieldTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { DragDropContext, Droppable } from '@hello-pangea/dnd';
import { useState } from 'react';
import classes from './ArrayFieldTemplate.module.css';
import { IconCopy, IconTrash } from '@tabler/icons-react';
import ArrayFieldItemTemplate from './ArrayFieldItemTemplate'; // do not use getTemplate here

/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
*
Expand Down Expand Up @@ -43,11 +44,6 @@ export default function ArrayFieldTemplate<
registry,
uiOptions,
);
const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
'ArrayFieldItemTemplate',
registry,
uiOptions,
);
const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
'ArrayFieldTitleTemplate',
registry,
Expand Down Expand Up @@ -82,6 +78,10 @@ export default function ArrayFieldTemplate<
</Group>
);

const orderable = (uiOptions.orderable ?? false) && !readonly && !disabled;
const removable = (uiOptions.removable ?? true) && !readonly && !disabled;
const copyable = (uiOptions.copyable ?? false) && !readonly && !disabled;

const [isDragging, setIsDragging] = useState(false);

let arrItems;
Expand All @@ -107,18 +107,20 @@ export default function ArrayFieldTemplate<
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => {
return <ArrayFieldItemTemplate key={key} {...itemProps} />;
return (
<ArrayFieldItemTemplate key={key} {...itemProps} orderable={orderable} removable={!!removable} />
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
{items[0].hasToolbar && isDragging && (
<Group m='sm'>
{items[0].hasCopy && (
{copyable && (
<DropToAction icon={<IconCopy />} label='コピー' className={classes.dropToCopy} droppableId='copy' />
)}
{items[0].hasRemove && (
{removable && (
<DropToAction icon={<IconTrash />} label='削除' className={classes.dropToRemove} droppableId='remove' />
)}
</Group>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@
transform: rotate(180deg);
}
}
.labels {
flex-wrap: nowrap;
}
.root {
border-radius: 8px;
padding: 8px;
Expand Down
122 changes: 74 additions & 48 deletions packages/mantine-corporate/src/templates/ObjectFieldTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,54 +60,80 @@ export default function ObjectFieldTemplate<
const classNames = options.classNames;
const containError = errorSchema && Object.keys(errorSchema).length > 0;

const legendNode = showLegend ? (
<Group onClick={toggle} className={classes.legend} justify='space-between' wrap='nowrap'>
<Group className={classes.labels} gap='xs'>
{title && (
<TitleFieldTemplate
id={titleId<T>(idSchema)}
title={title}
required={required}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
{description && (
<DescriptionFieldTemplate
id={descriptionId<T>(idSchema)}
description={description}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
</Group>
<IconChevronUp />
const legendInner = (
<Group gap='xs'>
{title && (
<TitleFieldTemplate
id={titleId<T>(idSchema)}
title={title}
required={required}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
{description && (
<DescriptionFieldTemplate
id={descriptionId<T>(idSchema)}
description={description}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
)}
</Group>
) : null;
return (
<Stack
id={idSchema.$id}
role='group'
gap={'xs'}
className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
>
{legendNode}
<Collapse in={opened} className={classes.collapse}>
<Box className='armt-template-objectfield-item'>
{properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
</Box>
{canExpand<T, S, F>(schema, uiSchema, formData) && (
<AddButton
className='object-property-expand'
onClick={onAddClick(schema)}
disabled={disabled || readonly}
uiSchema={uiSchema}
registry={registry}
/>
)}
</Collapse>
</Stack>
);

const contentInner = (
<>
<Box className='armt-template-objectfield-item'>
{properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
</Box>
{canExpand<T, S, F>(schema, uiSchema, formData) && (
<AddButton
className='object-property-expand'
onClick={onAddClick(schema)}
disabled={disabled || readonly}
uiSchema={uiSchema}
registry={registry}
/>
)}
</>
);

// default setting is uncollapsable
if (options.collapsable) {
const legendNode = showLegend ? (
<Group onClick={toggle} justify='space-between' wrap='nowrap'>
{legendInner}
<IconChevronUp size='1rem' />
</Group>
) : null;
return (
<Stack
id={idSchema.$id}
role='group'
gap={'xs'}
className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
>
{legendNode}
<Collapse in={opened} className={classes.collapse}>
{contentInner}
</Collapse>
</Stack>
);
} else {
const legendNode = showLegend ? legendInner : null;
return (
<Stack
id={idSchema.$id}
role='group'
gap={'xs'}
className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
>
{legendNode}
{contentInner}
</Stack>
);
}
}
1 change: 0 additions & 1 deletion packages/mantine-corporate/src/widgets/FileWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from '@rjsf/utils';
import { Badge, Card, Group, Text, Image, Box, AspectRatio, CloseButton, Stack } from '@mantine/core';
import { Dropzone, FileWithPath } from '@mantine/dropzone';
import '@mantine/dropzone/styles.css';
import {
IconCode,
IconFile,
Expand Down
10 changes: 8 additions & 2 deletions packages/mantine/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,23 @@ You can install the package:
npm:

```bash
npm install @mantine/core@7.4.0 @mantine/dates@7.4.0 @mantine/hooks@7.4.0 @rjsf/core @tabler/icons-react dayjs react
npm install @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme
```

yarn:

```bash
yarn add @mantine/core@7.4.0 @mantine/dates@7.4.0 @mantine/hooks@7.4.0 @rjsf/core @tabler/icons-react dayjs react
yarn add @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme
```

## Usage

```js
import { MantineProvider } from '@mantine/core';
import Form from '@aokiapp/rjsf-mantine-theme';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; // add only if you use MantineDateWidget
import '@mantine/dropzone/styles.css'; // add only if you use mantine-corparate and FileWidget

render(
<MantineProvider>
Expand All @@ -48,6 +51,9 @@ or with a custom theme:
```js
import { withTheme } from '@rjsf/core';
import { Theme as MantineTheme } from '@aokiapp/rjsf-mantine-theme';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; // if you use MantineDateWidget
import '@mantine/dropzone/styles.css'; // if you use mantine-corparate and FileWidget

// Make modifications to the theme with your own fields and widgets

Expand Down
74 changes: 74 additions & 0 deletions packages/mantine/src/fields/NullField.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { useEffect } from 'react';
import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions, getWidget } from '@rjsf/utils';

/** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
* also set to null if it has no value.
*
* Differences from the original:
* - Traverse the widget and use it
* - By default, use `NullWidget`, which is not present in the original
* - Hence, null fields can be replaced with custom ones
*
* @param props - The `FieldProps` for this template
*/
function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
props: FieldProps<T, S, F>,
) {
const {
schema,
name,
uiSchema,
idSchema,
formData,
required,
disabled = false,
readonly = false,
autofocus = false,
onChange,
onBlur,
onFocus,
registry,
rawErrors,
hideError,
} = props;

const { title } = schema;
const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
const { widget = 'NullWidget', placeholder = '', title: uiTitle, ...options } = getUiOptions<T, S, F>(uiSchema);
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
const label = uiTitle ?? title ?? name;
const Widget = getWidget<T, S, F>(schema, widget, widgets);

useEffect(() => {
if (formData === undefined) {
onChange(null as unknown as T);
}
}, [formData, onChange]);

return (
<Widget
options={options}
schema={schema}
uiSchema={uiSchema}
id={idSchema.$id}
name={name}
label={label}
hideLabel={!displayLabel}
hideError={hideError}
value={formData}
onChange={onChange}
onBlur={onBlur}
onFocus={onFocus}
required={required}
disabled={disabled}
readonly={readonly}
formContext={formContext}
autofocus={autofocus}
registry={registry}
placeholder={placeholder}
rawErrors={rawErrors}
/>
);
}

export default NullField;
15 changes: 15 additions & 0 deletions packages/mantine/src/fields/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';

import NullField from './NullField';

export function generateFields<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any,
>(): RegistryFieldsType<T, S, F> {
return {
NullField,
};
}

export default generateFields();
Loading

0 comments on commit fab4e37

Please sign in to comment.