@secondstaxorg/sscomp 1.7.42 → 1.7.43
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.
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +59 -37
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/types/components/Selector/types.d.ts +6 -4
package/dist/index.js
CHANGED
|
@@ -25273,38 +25273,60 @@ const _jsxFileName$6 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
|
|
|
25273
25273
|
* Component for making selections. Usage could be in an onboarding process
|
|
25274
25274
|
*/
|
|
25275
25275
|
const Selector = (props) => {
|
|
25276
|
-
const {itemsList,selectedItem,width,multiSelect,required,label,subText,errMsg,inputName,arrangement,otherOption,otherPlaceholder,numCols} = props;
|
|
25277
|
-
const [
|
|
25276
|
+
const {itemsList,selectedItem,width,multiSelect,required,label,subText,errMsg,inputName,arrangement,otherOption,otherPlaceholder,numCols,value} = props;
|
|
25277
|
+
const [selectedOptions,setSelectedOptions] = React$1.useState([]);
|
|
25278
25278
|
const [selStatus,setSelStatus] = React$1.useState('');
|
|
25279
25279
|
const [srSel,setSrSel] = React$1.useState('');
|
|
25280
25280
|
const [otherVal,setOtherVal] = React$1.useState('');
|
|
25281
25281
|
|
|
25282
25282
|
function handleSelect(selection){
|
|
25283
25283
|
setSelStatus('');
|
|
25284
|
-
let temp = [...
|
|
25284
|
+
let temp = [...selectedOptions];
|
|
25285
25285
|
|
|
25286
25286
|
const isPresent = temp.some((option) => option.label.toLowerCase() === selection.label.toLowerCase());
|
|
25287
25287
|
|
|
25288
25288
|
if (multiSelect){
|
|
25289
25289
|
if (!isPresent){
|
|
25290
|
-
|
|
25291
|
-
selectedItem([...
|
|
25290
|
+
setSelectedOptions([...selectedOptions,selection]);
|
|
25291
|
+
selectedItem([...selectedOptions,selection]);
|
|
25292
25292
|
}else {
|
|
25293
25293
|
const temp2 = temp.filter((option) => option.label !== selection.label);
|
|
25294
|
-
|
|
25294
|
+
setSelectedOptions(temp2);
|
|
25295
25295
|
selectedItem(temp2);
|
|
25296
25296
|
}
|
|
25297
25297
|
}else {
|
|
25298
25298
|
selectedItem(!isPresent ? selection : null);
|
|
25299
25299
|
setSrSel(!isPresent ? selection.label : '');
|
|
25300
|
-
|
|
25300
|
+
setSelectedOptions(!isPresent ? [selection] : []);
|
|
25301
25301
|
}
|
|
25302
25302
|
}
|
|
25303
25303
|
|
|
25304
|
+
React$1.useEffect(()=>{
|
|
25305
|
+
if (value){
|
|
25306
|
+
if (Array.isArray(value)){
|
|
25307
|
+
setSelectedOptions(value);
|
|
25308
|
+
}else {
|
|
25309
|
+
let inArray = false;
|
|
25310
|
+
|
|
25311
|
+
inArray = itemsList.some((item) => item.label.toLowerCase() === value.label.toLowerCase());
|
|
25312
|
+
|
|
25313
|
+
if (inArray){
|
|
25314
|
+
setSelectedOptions([value]);
|
|
25315
|
+
}else {
|
|
25316
|
+
setOtherVal(value.label);
|
|
25317
|
+
}
|
|
25318
|
+
}
|
|
25319
|
+
}
|
|
25320
|
+
},[value]);
|
|
25321
|
+
|
|
25322
|
+
React$1.useEffect(()=>{
|
|
25323
|
+
console.log(selectedOptions);
|
|
25324
|
+
},[selectedOptions]);
|
|
25325
|
+
|
|
25304
25326
|
React$1.useEffect(() => {
|
|
25305
25327
|
//determine that at least one option is selected
|
|
25306
|
-
if (
|
|
25307
|
-
if(
|
|
25328
|
+
if (selectedOptions.length > 0){
|
|
25329
|
+
if(selectedOptions[0].label){
|
|
25308
25330
|
setSrSel('sel');
|
|
25309
25331
|
}else {
|
|
25310
25332
|
setSrSel('');
|
|
@@ -25312,35 +25334,35 @@ const Selector = (props) => {
|
|
|
25312
25334
|
}else {
|
|
25313
25335
|
setSrSel('');
|
|
25314
25336
|
}
|
|
25315
|
-
}, [
|
|
25337
|
+
}, [selectedOptions]);
|
|
25316
25338
|
|
|
25317
25339
|
React$1.useEffect(()=>{
|
|
25318
25340
|
if (otherOption){
|
|
25319
|
-
|
|
25320
|
-
|
|
25321
|
-
|
|
25322
|
-
|
|
25323
|
-
|
|
25324
|
-
|
|
25325
|
-
|
|
25341
|
+
if (otherVal){
|
|
25342
|
+
setSrSel( otherVal ? 'sel' : '');
|
|
25343
|
+
const val = {
|
|
25344
|
+
label:otherVal,
|
|
25345
|
+
value:otherVal
|
|
25346
|
+
};
|
|
25347
|
+
selectedItem(val);
|
|
25348
|
+
setSelectedOptions([val]);
|
|
25349
|
+
}
|
|
25326
25350
|
}
|
|
25327
25351
|
},[otherVal]);
|
|
25328
25352
|
|
|
25329
25353
|
function evaluateSelection(item){
|
|
25330
|
-
|
|
25331
|
-
return true
|
|
25332
|
-
}
|
|
25354
|
+
return selectedOptions.some((option) => option.label.toLowerCase() === item.label.toLowerCase()) //this returns a boolean
|
|
25333
25355
|
}
|
|
25334
25356
|
|
|
25335
25357
|
return (
|
|
25336
|
-
React$1.createElement(MainContainer, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25358
|
+
React$1.createElement(MainContainer, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 93}}
|
|
25337
25359
|
, label &&
|
|
25338
|
-
React$1.createElement(InputLabel$2, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25339
|
-
, React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25340
|
-
, subText && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25360
|
+
React$1.createElement(InputLabel$2, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 95}}
|
|
25361
|
+
, React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 96}}, label)
|
|
25362
|
+
, subText && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 97}}, subText)
|
|
25341
25363
|
)
|
|
25342
25364
|
|
|
25343
|
-
, React$1.createElement(FieldContainer$1, { className: arrangement, style: {width:width ? width : '100%',gridTemplateColumns:`repeat(${numCols ? numCols : itemsList.length},1fr)`}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25365
|
+
, React$1.createElement(FieldContainer$1, { className: arrangement, style: {width:width ? width : '100%',gridTemplateColumns:`repeat(${numCols ? numCols : itemsList.length},1fr)`}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 100}}
|
|
25344
25366
|
, React$1.createElement(React$1.Fragment, null
|
|
25345
25367
|
, itemsList.map((item,index) => (
|
|
25346
25368
|
React$1.createElement(SelectorContainer, { type: "button", key: index, className: evaluateSelection(item) ? 'selected' : '', onClick: () => {
|
|
@@ -25348,33 +25370,33 @@ const Selector = (props) => {
|
|
|
25348
25370
|
setTimeout(()=>{
|
|
25349
25371
|
handleSelect(item);
|
|
25350
25372
|
},100);
|
|
25351
|
-
}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25352
|
-
, React$1.createElement('p', { className: "text paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25353
|
-
, React$1.createElement('svg', { width: "25", height: "22", viewBox: "0 0 16 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25373
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 103}}
|
|
25374
|
+
, React$1.createElement('p', { className: "text paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 109}}, item.label)
|
|
25375
|
+
, React$1.createElement('svg', { width: "25", height: "22", viewBox: "0 0 16 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 110}}
|
|
25354
25376
|
, React$1.createElement('path', { d: "M14.71 1.21C14.617 1.11627 14.5064 1.04188 14.3846 0.991107C14.2627 0.940338 14.132 0.9142 14 0.9142C13.868 0.9142 13.7373 0.940338 13.6154 0.991107C13.4936 1.04188 13.383 1.11627 13.29 1.21L5.84001 8.67L2.71001 5.53C2.61349 5.43676 2.49955 5.36345 2.37469 5.31424C2.24984 5.26504 2.11651 5.24091 1.98233 5.24323C1.84815 5.24555 1.71574 5.27428 1.59266 5.32777C1.46959 5.38126 1.35825 5.45848 1.26501 5.555C1.17177 5.65152 1.09846 5.76546 1.04925 5.89032C1.00005 6.01517 0.97592 6.1485 0.978241 6.28268C0.980563 6.41686 1.00929 6.54927 1.06278 6.67234C1.11628 6.79542 1.19349 6.90676 1.29001 7L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1097 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1097 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.68C14.8115 2.58636 14.8925 2.4727 14.9479 2.3462C15.0033 2.21971 15.0319 2.0831 15.0319 1.945C15.0319 1.8069 15.0033 1.67029 14.9479 1.54379C14.8925 1.41729 14.8115 1.30364 14.71 1.21V1.21Z" ,
|
|
25355
|
-
fill:
|
|
25377
|
+
fill: selectedOptions.some((option) => (option.label === item.label)) ? theme.colors["primary-500"] : theme.colors["neutral-400"], __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 111}})
|
|
25356
25378
|
)
|
|
25357
|
-
, React$1.createElement(SrInput, { type: "checkbox", name: inputName, value: item.value, onChange: ()=>{}, checked:
|
|
25379
|
+
, React$1.createElement(SrInput, { type: "checkbox", name: inputName, value: item.value, onChange: ()=>{}, checked: selectedOptions.some((option) => option.label === item.label), __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 114}})
|
|
25358
25380
|
)
|
|
25359
25381
|
))
|
|
25360
25382
|
)
|
|
25361
25383
|
)
|
|
25362
25384
|
, otherOption &&
|
|
25363
|
-
React$1.createElement(OtherContainer, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25364
|
-
, React$1.createElement('p', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25365
|
-
, React$1.createElement(TextField, { placeholder: otherPlaceholder, value: otherVal, onChange: (e)=>{setOtherVal(e.target.value);}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25385
|
+
React$1.createElement(OtherContainer, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 120}}
|
|
25386
|
+
, React$1.createElement('p', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 121}}, "Other? Specify" )
|
|
25387
|
+
, React$1.createElement(TextField, { placeholder: otherPlaceholder, value: otherVal, onChange: (e)=>{setOtherVal(e.target.value);}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 122}})
|
|
25366
25388
|
)
|
|
25367
25389
|
|
|
25368
25390
|
|
|
25369
25391
|
, React$1.createElement(SrInput, { className: "sr-only", value: srSel.toString(), required: required, onInvalid: (e)=>{
|
|
25370
25392
|
setSelStatus('error');
|
|
25371
25393
|
// e.target.setCustomValidity('This field is required')
|
|
25372
|
-
}, onChange: ()=>{}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25394
|
+
}, onChange: ()=>{}, __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 126}})
|
|
25373
25395
|
, selStatus === 'error' &&
|
|
25374
|
-
React$1.createElement(ErrorMessage$2, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25396
|
+
React$1.createElement(ErrorMessage$2, {__self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 131}}
|
|
25375
25397
|
/*exclamation-triangle*/
|
|
25376
|
-
, React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25377
|
-
, React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber:
|
|
25398
|
+
, React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 133}}
|
|
25399
|
+
, React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$6, lineNumber: 134}})
|
|
25378
25400
|
)
|
|
25379
25401
|
, errMsg ? errMsg : 'Select an option'
|
|
25380
25402
|
)
|