@elliemae/ds-mobile 3.12.0-rc.2 → 3.12.0-rc.4
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/Accordion/DSMobileAccordion.js +2 -9
- package/dist/cjs/Accordion/DSMobileAccordion.js.map +1 -1
- package/dist/cjs/CategoryBox/CategoryBox.js +10 -17
- package/dist/cjs/CategoryBox/CategoryBox.js.map +1 -1
- package/dist/cjs/CollectionBox/CollectionBox.js +8 -30
- package/dist/cjs/CollectionBox/CollectionBox.js.map +1 -1
- package/dist/cjs/FullPageContainer/FullPageContainer.js +1 -6
- package/dist/cjs/FullPageContainer/FullPageContainer.js.map +1 -1
- package/dist/cjs/FullPageContainer/FullPageContainerScroll.js +1 -6
- package/dist/cjs/FullPageContainer/FullPageContainerScroll.js.map +1 -1
- package/dist/cjs/GlobalHeader/MobileGlobalHeader.js +42 -61
- package/dist/cjs/GlobalHeader/MobileGlobalHeader.js.map +1 -1
- package/dist/cjs/GroupBox/GroupBox.js +10 -17
- package/dist/cjs/GroupBox/GroupBox.js.map +1 -1
- package/dist/cjs/Icons/EM_logo.js +35 -34
- package/dist/cjs/Icons/EM_logo.js.map +1 -1
- package/dist/cjs/InfiniteLoader/Infiniteloader.js +7 -18
- package/dist/cjs/InfiniteLoader/Infiniteloader.js.map +1 -1
- package/dist/cjs/InfiniteLoader/Loader.js +1 -7
- package/dist/cjs/InfiniteLoader/Loader.js.map +1 -1
- package/dist/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js +25 -19
- package/dist/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js.map +1 -1
- package/dist/cjs/LoadingPage/Page.js +6 -16
- package/dist/cjs/LoadingPage/Page.js.map +1 -1
- package/dist/cjs/MobileActionToolbar/MobileActionToolbar.js +1 -6
- package/dist/cjs/MobileActionToolbar/MobileActionToolbar.js.map +1 -1
- package/dist/cjs/MobileActionToolbar/MobileActionToolbarItem.js +1 -6
- package/dist/cjs/MobileActionToolbar/MobileActionToolbarItem.js.map +1 -1
- package/dist/cjs/MobileBanner/DSMobileBannerDefinitions.js +32 -0
- package/dist/cjs/MobileBanner/DSMobileBannerDefinitions.js.map +7 -0
- package/dist/cjs/MobileBanner/MobileBanner.js +30 -51
- package/dist/cjs/MobileBanner/MobileBanner.js.map +2 -2
- package/dist/cjs/MobileBanner/config/useMobileBanner.js +2 -1
- package/dist/cjs/MobileBanner/config/useMobileBanner.js.map +2 -2
- package/dist/cjs/MobileBanner/utils/icons.js +4 -20
- package/dist/cjs/MobileBanner/utils/icons.js.map +1 -1
- package/dist/cjs/MobileCard/ActionAddon.js +1 -7
- package/dist/cjs/MobileCard/ActionAddon.js.map +1 -1
- package/dist/cjs/MobileCard/Card.js +66 -98
- package/dist/cjs/MobileCard/Card.js.map +1 -1
- package/dist/cjs/MobileCard/CardIcons.js +1 -9
- package/dist/cjs/MobileCard/CardIcons.js.map +1 -1
- package/dist/cjs/MobileCard/ExpandChevron.js +1 -9
- package/dist/cjs/MobileCard/ExpandChevron.js.map +1 -1
- package/dist/cjs/MobileCard/ExpandableRegion.js +10 -10
- package/dist/cjs/MobileCard/ExpandableRegion.js.map +1 -1
- package/dist/cjs/MobileCard/Group.js +15 -31
- package/dist/cjs/MobileCard/Group.js.map +1 -1
- package/dist/cjs/MobileContextMenu/MobileContextMenu.js +38 -70
- package/dist/cjs/MobileContextMenu/MobileContextMenu.js.map +1 -1
- package/dist/cjs/MobileContextMenu/MobileContextMenuGroup.js +21 -29
- package/dist/cjs/MobileContextMenu/MobileContextMenuGroup.js.map +1 -1
- package/dist/cjs/MobileContextMenu/MobileContextMenuItem.js +41 -73
- package/dist/cjs/MobileContextMenu/MobileContextMenuItem.js.map +1 -1
- package/dist/cjs/MobileDatePicker/Input.js +1 -4
- package/dist/cjs/MobileDatePicker/Input.js.map +1 -1
- package/dist/cjs/MobileDatePicker/MobileDatePicker.js +42 -33
- package/dist/cjs/MobileDatePicker/MobileDatePicker.js.map +1 -1
- package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js +5 -19
- package/dist/cjs/MobileDropdownMenu/MobileDropdownInput.js.map +1 -1
- package/dist/cjs/MobileDropdownMenu/MobileDropdownMenu.js +29 -21
- package/dist/cjs/MobileDropdownMenu/MobileDropdownMenu.js.map +1 -1
- package/dist/cjs/MobileEmtpyState/MobileEmptyState.js +4 -11
- package/dist/cjs/MobileEmtpyState/MobileEmptyState.js.map +1 -1
- package/dist/cjs/MobileFilterbar/Filterbar.js +4 -15
- package/dist/cjs/MobileFilterbar/Filterbar.js.map +1 -1
- package/dist/cjs/MobileFilterbar/FilterbarItem.js +1 -9
- package/dist/cjs/MobileFilterbar/FilterbarItem.js.map +1 -1
- package/dist/cjs/MobileFilterbar/FilterbarSort.js +4 -17
- package/dist/cjs/MobileFilterbar/FilterbarSort.js.map +1 -1
- package/dist/cjs/MobileFooter/Action.js +15 -22
- package/dist/cjs/MobileFooter/Action.js.map +1 -1
- package/dist/cjs/MobileFooter/Footer.js +6 -7
- package/dist/cjs/MobileFooter/Footer.js.map +1 -1
- package/dist/cjs/MobileFooter/Text.js +1 -3
- package/dist/cjs/MobileFooter/Text.js.map +1 -1
- package/dist/cjs/MobileListItem/MobileListItem.js +17 -26
- package/dist/cjs/MobileListItem/MobileListItem.js.map +1 -1
- package/dist/cjs/MobileListItem/MobileListMultipleItem.js +14 -17
- package/dist/cjs/MobileListItem/MobileListMultipleItem.js.map +1 -1
- package/dist/cjs/MobileListItem/MobileListSeparator.js +4 -23
- package/dist/cjs/MobileListItem/MobileListSeparator.js.map +1 -1
- package/dist/cjs/MobileListItem/MobileListSingleItem.js +16 -23
- package/dist/cjs/MobileListItem/MobileListSingleItem.js.map +1 -1
- package/dist/cjs/MobilePageHeader/MobilePageHeader.js +82 -130
- package/dist/cjs/MobilePageHeader/MobilePageHeader.js.map +1 -1
- package/dist/cjs/MobileSelectList/MobileSelectList.js +45 -64
- package/dist/cjs/MobileSelectList/MobileSelectList.js.map +1 -1
- package/dist/cjs/MobileSelectList/styled.js +3 -13
- package/dist/cjs/MobileSelectList/styled.js.map +1 -1
- package/dist/cjs/MobileSeparator/Separator.js +1 -3
- package/dist/cjs/MobileSeparator/Separator.js.map +1 -1
- package/dist/cjs/MobileTimePicker/Input.js +1 -4
- package/dist/cjs/MobileTimePicker/Input.js.map +1 -1
- package/dist/cjs/MobileTimePicker/MobileTimePicker.js +41 -32
- package/dist/cjs/MobileTimePicker/MobileTimePicker.js.map +1 -1
- package/dist/cjs/MobileTouchable/MobileTouchable.js +12 -9
- package/dist/cjs/MobileTouchable/MobileTouchable.js.map +1 -1
- package/dist/cjs/Modal/Modal.js +70 -72
- package/dist/cjs/Modal/Modal.js.map +1 -1
- package/dist/cjs/PageFilter/PageFilter.js +12 -38
- package/dist/cjs/PageFilter/PageFilter.js.map +1 -1
- package/dist/cjs/PageForm/PageForm.js +5 -19
- package/dist/cjs/PageForm/PageForm.js.map +1 -1
- package/dist/cjs/PageList/PageList.js +7 -20
- package/dist/cjs/PageList/PageList.js.map +1 -1
- package/dist/cjs/PageSearch/PageSearch.js +5 -25
- package/dist/cjs/PageSearch/PageSearch.js.map +1 -1
- package/dist/cjs/PageSummary/PageSummary.js +8 -26
- package/dist/cjs/PageSummary/PageSummary.js.map +1 -1
- package/dist/cjs/SideNav/SideNav.js +27 -84
- package/dist/cjs/SideNav/SideNav.js.map +1 -1
- package/dist/cjs/SwipeToRefresh/ProgressIndicator.js +17 -33
- package/dist/cjs/SwipeToRefresh/ProgressIndicator.js.map +1 -1
- package/dist/cjs/SwipeToRefresh/ProgressLoader.js +87 -156
- package/dist/cjs/SwipeToRefresh/ProgressLoader.js.map +1 -1
- package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js +24 -22
- package/dist/cjs/SwipeToRefresh/SwipeToRefresh.js.map +1 -1
- package/dist/cjs/Tabs/index.js +2 -9
- package/dist/cjs/Tabs/index.js.map +1 -1
- package/dist/esm/Accordion/DSMobileAccordion.js +2 -9
- package/dist/esm/Accordion/DSMobileAccordion.js.map +1 -1
- package/dist/esm/CategoryBox/CategoryBox.js +10 -17
- package/dist/esm/CategoryBox/CategoryBox.js.map +1 -1
- package/dist/esm/CollectionBox/CollectionBox.js +8 -30
- package/dist/esm/CollectionBox/CollectionBox.js.map +1 -1
- package/dist/esm/FullPageContainer/FullPageContainer.js +1 -6
- package/dist/esm/FullPageContainer/FullPageContainer.js.map +1 -1
- package/dist/esm/FullPageContainer/FullPageContainerScroll.js +1 -6
- package/dist/esm/FullPageContainer/FullPageContainerScroll.js.map +1 -1
- package/dist/esm/GlobalHeader/MobileGlobalHeader.js +42 -61
- package/dist/esm/GlobalHeader/MobileGlobalHeader.js.map +1 -1
- package/dist/esm/GroupBox/GroupBox.js +10 -17
- package/dist/esm/GroupBox/GroupBox.js.map +1 -1
- package/dist/esm/Icons/EM_logo.js +35 -34
- package/dist/esm/Icons/EM_logo.js.map +1 -1
- package/dist/esm/InfiniteLoader/Infiniteloader.js +7 -18
- package/dist/esm/InfiniteLoader/Infiniteloader.js.map +1 -1
- package/dist/esm/InfiniteLoader/Loader.js +1 -7
- package/dist/esm/InfiniteLoader/Loader.js.map +1 -1
- package/dist/esm/InfiniteLoader/VirtualizedInfiniteLoader.js +25 -19
- package/dist/esm/InfiniteLoader/VirtualizedInfiniteLoader.js.map +1 -1
- package/dist/esm/LoadingPage/Page.js +6 -16
- package/dist/esm/LoadingPage/Page.js.map +1 -1
- package/dist/esm/MobileActionToolbar/MobileActionToolbar.js +1 -6
- package/dist/esm/MobileActionToolbar/MobileActionToolbar.js.map +1 -1
- package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js +1 -6
- package/dist/esm/MobileActionToolbar/MobileActionToolbarItem.js.map +1 -1
- package/dist/esm/MobileBanner/DSMobileBannerDefinitions.js +6 -0
- package/dist/esm/MobileBanner/DSMobileBannerDefinitions.js.map +7 -0
- package/dist/esm/MobileBanner/MobileBanner.js +30 -51
- package/dist/esm/MobileBanner/MobileBanner.js.map +2 -2
- package/dist/esm/MobileBanner/config/useMobileBanner.js +2 -1
- package/dist/esm/MobileBanner/config/useMobileBanner.js.map +2 -2
- package/dist/esm/MobileBanner/utils/icons.js +4 -20
- package/dist/esm/MobileBanner/utils/icons.js.map +1 -1
- package/dist/esm/MobileCard/ActionAddon.js +1 -7
- package/dist/esm/MobileCard/ActionAddon.js.map +1 -1
- package/dist/esm/MobileCard/Card.js +66 -98
- package/dist/esm/MobileCard/Card.js.map +1 -1
- package/dist/esm/MobileCard/CardIcons.js +1 -9
- package/dist/esm/MobileCard/CardIcons.js.map +1 -1
- package/dist/esm/MobileCard/ExpandChevron.js +1 -9
- package/dist/esm/MobileCard/ExpandChevron.js.map +1 -1
- package/dist/esm/MobileCard/ExpandableRegion.js +10 -10
- package/dist/esm/MobileCard/ExpandableRegion.js.map +1 -1
- package/dist/esm/MobileCard/Group.js +15 -31
- package/dist/esm/MobileCard/Group.js.map +1 -1
- package/dist/esm/MobileContextMenu/MobileContextMenu.js +38 -70
- package/dist/esm/MobileContextMenu/MobileContextMenu.js.map +1 -1
- package/dist/esm/MobileContextMenu/MobileContextMenuGroup.js +21 -29
- package/dist/esm/MobileContextMenu/MobileContextMenuGroup.js.map +1 -1
- package/dist/esm/MobileContextMenu/MobileContextMenuItem.js +41 -73
- package/dist/esm/MobileContextMenu/MobileContextMenuItem.js.map +1 -1
- package/dist/esm/MobileDatePicker/Input.js +1 -4
- package/dist/esm/MobileDatePicker/Input.js.map +1 -1
- package/dist/esm/MobileDatePicker/MobileDatePicker.js +42 -33
- package/dist/esm/MobileDatePicker/MobileDatePicker.js.map +1 -1
- package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js +5 -19
- package/dist/esm/MobileDropdownMenu/MobileDropdownInput.js.map +1 -1
- package/dist/esm/MobileDropdownMenu/MobileDropdownMenu.js +29 -21
- package/dist/esm/MobileDropdownMenu/MobileDropdownMenu.js.map +1 -1
- package/dist/esm/MobileEmtpyState/MobileEmptyState.js +4 -11
- package/dist/esm/MobileEmtpyState/MobileEmptyState.js.map +1 -1
- package/dist/esm/MobileFilterbar/Filterbar.js +4 -15
- package/dist/esm/MobileFilterbar/Filterbar.js.map +1 -1
- package/dist/esm/MobileFilterbar/FilterbarItem.js +1 -9
- package/dist/esm/MobileFilterbar/FilterbarItem.js.map +1 -1
- package/dist/esm/MobileFilterbar/FilterbarSort.js +4 -17
- package/dist/esm/MobileFilterbar/FilterbarSort.js.map +1 -1
- package/dist/esm/MobileFooter/Action.js +15 -22
- package/dist/esm/MobileFooter/Action.js.map +1 -1
- package/dist/esm/MobileFooter/Footer.js +6 -7
- package/dist/esm/MobileFooter/Footer.js.map +1 -1
- package/dist/esm/MobileFooter/Text.js +1 -3
- package/dist/esm/MobileFooter/Text.js.map +1 -1
- package/dist/esm/MobileListItem/MobileListItem.js +17 -26
- package/dist/esm/MobileListItem/MobileListItem.js.map +1 -1
- package/dist/esm/MobileListItem/MobileListMultipleItem.js +14 -17
- package/dist/esm/MobileListItem/MobileListMultipleItem.js.map +1 -1
- package/dist/esm/MobileListItem/MobileListSeparator.js +4 -23
- package/dist/esm/MobileListItem/MobileListSeparator.js.map +1 -1
- package/dist/esm/MobileListItem/MobileListSingleItem.js +16 -23
- package/dist/esm/MobileListItem/MobileListSingleItem.js.map +1 -1
- package/dist/esm/MobilePageHeader/MobilePageHeader.js +82 -130
- package/dist/esm/MobilePageHeader/MobilePageHeader.js.map +1 -1
- package/dist/esm/MobileSelectList/MobileSelectList.js +45 -64
- package/dist/esm/MobileSelectList/MobileSelectList.js.map +1 -1
- package/dist/esm/MobileSelectList/styled.js +3 -13
- package/dist/esm/MobileSelectList/styled.js.map +1 -1
- package/dist/esm/MobileSeparator/Separator.js +1 -3
- package/dist/esm/MobileSeparator/Separator.js.map +1 -1
- package/dist/esm/MobileTimePicker/Input.js +1 -4
- package/dist/esm/MobileTimePicker/Input.js.map +1 -1
- package/dist/esm/MobileTimePicker/MobileTimePicker.js +41 -32
- package/dist/esm/MobileTimePicker/MobileTimePicker.js.map +1 -1
- package/dist/esm/MobileTouchable/MobileTouchable.js +12 -9
- package/dist/esm/MobileTouchable/MobileTouchable.js.map +1 -1
- package/dist/esm/Modal/Modal.js +70 -72
- package/dist/esm/Modal/Modal.js.map +1 -1
- package/dist/esm/PageFilter/PageFilter.js +12 -38
- package/dist/esm/PageFilter/PageFilter.js.map +1 -1
- package/dist/esm/PageForm/PageForm.js +5 -19
- package/dist/esm/PageForm/PageForm.js.map +1 -1
- package/dist/esm/PageList/PageList.js +7 -20
- package/dist/esm/PageList/PageList.js.map +1 -1
- package/dist/esm/PageSearch/PageSearch.js +5 -25
- package/dist/esm/PageSearch/PageSearch.js.map +1 -1
- package/dist/esm/PageSummary/PageSummary.js +8 -26
- package/dist/esm/PageSummary/PageSummary.js.map +1 -1
- package/dist/esm/SideNav/SideNav.js +27 -84
- package/dist/esm/SideNav/SideNav.js.map +1 -1
- package/dist/esm/SwipeToRefresh/ProgressIndicator.js +17 -33
- package/dist/esm/SwipeToRefresh/ProgressIndicator.js.map +1 -1
- package/dist/esm/SwipeToRefresh/ProgressLoader.js +87 -156
- package/dist/esm/SwipeToRefresh/ProgressLoader.js.map +1 -1
- package/dist/esm/SwipeToRefresh/SwipeToRefresh.js +24 -22
- package/dist/esm/SwipeToRefresh/SwipeToRefresh.js.map +1 -1
- package/dist/esm/Tabs/index.js +2 -9
- package/dist/esm/Tabs/index.js.map +1 -1
- package/package.json +16 -16
|
@@ -15,35 +15,27 @@ const Title = styled.div`
|
|
|
15
15
|
color: ${(props2) => props2.theme.colors.neutral["700"]};
|
|
16
16
|
font-weight: ${(props2) => props2.theme.fontWeights.semibold};
|
|
17
17
|
`;
|
|
18
|
-
const DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => /* @__PURE__ */ jsxs(Grid, {
|
|
19
|
-
children:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
singleSelect,
|
|
40
|
-
isSelected,
|
|
41
|
-
onClick: (e) => onClick(e, { value, ...child.props })
|
|
42
|
-
});
|
|
43
|
-
})
|
|
44
|
-
})
|
|
45
|
-
]
|
|
46
|
-
});
|
|
18
|
+
const DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => /* @__PURE__ */ jsxs(Grid, { children: [
|
|
19
|
+
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Title, { children: title }) }),
|
|
20
|
+
/* @__PURE__ */ jsx(Grid, { children: React2.Children.map(children, (child, index) => {
|
|
21
|
+
const { onClick = noop } = child.props;
|
|
22
|
+
const value = `${groupValue}:${index}`;
|
|
23
|
+
let isSelected;
|
|
24
|
+
if (singleSelect)
|
|
25
|
+
isSelected = selectedItems === value;
|
|
26
|
+
else if (isMulti)
|
|
27
|
+
isSelected = selectedItems.includes(value);
|
|
28
|
+
return React2.cloneElement(child, {
|
|
29
|
+
value,
|
|
30
|
+
key: "group.".concat(index),
|
|
31
|
+
isGroup: true,
|
|
32
|
+
isMulti,
|
|
33
|
+
singleSelect,
|
|
34
|
+
isSelected,
|
|
35
|
+
onClick: (e) => onClick(e, { value, ...child.props })
|
|
36
|
+
});
|
|
37
|
+
}) })
|
|
38
|
+
] });
|
|
47
39
|
const props = {
|
|
48
40
|
title: PropTypes.string.isRequired.description("group title"),
|
|
49
41
|
children: PropTypes.node.isRequired.description("Array of MobileContextMenuItem"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { noop } from 'lodash';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\n\nconst Title = styled.div`\n height: 24px;\n line-height: 24px;\n font-size: 12px;\n border-top: 1px solid ${(props) => props.theme.colors.brand['300']};\n background: ${(props) => props.theme.colors.brand['200']};\n padding: 0 ${(props) => props.theme.space.xs};\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => (\n <Grid>\n <Grid>\n <Title>{title}</Title>\n </Grid>\n <Grid>\n {React.Children.map(children, (child, index) => {\n const { onClick = noop } = child.props;\n const value = `${groupValue}:${index}`;\n let isSelected;\n if (singleSelect) isSelected = selectedItems === value;\n else if (isMulti) isSelected = selectedItems.includes(value);\n return React.cloneElement(child, {\n value,\n key: 'group.'.concat(index),\n isGroup: true,\n isMulti,\n singleSelect,\n isSelected,\n onClick: (e) => onClick(e, { value, ...child.props }),\n });\n })}\n </Grid>\n </Grid>\n);\n\nconst props = {\n /**\n * Group title\n */\n title: PropTypes.string.isRequired.description('group title'),\n /**\n * Array of MobileContextMenuItem\n */\n children: PropTypes.node.isRequired.description('Array of MobileContextMenuItem'),\n /** multi select */\n isMulti: PropTypes.bool.description('multi select'),\n /** single select */\n singleSelect: PropTypes.bool.description('single select'),\n /** value for select */\n value: PropTypes.string.description('value for select'),\n /** selected items, array for multi, string for single */\n selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description(\n 'selected items, array for multi, string for single',\n ),\n};\n\nDSMobileContextMenuGroup.propTypes = props;\nDSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';\nDSMobileContextMenuGroup.displayName = 'DSMobileContextMenuGroup';\nconst DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);\n\nDSMobileContextMenuGroupWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBrB,SAEI,KAFJ;AAlBF,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW,gBAAgB;AAEpC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,0BAIK,CAACC,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC9C,CAACA,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA,eACrC,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,WACjC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,2BAA2B,CAAC,EAAE,OAAO,SAAS,cAAc,UAAU,OAAO,YAAY,cAAc,MAC3G,qBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkBrB,SAEI,KAFJ;AAlBF,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW,gBAAgB;AAEpC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,0BAIK,CAACC,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC9C,CAACA,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA,eACrC,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,WACjC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,2BAA2B,CAAC,EAAE,OAAO,SAAS,cAAc,UAAU,OAAO,YAAY,cAAc,MAC3G,qBAAC,QACC;AAAA,sBAAC,QACC,8BAAC,SAAO,iBAAM,GAChB;AAAA,EACA,oBAAC,QACE,UAAAD,OAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9C,UAAM,EAAE,UAAU,KAAK,IAAI,MAAM;AACjC,UAAM,QAAQ,GAAG,cAAc;AAC/B,QAAI;AACJ,QAAI;AAAc,mBAAa,kBAAkB;AAAA,aACxC;AAAS,mBAAa,cAAc,SAAS,KAAK;AAC3D,WAAOA,OAAM,aAAa,OAAO;AAAA,MAC/B;AAAA,MACA,KAAK,SAAS,OAAO,KAAK;AAAA,MAC1B,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,CAAC,MAAM,QAAQ,GAAG,EAAE,OAAO,GAAG,MAAM,MAAM,CAAC;AAAA,IACtD,CAAC;AAAA,EACH,CAAC,GACH;AAAA,GACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,OAAO,UAAU,OAAO,WAAW,YAAY,aAAa;AAAA,EAI5D,UAAU,UAAU,KAAK,WAAW,YAAY,gCAAgC;AAAA,EAEhF,SAAS,UAAU,KAAK,YAAY,cAAc;AAAA,EAElD,cAAc,UAAU,KAAK,YAAY,eAAe;AAAA,EAExD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,eAAe,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AACF;AAEA,yBAAyB,YAAY;AACrC,yBAAyB,gBAAgB;AACzC,yBAAyB,cAAc;AACvC,MAAM,qCAAqC,SAAS,wBAAwB;AAE5E,mCAAmC,YAAY;",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -7,14 +7,10 @@ import { GroupItem } from "@elliemae/ds-shared";
|
|
|
7
7
|
import { DSCheckbox } from "@elliemae/ds-form";
|
|
8
8
|
import { Checkmark } from "@elliemae/ds-icons";
|
|
9
9
|
import { DSMobileTouchable } from "../MobileTouchable";
|
|
10
|
-
const Wrap = styled((props2) => /* @__PURE__ */ jsx(DSMobileTouchable, {
|
|
11
|
-
...props2
|
|
12
|
-
}))`
|
|
10
|
+
const Wrap = styled((props2) => /* @__PURE__ */ jsx(DSMobileTouchable, { ...props2 }))`
|
|
13
11
|
border-bottom: none;
|
|
14
12
|
`;
|
|
15
|
-
const PropWrap = styled((props2) => /* @__PURE__ */ jsx(Grid, {
|
|
16
|
-
...props2
|
|
17
|
-
}))`
|
|
13
|
+
const PropWrap = styled((props2) => /* @__PURE__ */ jsx(Grid, { ...props2 }))`
|
|
18
14
|
${(props2) => {
|
|
19
15
|
if (!props2.isMulti) {
|
|
20
16
|
return `
|
|
@@ -56,76 +52,48 @@ const DSMobileContextMenuItem = ({
|
|
|
56
52
|
onClick = () => {
|
|
57
53
|
},
|
|
58
54
|
value
|
|
59
|
-
}) => /* @__PURE__ */ jsx(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
someItemSelected =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
showLeftAddon =
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
leftAddon =
|
|
71
|
-
|
|
72
|
-
"data-testid": "leftAddon-checkbox"
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
cols,
|
|
89
|
-
children: [
|
|
90
|
-
(singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ jsx(PropWrap, {
|
|
91
|
-
"data-testid": "left-addon",
|
|
92
|
-
isMulti,
|
|
93
|
-
alignItems: "center",
|
|
94
|
-
justifyContent: "center",
|
|
95
|
-
pl: "16px",
|
|
96
|
-
children: showLeftAddon && leftAddon
|
|
97
|
-
}),
|
|
98
|
-
/* @__PURE__ */ jsxs(Grid, {
|
|
99
|
-
height: "44px",
|
|
100
|
-
pr: "xs",
|
|
101
|
-
pl: !leftAddon && isGroup ? "24px" : "xs",
|
|
55
|
+
}) => /* @__PURE__ */ jsx(
|
|
56
|
+
GroupItem,
|
|
57
|
+
{
|
|
58
|
+
render: (context) => {
|
|
59
|
+
const { activeValue } = context;
|
|
60
|
+
let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
|
|
61
|
+
if (isGroup)
|
|
62
|
+
someItemSelected = typeof activeValue === "string";
|
|
63
|
+
let showLeftAddon = isSelected;
|
|
64
|
+
if (isMulti || !singleSelect)
|
|
65
|
+
showLeftAddon = true;
|
|
66
|
+
let leftAddon = leftProp || null;
|
|
67
|
+
if (isMulti)
|
|
68
|
+
leftAddon = /* @__PURE__ */ jsx(DSCheckbox, { checked: isSelected, "data-testid": "leftAddon-checkbox" });
|
|
69
|
+
if (singleSelect)
|
|
70
|
+
leftAddon = /* @__PURE__ */ jsx(CheckMark, { "data-testid": "leftAddon-checkmark" });
|
|
71
|
+
const cols = singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"];
|
|
72
|
+
if (rightAddon)
|
|
73
|
+
cols.push("40px");
|
|
74
|
+
return /* @__PURE__ */ jsxs(
|
|
75
|
+
Wrap,
|
|
76
|
+
{
|
|
77
|
+
"data-testid": "ds-contextmenu-item",
|
|
78
|
+
onClick: (e) => {
|
|
79
|
+
if (singleSelect || isMulti)
|
|
80
|
+
context.onChange(value, e, { value, label, title });
|
|
81
|
+
onClick(e);
|
|
82
|
+
},
|
|
83
|
+
cols,
|
|
102
84
|
children: [
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
children: /* @__PURE__ */ jsx(Label, {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}),
|
|
110
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
111
|
-
alignItems: !label ? "center" : void 0,
|
|
112
|
-
children: /* @__PURE__ */ jsx(Title, {
|
|
113
|
-
"data-testid": "contextMenuItem-title",
|
|
114
|
-
children: title
|
|
115
|
-
})
|
|
116
|
-
})
|
|
85
|
+
(singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ jsx(PropWrap, { "data-testid": "left-addon", isMulti, alignItems: "center", justifyContent: "center", pl: "16px", children: showLeftAddon && leftAddon }),
|
|
86
|
+
/* @__PURE__ */ jsxs(Grid, { height: "44px", pr: "xs", pl: !leftAddon && isGroup ? "24px" : "xs", children: [
|
|
87
|
+
label && /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(Label, { "data-testid": "contextMenuItem-label", children: label }) }),
|
|
88
|
+
/* @__PURE__ */ jsx(Grid, { alignItems: !label ? "center" : void 0, children: /* @__PURE__ */ jsx(Title, { "data-testid": "contextMenuItem-title", children: title }) })
|
|
89
|
+
] }),
|
|
90
|
+
rightAddon ? /* @__PURE__ */ jsx(PropWrap, { "data-testid": "right-addon", alignItems: "center", justifyContent: "center", children: rightAddon }) : null
|
|
117
91
|
]
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
alignItems: "center",
|
|
122
|
-
justifyContent: "center",
|
|
123
|
-
children: rightAddon
|
|
124
|
-
}) : null
|
|
125
|
-
]
|
|
126
|
-
});
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}
|
|
127
95
|
}
|
|
128
|
-
|
|
96
|
+
);
|
|
129
97
|
const props = {
|
|
130
98
|
label: PropTypes.string.description("label"),
|
|
131
99
|
title: PropTypes.string.isRequired.description("menu item title"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuItem.tsx"],
|
|
4
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-utilities';\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';\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.propTypes = props;\nDSMobileContextMenuItem.displayName = 'DSMobileContextMenuItem';\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACYQ,cA2FrB,YA3FqB;AAR/B,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAElC,MAAM,OAAO,OAAO,CAACA,WAAU,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACYQ,cA2FrB,YA3FqB;AAR/B,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAElC,MAAM,OAAO,OAAO,CAACA,WAAU,oBAAC,qBAAmB,GAAGA,QAAO,CAAE;AAAA;AAAA;AAI/D,MAAM,WAAW,OAAO,CAACA,WAAU,oBAAC,QAAM,GAAGA,QAAO,CAAE;AAAA,IAClD,CAACA,WAAU;AACX,MAAI,CAACA,OAAM,SAAS;AAClB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT;AACA,SAAO;AACT;AAAA;AAGF,MAAM,QAAQ,OAAO;AAAA;AAAA,WAEV,CAACA,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA,IAC3C,SAAS;AAAA;AAGb,MAAM,QAAQ,OAAO;AAAA;AAAA,WAEV,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,YAAY,OAAO,SAAS;AAAA,UACxB,CAACA,WAAUA,OAAM,MAAM,OAAO,MAAM;AAAA;AAa9C,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,QAAQ,CAAC,YAAY;AACnB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,mBAAmB,eAAe,KAAK,CAAC,MAAM,QAAQ,WAAW;AACrE,UAAI;AAAS,2BAAmB,OAAO,gBAAgB;AAEvD,UAAI,gBAAgB;AACpB,UAAI,WAAW,CAAC;AAAc,wBAAgB;AAE9C,UAAI,YAAY,YAAY;AAC5B,UAAI;AAAS,oBAAY,oBAAC,cAAW,SAAS,YAAY,eAAY,sBAAqB;AAC3F,UAAI;AAAc,oBAAY,oBAAC,aAAU,eAAY,uBAAsB;AAE3E,YAAM,OACH,gBAAgB,oBAAsB,aAAa,CAAC,gBAAiB,UAAU,CAAC,QAAQ,MAAM,IAAI,CAAC,MAAM;AAC5G,UAAI;AAAY,aAAK,KAAK,MAAM;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,gBAAI,gBAAgB;AAAS,sBAAQ,SAAS,OAAO,GAAG,EAAE,OAAO,OAAO,MAAM,CAAC;AAC/E,oBAAQ,CAAC;AAAA,UACX;AAAA,UACA;AAAA,UAEG;AAAA,6BAAgB,oBAAqB,WAAW,cACjD,oBAAC,YAAS,eAAY,cAAa,SAAkB,YAAW,UAAS,gBAAe,UAAS,IAAG,QACjG,2BAAiB,WACpB;AAAA,YAEF,qBAAC,QAAK,QAAO,QAAO,IAAG,MAAK,IAAI,CAAC,aAAa,UAAU,SAAS,MAC9D;AAAA,uBACC,oBAAC,QAAK,YAAW,UACf,8BAAC,SAAM,eAAY,yBAAyB,iBAAM,GACpD;AAAA,cAEF,oBAAC,QAAK,YAAY,CAAC,QAAQ,WAAW,QACpC,8BAAC,SAAM,eAAY,yBAAyB,iBAAM,GACpD;AAAA,eACF;AAAA,YACC,aACC,oBAAC,YAAS,eAAY,eAAc,YAAW,UAAS,gBAAe,UACpE,sBACH,IACE;AAAA;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA;AACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,OAAO;AAAA,EAE3C,OAAO,UAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,UAAU,QAAQ,YAAY,EAAE;AAAA,EAE1C,SAAS,UAAU,KAAK,YAAY,cAAc;AAAA,EAElD,cAAc,UAAU,KAAK,YAAY,EAAE;AAAA,EAE3C,SAAS,UAAU,KAAK,YAAY,EAAE;AAAA,EAEtC,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAEtD,YAAY,UAAU,KAAK,YAAY,gBAAgB;AACzD;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,oCAAoC,SAAS,uBAAuB;AAE1E,kCAAkC,YAAY;",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
|
@@ -39,10 +39,7 @@ const StyledInput = styled.input`
|
|
|
39
39
|
display: none;
|
|
40
40
|
}
|
|
41
41
|
`;
|
|
42
|
-
const Input = ({ innerRef, ...props }) => /* @__PURE__ */ jsx(StyledInput, {
|
|
43
|
-
ref: innerRef,
|
|
44
|
-
...props
|
|
45
|
-
});
|
|
42
|
+
const Input = ({ innerRef, ...props }) => /* @__PURE__ */ jsx(StyledInput, { ref: innerRef, ...props });
|
|
46
43
|
export {
|
|
47
44
|
Input
|
|
48
45
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDatePicker/Input.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n input[type=date]& { \n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-tap-highlight-color: transparent;\n appearance: none;\n color: transparent;\n\n white-space: nowrap;\n position: relative;\n height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n width: 100%;\n max-width: calc(100% - 32px);\n outline: none;\n box-sizing: border-box;\n display: flex;\n background: ${props => props.theme.colors.neutral['000']};\n padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n z-index: 1;\n border-radius: 2px;\n border: solid 1px ${props => props.theme.colors.neutral[200]};\n }\n\n input[type=date]&:active, input[type=date]&:focus {\n ${props => focus(props.theme.colors.brand[700])}\n }\n\n &:before {\n color: ${props =>\n props.value === ''\n ? props.theme.colors.neutral['500']\n : props.theme.colors.neutral['800']};\n content: '${props =>\n props.value === '' ? props.placeholder : props['data-displayvalue']}';\n }\n\n input[type=date]&::-webkit-datetime-edit, input[type=date]&::-webkit-inner-spin-button, input[type=date]&::-webkit-clear-button {\n -webkit-appearance: none;\n display: none;\n }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n <StyledInput ref={innerRef} {...props} />\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+CrB;AA9CF,SAAS,cAAc;AACvB,SAAS,OAAO,gCAAgC;AAEhD,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,EAAE,aAAa,MAAM,MACzC,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+CrB;AA9CF,SAAS,cAAc;AACvB,SAAS,OAAO,gCAAgC;AAEhD,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMjD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA,wBAG/C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,aAIrC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,EAAE,aAAa,MAAM,MACzC,oBAAC,eAAY,KAAK,UAAW,GAAG,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,40 +16,49 @@ const DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }
|
|
|
16
16
|
}, [inputRef.current]);
|
|
17
17
|
const valueArr = value.split("-");
|
|
18
18
|
const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;
|
|
19
|
-
return /* @__PURE__ */ jsx(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"aria-label": "Date Picker Input Mask",
|
|
36
|
-
disabled,
|
|
37
|
-
onKeyDown: (e) => e.preventDefault(),
|
|
38
|
-
type: "date",
|
|
39
|
-
placeholder,
|
|
40
|
-
onChange: (e) => {
|
|
41
|
-
const { target } = e.nativeEvent;
|
|
42
|
-
function iosClearDefault() {
|
|
43
|
-
target.defaultValue = "";
|
|
19
|
+
return /* @__PURE__ */ jsx(
|
|
20
|
+
DSInputGroup,
|
|
21
|
+
{
|
|
22
|
+
rightAddon: /* @__PURE__ */ jsx(
|
|
23
|
+
DSButton,
|
|
24
|
+
{
|
|
25
|
+
"aria-label": "Date Picker Button",
|
|
26
|
+
color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
|
|
27
|
+
disabled,
|
|
28
|
+
icon: /* @__PURE__ */ jsx(DatePicker, {}),
|
|
29
|
+
type: "button",
|
|
30
|
+
buttonType: "secondary",
|
|
31
|
+
onClick: () => {
|
|
32
|
+
inputRef.current.focus();
|
|
33
|
+
inputRef.current.click();
|
|
34
|
+
}
|
|
44
35
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
36
|
+
),
|
|
37
|
+
children: /* @__PURE__ */ jsx(
|
|
38
|
+
Input,
|
|
39
|
+
{
|
|
40
|
+
"data-testid": "ds-mobile-date-picker",
|
|
41
|
+
innerRef: inputRef,
|
|
42
|
+
"aria-label": "Date Picker Input Mask",
|
|
43
|
+
disabled,
|
|
44
|
+
onKeyDown: (e) => e.preventDefault(),
|
|
45
|
+
type: "date",
|
|
46
|
+
placeholder,
|
|
47
|
+
onChange: (e) => {
|
|
48
|
+
const { target } = e.nativeEvent;
|
|
49
|
+
function iosClearDefault() {
|
|
50
|
+
target.defaultValue = "";
|
|
51
|
+
}
|
|
52
|
+
window.setTimeout(iosClearDefault, 0);
|
|
53
|
+
onChange(e);
|
|
54
|
+
},
|
|
55
|
+
tabIndex,
|
|
56
|
+
value,
|
|
57
|
+
"data-displayvalue": displayValue
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
);
|
|
53
62
|
};
|
|
54
63
|
DSMobileDatePicker.defaultProps = {
|
|
55
64
|
disabled: false,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDatePicker/MobileDatePicker.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInputGroup } from '@elliemae/ds-form';\nimport { Input } from './Input';\n\nconst DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {\n const inputRef = useRef(null);\n useEffect(() => {\n /*\n necessary if value is being set in mount, \n otherwise the clear won't work on the first click\n [SEE input onChange comment]\n */\n if (inputRef.current) {\n inputRef.current.defaultValue = '';\n }\n }, [inputRef.current]);\n const valueArr = value.split('-');\n const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;\n return (\n <DSInputGroup\n rightAddon={\n <DSButton\n aria-label=\"Date Picker Button\"\n color={!disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL}\n disabled={disabled}\n icon={<DatePicker />}\n type=\"button\"\n buttonType=\"secondary\"\n onClick={() => {\n inputRef.current.focus();\n inputRef.current.click();\n }}\n />\n }\n >\n <Input\n data-testid=\"ds-mobile-date-picker\"\n innerRef={inputRef}\n aria-label=\"Date Picker Input Mask\"\n disabled={disabled}\n onKeyDown={(e) => e.preventDefault()}\n type=\"date\"\n placeholder={placeholder}\n onChange={(e) => {\n // https://github.com/facebook/react/issues/8938#issuecomment-360573204\n const { target } = e.nativeEvent;\n function iosClearDefault() {\n target.defaultValue = '';\n }\n window.setTimeout(iosClearDefault, 0);\n onChange(e);\n }}\n tabIndex={tabIndex}\n value={value}\n data-displayvalue={displayValue}\n />\n </DSInputGroup>\n );\n};\n\nDSMobileDatePicker.defaultProps = {\n disabled: false,\n tabIndex: 0,\n placeholder: 'MM / DD / YYYY',\n};\n\nconst props = {\n /**\n * defaults to false\n */\n disabled: PropTypes.bool.description('defaults to false'),\n /**\n * 0 as default\n */\n tabIndex: PropTypes.number.description('0 as default'),\n /**\n * MM / DD / YYYY as default\n */\n placeholder: PropTypes.string.description('MM / DD / YYYY as default'),\n /**\n * onChange handler, receives change event as first argument\n */\n onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),\n /**\n * ISO8601 string representing the date in format YYYY-MM-DD or empty string\n */\n value: PropTypes.string.description('ISO8601 string representing the date in format YYYY-MM-DD or empty string'),\n};\n\nDSMobileDatePicker.propTypes = props;\nDSMobileDatePicker.displayName = 'DSMobileDatePicker';\nconst DSMobileDatePickerWithSchema = describe(DSMobileDatePicker);\n\nDSMobileDatePickerWithSchema.propTypes = props;\n\nexport { DSMobileDatePicker, DSMobileDatePickerWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC6BP;AA7BhB,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,SAAS,MAAM;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,QAAM,eAAe,SAAS,GAAG,SAAS,QAAQ,SAAS,QAAQ,SAAS;AAC5E,SACE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6BP;AA7BhB,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEtB,MAAM,qBAAqB,CAAC,EAAE,UAAU,OAAO,UAAU,aAAa,SAAS,MAAM;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,YAAU,MAAM;AAMd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,eAAe;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,QAAM,eAAe,SAAS,GAAG,SAAS,QAAQ,SAAS,QAAQ,SAAS;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,OAAO,CAAC,WAAW,aAAa,UAAU,aAAa;AAAA,UACvD;AAAA,UACA,MAAM,oBAAC,cAAW;AAAA,UAClB,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAAS,MAAM;AACb,qBAAS,QAAQ,MAAM;AACvB,qBAAS,QAAQ,MAAM;AAAA,UACzB;AAAA;AAAA,MACF;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,UAAU;AAAA,UACV,cAAW;AAAA,UACX;AAAA,UACA,WAAW,CAAC,MAAM,EAAE,eAAe;AAAA,UACnC,MAAK;AAAA,UACL;AAAA,UACA,UAAU,CAAC,MAAM;AAEf,kBAAM,EAAE,OAAO,IAAI,EAAE;AACrB,qBAAS,kBAAkB;AACzB,qBAAO,eAAe;AAAA,YACxB;AACA,mBAAO,WAAW,iBAAiB,CAAC;AACpC,qBAAS,CAAC;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAmB;AAAA;AAAA,MACrB;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,eAAe;AAAA,EAChC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AACf;AAEA,MAAM,QAAQ;AAAA,EAIZ,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAIxD,UAAU,UAAU,OAAO,YAAY,cAAc;AAAA,EAIrD,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAIrE,UAAU,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAIhG,OAAO,UAAU,OAAO,YAAY,2EAA2E;AACjH;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAEhE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,12 +39,7 @@ const CaretWrap = styled.span`
|
|
|
39
39
|
justify-content: center;
|
|
40
40
|
align-items: center;
|
|
41
41
|
`;
|
|
42
|
-
const Caret = ({ onClick }) => /* @__PURE__ */ jsx(CaretWrap, {
|
|
43
|
-
onClick,
|
|
44
|
-
children: /* @__PURE__ */ jsx(ChevronDown, {
|
|
45
|
-
color: ["brand-primary", "600"]
|
|
46
|
-
})
|
|
47
|
-
});
|
|
42
|
+
const Caret = ({ onClick }) => /* @__PURE__ */ jsx(CaretWrap, { onClick, children: /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "600"] }) });
|
|
48
43
|
Caret.propTypes = {
|
|
49
44
|
onClick: PropTypes.func.isRequired
|
|
50
45
|
};
|
|
@@ -52,19 +47,10 @@ const DSMobileDropdownTriggerInput = ({
|
|
|
52
47
|
inputProps,
|
|
53
48
|
caretProps,
|
|
54
49
|
selectedItemsText
|
|
55
|
-
}) => /* @__PURE__ */ jsxs(MobileDropdownInputWrap, {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
...inputProps,
|
|
60
|
-
readOnly: true,
|
|
61
|
-
value: selectedItemsText ?? inputProps.value
|
|
62
|
-
}),
|
|
63
|
-
/* @__PURE__ */ jsx(Caret, {
|
|
64
|
-
...caretProps
|
|
65
|
-
})
|
|
66
|
-
]
|
|
67
|
-
});
|
|
50
|
+
}) => /* @__PURE__ */ jsxs(MobileDropdownInputWrap, { "data-testid": "ds-mobile-ddwn-menu", children: [
|
|
51
|
+
/* @__PURE__ */ jsx(MobileDropdownInput, { ...inputProps, readOnly: true, value: selectedItemsText ?? inputProps.value }),
|
|
52
|
+
/* @__PURE__ */ jsx(Caret, { ...caretProps })
|
|
53
|
+
] });
|
|
68
54
|
export {
|
|
69
55
|
Caret,
|
|
70
56
|
DSMobileDropdownTriggerInput,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDropdownMenu/MobileDropdownInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\nimport { focus } from '@elliemae/ds-system';\nimport { ChevronDown } from '@elliemae/ds-icons';\n\nexport const MobileDropdownInput = styled.input`\n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-tap-highlight-color: transparent;\n caret-color: transparent;\n padding-right: 32px;\n padding-left: 10px;\n border-radius: 2px;\n width: 100%;\n background: ${(props) => props.theme.colors.neutral['000']};\n height: 32px;\n line-height: 32px;\n border: solid 1px ${(props) => props.theme.colors.neutral[200]};\n\n &:active,\n &:focus {\n ${(props) => focus(props.theme.colors.brand[700])}\n }\n`;\n\nexport const MobileDropdownInputWrap = styled.span`\n position: relative;\n width: 100%;\n display: inline-block;\n height: 32px;\n`;\n\nconst CaretWrap = styled.span`\n width: 32px;\n height: 32px;\n position: absolute;\n right: 0;\n top: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const Caret = ({ onClick }): JSX.Element => (\n <CaretWrap onClick={onClick}>\n <ChevronDown color={['brand-primary', '600']} />\n </CaretWrap>\n);\n\nCaret.propTypes = {\n onClick: PropTypes.func.isRequired,\n};\n\nexport const DSMobileDropdownTriggerInput = ({\n inputProps,\n caretProps,\n selectedItemsText,\n}: {\n inputProps: Record<string, unknown>;\n caretProps: Record<string, unknown>;\n selectedItemsText?: string;\n}): JSX.Element => (\n <MobileDropdownInputWrap data-testid=\"ds-mobile-ddwn-menu\">\n <MobileDropdownInput {...inputProps} readOnly value={selectedItemsText ?? inputProps.value} />\n\n <Caret {...caretProps} />\n </MobileDropdownInputWrap>\n);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8CnB,cAiBF,YAjBE;AA7CJ,SAAS,cAAc;AACvB,OAAO,eAAe;AACtB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAErB,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAGhC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,QAAQ,MAC9B,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8CnB,cAiBF,YAjBE;AA7CJ,SAAS,cAAc;AACvB,OAAO,eAAe;AACtB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAErB,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAGhC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA;AAAA;AAI7C,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWlB,MAAM,QAAQ,CAAC,EAAE,QAAQ,MAC9B,oBAAC,aAAU,SACT,8BAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAChD;AAGF,MAAM,YAAY;AAAA,EAChB,SAAS,UAAU,KAAK;AAC1B;AAEO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AACF,MAKE,qBAAC,2BAAwB,eAAY,uBACnC;AAAA,sBAAC,uBAAqB,GAAG,YAAY,UAAQ,MAAC,OAAO,qBAAqB,WAAW,OAAO;AAAA,EAE5F,oBAAC,SAAO,GAAG,YAAY;AAAA,GACzB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,36 +44,44 @@ const DSMobileDropdownMenu = ({
|
|
|
44
44
|
}),
|
|
45
45
|
[]
|
|
46
46
|
);
|
|
47
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(
|
|
49
|
+
DSMobileDropdownTriggerInput,
|
|
50
|
+
{
|
|
50
51
|
inputProps,
|
|
51
52
|
caretProps
|
|
52
|
-
}
|
|
53
|
-
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
menuOpen ? /* @__PURE__ */ jsx(
|
|
56
|
+
DSMobileContextMenu,
|
|
57
|
+
{
|
|
54
58
|
title,
|
|
55
59
|
open: true,
|
|
56
60
|
onChange: (_, e) => {
|
|
57
61
|
setMenuOpen(false);
|
|
58
62
|
},
|
|
59
63
|
onClickOutside: () => setMenuOpen(false),
|
|
60
|
-
children: options.map((opt, i) => /* @__PURE__ */ jsx(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
children: options.map((opt, i) => /* @__PURE__ */ jsx(
|
|
65
|
+
DSMobileContextMenuItem,
|
|
66
|
+
{
|
|
67
|
+
title: opt.label,
|
|
68
|
+
value: opt.value,
|
|
69
|
+
isSelected: itemsProps.isItemSelected(opt),
|
|
70
|
+
onClick: (e) => {
|
|
71
|
+
setMenuOpen(false);
|
|
72
|
+
itemsProps.onClick(opt, e);
|
|
73
|
+
},
|
|
74
|
+
label: itemsProps.label,
|
|
75
|
+
leftProp: itemsProps.leftProp,
|
|
76
|
+
isGroup: itemsProps.isGroup,
|
|
77
|
+
isMulti: itemsProps.isMulti,
|
|
78
|
+
singleSelect: itemsProps.singleSelect
|
|
67
79
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}, "ddwn".concat(`${i}`)))
|
|
74
|
-
}) : null
|
|
75
|
-
]
|
|
76
|
-
});
|
|
80
|
+
"ddwn".concat(`${i}`)
|
|
81
|
+
))
|
|
82
|
+
}
|
|
83
|
+
) : null
|
|
84
|
+
] });
|
|
77
85
|
};
|
|
78
86
|
const props = {
|
|
79
87
|
placeholder: PropTypes.string.description("dropdown menu placeholder"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDropdownMenu/MobileDropdownMenu.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n DSMobileContextMenu,\n DSMobileContextMenuItem,\n} from '../MobileContextMenu';\n\nimport { DSMobileDropdownTriggerInput } from './MobileDropdownInput';\ninterface OptionT {\n label: string;\n value: string;\n}\ninterface DSMobileDropdownMenuPropsT {\n placeholder: string;\n value: string;\n options: OptionT[];\n title: string;\n itemsProps: {\n label?: string;\n leftProp?: JSX.Element;\n isGroup?: boolean;\n isMulti?: boolean;\n singleSelect?: boolean;\n isItemSelected?: (opt: OptionT) => boolean;\n onClick?: (opt: OptionT, e: any) => void;\n };\n}\nconst DSMobileDropdownMenu = ({\n placeholder,\n options = [],\n title,\n value,\n itemsProps = {\n label: undefined,\n leftProp: undefined,\n isGroup: false,\n isMulti: false,\n singleSelect: false,\n isItemSelected: () => false,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n onClick: () => {},\n },\n}: DSMobileDropdownMenuPropsT): JSX.Element => {\n const [menuOpen, setMenuOpen] = useState(false);\n const inputRef = useRef(null);\n const inputProps = React.useMemo(\n () => ({\n readOnly: true,\n value,\n onClick: () => setMenuOpen(true),\n ref: inputRef,\n placeholder,\n }),\n [value, placeholder],\n );\n const caretProps = React.useMemo(\n () => ({\n onClick: () => {\n inputRef.current.focus();\n setMenuOpen(true);\n },\n }),\n [],\n );\n return (\n <>\n <DSMobileDropdownTriggerInput\n inputProps={inputProps}\n caretProps={caretProps}\n />\n {menuOpen ? (\n <DSMobileContextMenu\n title={title}\n open\n onChange={(_, e) => {\n setMenuOpen(false);\n }}\n onClickOutside={() => setMenuOpen(false)}\n >\n {options.map((opt, i) => (\n <DSMobileContextMenuItem\n key={'ddwn'.concat(`${i}`)}\n title={opt.label}\n value={opt.value}\n isSelected={itemsProps.isItemSelected(opt)}\n onClick={(e) => {\n setMenuOpen(false);\n itemsProps.onClick(opt, e);\n }}\n label={itemsProps.label}\n leftProp={itemsProps.leftProp}\n isGroup={itemsProps.isGroup}\n isMulti={itemsProps.isMulti}\n singleSelect={itemsProps.singleSelect}\n />\n ))}\n </DSMobileContextMenu>\n ) : null}\n </>\n );\n};\n\nconst props = {\n /** dropdown menu placeholder */\n placeholder: PropTypes.string.description('dropdown menu placeholder'),\n /** context menu menu title */\n title: PropTypes.string.description('context menu menu title'),\n /** context menu options / items */\n options: PropTypes.arrayOf(\n PropTypes.shape({ value: PropTypes.string, label: PropTypes.string }),\n ).description('context menu options / items'),\n};\n\nDSMobileDropdownMenu.propTypes = props;\nDSMobileDropdownMenu.displayName = 'DSMobileDropdownMenu';\nconst DSMobileDropdownMenuWithSchema = describe(DSMobileDropdownMenu);\nDSMobileDropdownMenuWithSchema.propTypes = props;\n\nexport { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkEnB,mBACE,KADF;AAjEJ,OAAOA,UAAS,QAAQ,gBAAgB;AACxC,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAoB7C,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,IAEtB,SAAS,MAAM;AAAA,IAAC;AAAA,EAClB;AACF,MAA+C;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA,SAAS,MAAM,YAAY,IAAI;AAAA,MAC/B,KAAK;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AACA,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,SACE;AAAA
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkEnB,mBACE,KADF;AAjEJ,OAAOA,UAAS,QAAQ,gBAAgB;AACxC,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAoB7C,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB,MAAM;AAAA,IAEtB,SAAS,MAAM;AAAA,IAAC;AAAA,EAClB;AACF,MAA+C;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA,SAAS,MAAM,YAAY,IAAI;AAAA,MAC/B,KAAK;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AACA,QAAM,aAAaA,OAAM;AAAA,IACvB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,iBAAS,QAAQ,MAAM;AACvB,oBAAY,IAAI;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAI;AAAA,QACJ,UAAU,CAAC,GAAG,MAAM;AAClB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,gBAAgB,MAAM,YAAY,KAAK;AAAA,QAEtC,kBAAQ,IAAI,CAAC,KAAK,MACjB;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,OAAO,IAAI;AAAA,YACX,YAAY,WAAW,eAAe,GAAG;AAAA,YACzC,SAAS,CAAC,MAAM;AACd,0BAAY,KAAK;AACjB,yBAAW,QAAQ,KAAK,CAAC;AAAA,YAC3B;AAAA,YACA,OAAO,WAAW;AAAA,YAClB,UAAU,WAAW;AAAA,YACrB,SAAS,WAAW;AAAA,YACpB,SAAS,WAAW;AAAA,YACpB,cAAc,WAAW;AAAA;AAAA,UAZpB,OAAO,OAAO,GAAG,GAAG;AAAA,QAa3B,CACD;AAAA;AAAA,IACH,IACE;AAAA,KACN;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,aAAa,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAErE,OAAO,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE7D,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM,EAAE,OAAO,UAAU,QAAQ,OAAO,UAAU,OAAO,CAAC;AAAA,EACtE,EAAE,YAAY,8BAA8B;AAC9C;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -15,17 +15,10 @@ const Label = styled.p`
|
|
|
15
15
|
font-size: ${(props2) => props2.theme.space.xs};
|
|
16
16
|
font-weight: ${(props2) => props2.theme.fontWeights.semibold};
|
|
17
17
|
`;
|
|
18
|
-
const DSMobileEmptyState = ({ label = "No search results found.", Icon }) => /* @__PURE__ */ jsxs(Wrapper, {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
color: ["neutral", 400]
|
|
23
|
-
}),
|
|
24
|
-
/* @__PURE__ */ jsx(Label, {
|
|
25
|
-
children: label
|
|
26
|
-
})
|
|
27
|
-
]
|
|
28
|
-
});
|
|
18
|
+
const DSMobileEmptyState = ({ label = "No search results found.", Icon }) => /* @__PURE__ */ jsxs(Wrapper, { children: [
|
|
19
|
+
Icon ? /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsx(Search, { size: "xxl", color: ["neutral", 400] }),
|
|
20
|
+
/* @__PURE__ */ jsx(Label, { children: label })
|
|
21
|
+
] });
|
|
29
22
|
const props = {
|
|
30
23
|
label: PropTypes.string.description("empty state label"),
|
|
31
24
|
icon: PropTypes.node.description("empty state icon")
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileEmtpyState/MobileEmptyState.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Search } from '@elliemae/ds-icons';\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n`;\n\nconst Label = styled.p`\n color: ${(props) => props.theme.colors.neutral['600']};\n font-size: ${(props) => props.theme.space.xs};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\ninterface EmptyStateT {\n label: string;\n Icon: () => JSX.Element;\n}\n\nconst DSMobileEmptyState: React.ComponentType<EmptyStateT> = ({ label = 'No search results found.', Icon }) => (\n <Wrapper>\n {Icon ? <Icon /> : <Search size=\"xxl\" color={['neutral', 400]} />}\n <Label>{label}</Label>\n </Wrapper>\n);\n\nconst props = {\n /** empty state label */\n label: PropTypes.string.description('empty state label'),\n icon: PropTypes.node.description('empty state icon'),\n};\n\nDSMobileEmptyState.propTypes = props;\nDSMobileEmptyState.displayName = 'DSMobileEmptyState';\nconst DSMobileEmptyStateWithSchema = describe(DSMobileEmptyState);\nDSMobileEmptyStateWithSchema.propTypes = props;\n\nexport { DSMobileEmptyState, DSMobileEmptyStateWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyBrB,SACU,KADV;AAxBF,SAAS,cAAc;AACvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AAEvB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,QAAQ,OAAO;AAAA,WACV,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,eAClC,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC3B,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA;AAQpD,MAAM,qBAAuD,CAAC,EAAE,QAAQ,4BAA4B,KAAK,MACvG,qBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBrB,SACU,KADV;AAxBF,SAAS,cAAc;AACvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AAEvB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,QAAQ,OAAO;AAAA,WACV,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,eAClC,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC3B,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA;AAQpD,MAAM,qBAAuD,CAAC,EAAE,QAAQ,4BAA4B,KAAK,MACvG,qBAAC,WACE;AAAA,SAAO,oBAAC,QAAK,IAAK,oBAAC,UAAO,MAAK,OAAM,OAAO,CAAC,WAAW,GAAG,GAAG;AAAA,EAC/D,oBAAC,SAAO,iBAAM;AAAA,GAChB;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,mBAAmB;AAAA,EACvD,MAAM,UAAU,KAAK,YAAY,kBAAkB;AACrD;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
|
@@ -23,21 +23,10 @@ const Separator = styled.div`
|
|
|
23
23
|
margin: 0;
|
|
24
24
|
}
|
|
25
25
|
`;
|
|
26
|
-
const DSMobileFilterbar = ({ children }) => /* @__PURE__ */ jsxs(Grid, {
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
/* @__PURE__ */ jsx(Bar, {
|
|
31
|
-
children
|
|
32
|
-
}),
|
|
33
|
-
/* @__PURE__ */ jsx(Separator, {
|
|
34
|
-
children: /* @__PURE__ */ jsx(MobileSeparator, {
|
|
35
|
-
margin: "xxs",
|
|
36
|
-
color: ["neutral", "300"]
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
]
|
|
40
|
-
});
|
|
26
|
+
const DSMobileFilterbar = ({ children }) => /* @__PURE__ */ jsxs(Grid, { rows: ["auto", "auto"], "data-testid": "filter-bar-wrapper", children: [
|
|
27
|
+
/* @__PURE__ */ jsx(Bar, { children }),
|
|
28
|
+
/* @__PURE__ */ jsx(Separator, { children: /* @__PURE__ */ jsx(MobileSeparator, { margin: "xxs", color: ["neutral", "300"] }) })
|
|
29
|
+
] });
|
|
41
30
|
const filterbarProps = {
|
|
42
31
|
children: PropTypes.element.description("FilterBar Items").isRequired
|
|
43
32
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileFilterbar/Filterbar.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport MobileSeparator from '../MobileSeparator';\n\nconst Bar = styled.div`\n display: flex;\n overflow: auto;\n background-color: ${(props) => props.theme.colors.neutral['000']};\n padding-left: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n & > * {\n flex-shrink: 0;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst Separator = styled.div`\n & > * {\n margin: 0;\n }\n`;\n\nconst DSMobileFilterbar = ({ children }) => (\n <Grid rows={['auto', 'auto']} data-testid=\"filter-bar-wrapper\">\n <Bar>{children}</Bar>\n <Separator>\n <MobileSeparator margin=\"xxs\" color={['neutral', '300']} />\n </Separator>\n </Grid>\n);\n\nconst filterbarProps = {\n children: PropTypes.element.description('FilterBar Items').isRequired,\n};\n\nDSMobileFilterbar.propTypes = filterbarProps;\nDSMobileFilterbar.displayName = 'DSMobileFilterbar';\nconst FilterbarWithSchema = describe(DSMobileFilterbar);\nFilterbarWithSchema.propTypes = filterbarProps;\n\nexport { DSMobileFilterbar, FilterbarWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC6BrB,SACE,KADF;AA3BF,SAAS,cAAc;AACvB,SAAS,UAAU,iBAAiB;AACpC,SAAS,gCAAgC;AACzC,SAAS,YAAY;AACrB,OAAO,qBAAqB;AAE5B,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,sBAGG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,kBAC1C,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1E,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,oBAAoB,CAAC,EAAE,SAAS,MACpC,qBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6BrB,SACE,KADF;AA3BF,SAAS,cAAc;AACvB,SAAS,UAAU,iBAAiB;AACpC,SAAS,gCAAgC;AACzC,SAAS,YAAY;AACrB,OAAO,qBAAqB;AAE5B,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,sBAGG,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,kBAC1C,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1E,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,oBAAoB,CAAC,EAAE,SAAS,MACpC,qBAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GAAG,eAAY,sBACxC;AAAA,sBAAC,OAAK,UAAS;AAAA,EACf,oBAAC,aACC,8BAAC,mBAAgB,QAAO,OAAM,OAAO,CAAC,WAAW,KAAK,GAAG,GAC3D;AAAA,GACF;AAGF,MAAM,iBAAiB;AAAA,EACrB,UAAU,UAAU,QAAQ,YAAY,iBAAiB,EAAE;AAC7D;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,sBAAsB,SAAS,iBAAiB;AACtD,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|