dce-reactkit 3.2.5 → 3.2.6

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 (10) hide show
  1. package/dist/cjs/index.js +26 -26
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/ButtonInputGroup.d.ts +1 -0
  4. package/dist/esm/index.js +26 -26
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/ButtonInputGroup.d.ts +1 -0
  7. package/dist/index.d.ts +1 -0
  8. package/package.json +1 -1
  9. package/src/components/ButtonInputGroup.tsx +12 -1
  10. package/src/components/LogReviewer.tsx +51 -51
package/dist/esm/types/components/ButtonInputGroup.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type Props = {
8
8
  minLabelWidth?: string;
9
9
  children: React.ReactNode;
10
10
  className?: string;
11
+ wrapButtonsAndAddGaps?: boolean;
11
12
  };
12
13
  declare const ButtonInputGroup: React.FC<Props>;
13
14
  export default ButtonInputGroup;
package/dist/index.d.ts CHANGED
@@ -243,6 +243,7 @@ declare type Props$a = {
243
243
  minLabelWidth?: string;
244
244
  children: React.ReactNode;
245
245
  className?: string;
246
+ wrapButtonsAndAddGaps?: boolean;
246
247
  };
247
248
  declare const ButtonInputGroup: React.FC<Props$a>;
248
249
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dce-reactkit",
3
- "version": "3.2.5",
3
+ "version": "3.2.6",
4
4
  "description": "Shared components for Harvard DCE apps",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/ButtonInputGroup.tsx CHANGED
@@ -20,6 +20,8 @@ type Props = {
20
20
  children: React.ReactNode,
21
21
  // Additional class names to add to the outer container
22
22
  className?: string,
23
+ // If true, wrap buttons and create gaps
24
+ wrapButtonsAndAddGaps?: boolean,
23
25
  };
24
26
 
25
27
  /*------------------------------------------------------------------------*/
@@ -39,6 +41,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
39
41
  minLabelWidth,
40
42
  children,
41
43
  className,
44
+ wrapButtonsAndAddGaps,
42
45
  } = props;
43
46
 
44
47
  /*------------------------------------------------------------------------*/
@@ -77,7 +80,15 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
77
80
  borderLeftWidth: 0,
78
81
  }}
79
82
  >
80
- {children}
83
+ {
84
+ wrapButtonsAndAddGaps
85
+ ? (
86
+ <div className="d-flex gap-1 flex-wrap">
87
+ {children}
88
+ </div>
89
+ )
90
+ : children
91
+ }
81
92
  </span>
82
93
  </div>
83
94
  </div>
package/src/components/LogReviewer.tsx CHANGED
@@ -1413,61 +1413,61 @@ const LogReviewer: React.FC<Props> = (props) => {
1413
1413
  <ButtonInputGroup
1414
1414
  label="Action"
1415
1415
  className="mb-2"
1416
+ wrapButtonsAndAddGaps
1416
1417
  >
1417
- <div className="d-flex gap-1 flex-wrap">
1418
- {
1419
- Object.keys(LogAction)
1420
- .map((action) => {
1421
- const description = genHumanReadableName(action);
1422
- return (
1423
- <CheckboxButton
1424
- key={action}
1425
- id={`LogReviewer-action-${action}-checkbox`}
1426
- text={description}
1427
- ariaLabel={`include logs with action type "${description}" in results`}
1428
- noMarginOnRight
1429
- checked={actionErrorFilterState.action[action]}
1430
- onChanged={(checked) => {
1431
- actionErrorFilterState.action[action] = checked;
1432
- dispatch({
1433
- type: ActionType.UpdateActionErrorFilterState,
1434
- actionErrorFilterState,
1435
- });
1436
- }}
1437
- />
1438
- );
1439
- })
1440
- }
1441
- </div>
1418
+ {
1419
+ Object.keys(LogAction)
1420
+ .map((action) => {
1421
+ const description = genHumanReadableName(action);
1422
+ return (
1423
+ <CheckboxButton
1424
+ key={action}
1425
+ id={`LogReviewer-action-${action}-checkbox`}
1426
+ text={description}
1427
+ ariaLabel={`include logs with action type "${description}" in results`}
1428
+ noMarginOnRight
1429
+ checked={actionErrorFilterState.action[action]}
1430
+ onChanged={(checked) => {
1431
+ actionErrorFilterState.action[action] = checked;
1432
+ dispatch({
1433
+ type: ActionType.UpdateActionErrorFilterState,
1434
+ actionErrorFilterState,
1435
+ });
1436
+ }}
1437
+ />
1438
+ );
1439
+ })
1440
+ }
1442
1441
  </ButtonInputGroup>
1443
1442
  {/* Target */}
1444
- <ButtonInputGroup label="Target">
1443
+ <ButtonInputGroup
1444
+ label="Target"
1445
+ wrapButtonsAndAddGaps
1446
+ >
1445
1447
  {/* List of targets */}
1446
- <div className="d-flex gap-1 flex-wrap">
1447
- {
1448
- Object.keys(targetMap)
1449
- .map((target) => {
1450
- const description = genHumanReadableName(target);
1451
- return (
1452
- <CheckboxButton
1453
- key={target}
1454
- id={`LogReviewer-target-${target}-checkbox`}
1455
- text={description}
1456
- ariaLabel={`include logs with target "${description}" in results`}
1457
- checked={actionErrorFilterState.target[target]}
1458
- noMarginOnRight
1459
- onChanged={(checked) => {
1460
- actionErrorFilterState.target[target] = checked;
1461
- dispatch({
1462
- type: ActionType.UpdateActionErrorFilterState,
1463
- actionErrorFilterState,
1464
- });
1465
- }}
1466
- />
1467
- );
1468
- })
1469
- }
1470
- </div>
1448
+ {
1449
+ Object.keys(targetMap)
1450
+ .map((target) => {
1451
+ const description = genHumanReadableName(target);
1452
+ return (
1453
+ <CheckboxButton
1454
+ key={target}
1455
+ id={`LogReviewer-target-${target}-checkbox`}
1456
+ text={description}
1457
+ ariaLabel={`include logs with target "${description}" in results`}
1458
+ checked={actionErrorFilterState.target[target]}
1459
+ noMarginOnRight
1460
+ onChanged={(checked) => {
1461
+ actionErrorFilterState.target[target] = checked;
1462
+ dispatch({
1463
+ type: ActionType.UpdateActionErrorFilterState,
1464
+ actionErrorFilterState,
1465
+ });
1466
+ }}
1467
+ />
1468
+ );
1469
+ })
1470
+ }
1471
1471
  </ButtonInputGroup>
1472
1472
  </TabBox>
1473
1473
  )