@laerdal/life-react-components 2.0.1-dev.2 → 2.0.1-dev.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/List/ListRow.cjs +12 -8
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.js +12 -8
- package/dist/List/ListRow.js.map +1 -1
- package/dist/common/ClickOutside.cjs +2 -2
- package/dist/common/ClickOutside.cjs.map +1 -1
- package/dist/common/ClickOutside.js +2 -2
- package/dist/common/ClickOutside.js.map +1 -1
- package/package.json +1 -1
package/dist/List/ListRow.cjs
CHANGED
|
@@ -51,9 +51,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
51
51
|
|
|
52
52
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
53
53
|
|
|
54
|
-
var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n\n color: ", ";\n background-color: ", ";\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ", ";\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ", "\n }\n\n .list-item-note {\n color: ", ";\n word-break: initial;\n ", "\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n
|
|
54
|
+
var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n\n color: ", ";\n background-color: ", ";\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ", ";\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ", "\n }\n\n .list-item-note {\n color: ", ";\n word-break: initial;\n ", "\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
55
55
|
|
|
56
|
-
var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
56
|
+
var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n min-width: 48px;\n"])));
|
|
57
57
|
|
|
58
58
|
var ListRow = function ListRow(_ref) {
|
|
59
59
|
var _ref$size = _ref.size,
|
|
@@ -139,17 +139,21 @@ var ListRow = function ListRow(_ref) {
|
|
|
139
139
|
disabled: disabled || dropdown.disabled,
|
|
140
140
|
icon: variant === 'overlay' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {})
|
|
141
141
|
}))
|
|
142
|
-
}), !!rightSideIcon && /*#__PURE__*/(0, _jsxRuntime.
|
|
142
|
+
}), !!rightSideIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RightIcon, {
|
|
143
143
|
className: 'list-item-actions',
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
144
|
+
onMouseEnter: function onMouseEnter() {
|
|
145
|
+
return rightSideAction && setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
|
|
146
|
+
},
|
|
147
|
+
onMouseLeave: function onMouseLeave() {
|
|
148
|
+
return rightSideAction && setInAction(false);
|
|
149
|
+
},
|
|
150
|
+
children: [rightSideAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
151
|
+
action: rightSideAction,
|
|
148
152
|
variant: "secondary",
|
|
149
153
|
shape: "circular",
|
|
150
154
|
disabled: disabled || rightSideIconDisabled,
|
|
151
155
|
children: rightSideIcon
|
|
152
|
-
})
|
|
156
|
+
}), !rightSideAction && rightSideIcon]
|
|
153
157
|
})]
|
|
154
158
|
}));
|
|
155
159
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListRow.cjs","names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n rightSideIcon?: React.ReactNode;\n rightSideAction?: () => void;\n rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action,\n rightSideIcon,\n rightSideAction,\n rightSideIconDisabled,\n className,\n ...rest\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`)\n .concat(className ? ` ${className}` : '');\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress\n {...rest}>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n {\n !!rightSideIcon &&\n <RightIcon className={'list-item-actions'}>\n <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListRow.cjs","names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {IconButton} from '../Button';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\nconst RightIcon = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n min-width: 48px;\n`;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n rightSideIcon?: React.ReactNode;\n rightSideAction?: () => void;\n rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action,\n rightSideIcon,\n rightSideAction,\n rightSideIconDisabled,\n className,\n ...rest\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`)\n .concat(className ? ` ${className}` : '');\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress\n {...rest}>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n {\n !!rightSideIcon &&\n <RightIcon className={'list-item-actions'}\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\n onMouseLeave={() => rightSideAction && setInAction(false)}>\n {\n rightSideAction &&\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\n disabled={disabled || rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n }\n {\n !rightSideAction && rightSideIcon\n }\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
|
package/dist/List/ListRow.js
CHANGED
|
@@ -25,8 +25,8 @@ import { IconButton } from '../Button';
|
|
|
25
25
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
26
26
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
27
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
28
|
-
var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n\n color: ", ";\n background-color: ", ";\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ", ";\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ", "\n }\n\n .list-item-note {\n color: ", ";\n word-break: initial;\n ", "\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n
|
|
29
|
-
var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
28
|
+
var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n\n color: ", ";\n background-color: ", ";\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ", ";\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ", "\n }\n\n .list-item-note {\n color: ", ";\n word-break: initial;\n ", "\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null));
|
|
29
|
+
var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n min-width: 48px;\n"])));
|
|
30
30
|
|
|
31
31
|
var ListRow = function ListRow(_ref) {
|
|
32
32
|
var _ref$size = _ref.size,
|
|
@@ -112,17 +112,21 @@ var ListRow = function ListRow(_ref) {
|
|
|
112
112
|
disabled: disabled || dropdown.disabled,
|
|
113
113
|
icon: variant === 'overlay' ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {})
|
|
114
114
|
}))
|
|
115
|
-
}), !!rightSideIcon && /*#__PURE__*/
|
|
115
|
+
}), !!rightSideIcon && /*#__PURE__*/_jsxs(RightIcon, {
|
|
116
116
|
className: 'list-item-actions',
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
onMouseEnter: function onMouseEnter() {
|
|
118
|
+
return rightSideAction && setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
|
|
119
|
+
},
|
|
120
|
+
onMouseLeave: function onMouseLeave() {
|
|
121
|
+
return rightSideAction && setInAction(false);
|
|
122
|
+
},
|
|
123
|
+
children: [rightSideAction && /*#__PURE__*/_jsx(IconButton, {
|
|
124
|
+
action: rightSideAction,
|
|
121
125
|
variant: "secondary",
|
|
122
126
|
shape: "circular",
|
|
123
127
|
disabled: disabled || rightSideIconDisabled,
|
|
124
128
|
children: rightSideIcon
|
|
125
|
-
})
|
|
129
|
+
}), !rightSideAction && rightSideIcon]
|
|
126
130
|
})]
|
|
127
131
|
}));
|
|
128
132
|
};
|
package/dist/List/ListRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n rightSideIcon?: React.ReactNode;\n rightSideAction?: () => void;\n rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action,\n rightSideIcon,\n rightSideAction,\n rightSideIconDisabled,\n className,\n ...rest\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`)\n .concat(className ? ` ${className}` : '');\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress\n {...rest}>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n {\n !!rightSideIcon &&\n <RightIcon className={'list-item-actions'}>\n <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {IconButton} from '../Button';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\nconst RightIcon = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n min-width: 48px;\n`;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n rightSideIcon?: React.ReactNode;\n rightSideAction?: () => void;\n rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action,\n rightSideIcon,\n rightSideAction,\n rightSideIconDisabled,\n className,\n ...rest\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`)\n .concat(className ? ` ${className}` : '');\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress\n {...rest}>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n {\n !!rightSideIcon &&\n <RightIcon className={'list-item-actions'}\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\n onMouseLeave={() => rightSideAction && setInAction(false)}>\n {\n rightSideAction &&\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\n disabled={disabled || rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n }\n {\n !rightSideAction && rightSideIcon\n }\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
|
|
@@ -26,9 +26,9 @@ var useClickOutsideRef = function useClickOutsideRef(callback) {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
document.addEventListener('
|
|
29
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
30
30
|
return function () {
|
|
31
|
-
document.removeEventListener('
|
|
31
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
32
32
|
};
|
|
33
33
|
}, [elementRef, relatedRefs]);
|
|
34
34
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickOutside.cjs","names":["useClickOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"sources":["../../src/common/ClickOutside.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n const elementRef = ref ?? React.useRef<any>(null);\n\n React.useEffect(() => {\n if (!elementRef.current) return;\n let container = elementRef.current;\n\n const handleClickOutside = (event: any) => {\n if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n callback();\n }\n };\n\n document.addEventListener('
|
|
1
|
+
{"version":3,"file":"ClickOutside.cjs","names":["useClickOutsideRef","callback","relatedRefs","ref","elementRef","React","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"sources":["../../src/common/ClickOutside.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n const elementRef = ref ?? React.useRef<any>(null);\n\n React.useEffect(() => {\n if (!elementRef.current) return;\n let container = elementRef.current;\n\n const handleClickOutside = (event: any) => {\n if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n callback();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n\n }, [elementRef, relatedRefs]);\n\n return elementRef;\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;EAAA,IAAvCC,WAAuC,uEAAlB,EAAkB;EAAA,IAAdC,GAAc;EAC9F,IAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUE,cAAA,CAAMC,MAAN,CAAkB,IAAlB,CAA1B;;EAEAD,cAAA,CAAME,SAAN,CAAgB,YAAM;IACpB,IAAI,CAACH,UAAU,CAACI,OAAhB,EAAyB;IACzB,IAAIC,SAAS,GAAGL,UAAU,CAACI,OAA3B;;IAEA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;MACzC,IAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACX,WAAW,CAACY,IAAZ,CAAiB,UAAAX,GAAG;QAAA,OAAIA,GAAG,CAACK,OAAJ,IAAeL,GAAG,CAACK,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;MAAA,CAApB,CAAvD,EAAmI;QACjIZ,QAAQ;MACT;IACF,CAJD;;IAMAc,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,kBAAvC;IACA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,kBAA1C;IACD,CAFD;EAID,CAfD,EAeG,CAACN,UAAD,EAAaF,WAAb,CAfH;;EAiBA,OAAOE,UAAP;AACD,CArBM"}
|
|
@@ -15,9 +15,9 @@ export var useClickOutsideRef = function useClickOutsideRef(callback) {
|
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
document.addEventListener('
|
|
18
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
19
19
|
return function () {
|
|
20
|
-
document.removeEventListener('
|
|
20
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
21
21
|
};
|
|
22
22
|
}, [elementRef, relatedRefs]);
|
|
23
23
|
return elementRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickOutside.js","names":["React","useClickOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"sources":["../../src/common/ClickOutside.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n const elementRef = ref ?? React.useRef<any>(null);\n\n React.useEffect(() => {\n if (!elementRef.current) return;\n let container = elementRef.current;\n\n const handleClickOutside = (event: any) => {\n if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n callback();\n }\n };\n\n document.addEventListener('
|
|
1
|
+
{"version":3,"file":"ClickOutside.js","names":["React","useClickOutsideRef","callback","relatedRefs","ref","elementRef","useRef","useEffect","current","container","handleClickOutside","event","contains","target","some","document","addEventListener","removeEventListener"],"sources":["../../src/common/ClickOutside.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickOutsideRef = (callback: () => void, relatedRefs: any[] = [], ref?: any) => {\n const elementRef = ref ?? React.useRef<any>(null);\n\n React.useEffect(() => {\n if (!elementRef.current) return;\n let container = elementRef.current;\n\n const handleClickOutside = (event: any) => {\n if (container && !container.contains(event.target) && !relatedRefs.some(ref => ref.current && ref.current.contains(event.target))) {\n callback();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n\n }, [elementRef, relatedRefs]);\n\n return elementRef;\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,QAAD,EAA8D;EAAA,IAAvCC,WAAuC,uEAAlB,EAAkB;EAAA,IAAdC,GAAc;EAC9F,IAAMC,UAAU,GAAGD,GAAH,aAAGA,GAAH,cAAGA,GAAH,GAAUJ,KAAK,CAACM,MAAN,CAAkB,IAAlB,CAA1B;EAEAN,KAAK,CAACO,SAAN,CAAgB,YAAM;IACpB,IAAI,CAACF,UAAU,CAACG,OAAhB,EAAyB;IACzB,IAAIC,SAAS,GAAGJ,UAAU,CAACG,OAA3B;;IAEA,IAAME,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;MACzC,IAAIF,SAAS,IAAI,CAACA,SAAS,CAACG,QAAV,CAAmBD,KAAK,CAACE,MAAzB,CAAd,IAAkD,CAACV,WAAW,CAACW,IAAZ,CAAiB,UAAAV,GAAG;QAAA,OAAIA,GAAG,CAACI,OAAJ,IAAeJ,GAAG,CAACI,OAAJ,CAAYI,QAAZ,CAAqBD,KAAK,CAACE,MAA3B,CAAnB;MAAA,CAApB,CAAvD,EAAmI;QACjIX,QAAQ;MACT;IACF,CAJD;;IAMAa,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,kBAAvC;IACA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,kBAA1C;IACD,CAFD;EAID,CAfD,EAeG,CAACL,UAAD,EAAaF,WAAb,CAfH;EAiBA,OAAOE,UAAP;AACD,CArBM"}
|