@aclymatepackages/modules 4.3.4 → 5.0.1

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/dist/components/IndustryAutocomplete.js +93 -38
  2. package/package.json +1 -1
  3. package/src/components/IndustryAutocomplete.js +89 -42
package/dist/components/IndustryAutocomplete.js CHANGED
@@ -5,53 +5,108 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- require("core-js/modules/es.object.assign.js");
8
+ require("core-js/modules/es.symbol.description.js");
9
+ require("core-js/modules/es.promise.js");
9
10
  require("core-js/modules/web.dom-collections.iterator.js");
10
11
  var _react = _interopRequireWildcard(require("react"));
11
- var _Autocomplete = _interopRequireDefault(require("@mui/lab/Autocomplete"));
12
12
  var _material = require("@mui/material");
13
- var _lists = require("@aclymatepackages/lists");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ var _atoms = require("@aclymatepackages/atoms");
14
+ var _otherHelpers = require("@aclymatepackages/other-helpers");
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
18
- const CustomPopper = props => /*#__PURE__*/_react.default.createElement(_material.Popper, _extends({}, props, {
19
- style: {
20
- width: "fit-content"
21
- }
22
- }));
23
17
  const IndustryAutocomplete = _ref => {
24
18
  let {
25
19
  industry,
26
20
  setIndustry,
27
- style,
28
- variant = "outlined",
29
- label,
30
- helperText,
31
- textFieldProps
21
+ fetchNaicsCodes,
22
+ questionText = "What does your company do?"
32
23
  } = _ref;
33
- const [inputValue, setInputValue] = (0, _react.useState)("");
34
- return /*#__PURE__*/_react.default.createElement("div", {
35
- onClick: e => e.stopPropagation(),
36
- onFocus: e => e.stopPropagation()
37
- }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
38
- id: "company-industry-autocomplete",
39
- options: _lists.threeDigitNaicsCodesIndustries,
40
- getOptionLabel: option => typeof option === "string" ? option : option.label,
41
- renderInput: params => /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({}, params, {
42
- label: label || "Company Industry",
43
- fullWidth: true,
44
- size: "small",
45
- variant: variant,
46
- style: style,
47
- helperText: helperText
48
- }, textFieldProps)),
49
- inputValue: inputValue,
50
- onInputChange: (e, newInputValue) => setInputValue(newInputValue),
51
- onChange: (event, newValue) => setIndustry(newValue || null),
52
- value: industry !== null && industry !== void 0 ? industry : null,
53
- getOptionSelected: (option, value) => option.label === value.label,
54
- PopperComponent: CustomPopper
55
- }));
24
+ const [loading, setLoading] = (0, _react.useState)(false);
25
+ const [naicsCodesOptions, setNaicsCodesOptions] = (0, _react.useState)([]);
26
+ const [companyDescription, setCompanyDescription] = (0, _react.useState)("");
27
+ const industryTitle = (industry === null || industry === void 0 ? void 0 : industry.naicsTitle) || (industry === null || industry === void 0 ? void 0 : industry.label) || null;
28
+ const onSearch = async () => {
29
+ setLoading(true);
30
+ const options = await fetchNaicsCodes(companyDescription);
31
+ setNaicsCodesOptions(options || []);
32
+ setLoading(false);
33
+ };
34
+ const onSelectOption = _ref2 => {
35
+ let {
36
+ code,
37
+ description,
38
+ tonsCo2ePerDollar
39
+ } = _ref2;
40
+ setIndustry({
41
+ naicsCode: code,
42
+ naicsTitle: description,
43
+ tonsCo2ePerDollar
44
+ });
45
+ setNaicsCodesOptions([]);
46
+ };
47
+ const onDeleteCurrentIndustry = () => {
48
+ setIndustry(null);
49
+ setNaicsCodesOptions([]);
50
+ };
51
+ const showCurrentChip = !!industryTitle && !naicsCodesOptions.length;
52
+ const showOptions = !!naicsCodesOptions.length;
53
+ const showSearchInput = !showCurrentChip && !showOptions;
54
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSearchInput && /*#__PURE__*/_react.default.createElement(_material.Grid, {
55
+ item: true
56
+ }, /*#__PURE__*/_react.default.createElement(_atoms.SearchActionInput, {
57
+ label: questionText,
58
+ value: companyDescription,
59
+ setValue: setCompanyDescription,
60
+ searchLoading: loading,
61
+ searchFunction: onSearch
62
+ })), showCurrentChip && /*#__PURE__*/_react.default.createElement(_material.Grid, {
63
+ item: true,
64
+ alignSelf: "center"
65
+ }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
66
+ label: (0, _otherHelpers.truncateText)(industryTitle, 50),
67
+ onDelete: onDeleteCurrentIndustry
68
+ })), showOptions && /*#__PURE__*/_react.default.createElement(_material.Grid, {
69
+ item: true,
70
+ container: true,
71
+ spacing: 2
72
+ }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
73
+ item: true,
74
+ xs: 12
75
+ }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
76
+ variant: "h6",
77
+ align: "center"
78
+ }, "Select your company's industry")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
79
+ item: true,
80
+ container: true,
81
+ justifyContent: "center",
82
+ spacing: 2
83
+ }, naicsCodesOptions.map((_ref3, idx) => {
84
+ let {
85
+ code,
86
+ description,
87
+ tonsCo2ePerDollar
88
+ } = _ref3;
89
+ return /*#__PURE__*/_react.default.createElement(_material.Grid, {
90
+ item: true,
91
+ key: "naics-chip-".concat(idx)
92
+ }, /*#__PURE__*/_react.default.createElement(_atoms.DefaultSelectableChip, {
93
+ label: (0, _otherHelpers.truncateText)(description, 50),
94
+ onClick: () => onSelectOption({
95
+ code,
96
+ description,
97
+ tonsCo2ePerDollar
98
+ }),
99
+ isSelected: (industry === null || industry === void 0 ? void 0 : industry.naicsCode) === code
100
+ }));
101
+ })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
102
+ item: true,
103
+ container: true,
104
+ justifyContent: "center"
105
+ }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
106
+ item: true
107
+ }, /*#__PURE__*/_react.default.createElement(_material.Button, {
108
+ color: "primary",
109
+ onClick: () => setNaicsCodesOptions([])
110
+ }, "Choose Different Categories")))));
56
111
  };
