27 lines
1.1 KiB
JavaScript
27 lines
1.1 KiB
JavaScript
import React, { memo, useState } from 'react';
|
|
import classNames from 'classnames';
|
|
import Style from './radioRect.module.less';
|
|
export default memo((props) => {
|
|
const [selectValue, setSelectValue] = useState(props.defaultValue);
|
|
const handleClick = (option) => {
|
|
setSelectValue(option.value);
|
|
props?.onChange(option.value);
|
|
};
|
|
return (<div className={Style.radioRectPanel}>
|
|
{props.options.map((item, index) => {
|
|
let ImageItem = item.image;
|
|
if (typeof item.image === 'string') {
|
|
ImageItem = (<div className={Style.rectImg} style={{ backgroundImage: `url(${item.image})` }}/>);
|
|
}
|
|
return (<div key={index}>
|
|
<div className={classNames(Style.rectItem, {
|
|
[Style.rectItemSelected]: selectValue === item.value,
|
|
})} onClick={() => handleClick(item)}>
|
|
{ImageItem}
|
|
</div>
|
|
{item.name && (<div className={Style.rectText}>{item.name}</div>)}
|
|
</div>);
|
|
})}
|
|
</div>);
|
|
});
|