@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
63 lines (62 loc) • 3.86 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { transformationImportIcon } from '@workday/canvas-system-icons-web';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { useSidePanelModel } from './useSidePanelModel';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const sidePanelToggleButtonStencil = createStencil({
base: { name: "40w5gu", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
modifiers: {
state: {
collapsing: { name: "1fzr8f", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
collapsed: { name: "t442a", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
expanded: { name: "gnbbu", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
expanding: { name: "dyp52", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
},
origin: {
start: { name: "15w1xg", styles: "" },
end: { name: "4t11b", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
}
},
compound: [
{
modifiers: { state: 'collapsed', origin: 'end' },
styles: { name: "3rariv", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
},
{
modifiers: { state: 'collapsing', origin: 'end' },
styles: { name: "1cebq0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
},
{
modifiers: { state: 'expanded', origin: 'end' },
styles: { name: "3nz6ql", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
},
{
modifiers: { state: 'expanding', origin: 'end' },
styles: { name: "26ll91", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
}
]
}, "side-panel-toggle-button-2c790f");
export const useSidePanelToggleButtonElemProps = createElemPropsHook(useSidePanelModel)(({ state }) => {
return {
'aria-controls': state.panelId,
'aria-pressed': state.transitionState === 'collapsed',
'aria-describedby': state.labelId,
};
});
export const SidePanelToggleButton = createSubcomponent('button')({
displayName: 'SidePanel.ToggleButton',
modelHook: useSidePanelModel,
elemPropsHook: useSidePanelToggleButtonElemProps,
})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, ...elemProps }, Element, model) => {
return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
state: model.state.transitionState,
origin: model.state.origin,
})), onClick: (event) => {
var _a;
(_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
model.events.handleAnimationStart();
} }) }));
});