@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
92 lines (91 loc) • 6.23 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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Switch = void 0;
const React = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const layout_1 = require("../../layout");
const switchContainerStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "d63q5e", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
}, "switch-container-e9661f");
const SwitchContainer = (0, common_1.createComponent)('div')({
displayName: 'SwitchContainer',
Component: ({ children, ...elemProps }, ref, Element) => {
return (React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, switchContainerStencil()) }, children));
},
});
const switchInputStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "d63q5f", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
modifiers: {
error: {
error: { name: "d63q5g", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
alert: { name: "d63q5h", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
}
}
}, "switch-input-001dec");
const SwitchInput = (0, common_1.createComponent)('input')({
displayName: 'SwitchInput',
Component: ({ error, ...elemProps }, ref, Element) => {
return React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, switchInputStencil({ error })) });
},
});
const switchBackgroundStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "d63q5i", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
}, "switch-background-17579c");
const SwitchBackground = (0, common_1.createComponent)('div')({
displayName: 'SwitchBackground',
Component: ({ children, ...elemProps }, ref, Element) => {
return (React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, switchBackgroundStencil()) }, children));
},
});
const switchCircleStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "d63q5j", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
modifiers: {
checked: {
true: { name: "d63q5k", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
}
}
}, "switch-circle-2d1f0c");
const SwitchCircle = (0, common_1.createComponent)('div')({
displayName: 'SwitchCircle',
Component: ({ checked, ...elemProps }, ref, Element) => {
return React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, switchCircleStencil({ checked })) });
},
});
exports.Switch = (0, common_1.createComponent)('input')({
displayName: 'Switch',
Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
const inputId = (0, common_1.useUniqueId)(id);
return (React.createElement(SwitchContainer, null,
React.createElement(SwitchInput, { as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value, ...elemProps }),
React.createElement(SwitchBackground, null,
React.createElement(SwitchCircle, { checked: checked }))));
},
subComponents: {
ErrorType: common_1.ErrorType,
},
});