diff options
author | Starfall <us@starfall.systems> | 2022-11-10 08:50:11 -0600 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2022-11-10 08:50:11 -0600 |
commit | 67d1a0476d77e2ed0ca15dd2981c54c2b90b0742 (patch) | |
tree | 152f8c13a341d76738e8e2c09b24711936e6af68 /app/javascript/flavours/glitch/features/ui/components/column_link.js | |
parent | b581e6b6d4a5ba9ed4ae17427b7f2d5d158be4e5 (diff) | |
parent | ee7e49d1b1323618e16026bc8db8ab7f9459cc2d (diff) |
Merge remote-tracking branch 'glitch/main'
- Remove Helm charts - Lots of conflicts with our removal of recommended settings and custom icons
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/column_link.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_link.js | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js index d04b869b6..bd1c20b47 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js @@ -1,26 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; -const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { +const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; + const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon; if (href) { return ( - <a href={href} className='column-link' data-method={method}> - <Icon id={icon} fixedWidth className='column-link__icon' /> - {text} + <a href={href} className={className} data-method={method} title={text} {...other}> + {iconElement} + <span>{text}</span> {badgeElement} </a> ); } else if (to) { return ( - <Link to={to} className='column-link'> - <Icon id={icon} fixedWidth className='column-link__icon' /> - {text} + <NavLink to={to} className={className} title={text} {...other}> + {iconElement} + <span>{text}</span> {badgeElement} - </Link> + </NavLink> ); } else { const handleOnClick = (e) => { @@ -29,9 +32,9 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { return onClick(e); } return ( - <a href='#' onClick={onClick && handleOnClick} className='column-link' tabIndex='0'> - <Icon id={icon} fixedWidth className='column-link__icon' /> - {text} + <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex='0'> + {iconElement} + <span>{text}</span> {badgeElement} </a> ); @@ -39,13 +42,14 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { }; ColumnLink.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, text: PropTypes.string.isRequired, to: PropTypes.string, onClick: PropTypes.func, href: PropTypes.string, method: PropTypes.string, badge: PropTypes.node, + transparent: PropTypes.bool, }; export default ColumnLink; |