@octopusdeploy/design-system-components
Version:
The design systems component library.
136 lines (135 loc) • 6.33 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DeprecatedSwitch = DeprecatedSwitch;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const React = __importStar(require("react"));
/**
*
* @deprecated please use Switch instead
*/
function DeprecatedSwitch({ label, value, disabled, onChange, autoFocus, accessibleName, size }) {
if (label) {
return (0, jsx_runtime_1.jsx)(DeprecatedSwitchWithLabel, { autoFocus: autoFocus, size: size, onChange: onChange, label: label, disabled: disabled, value: value, accessibleName: accessibleName });
}
return (0, jsx_runtime_1.jsx)(DeprecatedStandaloneSwitch, { size: size, autoFocus: autoFocus, onChange: onChange, value: value, disabled: disabled, accessibleName: accessibleName });
}
function DeprecatedStandaloneSwitch({ value, size, onChange, disabled, autoFocus, accessibleName }) {
const changeHandler = React.useCallback((event, checked) => {
onChange?.(checked);
}, [onChange]);
return ((0, jsx_runtime_1.jsx)(material_1.Switch, { disableTouchRipple: true, inputProps: { "aria-label": accessibleName }, autoFocus: autoFocus, disableRipple: true, color: "primary", classes: { thumb: switchThumbStyles, track: switchTrackStyles, colorPrimary: colorPrimaryStyles }, checked: value, onChange: changeHandler, disabled: disabled, size: size }));
}
const switchClasses = {
root: "MuiSwitch-root",
thumb: "MuiSwitch-thumb",
track: "MuiSwitch-track",
checked: "Mui-checked",
colorPrimary: "MuiSwitch-colorPrimary",
disabled: "Mui-disabled",
};
const switchCheckedClass = `${switchClasses.colorPrimary}.${switchClasses.checked}`;
const switchDisabledClass = `${switchClasses.colorPrimary}.${switchClasses.disabled}`;
const colorPrimaryStyles = (0, css_1.css)({
[`&.${switchCheckedClass}`]: {
color: design_system_tokens_1.themeTokens.color.switch.foreground.on.default,
"&:hover": {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.overlay.on,
},
},
[`&.${switchClasses.colorPrimary}`]: {
color: design_system_tokens_1.themeTokens.color.switch.foreground.off.default,
"&:hover": {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.overlay.off,
},
},
});
const switchThumbStyles = (0, css_1.css)({
[`.${switchDisabledClass}.${switchClasses.checked} &.${switchClasses.thumb}`]: {
color: design_system_tokens_1.themeTokens.color.switch.foreground.on.disabled,
},
[`.${switchDisabledClass} &.${switchClasses.thumb}`]: {
color: design_system_tokens_1.themeTokens.color.switch.foreground.off.disabled,
},
});
const switchTrackStyles = (0, css_1.css)({
[`.${switchDisabledClass}.${switchCheckedClass} + &.${switchClasses.track}`]: {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.background.on.disabled,
opacity: 1,
},
[`.${switchDisabledClass} + &.${switchClasses.track}`]: {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.background.off.disabled,
opacity: 1,
},
[`.${switchCheckedClass} + &.${switchClasses.track}`]: {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.background.on.default,
opacity: 1,
},
[`.${switchClasses.colorPrimary} + &.${switchClasses.track}`]: {
backgroundColor: design_system_tokens_1.themeTokens.color.switch.background.off.default,
opacity: 1,
},
});
function DeprecatedSwitchWithLabel({ onChange, size, label, value, disabled, autoFocus, accessibleName }) {
return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { classes: { root: size === "small" ? rootStyles.small : undefined, label: (0, css_1.cx)(baseLabelStyles, size === "small" ? smallLabelStyles : undefined) }, control: (0, jsx_runtime_1.jsx)(DeprecatedStandaloneSwitch, { size: size, autoFocus: autoFocus, onChange: onChange, value: value, disabled: disabled, accessibleName: accessibleName }), label: label }));
}
const rootStyles = {
small: (0, css_1.css)({
[`&.${material_1.formControlLabelClasses.root}`]: {
marginLeft: -4,
},
}),
};
const labelClasses = {
label: "MuiFormControlLabel-label",
disabled: "Mui-disabled",
};
const baseLabelStyles = (0, css_1.css)({
[`.${labelClasses.label}&`]: {
font: design_system_tokens_1.text.body.regular.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
},
[`.${labelClasses.label}.${labelClasses.disabled}&`]: {
color: design_system_tokens_1.themeTokens.color.text.disabled,
},
});
const smallLabelStyles = (0, css_1.css)({
[`.${labelClasses.label}&`]: {
font: design_system_tokens_1.text.body.regular.small,
},
});