react-lightning-design-system/module/scripts/Icon.js

Salesforce Lightning Design System components built with React

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "category", "icon", "iconColor", "size", "align", "textColor", "style"],
  _excluded2 = ["container", "containerClassName", "fillColor", "textColor", "title", "flip"];
import React, { forwardRef, useContext, useRef, useEffect, useCallback } from 'react';
import classnames from 'classnames';
import svg4everybody from 'svg4everybody';
import { registerStyle, getAssetRoot } from './util';
import { ComponentSettingsContext } from './ComponentSettings';
import { createFC } from './common';
svg4everybody();

/* eslint-disable max-len */
var STANDARD_ICONS = "\naccount,announcement,answer_best,answer_private,answer_public,approval,apps,apps_admin,\narticle,avatar,avatar_loading,calibration,call,call_history,campaign,campaign_members,\ncanvas,case,case_change_status,case_comment,case_email,case_log_a_call,case_transcript,\nclient,coaching,connected_apps,contact,contract,custom,dashboard,default,document,\ndrafts,email,email_IQ,email_chatter,empty,endorsement,environment_hub,event,feed,feedback,\nfile,flow,folder,generic_loading,goals,group_loading,groups,hierarchy,home,household,insights,investment_account,\nlead,link,log_a_call,marketing_actions,metrics,news,note,opportunity,\norders,people,performance,person_account,photo,poll,portal,post,pricebook,process,product,question_best,\nquestion_feed,quotes,recent,record,related_list,report,reward,scan_card,skill_entity,\nsocial,solution,sossession,task,task2,team_member,thanks,thanks_loading,today,topic,\nunmatched,user,work_order,work_order_item\n".replace(/^\s+|\s+$/g, '').split(/[\s,]+/);
var CUSTOM_ICONS = new Array(101).join('_').split('').map(function (a, i) {
  return "custom".concat(i + 1);
});
var ACTION_ICONS = "\nadd_contact,announcement,apex,approval,back,call,canvas,change_owner,change_record_type,\ncheck,clone,close,defer,delete,description,dial_in,download,edit,edit_groups,edit_relationship,\nemail,fallback,filter,flow,follow,following,freeze_user,goal,google_news,info,join_group,\nlead_convert,leave_group,log_a_call,log_event,manage_perm_sets,map,more,new,new_account,\nnew_campaign,new_case,new_child_case,new_contact,new_event,new_group,new_lead,new_note,\nnew_notebook,new_opportunity,new_person_account,new_task,password_unlock,preview,priority,question_post_action,\nquote,record,refresh,reject,remove,reset_password,share,share_file,share_link,share_poll,\nshare_post,share_thanks,sort,submit_for_approval,update,update_status,upload,user,user_activation,\nweb_link,\nnew_custom7,new_custom8,new_custom9,new_custom10,new_custom11,new_custom12,new_custom13,\nnew_custom14,new_custom15,new_custom16,new_custom17,new_custom18,new_custom19,new_custom20,\nnew_custom21,new_custom22,new_custom23,new_custom24,new_custom25,new_custom26,new_custom27,\nnew_custom28,new_custom29,new_custom30,new_custom31,new_custom32,new_custom33,new_custom34,\nnew_custom35,new_custom36,new_custom37,new_custom38,new_custom39,new_custom40,new_custom41,\nnew_custom42,new_custom43,new_custom44,new_custom45,new_custom46,new_custom47,new_custom48,\nnew_custom49,new_custom50,new_custom51,new_custom52,new_custom53,new_custom54,new_custom55,\nnew_custom56,new_custom57,new_custom58,new_custom59,new_custom60,new_custom61,new_custom62,\nnew_custom63,new_custom64,new_custom65,new_custom66,new_custom67,new_custom68,new_custom69,\nnew_custom70,new_custom71,new_custom72,new_custom73,new_custom74,new_custom75,new_custom76,\nnew_custom77,new_custom78,new_custom79,new_custom80,new_custom81,new_custom82,new_custom83,\nnew_custom84,new_custom85,new_custom86,new_custom87,new_custom88,new_custom89,new_custom90,\nnew_custom91,new_custom92,new_custom93,new_custom94,new_custom95,new_custom96,new_custom97,\nnew_custom98,new_custom99,new_custom100\n".replace(/^\s+|\s+$/g, '').split(/[\s,]+/);
var DOCTYPE_ICONS = "\nai,attachment,audio,box_notes,csv,eps,excel,exe,flash,gdoc,gdocs,gpres,gsheet,html,image,keynote,\nlink,mp4,overlay,pack,pages,pdf,ppt,psd,rtf,slide,stypi,txt,unknown,video,visio,\nwebex,word,xml,zip\n".replace(/^\s+|\s+$/g, '').split(/[\s,]+/);
var UTILITY_ICONS = "\nadd,adduser,announcement,answer,apps,arrowdown,arrowup,attach,back,ban,bold,bookmark,brush,\nbucket,builder,call,capslock,cases,center_align_text,chart,chat,check,checkin,chevrondown,\nchevronleft,chevronright,chevronup,clear,clock,close,comments,company,connected_apps,\ncontract,contract_alt,copy,crossfilter,custom_apps,cut,dash,datadotcom,dayview,delete,deprecate,\ndescription,desktop,down,download,edit,edit_form,email,end_call,erect_window,error,event,expand,\nexpand_alt,favorite,feed,file,filter,filterList,forward,frozen,groups,help,home,identity,image,inbox,info,\ninsert_tag_field,insert_template,italic,justify_text,kanban,knowledge_base,layers,layout,\nleft,left_align_text,like,link,list,location,lock,log_a_call,logout,magicwand,matrix,metrics,minimize_window,\nmoneybag,monthlyview,move,muted,new,new_window,news,note,notebook,notification,office365,offline,\nopen,open_folder,opened_folder,overflow,package,package_org,package_org_beta,page,palette,paste,\npeople,phone_landscape,phone_portrait,photo,picklist,power,preview,priority,process,push,puzzle,\nquestion,questions_and_answers,record,redo,refresh,relate,remove_formatting,remove_link,\nreplace,reply,reset_password,retweet,richtextbulletedlist,richtextindent,richtextnumberedlist,\nrichtextoutdent,right,right_align_text,rotate,rows,salesforce1,search,settings,setup,setup_assistant_guide,\nshare,share_post,shield,side_list,signpost,sms,snippet,socialshare,sort,spinner,standard_objects,\nstop,strikethrough,success,summary,summarydetail,switch,table,tablet_landscape,tablet_portrait,\ntabset,task,text_background_color,text_color,threedots,tile_card_list,topic,touch_action,trail,undelete,undeprecate,\nunderline,undo,unlock,unmuted,up,upload,user,user_role,volume_high,volume_low,volume_off,warning,\nweeklyview,world,zoomin,zoomout\n".replace(/^\s+|\s+$/g, '').split(/[\s,]+/);
/* eslint-enable max-len */

