@sap-ux/ui-components
Version:
SAP UI Components Library
138 lines • 6.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICheckbox = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const ValidationMessage_1 = require("../../helper/ValidationMessage");
/**
* UICheckbox component.
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
*
* @exports
* @class UICheckbox
* @extends {React.Component<ICheckboxProps, {}>}
*/
class UICheckbox extends react_1.default.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)',
[react_2.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,
[react_2.HighContrastSelector]: {
color: 'Highlight'
}
}
},
{
[`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]: {
color: 'var(--vscode-foreground)',
[react_2.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)'
},
[react_2.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: {
[`.${react_2.IsFocusVisibleClassName} &:focus + label::before`]: {
content: '',
position: 'absolute',
inset: -1,
border: '1px solid transparent !important',
outline: '1px solid var(--vscode-focusBorder) !important',
[react_2.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
},
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 = (0, ValidationMessage_1.getMessageInfo)(this.props);
const checkboxComponent = (react_1.default.createElement(react_2.Checkbox, { ...this.props, styles: (props) => {
return { ...this.setStyle(messageInfo, props), ...this.props.styles };
} }));
return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, checkboxComponent)) : (checkboxComponent);
}
}
exports.UICheckbox = UICheckbox;
//# sourceMappingURL=UICheckbox.js.map