@aclymatepackages/modules 2.3.2 → 2.4.1

package/dist/components/PdlCompanySelect.js

@@ -9,39 +9,12 @@ require("core-js/modules/es.promise.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _atoms = require("@aclymatepackages/atoms");
-var _themes = require("@aclymatepackages/themes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 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; }
-const CompanySelectionChip = _ref => {
-  let {
-    id,
-    name,
-    isSelected,
-    setSelectedCompanyId
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
-    theme: _themes.mainTheme
-  }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
-    label: name,
-    style: {
-      color: isSelected ? "white" : "inherit"
-    },
-    onClick: () => setSelectedCompanyId(currentId => currentId === id ? null : id),
-    icon: isSelected && /*#__PURE__*/_react.default.createElement(_Check.default, {
-      style: {
-        color: "white"
-      }
-    }),
-    color: isSelected ? "primary" : "default"
-  })));
-};
-const PdlCompanySelect = _ref2 => {
+const PdlCompanySelect = _ref => {
   let {
     onCompanyNotFound,
     onCompanySelected,
@@ -50,7 +23,7 @@ const PdlCompanySelect = _ref2 => {
     label = "Enter your company's name",
     actionLabel = "Please select your company from these options",
     helperText
-  } = _ref2;
+  } = _ref;
   const [inputValue, setInputValue] = (0, _react.useState)("");
   const [matchingCompanies, setMatchingCompanies] = (0, _react.useState)([]);
   const [inputComplete, setInputComplete] = (0, _react.useState)(false);
@@ -73,10 +46,10 @@ const PdlCompanySelect = _ref2 => {
     await onCompanySelected(companyId, name);
     return onSelectClick();
   };
-  const selectedCompany = matchingCompanies.find(_ref3 => {
+  const selectedCompany = matchingCompanies.find(_ref2 => {
     let {
       id
-    } = _ref3;
+    } = _ref2;
     return selectedCompanyId === id;
   });
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
@@ -90,10 +63,10 @@ const PdlCompanySelect = _ref2 => {
     label: label,
     value: inputValue,
     setValue: setInputValue,
-    onKeyPress: _ref4 => {
+    onKeyPress: _ref3 => {
       let {
         key
-      } = _ref4;
+      } = _ref3;
       if (key === "Enter") {
         return fetchMatchingCompanies();
       }
@@ -117,22 +90,11 @@ const PdlCompanySelect = _ref2 => {
     variant: "h6",
     align: "center"
   }, actionLabel)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    container: true,
-    spacing: 2,
-    justifyContent: "center"
-  }, matchingCompanies.map((_ref5, idx) => {
-    let {
-      name,
-      id
-    } = _ref5;
-    return /*#__PURE__*/_react.default.createElement(CompanySelectionChip, {
-      key: "company-list-item-".concat(idx),
-      name: name,
-      isSelected: selectedCompanyId === id,
-      setSelectedCompanyId: setSelectedCompanyId,
-      id: id
-    });
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_atoms.MatchingCompanyChips, {
+    matchingCompanies: matchingCompanies,
+    selectedCompanyId: selectedCompanyId,
+    setSelectedCompanyId: setSelectedCompanyId
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     container: true,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",
   "dependencies": {
     "@aclymatepackages/array-immutability-helpers": "^1.0.0",
-    "@aclymatepackages/atoms": "^3.2.0",
+    "@aclymatepackages/atoms": "^3.3.2",
     "@aclymatepackages/chart-helpers": "^2.0.8",
     "@aclymatepackages/converters": "^1.0.0",
     "@aclymatepackages/fetch-aclymate-api": "^1.0.0",

package/src/components/PdlCompanySelect.js

@@ -2,39 +2,18 @@ import React, { useState } from "react";
 
 import {
   Grid,
-  Chip,
   InputAdornment,
   CircularProgress,
   IconButton,
   Typography,
-  ThemeProvider,
 } from "@mui/material";
-import CheckIcon from "@mui/icons-material/Check";
 import SearchIcon from "@mui/icons-material/Search";
 
-import { TextField, LoadingButton } from "@aclymatepackages/atoms";
-import { mainTheme } from "@aclymatepackages/themes";
-
-const CompanySelectionChip = ({
-  id,
-  name,
-  isSelected,
-  setSelectedCompanyId,
-}) => (
-  <Grid item>
-    <ThemeProvider theme={mainTheme}>
-      <Chip
-        label={name}
-        style={{ color: isSelected ? "white" : "inherit" }}
-        onClick={() =>
-          setSelectedCompanyId((currentId) => (currentId === id ? null : id))
-        }
-        icon={isSelected && <CheckIcon style={{ color: "white" }} />}
-        color={isSelected ? "primary" : "default"}
-      />
-    </ThemeProvider>
-  </Grid>
-);
+import {
+  TextField,
+  LoadingButton,
+  MatchingCompanyChips,
+} from "@aclymatepackages/atoms";
 
 const PdlCompanySelect = ({
   onCompanyNotFound,
@@ -120,16 +99,12 @@ const PdlCompanySelect = ({
               {actionLabel}
             </Typography>
           </Grid>
-          <Grid item container spacing={2} justifyContent="center">
-            {matchingCompanies.map(({ name, id }, idx) => (
-              <CompanySelectionChip
-                key={`company-list-item-${idx}`}
-                name={name}
-                isSelected={selectedCompanyId === id}
-                setSelectedCompanyId={setSelectedCompanyId}
-                id={id}
-              />
-            ))}
+          <Grid item>
+            <MatchingCompanyChips
+              matchingCompanies={matchingCompanies}
+              selectedCompanyId={selectedCompanyId}
+              setSelectedCompanyId={setSelectedCompanyId}
+            />
           </Grid>
           <Grid item container spacing={2} justifyContent="center">
             <Grid item>