@plusscommunities/pluss-core-web 1.6.8 → 1.6.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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +104 -104
  2. package/dist/index.esm.js +104 -104
  3. package/dist/index.umd.js +104 -104
  4. package/package.json +47 -47
  5. package/src/components/AudienceSelector.js +149 -101
  6. package/src/components/FileInput.js +94 -44
  7. package/src/components/ImageInput.js +3 -4
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
1
  {
2
- "name": "@plusscommunities/pluss-core-web",
3
- "version": "1.6.8",
4
- "description": "Core extension package for Pluss Communities platform",
5
- "main": "dist/index.cjs.js",
6
- "scripts": {
7
- "build": "npm i && rollup -c",
8
- "betapatch": "npm version prepatch --preid=beta",
9
- "patch": "npm version patch",
10
- "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
11
- "betaupload:p": "npm run betapatch && npm run betaupload",
12
- "upload": "npm run build && npm publish --access public && rm -rf node_modules",
13
- "upload:p": "npm run patch && npm run upload"
14
- },
15
- "author": "Phillip Suh",
16
- "license": "ISC",
17
- "devDependencies": {
18
- "@babel/cli": "^7.14.3",
19
- "@babel/core": "^7.14.3",
20
- "@babel/plugin-transform-runtime": "^7.14.3",
21
- "@babel/preset-env": "^7.14.2",
22
- "@babel/preset-react": "^7.13.13",
23
- "@rollup/plugin-babel": "^5.3.0",
24
- "@rollup/plugin-json": "^4.1.0",
25
- "autoprefixer": "^10.2.6",
26
- "rollup": "^2.50.1",
27
- "rollup-plugin-local-resolve": "^1.0.7",
28
- "rollup-plugin-styles": "^3.14.1"
29
- },
30
- "dependencies": {
31
- "@babel/runtime": "^7.14.0"
32
- },
33
- "peerDependencies": {
34
- "@fortawesome/fontawesome-svg-core": "^6.4.0",
35
- "@fortawesome/free-solid-svg-icons": "^6.4.0",
36
- "@fortawesome/react-fontawesome": "^0.2.0",
37
- "jquery": "^3.2.1",
38
- "js-cookie": "^2.2.0",
39
- "lodash": "^4.17.4",
40
- "moment": "^2.30.1",
41
- "react": "^16.14.0",
42
- "react-dropzone": "^14.2.3",
43
- "react-fontawesome": "^1.6.1",
44
- "react-redux": "^5.0.6",
45
- "react-router-dom": "^4.2.2",
46
- "react-textarea-autosize": "^7.1.0-1"
47
- },
48
- "keywords": []
2
+ "name": "@plusscommunities/pluss-core-web",
3
+ "version": "1.6.9",
4
+ "description": "Core extension package for Pluss Communities platform",
5
+ "main": "dist/index.cjs.js",
6
+ "scripts": {
7
+ "build": "npm i && rollup -c",
8
+ "betapatch": "npm version prepatch --preid=beta",
9
+ "patch": "npm version patch",
10
+ "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
11
+ "betaupload:p": "npm run betapatch && npm run betaupload",
12
+ "upload": "npm run build && npm publish --access public && rm -rf node_modules",
13
+ "upload:p": "npm run patch && npm run upload"
14
+ },
15
+ "author": "Phillip Suh",
16
+ "license": "ISC",
17
+ "devDependencies": {
18
+ "@babel/cli": "^7.14.3",
19
+ "@babel/core": "^7.14.3",
20
+ "@babel/plugin-transform-runtime": "^7.14.3",
21
+ "@babel/preset-env": "^7.14.2",
22
+ "@babel/preset-react": "^7.13.13",
23
+ "@rollup/plugin-babel": "^5.3.0",
24
+ "@rollup/plugin-json": "^4.1.0",
25
+ "autoprefixer": "^10.2.6",
26
+ "rollup": "^2.50.1",
27
+ "rollup-plugin-local-resolve": "^1.0.7",
28
+ "rollup-plugin-styles": "^3.14.1"
29
+ },
30
+ "dependencies": {
31
+ "@babel/runtime": "^7.14.0"
32
+ },
33
+ "peerDependencies": {
34
+ "@fortawesome/fontawesome-svg-core": "^6.4.0",
35
+ "@fortawesome/free-solid-svg-icons": "^6.4.0",
36
+ "@fortawesome/react-fontawesome": "^0.2.0",
37
+ "jquery": "^3.2.1",
38
+ "js-cookie": "^2.2.0",
39
+ "lodash": "^4.17.4",
40
+ "moment": "^2.30.1",
41
+ "react": "^16.14.0",
42
+ "react-dropzone": "^14.2.3",
43
+ "react-fontawesome": "^1.6.1",
44
+ "react-redux": "^7.2.8",
45
+ "react-router-dom": "^4.2.2",
46
+ "react-textarea-autosize": "^7.1.0-1"
47
+ },
48
+ "keywords": []
49
49
  }
