@workday/canvas-kit-labs-react-menu
Version:
A container for navigation or action items
212 lines (211 loc) • 9.73 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_1 = __importDefault(require("@emotion/styled"));
var canvas_kit_react_core_1 = require("@workday/canvas-kit-react-core");
var canvas_kit_labs_react_core_1 = __importDefault(require("@workday/canvas-kit-labs-react-core"));
var canvas_kit_react_icon_1 = require("@workday/canvas-kit-react-icon");
var Item = styled_1.default('li')(__assign(__assign({}, canvas_kit_labs_react_core_1.default.body2), { padding: canvas_kit_react_core_1.spacing.xxs + " " + canvas_kit_react_core_1.spacing.s, height: canvas_kit_react_core_1.spacing.xl, boxSizing: 'border-box', cursor: 'pointer', color: canvas_kit_react_core_1.colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
outline: 'none',
} }), function (_a) {
var _b;
var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
if (!isFocused && !isDisabled) {
return {
backgroundColor: 'inherit',
'&:hover': {
backgroundColor: canvas_kit_react_core_1.commonColors.hoverBackground,
color: canvas_kit_react_core_1.colors.blackPepper300,
'.wd-icon-fill': {
fill: canvas_kit_react_core_1.iconColors.hover,
},
},
};
}
else if (isDisabled && !isFocused) {
return {
color: canvas_kit_react_core_1.colors.licorice100,
cursor: 'default',
'&:hover .wd-icon-fill': {
fill: canvas_kit_react_core_1.iconColors.disabled,
},
};
}
else {
return _b = {
backgroundColor: isDisabled ? canvas_kit_react_core_1.colors.blueberry200 : canvas_kit_react_core_1.commonColors.focusBackground,
color: canvas_kit_react_core_1.typeColors.inverse,
'span .wd-icon-fill': {
fill: canvas_kit_react_core_1.iconColors.inverse,
}
},
_b["[data-whatinput='mouse'] &,\n [data-whatinput='touch'] &,\n [data-whatinput='pointer'] &"] = {
backgroundColor: 'inherit',
color: canvas_kit_react_core_1.colors.blackPepper300,
'&:hover': {
backgroundColor: canvas_kit_react_core_1.commonColors.hoverBackground,
'.wd-icon-fill': {
fill: canvas_kit_react_core_1.iconColors.hover,
},
},
'.wd-icon-fill': {
fill: canvas_kit_react_core_1.iconColors.standard,
},
},
_b;
}
});
var LabelContainer = styled_1.default('span')({
flex: '1 1 auto',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
});
var Divider = styled_1.default('hr')({
display: 'block',
height: 1,
border: 0,
borderTop: "1px solid " + canvas_kit_react_core_1.colors.soap400,
margin: canvas_kit_react_core_1.spacing.xxs + " 0",
});
var iconSize = 24;
var iconPadding = 16;
var StyledSystemIcon = styled_1.default(canvas_kit_react_icon_1.SystemIcon)({
minWidth: iconSize + iconPadding,
});
var SecondaryStyledSystemIcon = styled_1.default(canvas_kit_react_icon_1.SystemIcon)({
display: "flex",
minWidth: iconSize + iconPadding,
justifyContent: "flex-end",
});
var iconProps = null;
var secondaryIconProps = null;
var setIconProps = function (icon, isDisabled, isFocused) {
if (!icon) {
return null;
}
var props = {
icon: icon,
size: iconSize,
};
if (isDisabled) {
props = __assign(__assign({}, props), { fillHover: canvas_kit_react_core_1.iconColors.disabled, fill: canvas_kit_react_core_1.iconColors.disabled });
}
if (isFocused) {
props = __assign(__assign({}, props), { fillHover: canvas_kit_react_core_1.iconColors.inverse });
}
return props;
};
var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
if (centerIfNeeded === void 0) { centerIfNeeded = true; }
var parent = elem.parentElement;
if (elem && parent) {
var parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
parent.scrollTop + parent.clientHeight, overLeft = elem.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = elem.offsetLeft - parent.offsetLeft + elem.clientWidth - parentBorderLeftWidth >
parent.scrollLeft + parent.clientWidth, alignWithTop = overTop && !overBottom;
if ((overTop || overBottom) && centerIfNeeded) {
parent.scrollTop =
elem.offsetTop -
parent.offsetTop -
parent.clientHeight / 2 -
parentBorderTopWidth +
elem.clientHeight / 2;
}
if ((overLeft || overRight) && centerIfNeeded) {
parent.scrollLeft =
elem.offsetLeft -
parent.offsetLeft -
parent.clientWidth / 2 -
parentBorderLeftWidth +
elem.clientWidth / 2;
}
if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
elem.scrollIntoView(alignWithTop);
}
}
};
var MenuItem = (function (_super) {
__extends(MenuItem, _super);
function MenuItem() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.ref = React.createRef();
_this.componentDidUpdate = function (prevProps) {
if (!prevProps.isFocused && _this.props.isFocused) {
if (_this.ref.current) {
scrollIntoViewIfNeeded(_this.ref.current);
}
}
};
_this.handleClick = function (event) {
if (_this.props.isDisabled) {
return;
}
if (_this.props.onClick) {
_this.props.onClick(event);
}
};
return _this;
}
MenuItem.prototype.render = function () {
var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
iconProps = setIconProps(icon, isDisabled, isFocused);
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
return (React.createElement(React.Fragment, null,
hasDivider && React.createElement(Divider, null),
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": !!isDisabled, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
React.createElement(LabelContainer, null, children),
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
};
return MenuItem;
}(React.Component));
MenuItem.defaultProps = {
shouldClose: true,
role: 'menuitem',
};
exports.default = MenuItem;