Skip to content

Commit 29ad608

Browse files
Thomas-CTlotorvik
Thomas-CT
and
lotorvik
committed
Replaced textarea with react NavTextarea component
Co-authored-by: Lars Olav Torvik <[email protected]>
1 parent b7cb17b commit 29ad608

File tree

9 files changed

+133
-28
lines changed

9 files changed

+133
-28
lines changed

‎packages/bygger/cypress/e2e/form-builder.spec.cy.ts

+13
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,19 @@ describe('Form Builder', () => {
139139
cy.findByRole('checkbox', { name: val2 }).should('exist');
140140
});
141141

142+
it('Edit JSON - Change label', () => {
143+
cy.findByRole('group', { name: 'Flervalg' })
144+
.should('exist')
145+
.closest("[data-testid='builder-component']")
146+
.within(() => {
147+
cy.clickBuilderComponentButton('Rediger JSON');
148+
});
149+
cy.get('div').contains('"label": "Flervalg"').click({ force: true });
150+
cy.focused().type('{end}{leftArrow}{leftArrow} (endret)', { force: true });
151+
cy.get('[data-testid="editorSaveButton"]').click();
152+
cy.get('label').contains('Flervalg (endret)');
153+
});
154+
142155
// TODO: Add test for radio group when it gets the new data values.
143156
});
144157
});

‎packages/bygger/src/formio-overrides/webform-builder-overrides.js

+33
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,39 @@ WebformBuilder.prototype.editComponent = function (component, parent, isNew, isJ
5858
}
5959
}
6060
originalEditComponent.call(this, component, parent, isNew, isJsonEdit, original, flags);
61+
62+
if (isJsonEdit) {
63+
this.editForm.form = {
64+
...this.editForm.form,
65+
components: [
66+
{
67+
type: 'formioTextArea',
68+
as: 'json',
69+
editor: 'ace',
70+
input: true,
71+
key: 'componentJson',
72+
label: 'JSON definisjon',
73+
validate: {
74+
required: true,
75+
},
76+
},
77+
{
78+
type: 'checkbox',
79+
key: 'showFullSchema',
80+
label: 'Full definisjon',
81+
},
82+
],
83+
};
84+
85+
// Need to run this again to attach the edit components controls. In earlier FormioJS versions this was not necessary
86+
this.attachEditComponentControls(
87+
component,
88+
parent,
89+
isNew,
90+
original,
91+
NavFormioJs.Components.components[component.type],
92+
);
93+
}
6194
};
6295

6396
WebformBuilder.prototype.destroy = function (...args) {

‎packages/shared-components/src/formio/components/base/editForm/shared/editFormAceEditor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component } from '@navikt/skjemadigitalisering-shared-domain';
22