package/src/components/AudienceSelector.js CHANGED
@@ -1,15 +1,15 @@
1
- import React, { Component } from 'react';
2
- import FontAwesome from 'react-fontawesome';
3
- import _ from 'lodash';
4
- import { connect } from 'react-redux';
5
- import { setAuth } from '../actions';
6
- import { profileActions, typeActions, userActions } from '../apis';
7
- import { COLOUR_DUSK } from '../colours';
8
- import { AudienceIncluder } from './AudienceIncluder';
9
- import { Text } from './Text';
10
- import { RadioButton } from './RadioButton';
11
- import { DropdownInput } from './DropdownInput';
12
- import { Tag } from './Tag';
1
+ import React, { Component } from "react";
2
+ import FontAwesome from "react-fontawesome";
3
+ import _ from "lodash";
4
+ import { connect } from "react-redux";
5
+ import { setAuth } from "../actions";
6
+ import { profileActions, typeActions, userActions } from "../apis";
7
+ import { COLOUR_DUSK } from "../colours";
8
+ import { AudienceIncluder } from "./AudienceIncluder";
9
+ import { Text } from "./Text";
10
+ import { RadioButton } from "./RadioButton";
11
+ import { DropdownInput } from "./DropdownInput";
12
+ import { Tag } from "./Tag";
13
13
 
14
14
  class AudienceSelector extends Component {
15
15
  constructor(props) {
@@ -18,29 +18,29 @@ class AudienceSelector extends Component {
18
18
  this.state = {
19
19
  categories: [
20
20
  {
21
- Title: 'All Primary Users',
22
- Key: 'resident',
23
- ShortName: 'Primary',
21
+ Title: "All Primary Users",
22
+ Key: "resident",
23
+ ShortName: "Primary",
24
24
  },
25
25
  {
26
- Title: 'All Staff Users',
27
- Key: 'staff',
28
- ShortName: 'Staff',
26
+ Title: "All Staff Users",
27
+ Key: "staff",
28
+ ShortName: "Staff",
29
29
  },
30
30
  {
31
- Title: 'All Linked Users',
32
- Key: 'family',
33
- ShortName: 'Linked',
31
+ Title: "All Linked Users",
32
+ Key: "family",
33
+ ShortName: "Linked",
34
34
  },
35
35
  ],
36
36
  types: [],
37
- AudienceType: props.audienceType || 'All',
37
+ AudienceType: props.audienceType || "All",
38
38
  showInclude: false,
39
39
  includeList: [],
40
40
  showExclude: false,
41
41
  excludeList: [],
42
- Type: '',
43
- Category: '',
42
+ Type: "",
43
+ Category: "",
44
44
 
45
45
  userList: [],
46
46
  tagList: [],
@@ -57,14 +57,23 @@ class AudienceSelector extends Component {
57
57
 
58
58
  componentDidUpdate(prevProps) {
59
59
  const newState = {};
60
- if (prevProps.audienceType !== this.props.audienceType) newState.AudienceType = this.props.audienceType;
61
- if (!_.isEqual(prevProps.audienceTypeSelection, this.props.audienceTypeSelection))
60
+ if (prevProps.audienceType !== this.props.audienceType)
61
+ newState.AudienceType = this.props.audienceType;
62
+ if (
63
+ !_.isEqual(
64
+ prevProps.audienceTypeSelection,
65
+ this.props.audienceTypeSelection,
66
+ )
67
+ )
62
68
  newState.AudienceTagList = this.props.audienceTypeSelection;
63
69
  if (!_.isEmpty(newState)) this.setState(newState);
64
70
  }
65
71
 
66
72
  onSubmit() {
67
- if (this.state.AudienceType === 'User' && _.isEmpty(this.state.includeList)) {
73
+ if (
74
+ this.state.AudienceType === "User" &&
75
+ _.isEmpty(this.state.includeList)
76
+ ) {
68
77
  this.setState({ showInclude: true });
69
78
  }
70
79
  }
@@ -75,9 +84,9 @@ class AudienceSelector extends Component {
75
84
 
76
85
  getAudienceTypeSelection() {
77
86
  const { AudienceType, AudienceTagList, Category, Tag, Type } = this.state;
78
- if (AudienceType === 'Custom') return AudienceTagList || [];
79
- if (AudienceType === 'Category') return Category;
80
- if (AudienceType === 'UserTags') return Tag;
87
+ if (AudienceType === "Custom") return AudienceTagList || [];
88
+ if (AudienceType === "Category") return Category;
89
+ if (AudienceType === "UserTags") return Tag;
81
90
  return Type;
82
91
  }
83
92
 
@@ -97,7 +106,7 @@ class AudienceSelector extends Component {
97
106
  userList: res.data.results.Items,
98
107
  });
99
108
  })
100
- .catch((error) => {});
109
+ .catch((error) => { });
101
110
  }
102
111
 
103
112
  getUserTags() {
@@ -110,14 +119,14 @@ class AudienceSelector extends Component {
110
119
  }),
111
120
  });
112
121
  })
