@capillarytech/creatives-library 6.0.1 → 6.0.2

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.
Files changed (3) hide show
  1. package/components/FormBuilder/index.js +60 -70
  2. package/package.json +1 -1
  3. package/v2Components/FormBuilder/index.js +60 -72
package/components/FormBuilder/index.js CHANGED
@@ -28,6 +28,11 @@ import messages from './messages';
28
28
  const TabPane = Tabs.TabPane;
29
29
  const {Column} = Table;
30
30
 
31
+
32
+ const tagsTypes = {
33
+ MISSING_TAGS: 'missingTags',
34
+ UNSUPPORTED_TAGS: 'unsupportedTags',
35
+ };
31
36
  const errorMessageForTags = {
32
37
  UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
33
38
  MISSING_TAG_ERROR: 'missingTagsError',
@@ -2125,16 +2130,58 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2125
2130
  });
2126
2131
  }
2127
2132
 
2128
- getMissingTagsName = (content = '') => {
2133
+ getMissingOrUnsupportedTagsName = (content = '', type) => {
2134
+ const { MISSING_TAGS, UNSUPPORTED_TAGS} = tagsTypes;
2129
2135
  const tagValidationResponse = this.validateTags(content);
2130
- const errorString = tagValidationResponse.missingTags.join(', ').toString();
2131
- return errorString;
2136
+ if (type && (type === MISSING_TAGS || type === UNSUPPORTED_TAGS)) {
2137
+ return tagValidationResponse[type].join(', ').toString();
2138
+ }
2139
+ return null;
2140
+
2132
2141
  };
2133
2142
 
2134
- getUnsupportedTagsName = (content = '') => {
2135
- const tagValidationResponse = this.validateTags(content);
2136
- const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
2137
- return errorString;
2143
+ renderTextAreaContent = (styling, columns, val, isVersionEnable, rows, cols, offset = 0) => {
2144
+ const { checkValidation, errorData, currentTab, formData } = this.state;
2145
+ const { MISSING_TAGS, UNSUPPORTED_TAGS } = tagsTypes;
2146
+ const errorType = (isVersionEnable ? errorData[`${currentTab - 1}`][val.id] : errorData[val.id]);
2147
+ const ifError = checkValidation && errorType;
2148
+ const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
2149
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2150
+ let errorMessage = false;
2151
+ const { formatMessage } = this.props.intl;
2152
+ switch (errorType) {
2153
+ case MISSING_TAG_ERROR:
2154
+ errorMessage = formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingOrUnsupportedTagsName(messageContent, MISSING_TAGS)});
2155
+ break;
2156
+ case UNSUPPORTED_TAG_ERROR:
2157
+ errorMessage = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getMissingOrUnsupportedTagsName(messageContent, UNSUPPORTED_TAGS)});
2158
+ break;
2159
+ case true:
2160
+ errorMessage = formatMessage(messages.genericTagsValidationError);
2161
+ break;
2162
+ default:
2163
+ break;
2164
+ }
2165
+ if (styling === 'semantic') {
2166
+ columns.push(
2167
+ <Col key="input" span={val.width} offset={offset}>
2168
+ <CapTextArea
2169
+ id={val.id}
2170
+ className={`${ifError ? 'error' : ''}`}
2171
+ placeholder={val.placeholder ? val.placeholder : ''}
2172
+ errorMessage={errorMessage}
2173
+ autosize={val.autosize ? val.autosizeParams : false}
2174
+ onChange={(e) => this.updateFormData(e.target.value, val)}
2175
+ style={val.style ? val.style : {}}
2176
+ defaultValue={messageContent || ''}
2177
+ value={messageContent || ''}
2178
+ rows={rows}
2179
+ disabled={val.disabled}
2180
+ cols={cols}
2181
+ />
2182
+ </Col>
2183
+ );
2184
+ }
2138
2185
  };
2139
2186
 
2140
2187
  renderColLabelSection(section, childIndex) {
@@ -2213,37 +2260,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2213
2260
  );
2214
2261
  break;
2215
2262
  case "textarea":
2216
- ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2217
- const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2218
- const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2219
- const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2220
- let errorMessage = false;
2221
- if (errorType && errorType === MISSING_TAG_ERROR) {
2222
- errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2223
- } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2224
- errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2225
- } else if (errorType) {
2226
- errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
2227
- }
2228
- if (styling === 'semantic') {
2229
- columns.push(
2230
- <Col key="input" span={val.width}>
2231
- <CapTextArea
2232
- id={val.id}
2233
- className={`${ifError ? 'error' : ''}`}
2234
- errorMessage={errorMessage}
2235
- autosize={val.autosize ? val.autosizeParams : false}
2236
- onChange={(e) => this.updateFormData(e.target.value, val)}
2237
- style={val.style ? val.style : {}}
2238
- defaultValue={messageContent}
2239
- value={messageContent}
2240
- rows={20}
2241
- disabled={val.disabled}
2242
- cols={20}
2243
- />
2244
- </Col>
2245
- );
2246
- }
2263
+ const rows = 20;
2264
+ const cols = 20;
2265
+ this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols);
2247
2266
  break;
2248
2267
  case "contentPreview":
2249
2268
  content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
@@ -2581,38 +2600,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2581
2600
  );
2582
2601
  break;
2583
2602
  case "textarea":
2584
- ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2585
- const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2586
- const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2587
- const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2588
- let errorMessage = false;
2589
- if (errorType && errorType === MISSING_TAG_ERROR) {
2590
- errorMessage = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2591
- } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2592
- errorMessage = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2593
- } else if (errorType) {
2594
- errorMessage = this.props.intl.formatMessage(messages.genericTagsValidationError);
2595
- }
2596
- if (styling === 'semantic') {
2597
- columns.push(
2598
- <Col key="input" span={val.width} offset={val.offset}>
2599
- <CapTextArea
2600
- id={val.id}
2601
- placeholder={val.placeholder ? val.placeholder : ''}
2602
- disabled={val.disabled}
2603
- className={`${ifError ? 'error' : ''}`}
2604
- errorMessage={errorMessage}
2605
- autosize={val.autosize ? val.autosizeParams : false}
2606
- onChange={(e) => this.updateFormData(e.target.value, val)}
2607
- style={val.style ? val.style : {}}
2608
- defaultValue={messageContent || ''}
2609
- value={messageContent || ''}
2610
- rows={10}
2611
- cols={2}
2612
- />
2613
- </Col>
2614
- );
2615
- }
2603
+ const rows = 10;
2604
+ const cols = 2;
2605
+ this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
2616
2606
  break;
2617
2607
  case "checkbox":
2618
2608
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "6.0.1",
4
+ "version": "6.0.2",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/v2Components/FormBuilder/index.js CHANGED
@@ -32,6 +32,10 @@ const {TextArea} = CapInput;
32
32
  const {CapRadioGroup} = CapRadio;
33
33
  // import styled from 'styled-components';
34
34
 
35
+ const tagsTypes = {
36
+ MISSING_TAGS: 'missingTags',
37
+ UNSUPPORTED_TAGS: 'unsupportedTags',
38
+ };
35
39
  const errorMessageForTags = {
36
40
  UNSUPPORTED_TAG_ERROR: 'unsupportedTagsError',
37
41
  MISSING_TAG_ERROR: 'missingTagsError',
@@ -2238,16 +2242,59 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2238
2242
  });
2239
2243
  }
2240
2244
 
2241
- getMissingTagsName = (content = '') => {
2245
+
2246
+ getMissingOrUnsupportedTagsName = (content = '', type) => {
2247
+ const { MISSING_TAGS, UNSUPPORTED_TAGS} = tagsTypes;
2242
2248
  const tagValidationResponse = this.validateTags(content);
2243
- const errorString = tagValidationResponse.missingTags.join(', ').toString();
2244
- return errorString;
2249
+ if (type && (type === MISSING_TAGS || type === UNSUPPORTED_TAGS)) {
2250
+ return tagValidationResponse[type].join(', ').toString();
2251
+ }
2252
+ return null;
2245
2253
  };
2246
2254
 
2247
- getUnsupportedTagsName = (content = '') => {
2248
- const tagValidationResponse = this.validateTags(content);
2249
- const errorString = tagValidationResponse.unsupportedTags.join(', ').toString();
2250
- return errorString;
2255
+ renderTextAreaContent = (styling, columns, val, isVersionEnable, rows, cols, offset = 0) => {
2256
+ const { checkValidation, errorData, currentTab, formData } = this.state;
2257
+ const { MISSING_TAGS, UNSUPPORTED_TAGS } = tagsTypes;
2258
+ const errorType = (isVersionEnable ? errorData[`${currentTab - 1}`][val.id] : errorData[val.id]);
2259
+ const ifError = checkValidation && errorType;
2260
+ const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
2261
+ const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2262
+ const { formatMessage } = this.props.intl;
2263
+ let errorMessageText = false;
2264
+ switch (errorType) {
2265
+ case MISSING_TAG_ERROR:
2266
+ errorMessageText = formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingOrUnsupportedTagsName(messageContent, MISSING_TAGS)});
2267
+ break;
2268
+ case UNSUPPORTED_TAG_ERROR:
2269
+ errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getMissingOrUnsupportedTagsName(messageContent, UNSUPPORTED_TAGS)});
2270
+ break;
2271
+ case true:
2272
+ errorMessageText = formatMessage(messages.genericTagsValidationError);
2273
+ break;
2274
+ default:
2275
+ break;
2276
+ }
2277
+ if (styling === 'semantic') {
2278
+ columns.push(
2279
+ <CapColumn key="input" span={val.width} offset={offset}>
2280
+ <TextArea
2281
+ id={val.id}
2282
+ placeholder={val.placeholder ? val.placeholder : ''}
2283
+ className={`${ifError ? 'error' : ''}`}
2284
+ errorMessage={errorMessageText}
2285
+ label={val.label}
2286
+ autosize={val.autosize ? val.autosizeParams : false}
2287
+ onChange={(e) => this.updateFormData(e.target.value, val)}
2288
+ style={val.style ? val.style : {}}
2289
+ defaultValue={messageContent || ''}
2290
+ value={messageContent || ""}
2291
+ rows={rows}
2292
+ disabled={val.disabled}
2293
+ cols={cols}
2294
+ />
2295
+ </CapColumn>
2296
+ );
2297
+ }
2251
2298
  };
2252
2299
 
2253
2300
  renderColLabelSection(section, childIndex) {
@@ -2311,38 +2358,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2311
2358
  }
2312
2359
  break;
2313
2360
  case "textarea":
2314
- ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2315
- const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2316
- const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2317
- const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2318
- let errorMessageText = false;
2319
- if (errorType && errorType === MISSING_TAG_ERROR) {
2320
- errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2321
- } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2322
- errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2323
- } else if (errorType) {
2324
- errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
2325
- }
2326
- if (styling === 'semantic') {
2327
- columns.push(
2328
- <CapColumn key="input" span={val.width}>
2329
- <TextArea
2330
- id={val.id}
2331
- className={`${ifError ? 'error' : ''}`}
2332
- errorMessage={errorMessageText}
2333
- label={val.label}
2334
- autosize={val.autosize ? val.autosizeParams : false}
2335
- onChange={(e) => this.updateFormData(e.target.value, val)}
2336
- style={val.style ? val.style : {}}
2337
- defaultValue={messageContent || ''}
2338
- value={messageContent || ""}
2339
- rows={20}
2340
- disabled={val.disabled}
2341
- cols={20}
2342
- />
2343
- </CapColumn>
2344
- );
2345
- }
2361
+ const rows = 20;
2362
+ const cols = 20;
2363
+ this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
2346
2364
  break;
2347
2365
  case "contentPreview":
2348
2366
  content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
@@ -2756,39 +2774,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2756
2774
  break;
2757
2775
 
2758
2776
  case "textarea":
2759
- ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2760
- const messageContent = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
2761
- const errorType = (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
2762
- const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR } = errorMessageForTags;
2763
- let errorMessageText = false;
2764
- if (errorType && errorType === MISSING_TAG_ERROR) {
2765
- errorMessageText = this.props.intl.formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingTagsName(messageContent)});
2766
- } else if (errorType && errorType === UNSUPPORTED_TAG_ERROR) {
2767
- errorMessageText = this.props.intl.formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags: this.getUnsupportedTagsName(messageContent)});
2768
- } else if (errorType) {
2769
- errorMessageText = this.props.intl.formatMessage(messages.genericTagsValidationError);
2770
- }
2771
- if (styling === 'semantic') {
2772
- columns.push(
2773
- <CapColumn key="input" span={val.width} offset={val.offset}>
2774
- <TextArea
2775
- id={val.id}
2776
- placeholder={val.placeholder ? val.placeholder : ''}
2777
- disabled={val.disabled}
2778
- className={`${ifError ? 'error' : ''}`}
2779
- errorMessage={errorMessageText}
2780
- label={val.label}
2781
- autosize={val.autosize ? val.autosizeParams : false}
2782
- onChange={(e) => this.updateFormData(e.target.value, val)}
2783
- style={val.style ? val.style : {}}
2784
- defaultValue={messageContent || ''}
2785
- value={messageContent || ""}
2786
- rows={10}
2787
- cols={2}
2788
- />
2789
- </CapColumn>
2790
- );
2791
- }
2777
+ const rows = 10;
2778
+ const cols = 2;
2779
+ this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
2792
2780
  break;
2793
2781
  case "checkbox":
2794
2782
  ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);