@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
156 lines (155 loc) • 7.57 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidePanel = exports.SidePanelBackgroundColor = exports.SidePanelOpenDirection = void 0;
const React = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const button_1 = require("@workday/canvas-kit-react/button");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const text_1 = require("@workday/canvas-kit-react/text");
var SidePanelOpenDirection;
(function (SidePanelOpenDirection) {
SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
SidePanelOpenDirection[SidePanelOpenDirection["Right"] = 1] = "Right";
})(SidePanelOpenDirection = exports.SidePanelOpenDirection || (exports.SidePanelOpenDirection = {}));
var SidePanelBackgroundColor;
(function (SidePanelBackgroundColor) {
SidePanelBackgroundColor[SidePanelBackgroundColor["White"] = 0] = "White";
SidePanelBackgroundColor[SidePanelBackgroundColor["Transparent"] = 1] = "Transparent";
SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
})(SidePanelBackgroundColor = exports.SidePanelBackgroundColor || (exports.SidePanelBackgroundColor = {}));
const closedWidth = tokens_1.space.xxl;
const SidePanelContainer = (0, styled_1.default)('div')({
overflow: 'hidden',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
transition: 'width 200ms ease',
position: 'absolute',
}, ({ open }) => ({
alignItems: open ? undefined : 'center',
boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
}), ({ open, backgroundColor }) => {
let openBackgroundColor;
switch (backgroundColor) {
case SidePanelBackgroundColor.Transparent:
openBackgroundColor = 'transparent';
break;
case SidePanelBackgroundColor.Gray:
openBackgroundColor = tokens_1.colors.soap100;
break;
case SidePanelBackgroundColor.White:
default:
openBackgroundColor = tokens_1.colors.frenchVanilla100;
break;
}
return {
backgroundColor: open ? openBackgroundColor : tokens_1.colors.frenchVanilla100,
};
}, ({ open, openWidth }) => ({
width: open ? openWidth : closedWidth,
}), ({ open, padding }) => ({
padding: open ? padding || tokens_1.space.m : `${tokens_1.space.s} 0`,
}), ({ openDirection }) => ({
right: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.zero : undefined,
left: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.zero : undefined,
}));
const ChildrenContainer = (0, styled_1.default)('div')({
transition: 'none',
zIndex: 1, // show above SidePanelFooter when screen is small vertically
}, ({ open, openWidth }) => ({
width: open ? openWidth : closedWidth,
}));
const ToggleButton = (0, styled_1.default)(button_1.TertiaryButton, { shouldForwardProp: prop => prop !== 'openDirection' })({
position: 'absolute',
bottom: tokens_1.space.s,
}, ({ openDirection }) => ({
right: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.s : '',
left: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.s : '',
}));
const SidePanelFooter = (0, styled_1.default)('div')({
position: 'absolute',
bottom: '0',
height: 120,
left: 0,
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
}, ({ open, openWidth }) => ({
width: open ? openWidth : tokens_1.space.xxl,
}));
class SidePanel extends React.Component {
constructor(props) {
super(props);
this.state = {
screenSize: typeof window !== 'undefined' ? window.innerWidth : 0,
};
this.handleResize = () => {
if (!this.props.onBreakpointChange || !this.props.breakpoint) {
return;
}
if (window.innerWidth > this.props.breakpoint && !this.props.open) {
this.props.onBreakpointChange(true);
}
if (window.innerWidth <= this.props.breakpoint && this.props.open) {
this.props.onBreakpointChange(false);
}
};
this.onToggleClick = () => {
if (this.props.onToggleClick) {
this.props.onToggleClick();
}
};
this.toggleButtonDirection = (open, openDirection) => {
if (openDirection !== SidePanelOpenDirection.Right) {
return open ? canvas_system_icons_web_1.chevronLeftIcon : canvas_system_icons_web_1.chevronRightIcon;
}
else {
return open ? canvas_system_icons_web_1.chevronRightIcon : canvas_system_icons_web_1.chevronLeftIcon;
}
};
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
return (React.createElement(SidePanelContainer, { role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open, ...elemProps },
React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
header && open ? (React.createElement(text_1.Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
this.props.children),
React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
}
}
SidePanel.OpenDirection = SidePanelOpenDirection;
SidePanel.BackgroundColor = SidePanelBackgroundColor;
exports.SidePanel = SidePanel;