113
- .catch((error) => {});
122
+ .catch((error) => { });
114
123
  }
115
124
 
116
125
  setType(type, selection) {
117
126
  const newState = { AudienceType: type };
118
- if (type === 'Custom') newState.AudienceTagList = selection;
119
- if (type === 'UserType') newState.Type = selection;
120
- if (type === 'Category') newState.Category = selection;
127
+ if (type === "Custom") newState.AudienceTagList = selection;
128
+ if (type === "UserType") newState.Type = selection;
129
+ if (type === "Category") newState.Category = selection;
121
130
  this.setState(newState);
122
131
  }
123
132
 
@@ -125,14 +134,19 @@ class AudienceSelector extends Component {
125
134
  const { updateValidation, onChange } = this.props;
126
135
  const isValid = this.validateAudienceSelection();
127
136
  if (updateValidation) updateValidation(isValid);
128
- if (onChange) onChange(this.getAudienceType(), this.getAudienceTypeSelection(), isValid);
137
+ if (onChange)
138
+ onChange(
139
+ this.getAudienceType(),
140
+ this.getAudienceTypeSelection(),
141
+ isValid,
142
+ );
129
143
  };
130
144
 
131
145
  onChangeOption(type) {
132
146
  this.setState({
133
147
  AudienceType: type,
134
- Type: '',
135
- Category: '',
148
+ Type: "",
149
+ Category: "",
136
150
  includeList: [],
137
151
  excludeList: [],
138
152
  AudienceTagList: [],
@@ -143,43 +157,43 @@ class AudienceSelector extends Component {
143
157
  getOptions() {
144
158
  const options = [
145
159
  {
146
- Label: 'All users',
147
- Value: 'All',
148
- onChange: () => this.onChangeOption('All'),
160
+ Label: "All users",
161
+ Value: "All",
162
+ onChange: () => this.onChangeOption("All"),
149
163
  },
150
164
  ];
151
165
  if (this.props.custom) {
152
166
  options.push({
153
- Label: 'Custom',
154
- Value: 'Custom',
155
- onChange: () => this.onChangeOption('Custom'),
167
+ Label: "Custom",
168
+ Value: "Custom",
169
+ onChange: () => this.onChangeOption("Custom"),
156
170
  });
157
171
  } else {
158
172
  options.push({
159
- Label: 'By user category',
160
- Value: 'Category',
161
- onChange: () => this.onChangeOption('Category'),
173
+ Label: "By user category",
174
+ Value: "Category",
175
+ onChange: () => this.onChangeOption("Category"),
162
176
  });
163
177
  }
164
178
  if (!this.props.disallowUserType) {
165
179
  options.push({
166
- Label: 'By user type',
167
- Value: 'UserType',
168
- onChange: () => this.onChangeOption('UserType'),
180
+ Label: "By user type",
181
+ Value: "UserType",
182
+ onChange: () => this.onChangeOption("UserType"),
169
183
  });
170
184
  }
171
185
  if (this.props.allowTags) {
172
186
  options.push({
173
- Label: 'By user tag',
174
- Value: 'UserTags',
175
- onChange: () => this.onChangeOption('UserTags'),
187
+ Label: "By user tag",
188
+ Value: "UserTags",
189
+ onChange: () => this.onChangeOption("UserTags"),
176
190
  });
177
191
  }
178
192
  if (!this.props.disallowSingleUsers) {
179
193
  options.push({
180
- Label: 'To single users',
181
- Value: 'User',
182
- onChange: () => this.onChangeOption('User'),
194
+ Label: "To single users",
195
+ Value: "User",
196
+ onChange: () => this.onChangeOption("User"),
183
197
  });
184
198
  }
185
199
  return options;
@@ -187,11 +201,11 @@ class AudienceSelector extends Component {
187
201
 
188
202
  validateAudienceSelection() {
189
203
  const { AudienceType, includeList } = this.state;
190
- if (AudienceType === 'Custom' && !this.validateCustom()) return false;
191
- if (AudienceType === 'Category' && !this.validateCategory()) return false;
192
- if (AudienceType === 'UserType' && !this.validateType()) return false;
193
- if (AudienceType === 'User' && _.isEmpty(includeList)) return false;
194
- if (AudienceType === 'UserTags' && !this.validateTag()) return false;
204
+ if (AudienceType === "Custom" && !this.validateCustom()) return false;
205
+ if (AudienceType === "Category" && !this.validateCategory()) return false;
206
+ if (AudienceType === "UserType" && !this.validateType()) return false;
207
+ if (AudienceType === "User" && _.isEmpty(includeList)) return false;
208
+ if (AudienceType === "UserTags" && !this.validateTag()) return false;
195
209
  return true;
196
210
  }
197
211
 
@@ -211,7 +225,7 @@ class AudienceSelector extends Component {
211
225
  if (typeObject) {
212
226
  return typeObject.displayName;
213
227
  }
214
- return '';
228
+ return "";
215
229
  }
216
230
 
217
231
  selectTag = (key) => {
@@ -230,7 +244,7 @@ class AudienceSelector extends Component {
230
244
  if (tag) {
231
245
  return tag.Title;
232
246
  }
233
- return '';
247
+ return "";
234
248
  }
235
249
 
236
250
  getUserTypes() {
@@ -246,30 +260,36 @@ class AudienceSelector extends Component {
246
260
  const category = _.find(this.state.categories, (c) => {
247
261
  return c.Key === e.category;
248
262
  });
249
- const shortName = category ? `(${category.ShortName}) ` : '';
263
+ const shortName = category ? `(${category.ShortName}) ` : "";
250
264
  e.Title = `${shortName} ${e.Title}`;
251
265
  }
252
266
  });
253
267
  const newState = {
254
268
  types: res.data,
255
269
  };
256
- if (!_.some(res.data, (t) => t.category === 'family')) {
257
- newState.categories = _.filter(this.state.categories, (c) => c.Key !== 'family');
270
+ if (!_.some(res.data, (t) => t.category === "family")) {
271
+ newState.categories = _.filter(
272
+ this.state.categories,
273
+ (c) => c.Key !== "family",
274
+ );
258
275
  }
259
276
  this.setState(newState);
260
277
  })
261
- .catch((error) => {});
278
+ .catch((error) => { });
262
279
  }
263
280
 
264
281
  getUserList() {
265
- if (this.state.AudienceType === 'UserType' && !_.isEmpty(this.state.Type)) {
282
+ if (this.state.AudienceType === "UserType" && !_.isEmpty(this.state.Type)) {
266
283
  let users = [];
267
284
  this.state.userList.forEach((element) => {
268
285
  if (element.type !== this.state.Type) users.push(element);
269
286
  });
270
- return _.sortBy(users, 'displayName');
287
+ return _.sortBy(users, "displayName");
271
288
  }
272
- if (this.state.AudienceType === 'Category' && !_.isEmpty(this.state.Category)) {
289
+ if (
290
+ this.state.AudienceType === "Category" &&
291
+ !_.isEmpty(this.state.Category)
292
+ ) {
273
293
  let users = [];
274
294
  let types = _.filter(this.state.types, (type) => {
275
295
  return type.category === this.state.Category;
@@ -281,9 +301,9 @@ class AudienceSelector extends Component {
281
301
  users.push(element);
282
302
  }
283
303
  });
284
- return _.sortBy(users, 'displayName');
304
+ return _.sortBy(users, "displayName");
285
305
  }
286
- return _.sortBy(this.state.userList, 'displayName');
306
+ return _.sortBy(this.state.userList, "displayName");
287
307
  }
288
308
 
289
309
  selectCat(key, e) {
@@ -302,7 +322,7 @@ class AudienceSelector extends Component {
302
322
  if (typeObject) {
303
323
  return typeObject.Title;
304
324
  }
305
- return '';
325
+ return "";
306
326
  }
307
327
 
308
328
  validateCustom = () => {
@@ -310,7 +330,9 @@ class AudienceSelector extends Component {
310
330
  };
311
331
 
312
332
  validateCategory() {
313
- return !_.isUndefined(this.state.Category) && !_.isEmpty(this.state.Category);
333
+ return (
334
+ !_.isUndefined(this.state.Category) && !_.isEmpty(this.state.Category)
335
+ );
314
336
  }
315
337
 
316
338
  validateType() {
@@ -322,7 +344,7 @@ class AudienceSelector extends Component {
322
344
  }
323
345
 
324
346
  showUserPickers(isInclude) {
325
- if (isInclude && this.state.AudienceType === 'User') {
347
+ if (isInclude && this.state.AudienceType === "User") {
326
348
  return true;
327
349
  }
328
350
  if (isInclude && !this.props.allowIncludes) {
@@ -331,15 +353,16 @@ class AudienceSelector extends Component {
331
353
  if (!isInclude && !this.props.allowExcludes) {
332
354
  return false;
333
355
  }
334
- if (isInclude && this.state.AudienceType === 'All') {
356
+ if (isInclude && this.state.AudienceType === "All") {
335
357
  return false;
336
358
  }
337
- if (!isInclude && this.state.AudienceType === 'User') {
359
+ if (!isInclude && this.state.AudienceType === "User") {
338
360
  return false;
339
361
  }
340
362
  if (
341
- (this.state.AudienceType === 'Category' && _.isEmpty(this.state.Category)) ||
342
- (this.state.AudienceType === 'UserType' && _.isEmpty(this.state.Type))
363
+ (this.state.AudienceType === "Category" &&
364
+ _.isEmpty(this.state.Category)) ||
365
+ (this.state.AudienceType === "UserType" && _.isEmpty(this.state.Type))
343
366
  ) {
344
367
  return false;
345
368
  }
@@ -347,14 +370,17 @@ class AudienceSelector extends Component {
347
370
  }
348
371
 
349
372
  getUserExcludeList() {
350
- if (this.state.AudienceType === 'UserType' && !_.isEmpty(this.state.Type)) {
373
+ if (this.state.AudienceType === "UserType" && !_.isEmpty(this.state.Type)) {
351
374
  let users = [];
352
375
  this.state.userList.forEach((element) => {
353
376
  if (element.type === this.state.Type) users.push(element);
354
377
  });
355
- return _.sortBy(users, 'displayName');
378
+ return _.sortBy(users, "displayName");
356
379
  }
357
- if (this.state.AudienceType === 'Category' && !_.isEmpty(this.state.Category)) {
380
+ if (
381
+ this.state.AudienceType === "Category" &&
382
+ !_.isEmpty(this.state.Category)
383
+ ) {
358
384
  let users = [];
359
385
  let types = _.filter(this.state.types, (type) => {
360
386
  return type.category === this.state.Category;
@@ -366,9 +392,9 @@ class AudienceSelector extends Component {
366
392
  users.push(element);
367
393
  }
368
394
  });
369
- return _.sortBy(users, 'displayName');
395
+ return _.sortBy(users, "displayName");
370
396
  }
371
- return _.sortBy(this.state.userList, 'displayName');
397
+ return _.sortBy(this.state.userList, "displayName");
372
398
  }
373
399
 
374
400
  addToInc(user) {
@@ -413,7 +439,7 @@ class AudienceSelector extends Component {
413
439
  const { categories, types, tagList, AudienceTagList } = this.state;
414
440
  const categoryTags = categories.map((c) => {
415
441
  return {
416
- AudienceType: 'Category',
442
+ AudienceType: "Category",
417
443
  AudienceTypeSelection: c.Key,
418
444
  Id: `category_${c.Key}`,
419
445
  Title: c.Title,
@@ -421,7 +447,7 @@ class AudienceSelector extends Component {
421
447
  });
422
448
  const userTypeTags = types.map((t) => {
423
449
  return {
424
- AudienceType: 'UserType',
450
+ AudienceType: "UserType",
425
451
  AudienceTypeSelection: t.typeName,
426
452
  Id: `userType_${t.typeName}`,
427
453
  Title: `User Type: ${t.displayName}`,
@@ -429,14 +455,16 @@ class AudienceSelector extends Component {
429
455
  });
430
456
  const userTagTags = tagList.map((t) => {
431
457
  return {
432
- AudienceType: 'UserTags',
458
+ AudienceType: "UserTags",
433
459
  AudienceTypeSelection: t.Id,
434
460
  Id: `userTag_${t.Id}`,
435
461
  Title: `User Tag: ${t.Title}`,
436
462
  };
437
463
  });
438
464
  const result = [...categoryTags, ...userTypeTags, ...userTagTags];
439
- return includeSelected ? result : result.filter((t) => !_.some(AudienceTagList, (at) => at.Id === t.Id));
465
+ return includeSelected
466
+ ? result
467
+ : result.filter((t) => !_.some(AudienceTagList, (at) => at.Id === t.Id));
440
468
  };
441
469
 
442
470
  onAttachAudienceTag = (tag) => {
@@ -445,7 +473,10 @@ class AudienceSelector extends Component {
445
473
  };
446
474
 
447
475
  onDetachAudienceTag = (tag) => {
448
- const AudienceTagList = _.filter(this.state.AudienceTagList, (at) => at.Id !== tag.Id);
476
+ const AudienceTagList = _.filter(
477
+ this.state.AudienceTagList,
478
+ (at) => at.Id !== tag.Id,
479
+ );
449
480
  this.setState({ AudienceTagList }, this.onChangeSelection);
450
481
  };
451
482
 
@@ -463,10 +494,14 @@ class AudienceSelector extends Component {
463
494
  >
464
495
  <div className="flex">
465
496
  <Text type="formTitleSmall" className="marginBottom-16">
466
- Exclude Users From Selection {`(${this.state.excludeList.length})`}
497
+ Exclude Users From Selection{" "}
498
+ {`(${this.state.excludeList.length})`}
467
499
  </Text>
468
500
  </div>
469
- <FontAwesome style={{ color: COLOUR_DUSK, fontSize: 12 }} name={this.state.showExclude ? 'chevron-up' : 'chevron-down'} />
501
+ <FontAwesome
502
+ style={{ color: COLOUR_DUSK, fontSize: 12 }}
503
+ name={this.state.showExclude ? "chevron-up" : "chevron-down"}
504
+ />
470
505
  </div>
471
506
  {this.state.showExclude && (
472
507
  <AudienceIncluder
@@ -494,10 +529,14 @@ class AudienceSelector extends Component {
494
529
  >
495
530
  <div className="flex">
496
531
  <Text type="formTitleSmall" className="marginBottom-16">
497
- {this.state.AudienceType !== 'User' ? 'Add Other' : 'Select'} Users {`(${this.state.includeList.length})`}
532
+ {this.state.AudienceType !== "User" ? "Add Other" : "Select"}{" "}
533
+ Users {`(${this.state.includeList.length})`}
498
534
  </Text>
499
535
  </div>
500
- <FontAwesome style={{ color: COLOUR_DUSK, fontSize: 12 }} name={this.state.showInclude ? 'chevron-up' : 'chevron-down'} />
536
+ <FontAwesome
537
+ style={{ color: COLOUR_DUSK, fontSize: 12 }}
538
+ name={this.state.showInclude ? "chevron-up" : "chevron-down"}
539
+ />
501
540
  </div>
502
541
  {this.state.showInclude && (
503
542
  <AudienceIncluder
@@ -544,14 +583,21 @@ class AudienceSelector extends Component {
544
583
  return (
545
584
  <div className="availableAudienceTags" style={{ maxWidth }}>
546
585
  {tags.map((t) => {
547
- return <Tag key={t.Id} className="marginLeft-16 marginBottom-8" text={t.Title} onClick={() => this.onAttachAudienceTag(t)} />;
586
+ return (
587
+ <Tag
588
+ key={t.Id}
589
+ className="marginLeft-16 marginBottom-8"
590
+ text={t.Title}
591
+ onClick={() => this.onAttachAudienceTag(t)}
592
+ />
593
+ );
548
594
  })}
549
595
  </div>
550
596
  );
551
597
  }
552
598
 
553
599
  renderCustom() {
554
- if (this.state.AudienceType !== 'Custom') return null;
600
+ if (this.state.AudienceType !== "Custom") return null;
555
601
 
556
602
  return (
557
603
  <div className="optionsContent_bottom">
@@ -570,16 +616,16 @@ class AudienceSelector extends Component {
570
616
  <div>
571
617
  {/* <div className={this.props.className || 'padding-32 paddingVertical-40 bottomDivideBorder'}> */}
572
618
  <Text type="formTitleSmall" className="marginBottom-16">
573
- {this.props.title || 'Target Audience'}
619
+ {this.props.title || "Target Audience"}
574
620
  </Text>
575
621
  <RadioButton
576
622
  isActive={this.state.AudienceType}
577
- rowStyle={{ flexDirection: 'column' }}
623
+ rowStyle={{ flexDirection: "column" }}
578
624
  buttonStyle={{ marginBottom: 8 }}
579
625
  options={this.getOptions()}
580
626
  disabled={this.props.disabled}
581
627
  />
582
- {this.state.AudienceType === 'Category' && (
628
+ {this.state.AudienceType === "Category" && (
583
629
  <DropdownInput
584
630
  id="typeSelect"
585
631
  // label='User Category'
@@ -599,7 +645,7 @@ class AudienceSelector extends Component {
599
645
  disabled={this.props.disabled}
600
646
  />
601
647
  )}
602
- {this.state.AudienceType === 'UserType' && (
648
+ {this.state.AudienceType === "UserType" && (
603
649
  <DropdownInput
604
650
  id="typeSelect"
605
651
  // label='User Type'
@@ -619,7 +665,7 @@ class AudienceSelector extends Component {
619
665
  disabled={this.props.disabled}
620
666
  />
621
667
  )}
622
- {this.state.AudienceType === 'UserTags' && (
668
+ {this.state.AudienceType === "UserTags" && (
623
669
  <DropdownInput
624
670
  id="tagSelect"
625
671
  alwaysShowLabel
@@ -647,6 +693,8 @@ class AudienceSelector extends Component {
647
693
  }
648
694
  }
649
695
 
650
- const toExport = connect(null, { setAuth }, null, { withRef: true })(AudienceSelector);
696
+ const toExport = connect(null, { setAuth }, null, { forwardRef: true })(
697
+ AudienceSelector,
698
+ );
651
699
 
652
700
  export { toExport as AudienceSelector };