33
const editFormAceEditor = (type: 'html' | 'javascript' | 'json'): Component => {
44
return {
5-
type: 'textarea',
5+
type: 'formioTextArea',
66
key: 'aceEditor',
77
label: '',
88
rows: 5,

‎packages/shared-components/src/formio/components/base/editForm/shared/editFormWysiwygEditor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const editFormWysiwygEditor = (heading: boolean = true): Component => {
99
toolbar.push('bold', 'link', 'bulletedList', 'numberedList');
1010

1111
return {
12-
type: 'textarea',
12+
type: 'formioTextArea',
1313
key: 'wysiwygEditor',
1414
label: '',
1515
rows: 5,

‎packages/shared-components/src/formio/components/core/textarea/TextArea.tsx

+49-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import FormioTextArea from 'formiojs/components/textarea/TextArea';
1+
import { Textarea as NavTextarea } from '@navikt/ds-react';
2+
import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
3+
import BaseComponent from '../../base/BaseComponent';
24
import textAreaBuilder from './TextArea.builder';
35
import textAreaForm from './TextArea.form';
46

5-
class TextArea extends FormioTextArea {
7+
const { navTextarea: TRANSLATIONS } = TEXTS.grensesnitt;
8+
9+
class TextArea extends BaseComponent {
610
static schema() {
7-
return FormioTextArea.schema({
11+
return BaseComponent.schema({
812
label: 'Tekstområde',
913
type: 'textarea',
1014
key: 'textarea',
@@ -13,6 +17,7 @@ class TextArea extends FormioTextArea {
1317
dataGridLabel: true,
1418
clearOnHide: true,
1519
autoExpand: true,
20+
editor: '',
1621
});
1722
}
1823

@@ -23,6 +28,47 @@ class TextArea extends FormioTextArea {
2328
static get builderInfo() {
2429
return textAreaBuilder();
2530
}
31+
32+
getMinRows() {
33+
return this.component?.rows;
34+
}
35+
36+
getMaxRows() {
37+
return !this.component?.autoExpand ? this.getMinRows() : undefined;
38+
}
39+
40+
getMaxLength() {
41+
const maxLength = this.component?.validate?.maxLength;
42+
return maxLength;
43+
}
44+
45+
renderReact(element) {
46+
element.render(
47+
<>
48+
<NavTextarea
49+
id={this.getId()}
50+
defaultValue={this.getValue()}
51+
maxLength={this.getMaxLength()}
52+
minRows={this.getMinRows()}
53+
maxRows={this.getMaxRows()}
54+
ref={(ref) => this.setReactInstance(ref)}
55+
onChange={(event) => this.updateValue(event.currentTarget.value, { modified: true })}
56+
label={this.getLabel()}
57+
hideLabel={this.getHideLabel()}
58+
description={this.getDescription()}
59+
className={this.getClassName()}
60+
autoComplete={this.getAutoComplete()}
61+
readOnly={this.getReadOnly()}
62+
spellCheck={this.getSpellCheck()}
63+
error={this.getError()}
64+
i18n={{
65+
counterLeft: this.t(TRANSLATIONS.counterLeft),
66+
counterTooMuch: this.t(TRANSLATIONS.counterTooMuch),
67+
}}
68+
/>
69+
</>,
70+
);
71+
}
2672
}
2773

2874
export default TextArea;

‎packages/shared-components/src/formio/components/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import FormioTextArea from 'formiojs/components/textarea/TextArea';
12
import Alert from './core/alert/Alert';
23
import Button from './core/button/Button';
34
import Checkbox from './core/checkbox/Checkbox';
@@ -42,6 +43,7 @@ const customComponents = {
4243
datagrid: DataGrid,
4344
textfield: TextField,
4445
textarea: TextArea,
46+
formioTextArea: FormioTextArea,
4547
number: Number,
4648
navSkjemagruppe: FormGroup,
4749
selectboxes: SelectBoxes,

‎packages/shared-components/src/formio/template/templates/navdesign/field/form.ejs

+28-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
{% if (ctx.component.type === "textfield" || ctx.component.type === "orgNr" || ctx.component.type === "bankAccount" || ctx.component.type === "htmlelement" || ctx.component.type === "radiopanel") { %}
2-
{{ctx.element}}
3-
{% } else { %}
4-
{% if (ctx.component.description && ctx.component.type !== "datagrid" && ctx.component.descriptionPosition === "above") { %}
5-
<div class="description" id="d-{{ctx.instance.id}}-{{ctx.component.key}}">{{ctx.t(ctx.component.description, { _userInput: true })}}</div>
6-
{% } %}
7-
8-
{% if (!ctx.label.hidden && ctx.component.type !== "radio" && ctx.component.type !== "container" && ctx.component.type !== "alertstripe" && ctx.component.type !== "selectboxes" && ctx.component.type !== "navCheckbox" && ctx.component.type !== "datagrid" && ctx.component.type !== "navSkjemagruppe" && !ctx.component.isNavCheckboxPanel) { %}
9-
{{ ctx.labelMarkup }}
10-
{% } %}
11-
12-
{% if (ctx.component.description && ctx.component.type !== "radio" && ctx.component.type !== "selectboxes" && ctx.component.type !== "datagrid" && !ctx.component.isNavCheckboxPanel && ctx.component.descriptionPosition !== "above" && (ctx.component.type !== "navCheckbox" || !ctx.component.descriptionPosition)) { %}
13-
<div class="description" id="d-{{ctx.instance.id}}-{{ctx.component.key}}">{{ctx.t(ctx.component.description, { _userInput: true })}}</div>
14-
{% } %}
15-
16-
{{ctx.element}}
17-
18-
{% if (ctx.component.description && ctx.component.type === "navCheckbox" && ctx.component.descriptionPosition === "below") { %}
19-
<div class="description" id="d-{{ctx.instance.id}}-{{ctx.component.key}}">{{ctx.t(ctx.component.description, { _userInput: true })}}</div>
20-
{% } %}
21-
1+
{% if (ctx.component.type === "textfield" || ctx.component.type === "textarea" || ctx.component.type === "orgNr" ||
2+
ctx.component.type === "bankAccount" || ctx.component.type === "htmlelement" || ctx.component.type === "radiopanel") {
3+
%}
4+
{{ ctx.element }}
5+
{% } else { %} {% if (ctx.component.description && ctx.component.type !== "datagrid" &&
6+
ctx.component.descriptionPosition === "above") { %}
7+
<div class="description" id="d-{{ ctx.instance.id }}-{{ ctx.component.key }}">
8+
{{ ctx.t(ctx.component.description, { _userInput: true }) }}
9+
</div>
10+
{% } %} {% if (!ctx.label.hidden && ctx.component.type !== "radio" && ctx.component.type !== "container" &&
11+
ctx.component.type !== "alertstripe" && ctx.component.type !== "selectboxes" && ctx.component.type !== "navCheckbox" &&
12+
ctx.component.type !== "datagrid" && ctx.component.type !== "navSkjemagruppe" && !ctx.component.isNavCheckboxPanel) { %}
13+
{{ ctx.labelMarkup }}
14+
{% } %} {% if (ctx.component.description && ctx.component.type !== "radio" && ctx.component.type !== "selectboxes" &&
15+
ctx.component.type !== "datagrid" && !ctx.component.isNavCheckboxPanel && ctx.component.descriptionPosition !== "above"
16+
&& (ctx.component.type !== "navCheckbox" || !ctx.component.descriptionPosition)) { %}
17+
<div class="description" id="d-{{ ctx.instance.id }}-{{ ctx.component.key }}">
18+
{{ ctx.t(ctx.component.description, { _userInput: true }) }}
19+
</div>
2220
{% } %}
2321

24-
{% if (ctx.component.type !== "datagrid") { %}
25-
{{ctx.utils.additionalDescription(ctx)}}
22+
{{ ctx.element }}
23+
24+
{% if (ctx.component.description && ctx.component.type === "navCheckbox" && ctx.component.descriptionPosition ===
25+
"below") { %}
26+
<div class="description" id="d-{{ ctx.instance.id }}-{{ ctx.component.key }}">
27+
{{ ctx.t(ctx.component.description, { _userInput: true }) }}
28+
</div>
29+
{% } %} {% } %} {% if (ctx.component.type !== "datagrid") { %}
30+
{{ ctx.utils.additionalDescription(ctx) }}
2631
{% } %}

‎packages/shared-domain/src/form/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ export interface Component {
160160
valueComponent?: Component;
161161
isInline?: boolean;
162162
textDisplay?: 'form' | 'formPdf' | 'pdf';
163+
autoExpand?: boolean;
163164
}
164165

165166
export interface ComponentProperties {
@@ -187,6 +188,7 @@ export interface ComponentValidate {
187188
patternMessage?: string;
188189
min?: number;
189190
max?: number;
191+
maxLength?: number;
190192
}
191193

192194
export interface ComponentConditional {

‎packages/shared-domain/src/texts/grensesnitt.js

+4
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,8 @@ export const grensesnitt = {
8181
inputHasFocus: '{{label}} har fokus.',
8282
onFilterSearchResult: 'for søkeordet {{inputValue}}.',
8383
},
84+
navTextarea: {
85+
counterLeft: 'tegn igjen',
86+
counterTooMuch: 'tegn for mye',
87+
},
8488
};

0 commit comments

Comments
 (0)