@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/List/ListRow.tsx"],"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","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","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 position: relative;\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 = {\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 }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (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\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\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={rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/List/ListRow.tsx"],"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","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","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 position: relative;\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 = {\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 }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (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\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\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"],"file":"ListRow.cjs"}
|
package/dist/List/ListRow.js
CHANGED
package/dist/List/ListRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/List/ListRow.tsx"],"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","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","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 position: relative;\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 = {\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 }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (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\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\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={rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/List/ListRow.tsx"],"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","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","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 position: relative;\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 = {\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 }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (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\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\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"],"file":"ListRow.js"}
|