Skip to content

Commit c85074a

Browse files
emmenkoemmenko
authored
fix: sequential field id generation (#499)
1 parent 5f69dea commit c85074a

File tree

20 files changed

+78
-23
lines changed

20 files changed

+78
-23
lines changed

‎src/components/fields/async-creatable-select-field/async-creatable-select-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import AsyncCreatableSelectInput from '../../inputs/async-creatable-select-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import filterDataAttributes from '../../../utils/filter-data-attributes';
1011
import FieldErrors from '../../field-errors';
1112

13+
const sequentialId = createSequentialId('async-creatable-select-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
export default class SelectField extends React.Component {
@@ -114,7 +117,7 @@ export default class SelectField extends React.Component {
114117
};
115118

116119
static getDerivedStateFromProps = (props, state) => ({
117-
id: getFieldId(props, state, 'async-creatable-select-field-'),
120+
id: getFieldId(props, state, sequentialId),
118121
});
119122

120123
render() {

‎src/components/fields/async-select-field/async-select-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import AsyncSelectInput from '../../inputs/async-select-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import filterDataAttributes from '../../../utils/filter-data-attributes';
1011
import FieldErrors from '../../field-errors';
1112

13+
const sequentialId = createSequentialId('async-select-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
export default class AsyncSelectField extends React.Component {
@@ -96,7 +99,7 @@ export default class AsyncSelectField extends React.Component {
9699
};
97100

98101
static getDerivedStateFromProps = (props, state) => ({
99-
id: getFieldId(props, state, 'async-select-field-'),
102+
id: getFieldId(props, state, sequentialId),
100103
});
101104

102105
render() {

‎src/components/fields/creatable-select-field/creatable-select-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import CreatableSelectInput from '../../inputs/creatable-select-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import filterDataAttributes from '../../../utils/filter-data-attributes';
1011
import FieldErrors from '../../field-errors';
1112

13+
const sequentialId = createSequentialId('creatable-select-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
export default class SelectField extends React.Component {
@@ -102,7 +105,7 @@ export default class SelectField extends React.Component {
102105
};
103106

104107
static getDerivedStateFromProps = (props, state) => ({
105-
id: getFieldId(props, state, 'creatable-select-field-'),
108+
id: getFieldId(props, state, sequentialId),
106109
});
107110

108111
render() {

‎src/components/fields/date-field/date-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import DateInput from '../../inputs/date-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('date-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class DateField extends React.Component {
@@ -57,7 +60,7 @@ class DateField extends React.Component {
5760
};
5861

5962
static getDerivedStateFromProps = (props, state) => ({
60-
id: getFieldId(props, state, 'date-field-'),
63+
id: getFieldId(props, state, sequentialId),
6164
});
6265

6366
render() {

‎src/components/fields/date-range-field/date-range-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import DateRangeInput from '../../inputs/date-range-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('date-range-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class DateRangeField extends React.Component {
@@ -57,7 +60,7 @@ class DateRangeField extends React.Component {
5760
};
5861

5962
static getDerivedStateFromProps = (props, state) => ({
60-
id: getFieldId(props, state, 'date-range-field-'),
63+
id: getFieldId(props, state, sequentialId),
6164
});
6265

6366
render() {

‎src/components/fields/date-time-field/date-time-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import DateTimeInput from '../../inputs/date-time-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('date-time-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class DateTimeField extends React.Component {
@@ -58,7 +61,7 @@ class DateTimeField extends React.Component {
5861
};
5962

6063
static getDerivedStateFromProps = (props, state) => ({
61-
id: getFieldId(props, state, 'date-time-field-'),
64+
id: getFieldId(props, state, sequentialId),
6265
});
6366

6467
render() {

‎src/components/fields/localized-multiline-text-field/localized-multiline-text-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import Spacings from '../../spacings';
77
import FieldLabel from '../../field-label';
88
import LocalizedMultilineTextInput from '../../inputs/localized-multiline-text-input';
99
import getFieldId from '../../../utils/get-field-id';
10+
import createSequentialId from '../../../utils/create-sequential-id';
1011
import FieldErrors from '../../field-errors';
1112
import filterDataAttributes from '../../../utils/filter-data-attributes';
1213

14+
const sequentialId = createSequentialId('localized-multiline-text-field-');
15+
1316
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1417

1518
class LocalizedMultilineTextField extends React.Component {
@@ -78,7 +81,7 @@ class LocalizedMultilineTextField extends React.Component {
7881
};
7982

8083
static getDerivedStateFromProps = (props, state) => ({
81-
id: getFieldId(props, state, 'localized-multiline-text-field-'),
84+
id: getFieldId(props, state, sequentialId),
8285
});
8386

8487
render() {

‎src/components/fields/localized-text-field/localized-text-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import Spacings from '../../spacings';
77
import FieldLabel from '../../field-label';
88
import LocalizedTextInput from '../../inputs/localized-text-input';
99
import getFieldId from '../../../utils/get-field-id';
10+
import createSequentialId from '../../../utils/create-sequential-id';
1011
import FieldErrors from '../../field-errors';
1112
import filterDataAttributes from '../../../utils/filter-data-attributes';
1213

14+
const sequentialId = createSequentialId('localized-text-field-');
15+
1316
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1417

1518
class LocalizedTextField extends React.Component {
@@ -77,7 +80,7 @@ class LocalizedTextField extends React.Component {
7780
};
7881

7982
static getDerivedStateFromProps = (props, state) => ({
80-
id: getFieldId(props, state, 'localized-text-field-'),
83+
id: getFieldId(props, state, sequentialId),
8184
});
8285

8386
render() {

‎src/components/fields/money-field/money-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@ import Spacings from '../../spacings';
88
import FieldLabel from '../../field-label';
99
import MoneyInput from '../../inputs/money-input';
1010
import getFieldId from '../../../utils/get-field-id';
11+
import createSequentialId from '../../../utils/create-sequential-id';
1112
import FieldErrors from '../../field-errors';
1213
import { VerifiedIcon } from '../../icons';
1314
import Text from '../../typography/text';
1415
import filterDataAttributes from '../../../utils/filter-data-attributes';
1516
import messages from './messages';
1617

18+
const sequentialId = createSequentialId('money-field-');
19+
1720
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1821

1922
class MoneyField extends React.Component {
@@ -83,7 +86,7 @@ class MoneyField extends React.Component {
8386
};
8487

8588
static getDerivedStateFromProps = (props, state) => ({
86-
id: getFieldId(props, state, 'money-field-'),
89+
id: getFieldId(props, state, sequentialId),
8790
});
8891

8992
render() {

‎src/components/fields/multiline-text-field/multiline-text-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import MultilineTextInput from '../../inputs/multiline-text-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('multiline-text-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class MultilineTextField extends React.Component {
@@ -60,7 +63,7 @@ class MultilineTextField extends React.Component {
6063
};
6164

6265
static getDerivedStateFromProps = (props, state) => ({
63-
id: getFieldId(props, state, 'multiline-text-field-'),
66+
id: getFieldId(props, state, sequentialId),
6467
});
6568

6669
render() {

‎src/components/fields/number-field/number-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ import FieldLabel from '../../field-label';
77
import FieldErrors from '../../field-errors';
88
import NumberInput from '../../inputs/number-input';
99
import getFieldId from '../../../utils/get-field-id';
10+
import createSequentialId from '../../../utils/create-sequential-id';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('number-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class NumberField extends React.Component {
@@ -62,7 +65,7 @@ class NumberField extends React.Component {
6265
};
6366

6467
static getDerivedStateFromProps = (props, state) => ({
65-
id: getFieldId(props, state, 'number-field-'),
68+
id: getFieldId(props, state, sequentialId),
6669
});
6770

6871
render() {

‎src/components/fields/password-field/password-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import PasswordInput from '../../inputs/password-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('password-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class PasswordField extends React.Component {
@@ -61,7 +64,7 @@ class PasswordField extends React.Component {
6164
};
6265

6366
static getDerivedStateFromProps = (props, state) => ({
64-
id: getFieldId(props, state, 'password-field-'),
67+
id: getFieldId(props, state, sequentialId),
6568
});
6669

6770
render() {

‎src/components/fields/select-field/select-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import SelectInput from '../../inputs/select-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import filterDataAttributes from '../../../utils/filter-data-attributes';
1011
import FieldErrors from '../../field-errors';
1112

13+
const sequentialId = createSequentialId('select-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
export default class SelectField extends React.Component {
@@ -89,7 +92,7 @@ export default class SelectField extends React.Component {
8992
};
9093

9194
static getDerivedStateFromProps = (props, state) => ({
92-
id: getFieldId(props, state, 'select-field-'),
95+
id: getFieldId(props, state, sequentialId),
9396
});
9497

9598
render() {

‎src/components/fields/text-field/text-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import TextInput from '../../inputs/text-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('text-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class TextField extends React.Component {
@@ -59,7 +62,7 @@ class TextField extends React.Component {
5962
};
6063

6164
static getDerivedStateFromProps = (props, state) => ({
62-
id: getFieldId(props, state, 'text-field-'),
65+
id: getFieldId(props, state, sequentialId),
6366
});
6467

6568
render() {

‎src/components/fields/time-field/time-field.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import Spacings from '../../spacings';
66
import FieldLabel from '../../field-label';
77
import TimeInput from '../../inputs/time-input';
88
import getFieldId from '../../../utils/get-field-id';
9+
import createSequentialId from '../../../utils/create-sequential-id';
910
import FieldErrors from '../../field-errors';
1011
import filterDataAttributes from '../../../utils/filter-data-attributes';
1112

13+
const sequentialId = createSequentialId('time-field-');
14+
1215
const hasErrors = errors => errors && Object.values(errors).some(Boolean);
1316

1417
class TimeField extends React.Component {
@@ -58,7 +61,7 @@ class TimeField extends React.Component {
5861
};
5962

6063
static getDerivedStateFromProps = (props, state) => ({
61-
id: getFieldId(props, state, 'time-field-'),
64+
id: getFieldId(props, state, sequentialId),
6265
});
6366

6467
render() {

‎src/components/inputs/checkbox-input/checkbox-input.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import { css } from '@emotion/core';
44
import filterDataAttributes from '../../../utils/filter-data-attributes';
55
import getFieldId from '../../../utils/get-field-id';
6+
import createSequentialId from '../../../utils/create-sequential-id';
67
import Text from '../../typography/text';
78
import Spacings from '../../spacings';
89
import Icons from './icons';
@@ -11,6 +12,8 @@ import {
1112
getCheckboxWrapperStyles,
1213
} from './checkbox-input.styles';
1314

15+
const sequentialId = createSequentialId('checkbox-input-');
16+
1417
class CheckboxInput extends React.PureComponent {
1518
static displayName = 'CheckboxInput';
1619
static propTypes = {
@@ -44,7 +47,7 @@ class CheckboxInput extends React.PureComponent {
4447
};
4548

4649
static getDerivedStateFromProps = (props, state) => ({
47-
id: getFieldId(props, state, 'checkbox-'),
50+
id: getFieldId(props, state, sequentialId),
4851
});
4952

5053
render() {

‎src/components/inputs/localized-money-input/localized-money-input.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ import {
1414
getName,
1515
} from '../../../utils/localized';
1616
import getFieldId from '../../../utils/get-field-id';
17+
import createSequentialId from '../../../utils/create-sequential-id';
1718
import filterDataAttributes from '../../../utils/filter-data-attributes';
1819
import MoneyInput from '../money-input';
1920
import CurrencyControl from './currency-control';
2021

22+
const sequentialId = createSequentialId('localized-money-input-');
23+
2124
// sorts the currencies with the following priority:
2225
// - The selected currency is placed first (e.g EUR)
2326
// - All other currencies follow, sorted alphabetically as well
@@ -222,7 +225,7 @@ export class LocalizedMoneyInput extends React.Component {
222225
props.hideCurrencyExpansionControls ||
223226
state.areCurrenciesOpened;
224227

225-
const id = getFieldId(props, state, 'localized-money-input-');
228+
const id = getFieldId(props, state, sequentialId);
226229

227230
return { areCurrenciesOpened, id };
228231
};

0 commit comments

Comments
 (0)