/**
 *
 */
var ICONS = {
  STANDARD_ICONS: STANDARD_ICONS,
  CUSTOM_ICONS: CUSTOM_ICONS,
  ACTION_ICONS: ACTION_ICONS,
  DOCTYPE_ICONS: DOCTYPE_ICONS,
  UTILITY_ICONS: UTILITY_ICONS
};

/**
 *
 */
function useInitComponentStyle() {
  useEffect(function () {
    registerStyle('icon', [['.slds-icon.react-slds-icon use', '{ pointer-events: none; }']]);
  }, []);
}
function getIconColor(fillColor, category, icon) {
  /* eslint-disable no-unneeded-ternary */
  return fillColor === 'none' ? null : fillColor ? fillColor : category === 'utility' ? null : category === 'action' && /^new_custom/.test(icon) // not needed for the current SLDS2 icons
  ? icon.replace(/^new_custom/, 'custom-') : "".concat(category, "-").concat(icon.replace(/_/g, '-'));
  /* eslint-enable no-unneeded-ternary */
}

/**
 *
 */

/**
 *
 */

/**
 *
 */

/**
 *
 */
export var SvgIcon = /*#__PURE__*/forwardRef(function (props, ref) {
  var _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    _props$category = props.category,
    category_ = _props$category === void 0 ? 'utility' : _props$category,
    icon_ = props.icon,
    _props$iconColor = props.iconColor,
    iconColor = _props$iconColor === void 0 ? null : _props$iconColor,
    _props$size = props.size,
    size = _props$size === void 0 ? '' : _props$size,
    align = props.align,
    _props$textColor = props.textColor,
    textColor = _props$textColor === void 0 ? 'default' : _props$textColor,
    style = props.style,
    rprops = _objectWithoutProperties(props, _excluded);
  var _useContext = useContext(ComponentSettingsContext),
    _useContext$assetRoot = _useContext.assetRoot,
    assetRoot = _useContext$assetRoot === void 0 ? getAssetRoot() : _useContext$assetRoot;
  var inIcon = !/slds-button__icon/.test(className);
  var iconOnlyClassNames = classnames('react-slds-icon', 'slds-icon', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "slds-icon_".concat(size), /^(xx-small|x-small|small|large)$/.test(size)), "slds-icon-text-".concat(textColor !== null && textColor !== void 0 ? textColor : 'default'), /^(default|success|warning|error|light)$/.test(textColor !== null && textColor !== void 0 ? textColor : '') && !iconColor), 'slds-m-left_x-small', align === 'right'), 'slds-m-right_x-small', align === 'left'));
  var iconClassNames = classnames(className, _defineProperty({}, iconOnlyClassNames, inIcon));

  // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
  var icon = (icon_ !== null && icon_ !== void 0 ? icon_ : '').replace(/[^\w-]/g, '');
  var category = (category_ !== null && category_ !== void 0 ? category_ : '').replace(/[^\w-]/g, '');
  var iconUrl = "".concat(assetRoot, "/icons/").concat(category, "-sprite/svg/symbols.svg#").concat(icon);
  return /*#__PURE__*/React.createElement("svg", _extends({
    ref: ref,
    className: iconClassNames,
    "aria-hidden": true,
    style: style
  }, rprops), /*#__PURE__*/React.createElement("use", {
    xlinkHref: iconUrl
  }));
});

