@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
66 lines (65 loc) • 4.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanelToggleButton = exports.useSidePanelToggleButtonElemProps = exports.sidePanelToggleButtonStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const button_1 = require("@workday/canvas-kit-react/button");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
const useSidePanelModel_1 = require("./useSidePanelModel");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.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");
exports.useSidePanelToggleButtonElemProps = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
return {
'aria-controls': state.panelId,
'aria-pressed': state.transitionState === 'collapsed',
'aria-describedby': state.labelId,
};
});
exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
displayName: 'SidePanel.ToggleButton',
modelHook: useSidePanelModel_1.useSidePanelModel,
elemPropsHook: exports.useSidePanelToggleButtonElemProps,
})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, ...elemProps }, Element, model) => {
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.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();
} }) }));
});