@rh-support/components 2.1.8-beta.0 → 2.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
- package/lib/cjs/MarkdownEditor/MarkdownEditor.js +2 -1
- package/lib/cjs/PhoneInput/PhoneInput.d.ts +2 -0
- package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/lib/cjs/PhoneInput/PhoneInput.js +35 -21
- package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
- package/lib/esm/MarkdownEditor/MarkdownEditor.js +2 -1
- package/lib/esm/PhoneInput/PhoneInput.d.ts +2 -0
- package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/lib/esm/PhoneInput/PhoneInput.js +35 -21
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA2B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAmmB5C;kBAnmBQ,cAAc;;;AAumBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -45,6 +45,7 @@ const quote_right_icon_1 = __importDefault(require("@patternfly/react-icons/dist
|
|
|
45
45
|
const trash_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/trash-icon"));
|
|
46
46
|
const utils_1 = require("@rh-support/utils");
|
|
47
47
|
const classnames_1 = __importDefault(require("classnames"));
|
|
48
|
+
const dompurify_1 = __importDefault(require("dompurify"));
|
|
48
49
|
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
49
50
|
const react_1 = __importStar(require("react"));
|
|
50
51
|
const react_i18next_1 = require("react-i18next");
|
|
@@ -410,7 +411,7 @@ function MarkdownEditor(props) {
|
|
|
410
411
|
react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance")))))),
|
|
411
412
|
react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
|
|
412
413
|
react_1.default.createElement("div", { dangerouslySetInnerHTML: {
|
|
413
|
-
__html: previewMDText(mdValue),
|
|
414
|
+
__html: dompurify_1.default.sanitize(previewMDText(mdValue)),
|
|
414
415
|
} })))),
|
|
415
416
|
react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
|
|
416
417
|
react_1.default.createElement("span", { className: "markdown-toolbar-left-section" },
|
|
@@ -9,6 +9,8 @@ interface IProps {
|
|
|
9
9
|
setInvalid?: (boolean: any) => void;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
|
+
phoneLength?: number;
|
|
13
|
+
setPhoneLength?: (number: any) => void;
|
|
12
14
|
}
|
|
13
15
|
export declare const getPhoneObj: (phoneNumber: string) => {
|
|
14
16
|
countryCode: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;CACrC;AAuED,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4PvC"}
|
|
@@ -33,6 +33,17 @@ const CountryData_1 = require("./CountryData");
|
|
|
33
33
|
const PREFIX = '+';
|
|
34
34
|
const DEFAULT_MASK = '... ... ... ... ..';
|
|
35
35
|
const ALWAYS_DEFAULT_MASK = false;
|
|
36
|
+
const initializedCountryObject = {
|
|
37
|
+
name: '',
|
|
38
|
+
regions: [''],
|
|
39
|
+
iso2: '',
|
|
40
|
+
countryCode: '',
|
|
41
|
+
dialCode: '',
|
|
42
|
+
format: '',
|
|
43
|
+
priority: 0,
|
|
44
|
+
areaCode: [''],
|
|
45
|
+
isHavingDefaultFormat: false,
|
|
46
|
+
};
|
|
36
47
|
// Getting Country phone format
|
|
37
48
|
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
38
49
|
if (!predefinedMask || alwaysDefaultMask) {
|
|
@@ -52,6 +63,7 @@ const initializedCountries = CountryData_1.COUNTRY_DATA.map((country) => {
|
|
|
52
63
|
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
|
|
53
64
|
priority: country[5] || 0,
|
|
54
65
|
areaCode: country[6] || [],
|
|
66
|
+
isHavingDefaultFormat: country[4] ? true : false,
|
|
55
67
|
};
|
|
56
68
|
return countryItem;
|
|
57
69
|
});
|
|
@@ -102,22 +114,13 @@ const getPhoneObj = (phoneNumber) => {
|
|
|
102
114
|
};
|
|
103
115
|
exports.getPhoneObj = getPhoneObj;
|
|
104
116
|
function PhoneInput(props) {
|
|
105
|
-
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
|
|
117
|
+
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, setPhoneLength, } = props;
|
|
106
118
|
const { t } = react_i18next_1.useTranslation();
|
|
107
119
|
const [isOpen, setIsOpen] = react_1.useState(false);
|
|
108
120
|
const [iso2, setIso2] = react_1.useState('');
|
|
109
121
|
const [formattedNumber, setFormattedNumber] = react_1.useState('');
|
|
110
122
|
const [format, setFormat] = react_1.useState('');
|
|
111
|
-
const [countryObj, setCountryObj] = react_1.useState(
|
|
112
|
-
name: '',
|
|
113
|
-
regions: [''],
|
|
114
|
-
iso2: '',
|
|
115
|
-
countryCode: '',
|
|
116
|
-
dialCode: '',
|
|
117
|
-
format: '',
|
|
118
|
-
priority: 0,
|
|
119
|
-
areaCode: [''], // Area codes of a country
|
|
120
|
-
});
|
|
123
|
+
const [countryObj, setCountryObj] = react_1.useState(initializedCountryObject);
|
|
121
124
|
const setLocalFormat = (phoneNumber) => {
|
|
122
125
|
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
123
126
|
localPhone = localPhone.replace('(', '').trim();
|
|
@@ -125,6 +128,9 @@ function PhoneInput(props) {
|
|
|
125
128
|
// if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
|
|
126
129
|
if (!isEmpty_1.default(countryObj) && isEqual_1.default(localPhone, countryObj.dialCode)) {
|
|
127
130
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
131
|
+
if (setPhoneLength) {
|
|
132
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
133
|
+
}
|
|
128
134
|
return countryObj.format;
|
|
129
135
|
}
|
|
130
136
|
let localFormat;
|
|
@@ -140,36 +146,50 @@ function PhoneInput(props) {
|
|
|
140
146
|
localFormat = canadaCountryObj[0].format.toString();
|
|
141
147
|
onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
|
|
142
148
|
setFormat(localFormat);
|
|
149
|
+
setPhoneLength && setPhoneLength(localFormat.length);
|
|
143
150
|
}
|
|
144
151
|
else if (!isEmpty_1.default(exactCountry)) {
|
|
145
152
|
const localExactCountry = exactCountry.filter((country) => isEqual_1.default(country.priority, 0));
|
|
146
153
|
if (isEqual_1.default(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
147
154
|
setIso2(countryObj.iso2);
|
|
148
155
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
156
|
+
if (setPhoneLength) {
|
|
157
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
158
|
+
}
|
|
149
159
|
return countryObj.format;
|
|
150
160
|
}
|
|
151
161
|
setIso2(localExactCountry[0].iso2.toString());
|
|
152
162
|
localFormat = localExactCountry[0].format.toString();
|
|
153
163
|
onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
|
|
154
164
|
setFormat(localFormat);
|
|
165
|
+
if (setPhoneLength) {
|
|
166
|
+
localExactCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
|
|
167
|
+
}
|
|
155
168
|
}
|
|
156
169
|
else if (!isEmpty_1.default(possibleCountries)) {
|
|
157
170
|
const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
|
|
158
171
|
if (isEqual_1.default(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
159
172
|
setIso2(countryObj.iso2);
|
|
160
173
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
174
|
+
if (setPhoneLength) {
|
|
175
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
176
|
+
}
|
|
161
177
|
return countryObj.format;
|
|
162
178
|
}
|
|
163
179
|
setIso2(localPossibleCountry[0].iso2.toString());
|
|
164
180
|
localFormat = localPossibleCountry[0].format.toString();
|
|
165
181
|
onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
|
|
166
182
|
setFormat(localFormat);
|
|
183
|
+
if (setPhoneLength) {
|
|
184
|
+
localPossibleCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
|
|
185
|
+
}
|
|
167
186
|
}
|
|
168
187
|
else {
|
|
169
188
|
// if the exact and possible are not the
|
|
170
189
|
setIso2('');
|
|
171
190
|
localFormat = format;
|
|
172
191
|
onCountryCodeChange && onCountryCodeChange('');
|
|
192
|
+
setPhoneLength && setPhoneLength(0);
|
|
173
193
|
}
|
|
174
194
|
return localFormat;
|
|
175
195
|
};
|
|
@@ -178,6 +198,7 @@ function PhoneInput(props) {
|
|
|
178
198
|
setFormattedNumber('');
|
|
179
199
|
onPhoneValueChange('');
|
|
180
200
|
setInvalid && setInvalid(false);
|
|
201
|
+
setPhoneLength && setPhoneLength(0);
|
|
181
202
|
}
|
|
182
203
|
const regex = /^[\d ()+-]+$/;
|
|
183
204
|
if (setInvalid)
|
|
@@ -225,6 +246,7 @@ function PhoneInput(props) {
|
|
|
225
246
|
react_1.useEffect(() => {
|
|
226
247
|
if (isEmpty_1.default(phoneValue)) {
|
|
227
248
|
setInvalid && setInvalid(false);
|
|
249
|
+
setPhoneLength && setPhoneLength(0);
|
|
228
250
|
return;
|
|
229
251
|
}
|
|
230
252
|
if (isEmpty_1.default(iso2)) {
|
|
@@ -251,19 +273,11 @@ function PhoneInput(props) {
|
|
|
251
273
|
return;
|
|
252
274
|
}
|
|
253
275
|
if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
|
|
254
|
-
setCountryObj(
|
|
255
|
-
name: '',
|
|
256
|
-
regions: [''],
|
|
257
|
-
iso2: '',
|
|
258
|
-
countryCode: '',
|
|
259
|
-
dialCode: '',
|
|
260
|
-
format: '',
|
|
261
|
-
priority: 0,
|
|
262
|
-
areaCode: [''],
|
|
263
|
-
});
|
|
276
|
+
setCountryObj(initializedCountryObject);
|
|
264
277
|
}
|
|
265
278
|
if (isEmpty_1.default(phoneValue)) {
|
|
266
279
|
setIso2('');
|
|
280
|
+
setPhoneLength && setPhoneLength(0);
|
|
267
281
|
setInvalid && setInvalid(false);
|
|
268
282
|
setFormattedNumber('');
|
|
269
283
|
onPhoneValueChange('');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AA2B7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,eAmmB5C;kBAnmBQ,cAAc;;;AAumBvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -20,6 +20,7 @@ import QuoteRightIcon from '@patternfly/react-icons/dist/js/icons/quote-right-ic
|
|
|
20
20
|
import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
|
|
21
21
|
import { emojiPattern, haltEvent, isEmojiPattern, isImageFile } from '@rh-support/utils';
|
|
22
22
|
import cx from 'classnames';
|
|
23
|
+
import DOMPurify from 'dompurify';
|
|
23
24
|
import isEmpty from 'lodash/isEmpty';
|
|
24
25
|
import React, { useEffect, useRef, useState } from 'react';
|
|
25
26
|
import { Trans, useTranslation } from 'react-i18next';
|
|
@@ -385,7 +386,7 @@ function MarkdownEditor(props) {
|
|
|
385
386
|
React.createElement(Trans, null, "Markdown guidance")))))),
|
|
386
387
|
React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows }))) : (React.createElement("div", { className: "markdown-preview", style: { maxHeight: mdValue ? 310 : 100 } },
|
|
387
388
|
React.createElement("div", { dangerouslySetInnerHTML: {
|
|
388
|
-
__html: previewMDText(mdValue),
|
|
389
|
+
__html: DOMPurify.sanitize(previewMDText(mdValue)),
|
|
389
390
|
} })))),
|
|
390
391
|
React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
|
|
391
392
|
React.createElement("span", { className: "markdown-toolbar-left-section" },
|
|
@@ -9,6 +9,8 @@ interface IProps {
|
|
|
9
9
|
setInvalid?: (boolean: any) => void;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
|
+
phoneLength?: number;
|
|
13
|
+
setPhoneLength?: (number: any) => void;
|
|
12
14
|
}
|
|
13
15
|
export declare const getPhoneObj: (phoneNumber: string) => {
|
|
14
16
|
countryCode: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;CACrC;AAuED,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4PvC"}
|
|
@@ -8,6 +8,17 @@ import { canadaAreaCodes, COUNTRY_DATA } from './CountryData';
|
|
|
8
8
|
const PREFIX = '+';
|
|
9
9
|
const DEFAULT_MASK = '... ... ... ... ..';
|
|
10
10
|
const ALWAYS_DEFAULT_MASK = false;
|
|
11
|
+
const initializedCountryObject = {
|
|
12
|
+
name: '',
|
|
13
|
+
regions: [''],
|
|
14
|
+
iso2: '',
|
|
15
|
+
countryCode: '',
|
|
16
|
+
dialCode: '',
|
|
17
|
+
format: '',
|
|
18
|
+
priority: 0,
|
|
19
|
+
areaCode: [''],
|
|
20
|
+
isHavingDefaultFormat: false,
|
|
21
|
+
};
|
|
11
22
|
// Getting Country phone format
|
|
12
23
|
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
13
24
|
if (!predefinedMask || alwaysDefaultMask) {
|
|
@@ -27,6 +38,7 @@ const initializedCountries = COUNTRY_DATA.map((country) => {
|
|
|
27
38
|
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
|
|
28
39
|
priority: country[5] || 0,
|
|
29
40
|
areaCode: country[6] || [],
|
|
41
|
+
isHavingDefaultFormat: country[4] ? true : false,
|
|
30
42
|
};
|
|
31
43
|
return countryItem;
|
|
32
44
|
});
|
|
@@ -76,22 +88,13 @@ export const getPhoneObj = (phoneNumber) => {
|
|
|
76
88
|
};
|
|
77
89
|
};
|
|
78
90
|
export function PhoneInput(props) {
|
|
79
|
-
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
|
|
91
|
+
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, setPhoneLength, } = props;
|
|
80
92
|
const { t } = useTranslation();
|
|
81
93
|
const [isOpen, setIsOpen] = useState(false);
|
|
82
94
|
const [iso2, setIso2] = useState('');
|
|
83
95
|
const [formattedNumber, setFormattedNumber] = useState('');
|
|
84
96
|
const [format, setFormat] = useState('');
|
|
85
|
-
const [countryObj, setCountryObj] = useState(
|
|
86
|
-
name: '',
|
|
87
|
-
regions: [''],
|
|
88
|
-
iso2: '',
|
|
89
|
-
countryCode: '',
|
|
90
|
-
dialCode: '',
|
|
91
|
-
format: '',
|
|
92
|
-
priority: 0,
|
|
93
|
-
areaCode: [''], // Area codes of a country
|
|
94
|
-
});
|
|
97
|
+
const [countryObj, setCountryObj] = useState(initializedCountryObject);
|
|
95
98
|
const setLocalFormat = (phoneNumber) => {
|
|
96
99
|
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
97
100
|
localPhone = localPhone.replace('(', '').trim();
|
|
@@ -99,6 +102,9 @@ export function PhoneInput(props) {
|
|
|
99
102
|
// if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
|
|
100
103
|
if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
|
|
101
104
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
105
|
+
if (setPhoneLength) {
|
|
106
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
107
|
+
}
|
|
102
108
|
return countryObj.format;
|
|
103
109
|
}
|
|
104
110
|
let localFormat;
|
|
@@ -114,36 +120,50 @@ export function PhoneInput(props) {
|
|
|
114
120
|
localFormat = canadaCountryObj[0].format.toString();
|
|
115
121
|
onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
|
|
116
122
|
setFormat(localFormat);
|
|
123
|
+
setPhoneLength && setPhoneLength(localFormat.length);
|
|
117
124
|
}
|
|
118
125
|
else if (!isEmpty(exactCountry)) {
|
|
119
126
|
const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
|
|
120
127
|
if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
121
128
|
setIso2(countryObj.iso2);
|
|
122
129
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
130
|
+
if (setPhoneLength) {
|
|
131
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
132
|
+
}
|
|
123
133
|
return countryObj.format;
|
|
124
134
|
}
|
|
125
135
|
setIso2(localExactCountry[0].iso2.toString());
|
|
126
136
|
localFormat = localExactCountry[0].format.toString();
|
|
127
137
|
onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
|
|
128
138
|
setFormat(localFormat);
|
|
139
|
+
if (setPhoneLength) {
|
|
140
|
+
localExactCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
|
|
141
|
+
}
|
|
129
142
|
}
|
|
130
143
|
else if (!isEmpty(possibleCountries)) {
|
|
131
144
|
const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
|
|
132
145
|
if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
133
146
|
setIso2(countryObj.iso2);
|
|
134
147
|
onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
|
|
148
|
+
if (setPhoneLength) {
|
|
149
|
+
countryObj.isHavingDefaultFormat ? setPhoneLength(countryObj.format.length) : setPhoneLength(8);
|
|
150
|
+
}
|
|
135
151
|
return countryObj.format;
|
|
136
152
|
}
|
|
137
153
|
setIso2(localPossibleCountry[0].iso2.toString());
|
|
138
154
|
localFormat = localPossibleCountry[0].format.toString();
|
|
139
155
|
onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
|
|
140
156
|
setFormat(localFormat);
|
|
157
|
+
if (setPhoneLength) {
|
|
158
|
+
localPossibleCountry[0].isHavingDefaultFormat ? setPhoneLength(localFormat.length) : setPhoneLength(8);
|
|
159
|
+
}
|
|
141
160
|
}
|
|
142
161
|
else {
|
|
143
162
|
// if the exact and possible are not the
|
|
144
163
|
setIso2('');
|
|
145
164
|
localFormat = format;
|
|
146
165
|
onCountryCodeChange && onCountryCodeChange('');
|
|
166
|
+
setPhoneLength && setPhoneLength(0);
|
|
147
167
|
}
|
|
148
168
|
return localFormat;
|
|
149
169
|
};
|
|
@@ -152,6 +172,7 @@ export function PhoneInput(props) {
|
|
|
152
172
|
setFormattedNumber('');
|
|
153
173
|
onPhoneValueChange('');
|
|
154
174
|
setInvalid && setInvalid(false);
|
|
175
|
+
setPhoneLength && setPhoneLength(0);
|
|
155
176
|
}
|
|
156
177
|
const regex = /^[\d ()+-]+$/;
|
|
157
178
|
if (setInvalid)
|
|
@@ -199,6 +220,7 @@ export function PhoneInput(props) {
|
|
|
199
220
|
useEffect(() => {
|
|
200
221
|
if (isEmpty(phoneValue)) {
|
|
201
222
|
setInvalid && setInvalid(false);
|
|
223
|
+
setPhoneLength && setPhoneLength(0);
|
|
202
224
|
return;
|
|
203
225
|
}
|
|
204
226
|
if (isEmpty(iso2)) {
|
|
@@ -225,19 +247,11 @@ export function PhoneInput(props) {
|
|
|
225
247
|
return;
|
|
226
248
|
}
|
|
227
249
|
if (isEmpty(phoneValue) && isEmpty(iso2)) {
|
|
228
|
-
setCountryObj(
|
|
229
|
-
name: '',
|
|
230
|
-
regions: [''],
|
|
231
|
-
iso2: '',
|
|
232
|
-
countryCode: '',
|
|
233
|
-
dialCode: '',
|
|
234
|
-
format: '',
|
|
235
|
-
priority: 0,
|
|
236
|
-
areaCode: [''],
|
|
237
|
-
});
|
|
250
|
+
setCountryObj(initializedCountryObject);
|
|
238
251
|
}
|
|
239
252
|
if (isEmpty(phoneValue)) {
|
|
240
253
|
setIso2('');
|
|
254
|
+
setPhoneLength && setPhoneLength(0);
|
|
241
255
|
setInvalid && setInvalid(false);
|
|
242
256
|
setFormattedNumber('');
|
|
243
257
|
onPhoneValueChange('');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/components",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.9",
|
|
4
4
|
"description": "Contains all reusabel components for support app",
|
|
5
5
|
"author": "Vikas Rathee <vrathee@redhat.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -80,8 +80,8 @@
|
|
|
80
80
|
"@patternfly/react-core": "4.264.0",
|
|
81
81
|
"@patternfly/react-table": "4.111.33",
|
|
82
82
|
"@rh-support/types": "2.0.2",
|
|
83
|
-
"@rh-support/user-permissions": "2.1.
|
|
84
|
-
"@rh-support/utils": "2.1.
|
|
83
|
+
"@rh-support/user-permissions": "2.1.4",
|
|
84
|
+
"@rh-support/utils": "2.1.2",
|
|
85
85
|
"dompurify": "^2.2.6",
|
|
86
86
|
"downshift": "^6.0.5",
|
|
87
87
|
"js-worker-search": "^1.4.1",
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
"defaults and supports es6-module",
|
|
118
118
|
"maintained node versions"
|
|
119
119
|
],
|
|
120
|
-
"gitHead": "
|
|
120
|
+
"gitHead": "8f7f0aee0461c78e8a5cc0e16777371c4ae1305d"
|
|
121
121
|
}
|