Tom Butcher
de1bd53f53
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
- Introduced UserGroups and PermissionSettings components for managing user groups and permission settings. - Implemented new icons for user groups and permission settings, enhancing visual representation in the dashboard. - Updated routing and sidebar configuration to include new management sections for user groups and permission settings. - Enhanced existing components with loading states and improved styling for better user experience. - Refactored related components to ensure consistency in naming and functionality across the application.
75 lines
1.8 KiB
JavaScript
75 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { theme } from 'antd'
|
|
import CheckIcon from '../../Icons/CheckIcon'
|
|
import XMarkIcon from '../../Icons/XMarkIcon'
|
|
|
|
const ICON_STYLE = {
|
|
fontSize: 7,
|
|
color: '#ffffff'
|
|
}
|
|
|
|
const PermissionCheckbox = ({
|
|
checked = false,
|
|
indeterminate = false,
|
|
mixed = false,
|
|
disabled = false,
|
|
onChange
|
|
}) => {
|
|
const { token } = theme.useToken()
|
|
const state = mixed
|
|
? 'mixed'
|
|
: indeterminate
|
|
? 'inherit'
|
|
: checked
|
|
? 'allow'
|
|
: 'deny'
|
|
|
|
return (
|
|
<button
|
|
type='button'
|
|
className='permission-checkbox'
|
|
data-state={state}
|
|
disabled={disabled}
|
|
aria-checked={mixed || indeterminate ? 'mixed' : checked}
|
|
role='checkbox'
|
|
onClick={(event) => {
|
|
if (disabled || typeof onChange !== 'function') return
|
|
onChange(event)
|
|
}}
|
|
>
|
|
<span
|
|
className='permission-checkbox-face permission-checkbox-inherit'
|
|
style={{ borderColor: token.colorBorder }}
|
|
/>
|
|
<span
|
|
className='permission-checkbox-face permission-checkbox-allow'
|
|
style={{ backgroundColor: token.colorSuccess }}
|
|
>
|
|
<CheckIcon style={ICON_STYLE} />
|
|
</span>
|
|
<span
|
|
className='permission-checkbox-face permission-checkbox-deny'
|
|
style={{ backgroundColor: token.colorError }}
|
|
>
|
|
<XMarkIcon style={ICON_STYLE} />
|
|
</span>
|
|
<span
|
|
className='permission-checkbox-face permission-checkbox-mixed'
|
|
style={{ backgroundColor: token.colorPrimary }}
|
|
>
|
|
<span className='permission-checkbox-square' />
|
|
</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
PermissionCheckbox.propTypes = {
|
|
checked: PropTypes.bool,
|
|
indeterminate: PropTypes.bool,
|
|
mixed: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
onChange: PropTypes.func
|
|
}
|
|
|
|
export default PermissionCheckbox
|