@elliemae/ds-mobile 3.40.0-rc.0 → 3.40.0-rc.2
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/cjs/MobileContextMenu/MobileContextMenu.js +43 -31
- package/dist/cjs/MobileContextMenu/MobileContextMenu.js.map +2 -2
- package/dist/cjs/MobileContextMenu/MobileContextMenuItem.js +7 -2
- package/dist/cjs/MobileContextMenu/MobileContextMenuItem.js.map +2 -2
- package/dist/cjs/MobileTouchable/MobileTouchable.js +18 -1
- package/dist/cjs/MobileTouchable/MobileTouchable.js.map +2 -2
- package/dist/esm/MobileContextMenu/MobileContextMenu.js +43 -31
- package/dist/esm/MobileContextMenu/MobileContextMenu.js.map +2 -2
- package/dist/esm/MobileContextMenu/MobileContextMenuItem.js +7 -2
- package/dist/esm/MobileContextMenu/MobileContextMenuItem.js.map +2 -2
- package/dist/esm/MobileTouchable/MobileTouchable.js +18 -1
- package/dist/esm/MobileTouchable/MobileTouchable.js.map +2 -2
- package/dist/types/MobileContextMenu/MobileContextMenuItem.d.ts +4 -1
- package/package.json +18 -18
|
@@ -95,7 +95,8 @@ const DSMobileContextMenu = (0, import_ds_system.withTheme)(
|
|
|
95
95
|
dataTestid = "mobile-context-menu",
|
|
96
96
|
buttonFooter = null,
|
|
97
97
|
onApply = import_lodash.noop,
|
|
98
|
-
selecteds: initSelecteds
|
|
98
|
+
selecteds: initSelecteds,
|
|
99
|
+
onKeyDown
|
|
99
100
|
}) => {
|
|
100
101
|
const [selectedItems, setSelectedItems] = (0, import_react.useState)([]);
|
|
101
102
|
const trueSelected = (0, import_react.useMemo)(
|
|
@@ -129,35 +130,45 @@ const DSMobileContextMenu = (0, import_ds_system.withTheme)(
|
|
|
129
130
|
}
|
|
130
131
|
}
|
|
131
132
|
),
|
|
132
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
134
|
+
StyledContainer,
|
|
135
|
+
{
|
|
136
|
+
zIndex,
|
|
137
|
+
rows,
|
|
138
|
+
innerRef: containerRef,
|
|
139
|
+
"data-testid": "ds-mobile-context-menu",
|
|
140
|
+
onKeyDown,
|
|
141
|
+
children: [
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderContainer, { justifyContent: "center", alignItems: "center", pl: "xs", pr: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { alignItems: "center", gutter: "xxs", cols: Array(isArr(title) ? title.length : 1).fill("auto"), children: title }) }),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_shared.Group, { activeValue: trueSelected, multiple, onChange: handleChange, children: import_react.default.Children.map(children, (child, ii) => {
|
|
144
|
+
const isGroup = child.type === (/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MobileContextMenuGroup.DSMobileContextMenuGroup, {})).type || child.type?.name === import_MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === import_MobileContextMenuGroup.DSMobileContextMenuGroup.type;
|
|
145
|
+
const { onClick = import_lodash.noop } = child.props;
|
|
146
|
+
const value = ii;
|
|
147
|
+
let isSelected;
|
|
148
|
+
if (singleSelect) isSelected = trueSelected === value;
|
|
149
|
+
else if (multiple) isSelected = trueSelected.includes(value);
|
|
150
|
+
return import_react.default.cloneElement(child, {
|
|
151
|
+
value,
|
|
152
|
+
key: `cm.${ii}`,
|
|
153
|
+
isMulti: multiple,
|
|
154
|
+
singleSelect,
|
|
155
|
+
isSelected,
|
|
156
|
+
onClick: !isGroup ? (e) => onClick(e, child.props) : null,
|
|
157
|
+
selectedItems: isGroup ? trueSelected : null
|
|
158
|
+
});
|
|
159
|
+
}) }) }) }),
|
|
160
|
+
buttonFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { pl: "xs", pr: "xs", alignItems: "center", children: import_react.default.cloneElement(buttonFooter, {
|
|
161
|
+
...buttonFooter.props,
|
|
162
|
+
containerProps: {
|
|
163
|
+
"data-testid": `${dataTestid}--btn`
|
|
164
|
+
},
|
|
165
|
+
buttonType: "primary",
|
|
166
|
+
size: "l",
|
|
167
|
+
onClick: handleApply.bind(buttonFooter.props)
|
|
168
|
+
}) })
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
)
|
|
161
172
|
] });
|
|
162
173
|
}
|
|
163
174
|
);
|
|
@@ -191,7 +202,8 @@ const props = {
|
|
|
191
202
|
selecteds: import_ds_props_helpers.PropTypes.oneOfType([
|
|
192
203
|
import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number])),
|
|
193
204
|
import_ds_props_helpers.PropTypes.number
|
|
194
|
-
]).description("selected elements for multi and single select")
|
|
205
|
+
]).description("selected elements for multi and single select"),
|
|
206
|
+
onKeyDown: import_ds_props_helpers.PropTypes.func.description("onKeyDown")
|
|
195
207
|
};
|
|
196
208
|
DSMobileContextMenu.displayName = "DSMobileContextMenu";
|
|
197
209
|
const DSMobileContextMenuWithSchema = (0, import_ds_props_helpers.describe)(DSMobileContextMenu);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileContextMenu/MobileContextMenu.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { styled, truncate, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup.js';\n\nconst StyledContainer = styled(Grid)`\n background: ${(props) => props.theme.colors.neutral['000']};\n z-index: ${(props) => props.zIndex};\n width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n position: fixed;\n bottom: 0;\n left: ${(props) => props.theme.space.xxs};\n max-height: 90vh;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n box-shadow:\n 0 0px 24px 0 rgba(0, 0, 0, 0.5),\n 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n color: ${(props) => props.theme.colors.neutral['000']};\n ${truncate()}\n\n & > span {\n height: 20px;\n width: 20px;\n }\n\n & > span > svg,\n svg:not([fill]) {\n height: 20px;\n width: 20px;\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nconst HeaderContainer = styled(Grid)`\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n ({\n open = false,\n title = '',\n multiple = false,\n singleSelect = false,\n onChange = noop,\n onClickOutside = noop,\n children,\n theme,\n backdropZIndex = 1000,\n zIndex = 1001,\n dataTestid = 'mobile-context-menu',\n buttonFooter = null,\n onApply = noop,\n selecteds: initSelecteds,\n }) => {\n const [selectedItems, setSelectedItems] = useState([]);\n const trueSelected = useMemo(\n () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n [initSelecteds, selectedItems],\n );\n const containerRef = useRef(null);\n const handleChange = (value, childProps, event) => {\n onChange(value, childProps, event);\n if (initSelecteds === undefined) {\n if (multiple) setSelectedItems([...value]);\n else if (singleSelect) setSelectedItems(value);\n }\n };\n\n const handleApply = function (e) {\n if (this.onClick) this.onClick(e);\n onApply(e, selectedItems);\n };\n\n const rows = [theme.space.s, 1];\n if (buttonFooter) rows.push('56px');\n\n if (!open) return null;\n\n return (\n <>\n <DSBackdrop\n type=\"cover\"\n zIndex={backdropZIndex}\n onClick={(e) => {\n // PUI-4481 prevent click on elements below backdrop\n e.stopPropagation();\n onClickOutside(e);\n }}\n />\n <StyledContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { styled, truncate, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup.js';\n\nconst StyledContainer = styled(Grid)`\n background: ${(props) => props.theme.colors.neutral['000']};\n z-index: ${(props) => props.zIndex};\n width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n position: fixed;\n bottom: 0;\n left: ${(props) => props.theme.space.xxs};\n max-height: 90vh;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n box-shadow:\n 0 0px 24px 0 rgba(0, 0, 0, 0.5),\n 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n color: ${(props) => props.theme.colors.neutral['000']};\n ${truncate()}\n\n & > span {\n height: 20px;\n width: 20px;\n }\n\n & > span > svg,\n svg:not([fill]) {\n height: 20px;\n width: 20px;\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nconst HeaderContainer = styled(Grid)`\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n ({\n open = false,\n title = '',\n multiple = false,\n singleSelect = false,\n onChange = noop,\n onClickOutside = noop,\n children,\n theme,\n backdropZIndex = 1000,\n zIndex = 1001,\n dataTestid = 'mobile-context-menu',\n buttonFooter = null,\n onApply = noop,\n selecteds: initSelecteds,\n onKeyDown,\n }) => {\n const [selectedItems, setSelectedItems] = useState([]);\n const trueSelected = useMemo(\n () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n [initSelecteds, selectedItems],\n );\n const containerRef = useRef(null);\n const handleChange = (value, childProps, event) => {\n onChange(value, childProps, event);\n if (initSelecteds === undefined) {\n if (multiple) setSelectedItems([...value]);\n else if (singleSelect) setSelectedItems(value);\n }\n };\n\n const handleApply = function (e) {\n if (this.onClick) this.onClick(e);\n onApply(e, selectedItems);\n };\n\n const rows = [theme.space.s, 1];\n if (buttonFooter) rows.push('56px');\n\n if (!open) return null;\n\n return (\n <>\n <DSBackdrop\n type=\"cover\"\n zIndex={backdropZIndex}\n onClick={(e) => {\n // PUI-4481 prevent click on elements below backdrop\n e.stopPropagation();\n onClickOutside(e);\n }}\n />\n <StyledContainer\n zIndex={zIndex}\n rows={rows}\n innerRef={containerRef}\n data-testid=\"ds-mobile-context-menu\"\n onKeyDown={onKeyDown}\n >\n <HeaderContainer justifyContent=\"center\" alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n <StyledTitle alignItems=\"center\" gutter=\"xxs\" cols={Array(isArr(title) ? title.length : 1).fill('auto')}>\n {title}\n </StyledTitle>\n </HeaderContainer>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>\n <Group activeValue={trueSelected} multiple={multiple} onChange={handleChange}>\n {React.Children.map(children, (child, ii) => {\n const isGroup =\n child.type === (<ContextMenuGroup />).type ||\n child.type?.name === ContextMenuGroup.componentType ||\n child.type === ContextMenuGroup.type;\n const { onClick = noop } = child.props;\n const value = ii;\n let isSelected;\n if (singleSelect) isSelected = trueSelected === value;\n else if (multiple) isSelected = trueSelected.includes(value);\n return React.cloneElement(child, {\n value,\n key: `cm.${ii}`,\n isMulti: multiple,\n singleSelect,\n isSelected,\n onClick: !isGroup ? (e) => onClick(e, child.props) : null,\n selectedItems: isGroup ? trueSelected : null,\n });\n })}\n </Group>\n </Grid>\n </Grid>\n {buttonFooter && (\n <Grid pl=\"xs\" pr=\"xs\" alignItems=\"center\">\n {React.cloneElement(buttonFooter, {\n ...buttonFooter.props,\n containerProps: {\n 'data-testid': `${dataTestid}--btn`,\n },\n buttonType: 'primary',\n size: 'l',\n onClick: handleApply.bind(buttonFooter.props),\n })}\n </Grid>\n )}\n </StyledContainer>\n </>\n );\n },\n);\n\nconst props = {\n /** toggle open the menu */\n open: PropTypes.bool.description('toggle open the menu'),\n /** context menu title */\n title: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),\n ]).description('context menu title'),\n /** change handler for selectable context menu */\n onChange: PropTypes.func.description('change handler for selectable context menu'),\n /** multi select */\n multiple: PropTypes.bool.description('multi select'),\n /** click outside callback handler */\n onClickOutside: PropTypes.func.description('click outside callback handler'),\n /** array of mobile context menu items */\n children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),\n /** z index for overlay div */\n backdropZIndex: PropTypes.number.description('z index for overlay div'),\n /** z index for menu container */\n zIndex: PropTypes.number.description('z index for menu container'),\n /** for e2e tests */\n dataTestid: PropTypes.string.description('for e2e tests'),\n /** bottom button */\n buttonFooter: PropTypes.element.description('bottom button'),\n /** callback */\n onApply: PropTypes.func.description('callback'),\n /** selected elements for multi and single select */\n selecteds: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n PropTypes.number,\n ]).description('selected elements for multi and single select'),\n onKeyDown: PropTypes.func.description('onKeyDown'),\n};\n\nDSMobileContextMenu.displayName = 'DSMobileContextMenu';\nconst DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);\n\nDSMobileContextMenuWithSchema.propTypes = props;\n\nexport { DSMobileContextMenu, DSMobileContextMenuWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props", "React", "ContextMenuGroup"]
|
|
7
7
|
}
|
|
@@ -86,7 +86,8 @@ const DSMobileContextMenuItem = ({
|
|
|
86
86
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
87
87
|
onClick = () => {
|
|
88
88
|
},
|
|
89
|
-
value
|
|
89
|
+
value,
|
|
90
|
+
innerRef
|
|
90
91
|
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
92
|
import_ds_shared.GroupItem,
|
|
92
93
|
{
|
|
@@ -99,6 +100,7 @@ const DSMobileContextMenuItem = ({
|
|
|
99
100
|
let leftAddon = leftProp || null;
|
|
100
101
|
if (isMulti) leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form.DSCheckbox, { checked: isSelected, "data-testid": "leftAddon-checkbox" });
|
|
101
102
|
if (singleSelect) leftAddon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckMark, { "data-testid": "leftAddon-checkmark" });
|
|
103
|
+
console.log("SSS", innerRef);
|
|
102
104
|
const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
|
|
103
105
|
if (rightAddon) cols.push("40px");
|
|
104
106
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -110,6 +112,7 @@ const DSMobileContextMenuItem = ({
|
|
|
110
112
|
onClick(e);
|
|
111
113
|
},
|
|
112
114
|
cols,
|
|
115
|
+
innerRef,
|
|
113
116
|
children: [
|
|
114
117
|
(singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PropWrap, { "data-testid": "left-addon", isMulti, alignItems: "center", justifyContent: "center", pl: "16px", children: showLeftAddon && leftAddon }),
|
|
115
118
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { height: "44px", pr: "xs", pl: !leftAddon && isGroup ? "24px" : "xs", children: [
|
|
@@ -141,7 +144,9 @@ const props = {
|
|
|
141
144
|
/** value for select */
|
|
142
145
|
value: import_ds_props_helpers.PropTypes.number.description("value for select"),
|
|
143
146
|
/** selected value */
|
|
144
|
-
isSelected: import_ds_props_helpers.PropTypes.bool.description("selected value")
|
|
147
|
+
isSelected: import_ds_props_helpers.PropTypes.bool.description("selected value"),
|
|
148
|
+
/** */
|
|
149
|
+
innerRef: import_ds_props_helpers.PropTypes.any.description("Ref for the item")
|
|
145
150
|
};
|
|
146
151
|
DSMobileContextMenuItem.displayName = "DSMobileContextMenuItem";
|
|
147
152
|
const DSMobileContextMenuItemWithSchema = (0, import_ds_props_helpers.describe)(DSMobileContextMenuItem);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileContextMenu/MobileContextMenuItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport type { RefCallback } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n innerRef: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n innerRef,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n console.log('SSS', innerRef);\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n innerRef={innerRef}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n /** */\n innerRef: PropTypes.any.description('Ref for the item'),\n};\n\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
|
@@ -41,6 +41,18 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
41
41
|
const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
42
42
|
cursor: pointer;
|
|
43
43
|
background: ${(props) => props.touching ? props.theme.colors.brand["100"] : props.theme.colors.neutral["000"]};
|
|
44
|
+
&:focus {
|
|
45
|
+
position: relative;
|
|
46
|
+
&:after {
|
|
47
|
+
position: absolute;
|
|
48
|
+
content: '';
|
|
49
|
+
border: 2px solid brand-700;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
44
56
|
`;
|
|
45
57
|
const MobileTouchable = ({
|
|
46
58
|
children,
|
|
@@ -48,11 +60,13 @@ const MobileTouchable = ({
|
|
|
48
60
|
theme,
|
|
49
61
|
dataTestid = "mobile-touchable",
|
|
50
62
|
render,
|
|
63
|
+
innerRef,
|
|
51
64
|
...gridProps
|
|
52
65
|
}) => {
|
|
53
66
|
const [touching, setTouching] = (0, import_react.useState)(false);
|
|
54
67
|
const handleStart = (0, import_react.useCallback)(() => setTouching(true));
|
|
55
68
|
const handleEnd = (0, import_react.useCallback)(() => setTouching(false));
|
|
69
|
+
console.log("AAA", innerRef);
|
|
56
70
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
71
|
StyledContainer,
|
|
58
72
|
{
|
|
@@ -62,6 +76,8 @@ const MobileTouchable = ({
|
|
|
62
76
|
onTouchStart: handleStart,
|
|
63
77
|
onTouchEnd: handleEnd,
|
|
64
78
|
"data-testid": dataTestid,
|
|
79
|
+
innerRef,
|
|
80
|
+
tabIndex: 0,
|
|
65
81
|
children: children || render(gridProps)
|
|
66
82
|
}
|
|
67
83
|
);
|
|
@@ -71,7 +87,8 @@ MobileTouchable.propTypes = {
|
|
|
71
87
|
children: import_prop_types.default.any,
|
|
72
88
|
render: import_prop_types.default.func,
|
|
73
89
|
theme: import_prop_types.default.any,
|
|
74
|
-
dataTestid: import_prop_types.default.string
|
|
90
|
+
dataTestid: import_prop_types.default.string,
|
|
91
|
+
innerRef: import_prop_types.default.any
|
|
75
92
|
};
|
|
76
93
|
const DSMobileTouchable = (0, import_ds_system.withTheme)(MobileTouchable);
|
|
77
94
|
//# sourceMappingURL=MobileTouchable.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileTouchable/MobileTouchable.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { styled, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledContainer = styled(Grid)`\n cursor: pointer;\n background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n`;\n\nconst MobileTouchable = ({\n children,\n onClick = noop,\n theme,\n dataTestid = 'mobile-touchable',\n render,\n ...gridProps\n}) => {\n const [touching, setTouching] = useState(false);\n const handleStart = useCallback(() => setTouching(true));\n const handleEnd = useCallback(() => setTouching(false));\n return (\n <StyledContainer\n {...gridProps}\n touching={touching}\n onClick={onClick}\n onTouchStart={handleStart}\n onTouchEnd={handleEnd}\n data-testid={dataTestid}\n >\n {children || render(gridProps)}\n </StyledContainer>\n );\n};\n\nMobileTouchable.propTypes = {\n onClick: PropTypes.func,\n children: PropTypes.any,\n render: PropTypes.func,\n theme: PropTypes.any,\n dataTestid: PropTypes.string,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { styled, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledContainer = styled(Grid)`\n cursor: pointer;\n background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n &:focus {\n position: relative;\n &:after {\n position: absolute;\n content: '';\n border: 2px solid brand-700;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n }\n`;\n\nconst MobileTouchable = ({\n children,\n onClick = noop,\n theme,\n dataTestid = 'mobile-touchable',\n render,\n innerRef,\n ...gridProps\n}) => {\n const [touching, setTouching] = useState(false);\n const handleStart = useCallback(() => setTouching(true));\n const handleEnd = useCallback(() => setTouching(false));\n console.log('AAA', innerRef);\n return (\n <StyledContainer\n {...gridProps}\n touching={touching}\n onClick={onClick}\n onTouchStart={handleStart}\n onTouchEnd={handleEnd}\n data-testid={dataTestid}\n innerRef={innerRef}\n tabIndex={0}\n >\n {children || render(gridProps)}\n </StyledContainer>\n );\n};\n\nMobileTouchable.propTypes = {\n onClick: PropTypes.func,\n children: PropTypes.any,\n render: PropTypes.func,\n theme: PropTypes.any,\n dataTestid: PropTypes.string,\n innerRef: PropTypes.any,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AArCJ,mBAA6C;AAC7C,oBAAqB;AACrB,wBAAsB;AACtB,uBAAkC;AAClC,qBAAqB;AAErB,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA,gBAEnB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAejH,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,kBAAc,0BAAY,MAAM,YAAY,IAAI,CAAC;AACvD,QAAM,gBAAY,0BAAY,MAAM,YAAY,KAAK,CAAC;AACtD,UAAQ,IAAI,OAAO,QAAQ;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET,sBAAY,OAAO,SAAS;AAAA;AAAA,EAC/B;AAEJ;AAEA,gBAAgB,YAAY;AAAA,EAC1B,SAAS,kBAAAA,QAAU;AAAA,EACnB,UAAU,kBAAAA,QAAU;AAAA,EACpB,QAAQ,kBAAAA,QAAU;AAAA,EAClB,OAAO,kBAAAA,QAAU;AAAA,EACjB,YAAY,kBAAAA,QAAU;AAAA,EACtB,UAAU,kBAAAA,QAAU;AACtB;AAEA,MAAM,wBAAoB,4BAAU,eAAe;",
|
|
6
6
|
"names": ["PropTypes"]
|
|
7
7
|
}
|
|
@@ -61,7 +61,8 @@ const DSMobileContextMenu = withTheme(
|
|
|
61
61
|
dataTestid = "mobile-context-menu",
|
|
62
62
|
buttonFooter = null,
|
|
63
63
|
onApply = noop,
|
|
64
|
-
selecteds: initSelecteds
|
|
64
|
+
selecteds: initSelecteds,
|
|
65
|
+
onKeyDown
|
|
65
66
|
}) => {
|
|
66
67
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
67
68
|
const trueSelected = useMemo(
|
|
@@ -95,35 +96,45 @@ const DSMobileContextMenu = withTheme(
|
|
|
95
96
|
}
|
|
96
97
|
}
|
|
97
98
|
),
|
|
98
|
-
/* @__PURE__ */ jsxs(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
99
|
+
/* @__PURE__ */ jsxs(
|
|
100
|
+
StyledContainer,
|
|
101
|
+
{
|
|
102
|
+
zIndex,
|
|
103
|
+
rows,
|
|
104
|
+
innerRef: containerRef,
|
|
105
|
+
"data-testid": "ds-mobile-context-menu",
|
|
106
|
+
onKeyDown,
|
|
107
|
+
children: [
|
|
108
|
+
/* @__PURE__ */ jsx(HeaderContainer, { justifyContent: "center", alignItems: "center", pl: "xs", pr: "xs", children: /* @__PURE__ */ jsx(StyledTitle, { alignItems: "center", gutter: "xxs", cols: Array(isArr(title) ? title.length : 1).fill("auto"), children: title }) }),
|
|
109
|
+
/* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "auto" }, children: /* @__PURE__ */ jsx(Group, { activeValue: trueSelected, multiple, onChange: handleChange, children: React2.Children.map(children, (child, ii) => {
|
|
110
|
+
const isGroup = child.type === (/* @__PURE__ */ jsx(ContextMenuGroup, {})).type || child.type?.name === ContextMenuGroup.componentType || child.type === ContextMenuGroup.type;
|
|
111
|
+
const { onClick = noop } = child.props;
|
|
112
|
+
const value = ii;
|
|
113
|
+
let isSelected;
|
|
114
|
+
if (singleSelect) isSelected = trueSelected === value;
|
|
115
|
+
else if (multiple) isSelected = trueSelected.includes(value);
|
|
116
|
+
return React2.cloneElement(child, {
|
|
117
|
+
value,
|
|
118
|
+
key: `cm.${ii}`,
|
|
119
|
+
isMulti: multiple,
|
|
120
|
+
singleSelect,
|
|
121
|
+
isSelected,
|
|
122
|
+
onClick: !isGroup ? (e) => onClick(e, child.props) : null,
|
|
123
|
+
selectedItems: isGroup ? trueSelected : null
|
|
124
|
+
});
|
|
125
|
+
}) }) }) }),
|
|
126
|
+
buttonFooter && /* @__PURE__ */ jsx(Grid, { pl: "xs", pr: "xs", alignItems: "center", children: React2.cloneElement(buttonFooter, {
|
|
127
|
+
...buttonFooter.props,
|
|
128
|
+
containerProps: {
|
|
129
|
+
"data-testid": `${dataTestid}--btn`
|
|
130
|
+
},
|
|
131
|
+
buttonType: "primary",
|
|
132
|
+
size: "l",
|
|
133
|
+
onClick: handleApply.bind(buttonFooter.props)
|
|
134
|
+
}) })
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
)
|
|
127
138
|
] });
|
|
128
139
|
}
|
|
129
140
|
);
|
|
@@ -157,7 +168,8 @@ const props = {
|
|
|
157
168
|
selecteds: PropTypes.oneOfType([
|
|
158
169
|
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
|
159
170
|
PropTypes.number
|
|
160
|
-
]).description("selected elements for multi and single select")
|
|
171
|
+
]).description("selected elements for multi and single select"),
|
|
172
|
+
onKeyDown: PropTypes.func.description("onKeyDown")
|
|
161
173
|
};
|
|
162
174
|
DSMobileContextMenu.displayName = "DSMobileContextMenu";
|
|
163
175
|
const DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenu.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { styled, truncate, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup.js';\n\nconst StyledContainer = styled(Grid)`\n background: ${(props) => props.theme.colors.neutral['000']};\n z-index: ${(props) => props.zIndex};\n width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n position: fixed;\n bottom: 0;\n left: ${(props) => props.theme.space.xxs};\n max-height: 90vh;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n box-shadow:\n 0 0px 24px 0 rgba(0, 0, 0, 0.5),\n 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n color: ${(props) => props.theme.colors.neutral['000']};\n ${truncate()}\n\n & > span {\n height: 20px;\n width: 20px;\n }\n\n & > span > svg,\n svg:not([fill]) {\n height: 20px;\n width: 20px;\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nconst HeaderContainer = styled(Grid)`\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n ({\n open = false,\n title = '',\n multiple = false,\n singleSelect = false,\n onChange = noop,\n onClickOutside = noop,\n children,\n theme,\n backdropZIndex = 1000,\n zIndex = 1001,\n dataTestid = 'mobile-context-menu',\n buttonFooter = null,\n onApply = noop,\n selecteds: initSelecteds,\n }) => {\n const [selectedItems, setSelectedItems] = useState([]);\n const trueSelected = useMemo(\n () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n [initSelecteds, selectedItems],\n );\n const containerRef = useRef(null);\n const handleChange = (value, childProps, event) => {\n onChange(value, childProps, event);\n if (initSelecteds === undefined) {\n if (multiple) setSelectedItems([...value]);\n else if (singleSelect) setSelectedItems(value);\n }\n };\n\n const handleApply = function (e) {\n if (this.onClick) this.onClick(e);\n onApply(e, selectedItems);\n };\n\n const rows = [theme.space.s, 1];\n if (buttonFooter) rows.push('56px');\n\n if (!open) return null;\n\n return (\n <>\n <DSBackdrop\n type=\"cover\"\n zIndex={backdropZIndex}\n onClick={(e) => {\n // PUI-4481 prevent click on elements below backdrop\n e.stopPropagation();\n onClickOutside(e);\n }}\n />\n <StyledContainer
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { styled, truncate, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { Group } from '@elliemae/ds-shared';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup.js';\n\nconst StyledContainer = styled(Grid)`\n background: ${(props) => props.theme.colors.neutral['000']};\n z-index: ${(props) => props.zIndex};\n width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n position: fixed;\n bottom: 0;\n left: ${(props) => props.theme.space.xxs};\n max-height: 90vh;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n box-shadow:\n 0 0px 24px 0 rgba(0, 0, 0, 0.5),\n 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n color: ${(props) => props.theme.colors.neutral['000']};\n ${truncate()}\n\n & > span {\n height: 20px;\n width: 20px;\n }\n\n & > span > svg,\n svg:not([fill]) {\n height: 20px;\n width: 20px;\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\nconst HeaderContainer = styled(Grid)`\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n ({\n open = false,\n title = '',\n multiple = false,\n singleSelect = false,\n onChange = noop,\n onClickOutside = noop,\n children,\n theme,\n backdropZIndex = 1000,\n zIndex = 1001,\n dataTestid = 'mobile-context-menu',\n buttonFooter = null,\n onApply = noop,\n selecteds: initSelecteds,\n onKeyDown,\n }) => {\n const [selectedItems, setSelectedItems] = useState([]);\n const trueSelected = useMemo(\n () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n [initSelecteds, selectedItems],\n );\n const containerRef = useRef(null);\n const handleChange = (value, childProps, event) => {\n onChange(value, childProps, event);\n if (initSelecteds === undefined) {\n if (multiple) setSelectedItems([...value]);\n else if (singleSelect) setSelectedItems(value);\n }\n };\n\n const handleApply = function (e) {\n if (this.onClick) this.onClick(e);\n onApply(e, selectedItems);\n };\n\n const rows = [theme.space.s, 1];\n if (buttonFooter) rows.push('56px');\n\n if (!open) return null;\n\n return (\n <>\n <DSBackdrop\n type=\"cover\"\n zIndex={backdropZIndex}\n onClick={(e) => {\n // PUI-4481 prevent click on elements below backdrop\n e.stopPropagation();\n onClickOutside(e);\n }}\n />\n <StyledContainer\n zIndex={zIndex}\n rows={rows}\n innerRef={containerRef}\n data-testid=\"ds-mobile-context-menu\"\n onKeyDown={onKeyDown}\n >\n <HeaderContainer justifyContent=\"center\" alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n <StyledTitle alignItems=\"center\" gutter=\"xxs\" cols={Array(isArr(title) ? title.length : 1).fill('auto')}>\n {title}\n </StyledTitle>\n </HeaderContainer>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>\n <Group activeValue={trueSelected} multiple={multiple} onChange={handleChange}>\n {React.Children.map(children, (child, ii) => {\n const isGroup =\n child.type === (<ContextMenuGroup />).type ||\n child.type?.name === ContextMenuGroup.componentType ||\n child.type === ContextMenuGroup.type;\n const { onClick = noop } = child.props;\n const value = ii;\n let isSelected;\n if (singleSelect) isSelected = trueSelected === value;\n else if (multiple) isSelected = trueSelected.includes(value);\n return React.cloneElement(child, {\n value,\n key: `cm.${ii}`,\n isMulti: multiple,\n singleSelect,\n isSelected,\n onClick: !isGroup ? (e) => onClick(e, child.props) : null,\n selectedItems: isGroup ? trueSelected : null,\n });\n })}\n </Group>\n </Grid>\n </Grid>\n {buttonFooter && (\n <Grid pl=\"xs\" pr=\"xs\" alignItems=\"center\">\n {React.cloneElement(buttonFooter, {\n ...buttonFooter.props,\n containerProps: {\n 'data-testid': `${dataTestid}--btn`,\n },\n buttonType: 'primary',\n size: 'l',\n onClick: handleApply.bind(buttonFooter.props),\n })}\n </Grid>\n )}\n </StyledContainer>\n </>\n );\n },\n);\n\nconst props = {\n /** toggle open the menu */\n open: PropTypes.bool.description('toggle open the menu'),\n /** context menu title */\n title: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),\n ]).description('context menu title'),\n /** change handler for selectable context menu */\n onChange: PropTypes.func.description('change handler for selectable context menu'),\n /** multi select */\n multiple: PropTypes.bool.description('multi select'),\n /** click outside callback handler */\n onClickOutside: PropTypes.func.description('click outside callback handler'),\n /** array of mobile context menu items */\n children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),\n /** z index for overlay div */\n backdropZIndex: PropTypes.number.description('z index for overlay div'),\n /** z index for menu container */\n zIndex: PropTypes.number.description('z index for menu container'),\n /** for e2e tests */\n dataTestid: PropTypes.string.description('for e2e tests'),\n /** bottom button */\n buttonFooter: PropTypes.element.description('bottom button'),\n /** callback */\n onApply: PropTypes.func.description('callback'),\n /** selected elements for multi and single select */\n selecteds: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n PropTypes.number,\n ]).description('selected elements for multi and single select'),\n onKeyDown: PropTypes.func.description('onKeyDown'),\n};\n\nDSMobileContextMenu.displayName = 'DSMobileContextMenu';\nconst DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);\n\nDSMobileContextMenuWithSchema.propTypes = props;\n\nexport { DSMobileContextMenu, DSMobileContextMenuWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkGjB,mBACE,KASA,YAVF;AA9FN,OAAOA,UAAS,UAAU,QAAQ,eAAe;AACjD,SAAS,YAAY;AACrB,SAAS,UAAU,iBAAiB;AACpC,SAAS,QAAQ,UAAU,iBAAiB;AAC5C,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,4BAA4B,wBAAwB;AAE7D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAACC,WAAUA,OAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,aAC/C,CAACA,WAAUA,OAAM,MAAM;AAAA,WACzB,CAACA,WAAU,eAAeA,OAAM,MAAM,MAAM,EAAE,GAAG;AAAA;AAAA;AAAA,UAGlD,CAACA,WAAUA,OAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1C,MAAM,cAAc,OAAO,IAAI;AAAA;AAAA,iBAEd,CAACA,WAAUA,OAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACnD,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAWF,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIxD,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,gBAGnB,CAACA,WAAUA,OAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAG1D,MAAM,QAAQ,CAAC,SAAS,MAAM,QAAQ,IAAI;AAE1C,MAAM,sBAAsB;AAAA,EAC1B,CAAC;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,IACf,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,aAAa;AAAA,IACb,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,EACF,MAAM;AACJ,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACrD,UAAM,eAAe;AAAA,MACnB,MAAO,kBAAkB,SAAY,gBAAgB,CAAC,GAAG,aAAa;AAAA,MACtE,CAAC,eAAe,aAAa;AAAA,IAC/B;AACA,UAAM,eAAe,OAAO,IAAI;AAChC,UAAM,eAAe,CAAC,OAAO,YAAY,UAAU;AACjD,eAAS,OAAO,YAAY,KAAK;AACjC,UAAI,kBAAkB,QAAW;AAC/B,YAAI,SAAU,kBAAiB,CAAC,GAAG,KAAK,CAAC;AAAA,iBAChC,aAAc,kBAAiB,KAAK;AAAA,MAC/C;AAAA,IACF;AAEA,UAAM,cAAc,SAAU,GAAG;AAC/B,UAAI,KAAK,QAAS,MAAK,QAAQ,CAAC;AAChC,cAAQ,GAAG,aAAa;AAAA,IAC1B;AAEA,UAAM,OAAO,CAAC,MAAM,MAAM,GAAG,CAAC;AAC9B,QAAI,aAAc,MAAK,KAAK,MAAM;AAElC,QAAI,CAAC,KAAM,QAAO;AAElB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAQ;AAAA,UACR,SAAS,CAAC,MAAM;AAEd,cAAE,gBAAgB;AAClB,2BAAe,CAAC;AAAA,UAClB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,eAAY;AAAA,UACZ;AAAA,UAEA;AAAA,gCAAC,mBAAgB,gBAAe,UAAS,YAAW,UAAS,IAAG,MAAK,IAAG,MACtE,8BAAC,eAAY,YAAW,UAAS,QAAO,OAAM,MAAM,MAAM,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,GACnG,iBACH,GACF;AAAA,YACA,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,OAAO,GAC9B,8BAAC,SAAM,aAAa,cAAc,UAAoB,UAAU,cAC7D,UAAAD,OAAM,SAAS,IAAI,UAAU,CAAC,OAAO,OAAO;AAC3C,oBAAM,UACJ,MAAM,UAAU,oBAAC,oBAAiB,GAAI,QACtC,MAAM,MAAM,SAAS,iBAAiB,iBACtC,MAAM,SAAS,iBAAiB;AAClC,oBAAM,EAAE,UAAU,KAAK,IAAI,MAAM;AACjC,oBAAM,QAAQ;AACd,kBAAI;AACJ,kBAAI,aAAc,cAAa,iBAAiB;AAAA,uBACvC,SAAU,cAAa,aAAa,SAAS,KAAK;AAC3D,qBAAOA,OAAM,aAAa,OAAO;AAAA,gBAC/B;AAAA,gBACA,KAAK,MAAM,EAAE;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,GAAG,MAAM,KAAK,IAAI;AAAA,gBACrD,eAAe,UAAU,eAAe;AAAA,cAC1C,CAAC;AAAA,YACH,CAAC,GACH,GACF,GACF;AAAA,YACC,gBACC,oBAAC,QAAK,IAAG,MAAK,IAAG,MAAK,YAAW,UAC9B,UAAAA,OAAM,aAAa,cAAc;AAAA,cAChC,GAAG,aAAa;AAAA,cAChB,gBAAgB;AAAA,gBACd,eAAe,GAAG,UAAU;AAAA,cAC9B;AAAA,cACA,YAAY;AAAA,cACZ,MAAM;AAAA,cACN,SAAS,YAAY,KAAK,aAAa,KAAK;AAAA,YAC9C,CAAC,GACH;AAAA;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,MAAM,UAAU,KAAK,YAAY,sBAAsB;AAAA;AAAA,EAEvD,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU;AAAA,IACV,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC;AAAA,EAC3E,CAAC,EAAE,YAAY,oBAAoB;AAAA;AAAA,EAEnC,UAAU,UAAU,KAAK,YAAY,4CAA4C;AAAA;AAAA,EAEjF,UAAU,UAAU,KAAK,YAAY,cAAc;AAAA;AAAA,EAEnD,gBAAgB,UAAU,KAAK,YAAY,gCAAgC;AAAA;AAAA,EAE3E,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,YAAY,oCAAoC;AAAA;AAAA,EAE/F,gBAAgB,UAAU,OAAO,YAAY,yBAAyB;AAAA;AAAA,EAEtE,QAAQ,UAAU,OAAO,YAAY,4BAA4B;AAAA;AAAA,EAEjE,YAAY,UAAU,OAAO,YAAY,eAAe;AAAA;AAAA,EAExD,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA;AAAA,EAE3D,SAAS,UAAU,KAAK,YAAY,UAAU;AAAA;AAAA,EAE9C,WAAW,UAAU,UAAU;AAAA,IAC7B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,+CAA+C;AAAA,EAC9D,WAAW,UAAU,KAAK,YAAY,WAAW;AACnD;AAEA,oBAAoB,cAAc;AAClC,MAAM,gCAAgC,SAAS,mBAAmB;AAElE,8BAA8B,YAAY;",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -52,7 +52,8 @@ const DSMobileContextMenuItem = ({
|
|
|
52
52
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
53
53
|
onClick = () => {
|
|
54
54
|
},
|
|
55
|
-
value
|
|
55
|
+
value,
|
|
56
|
+
innerRef
|
|
56
57
|
}) => /* @__PURE__ */ jsx(
|
|
57
58
|
GroupItem,
|
|
58
59
|
{
|
|
@@ -65,6 +66,7 @@ const DSMobileContextMenuItem = ({
|
|
|
65
66
|
let leftAddon = leftProp || null;
|
|
66
67
|
if (isMulti) leftAddon = /* @__PURE__ */ jsx(DSCheckbox, { checked: isSelected, "data-testid": "leftAddon-checkbox" });
|
|
67
68
|
if (singleSelect) leftAddon = /* @__PURE__ */ jsx(CheckMark, { "data-testid": "leftAddon-checkmark" });
|
|
69
|
+
console.log("SSS", innerRef);
|
|
68
70
|
const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
|
|
69
71
|
if (rightAddon) cols.push("40px");
|
|
70
72
|
return /* @__PURE__ */ jsxs(
|
|
@@ -76,6 +78,7 @@ const DSMobileContextMenuItem = ({
|
|
|
76
78
|
onClick(e);
|
|
77
79
|
},
|
|
78
80
|
cols,
|
|
81
|
+
innerRef,
|
|
79
82
|
children: [
|
|
80
83
|
(singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ jsx(PropWrap, { "data-testid": "left-addon", isMulti, alignItems: "center", justifyContent: "center", pl: "16px", children: showLeftAddon && leftAddon }),
|
|
81
84
|
/* @__PURE__ */ jsxs(Grid, { height: "44px", pr: "xs", pl: !leftAddon && isGroup ? "24px" : "xs", children: [
|
|
@@ -107,7 +110,9 @@ const props = {
|
|
|
107
110
|
/** value for select */
|
|
108
111
|
value: PropTypes.number.description("value for select"),
|
|
109
112
|
/** selected value */
|
|
110
|
-
isSelected: PropTypes.bool.description("selected value")
|
|
113
|
+
isSelected: PropTypes.bool.description("selected value"),
|
|
114
|
+
/** */
|
|
115
|
+
innerRef: PropTypes.any.description("Ref for the item")
|
|
111
116
|
};
|
|
112
117
|
DSMobileContextMenuItem.displayName = "DSMobileContextMenuItem";
|
|
113
118
|
const DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport type { RefCallback } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, truncate } from '@elliemae/ds-system';\nimport { GroupItem } from '@elliemae/ds-shared';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable/index.js';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n ${(props) => {\n if (!props.isMulti) {\n return `\n & > span {\n height: 18px;\n width: 18px;\n }\n\n & > span > svg {\n height: 18px;\n width: 18px;\n }\n `;\n }\n return '';\n }}\n`;\n\nconst Title = styled.span`\n font-size: 16px;\n color: ${(props) => props.theme.colors.brand['600']};\n ${truncate()}\n`;\n\nconst Label = styled.span`\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n label: string;\n title: string;\n leftProp: JSX.Element;\n isGroup: boolean;\n isMulti: boolean;\n isSelected: boolean;\n singleSelect: boolean;\n onClick: (e: any) => void;\n value: string;\n innerRef: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n}\nconst DSMobileContextMenuItem = ({\n label,\n title,\n leftProp,\n rightAddon,\n isGroup,\n isMulti,\n singleSelect,\n isSelected,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick = () => {},\n value,\n innerRef,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n <GroupItem\n render={(context) => {\n const { activeValue } = context;\n let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n let showLeftAddon = isSelected;\n if (isMulti || !singleSelect) showLeftAddon = true;\n\n let leftAddon = leftProp || null;\n if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n console.log('SSS', innerRef);\n const cols =\n (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto'];\n if (rightAddon) cols.push('40px');\n return (\n <Wrap\n data-testid=\"ds-contextmenu-item\"\n onClick={(e) => {\n if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n onClick(e);\n }}\n cols={cols}\n innerRef={innerRef}\n >\n {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n {showLeftAddon && leftAddon}\n </PropWrap>\n )}\n <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n {label && (\n <Grid alignItems=\"center\">\n <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n </Grid>\n )}\n <Grid alignItems={!label ? 'center' : undefined}>\n <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n </Grid>\n </Grid>\n {rightAddon ? (\n <PropWrap data-testid=\"right-addon\" alignItems=\"center\" justifyContent=\"center\">\n {rightAddon}\n </PropWrap>\n ) : null}\n </Wrap>\n );\n }}\n />\n);\n\nconst props = {\n /** label */\n label: PropTypes.string.description('label'),\n /** menu item title */\n title: PropTypes.string.isRequired.description('menu item title'),\n /** */\n leftProp: PropTypes.element.description(''),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** */\n singleSelect: PropTypes.bool.description(''),\n /** */\n isGroup: PropTypes.bool.description(''),\n /** on click handler */\n onClick: PropTypes.func.description('on click handler'),\n /** value for select */\n value: PropTypes.number.description('value for select'),\n /** selected value */\n isSelected: PropTypes.bool.description('selected value'),\n /** */\n innerRef: PropTypes.any.description('Ref for the item'),\n};\n\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
|
@@ -8,6 +8,18 @@ import { Grid } from "@elliemae/ds-grid";
|
|
|
8
8
|
const StyledContainer = styled(Grid)`
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
background: ${(props) => props.touching ? props.theme.colors.brand["100"] : props.theme.colors.neutral["000"]};
|
|
11
|
+
&:focus {
|
|
12
|
+
position: relative;
|
|
13
|
+
&:after {
|
|
14
|
+
position: absolute;
|
|
15
|
+
content: '';
|
|
16
|
+
border: 2px solid brand-700;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
11
23
|
`;
|
|
12
24
|
const MobileTouchable = ({
|
|
13
25
|
children,
|
|
@@ -15,11 +27,13 @@ const MobileTouchable = ({
|
|
|
15
27
|
theme,
|
|
16
28
|
dataTestid = "mobile-touchable",
|
|
17
29
|
render,
|
|
30
|
+
innerRef,
|
|
18
31
|
...gridProps
|
|
19
32
|
}) => {
|
|
20
33
|
const [touching, setTouching] = useState(false);
|
|
21
34
|
const handleStart = useCallback(() => setTouching(true));
|
|
22
35
|
const handleEnd = useCallback(() => setTouching(false));
|
|
36
|
+
console.log("AAA", innerRef);
|
|
23
37
|
return /* @__PURE__ */ jsx(
|
|
24
38
|
StyledContainer,
|
|
25
39
|
{
|
|
@@ -29,6 +43,8 @@ const MobileTouchable = ({
|
|
|
29
43
|
onTouchStart: handleStart,
|
|
30
44
|
onTouchEnd: handleEnd,
|
|
31
45
|
"data-testid": dataTestid,
|
|
46
|
+
innerRef,
|
|
47
|
+
tabIndex: 0,
|
|
32
48
|
children: children || render(gridProps)
|
|
33
49
|
}
|
|
34
50
|
);
|
|
@@ -38,7 +54,8 @@ MobileTouchable.propTypes = {
|
|
|
38
54
|
children: PropTypes.any,
|
|
39
55
|
render: PropTypes.func,
|
|
40
56
|
theme: PropTypes.any,
|
|
41
|
-
dataTestid: PropTypes.string
|
|
57
|
+
dataTestid: PropTypes.string,
|
|
58
|
+
innerRef: PropTypes.any
|
|
42
59
|
};
|
|
43
60
|
const DSMobileTouchable = withTheme(MobileTouchable);
|
|
44
61
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileTouchable/MobileTouchable.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { styled, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledContainer = styled(Grid)`\n cursor: pointer;\n background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n`;\n\nconst MobileTouchable = ({\n children,\n onClick = noop,\n theme,\n dataTestid = 'mobile-touchable',\n render,\n ...gridProps\n}) => {\n const [touching, setTouching] = useState(false);\n const handleStart = useCallback(() => setTouching(true));\n const handleEnd = useCallback(() => setTouching(false));\n return (\n <StyledContainer\n {...gridProps}\n touching={touching}\n onClick={onClick}\n onTouchStart={handleStart}\n onTouchEnd={handleEnd}\n data-testid={dataTestid}\n >\n {children || render(gridProps)}\n </StyledContainer>\n );\n};\n\nMobileTouchable.propTypes = {\n onClick: PropTypes.func,\n children: PropTypes.any,\n render: PropTypes.func,\n theme: PropTypes.any,\n dataTestid: PropTypes.string,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { styled, withTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledContainer = styled(Grid)`\n cursor: pointer;\n background: ${(props) => (props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000'])};\n &:focus {\n position: relative;\n &:after {\n position: absolute;\n content: '';\n border: 2px solid brand-700;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n }\n`;\n\nconst MobileTouchable = ({\n children,\n onClick = noop,\n theme,\n dataTestid = 'mobile-touchable',\n render,\n innerRef,\n ...gridProps\n}) => {\n const [touching, setTouching] = useState(false);\n const handleStart = useCallback(() => setTouching(true));\n const handleEnd = useCallback(() => setTouching(false));\n console.log('AAA', innerRef);\n return (\n <StyledContainer\n {...gridProps}\n touching={touching}\n onClick={onClick}\n onTouchStart={handleStart}\n onTouchEnd={handleEnd}\n data-testid={dataTestid}\n innerRef={innerRef}\n tabIndex={0}\n >\n {children || render(gridProps)}\n </StyledContainer>\n );\n};\n\nMobileTouchable.propTypes = {\n onClick: PropTypes.func,\n children: PropTypes.any,\n render: PropTypes.func,\n theme: PropTypes.any,\n dataTestid: PropTypes.string,\n innerRef: PropTypes.any,\n};\n\nconst DSMobileTouchable = withTheme(MobileTouchable);\n\nexport { DSMobileTouchable };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqCnB;AArCJ,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,YAAY;AACrB,OAAO,eAAe;AACtB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA,gBAEnB,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,KAAK,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAejH,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,YAAY,MAAM,YAAY,IAAI,CAAC;AACvD,QAAM,YAAY,YAAY,MAAM,YAAY,KAAK,CAAC;AACtD,UAAQ,IAAI,OAAO,QAAQ;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET,sBAAY,OAAO,SAAS;AAAA;AAAA,EAC/B;AAEJ;AAEA,gBAAgB,YAAY;AAAA,EAC1B,SAAS,UAAU;AAAA,EACnB,UAAU,UAAU;AAAA,EACpB,QAAQ,UAAU;AAAA,EAClB,OAAO,UAAU;AAAA,EACjB,YAAY,UAAU;AAAA,EACtB,UAAU,UAAU;AACtB;AAEA,MAAM,oBAAoB,UAAU,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { RefCallback } from 'react';
|
|
1
3
|
interface DSMobileContextMenuItemPropsT {
|
|
2
4
|
label: string;
|
|
3
5
|
title: string;
|
|
@@ -8,9 +10,10 @@ interface DSMobileContextMenuItemPropsT {
|
|
|
8
10
|
singleSelect: boolean;
|
|
9
11
|
onClick: (e: any) => void;
|
|
10
12
|
value: string;
|
|
13
|
+
innerRef: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;
|
|
11
14
|
}
|
|
12
15
|
declare const DSMobileContextMenuItem: {
|
|
13
|
-
({ label, title, leftProp, rightAddon, isGroup, isMulti, singleSelect, isSelected, onClick, value, }: DSMobileContextMenuItemPropsT): JSX.Element;
|
|
16
|
+
({ label, title, leftProp, rightAddon, isGroup, isMulti, singleSelect, isSelected, onClick, value, innerRef, }: DSMobileContextMenuItemPropsT): JSX.Element;
|
|
14
17
|
displayName: string;
|
|
15
18
|
};
|
|
16
19
|
declare const DSMobileContextMenuItemWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSMobileContextMenuItemPropsT>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "3.40.0-rc.
|
|
3
|
+
"version": "3.40.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -44,29 +44,29 @@
|
|
|
44
44
|
"prop-types": "~15.8.1",
|
|
45
45
|
"react-window": "~1.8.8",
|
|
46
46
|
"react-window-infinite-loader": "~1.0.8",
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-truncated-expandable-text": "3.40.0-rc.
|
|
47
|
+
"@elliemae/ds-accordion": "3.40.0-rc.2",
|
|
48
|
+
"@elliemae/ds-backdrop": "3.40.0-rc.2",
|
|
49
|
+
"@elliemae/ds-button-v2": "3.40.0-rc.2",
|
|
50
|
+
"@elliemae/ds-circular-progress-indicator": "3.40.0-rc.2",
|
|
51
|
+
"@elliemae/ds-form": "3.40.0-rc.2",
|
|
52
|
+
"@elliemae/ds-form-checkbox": "3.40.0-rc.2",
|
|
53
|
+
"@elliemae/ds-button": "3.40.0-rc.2",
|
|
54
|
+
"@elliemae/ds-grid": "3.40.0-rc.2",
|
|
55
|
+
"@elliemae/ds-icon": "3.40.0-rc.2",
|
|
56
|
+
"@elliemae/ds-icons": "3.40.0-rc.2",
|
|
57
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.40.0-rc.2",
|
|
58
|
+
"@elliemae/ds-props-helpers": "3.40.0-rc.2",
|
|
59
|
+
"@elliemae/ds-system": "3.40.0-rc.2",
|
|
60
|
+
"@elliemae/ds-tabs": "3.40.0-rc.2",
|
|
61
|
+
"@elliemae/ds-shared": "3.40.0-rc.2",
|
|
62
|
+
"@elliemae/ds-truncated-expandable-text": "3.40.0-rc.2"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
66
66
|
"@elliemae/pui-theme": "~2.9.3",
|
|
67
67
|
"styled-components": "~5.3.9",
|
|
68
68
|
"styled-system": "~5.1.5",
|
|
69
|
-
"@elliemae/ds-monorepo-devops": "3.40.0-rc.
|
|
69
|
+
"@elliemae/ds-monorepo-devops": "3.40.0-rc.2"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@elliemae/pui-theme": "~2.9.3",
|