@bloom-housing/ui-components 12.5.0 → 12.6.0

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 (5) hide show
  1. package/dist/src/page_components/listing/ListingsGroup.d.ts +3 -0
  2. package/dist/src/page_components/listing/ListingsGroup.js +14 -4
  3. package/dist/src/page_components/listing/ListingsGroup.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/page_components/listing/ListingsGroup.tsx +21 -2
package/dist/src/page_components/listing/ListingsGroup.d.ts CHANGED
@@ -9,6 +9,9 @@ export interface ListingsGroupProps {
9
9
  info?: string;
10
10
  listingsCount: number;
11
11
  showButtonText: string;
12
+ refKey?: string;
13
+ observerRef?: React.MutableRefObject<null | IntersectionObserver>;
14
+ isOpen?: boolean;
12
15
  }
13
16
  declare const ListingsGroup: (props: ListingsGroupProps) => JSX.Element;
14
17
  export { ListingsGroup as default, ListingsGroup };
package/dist/src/page_components/listing/ListingsGroup.js CHANGED
@@ -1,19 +1,29 @@
1
- import React, { useState } from "react";
1
+ import React, { useState, useEffect } from "react";
2
2
  import { Button } from "../../actions/Button";
3
3
  import { Icon } from "../../icons/Icon";
4
4
  import "./ListingsGroup.scss";
