@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
185 lines (150 loc) • 8.21 kB
JavaScript
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # Illustration Component
// Based on SLDS v2.6.2
// ## Dependencies
// ### React
import React from 'react';
import PropTypes from 'prop-types'; // This component's `checkProps` which issues warnings to developers about properties
// when in development mode (similar to React's built in development tools)
import checkProps from './check-props'; // ### classNames
// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
// A simple javascript utility for conditionally joining classNames together.
import classNames from '../../utilities/class-names'; // ## SVG
import Svg from '../utilities/utility-icon/svg'; // ## Constants
import { ILLUSTRATION } from '../../utilities/constants';
import componentDoc from './component.json';
var sanitizePath = function sanitizePath(path) {
if (!path || typeof path !== 'string') {
return undefined;
} // Remove control characters, null bytes, and normalize whitespace
var normalizedPath = path.replace(/[\x00-\x1f\x7f]/g, '') // eslint-disable-line no-control-regex
.trim().toLowerCase();
var dangerousProtocols = ['javascript:', // eslint-disable-line no-script-url
'data:', 'vbscript:', 'file:', 'blob:'];
var isDangerous = dangerousProtocols.some(function (protocol) {
return normalizedPath.startsWith(protocol);
});
if (isDangerous) {
// eslint-disable-next-line no-console
console.log("Illustration: Blocked potentially unsafe path \"".concat(path, "\". Only http, https, relative paths, and fragment identifiers are allowed."));
return undefined;
}
return path;
};
/**
* An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way.
*/
var Illustration = function Illustration(_ref) {
var className = _ref.className,
illustration = _ref.illustration,
heading = _ref.heading,
messageBody = _ref.messageBody,
name = _ref.name,
path = _ref.path,
_ref$internalIllustra = _ref.internalIllustration,
internalIllustration = _ref$internalIllustra === void 0 ? true : _ref$internalIllustra,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'small' : _ref$size,
_ref$style = _ref.style,
style = _ref$style === void 0 ? {} : _ref$style,
rest = _objectWithoutProperties(_ref, ["className", "illustration", "heading", "messageBody", "name", "path", "internalIllustration", "size", "style"]);
checkProps('Illustration', _objectSpread({
className: className,
illustration: illustration,
heading: heading,
messageBody: messageBody,
name: name,
path: path,
size: size,
style: style,
internalIllustration: internalIllustration
}, rest), componentDoc);
var kababCaseName = name ? name.replace(/_| /g, '-').toLowerCase() : '';
var styles = _objectSpread({}, style);
var illustrationSvg; // large illustration svg should have a default height of 400px if not already specified
if (size === 'large' && !styles.height) {
styles.height = '400px';
}
if (illustration) {
// Use SVG data passed in with `illustration` prop
illustrationSvg = /*#__PURE__*/React.createElement(Svg, {
className: "slds-illustration__svg",
"aria-hidden": "true",
data: illustration,
name: kababCaseName,
style: styles
});
} else if (path) {
var safePath = sanitizePath(path);
if (safePath) {
illustrationSvg = /*#__PURE__*/React.createElement("svg", {
className: "slds-illustration__svg",
"aria-hidden": "true",
name: kababCaseName,
style: styles
}, /*#__PURE__*/React.createElement("use", {
xlinkHref: safePath
}));
}
}
return /*#__PURE__*/React.createElement("div", {
className: classNames(className, 'slds-illustration', {
'slds-illustration_small': size === 'small',
'slds-illustration_large': size === 'large'
})
}, illustrationSvg, /*#__PURE__*/React.createElement("div", {
className: "slds-text-longform"
}, heading ? /*#__PURE__*/React.createElement("h3", {
className: "slds-text-heading_medium"
}, heading) : null, messageBody ? /*#__PURE__*/React.createElement("p", {
className: "slds-text-body_regular"
}, messageBody) : null));
}; // ### Display Name
// Always use the canonical component name as the React display name.
Illustration.displayName = ILLUSTRATION; // ### Prop Types
Illustration.propTypes = {
/**
* CSS classes that are applied to the SVG. _Tested with Mocha testing._
*/
className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
/**
* A heading text. It is required if illustration is present. _Tested with snapshot testing._ _Tested with Mocha testing._
*/
heading: PropTypes.string,
/**
* A custom SVG object to use instead of the supplied SLDS illustrations, look in `design-system-react/icons` for examples and syntax. _Tested with snapshot testing._ _Tested with Mocha testing._
*/
illustration: PropTypes.object,
/**
* Indicates whether the illustration SVGs are from the design-system-react repo. If yes, set to true.
*/
internalIllustration: PropTypes.bool,
/**
* A message body below the heading to further communicate the state of the component. _Tested with snapshot testing._ _Tested with Mocha testing._
*/
messageBody: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Name of the illustration. Visit <a href='https://lightningdesignsystem.com/components/illustration/'>Lightning Design System Illustration</a> to reference illustration names. _Tested with snapshot testing._ _Tested with Mocha testing._
*/
name: PropTypes.string,
/**
* Path to the illustration SVG image. _Tested with snapshot testing._
*/
path: PropTypes.string,
/**
* Size of the illustration. _Tested with snapshot testing._ _Tested with Mocha testing._
*/
size: PropTypes.oneOf(['small', 'large']),
/**
* Custom styles to be passed to the illustration SVG. _Tested with Mocha testing._
*/
style: PropTypes.object
};
export default Illustration;
//# sourceMappingURL=index.js.map