57
112
  var _default = exports.default = IndustryAutocomplete;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aclymatepackages/modules",
3
- "version": "4.3.4",
3
+ "version": "5.0.1",
4
4
  "description": "Aclymate modules",
5
5
  "author": "William Loopesko",
6
6
  "main": "dist/index.js",
package/src/components/IndustryAutocomplete.js CHANGED
@@ -1,56 +1,103 @@
1
1
  import React, { useState } from "react";
2
2
 
3
- import Autocomplete from "@mui/lab/Autocomplete";
4
- import { TextField, Popper } from "@mui/material";
3
+ import { Grid, Typography, Chip, Button } from "@mui/material";
5
4
 
6
- import { threeDigitNaicsCodesIndustries } from "@aclymatepackages/lists";
7
-
8
- const CustomPopper = (props) => (
9
- <Popper {...props} style={{ width: "fit-content" }} />
10
- );
5
+ import {
6
+ DefaultSelectableChip,
7
+ SearchActionInput,
8
+ } from "@aclymatepackages/atoms";
9
+ import { truncateText } from "@aclymatepackages/other-helpers";
11
10
 
12
11
  const IndustryAutocomplete = ({
13
12
  industry,
14
13
  setIndustry,
15
- style,
16
- variant = "outlined",
17
- label,
18
- helperText,
19
- textFieldProps,
14
+ fetchNaicsCodes,
15
+ questionText = "What does your company do?",
20
16
  }) => {
21
- const [inputValue, setInputValue] = useState("");
17
+ const [loading, setLoading] = useState(false);
18
+ const [naicsCodesOptions, setNaicsCodesOptions] = useState([]);
19
+ const [companyDescription, setCompanyDescription] = useState("");
20
+
21
+ const industryTitle = industry?.naicsTitle || industry?.label || null;
22
+
23
+ const onSearch = async () => {
24
+ setLoading(true);
25
+ const options = await fetchNaicsCodes(companyDescription);
26
+ setNaicsCodesOptions(options || []);
27
+ setLoading(false);
28
+ };
29
+
30
+ const onSelectOption = ({ code, description, tonsCo2ePerDollar }) => {
31
+ setIndustry({
32
+ naicsCode: code,
33
+ naicsTitle: description,
34
+ tonsCo2ePerDollar,
35
+ });
36
+ setNaicsCodesOptions([]);
37
+ };
38
+
39
+ const onDeleteCurrentIndustry = () => {
40
+ setIndustry(null);
41
+ setNaicsCodesOptions([]);
42
+ };
43
+
44
+ const showCurrentChip = !!industryTitle && !naicsCodesOptions.length;
45
+ const showOptions = !!naicsCodesOptions.length;
46
+ const showSearchInput = !showCurrentChip && !showOptions;
22
47
 
23
48
  return (
24
- <div
25
- onClick={(e) => e.stopPropagation()}
26
- onFocus={(e) => e.stopPropagation()}
27
- >
28
- <Autocomplete
29
- id="company-industry-autocomplete"
30
- options={threeDigitNaicsCodesIndustries}
31
- getOptionLabel={(option) =>
32
- typeof option === "string" ? option : option.label
33
- }
34
- renderInput={(params) => (
35
- <TextField
36
- {...params}
37
- label={label || "Company Industry"}
38
- fullWidth
39
- size="small"
40
- variant={variant}
41
- style={style}
42
- helperText={helperText}
43
- {...textFieldProps}
49
+ <>
50
+ {showSearchInput && (
51
+ <Grid item>
52
+ <SearchActionInput
53
+ label={questionText}
54
+ value={companyDescription}
55
+ setValue={setCompanyDescription}
56
+ searchLoading={loading}
57
+ searchFunction={onSearch}
58
+ />
59
+ </Grid>
60
+ )}
61
+ {showCurrentChip && (
62
+ <Grid item alignSelf="center">
63
+ <Chip
64
+ label={truncateText(industryTitle, 50)}
65
+ onDelete={onDeleteCurrentIndustry}
44
66
  />
45
- )}
46
- inputValue={inputValue}
47
- onInputChange={(e, newInputValue) => setInputValue(newInputValue)}
48
- onChange={(event, newValue) => setIndustry(newValue || null)}
49
- value={industry ?? null}
50
- getOptionSelected={(option, value) => option.label === value.label}
51
- PopperComponent={CustomPopper}
52
- />
53
- </div>
67
+ </Grid>
68
+ )}
69
+ {showOptions && (
70
+ <Grid item container spacing={2}>
71
+ <Grid item xs={12}>
72
+ <Typography variant="h6" align="center">
73
+ Select your company&apos;s industry
74
+ </Typography>
75
+ </Grid>
76
+ <Grid item container justifyContent="center" spacing={2}>
77
+ {naicsCodesOptions.map(
78
+ ({ code, description, tonsCo2ePerDollar }, idx) => (
79
+ <Grid item key={`naics-chip-${idx}`}>
80
+ <DefaultSelectableChip
81
+ label={truncateText(description, 50)}
82
+ onClick={() =>
83
+ onSelectOption({ code, description, tonsCo2ePerDollar })
84
+ }
85
+ isSelected={industry?.naicsCode === code}
86
+ />
87
+ </Grid>
88
+ ),
89
+ )}
90
+ </Grid>
91
+ <Grid item container justifyContent="center">
92
+ <Grid item>
93
+ <Button color="primary" onClick={() => setNaicsCodesOptions([])}>
94
+ Choose Different Categories
95
+ </Button>
96
+ </Grid>
97
+ </Grid>
98
+ </Grid>
99
+ )}
100
+ </>
54
101
  );
55
102
  };
56
103
  export default IndustryAutocomplete;