5
5
  var ListingsGroup = function (props) {
6
- var _a;
7
- var _b = useState(false), showListings = _b[0], setShowListings = _b[1];
6
+ var _a, _b;
7
+ var _c = useState(false), showListings = _c[0], setShowListings = _c[1];
8
8
  var toggleListings = function () { return setShowListings(!showListings); };
9
9
  var listingsCount = " (".concat(props.listingsCount, ")");
10
+ useEffect(function () {
11
+ if (props.isOpen) {
12
+ setShowListings(true);
13
+ }
14
+ }, [props.isOpen]);
10
15
  return (React.createElement("div", { className: "listings-group" },
11
16
  React.createElement("div", { className: "listings-group__header" },
12
17
  React.createElement("div", { className: "listings-group__content" },
13
18
  React.createElement("div", { className: "listings-group__icon" },
14
19
  React.createElement(Icon, { size: "xlarge", symbol: (_a = props.icon) !== null && _a !== void 0 ? _a : "clock" })),
15
20
  React.createElement("div", { className: "listings-group__header-group" },
16
- React.createElement("h2", { className: "listings-group__title" }, props.header),
21
+ React.createElement("h2", { id: (_b = props.refKey) !== null && _b !== void 0 ? _b : props.header, ref: function (el) {
22
+ var _a, _b;
23
+ if (el) {
24
+ (_b = (_a = props.observerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.observe(el);
25
+ }
26
+ }, className: "listings-group__title" }, props.header),
17
27
  props.info && React.createElement("div", { className: "listings-group__info" }, props.info))),
18
28
  React.createElement("div", { className: "listings-group__button" },
19
29
  React.createElement(Button, { className: "w-full", onClick: function () { return toggleListings(); } }, showListings
package/dist/src/page_components/listing/ListingsGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListingsGroup.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAqB,MAAM,kBAAkB,CAAA;AAC1D,OAAO,sBAAsB,CAAA;AAY7B,IAAM,aAAa,GAAG,UAAC,KAAyB;;IACxC,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAA;IACvD,IAAM,cAAc,GAAG,cAAM,OAAA,eAAe,CAAC,CAAC,YAAY,CAAC,EAA9B,CAA8B,CAAA;IAE3D,IAAM,aAAa,GAAG,YAAK,KAAK,CAAC,aAAa,MAAG,CAAA;IAEjD,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,SAAS,EAAC,wBAAwB;YACrC,6BAAK,SAAS,EAAE,yBAAyB;gBACvC,6BAAK,SAAS,EAAC,sBAAsB;oBACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,OAAO,GAAI,CACjD;gBACN,6BAAK,SAAS,EAAC,8BAA8B;oBAC3C,4BAAI,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAC,MAAM,CAAM;oBACxD,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,IAAI,CAAO,CACnE,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,cAAc,EAAE,EAAhB,CAAgB,IACvD,YAAY;oBACX,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,aAAa;oBACtC,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,aAAa,CACjC,CACL,CACF;QACL,YAAY,IAAI,KAAK,CAAC,QAAQ,CAC3B,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,CAAA"}
1
+ {"version":3,"file":"ListingsGroup.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAqB,MAAM,kBAAkB,CAAA;AAC1D,OAAO,sBAAsB,CAAA;AAe7B,IAAM,aAAa,GAAG,UAAC,KAAyB;;IACxC,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAA;IACvD,IAAM,cAAc,GAAG,cAAM,OAAA,eAAe,CAAC,CAAC,YAAY,CAAC,EAA9B,CAA8B,CAAA;IAE3D,IAAM,aAAa,GAAG,YAAK,KAAK,CAAC,aAAa,MAAG,CAAA;IAEjD,SAAS,CAAC;QACR,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,eAAe,CAAC,IAAI,CAAC,CAAA;SACtB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,SAAS,EAAC,wBAAwB;YACrC,6BAAK,SAAS,EAAE,yBAAyB;gBACvC,6BAAK,SAAS,EAAC,sBAAsB;oBACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,OAAO,GAAI,CACjD;gBACN,6BAAK,SAAS,EAAC,8BAA8B;oBAC3C,4BACE,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,KAAK,CAAC,MAAM,EAChC,GAAG,EAAE,UAAC,EAAE;;4BACN,IAAI,EAAE,EAAE;gCACN,MAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,OAAO,0CAAE,OAAO,CAAC,EAAE,CAAC,CAAA;6BACxC;wBACH,CAAC,EACD,SAAS,EAAC,uBAAuB,IAEhC,KAAK,CAAC,MAAM,CACV;oBACJ,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,IAAI,CAAO,CACnE,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAM,OAAA,cAAc,EAAE,EAAhB,CAAgB,IACvD,YAAY;oBACX,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,aAAa;oBACtC,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,aAAa,CACjC,CACL,CACF;QACL,YAAY,IAAI,KAAK,CAAC,QAAQ,CAC3B,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "12.5.0",
3
+ "version": "12.6.0",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/ui-components",
package/src/page_components/listing/ListingsGroup.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react"
1
+ import React, { useState, useEffect } from "react"
2
2
  import { Button } from "../../actions/Button"
3
3
  import { Icon, UniversalIconType } from "../../icons/Icon"
4
4
  import "./ListingsGroup.scss"
@@ -11,6 +11,9 @@ export interface ListingsGroupProps {
11
11
  info?: string
12
12
  listingsCount: number
13
13
  showButtonText: string
14
+ refKey?: string
15
+ observerRef?: React.MutableRefObject<null | IntersectionObserver>
16
+ isOpen?: boolean
14
17
  }
15
18
 
16
19
  const ListingsGroup = (props: ListingsGroupProps) => {
@@ -19,6 +22,12 @@ const ListingsGroup = (props: ListingsGroupProps) => {
19
22
 
20
23
  const listingsCount = ` (${props.listingsCount})`
21
24
 
25
+ useEffect(() => {
26
+ if (props.isOpen) {
27
+ setShowListings(true)
28
+ }
29
+ }, [props.isOpen])
30
+
22
31
  return (
23
32
  <div className="listings-group">
24
33
  <div className="listings-group__header">
@@ -27,7 +36,17 @@ const ListingsGroup = (props: ListingsGroupProps) => {
27
36
  <Icon size="xlarge" symbol={props.icon ?? `clock`} />
28
37
  </div>
29
38
  <div className="listings-group__header-group">
30
- <h2 className="listings-group__title">{props.header}</h2>
39
+ <h2
40
+ id={props.refKey ?? props.header}
41
+ ref={(el) => {
42
+ if (el) {
43
+ props.observerRef?.current?.observe(el)
44
+ }
45
+ }}
46
+ className="listings-group__title"
47
+ >
48
+ {props.header}
49
+ </h2>
31
50
  {props.info && <div className="listings-group__info">{props.info}</div>}
32
51
  </div>
33
52
  </div>