@laerdal/life-react-components 3.5.3 → 3.6.0
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 +1 -1
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.d.ts +1 -1
- package/dist/List/ListRow.js +1 -1
- package/dist/List/ListRow.js.map +1 -1
- package/dist/test-utils.cjs +42 -0
- package/dist/test-utils.cjs.map +1 -0
- package/dist/test-utils.d.ts +5 -0
- package/dist/test-utils.js +22 -0
- package/dist/test-utils.js.map +1 -0
- package/package.json +1 -1
package/dist/List/ListRow.cjs
CHANGED
|
@@ -133,7 +133,7 @@ ListRow.propTypes = {
|
|
|
133
133
|
icon: _propTypes.default.node,
|
|
134
134
|
mainText: _propTypes.default.string.isRequired,
|
|
135
135
|
secondaryText: _propTypes.default.string,
|
|
136
|
-
note: _propTypes.default.string,
|
|
136
|
+
note: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
137
137
|
noteTooltip: _propTypes.default.string,
|
|
138
138
|
disabled: _propTypes.default.bool,
|
|
139
139
|
action: _propTypes.default.func,
|
|
@@ -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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n box-sizing: border-box;\r\n\r\n color: ${COLORS.neutral_600};\r\n background-color: ${COLORS.white};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${COLORS.neutral_600};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n size?: Size;\r\n variant?: 'normal' | 'overlay';\r\n icon?: React.ReactNode;\r\n mainText: string;\r\n secondaryText?: string;\r\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n note?: string;\r\n noteTooltip?: string;\r\n disabled?: boolean;\r\n action?: () => void;\r\n rightSideIcon?: React.ReactNode;\r\n rightSideAction?: () => void;\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: Props) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action || disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled || dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled || rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n box-sizing: border-box;\r\n\r\n color: ${COLORS.neutral_600};\r\n background-color: ${COLORS.white};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${COLORS.neutral_600};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n size?: Size;\r\n variant?: 'normal' | 'overlay';\r\n icon?: React.ReactNode;\r\n mainText: string;\r\n secondaryText?: string;\r\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n note?: string | React.ReactNode;\r\n noteTooltip?: string;\r\n disabled?: boolean;\r\n action?: () => void;\r\n rightSideIcon?: React.ReactNode;\r\n rightSideAction?: () => void;\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: Props) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action || disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled || dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled || rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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"}
|
package/dist/List/ListRow.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDow
|
|
|
8
8
|
mainText: string;
|
|
9
9
|
secondaryText?: string;
|
|
10
10
|
dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;
|
|
11
|
-
note?: string;
|
|
11
|
+
note?: string | React.ReactNode;
|
|
12
12
|
noteTooltip?: string;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
action?: () => void;
|
package/dist/List/ListRow.js
CHANGED
|
@@ -127,7 +127,7 @@ ListRow.propTypes = {
|
|
|
127
127
|
icon: _pt.node,
|
|
128
128
|
mainText: _pt.string.isRequired,
|
|
129
129
|
secondaryText: _pt.string,
|
|
130
|
-
note: _pt.string,
|
|
130
|
+
note: _pt.oneOfType([_pt.string, _pt.node]),
|
|
131
131
|
noteTooltip: _pt.string,
|
|
132
132
|
disabled: _pt.bool,
|
|
133
133
|
action: _pt.func,
|
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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n box-sizing: border-box;\r\n\r\n color: ${COLORS.neutral_600};\r\n background-color: ${COLORS.white};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${COLORS.neutral_600};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n size?: Size;\r\n variant?: 'normal' | 'overlay';\r\n icon?: React.ReactNode;\r\n mainText: string;\r\n secondaryText?: string;\r\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n note?: string;\r\n noteTooltip?: string;\r\n disabled?: boolean;\r\n action?: () => void;\r\n rightSideIcon?: React.ReactNode;\r\n rightSideAction?: () => void;\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: Props) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action || disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled || dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled || rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AAEjE,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAElB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,UAAU,QAAO,WAAW;AAAC;AAAA;AAAA;AAErC,IAAMC,GAAG,GAAGhB,MAAM,CAACiB,GAAG,k3EAKOhB,MAAM,CAACiB,WAAW,EAGpCjB,MAAM,CAACkB,WAAW,EACPlB,MAAM,CAACmB,KAAK,EAcVnB,MAAM,CAACoB,UAAU,EAC5BpB,MAAM,CAACqB,WAAW,EAChBT,SAAS,CAACU,KAAK,EAINtB,MAAM,CAACuB,WAAW,EAC7BvB,MAAM,CAACwB,WAAW,EAChBZ,SAAS,CAACa,MAAM,EAIzBvB,WAAW,EAKFF,MAAM,CAAC0B,WAAW,EAczBrB,iBAAiB,CAACJ,kBAAkB,CAAC0B,OAAO,EAAE,IAAI,CAAC,EAiBnDvB,iBAAiB,CAACH,kBAAkB,CAAC0B,OAAO,EAAE,IAAI,CAAC,EAiBnDxB,iBAAiB,CAACF,kBAAkB,CAAC0B,OAAO,EAAE,IAAI,CAAC,EAoCrDpB,mBAAmB,CAACN,kBAAkB,CAAC0B,OAAO,EAAE,IAAI,CAAC,EAI9C3B,MAAM,CAACkB,WAAW,EAEzBZ,kBAAkB,CAACL,kBAAkB,CAAC0B,OAAO,EAAE,IAAI,CAAC,CAsBzD;AAED,IAAMC,SAAS,GAAG7B,MAAM,CAACiB,GAAG,wLAM3B;AAmBD,IAAMa,OAAuC,GAAG,SAA1CA,OAAuC,OAgBiB;EAAA,qBAfXC,IAAI;IAAJA,IAAI,0BAAGnB,IAAI,CAACoB,MAAM;IAAA,oBAClBC,OAAO;IAAPA,OAAO,6BAAG,QAAQ;IAClBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,WAAW,QAAXA,WAAW;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,MAAM,QAANA,MAAM;IACNC,aAAa,QAAbA,aAAa;IACbC,eAAe,QAAfA,eAAe;IACfC,qBAAqB,QAArBA,qBAAqB;IACrBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGxD,sBAAgC/C,KAAK,CAACgD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDC,QAAQ;IAAEC,WAAW;EAE5B,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAK;IAChC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBX,MAAM,IAAIA,MAAM,EAAE;IACpB;EACF,CAAC;EAED,IAAMY,YAAY,GAAG,CAACL,QAAQ,GAAG,YAAY,GAAG,EAAE,EAC/CM,MAAM,CAACd,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCc,MAAM,CAAC,CAAC,CAACb,MAAM,GAAG,cAAc,GAAG,EAAE,CAAC,CACtCa,MAAM,CAAC,gBAAgB,CAAC,CACxBA,MAAM,WAAIrB,OAAO,OAAI,CACrBqB,MAAM,WAAIvB,IAAI,EAAG,CACjBuB,MAAM,CAACT,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3C,oBACE,MAAC,GAAG;IAAC,QAAQ,EAAE,CAACJ,MAAM,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IACvC,SAAS,EAAEa,YAAa;IACxB,WAAW,EAAEvC,yBAA0B;IACvC,SAAS,EAAE,mBAACqC,CAAC;MAAA,OAAK,CAACX,QAAQ,IAAIU,aAAa,CAACC,CAAC,CAAC;IAAA,CAAC;IAChD,OAAO,EAAE,iBAAAA,CAAC,EAAI;MACZ,CAACX,QAAQ,IAAIC,MAAM,IAAIA,MAAM,EAAE;IACjC,CAAE;IACF;EAAgB,GACZK,IAAI;IAAA,WAET,CAAC,CAACZ,IAAI,iBACN;MAAK,SAAS,EAAE,gBAAiB;MAAA,UAAEA;IAAI,EAAO,eAEhD;MAAK,SAAS,EAAE,mBAAoB;MAAA,wBAClC;QAAK,SAAS,EAAE,qBAAsB;QAAA,UAAEC;MAAQ,EAAO,EACtD,CAAC,CAACC,aAAa,iBAAI;QAAK,SAAS,EAAE,0BAA2B;QAAA,UAAEA;MAAa,EAAO;IAAA,EACjF,EAEJ,CAAC,CAACE,IAAI,iBACN;MAAA,WAEI,CAAC,CAACC,WAAW,iBACb;QAAK,SAAS,EAAE,6BAA8B;QAAA,uBAC5C,KAAC,cAAc;UAAC,KAAK,EAAEA,WAAY;UACnB,IAAI,EAAER,IAAI,KAAKnB,IAAI,CAAC2C,KAAK,GAAG3C,IAAI,CAACoB,MAAM,GAAGD,IAAI,KAAKnB,IAAI,CAAC4C,KAAK,GAAG5C,IAAI,CAAC6C,MAAM,GAAG7C,IAAI,CAAC4C,KAAM;UACzF,QAAQ,EAAE,KAAM;UAChB,QAAQ,EAAEhB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;UAC5B,SAAS,EAAE,IAAK;UAAA,UAC7BF;QAAI;MACU,EACb,EAGN,CAACC,WAAW,iBACZ;QAAK,SAAS,EAAE,gBAAiB;QAAA,UAC9BD;MAAI,EACD;IAAA,EAEP,EAGH,CAAC,CAACD,QAAQ,iBACV;MAAK,SAAS,EAAE,mBAAoB;MAC/B,YAAY,EAAE;QAAA,OAAMY,WAAW,CAAC,EAACZ,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEG,QAAQ,EAAC;MAAA,CAAC;MACrD,YAAY,EAAE;QAAA,OAAMS,WAAW,CAAC,KAAK,CAAC;MAAA,CAAC;MAAA,uBAC1C,KAAC,cAAc,kCAAKZ,QAAQ;QACZ,IAAI,EAAE,MAAO;QACb,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAAS;QACxC,IAAI,EAAEP,OAAO,KAAK,SAAS,gBACvB,KAAC,WAAW,CAAC,aAAa,KAAE,gBAC5B,KAAC,WAAW,CAAC,YAAY;MAAG;IAC9C,EACE,EAGN,CAAC,CAACS,aAAa,iBACf,MAAC,SAAS;MAAC,SAAS,EAAE,mBAAoB;MAC/B,YAAY,EAAE;QAAA,OAAMC,eAAe,IAAIM,WAAW,CAAC,EAACZ,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEG,QAAQ,EAAC;MAAA,CAAC;MACxE,YAAY,EAAE;QAAA,OAAMG,eAAe,IAAIM,WAAW,CAAC,KAAK,CAAC;MAAA,CAAC;MAAA,WAEjEN,eAAe,iBACf,KAAC,UAAU;QAAC,MAAM,EAAEA,eAAgB;QAAC,OAAO,EAAC,WAAW;QAAC,KAAK,EAAC,UAAU;QAC7D,QAAQ,EAAEH,QAAQ,IAAII,qBAAsB;QAAA,UACrDF;MAAa,EACH,EAGb,CAACC,eAAe,IAAID,aAAa;IAAA,EAEzB;EAAA,GAEV;AAEV,CAAC;AAAC;EA1HAT,OAAO,aAAG,QAAQ,EAAG,SAAS;EAC9BC,IAAI;EACJC,QAAQ;EACRC,aAAa;EAEbE,IAAI;EACJC,WAAW;EACXC,QAAQ;EACRC,MAAM;EACNC,aAAa;EACbC,eAAe;EACfC,qBAAqB;AAAA;AAiHvB,eAAed,OAAO"}
|
|
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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n box-sizing: border-box;\r\n\r\n color: ${COLORS.neutral_600};\r\n background-color: ${COLORS.white};\r\n\r\n\r\n cursor: default;\r\n\r\n &.interactive {\r\n cursor: pointer;\r\n }\r\n\r\n &.interactive.disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n &.interactive:hover:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &.interactive:active:not(.in-action):not(.disabled) {\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.interactive:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.disabled {\r\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n\r\n &.small {\r\n min-height: 48px;\r\n padding: 0 8px;\r\n\r\n .list-item-icon {\r\n margin-right: 8px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -8px;\r\n }\r\n }\r\n\r\n &.medium {\r\n min-height: 56px;\r\n padding: 0 12px;\r\n\r\n .list-item-icon {\r\n margin-right: 12px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -12px;\r\n }\r\n }\r\n\r\n &.large {\r\n min-height: 64px;\r\n padding: 0 16px;\r\n\r\n .list-item-icon {\r\n margin-right: 16px;\r\n }\r\n\r\n .list-item-main-text {\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-actions {\r\n margin-right: -16px;\r\n }\r\n }\r\n\r\n &.overlay {\r\n padding: 0 4px;\r\n\r\n .list-item-actions {\r\n margin-right: -4px;\r\n }\r\n }\r\n\r\n .list-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n .list-item-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .list-item-main-text {\r\n }\r\n\r\n .list-item-secondary-text {\r\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note {\r\n color: ${COLORS.neutral_600};\r\n word-break: initial;\r\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n .list-item-note.with-tooltip {\r\n cursor: pointer;\r\n\r\n > div {\r\n text-decoration-line: underline;\r\n text-decoration-style: dashed;\r\n text-underline-offset: 1px;\r\n text-decoration-thickness: 1px;\r\n }\r\n }\r\n\r\n .list-item-actions {\r\n display: flex;\r\n align-items: center;\r\n\r\n button div {\r\n background-color: transparent;\r\n }\r\n }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 48px;\r\n min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n size?: Size;\r\n variant?: 'normal' | 'overlay';\r\n icon?: React.ReactNode;\r\n mainText: string;\r\n secondaryText?: string;\r\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n note?: string | React.ReactNode;\r\n noteTooltip?: string;\r\n disabled?: boolean;\r\n action?: () => void;\r\n rightSideIcon?: React.ReactNode;\r\n rightSideAction?: () => void;\r\n rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n size = Size.Medium,\r\n variant = 'normal',\r\n icon,\r\n mainText,\r\n secondaryText,\r\n dropdown,\r\n note,\r\n noteTooltip,\r\n disabled = false,\r\n action,\r\n rightSideIcon,\r\n rightSideAction,\r\n rightSideIconDisabled,\r\n className,\r\n ...rest\r\n }: Props) => {\r\n\r\n const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (e.key === 'Enter') {\r\n action && action()\r\n }\r\n }\r\n\r\n const rowClassName = (inAction ? 'in-action ' : '')\r\n .concat(disabled ? 'disabled ' : '')\r\n .concat(!!action ? 'interactive ' : '')\r\n .concat('list-item-row ')\r\n .concat(`${variant} `)\r\n .concat(`${size}`)\r\n .concat(className ? ` ${className}` : '');\r\n\r\n return (\r\n <Row tabIndex={!action || disabled ? -1 : 0}\r\n className={rowClassName}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n onClick={e => {\r\n !disabled && action && action();\r\n }}\r\n data-hj-suppress\r\n {...rest}>\r\n {\r\n !!icon &&\r\n <div className={'list-item-icon'}>{icon}</div>\r\n }\r\n <div className={'list-item-content'}>\r\n <div className={'list-item-main-text'}>{mainText}</div>\r\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n </div>\r\n {\r\n !!note &&\r\n <>\r\n {\r\n !!noteTooltip &&\r\n <div className={'list-item-note with-tooltip'}>\r\n <TooltipWrapper label={noteTooltip}\r\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n position={'top'}\r\n tabIndex={disabled ? -1 : 0}\r\n withArrow={true}>\r\n {note}\r\n </TooltipWrapper>\r\n </div>\r\n }\r\n {\r\n !noteTooltip &&\r\n <div className={'list-item-note'}>\r\n {note}\r\n </div>\r\n }\r\n </>\r\n }\r\n {\r\n !!dropdown &&\r\n <div className={'list-item-actions'}\r\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => setInAction(false)}>\r\n <DropdownButton {...dropdown}\r\n type={'icon'}\r\n disabled={disabled || dropdown.disabled}\r\n icon={variant === 'overlay'\r\n ? <SystemIcons.ArrowDropDown/>\r\n : <SystemIcons.MoreVertical/>}\r\n />\r\n </div>\r\n }\r\n {\r\n !!rightSideIcon &&\r\n <RightIcon className={'list-item-actions'}\r\n onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n {\r\n rightSideAction &&\r\n <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n disabled={disabled || rightSideIconDisabled}>\r\n {rightSideIcon}\r\n </IconButton>\r\n }\r\n {\r\n !rightSideAction && rightSideIcon\r\n }\r\n </RightIcon>\r\n }\r\n </Row>\r\n );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
render: true
|
|
9
|
+
};
|
|
10
|
+
exports.render = void 0;
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
var _react2 = require("@testing-library/react");
|
|
14
|
+
Object.keys(_react2).forEach(function (key) {
|
|
15
|
+
if (key === "default" || key === "__esModule") return;
|
|
16
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
17
|
+
if (key in exports && exports[key] === _react2[key]) return;
|
|
18
|
+
Object.defineProperty(exports, key, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _react2[key];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
var _styledComponents = require("styled-components");
|
|
26
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
28
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
29
|
+
var AllTheProviders = function AllTheProviders(_ref) {
|
|
30
|
+
var children = _ref.children;
|
|
31
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
|
|
32
|
+
theme: {},
|
|
33
|
+
children: children
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
var customRender = function customRender(ui, options) {
|
|
37
|
+
return (0, _react2.render)(ui, _objectSpread({
|
|
38
|
+
wrapper: AllTheProviders
|
|
39
|
+
}, options));
|
|
40
|
+
};
|
|
41
|
+
exports.render = customRender;
|
|
42
|
+
//# sourceMappingURL=test-utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"test-utils.cjs","names":["_react","_interopRequireDefault","require","_react2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_styledComponents","_jsxRuntime","ownKeys","e","r","t","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","push","apply","_objectSpread","arguments","length","_defineProperty2","getOwnPropertyDescriptors","defineProperties","AllTheProviders","_ref","children","jsx","ThemeProvider","theme","customRender","ui","options","render","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n return (\r\n <ThemeProvider theme={{}}>\r\n {children}\r\n </ThemeProvider>\r\n )\r\n}\r\n\r\nconst customRender = (\r\n ui: ReactElement,\r\n options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAgBAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAfA,IAAAS,iBAAA,GAAAd,OAAA;AAA+C,IAAAe,WAAA,GAAAf,OAAA;AAAA,SAAAgB,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAjB,MAAA,CAAAC,IAAA,CAAAc,CAAA,OAAAf,MAAA,CAAAkB,qBAAA,QAAAC,CAAA,GAAAnB,MAAA,CAAAkB,qBAAA,CAAAH,CAAA,GAAAC,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAJ,CAAA,WAAAhB,MAAA,CAAAqB,wBAAA,CAAAN,CAAA,EAAAC,CAAA,EAAAN,UAAA,OAAAO,CAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,CAAA,EAAAE,CAAA,YAAAF,CAAA;AAAA,SAAAO,cAAAT,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAS,SAAA,CAAAC,MAAA,EAAAV,CAAA,UAAAC,CAAA,WAAAQ,SAAA,CAAAT,CAAA,IAAAS,SAAA,CAAAT,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAd,MAAA,CAAAiB,CAAA,OAAAf,OAAA,WAAAc,CAAA,QAAAW,gBAAA,aAAAZ,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAhB,MAAA,CAAA4B,yBAAA,GAAA5B,MAAA,CAAA6B,gBAAA,CAAAd,CAAA,EAAAf,MAAA,CAAA4B,yBAAA,CAAAX,CAAA,KAAAH,OAAA,CAAAd,MAAA,CAAAiB,CAAA,GAAAf,OAAA,WAAAc,CAAA,IAAAhB,MAAA,CAAAS,cAAA,CAAAM,CAAA,EAAAC,CAAA,EAAAhB,MAAA,CAAAqB,wBAAA,CAAAJ,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAE/C,IAAMe,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAAgD;EAAA,IAA3CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAChC,oBACE,IAAAnB,WAAA,CAAAoB,GAAA,EAACrB,iBAAA,CAAAsB,aAAa;IAACC,KAAK,EAAE,CAAC,CAAE;IAAAH,QAAA,EACpBA;EAAQ,CACE,CAAC;AAEpB,CAAC;AAED,IAAMI,YAAY,GAAG,SAAfA,YAAYA,CAChBC,EAAgB,EAChBC,OAAwC;EAAA,OACrC,IAAAC,cAAM,EAACF,EAAE,EAAAb,aAAA;IAAGgB,OAAO,EAAEV;EAAe,GAAKQ,OAAO,CAAC,CAAC;AAAA;AAAA9B,OAAA,CAAA+B,MAAA,GAAAH,YAAA","ignoreList":[]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { RenderOptions } from '@testing-library/react';
|
|
3
|
+
declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
|
|
4
|
+
export * from '@testing-library/react';
|
|
5
|
+
export { customRender as render };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { render } from '@testing-library/react';
|
|
6
|
+
import { ThemeProvider } from 'styled-components';
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
var AllTheProviders = function AllTheProviders(_ref) {
|
|
9
|
+
var children = _ref.children;
|
|
10
|
+
return /*#__PURE__*/_jsx(ThemeProvider, {
|
|
11
|
+
theme: {},
|
|
12
|
+
children: children
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
var customRender = function customRender(ui, options) {
|
|
16
|
+
return render(ui, _objectSpread({
|
|
17
|
+
wrapper: AllTheProviders
|
|
18
|
+
}, options));
|
|
19
|
+
};
|
|
20
|
+
export * from '@testing-library/react';
|
|
21
|
+
export { customRender as render };
|
|
22
|
+
//# sourceMappingURL=test-utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"test-utils.js","names":["React","render","ThemeProvider","jsx","_jsx","AllTheProviders","_ref","children","theme","customRender","ui","options","_objectSpread","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n return (\r\n <ThemeProvider theme={{}}>\r\n {children}\r\n </ThemeProvider>\r\n )\r\n}\r\n\r\nconst customRender = (\r\n ui: ReactElement,\r\n options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;AAAA,OAAOA,KAAK,MAAsB,OAAO;AACzC,SAAQC,MAAM,QAAsB,wBAAwB;AAC5D,SAAQC,aAAa,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAAgD;EAAA,IAA3CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAChC,oBACEH,IAAA,CAACF,aAAa;IAACM,KAAK,EAAE,CAAC,CAAE;IAAAD,QAAA,EACpBA;EAAQ,CACE,CAAC;AAEpB,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAChBC,EAAgB,EAChBC,OAAwC;EAAA,OACrCV,MAAM,CAACS,EAAE,EAAAE,aAAA;IAAGC,OAAO,EAAER;EAAe,GAAKM,OAAO,CAAC,CAAC;AAAA;AAEvD,cAAc,wBAAwB;AACtC,SAAQF,YAAY,IAAIR,MAAM","ignoreList":[]}
|