Skip to content

Commit 92a37b6

Browse files
prabhuignotoprabhuignoto
authored
RTL support (#4)
1 parent c1b1739 commit 92a37b6

File tree

14 files changed

+209
-90
lines changed

14 files changed

+209
-90
lines changed

‎README.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -89,27 +89,28 @@ The example shows a simple wizard with two pages.
8989

9090
## ⚙️ Properties
9191

92-
| Name | Description |
93-
| :---------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
94-
| `strict` | Enables validation rules for all input types in every page of the wizard. The component prevents the user from moving forward unless the errors fixed on the step. |
95-
| `theme` | Theme object for customized styling |
96-
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds |
97-
| `pages` | Collection of [Page](#Page) object |
98-
| `onFinish` | Callback executed on final step. The callback receives an object with the data for each page |
92+
| Name | Description | Default |
93+
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
94+
| `strict` | Enables validation rules for all input types on all pages. The component prevents the user from progressing until the errors in the current step have been corrected | false |
95+
| `theme` | [Theme](#🎨-theme) object for customized styling | |
96+
| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds | false |
97+
| `pages` | Collection of [Page](#Page) object | |
98+
| `onFinish` | Callback executed on final step | |
99+
| `RTL` | Enables right to left mode | false |
99100

100101
## Page
101102

102103
Page object is at the core of the wizard. Page object is used to define the title, description, fields, and validation rules for a page.
103104

104105
| Name | Description | Type |
105106
| :--------------------- | :------------------------------------------------------------------- | :------- |
106-
| onChange | Callback executed when any of the Form field value changes(Internal) | Function |
107107
| fields | Fields of the Page | Array |
108-
| isActive | Indicates whether the page is active or not | Boolean |
109-
| title | Title of the Page | String |
110108
| finishMessage | Custom message to be displayed on finish operation | String |
111109
| globalFormErrorMessage | Global error message to be displayed on validation failures | String |
110+
| isActive | Indicates whether the page is active or not | Boolean |
111+
| onChange | Callback executed when any of the Form field value changes(Internal) | Function |
112112
| state | State of the Page. can be `NOT_VALIDATED`, `SUCCESS`, `FAIL`, | String |
113+
| title | Title of the Page | String |
113114

114115
> Every page is in the `NOT_VALIDATED` state by default.
115116
@@ -161,12 +162,12 @@ Form field represents an input field in the wizard. Form field is used to define
161162

162163
| Name | Description | Type |
163164
| :------------ | :---------------------------------- | :-------- |
164-
| name | Name of the Field | string |
165165
| isRequired | Marks the field as required | boolean |
166-
| validate | Enables validation for the field | boolean |
167-
| type | Type of Field | InputType |
168166
| label | Label for the field | string |
167+
| name | Name of the Field | string |
169168
| selectOptions | Use this prop when type is "select" | Array |
169+
| type | Type of Field | InputType |
170+
| validate | Enables validation for the field | boolean |
170171

171172
> Fields marked as required are automatically validated. If you set `isRequired` to `false` and `validate` to `true`, the wizard will validate and flag the errors, but the step itself will not be marked as invalid.
172173
@@ -244,14 +245,14 @@ Customize the look and feel of the Wizard through the `theme` object.
244245
| background | Background color of the wizard | string | #f8f8f8 |
245246
| fail | Colour to signify failed state | string | #de1738 |
246247
| formFieldBackground | Background color of the Form field | string | #ffffff |
247-
| primary | Primary colour. This color will be the predominant color | string | #007fff |
248-
| success | Colour to signify a success state | string | #1db954 |
249-
| textColor | Colour of all texts | string | #000000 |
250248
| formFieldBorder | Border colour of the form field | string | #dcdcdc |
251249
| inputBackground | Background color of the native input control | string | #e8e8e8 |
252250
| inputTextColor | Fore color of the text inside the native input control | string | #000000 |
251+
| primary | Primary colour. This color will be the predominant color | string | #007fff |
252+
| success | Colour to signify a success state | string | #1db954 |
253253
| tabColor | Colour of the tab | string | #f8f8f8 |
254254
| tabLineColor | Colour of the line that runs through all the tabs | string | #ccc |
255+
| textColor | Colour of all texts | string | #000000 |
255256

256257
Here is a short example of how to use the theme object.
257258

@@ -278,6 +279,7 @@ Here is a short example of how to use the theme object.
278279
1. [Basic Wizard](https://codesandbox.io/s/react-wizardy-simple-form-vu3y6b)
279280
2. [Complex Wizard](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)
280281
3. [Wizard with custom theme](https://codesandbox.io/s/react-wizardy-theme-hzf5bx)
282+
4. [RTL](https://codesandbox.io/s/react-wizardy-rtl-misojt)
281283

282284
## ⛏️ Built With
283285

‎coverage/coverage-final.json‎

Lines changed: 9 additions & 9 deletions
Large diffs are not rendered by default.

‎coverage/index.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ <h1>All files</h1>
2323
<div class='clearfix'>
2424

2525
<div class='fl pad1y space-right2'>
26-
<span class="strong">68.3% </span>
26+
<span class="strong">69.51% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>666/975</span>
28+
<span class='fraction'>707/1017</span>
2929
</div>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">83.33% </span>
33+
<span class="strong">76.59% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>105/126</span>
35+
<span class='fraction'>108/141</span>
3636
</div>
3737

3838

@@ -44,9 +44,9 @@ <h1>All files</h1>
4444

4545

4646
<div class='fl pad1y space-right2'>
47-
<span class="strong">68.3% </span>
47+
<span class="strong">69.51% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>666/975</span>
49+
<span class='fraction'>707/1017</span>
5050
</div>
5151

5252

@@ -95,62 +95,62 @@ <h1>All files</h1>
9595

9696
<tr>
9797
<td class="file low" data-value="react-wizardly/src/components"><a href="react-wizardly/src/components/index.html">react-wizardly/src/components</a></td>
98-
<td data-value="18.46" class="pic low">
98+
<td data-value="18.68" class="pic low">
9999
<div class="chart"><div class="cover-fill" style="width: 18%"></div><div class="cover-empty" style="width: 82%"></div></div>
100100
</td>
101-
<td data-value="18.46" class="pct low">18.46%</td>
102-
<td data-value="287" class="abs low">53/287</td>
101+
<td data-value="18.68" class="pct low">18.68%</td>
102+
<td data-value="289" class="abs low">54/289</td>
103103
<td data-value="100" class="pct high">100%</td>
104104
<td data-value="1" class="abs high">1/1</td>
105105
<td data-value="16.66" class="pct low">16.66%</td>
106106
<td data-value="6" class="abs low">1/6</td>
107-
<td data-value="18.46" class="pct low">18.46%</td>
108-
<td data-value="287" class="abs low">53/287</td>
107+
<td data-value="18.68" class="pct low">18.68%</td>
108+
<td data-value="289" class="abs low">54/289</td>
109109
</tr>
110110

111111
<tr>
112112
<td class="file high" data-value="react-wizardly/src/components/form-field"><a href="react-wizardly/src/components/form-field/index.html">react-wizardly/src/components/form-field</a></td>
113-
<td data-value="82.91" class="pic high">
114-
<div class="chart"><div class="cover-fill" style="width: 82%"></div><div class="cover-empty" style="width: 18%"></div></div>
113+
<td data-value="83.88" class="pic high">
114+
<div class="chart"><div class="cover-fill" style="width: 83%"></div><div class="cover-empty" style="width: 17%"></div></div>
115115
</td>
116-
<td data-value="82.91" class="pct high">82.91%</td>
117-
<td data-value="199" class="abs high">165/199</td>
118-
<td data-value="89.18" class="pct high">89.18%</td>
119-
<td data-value="37" class="abs high">33/37</td>
116+
<td data-value="83.88" class="pct high">83.88%</td>
117+
<td data-value="211" class="abs high">177/211</td>
118+
<td data-value="80.48" class="pct high">80.48%</td>
119+
<td data-value="41" class="abs high">33/41</td>
120120
<td data-value="100" class="pct high">100%</td>
121121
<td data-value="2" class="abs high">2/2</td>
122-
<td data-value="82.91" class="pct high">82.91%</td>
123-
<td data-value="199" class="abs high">165/199</td>
122+
<td data-value="83.88" class="pct high">83.88%</td>
123+
<td data-value="211" class="abs high">177/211</td>
124124
</tr>
125125

126126
<tr>
127127
<td class="file high" data-value="react-wizardly/src/components/page"><a href="react-wizardly/src/components/page/index.html">react-wizardly/src/components/page</a></td>
128-
<td data-value="96.77" class="pic high">
128+
<td data-value="96.96" class="pic high">
129129
<div class="chart"><div class="cover-fill" style="width: 96%"></div><div class="cover-empty" style="width: 4%"></div></div>
130130
</td>
131-
<td data-value="96.77" class="pct high">96.77%</td>
132-
<td data-value="124" class="abs high">120/124</td>
133-
<td data-value="89.28" class="pct high">89.28%</td>
134-
<td data-value="28" class="abs high">25/28</td>
131+
<td data-value="96.96" class="pct high">96.96%</td>
132+
<td data-value="132" class="abs high">128/132</td>
133+
<td data-value="83.33" class="pct high">83.33%</td>
134+
<td data-value="30" class="abs high">25/30</td>
135135
<td data-value="100" class="pct high">100%</td>
136136
<td data-value="2" class="abs high">2/2</td>
137-
<td data-value="96.77" class="pct high">96.77%</td>
138-
<td data-value="124" class="abs high">120/124</td>
137+
<td data-value="96.96" class="pct high">96.96%</td>
138+
<td data-value="132" class="abs high">128/132</td>
139139
</tr>
140140

141141
<tr>
142142
<td class="file high" data-value="react-wizardly/src/components/wizard-footer"><a href="react-wizardly/src/components/wizard-footer/index.html">react-wizardly/src/components/wizard-footer</a></td>
143-
<td data-value="98.27" class="pic high">
143+
<td data-value="98.43" class="pic high">
144144
<div class="chart"><div class="cover-fill" style="width: 98%"></div><div class="cover-empty" style="width: 2%"></div></div>
145145
</td>
146-
<td data-value="98.27" class="pct high">98.27%</td>
147-
<td data-value="116" class="abs high">114/116</td>
148-
<td data-value="96.15" class="pct high">96.15%</td>
149-
<td data-value="26" class="abs high">25/26</td>
146+
<td data-value="98.43" class="pct high">98.43%</td>
147+
<td data-value="128" class="abs high">126/128</td>
148+
<td data-value="84.37" class="pct high">84.37%</td>
149+
<td data-value="32" class="abs high">27/32</td>
150150
<td data-value="100" class="pct high">100%</td>
151151
<td data-value="3" class="abs high">3/3</td>
152-
<td data-value="98.27" class="pct high">98.27%</td>
153-
<td data-value="116" class="abs high">114/116</td>
152+
<td data-value="98.43" class="pct high">98.43%</td>
153+
<td data-value="128" class="abs high">126/128</td>
154154
</tr>
155155

156156
<tr>
@@ -159,13 +159,13 @@ <h1>All files</h1>
159159
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
160160
</td>
161161
<td data-value="100" class="pct high">100%</td>
162-
<td data-value="90" class="abs high">90/90</td>
163-
<td data-value="69.23" class="pct medium">69.23%</td>
164-
<td data-value="13" class="abs medium">9/13</td>
162+
<td data-value="98" class="abs high">98/98</td>
163+
<td data-value="62.5" class="pct medium">62.5%</td>
164+
<td data-value="16" class="abs medium">10/16</td>
165165
<td data-value="60" class="pct medium">60%</td>
166166
<td data-value="5" class="abs medium">3/5</td>
167167
<td data-value="100" class="pct high">100%</td>
168-
<td data-value="90" class="abs high">90/90</td>
168+
<td data-value="98" class="abs high">98/98</td>
169169
</tr>
170170

171171
<tr>
@@ -206,7 +206,7 @@ <h1>All files</h1>
206206
<div class='footer quiet pad2 space-top1 center small'>
207207
Code coverage generated by
208208
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
209-
at Sun May 01 2022 12:00:01 GMT+0530 (India Standard Time)
209+
at Sun May 01 2022 16:35:14 GMT+0530 (India Standard Time)
210210
</div>
211211
<script src="prettify.js"></script>
212212
<script>

‎src/components/form-field/form-field.module.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
&:not(.is_valid):not(.is_not_valid) {
4040
border: 1px solid var(--rc-wiz-formFieldBorder);
4141
}
42+
43+
&.RTL {
44+
direction: rtl;
45+
text-align: right;
46+
}
4247
}
4348

4449
.input_wrapper {
@@ -59,7 +64,6 @@
5964
justify-content: center;
6065
position: absolute;
6166
top: 50%;
62-
right: 1rem;
6367
transform: translateY(-50%);
6468
height: 1.25rem;
6569
width: 1.25rem;
@@ -79,6 +83,16 @@
7983
}
8084
}
8185

86+
&.RTL {
87+
right: auto;
88+
left: 1rem;
89+
}
90+
91+
&:not(.RTL) {
92+
right: 1rem;
93+
left: auto;
94+
}
95+
8296
svg {
8397
width: 70%;
8498
height: 70%;
@@ -91,7 +105,14 @@
91105
display: flex;
92106
align-items: center;
93107
justify-content: center;
94-
margin-left: 0.5rem;
108+
109+
&.RTL {
110+
margin-right: 0.5rem;
111+
}
112+
113+
&:not(.RTL) {
114+
margin-left: 0.5rem;
115+
}
95116

96117
svg {
97118
fill: var(--rc-wiz-fail);

‎src/components/form-field/form-field.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ const FormField: FunctionComponent<FormFieldProps> = ({
3838

3939
const selectedOptions = useRef<string[]>([]);
4040

41-
const { highlightFieldsOnValidation: highlight } = useContext(WizardContext);
41+
const { highlightFieldsOnValidation: highlight, RTL } =
42+
useContext(WizardContext);
4243

4344
const handleChange = useCallback(
4445
(
@@ -78,18 +79,29 @@ const FormField: FunctionComponent<FormFieldProps> = ({
7879
classNames(
7980
styles.form_field,
8081
isValid ? styles.is_valid : isValid !== null ? styles.is_not_valid : "",
81-
highlight ? styles.highlight : ""
82+
highlight ? styles.highlight : "",
83+
RTL ? styles.RTL : ""
8284
),
8385
[isValid, highlight]
8486
);
8587

8688
const checkClass = useMemo(
87-
() => classNames(styles.status, isValid ? styles.success : ""),
89+
() =>
90+
classNames(
91+
styles.status,
92+
isValid ? styles.success : "",
93+
RTL ? styles.RTL : ""
94+
),
8895
[isValid]
8996
);
9097

9198
const warnClass = useMemo(
92-
() => classNames(styles.status, !isValid ? styles.fail : ""),
99+
() =>
100+
classNames(
101+
styles.status,
102+
!isValid ? styles.fail : "",
103+
RTL ? styles.RTL : ""
104+
),
93105
[]
94106
);
95107

@@ -184,7 +196,7 @@ const FormField: FunctionComponent<FormFieldProps> = ({
184196
)}
185197
{isRequired && (
186198
<span
187-
className={styles.asterisk}
199+
className={classNames(styles.asterisk, RTL ? styles.RTL : "")}
188200
role="img"
189201
aria-label="important field"
190202
>

‎src/components/page/page.module.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@
1010
.fields_wrapper {
1111
display: flex;
1212
flex-direction: column;
13-
align-items: flex-start;
13+
14+
&.RTL {
15+
align-items: flex-end;
16+
}
17+
18+
&:not(.RTL) {
19+
align-items: flex-start;
20+
}
1421
}
1522

1623
.form_field_wrapper {
@@ -28,4 +35,8 @@
2835
margin-bottom: 1rem;
2936
text-transform: uppercase;
3037
color: var(--rc-wiz-textColor);
38+
39+
&.RTL {
40+
direction: rtl;
41+
}
3142
}

0 commit comments

Comments
 (0)