@sap-ux/ui-components
Version:
SAP UI Components Library
133 lines • 6.12 kB
JavaScript
import React from 'react';
import { Checkbox, HighContrastSelector, IsFocusVisibleClassName } from '@fluentui/react';
import { getMessageInfo, MessageWrapper } from '../../helper/ValidationMessage/index.js';
import { COMMON_INPUT_STYLES } from '../UIInput/index.js';
/**
* UICheckbox component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
*
* @exports
* @class UICheckbox
* @extends {React.Component<ICheckboxProps, {}>}
*/
export class UICheckbox extends React.Component {
/**
* Initializes component properties.
*
* @param {UICheckboxProps} props
*/
constructor(props) {
super(props);
this.GlobalClassNames = {
root: 'ms-Checkbox',
label: 'ms-Checkbox-label',
checkbox: 'ms-Checkbox-checkbox',
checkmark: 'ms-Checkbox-checkmark',
text: 'ms-Checkbox-text'
};
this.setStyle = (messageInfo, props) => {
return {
root: [
!props.disabled && [
!props.checked && {
[`:hover .${this.GlobalClassNames.checkbox}`]: {
background: 'var(--vscode-checkbox-background)',
borderColor: 'var(--vscode-focusBorder)',
[HighContrastSelector]: {
borderColor: 'Highlight'
}
},
[`:focus .${this.GlobalClassNames.checkbox}`]: {
background: 'var(--vscode-checkbox-background)',
borderColor: 'var(--vscode-focusBorder)'
},
[`:hover .${this.GlobalClassNames.checkmark}`]: {
color: 'var(--vscode-foreground)',
opacity: 0,
[HighContrastSelector]: {
color: 'Highlight'
}
}
},
{
[`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]: {
color: 'var(--vscode-foreground)',
[HighContrastSelector]: {
color: props.disabled ? 'GrayText' : 'WindowText'
}
}
}
],
props.checked &&
!props.indeterminate && {
[`:hover .${this.GlobalClassNames.checkbox}`]: {
background: props.disabled ? '' : 'var(--vscode-checkbox-background)',
borderColor: props.disabled ? '' : 'var(--vscode-focusBorder)'
},
[`:focus .${this.GlobalClassNames.checkbox}`]: {
background: 'var(--vscode-checkbox-background)',
borderColor: 'var(--vscode-focusBorder)'
},
[HighContrastSelector]: {
[`:hover .${this.GlobalClassNames.checkbox}`]: {
background: 'Highlight',
borderColor: 'Highlight'
},
[`:focus .${this.GlobalClassNames.checkbox}`]: {
background: 'Highlight'
},
[`:focus:hover .${this.GlobalClassNames.checkbox}`]: {
background: 'Highlight'
},
[`:focus:hover .${this.GlobalClassNames.checkmark}`]: {
color: 'Window'
},
[`:hover .${this.GlobalClassNames.checkmark}`]: {
color: 'Window'
}
}
},
messageInfo.message && {
marginBottom: 2
}
],
input: {
[`.${IsFocusVisibleClassName} &:focus + label::before`]: {
content: '',
position: 'absolute',
inset: -1,
border: '1px solid transparent !important',
outline: '1px solid var(--vscode-focusBorder) !important',
[HighContrastSelector]: {
outline: '1px solid WindowText'
}
}
},
checkbox: {
backgroundColor: 'var(--vscode-debugToolBar-background, var(--vscode-editorWidget-background))',
borderColor: 'var(--vscode-editorWidget-border)',
opacity: props.disabled ? 0.4 : undefined,
borderRadius: COMMON_INPUT_STYLES.borderRadius
},
checkmark: {
color: 'var(--vscode-checkbox-foreground, var(--vscode-editorWidget-foreground))'
},
text: {
color: 'var(--vscode-foreground)',
opacity: props.disabled ? 0.4 : undefined
}
};
};
}
/**
* @returns {JSX.Element}
*/
render() {
const messageInfo = getMessageInfo(this.props);
const checkboxComponent = (React.createElement(Checkbox, { ...this.props, styles: (props) => {
return { ...this.setStyle(messageInfo, props), ...this.props.styles };
} }));
return messageInfo.message ? (React.createElement(MessageWrapper, { message: messageInfo }, checkboxComponent)) : (checkboxComponent);
}
}
//# sourceMappingURL=UICheckbox.js.map