/**
 *
 */
export var Icon = createFC(function (props) {
  var container = props.container,
    containerClassName_ = props.containerClassName,
    fillColor = props.fillColor,
    _props$textColor2 = props.textColor,
    textColor = _props$textColor2 === void 0 ? 'default' : _props$textColor2,
    title = props.title,
    flip = props.flip,
    rprops = _objectWithoutProperties(props, _excluded2);
  var _props$category2 = props.category,
    category = _props$category2 === void 0 ? 'utility' : _props$category2,
    icon = props.icon;
  useInitComponentStyle();
  var svgIconRef = useRef(null);
  var svgIconRefCallback = useCallback(function (svgEl) {
    svgIconRef.current = svgEl;
    if (svgEl && props.tabIndex !== undefined) {
      svgEl.setAttribute('focusable', (props.tabIndex >= 0).toString());
    }
  }, [props.tabIndex]);
  useEffect(function () {
    svgIconRefCallback(svgIconRef.current);
  }, [svgIconRefCallback]);
  if (icon.indexOf(':') > 0) {
    var _ref = icon.split(':');
    var _ref2 = _slicedToArray(_ref, 2);
    category = _ref2[0];
    icon = _ref2[1];
  }
  var fillIconColor = getIconColor(fillColor, category, icon);
  var containerClassName = classnames(containerClassName_, 'slds-icon_container', container === 'circle' ? 'slds-icon_container_circle' : null, category === 'utility' ? "slds-icon-utility-".concat(icon.replace(/_/g, '-')) : null, fillIconColor ? "slds-icon-".concat(fillIconColor) : null, {
    'slds-current-color': textColor === 'currentColor',
    'slds-icon_flip': flip
  });
  return /*#__PURE__*/React.createElement("span", {
    className: containerClassName,
    title: title
  }, /*#__PURE__*/React.createElement(SvgIcon, _extends({
    ref: svgIconRefCallback
  }, rprops, {
    category: category,
    icon: icon,
    iconColor: fillIconColor
  })), title ? /*#__PURE__*/React.createElement("span", {
    className: "slds-assistive-text"
  }, title) : null);
}, {
  ICONS: ICONS
});
//# sourceMappingURL=Icon.js.map