optimizely-oui
Version:
Optimizely's Component Library.
218 lines (186 loc) • 8.39 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from "react";
import PropTypes from "prop-types";
import Icon from "react-oui-icons";
import DismissButton from "./DismissButton";
import classNames from "classnames";
import { FILL_COLOR_MAP_LIGHT } from "../../utils/accessibility";
var LIGHT_BACKGROUND_STYLES = ["tertiary"]; // Light backgrounds require a dark font and dismiss Icon color.
var getStylingInfo = function getStylingInfo(style, backgroundColor) {
return LIGHT_BACKGROUND_STYLES.includes(style) || backgroundColor ? {
fontClass: "oui-token--font-dark",
dismissFillColor: "black"
} : {
fontClass: "oui-token--font-light",
dismissFillColor: "white"
};
};
/**
* Token to be used to make token lists.
* @param {Object} props - Properties passed to component
* @returns {ReactElement}
*/
var Token = function Token(_ref) {
var _classNames;
var className = _ref.className,
description = _ref.description,
dragHandleProps = _ref.dragHandleProps,
backgroundColor = _ref.backgroundColor,
hasSnugWrap = _ref.hasSnugWrap,
hasWrap = _ref.hasWrap,
isDismissible = _ref.isDismissible,
isDraggable = _ref.isDraggable,
isFullWidth = _ref.isFullWidth,
name = _ref.name,
onDismiss = _ref.onDismiss,
order = _ref.order,
style = _ref.style,
showWell = _ref.showWell,
testSection = _ref.testSection,
usesDragHandle = _ref.usesDragHandle,
props = _objectWithoutProperties(_ref, ["className", "description", "dragHandleProps", "backgroundColor", "hasSnugWrap", "hasWrap", "isDismissible", "isDraggable", "isFullWidth", "name", "onDismiss", "order", "style", "showWell", "testSection", "usesDragHandle"]);
var tokenContainerClasses = classNames({
"oui-token-wrap": hasWrap && !hasSnugWrap,
"oui-token-wrap--snug": hasSnugWrap,
"oui-token-wrap--well": showWell,
"oui-token--full-width": isFullWidth
}, className);
var tokenClasses = classNames((_classNames = {
"oui-token": true
}, _defineProperty(_classNames, "oui-token--".concat(style), style), _defineProperty(_classNames, "flex-align--center", !description), _classNames));
var tokenToolsClasses = classNames({
"oui-token-tool": isDraggable || order,
"cursor--grab": isDraggable
});
var _getStylingInfo = getStylingInfo(style, backgroundColor),
fontClass = _getStylingInfo.fontClass,
dismissFillColor = _getStylingInfo.dismissFillColor; // ensure valid backgroundColor name
// (in the case that propType errors are ignored)
var tokenFillColor = backgroundColor && Object.keys(FILL_COLOR_MAP_LIGHT).includes(backgroundColor) ? FILL_COLOR_MAP_LIGHT[backgroundColor] : null;
if (usesDragHandle) {
return (
/* eslint-disable react/jsx-boolean-value */
React.createElement("div", _extends({
"data-oui-component": true,
className: tokenContainerClasses,
"data-test-section": testSection
}, props), React.createElement("div", {
className: tokenClasses,
style: {
backgroundColor: tokenFillColor
}
}, React.createElement("div", {
className: "flex flex-align--center"
}, React.createElement("div", {
className: tokenToolsClasses,
"data-token-handle": true
}, order && React.createElement("span", {
className: "oui-token__number push--right"
}, order), isDraggable && React.createElement("div", _extends({
className: "oui-icon oui-token__move push--right oui-token__move--drag-handle"
}, dragHandleProps), React.createElement(Icon, {
name: "hamburger",
fill: "#ffffff"
}))), React.createElement("div", {
className: fontClass
}, name, description && React.createElement("div", {
className: "oui-token__description"
}, description))), isDismissible && onDismiss && React.createElement(DismissButton, {
onClick: onDismiss,
fill: dismissFillColor,
testSection: testSection,
backgroundColor: backgroundColor
})))
/* eslint-enable */
);
}
return (
/* eslint-disable react/jsx-boolean-value */
React.createElement("div", _extends({
"data-oui-component": true,
className: tokenContainerClasses,
"data-test-section": testSection
}, props), React.createElement("div", {
className: tokenToolsClasses,
"data-token-handle": true
}, order && React.createElement("span", {
className: "oui-token__number push--right"
}, order), isDraggable && React.createElement("div", {
className: "oui-icon oui-token__move"
}, React.createElement(Icon, {
name: "ellipsis",
fill: "#c7c7c7"
}))), React.createElement("div", {
className: tokenClasses,
style: {
backgroundColor: tokenFillColor
}
}, React.createElement("div", {
className: fontClass
}, name, description && React.createElement("div", {
className: "oui-token__description"
}, description)), isDismissible && onDismiss && React.createElement(DismissButton, {
onClick: onDismiss,
fill: dismissFillColor,
testSection: testSection
})))
/* eslint-enable */
);
};
Token.propTypes = {
/**
* Color to use for the background of the token
*/
backgroundColor: PropTypes.oneOf(["aqua", "yellow", "blue", "green", "orange", "pink", "red", "magenta", "purple"]),
/** CSS class names. */
className: PropTypes.string,
/** Description explaining the token */
description: PropTypes.string,
/**
* Set of props provided by react-beautiful-dnd to configure
* this token's drag handle
*/
dragHandleProps: PropTypes.object,
/** Whether or not the token should have a tighter wrap */
hasSnugWrap: PropTypes.bool,
/** Whether or not the token should have a wrap */
hasWrap: PropTypes.bool,
/**
* Determines if token has dismissible feature or not. If true, `onDismiss`
* is required.
*/
isDismissible: PropTypes.bool,
/** Shows an icon indicating that the token is draggable */
isDraggable: PropTypes.bool,
/** Makes the component full width of container */
isFullWidth: PropTypes.bool,
/** Name label on token */
name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
/**
* Function to call that dismisses the token. Required if the token is
* dismissible.
*/
onDismiss: PropTypes.func,
/** Show a number indicating the token's order */
order: PropTypes.number,
/** Whether or not a well is presented around the token. */
showWell: PropTypes.bool,
/** Determines style of token depending on priority level or error */
style: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
/** Hook for automated JavaScript tests */
testSection: PropTypes.string,
/** Used to switch drag handle */
usesDragHandle: PropTypes.bool
};
Token.defaultProps = {
dragHandleProps: {},
hasWrap: true,
isDismissible: false,
style: "secondary",
showWell: true,
usesDragHandle: true
};
export default Token;