@elliemae/ds-mobile 3.12.0-rc.2 → 3.12.0-rc.21
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 +11 -18
- package/dist/cjs/CategoryBox/CategoryBox.js.map +2 -2
- 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 +11 -18
- package/dist/esm/CategoryBox/CategoryBox.js.map +2 -2
- 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 +17 -17
|
@@ -61,18 +61,7 @@ const MobilePageHeader = ({
|
|
|
61
61
|
const handleContext = useCallback(() => {
|
|
62
62
|
setOpen(!open);
|
|
63
63
|
}, [open]);
|
|
64
|
-
const separator = /* @__PURE__ */ jsx(Grid, {
|
|
65
|
-
height: "32px",
|
|
66
|
-
alignItems: "center",
|
|
67
|
-
children: /* @__PURE__ */ jsx(Grid, {
|
|
68
|
-
height: "24px",
|
|
69
|
-
children: /* @__PURE__ */ jsx(MobileSeparator, {
|
|
70
|
-
direction: "vertical",
|
|
71
|
-
margin: "xxs",
|
|
72
|
-
color: ["neutral", "300"]
|
|
73
|
-
})
|
|
74
|
-
})
|
|
75
|
-
});
|
|
64
|
+
const separator = /* @__PURE__ */ jsx(Grid, { height: "32px", alignItems: "center", children: /* @__PURE__ */ jsx(Grid, { height: "24px", children: /* @__PURE__ */ jsx(MobileSeparator, { direction: "vertical", margin: "xxs", color: ["neutral", "300"] }) }) });
|
|
76
65
|
const cols = [1, "auto"];
|
|
77
66
|
const cols2 = ["auto"];
|
|
78
67
|
if (countActions)
|
|
@@ -81,128 +70,91 @@ const MobilePageHeader = ({
|
|
|
81
70
|
cols2.push("auto");
|
|
82
71
|
if (label)
|
|
83
72
|
cols2.push("auto");
|
|
84
|
-
return /* @__PURE__ */ jsxs(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
justifyContent: "flex-start",
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
"
|
|
117
|
-
children:
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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
|
-
}) : null
|
|
158
|
-
]
|
|
159
|
-
})
|
|
160
|
-
]
|
|
161
|
-
})
|
|
162
|
-
})
|
|
163
|
-
})
|
|
164
|
-
]
|
|
165
|
-
}),
|
|
166
|
-
hasValue && /* @__PURE__ */ jsxs(Grid, {
|
|
73
|
+
return /* @__PURE__ */ jsxs(
|
|
74
|
+
Wrapper,
|
|
75
|
+
{
|
|
76
|
+
cols,
|
|
77
|
+
pl: theme.space.xs,
|
|
78
|
+
pr: theme.space.xs,
|
|
79
|
+
alignItems: "flex-start",
|
|
80
|
+
width: "100%",
|
|
81
|
+
"data-testid": "page-header-wrapper",
|
|
82
|
+
withBlueBorder,
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsxs(Grid, { alignItems: "flex-start", justifyContent: "flex-start", cols: cols2, children: [
|
|
85
|
+
/* @__PURE__ */ jsxs(
|
|
86
|
+
Grid,
|
|
87
|
+
{
|
|
88
|
+
cols: backArrow ? ["auto", 1] : [1],
|
|
89
|
+
alignItems: "flex-start",
|
|
90
|
+
pr: countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0,
|
|
91
|
+
children: [
|
|
92
|
+
backArrow && /* @__PURE__ */ jsx(Grid, { height: breadCrumb ? "56px" : "44px", alignItems: "center", pr: "16px", children: backArrow }),
|
|
93
|
+
/* @__PURE__ */ jsx(Grid, { flexGrow: 0, pt: !breadCrumb ? 0 : theme.space.xxs, children: /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Grid, { children: [
|
|
94
|
+
breadCrumb && /* @__PURE__ */ jsx(StyledBreadCrumb, { "data-testid": "page-header-breadcrum", children: breadCrumb }),
|
|
95
|
+
/* @__PURE__ */ jsxs(
|
|
96
|
+
StyledTitle,
|
|
97
|
+
{
|
|
98
|
+
cols: ["auto", "1fr"],
|
|
99
|
+
gutter: "xxxs",
|
|
100
|
+
maxWidth: "100%",
|
|
101
|
+
alignItems: "flex-start",
|
|
102
|
+
withBreadcrumb: !!breadCrumb,
|
|
103
|
+
"data-testid": "page-header-title",
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx(Grid, { pt: breadCrumb ? 0 : theme.space.xxxs, alignItems: "flex-start", justifyItems: "center", children: /* @__PURE__ */ jsx(TruncatedExpandableText, { value: pageTitle }) }),
|
|
106
|
+
contextMenu ? /* @__PURE__ */ jsxs(Grid, { alignItems: "center", children: [
|
|
107
|
+
/* @__PURE__ */ jsx(
|
|
108
|
+
DSButton,
|
|
109
|
+
{
|
|
110
|
+
buttonType: "text",
|
|
111
|
+
icon: /* @__PURE__ */ jsx(ChevronSmallDown, {}),
|
|
112
|
+
size: "s",
|
|
113
|
+
onClick: () => {
|
|
114
|
+
handleContext();
|
|
115
|
+
onOpenContextMenu();
|
|
116
|
+
},
|
|
117
|
+
containerProps: { "data-testid": "trigger-context-menu" }
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
React2.cloneElement(contextMenu, {
|
|
121
|
+
open: contextMenu.props.open !== void 0 ? contextMenu.props.open : open,
|
|
122
|
+
onChange: (event, item) => {
|
|
123
|
+
if (contextMenu.props.onChange)
|
|
124
|
+
contextMenu.props.onChange(event, item);
|
|
125
|
+
handleContext();
|
|
126
|
+
}
|
|
127
|
+
})
|
|
128
|
+
] }) : null
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
)
|
|
132
|
+
] }) }) })
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
),
|
|
136
|
+
hasValue && /* @__PURE__ */ jsxs(Grid, { height: breadCrumb ? "56px" : "44px", alignItems: "center", cols: ["auto", "auto"], children: [
|
|
137
|
+
separator,
|
|
138
|
+
/* @__PURE__ */ jsx(Value, { withMarginRight: !!label, "data-testid": "page-header-value", children: value })
|
|
139
|
+
] }),
|
|
140
|
+
label && /* @__PURE__ */ jsx(Grid, { height: breadCrumb ? "56px" : "44px", alignItems: "center", children: /* @__PURE__ */ jsx(Label, { withBreadcrumb: !!breadCrumb, "data-testid": "page-header-label", children: label }) })
|
|
141
|
+
] }),
|
|
142
|
+
countActions > 0 && /* @__PURE__ */ jsxs(
|
|
143
|
+
Grid,
|
|
144
|
+
{
|
|
167
145
|
height: breadCrumb ? "56px" : "44px",
|
|
168
146
|
alignItems: "center",
|
|
169
|
-
cols: ["auto", "auto"],
|
|
147
|
+
cols: countActions === 1 ? ["auto"] : ["auto", "auto", "auto"],
|
|
170
148
|
children: [
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
"data-testid": "page-header-value",
|
|
175
|
-
children: value
|
|
176
|
-
})
|
|
149
|
+
firstAction && /* @__PURE__ */ jsx(Grid, { children: firstAction }),
|
|
150
|
+
countActions === 2 && separator,
|
|
151
|
+
secondAction && /* @__PURE__ */ jsx(Grid, { children: secondAction })
|
|
177
152
|
]
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
withBreadcrumb: !!breadCrumb,
|
|
184
|
-
"data-testid": "page-header-label",
|
|
185
|
-
children: label
|
|
186
|
-
})
|
|
187
|
-
})
|
|
188
|
-
]
|
|
189
|
-
}),
|
|
190
|
-
countActions > 0 && /* @__PURE__ */ jsxs(Grid, {
|
|
191
|
-
height: breadCrumb ? "56px" : "44px",
|
|
192
|
-
alignItems: "center",
|
|
193
|
-
cols: countActions === 1 ? ["auto"] : ["auto", "auto", "auto"],
|
|
194
|
-
children: [
|
|
195
|
-
firstAction && /* @__PURE__ */ jsx(Grid, {
|
|
196
|
-
children: firstAction
|
|
197
|
-
}),
|
|
198
|
-
countActions === 2 && separator,
|
|
199
|
-
secondAction && /* @__PURE__ */ jsx(Grid, {
|
|
200
|
-
children: secondAction
|
|
201
|
-
})
|
|
202
|
-
]
|
|
203
|
-
})
|
|
204
|
-
]
|
|
205
|
-
});
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
);
|
|
206
158
|
};
|
|
207
159
|
const pageHeaderProps = {
|
|
208
160
|
pageTitle: PropTypes.string.description("Page title").isRequired,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobilePageHeader/MobilePageHeader.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable no-plusplus */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled, border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MobileSeparator from '../MobileSeparator';\n\nconst StyledTitle = styled(Grid)`\n font-size: 22px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n min-height: ${(props) => (props.withBreadcrumb ? 'auto' : '44px')};\n padding-top: ${(props) => (props.withBreadcrumb ? '0' : '6px')};\n line-height: 1.15;\n`;\n\nconst StyledBreadCrumb = styled.div`\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['600']};\n ${truncate()}\n`;\n\nconst Label = styled.div`\n color: ${(props) => props.theme.colors.neutral['500']};\n ${truncate()}\n`;\n\nconst Value = styled.div`\n ${truncate()}\n color: ${(props) => props.theme.colors.neutral['600']};\n ${(props) => (props.withMarginRight ? `margin-right: 4px;` : '')}\n margin-top: ${(props) => (props.withBreadcrumb ? '12px' : '0')};\n`;\n\nconst Wrapper = styled(Grid)<{ withBlueBorder: boolean }>`\n border-bottom: ${({ theme, withBlueBorder }) =>\n border(withBlueBorder ? theme.colors.brand['700'] : theme.colors.neutral['300'])};\n`;\n\nconst MobilePageHeader = ({\n pageTitle = null,\n withBlueBorder = false,\n contextMenu = null,\n firstAction = null,\n secondAction = null,\n backArrow = null,\n breadCrumb = null,\n onOpenContextMenu = () => null,\n value,\n label,\n theme,\n}) => {\n const hasValue = value === 0 || value;\n\n const countActions = useMemo(() => {\n let count = 0;\n if (firstAction) count++;\n if (secondAction) count++;\n return count;\n }, [firstAction, secondAction]);\n const [open, setOpen] = useState();\n const handleContext = useCallback(() => {\n setOpen(!open);\n }, [open]);\n\n const separator = (\n <Grid height=\"32px\" alignItems=\"center\">\n <Grid height=\"24px\">\n <MobileSeparator direction=\"vertical\" margin=\"xxs\" color={['neutral', '300']} />\n </Grid>\n </Grid>\n );\n const cols = [1, 'auto'];\n const cols2 = ['auto'];\n if (countActions) cols.push('auto');\n if (hasValue) cols2.push('auto');\n if (label) cols2.push('auto');\n\n return (\n <Wrapper\n cols={cols}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"flex-start\"\n width=\"100%\"\n data-testid=\"page-header-wrapper\"\n withBlueBorder={withBlueBorder}\n >\n <Grid alignItems=\"flex-start\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid\n cols={backArrow ? ['auto', 1] : [1]}\n alignItems=\"flex-start\"\n pr={countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0}\n >\n {backArrow && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" pr=\"16px\">\n {backArrow}\n </Grid>\n )}\n <Grid flexGrow={0} pt={!breadCrumb ? 0 : theme.space.xxs}>\n <Grid>\n <Grid>\n {breadCrumb && <StyledBreadCrumb data-testid=\"page-header-breadcrum\">{breadCrumb}</StyledBreadCrumb>}\n <StyledTitle\n cols={['auto', '1fr']}\n gutter=\"xxxs\"\n maxWidth=\"100%\"\n alignItems=\"flex-start\"\n withBreadcrumb={!!breadCrumb}\n data-testid=\"page-header-title\"\n >\n <Grid pt={breadCrumb ? 0 : theme.space.xxxs} alignItems=\"flex-start\" justifyItems=\"center\">\n <TruncatedExpandableText value={pageTitle} />\n </Grid>\n {contextMenu ? (\n <Grid alignItems=\"center\">\n <DSButton\n buttonType=\"text\"\n icon={<ChevronSmallDown />}\n size=\"s\"\n onClick={() => {\n handleContext();\n onOpenContextMenu();\n }}\n containerProps={{ 'data-testid': 'trigger-context-menu' }}\n />\n {React.cloneElement(contextMenu, {\n open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,\n onChange: (event, item) => {\n if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);\n handleContext();\n },\n })}\n </Grid>\n ) : null}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n {hasValue && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\" cols={['auto', 'auto']}>\n {separator}\n <Value withMarginRight={!!label} data-testid=\"page-header-value\">\n {value}\n </Value>\n </Grid>\n )}\n {label && (\n <Grid height={breadCrumb ? '56px' : '44px'} alignItems=\"center\">\n <Label withBreadcrumb={!!breadCrumb} data-testid=\"page-header-label\">\n {label}\n </Label>\n </Grid>\n )}\n </Grid>\n {countActions > 0 && (\n <Grid\n height={breadCrumb ? '56px' : '44px'}\n alignItems=\"center\"\n cols={countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']}\n >\n {firstAction && <Grid>{firstAction}</Grid>}\n {countActions === 2 && separator}\n {secondAction && <Grid>{secondAction}</Grid>}\n </Grid>\n )}\n </Wrapper>\n );\n};\n\nconst pageHeaderProps = {\n pageTitle: PropTypes.string.description('Page title').isRequired,\n contextMenu: PropTypes.element.description('Context Menu to open'),\n onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),\n firstAction: PropTypes.element.description('Action Button'),\n secondAction: PropTypes.element.description('Action Button'),\n backArrow: PropTypes.element.description('Back Arrow Button'),\n breadCrumb: PropTypes.string.description('BreadCrumbs title'),\n value: PropTypes.number.description('Page summary value'),\n label: PropTypes.string.description('Page summary label'),\n theme: PropTypes.object.description('dimsum theme'),\n};\n\nMobilePageHeader.propTypes = pageHeaderProps;\nMobilePageHeader.displayName = 'MobilePageHeader';\nconst PageHeaderWithSchema = describe(MobilePageHeader);\nPageHeaderWithSchema.propTypes = pageHeaderProps;\n\nconst DSMobilePageHeader = withTheme(MobilePageHeader);\n\nexport { DSMobilePageHeader, PageHeaderWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC2Ef,cA+CY,YA/CZ;AAvER,OAAOA,UAAS,SAAS,UAAU,mBAAmB;AACtD,SAAS,UAAU,iBAAiB;AACpC,SAAS,QAAQ,QAAQ,UAAU,WAAW,gCAAgC;AAC9E,SAAS,+BAA+B;AACxC,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,OAAO,cAAc;AACrB,OAAO,qBAAqB;AAE5B,MAAM,cAAc,OAAO,IAAI;AAAA;AAAA,iBAEd,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAW,MAAM,iBAAiB,SAAS;AAAA,iBAC3C,CAAC,UAAW,MAAM,iBAAiB,MAAM;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,iBAEf,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,QAAQ,OAAO;AAAA,WACV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,QAAQ,OAAO;AAAA,IACjB,SAAS;AAAA,WACF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,CAAC,UAAW,MAAM,kBAAkB,uBAAuB;AAAA,gBAC/C,CAAC,UAAW,MAAM,iBAAiB,SAAS;AAAA;AAG5D,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAAC,EAAE,OAAO,eAAe,MACxC,OAAO,iBAAiB,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnF,MAAM,mBAAmB,CAAC;AAAA,EACxB,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,oBAAoB,MAAM;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,UAAU,KAAK;AAEhC,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,QAAQ;AACZ,QAAI;AAAa;AACjB,QAAI;AAAc;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,YAAY,CAAC;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS;AACjC,QAAM,gBAAgB,YAAY,MAAM;AACtC,YAAQ,CAAC,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YACJ,oBAAC
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -56,74 +56,55 @@ const MobileSelectList = ({
|
|
|
56
56
|
rows.push(op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
|
|
57
57
|
if (!open)
|
|
58
58
|
return null;
|
|
59
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
/* @__PURE__ */ jsxs(HeaderContainer, {
|
|
66
|
-
children: [
|
|
67
|
-
header,
|
|
68
|
-
useSearch && /* @__PURE__ */ jsx(Grid, {
|
|
69
|
-
alignItems: "center",
|
|
70
|
-
height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
|
|
71
|
-
pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
72
|
-
pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
73
|
-
children: /* @__PURE__ */ jsx(DSTextBox, {
|
|
74
|
-
onChange: handleOnSearch,
|
|
75
|
-
placeholder: "Filter by name",
|
|
76
|
-
value: filter
|
|
77
|
-
})
|
|
78
|
-
})
|
|
79
|
-
]
|
|
80
|
-
}),
|
|
81
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
82
|
-
style: { overflow: "hidden" },
|
|
83
|
-
children: /* @__PURE__ */ jsx(Grid, {
|
|
84
|
-
style: { overflow: "auto" },
|
|
85
|
-
children: /* @__PURE__ */ jsx(ListContainer, {
|
|
86
|
-
"data-testid": `${dataTestid}--list-container`,
|
|
87
|
-
children: React2.Children.map(children, (child) => {
|
|
88
|
-
let leftAddon = null;
|
|
89
|
-
let rightAddon = null;
|
|
90
|
-
const { value, title } = child.props;
|
|
91
|
-
const found = selecteds.findIndex((s) => String(s) === String(value));
|
|
92
|
-
if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
|
|
93
|
-
return null;
|
|
94
|
-
if (multiple) {
|
|
95
|
-
if (found > -1)
|
|
96
|
-
leftAddon = checked;
|
|
97
|
-
else
|
|
98
|
-
leftAddon = checkbox;
|
|
99
|
-
} else if (found > -1) {
|
|
100
|
-
rightAddon = selectedMark;
|
|
101
|
-
}
|
|
102
|
-
return /* @__PURE__ */ jsx(DSMobileTouchable, {
|
|
103
|
-
onClick: handleChange.bind(child.props),
|
|
104
|
-
children: React2.cloneElement(child, { leftAddon, rightAddon })
|
|
105
|
-
});
|
|
106
|
-
})
|
|
107
|
-
})
|
|
108
|
-
})
|
|
109
|
-
}),
|
|
110
|
-
buttonFooter && /* @__PURE__ */ jsx(Footer, {
|
|
59
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(StyledContainer, { "data-testid": dataTestid, rows, zIndex, children: [
|
|
60
|
+
/* @__PURE__ */ jsxs(HeaderContainer, { children: [
|
|
61
|
+
header,
|
|
62
|
+
useSearch && /* @__PURE__ */ jsx(
|
|
63
|
+
Grid,
|
|
64
|
+
{
|
|
111
65
|
alignItems: "center",
|
|
66
|
+
height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
|
|
112
67
|
pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
113
68
|
pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
114
|
-
children:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
69
|
+
children: /* @__PURE__ */ jsx(DSTextBox, { onChange: handleOnSearch, placeholder: "Filter by name", value: filter })
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
] }),
|
|
73
|
+
/* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "auto" }, children: /* @__PURE__ */ jsx(ListContainer, { "data-testid": `${dataTestid}--list-container`, children: React2.Children.map(children, (child) => {
|
|
74
|
+
let leftAddon = null;
|
|
75
|
+
let rightAddon = null;
|
|
76
|
+
const { value, title } = child.props;
|
|
77
|
+
const found = selecteds.findIndex((s) => String(s) === String(value));
|
|
78
|
+
if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
|
|
79
|
+
return null;
|
|
80
|
+
if (multiple) {
|
|
81
|
+
if (found > -1)
|
|
82
|
+
leftAddon = checked;
|
|
83
|
+
else
|
|
84
|
+
leftAddon = checkbox;
|
|
85
|
+
} else if (found > -1) {
|
|
86
|
+
rightAddon = selectedMark;
|
|
87
|
+
}
|
|
88
|
+
return /* @__PURE__ */ jsx(DSMobileTouchable, { onClick: handleChange.bind(child.props), children: React2.cloneElement(child, { leftAddon, rightAddon }) });
|
|
89
|
+
}) }) }) }),
|
|
90
|
+
buttonFooter && /* @__PURE__ */ jsx(
|
|
91
|
+
Footer,
|
|
92
|
+
{
|
|
93
|
+
alignItems: "center",
|
|
94
|
+
pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
95
|
+
pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
96
|
+
children: React2.cloneElement(buttonFooter, {
|
|
97
|
+
...buttonFooter.props,
|
|
98
|
+
containerProps: {
|
|
99
|
+
"data-testid": `${dataTestid}--btn`
|
|
100
|
+
},
|
|
101
|
+
buttonType: "primary",
|
|
102
|
+
size: "l",
|
|
103
|
+
onClick: handleApply.bind(buttonFooter.props)
|
|
123
104
|
})
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
});
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
] }) });
|
|
127
108
|
};
|
|
128
109
|
const DSMobileSelectList = withTheme(MobileSelectList);
|
|
129
110
|
MobileSelectList.propTypes = {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSelectList/MobileSelectList.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint react/jsx-no-bind:0 react/no-this-in-sfc:0 */\nimport React, { useState, useEffect } from 'react';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTextBox } from '@elliemae/ds-form';\nimport { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from './styled';\n\nconst MobileSelectList = ({\n open = false,\n header = null,\n multiple = false,\n onChange = noop,\n children,\n theme,\n zIndex = 1,\n useSearch,\n onSearch = noop,\n dataTestid = 'mobile-select-list',\n buttonFooter = null,\n onApply = noop,\n selecteds: initSelecteds = [],\n}) => {\n const rows = ['auto', 1];\n const [selecteds, setSelected] = useState(initSelecteds);\n const [filter, setFilter] = useState('');\n useEffect(() => {\n setSelected(initSelecteds);\n }, [initSelecteds]);\n\n const handleSelection = (value) => {\n if (multiple) {\n const index = selecteds.findIndex((s) => s === value);\n if (index > -1) setSelected(selecteds.filter((s) => s !== value));\n else setSelected([...selecteds, value]);\n } else setSelected([value]);\n };\n const handleChange = function (event) {\n onChange(event, this);\n handleSelection(this.value);\n };\n const handleOnSearch = (e) => {\n setFilter(e.target.value);\n onSearch(e);\n };\n\n const handleApply = function (e) {\n if (this.onClick) this.onClick(e);\n onApply(e, selecteds);\n };\n if (buttonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));\n if (!open) return null;\n return (\n <>\n <StyledContainer data-testid={dataTestid} rows={rows} zIndex={zIndex}>\n <HeaderContainer>\n {header}\n {useSearch && (\n <Grid\n alignItems=\"center\"\n height={__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)}\n pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n >\n <DSTextBox onChange={handleOnSearch} placeholder=\"Filter by name\" value={filter} />\n </Grid>\n )}\n </HeaderContainer>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>\n <ListContainer data-testid={`${dataTestid}--list-container`}>\n {React.Children.map(children, (child) => {\n let leftAddon = null;\n let rightAddon = null;\n const { value, title } = child.props;\n const found = selecteds.findIndex((s) => String(s) === String(value));\n if (\n filter &&\n !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) &&\n !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase())\n )\n return null;\n if (multiple) {\n if (found > -1) leftAddon = checked;\n else leftAddon = checkbox;\n } else if (found > -1) {\n rightAddon = selectedMark;\n }\n return (\n <DSMobileTouchable onClick={handleChange.bind(child.props)}>\n {React.cloneElement(child, { leftAddon, rightAddon })}\n </DSMobileTouchable>\n );\n })}\n </ListContainer>\n </Grid>\n </Grid>\n {buttonFooter && (\n <Footer\n alignItems=\"center\"\n // eslint-disable-next-line max-lines\n pl={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n pr={__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)}\n >\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 </Footer>\n )}\n </StyledContainer>\n </>\n );\n};\n\nconst DSMobileSelectList = withTheme(MobileSelectList);\n\nMobileSelectList.propTypes = {\n /** show select list */\n open: PropTypes.bool,\n /** DSMobilePageHeader instance */\n header: PropTypes.element,\n /** called when a DSMobileListItem is touched */\n onChange: PropTypes.func,\n /** allow multiple selection */\n multiple: PropTypes.bool,\n /** Array of DSMobileListItem instances */\n children: PropTypes.arrayOf(PropTypes.element),\n /** data test id for testing purposes */\n dataTestid: PropTypes.string,\n /** footer action, DSButton instance */\n buttonFooter: PropTypes.element,\n /** called when footer action is triggered */\n onApply: PropTypes.func,\n /** zIndex */\n zIndex: PropTypes.number,\n /** init selecteds */\n selecteds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n theme: PropTypes.object.isRequired,\n useSearch: PropTypes.bool,\n onSearch: PropTypes.func,\n};\n\nexport { DSMobileSelectList };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuDnB,mBAWU,KATN,YAFJ;AAtDJ,OAAOA,UAAS,UAAU,iBAAiB;AAC3C,SAAS,YAAY;AACrB,OAAO,eAAe;AACtB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,IAAI,WAAW,gCAAgC;AACxD,SAAS,yBAAyB;AAClC,SAAS,iBAAiB,iBAAiB,QAAQ,eAAe,UAAU,SAAS,oBAAoB;AAEzG,MAAM,mBAAmB,CAAC;AAAA,EACxB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW,gBAAgB,CAAC;AAC9B,MAAM;AACJ,QAAM,OAAO,CAAC,QAAQ,CAAC;AACvB,QAAM,CAAC,WAAW,WAAW,IAAI,SAAS,aAAa;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,YAAU,MAAM;AACd,gBAAY,aAAa;AAAA,EAC3B,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,kBAAkB,CAAC,UAAU;AACjC,QAAI,UAAU;AACZ,YAAM,QAAQ,UAAU,UAAU,CAAC,MAAM,MAAM,KAAK;AACpD,UAAI,QAAQ;AAAI,oBAAY,UAAU,OAAO,CAAC,MAAM,MAAM,KAAK,CAAC;AAAA;AAC3D,oBAAY,CAAC,GAAG,WAAW,KAAK,CAAC;AAAA,IACxC;AAAO,kBAAY,CAAC,KAAK,CAAC;AAAA,EAC5B;AACA,QAAM,eAAe,SAAU,OAAO;AACpC,aAAS,OAAO,IAAI;AACpB,oBAAgB,KAAK,KAAK;AAAA,EAC5B;AACA,QAAM,iBAAiB,CAAC,MAAM;AAC5B,cAAU,EAAE,OAAO,KAAK;AACxB,aAAS,CAAC;AAAA,EACZ;AAEA,QAAM,cAAc,SAAU,GAAG;AAC/B,QAAI,KAAK;AAAS,WAAK,QAAQ,CAAC;AAChC,YAAQ,GAAG,SAAS;AAAA,EACtB;AACA,MAAI;AAAc,SAAK,KAAK,GAAG,KAAK,yBAAyB,MAAM,MAAM,EAAE,GAAG,OAAO,CAAC;AACtF,MAAI,CAAC;AAAM,WAAO;AAClB,SACE
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -29,19 +29,9 @@ const ListContainer = styled.div`
|
|
|
29
29
|
border: none;
|
|
30
30
|
}
|
|
31
31
|
`;
|
|
32
|
-
const checkbox = /* @__PURE__ */ jsx(DSCheckbox, {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
style: { pointerEvents: "none" }
|
|
36
|
-
});
|
|
37
|
-
const checked = /* @__PURE__ */ jsx(DSCheckbox, {
|
|
38
|
-
checked: true,
|
|
39
|
-
onChange: noop,
|
|
40
|
-
style: { pointerEvents: "none" }
|
|
41
|
-
});
|
|
42
|
-
const selectedMark = /* @__PURE__ */ jsx(Checkmark, {
|
|
43
|
-
color: ["brand-primary", 600]
|
|
44
|
-
});
|
|
32
|
+
const checkbox = /* @__PURE__ */ jsx(DSCheckbox, { checked: false, onChange: noop, style: { pointerEvents: "none" } });
|
|
33
|
+
const checked = /* @__PURE__ */ jsx(DSCheckbox, { checked: true, onChange: noop, style: { pointerEvents: "none" } });
|
|
34
|
+
const selectedMark = /* @__PURE__ */ jsx(Checkmark, { color: ["brand-primary", 600] });
|
|
45
35
|
export {
|
|
46
36
|
Footer,
|
|
47
37
|
HeaderContainer,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSelectList/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { noop } from 'lodash';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { border } from '@elliemae/ds-system';\nimport { DSMobileTouchable } from '../MobileTouchable';\nimport { DSMobileListItem } from '../MobileListItem';\n\nexport const StyledContainer = styled(Grid)`\n background: ${(props) => props.theme.colors.neutral['000']};\n z-index: ${(props) => props.zIndex};\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n`;\n\nexport const HeaderContainer = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const Footer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const ListContainer = styled.div`\n & ${DSMobileTouchable}:last-child ${DSMobileListItem} {\n border: none;\n }\n`;\n\nexport const checkbox = <DSCheckbox checked={false} onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const checked = <DSCheckbox checked onChange={noop} style={{ pointerEvents: 'none' }} />;\nexport const selectedMark = <Checkmark color={['brand-primary', 600]} />;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmCC;AAlCxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,kBAAkB,OAAO,IAAI;AAAA,mBACvB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG/D,MAAM,SAAS,OAAO,IAAI;AAAA,gBACjB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG5D,MAAM,gBAAgB,OAAO;AAAA,MAC9B,gCAAgC;AAAA;AAAA;AAAA;AAK/B,MAAM,WAAW,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmCC;AAlCxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,kBAAkB,OAAO,IAAI;AAAA,mBACvB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG/D,MAAM,SAAS,OAAO,IAAI;AAAA,gBACjB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAG5D,MAAM,gBAAgB,OAAO;AAAA,MAC9B,gCAAgC;AAAA;AAAA;AAAA;AAK/B,MAAM,WAAW,oBAAC,cAAW,SAAS,OAAO,UAAU,MAAM,OAAO,EAAE,eAAe,OAAO,GAAG;AAC/F,MAAM,UAAU,oBAAC,cAAW,SAAO,MAAC,UAAU,MAAM,OAAO,EAAE,eAAe,OAAO,GAAG;AACtF,MAAM,eAAe,oBAAC,aAAU,OAAO,CAAC,iBAAiB,GAAG,GAAG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,9 +18,7 @@ const MobileSeparator = ({ color = ["neutral", "800"], direction = "horizontal",
|
|
|
18
18
|
borderType: type,
|
|
19
19
|
color
|
|
20
20
|
};
|
|
21
|
-
return /* @__PURE__ */ jsx(Separator, {
|
|
22
|
-
...styles
|
|
23
|
-
});
|
|
21
|
+
return /* @__PURE__ */ jsx(Separator, { ...styles });
|
|
24
22
|
};
|
|
25
23
|
const mobileSeparatorProps = {
|
|
26
24
|
type: PropTypes.oneOf(["solid", "dashed"]).description("Style type of separator").defaultValue("solid"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSeparator/Separator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst Separator = styled(Grid)`\n border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};\n`;\n\nconst MobileSeparator = ({ color = ['neutral', '800'], direction = 'horizontal', type = 'solid', margin = 'xs' }) => {\n const orientation = direction === 'vertical' ? 'height' : 'width';\n const xORy = direction === 'vertical' ? 'mx' : 'my';\n const styles = {\n width: 0,\n height: 0,\n [orientation]: '100%',\n [xORy]: margin,\n borderType: type,\n color,\n };\n return <Separator {...styles} />;\n};\n\nconst mobileSeparatorProps = {\n type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),\n direction: PropTypes.oneOf(['vertical', 'horizontal'])\n .description('Direction of the separator')\n .defaultValue('horizontal'),\n color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),\n margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'])\n .description('Margin of the separator')\n .defaultValue('xs'),\n};\n\nMobileSeparator.propTypes = mobileSeparatorProps;\nMobileSeparator.displayName = 'MobileSeparator';\nconst MobileSeparatorWithSchema = describe(MobileSeparator);\nMobileSeparatorWithSchema.propTypes = mobileSeparatorProps;\n\nexport { MobileSeparatorWithSchema };\nexport default MobileSeparator;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACqBd;AApBT,SAAS,UAAU,iBAAiB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,WAAW,MAAM,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,WAAW,MAAM,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,KAAK,MAAM;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBd;AApBT,SAAS,UAAU,iBAAiB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,EAAE,OAAO,OAAO,WAAW,MAAM,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA,iBAC5E,CAAC,EAAE,OAAO,OAAO,WAAW,MAAM,GAAG,MAAM,OAAO,MAAM,IAAI,MAAM,WAAW;AAAA;AAG9F,MAAM,kBAAkB,CAAC,EAAE,QAAQ,CAAC,WAAW,KAAK,GAAG,YAAY,cAAc,OAAO,SAAS,SAAS,KAAK,MAAM;AACnH,QAAM,cAAc,cAAc,aAAa,WAAW;AAC1D,QAAM,OAAO,cAAc,aAAa,OAAO;AAC/C,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,CAAC,cAAc;AAAA,IACf,CAAC,OAAO;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,EACF;AACA,SAAO,oBAAC,aAAW,GAAG,QAAQ;AAChC;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM,UAAU,MAAM,CAAC,SAAS,QAAQ,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,OAAO;AAAA,EACtG,WAAW,UAAU,MAAM,CAAC,YAAY,YAAY,CAAC,EAClD,YAAY,4BAA4B,EACxC,aAAa,YAAY;AAAA,EAC5B,OAAO,UAAU,MAAM,YAAY,wBAAwB,EAAE,aAAa,CAAC,WAAW,KAAK,CAAC;AAAA,EAC5F,QAAQ,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAC9D,YAAY,yBAAyB,EACrC,aAAa,IAAI;AACtB;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
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/MobileTimePicker/Input.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n input[type=time]& { \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=time]&:active, input[type=time]&: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=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-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,OAAO,gCAAgC;AAChD,SAAS,cAAc;AAEvB,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,OAAO,gCAAgC;AAChD,SAAS,cAAc;AAEvB,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
|
}
|
|
@@ -22,39 +22,48 @@ const DSMobileTimePicker = ({ disabled, value, tabIndex, placeholder, onChange }
|
|
|
22
22
|
const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
|
|
23
23
|
return `${h} : ${valueArr[1]} ${ampm}`;
|
|
24
24
|
}, [value]);
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"data-testid": "ds-mobile-time-picker",
|
|
42
|
-
"aria-label": "Time Picker Input Mask",
|
|
43
|
-
disabled,
|
|
44
|
-
placeholder,
|
|
45
|
-
tabIndex,
|
|
46
|
-
value,
|
|
47
|
-
"data-displayvalue": displayValue,
|
|
48
|
-
onChange: (e) => {
|
|
49
|
-
const { target } = e.nativeEvent;
|
|
50
|
-
function iosClearDefault() {
|
|
51
|
-
target.defaultValue = "";
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
|
+
DSInputGroup,
|
|
27
|
+
{
|
|
28
|
+
rightAddon: /* @__PURE__ */ jsx(
|
|
29
|
+
DSButton,
|
|
30
|
+
{
|
|
31
|
+
"aria-label": "Time Picker Button",
|
|
32
|
+
color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
|
|
33
|
+
disabled,
|
|
34
|
+
icon: /* @__PURE__ */ jsx(RecentDocuments, {}),
|
|
35
|
+
type: "button",
|
|
36
|
+
buttonType: "secondary",
|
|
37
|
+
onClick: () => {
|
|
38
|
+
inputRef.current.focus();
|
|
39
|
+
inputRef.current.click();
|
|
40
|
+
}
|
|
52
41
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
42
|
+
),
|
|
43
|
+
children: /* @__PURE__ */ jsx(
|
|
44
|
+
Input,
|
|
45
|
+
{
|
|
46
|
+
innerRef: inputRef,
|
|
47
|
+
type: "time",
|
|
48
|
+
"data-testid": "ds-mobile-time-picker",
|
|
49
|
+
"aria-label": "Time Picker Input Mask",
|
|
50
|
+
disabled,
|
|
51
|
+
placeholder,
|
|
52
|
+
tabIndex,
|
|
53
|
+
value,
|
|
54
|
+
"data-displayvalue": displayValue,
|
|
55
|
+
onChange: (e) => {
|
|
56
|
+
const { target } = e.nativeEvent;
|
|
57
|
+
function iosClearDefault() {
|
|
58
|
+
target.defaultValue = "";
|
|
59
|
+
}
|
|
60
|
+
window.setTimeout(iosClearDefault, 0);
|
|
61
|
+
onChange(e);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
);
|
|
58
67
|
};
|
|
59
68
|
DSMobileTimePicker.defaultProps = {
|
|
60
69
|
disabled: false,
|