Untitled
unknown
plain_text
5 months ago
12 kB
3
Indexable
update the below code for checkboxgroup as we are getting th emodel value as undefined. what ever we are entering that should get stored in model and appcontext.model.getvalue() should give us the entered value. import React from 'react'; import PropTypes from 'prop-types'; import uuid from 'uuid'; import PrimeWrapper from '../primeWrapper/primeWrapper'; import PrimeCheckBox from './primeCheckBox'; import PrimeLabel from '../primeLabel/primeLabel'; import { Util } from '@d-lift/core'; import { useFormContext } from 'react-hook-form'; import { get } from 'lodash'; const PrimeCheckboxGroup = (props) => { const { id, required, model, trueValue, falseValue, checkStyle, inline, name, labelClassName, value, readOnly, disabled, className, checked, style, tooltip, children, tooltipOptions, autoFocus, invalid, unstyled, refTable, list, customListModel, evalRefTableData, displayName, evalLangText, evalAria, defaultOption, noOptionsMessage, labelKey: WCMlabelText, label, ...rest } = props; const { formState: { errors }, } = useFormContext(); const hasGroupError = !!get(errors, model); const idlist = id === undefined ? uuid() : id; let refTableData; if (refTable !== undefined) { const tableData = props.evalRefTableData(refTable, Util.getLocale()); if (tableData) { refTableData = tableData.map((item) => ({ value: item.CODE, label: item.DESCRIPTION, })); } } return ( <div className={`p-field-checkbox-group`} id="test group id"> {(WCMlabelText || label) && ( <div> <PrimeLabel id={idlist} className={labelClassName}> {props.evalLangText(WCMlabelText, label)} </PrimeLabel> </div> )} <div> {refTableData !== undefined && ( <> {refTableData.map((refTbl, refTblIndex) => ( <PrimeCheckBox key={`${refTable}_${id}_${refTblIndex}_${refTbl.CODE}`} id={`${idlist}_${refTblIndex}`} name={`${idlist}_${refTblIndex}`} text={refTbl.label} invalid={hasGroupError} arialabel={refTbl.label} renderChildren={false} required={required} model={model} groupModel={model} groupValue={value || []} value={refTbl.value} truevalue={trueValue} isGroup={true} falsevalue={falseValue} checkStyle={checkStyle} inline={inline} checked={value && value.includes(refTbl.value)} invalid={hasGroupError} readOnly={readOnly} disabled={disabled} className={className} style={style} tooltip={tooltip} tooltipOptions={tooltipOptions} autoFocus={refTblIndex === 0 && autoFocus} unstyled={unstyled} {...rest} /> ))} </> )} {list !== undefined && ( <> {list.map((lsItem, lsItemIndex) => ( <PrimeCheckBox key={lsItemIndex} id={`${idlist}_${lsItem.labelKey}`} name={`${idlist}_${lsItem.labelKey}`} groupValue={value || []} value={lsItem.value} checked={value && value.includes(lsItem.value)} renderChildren={false} required={required} disabled={disabled} trueValue={trueValue} invalid={hasGroupError} groupModel={model} isGroup={true} falseValue={falseValue} text={lsItem.label ? lsItem.label : lsItem.value} model={model} arialabel={lsItem.label} arialabelledby={lsItem.label} checkStyle={checkStyle} inline={inline} readOnly={readOnly} className={className} style={style} autoFocus={lsItemIndex === 0 && autoFocus} unstyled={unstyled} {...rest} /> ))} </> )} {refTable === undefined && list === undefined && ( <> {(() => { const valuesArray = []; React.Children.forEach(children, (child) => { if ( child.props.checked && !valuesArray.includes(child.props.value) && model !== undefined && child.props.model === undefined ) { valuesArray.push(child.props.value); } }); return React.Children.map(children, (child, index) => { const newProps = {}; if (model !== undefined) { newProps.model = child.props.model ? child.props.model : model; newProps.name = child.props.name ? child.props.name : name; } else { newProps.model = child.props.model; } newProps.required = child.props.required ? child.props.required : required; if (model === undefined && child.props.model === undefined) { console.warn( "The Model prop should not be defined in CheckboxGroup and Checkbox! It's mutually exclusive, please define at either at checkboxgroup or checkbox.", ); } const id = child.props.id === undefined ? uuid() : child.props.id; return React.cloneElement(child, { ...child.props, index, id, renderChildren: !child.props.model, inline: inline, readOnly: readOnly, checkStyle: checkStyle, className: child.props.className ? child.props.className : className, disabled: child.props.disabled ? child.props.disabled : disabled, tooltip: child.props.tooltip ? child.props.tooltip : tooltip, required: child.props.required ? child.props.required : required, tooltipOptions: child.props.tooltipOptions ? child.props.tooltipOptions : tooltipOptions, style: child.props.style ? child.props.style : style, unstyled: child.props.unstyled ? child.props.unstyled : unstyled, isGroup: !child.props.model, groupModel: child.props.model ? child.props.model : model, invalid: hasGroupError, autoFocus: child.props.autoFocus ? child.props.autoFocus : index === 0 && autoFocus, valuesArray, // Pass the array to the cloned element ...newProps, }); }); })()} </> )} </div> {hasGroupError && ( <span id={`errorMessageSpanForElementWithId_${id}`} className={`p-error error-container`} role="alert" data-is-error="true" style={{ display: 'flex' }} > {get(errors, model)?.message} </span> )} </div> ); }; PrimeCheckboxGroup.propTypes = { model: PropTypes.string, readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), className: PropTypes.string, id: PropTypes.string, ariaDescribedby: PropTypes.string, disabled: PropTypes.bool, refTable: PropTypes.any, list: PropTypes.any, required: PropTypes.bool, trueValue: PropTypes.any, falseValue: PropTypes.any, inline: PropTypes.bool, customListModel: PropTypes.string, style: PropTypes.object, tooltip: PropTypes.string, tooltipOptions: PropTypes.object, autoFocus: PropTypes.bool, children: PropTypes.node, invalid: PropTypes.bool, unstyled: PropTypes.bool, name: PropTypes.string, // Added to resolve SonarLint issues value: PropTypes.any, // Added to resolve SonarLint issues checked: PropTypes.bool, // Added to resolve SonarLint issues checkStyle: PropTypes.string, // Added to resolve SonarLint issues displayName: PropTypes.string, // Added to resolve SonarLint issues evalLangText: PropTypes.func, // Added to resolve SonarLint issues evalAria: PropTypes.func, // Added to resolve SonarLint issues defaultOption: PropTypes.any, // Added to resolve SonarLint issues noOptionsMessage: PropTypes.string, // Added to resolve SonarLint issues labelKey: PropTypes.string, // Added to resolve SonarLint issues label: PropTypes.string, // Added to resolve SonarLint issues evalRefTableData: PropTypes.func, // Added to resolve SonarLint issues }; export default PrimeWrapper(PrimeCheckboxGroup);
Editor is loading...
Leave a Comment