@laerdal/life-react-components 1.9.8-dev.1.full → 1.9.8-dev.3.full

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.
Files changed (6) hide show
  1. package/dist/List/ListRow.cjs +24 -3
  2. package/dist/List/ListRow.cjs.map +1 -1
  3. package/dist/List/ListRow.d.ts +3 -0
  4. package/dist/List/ListRow.js +22 -3
  5. package/dist/List/ListRow.js.map +1 -1
  6. package/package.json +1 -1
package/dist/List/ListRow.cjs CHANGED
@@ -33,9 +33,11 @@ var _types = require("../types");
33
33
 
34
34
  var _common = require("../common");
35
35
 
36
+ var _Button = require("../Button");
37
+
36
38
  var _jsxRuntime = require("react/jsx-runtime");
37
39
 
38
- var _templateObject;
40
+ var _templateObject, _templateObject2;
39
41
 
40
42
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
41
43
 
@@ -47,6 +49,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
47
49
 
48
50
  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 position: relative;\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 color: ", ";\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), _styles.COLORS.neutral_600);
49
51
 
52
+ var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
53
+
50
54
  var ListRow = function ListRow(_ref) {
51
55
  var _ref$size = _ref.size,
52
56
  size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
@@ -60,7 +64,10 @@ var ListRow = function ListRow(_ref) {
60
64
  noteTooltip = _ref.noteTooltip,
61
65
  _ref$disabled = _ref.disabled,
62
66
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
63
- action = _ref.action;
67
+ action = _ref.action,
68
+ rightSideIcon = _ref.rightSideIcon,
69
+ rightSideAction = _ref.rightSideAction,
70
+ rightSideIconDisabled = _ref.rightSideIconDisabled;
64
71
 
65
72
  var _React$useState = React.useState(false),
66
73
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -125,6 +132,17 @@ var ListRow = function ListRow(_ref) {
125
132
  disabled: disabled || dropdown.disabled,
126
133
  icon: variant === 'overlay' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {})
127
134
  }))
135
+ }), !!rightSideIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightIcon, {
136
+ className: 'list-item-actions',
137
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
138
+ action: function action() {
139
+ return !!rightSideAction && rightSideAction();
140
+ },
141
+ variant: "secondary",
142
+ shape: "circular",
143
+ disabled: disabled || rightSideIconDisabled,
144
+ children: rightSideIcon
145
+ })
128
146
  })]
129
147
  });
130
148
  };
@@ -137,7 +155,10 @@ ListRow.propTypes = {
137
155
  note: _propTypes.default.string,
138
156
  noteTooltip: _propTypes.default.string,
139
157
  disabled: _propTypes.default.bool,
140
- action: _propTypes.default.func
158
+ action: _propTypes.default.func,
159
+ rightSideIcon: _propTypes.default.node,
160
+ rightSideAction: _propTypes.default.func,
161
+ rightSideIconDisabled: _propTypes.default.bool
141
162
  };
142
163
  var _default = ListRow;
143
164
  exports.default = _default;
package/dist/List/ListRow.cjs.map 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","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","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';\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\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};\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 }: 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 </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.d.ts CHANGED
@@ -12,6 +12,9 @@ declare type Props = {
12
12
  noteTooltip?: string;
13
13
  disabled?: boolean;
14
14
  action?: () => void;
15
+ rightSideIcon?: React.ReactNode;
16
+ rightSideAction?: () => void;
17
+ rightSideIconDisabled?: boolean;
15
18
  };
16
19
  declare const ListRow: React.FunctionComponent<Props>;
17
20
  export default ListRow;
package/dist/List/ListRow.js CHANGED
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
4
4
  import _pt from "prop-types";
5
5
 
6
- var _templateObject;
6
+ var _templateObject, _templateObject2;
7
7
 
8
8
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
9
9
 
@@ -19,10 +19,12 @@ import { SystemIcons } from '../icons';
19
19
  import { Size } from '../types';
20
20
  import { Z_INDEXES } from '../styles';
21
21
  import { defaultOnMouseDownHandler } from '../common';
22
+ import { IconButton } from '../Button';
22
23
  import { jsx as _jsx } from "react/jsx-runtime";
23
24
  import { jsxs as _jsxs } from "react/jsx-runtime";
24
25
  import { Fragment as _Fragment } from "react/jsx-runtime";
25
26
  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 position: relative;\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 color: ", ";\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), COLORS.neutral_600);
27
+ var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
26
28
 
27
29
  var ListRow = function ListRow(_ref) {
28
30
  var _ref$size = _ref.size,
@@ -37,7 +39,10 @@ var ListRow = function ListRow(_ref) {
37
39
  noteTooltip = _ref.noteTooltip,
38
40
  _ref$disabled = _ref.disabled,
39
41
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
40
- action = _ref.action;
42
+ action = _ref.action,
43
+ rightSideIcon = _ref.rightSideIcon,
44
+ rightSideAction = _ref.rightSideAction,
45
+ rightSideIconDisabled = _ref.rightSideIconDisabled;
41
46
 
42
47
  var _React$useState = React.useState(false),
43
48
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -102,6 +107,17 @@ var ListRow = function ListRow(_ref) {
102
107
  disabled: disabled || dropdown.disabled,
103
108
  icon: variant === 'overlay' ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {})
104
109
  }))
110
+ }), !!rightSideIcon && /*#__PURE__*/_jsx(RightIcon, {
111
+ className: 'list-item-actions',
112
+ children: /*#__PURE__*/_jsx(IconButton, {
113
+ action: function action() {
114
+ return !!rightSideAction && rightSideAction();
115
+ },
116
+ variant: "secondary",
117
+ shape: "circular",
118
+ disabled: disabled || rightSideIconDisabled,
119
+ children: rightSideIcon
120
+ })
105
121
  })]
106
122
  });
107
123
  };
@@ -114,7 +130,10 @@ ListRow.propTypes = {
114
130
  note: _pt.string,
115
131
  noteTooltip: _pt.string,
116
132
  disabled: _pt.bool,
117
- action: _pt.func
133
+ action: _pt.func,
134
+ rightSideIcon: _pt.node,
135
+ rightSideAction: _pt.func,
136
+ rightSideIconDisabled: _pt.bool
118
137
  };
119
138
  export default ListRow;
120
139
  //# sourceMappingURL=ListRow.js.map
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","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","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';\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\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};\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 }: 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 </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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.8-dev.1.full",
3
+ "version": "1.9.8-dev.3.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [