@integry/sdk 4.5.10 → 4.5.12

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 (11) hide show
  1. package/dist/esm/index.csm.d.ts +2 -5
  2. package/dist/esm/index.csm.js +60 -56
  3. package/dist/umd/index.umd.d.ts +1 -0
  4. package/dist/umd/index.umd.js +60 -56
  5. package/package.json +1 -1
  6. package/src/components/MultipurposeField/TagMenu/index.ts +57 -52
  7. package/src/components/MultipurposeField/index.tsx +2 -0
  8. package/src/components/TestComponent/index.ts +54 -4
  9. package/src/features/common/ActionForm/index.ts +28 -6
  10. package/src/index.ts +3 -0
  11. package/src/types/index.ts +1 -0
package/src/components/MultipurposeField/TagMenu/index.ts CHANGED
@@ -43,6 +43,7 @@ interface FieldMenuProps {
43
43
  isMultiSelect?: boolean;
44
44
  loadingOptions?: boolean;
45
45
  nextPage?: string;
46
+ tagsComponent?: any;
46
47
  }
47
48
 
48
49
  const FieldDropdown = (props: FieldMenuProps) => {
@@ -65,6 +66,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
65
66
  isMultiSelect = false,
66
67
  loadingOptions = false,
67
68
  nextPage = '',
69
+ tagsComponent = null,
68
70
  } = props;
69
71
 
70
72
  // Set active tab in state
@@ -327,59 +329,62 @@ const FieldDropdown = (props: FieldMenuProps) => {
327
329
  </div>`}
328
330
  </div>`
329
331
  : html` <div className="${styles.mappedFieldMenu}">
330
- ${Object.keys(!isEditable ? searchJSON(tags, searchValue) : tags)
331
- .length > 0
332
- ? Object.keys(
332
+ ${tagsComponent
333
+ ? html`${tagsComponent}`
334
+ : html`${Object.keys(
333
335
  !isEditable ? searchJSON(tags, searchValue) : tags,
334
- ).map(
335
- (objKey, index, arr) => html`
336
- <${TagOptions}
337
- objectKey="${objKey}"
338
- keyValue="${objKey}"
339
- objectData="${!isEditable
340
- ? searchJSON(tags, searchValue)[objKey]
341
- : tags[objKey]}"
342
- onSelect=${onTagClick}
343
- isRoot="${true}"
344
- />
345
- ${index !== arr.length - 1
346
- ? ''
347
- : html`<span>
348
- ${isLoadingRootStepData
349
- ? html`<${ThreeDotLoader} color="#999" />`
350
- : html` <a
351
- className=${styles.optionsRefreshProminent}
352
- href="#"
353
- onclick=${handleRefresh}
354
- >Reload fields?</a
355
- >`}
356
- </span>`}
357
- `,
358
- )
359
- : html`<div className=${styles.noOptions}>
360
- ${!isEditable && searchValue !== ''
361
- ? 'Your search did not match any fields'
362
- : html`
363
- <span className=${styles.noOptionsRetry}>
364
- ${isLoadingRootStepData
365
- ? html`<${ThreeDotLoader} color="#999" />`
366
- : html`${isErrorOnLoadingRootStepData
367
- ? 'Could not load fields.'
368
- : 'No fields found.'}
369
- <a
370
- className=${styles.optionsRefresh}
371
- href="#"
372
- onclick=${(e: any) => {
373
- e.preventDefault();
374
- e.stopPropagation();
375
- handleRefresh();
376
- }}
377
- >
378
- ${' '}Try again?</a
379
- >`}
380
- </span>
381
- `}
382
- </div>`}
336
+ ).length > 0
337
+ ? Object.keys(
338
+ !isEditable ? searchJSON(tags, searchValue) : tags,
339
+ ).map(
340
+ (objKey, index, arr) => html`
341
+ <${TagOptions}
342
+ objectKey="${objKey}"
343
+ keyValue="${objKey}"
344
+ objectData="${!isEditable
345
+ ? searchJSON(tags, searchValue)[objKey]
346
+ : tags[objKey]}"
347
+ onSelect=${onTagClick}
348
+ isRoot="${true}"
349
+ />
350
+ ${index !== arr.length - 1
351
+ ? ''
352
+ : html`<span>
353
+ ${isLoadingRootStepData
354
+ ? html`<${ThreeDotLoader} color="#999" />`
355
+ : html` <a
356
+ className=${styles.optionsRefreshProminent}
357
+ href="#"
358
+ onclick=${handleRefresh}
359
+ >Reload fields?</a
360
+ >`}
361
+ </span>`}
362
+ `,
363
+ )
364
+ : html`<div className=${styles.noOptions}>
365
+ ${!isEditable && searchValue !== ''
366
+ ? 'Your search did not match any fields'
367
+ : html`
368
+ <span className=${styles.noOptionsRetry}>
369
+ ${isLoadingRootStepData
370
+ ? html`<${ThreeDotLoader} color="#999" />`
371
+ : html`${isErrorOnLoadingRootStepData
372
+ ? 'Could not load fields.'
373
+ : 'No fields found.'}
374
+ <a
375
+ className=${styles.optionsRefresh}
376
+ href="#"
377
+ onclick=${(e: any) => {
378
+ e.preventDefault();
379
+ e.stopPropagation();
380
+ handleRefresh();
381
+ }}
382
+ >
383
+ ${' '}Try again?</a
384
+ >`}
385
+ </span>
386
+ `}
387
+ </div>`}`}
383
388
  </div>`}
384
389
  </div>
385
390
  </div>`;
package/src/components/MultipurposeField/index.tsx CHANGED
@@ -363,6 +363,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
363
363
  };
364
364
 
365
365
  const onTagClick = (tag: string) => {
366
+ console.log('tag', tag);
366
367
  if (tagify) {
367
368
  if (!allowTagsInText) {
368
369
  tagify.removeAllTags();
@@ -679,6 +680,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
679
680
  ? true
680
681
  : false}
681
682
  refreshRootStepData=${refreshRootStepData}
683
+ tagsComponent=${tagsComponent}
682
684
  />
683
685
  </div>`}
684
686
  </div>
package/src/components/TestComponent/index.ts CHANGED
@@ -3,19 +3,69 @@ import cx from 'classnames';
3
3
 
4
4
  import { Hint } from '@/components/Tooltip';
5
5
  import { ThreeDotLoader } from '@/components/ThreeDotLoader';
6
+ import { TagOptions } from '@/components/MultipurposeField/TagOptions';
6
7
 
7
8
  import styles from './styles.module.scss';
8
9
 
9
10
  export interface TestProps {
10
- label: string;
11
+ tags: any;
12
+ onSelect: (tag: any) => void;
11
13
  }
12
14
 
13
15
  /**
14
16
  * Test component
15
17
  *
16
18
  */
17
- export const Test = (props: TestProps) => {
18
- const { label, ...restOfProps } = props;
19
+ export const TestComponent = (props: TestProps) => {
20
+ const { tags, onSelect, ...restOfProps } = props;
21
+ const tagsLocal: any = {
22
+ FirstName: 'John',
23
+ LastName: 'Doe',
24
+ Gender: 'male',
25
+ Age: 20,
26
+ DateOfBirth: '1990-01-01',
27
+ Email: 'johndoe@example.com',
28
+ Phone: '555-555-1234',
29
+ Address: {
30
+ Street: '123 Main St',
31
+ City: 'New York',
32
+ State: 'NY',
33
+ PostalCode: '10001',
34
+ Country: 'USA',
35
+ },
36
+ PreferredContactMethod: 'email',
37
+ LastContacted: '2023-01-15',
38
+ Twitter: '@johndoe',
39
+ Website: 'https://www.example.com',
40
+ LinkedIn: 'https://www.linkedin.com/in/johndoe',
41
+ Bio: 'John Doe is a software engineer with over 10 years of experience.',
42
+ Relationship: 'professional',
43
+ Tags: ['tech', 'conference', 'networking'],
44
+ JobTitle: 'Software Engineer',
45
+ Company: 'Example Corp.',
46
+ DateCreated: '2023-04-14T12:00:00Z',
47
+ DateUpdated: '2023-04-14T12:00:00Z',
48
+ NextMeeting: {
49
+ Date: '2023-05-01',
50
+ Topic: 'Project Planning',
51
+ Location: 'New York',
52
+ },
53
+ Notes: 'Met at the 2022 Tech Conference in San Francisco.',
54
+ };
19
55
 
20
- return html` <div>Hello world</div> `;
56
+ return html`
57
+ <div>
58
+ ${Object.keys(tagsLocal).map(
59
+ (objKey, index, arr) => html`
60
+ <${TagOptions}
61
+ objectKey="${objKey}"
62
+ keyValue="${objKey}"
63
+ objectData="${tagsLocal[objKey]}"
64
+ onSelect=${onSelect}
65
+ isRoot="${true}"
66
+ />
67
+ `,
68
+ )}
69
+ </div>
70
+ `;
21
71
  };
package/src/features/common/ActionForm/index.ts CHANGED
@@ -48,6 +48,8 @@ interface ActionFormPropsType extends StoreType {
48
48
  accountConnected: boolean;
49
49
  selectedAuthId: string;
50
50
  onFieldChangeCallback?: (fieldId: string, value: string) => void;
51
+ tagsComponent?: any;
52
+ tagsTree?: any;
51
53
  }
52
54
 
53
55
  interface ActionFormStateType {
@@ -1437,13 +1439,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
1437
1439
  el.title || el.activity_field?.title
1438
1440
  }
1439
1441
  activityOutputData=${this.arrayToNestedJSONWithFirstValue(
1440
- this.props.activityOutputData,
1442
+ this.props.activityOutputData ||
1443
+ JSONToActivityOutputData(
1444
+ this.props.tagsTree || {},
1445
+ ),
1441
1446
  this.props.dynamicFieldData ||
1442
1447
  this.state.dynamicFieldDataState ||
1443
1448
  {},
1444
1449
  )}
1445
1450
  activityOutputDataRaw=${
1446
- this.props.activityOutputData
1451
+ this.props.activityOutputData ||
1452
+ JSONToActivityOutputData(
1453
+ this.props.tagsTree || {},
1454
+ )
1447
1455
  }
1448
1456
  description=${elDescription}
1449
1457
  value=${
@@ -1527,6 +1535,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
1527
1535
  el.data_type === 'STRING[]' ||
1528
1536
  el.data_type === 'NUMBER[]'
1529
1537
  )}
1538
+ tagsComponent=${this.props.tagsComponent}
1530
1539
  ><//>
1531
1540
  </${ConfigureFieldWrapper}>
1532
1541
  </div>
@@ -1633,13 +1642,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
1633
1642
  ...this.state.dynamicFieldsData,
1634
1643
  })}
1635
1644
  activityOutputData=${this.arrayToNestedJSONWithFirstValue(
1636
- this.props.activityOutputData,
1645
+ this.props.activityOutputData ||
1646
+ JSONToActivityOutputData(
1647
+ this.props.tagsTree || {},
1648
+ ),
1637
1649
  this.props.dynamicFieldData ||
1638
1650
  this.state.dynamicFieldDataState ||
1639
1651
  {},
1640
1652
  )}
1641
1653
  activityOutputDataRaw=${this.props
1642
- .activityOutputData}
1654
+ .activityOutputData ||
1655
+ JSONToActivityOutputData(
1656
+ this.props.tagsTree || {},
1657
+ )}
1643
1658
  placeHolder=${this.getPlaceholder(el)}
1644
1659
  appName=${this.props.step.activity.app
1645
1660
  .name}
@@ -1824,13 +1839,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
1824
1839
  type=${el.activity_field?.type}
1825
1840
  labelTags=${getFieldLabelTags(el, false)}
1826
1841
  activityOutputData=${this.arrayToNestedJSONWithFirstValue(
1827
- this.props.activityOutputData,
1842
+ this.props.activityOutputData ||
1843
+ JSONToActivityOutputData(
1844
+ this.props.tagsTree || {},
1845
+ ),
1828
1846
  this.props.dynamicFieldData ||
1829
1847
  this.state.dynamicFieldDataState ||
1830
1848
  {},
1831
1849
  )}
1832
1850
  activityOutputDataRaw=${
1833
- this.props.activityOutputData
1851
+ this.props.activityOutputData ||
1852
+ JSONToActivityOutputData(
1853
+ this.props.tagsTree || {},
1854
+ )
1834
1855
  }
1835
1856
  isMappable=${el.is_mappable}
1836
1857
  isEditable=${el.is_editable}
@@ -1839,6 +1860,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
1839
1860
  refreshRootStepData=${
1840
1861
  this.refreshRootStepData
1841
1862
  }
1863
+ tagsComponent=${this.props.tagsComponent}
1842
1864
  />
1843
1865
 
1844
1866
  </${ConfigureFieldWrapper}>
package/src/index.ts CHANGED
@@ -48,6 +48,7 @@ import FunctionForm from '@/features/common/FunctionForm';
48
48
  import { openPopupWindow } from '@/utils/popup';
49
49
  import { Modal } from '@/components/Modal';
50
50
  import { ListBox } from '@/components/MultipurposeField/Dropdown';
51
+ // import { TestComponent } from '@/components/TestComponent';
51
52
  import { MultipurposeField } from './components/MultipurposeField';
52
53
  import SDKDebugContainer from './features/containers/SDKDebugContainer';
53
54
 
@@ -1988,6 +1989,7 @@ export class IntegryJS {
1988
1989
  step: {},
1989
1990
  connectedAccountId: '',
1990
1991
  tagsComponent: null,
1992
+ tagsTree: {},
1991
1993
  onFieldChangeCallback: () => {
1992
1994
  // Placeholder function for future implementation
1993
1995
  },
@@ -2018,6 +2020,7 @@ export class IntegryJS {
2018
2020
  accountConnected=${true}
2019
2021
  tagsComponent=${options.tagsComponent}
2020
2022
  onFieldChangeCallback=${options.onFieldChangeCallback}
2023
+ tagsTree=${options.tagsTree}
2021
2024
  />
2022
2025
  <//>
2023
2026
  <//>
package/src/types/index.ts CHANGED
@@ -295,4 +295,5 @@ export type RenderFlowStepOptions = {
295
295
  connectedAccountId: string;
296
296
  tagsComponent?: any;
297
297
  onFieldChangeCallback: (fieldId: string, value: any) => void;
298
+ tagsTree: any;
298
299
  };