Skip to content

Commit 6520e02

Browse files
okaeizokaeiz
committed
Implemented RTL adherence for Action and Selection components
1 parent 9120642 commit 6520e02

File tree

6 files changed

+61
-9
lines changed

6 files changed

+61
-9
lines changed

‎packages/form-js-viewer/src/render/components/form-fields/Button.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
import { formFieldClasses } from '../Util';
2-
import { useSingleLineTemplateEvaluation } from '../../hooks';
2+
import { useSingleLineTemplateEvaluation, useService } from '../../hooks';
33

44
const type = 'button';
55

66
export function Button(props) {
77
const { disabled, onFocus, onBlur, field } = props;
8-
98
const { action = 'submit' } = field;
10-
119
const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true });
1210

11+
const form = useService('form');
12+
const { schema } = form._getState();
13+
14+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
15+
1316
return (
14-
<div class={formFieldClasses(type)}>
17+
<div
18+
class={formFieldClasses(type)}
19+
style={{
20+
direction: direction,
21+
fontFamily: 'Vazirmatn, sans-serif',
22+
}}>
1523
<button
1624
class="fjs-button"
1725
type={action}

‎packages/form-js-viewer/src/render/components/form-fields/Checkbox.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Description } from '../Description';
22
import { Errors } from '../Errors';
33
import { Label } from '../Label';
4+
import { useService } from '../../hooks';
45

56
import { formFieldClasses } from '../Util';
67

@@ -23,9 +24,17 @@ export function Checkbox(props) {
2324

2425
const descriptionId = `${domId}-description`;
2526
const errorMessageId = `${domId}-error-message`;
27+
const form = useService('form');
28+
const { schema } = form._getState();
29+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
2630

2731
return (
28-
<div class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}>
32+
<div
33+
class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}
34+
style={{
35+
direction: direction,
36+
fontFamily: 'Vazirmatn, sans-serif',
37+
}}>
2938
<Label htmlFor={domId} label={label} required={required}>
3039
<input
3140
checked={value}
@@ -40,6 +49,11 @@ export function Checkbox(props) {
4049
required={required}
4150
aria-invalid={errors.length > 0}
4251
aria-describedby={[descriptionId, errorMessageId].join(' ')}
52+
style={{
53+
display: 'flex',
54+
justifyContent: direction === 'rtl' ? 'flex-end' : 'flex-start',
55+
fontFamily: 'Vazirmatn, sans-serif',
56+
}}
4357
/>
4458
</Label>
4559
<Description id={descriptionId} description={description} />

‎packages/form-js-viewer/src/render/components/form-fields/Checklist.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useOptionsAsync, LOAD_STATES } from '../../hooks/useOptionsAsync';
33
import { useCleanupMultiSelectValue } from '../../hooks/useCleanupMultiSelectValue';
44
import classNames from 'classnames';
55
import isEqual from 'lodash/isEqual';
6+
import { useService } from '../../hooks';
67

78
import { Description } from '../Description';
89
import { Errors } from '../Errors';
@@ -64,8 +65,15 @@ export function Checklist(props) {
6465
const descriptionId = `${domId}-description`;
6566
const errorMessageId = `${domId}-error-message`;
6667

68+
const form = useService('form');
69+
const { schema } = form._getState();
70+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
71+
6772
return (
68-
<div class={classNames(formFieldClasses(type, { errors, disabled, readonly }))} ref={outerDivRef}>
73+
<div
74+
class={classNames(formFieldClasses(type, { errors, disabled, readonly }))}
75+
ref={outerDivRef}
76+
style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
6977
<Label label={label} required={required} />
7078
{loadState == LOAD_STATES.LOADED &&
7179
options.map((o, index) => {
@@ -93,6 +101,7 @@ export function Checklist(props) {
93101
required={required}
94102
aria-invalid={errors.length > 0}
95103
aria-describedby={[descriptionId, errorMessageId].join(' ')}
104+
style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
96105
/>
97106
</Label>
98107
);

‎packages/form-js-viewer/src/render/components/form-fields/Radio.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import classNames from 'classnames';
77
import { Description } from '../Description';
88
import { Errors } from '../Errors';
99
import { Label } from '../Label';
10+
import { useService } from '../../hooks';
1011

1112
import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';
1213

@@ -59,9 +60,15 @@ export function Radio(props) {
5960

6061
const descriptionId = `${domId}-description`;
6162
const errorMessageId = `${domId}-error-message`;
63+
const form = useService('form');
64+
const { schema } = form._getState();
65+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
6266

6367
return (
64-
<div class={formFieldClasses(type, { errors, disabled, readonly })} ref={outerDivRef}>
68+
<div
69+
class={formFieldClasses(type, { errors, disabled, readonly })}
70+
ref={outerDivRef}
71+
style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
6572
<Label label={label} required={required} />
6673
{loadState == LOAD_STATES.LOADED &&
6774
options.map((option, index) => {
@@ -88,6 +95,7 @@ export function Radio(props) {
8895
aria-describedby={[descriptionId, errorMessageId].join(' ')}
8996
required={required}
9097
aria-invalid={errors.length > 0}
98+
style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
9199
/>
92100
</Label>
93101
);

‎packages/form-js-viewer/src/render/components/form-fields/Select.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Errors } from '../Errors';
33
import { Label } from '../Label';
44
import { SearchableSelect } from './parts/SearchableSelect';
55
import { SimpleSelect } from './parts/SimpleSelect';
6+
import { useService } from '../../hooks';
67

78
import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';
89
import { createEmptyOptions } from '../util/optionsUtil';
@@ -35,6 +36,10 @@ export function Select(props) {
3536
'aria-describedby': [descriptionId, errorMessageId].join(' '),
3637
};
3738

39+
const form = useService('form');
40+
const { schema } = form._getState();
41+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
42+
3843
return (
3944
<div
4045
class={formFieldClasses(type, { errors, disabled, readonly })}
@@ -43,7 +48,8 @@ export function Select(props) {
4348
event.preventDefault();
4449
event.stopPropagation();
4550
}
46-
}}>
51+
}}
52+
style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
4753
<Label htmlFor={domId} label={label} required={required} />
4854
{searchable ? <SearchableSelect {...selectProps} /> : <SimpleSelect {...selectProps} />}
4955
<Description id={descriptionId} description={description} />

‎packages/form-js-viewer/src/render/components/form-fields/Taglist.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,10 @@ export function Taglist(props) {
162162
const descriptionId = `${domId}-description`;
163163
const errorMessageId = `${domId}-error-message`;
164164

165+
const form = useService('form');
166+
const { schema } = form._getState();
167+
const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
168+
165169
return (
166170
<div
167171
ref={focusScopeRef}
@@ -171,7 +175,8 @@ export function Taglist(props) {
171175
event.stopPropagation();
172176
event.preventDefault();
173177
}
174-
}}>
178+
}}
179+
style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
175180
<Label label={label} required={required} htmlFor={domId} />
176181
{!disabled && !readonly && !!values.length && (
177182
<SkipLink className="fjs-taglist-skip-link" label="Skip to search" onSkip={onSkipToSearch} />
@@ -219,6 +224,8 @@ export function Taglist(props) {
219224
aria-describedby={[descriptionId, errorMessageId].join(' ')}
220225
required={required}
221226
aria-invalid={errors.length > 0}
227+
style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
228+
dir={direction === 'rtl' ? 'rtl' : 'ltr'}
222229
/>
223230
</div>
224231
<div class="fjs-taglist-anchor">

0 commit comments

Comments
 (0)