Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | 1x 13x 13x 13x 13x 13x 13x 1x 1x | import {forwardRef} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import ActionableTag from './Actionable/index.js'
import {
COLORS,
DESIGNS,
getActionableProps,
getColor,
getDesign,
getStandardProps,
ICON_PLACEMENTS,
LINK_TYPES,
SIZES
} from './constants.js'
import StandardTag from './Standard.js'
const AtomTag = forwardRef(
(
{
design: designProp,
color: colorProp,
href,
icon,
iconPlacement = ICON_PLACEMENTS.LEFT,
onClick,
responsive,
size = SIZES.MEDIUM,
type,
readOnly,
disabled,
as,
pressed,
defaultPressed,
className,
closeLabel,
...props
},
forwardedRef
) => {
const isActionable = onClick || href || [true, false].includes(pressed) || [true, false].includes(defaultPressed)
const color = getColor({isActionable, color: colorProp})
const design = getDesign({isActionable, design: designProp})
const classNames = cx(
'sui-AtomTag',
`sui-AtomTag--size-${size}`,
design && `sui-AtomTag--design-${design}`,
type === undefined && color && `sui-AtomTag--color-${color}`,
icon && 'sui-AtomTag-hasIcon',
responsive && 'sui-AtomTag--responsive',
type && `sui-AtomTag--type-${type}`,
className
)
const [Component, getComponentProps] = isActionable
? [ActionableTag, getActionableProps]
: [StandardTag, getStandardProps]
return (
<Component
{...getComponentProps({
design,
href,
icon,
iconPlacement,
onClick,
responsive,
size,
type,
readOnly,
disabled,
pressed,
defaultPressed,
closeLabel,
...props
})}
ref={forwardedRef}
disabled={disabled}
readOnly={readOnly}
className={classNames}
as={as}
/>
)
}
)
AtomTag.displayName = 'AtomTag'
AtomTag.propTypes = {
/* This Boolean attribute prevents the user from interacting with the input but without disabled styles */
readOnly: PropTypes.bool,
/* This Boolean attribute prevents the user from interacting with the input */
disabled: PropTypes.bool,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
icon: PropTypes.node,
onClose: PropTypes.func,
/**
* Will only be shown if the onClose fn is defined
*/
closeIcon: PropTypes.node,
/** label for clear/close icon **/
closeLabel: PropTypes.string,
/**
* If defined, onClose will be ignored
*/
onClick: PropTypes.func,
/**
* generates type of link
*/
linkFactory: PropTypes.func,
/**
* Actionable tags can be used as an anchor. Same as <a> href
*/
href: PropTypes.string,
/**
* To be used if href is defined
*/
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
/**
* To be used if href is defined
*/
rel: PropTypes.arrayOf(PropTypes.oneOf(Object.values(LINK_TYPES))),
/**
* Actionable tags can have iconPlacement='right'
*/
iconPlacement: PropTypes.oneOf(Object.values(ICON_PLACEMENTS)),
/**
* Tag size
*/
size: PropTypes.oneOf(Object.values(SIZES)),
/**
* Tag title
*/
title: PropTypes.string,
/**
* Tag type in order to color it as desired
* from a high order component.
*/
type: PropTypes.string,
/**
* true for make responsive layout. keep large size in mobile
*/
responsive: PropTypes.bool,
/**
* Design style of button: 'solid' (default), 'outline', 'flat', 'link'
*/
design: PropTypes.oneOf(Object.values(DESIGNS)),
/**
* Value of the tag to be returned on actionable tags
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* The elementType of the Tag
* **/
as: PropTypes.elementType,
/**
* Color intent of the tag
* **/
color: PropTypes.oneOf(Object.values(COLORS)),
pressed: PropTypes.bool,
defaultPressed: PropTypes.bool,
className: PropTypes.string
}
export default AtomTag
export {ICON_PLACEMENTS as atomTagIconPlacements}
export {DESIGNS as atomTagDesigns}
export {LINK_TYPES as linkTypes}
export {LINK_TYPES as atomTagLinkTypes}
export {SIZES as atomTagSizes}
export {COLORS as atomTagColors}
|