PluralLinkedSelect - accept valueIcons

Author: vxsl

src/components/linked-select.js

@@ -33,6 +33,7 @@ const LinkedSelect = ({
   disableSubMessage,
   customRender,
   customRenderSub,
+  icons,
 }) => {
   const [choice, setChoice] = useState(init)
   const [subChoice, setSubChoice] = useState(subInit)
@@ -77,6 +78,7 @@ const LinkedSelect = ({
             onSelect={setChoice}
             onClear={() => setChoice('')}
             placeholder={placeholders[0]}
+            {...(icons && { icons })}
           />
       }
     </div>
@@ -132,6 +134,7 @@ LinkedSelect.propTypes = {
   disableSubMessage: PropTypes.string,
   customRender: PropTypes.func,
   customRenderSub: PropTypes.func,
+  icons: PropTypes.array,
 }
 
 LinkedSelect.defaultProps = {
@@ -145,6 +148,7 @@ LinkedSelect.defaultProps = {
   disableSubMessage: '',
   customRender: null,
   customRenderSub: null,
+  icons: null,
 }
 
 export default LinkedSelect

src/components/plural-linked-select.js

@@ -44,6 +44,7 @@ const PluralLinkedSelect = ({
   headerIcons,
   titles,
   values,
+  valueIcons,
   primaryKey,
   secondaryKey,
   data,
@@ -55,6 +56,7 @@ const PluralLinkedSelect = ({
   addMessage,
   customRenderPrimary,
   customRenderSecondary,
+  valueIcons,
 }) => {
   const renderValue = i => {
     const primary = values[i]?.[primaryKey]
@@ -65,6 +67,7 @@ const PluralLinkedSelect = ({
         className={`${i > 0 ? 'mt-2' : ''}`}
         callback={([_k, _v]) => callback(i, { [primaryKey]: _k, [secondaryKey]: _v })}
         data={data.filter(d => primary === d || !values.map(v => v[primaryKey]).includes(d))}
+        {...(valueIcons && { icons: valueIcons })}
         init={primary}
         subData={subData}
         subInit={values[i]?.[secondaryKey]}
@@ -139,23 +142,27 @@ PluralLinkedSelect.propTypes = {
   callback: PropTypes.func.isRequired,
   deleteCallback: PropTypes.func,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
+  valueIcons: PropTypes.array,
   disableSubs: PropTypes.bool,
   disableSubMessage: PropTypes.string,
   addMessage: PropTypes.string,
   customRenderPrimary: PropTypes.func,
   customRenderSecondary: PropTypes.func,
+  valueIcons: PropTypes.array,
 }
 
 PluralLinkedSelect.defaultProps = {
   staticQuantity: null,
   titles: [],
   headerIcons: [],
   deleteCallback: () => {},
+  valueIcons: null,
   disableSubs: false,
   disableSubMessage: '',
   addMessage: 'Add',
   customRenderPrimary: null,
   customRenderSecondary: null,
+  valueIcons: null,
 }
 
 export default PluralLinkedSelect