Skip to content

Commit c9c98f0

Browse files
jacqueswhojacqueswho
authored
Merge pull request #59 from trixtateam/feature/update_rsjf_submitButtonOptions
feat: update RSJF and make use of submitButtonOptions
2 parents 166cffb + 15d6682 commit c9c98f0

File tree

5 files changed

+250
-20
lines changed

5 files changed

+250
-20
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
"@redux-saga/core": "1.0.3",
162162
"@redux-saga/types": "1.1.0",
163163
"@reduxjs/toolkit": "^1.6.1",
164-
"@rjsf/core": "3.2.1",
164+
"@rjsf/core": "4.2.0",
165165
"@rollup/plugin-babel": "5.2.3",
166166
"@rollup/plugin-commonjs": "17.1.0",
167167
"@rollup/plugin-json": "4.1.0",

‎src/React/__tests__/general.test.ts

+216-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,219 @@
1+
import { getDefaultUISchema } from '../../utils/trixta';
2+
13
describe('trixta Tests', () => {
2-
it('Comming soon', () => {
3-
expect(true).toEqual(true);
4+
describe('React Json Schema Form', () => {
5+
describe('Request for Effect true', () => {
6+
it('Should merge uiSchema with norender true with existing uiSchema', () => {
7+
const requestForEffect = true;
8+
const inComingSchema = {
9+
'ui:submitButtonOptions': {
10+
submitText: 'Confirm Details',
11+
norender: false,
12+
props: {
13+
disabled: false,
14+
className: 'btn btn-info',
15+
},
16+
},
17+
firstName: {
18+
'ui:autofocus': true,
19+
'ui:emptyValue': '',
20+
'ui:autocomplete': 'family-name',
21+
},
22+
lastName: {
23+
'ui:title': 'Surname',
24+
'ui:emptyValue': '',
25+
'ui:autocomplete': 'given-name',
26+
},
27+
age: {
28+
'ui:widget': 'updown',
29+
'ui:title': 'Age of person',
30+
'ui:description': '(earthian year)',
31+
},
32+
bio: {
33+
'ui:widget': 'textarea',
34+
},
35+
password: {
36+
'ui:widget': 'password',
37+
'ui:help': 'Hint: Make it strong!',
38+
},
39+
date: {
40+
'ui:widget': 'alt-datetime',
41+
},
42+
telephone: {
43+
'ui:options': {
44+
inputType: 'tel',
45+
},
46+
},
47+
};
48+
49+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
50+
expect(result).toHaveProperty('ui:submitButtonOptions');
51+
expect(result['ui:submitButtonOptions']['norender']).toEqual(true);
52+
});
53+
54+
it('Should return uiSchema with norender true with no uiSchema', () => {
55+
const requestForEffect = true;
56+
const inComingSchema = undefined;
57+
58+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
59+
expect(result).toHaveProperty('ui:submitButtonOptions');
60+
expect(result['ui:submitButtonOptions']['norender']).toEqual(true);
61+
});
62+
63+
it('Should return uiSchema with norender true with uiSchema and norender false', () => {
64+
const requestForEffect = true;
65+
const inComingSchema = {
66+
'ui:submitButtonOptions': {
67+
submitText: 'Confirm Details',
68+
norender: true,
69+
props: {
70+
disabled: false,
71+
className: 'btn btn-info',
72+
},
73+
},
74+
firstName: {
75+
'ui:autofocus': true,
76+
'ui:emptyValue': '',
77+
'ui:autocomplete': 'family-name',
78+
},
79+
lastName: {
80+
'ui:title': 'Surname',
81+
'ui:emptyValue': '',
82+
'ui:autocomplete': 'given-name',
83+
},
84+
age: {
85+
'ui:widget': 'updown',
86+
'ui:title': 'Age of person',
87+
'ui:description': '(earthian year)',
88+
},
89+
bio: {
90+
'ui:widget': 'textarea',
91+
},
92+
password: {
93+
'ui:widget': 'password',
94+
'ui:help': 'Hint: Make it strong!',
95+
},
96+
date: {
97+
'ui:widget': 'alt-datetime',
98+
},
99+
telephone: {
100+
'ui:options': {
101+
inputType: 'tel',
102+
},
103+
},
104+
};
105+
106+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
107+
expect(result).toHaveProperty('ui:submitButtonOptions');
108+
expect(result['ui:submitButtonOptions']['norender']).toEqual(true);
109+
});
110+
});
111+
112+
describe('Request for Effect false', () => {
113+
it('Should merge uiSchema with norender false with existing uiSchema', () => {
114+
const requestForEffect = false;
115+
const inComingSchema = {
116+
'ui:submitButtonOptions': {
117+
submitText: 'Confirm Details',
118+
norender: false,
119+
props: {
120+
disabled: false,
121+
className: 'btn btn-info',
122+
},
123+
},
124+
firstName: {
125+
'ui:autofocus': true,
126+
'ui:emptyValue': '',
127+
'ui:autocomplete': 'family-name',
128+
},
129+
lastName: {
130+
'ui:title': 'Surname',
131+
'ui:emptyValue': '',
132+
'ui:autocomplete': 'given-name',
133+
},
134+
age: {
135+
'ui:widget': 'updown',
136+
'ui:title': 'Age of person',
137+
'ui:description': '(earthian year)',
138+
},
139+
bio: {
140+
'ui:widget': 'textarea',
141+
},
142+
password: {
143+
'ui:widget': 'password',
144+
'ui:help': 'Hint: Make it strong!',
145+
},
146+
date: {
147+
'ui:widget': 'alt-datetime',
148+
},
149+
telephone: {
150+
'ui:options': {
151+
inputType: 'tel',
152+
},
153+
},
154+
};
155+
156+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
157+
expect(result).toHaveProperty('ui:submitButtonOptions');
158+
expect(result['ui:submitButtonOptions']['norender']).toEqual(false);
159+
});
160+
161+
it('Should return uiSchema with norender false with no uiSchema', () => {
162+
const requestForEffect = false;
163+
const inComingSchema = undefined;
164+
165+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
166+
expect(result).toHaveProperty('ui:submitButtonOptions');
167+
expect(result['ui:submitButtonOptions']['norender']).toEqual(false);
168+
});
169+
170+
it('Should return uiSchema with norender false with uiSchema and norender true', () => {
171+
const requestForEffect = false;
172+
const inComingSchema = {
173+
'ui:submitButtonOptions': {
174+
submitText: 'Confirm Details',
175+
norender: true,
176+
props: {
177+
disabled: false,
178+
className: 'btn btn-info',
179+
},
180+
},
181+
firstName: {
182+
'ui:autofocus': true,
183+
'ui:emptyValue': '',
184+
'ui:autocomplete': 'family-name',
185+
},
186+
lastName: {
187+
'ui:title': 'Surname',
188+
'ui:emptyValue': '',
189+
'ui:autocomplete': 'given-name',
190+
},
191+
age: {
192+
'ui:widget': 'updown',
193+
'ui:title': 'Age of person',
194+
'ui:description': '(earthian year)',
195+
},
196+
bio: {
197+
'ui:widget': 'textarea',
198+
},
199+
password: {
200+
'ui:widget': 'password',
201+
'ui:help': 'Hint: Make it strong!',
202+
},
203+
date: {
204+
'ui:widget': 'alt-datetime',
205+
},
206+
telephone: {
207+
'ui:options': {
208+
inputType: 'tel',
209+
},
210+
},
211+
};
212+
213+
const result = getDefaultUISchema(inComingSchema, requestForEffect);
214+
expect(result).toHaveProperty('ui:submitButtonOptions');
215+
expect(result['ui:submitButtonOptions']['norender']).toEqual(false);
216+
});
217+
});
4218
});
5219
});

‎src/React/components/TrixtaFormComponent/index.tsx

+3-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { FormProps } from '@rjsf/core';
22
import * as React from 'react';
33
import { config, TrixtaFormProps } from '../../../config';
4+
import { getDefaultUISchema } from '../../../utils/trixta';
45
import { DefaultUnknownType } from '../../types/common';
56

67
const withTheme = (props: TrixtaFormProps) => {
@@ -36,7 +37,6 @@ function TrixtaFormComponent<TFormData = DefaultUnknownType>({
3637
}: TrixtaReactJsonSchemaFormProps<TFormData>): JSX.Element {
3738
if (ThemedForm) {
3839
const { formContext: formContextThemeProp, ...formProps } = config.props;
39-
4040
return (
4141
<ThemedForm
4242
idPrefix={idPrefix}
@@ -45,18 +45,8 @@ function TrixtaFormComponent<TFormData = DefaultUnknownType>({
4545
formContext={{ ...formContextThemeProp, ...formContext }}
4646
formData={formData}
4747
{...formProps}
48-
uiSchema={uiSchema}
49-
>
50-
{submittable ? (
51-
<>
52-
<button type="submit" className="btn btn-info">
53-
Submit
54-
</button>
55-
</>
56-
) : (
57-
<></>
58-
)}
59-
</ThemedForm>
48+
uiSchema={getDefaultUISchema(uiSchema, !submittable)}
49+
/>
6050
);
6151
}
6252
return <>To make use of rsjf, npm install @rsjf/core dependency</>;

‎src/utils/trixta.ts

+26
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { FormProps } from '@rjsf/core';
12
import { nanoid } from 'nanoid';
23
import { SUBMIT_TRIXTA_ACTION_RESPONSE_SUCCESS } from '../React/constants/actions/index';
34
import { SUBMIT_TRIXTA_REACTION_RESPONSE_SUCCESS } from '../React/constants/reactions/index';
@@ -224,3 +225,28 @@ export function getChannelName({ role }: { role: string }): string {
224225
if (role.includes('space')) return role;
225226
return `space:${role}`;
226227
}
228+
229+
/**
230+
* Returns a default or updated schema with submitButtonOptions
231+
*/
232+
export function getDefaultUISchema(
233+
uiSchema: FormProps<unknown>['uiSchema'],
234+
requestForEffect: boolean,
235+
): unknown {
236+
const updatedSchema = uiSchema ? { ...uiSchema } : {};
237+
const submitButtonOptions =
238+
updatedSchema && updatedSchema['ui:submitButtonOptions']
239+
? {
240+
...updatedSchema['ui:submitButtonOptions'],
241+
}
242+
: {
243+
'ui:submitButtonOptions': {
244+
norender: false,
245+
},
246+
};
247+
submitButtonOptions['norender'] = requestForEffect;
248+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
249+
// @ts-ignore
250+
updatedSchema['ui:submitButtonOptions'] = submitButtonOptions;
251+
return updatedSchema;
252+
}

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -2507,10 +2507,10 @@
25072507
dependencies:
25082508
dequal "^2.0.2"
25092509

2510-
"@rjsf/core@3.2.1":
2511-
version "3.2.1"
2512-
resolved "https://registry.yarnpkg.com/@rjsf/core/-/core-3.2.1.tgz#8a7b24c9a6f01f0ecb093fdfc777172c12b1b009"
2513-
integrity sha512-dk8ihvxFbcuIwU7G+HiJbFgwyIvaumPt5g5zfnuC26mwTUPlaDGFXKK2yITp8tJ3+hcwS5zEXtAN9wUkfuM4jA==
2510+
"@rjsf/core@4.2.0":
2511+
version "4.2.0"
2512+
resolved "https://registry.yarnpkg.com/@rjsf/core/-/core-4.2.0.tgz#9ec807737039b5f63433682f332ecbcd6067a847"
2513+
integrity sha512-bGWWCZjXHhBCkzag1Yh6F7a15/D6AqKRyks1szYWdCe+4jwWU3maC3apUxHJlHFRz3V1aBW6j6i/UB6zHmFXLQ==
25142514
dependencies:
25152515
"@types/json-schema" "^7.0.7"
25162516
ajv "^6.7.0"

0 commit comments

Comments
 (0)