UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

66 lines (65 loc) 4.94 kB
import * as React from 'react'; import { createComponent, ErrorType, focusRing, useUniqueId } from '@workday/canvas-kit-react/common'; import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling'; import { brand, system } from '@workday/canvas-tokens-web'; import { mergeStyles } from '../../layout'; const switchContainerStencil = createStencil({ base: { name: "d5h45g", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" } }, "switch-container-debbb0"); const SwitchContainer = createComponent('div')({ displayName: 'SwitchContainer', Component: ({ children, ...elemProps }, ref, Element) => { return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchContainerStencil()) }, children)); }, }); const switchInputStencil = createStencil({ base: { name: "d5h45h", 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: "d5h45i", 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: "d5h45j", 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-7f69d7"); const SwitchInput = createComponent('input')({ displayName: 'SwitchInput', Component: ({ error, ...elemProps }, ref, Element) => { return React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchInputStencil({ error })) }); }, }); const switchBackgroundStencil = createStencil({ base: { name: "d5h45k", 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-0e2846"); const SwitchBackground = createComponent('div')({ displayName: 'SwitchBackground', Component: ({ children, ...elemProps }, ref, Element) => { return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchBackgroundStencil()) }, children)); }, }); const switchCircleStencil = createStencil({ base: { name: "d5h45l", 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: "d5h45m", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" } } } }, "switch-circle-780885"); const SwitchCircle = createComponent('div')({ displayName: 'SwitchCircle', Component: ({ checked, ...elemProps }, ref, Element) => { return React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchCircleStencil({ checked })) }); }, }); export const Switch = createComponent('input')({ displayName: 'Switch', Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => { const inputId = 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, }, });