@elliemae/ds-mobile 3.38.0-rc.1 → 3.38.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/MobileSelectList/MobileSelectList.js +20 -7
- package/dist/cjs/MobileSelectList/MobileSelectList.js.map +2 -2
- package/dist/esm/MobileSelectList/MobileSelectList.js +21 -8
- package/dist/esm/MobileSelectList/MobileSelectList.js.map +2 -2
- package/dist/types/MobileSelectList/MobileSelectList.d.ts +1 -0
- package/package.json +19 -18
|
@@ -53,6 +53,7 @@ const MobileSelectList = ({
|
|
|
53
53
|
onSearch = import_lodash.noop,
|
|
54
54
|
dataTestid = "mobile-select-list",
|
|
55
55
|
buttonFooter = null,
|
|
56
|
+
ButtonFooter,
|
|
56
57
|
onApply = import_lodash.noop,
|
|
57
58
|
selecteds: initSelecteds = []
|
|
58
59
|
}) => {
|
|
@@ -81,9 +82,9 @@ const MobileSelectList = ({
|
|
|
81
82
|
if (this.onClick) this.onClick(e);
|
|
82
83
|
onApply(e, selecteds);
|
|
83
84
|
};
|
|
84
|
-
if (buttonFooter) rows.push((0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 1.16666));
|
|
85
|
+
if (buttonFooter || ButtonFooter) rows.push((0, import_ds_system.op)("*", (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.xl), 1.16666));
|
|
85
86
|
if (!open) return null;
|
|
86
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
87
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledContainer, { "data-testid": dataTestid, rows, zIndex, children: [
|
|
87
88
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.HeaderContainer, { children: [
|
|
88
89
|
header,
|
|
89
90
|
useSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -112,13 +113,13 @@ const MobileSelectList = ({
|
|
|
112
113
|
}
|
|
113
114
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MobileTouchable.DSMobileTouchable, { onClick: handleChange.bind(child.props), children: import_react.default.cloneElement(child, { leftAddon, rightAddon }) });
|
|
114
115
|
}) }) }) }),
|
|
115
|
-
buttonFooter
|
|
116
|
+
ButtonFooter || Boolean(buttonFooter) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
117
|
import_styled.Footer,
|
|
117
118
|
{
|
|
118
119
|
alignItems: "center",
|
|
119
120
|
pl: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
|
|
120
121
|
pr: (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(theme.space.s),
|
|
121
|
-
children: import_react.default.cloneElement(buttonFooter, {
|
|
122
|
+
children: !ButtonFooter ? import_react.default.cloneElement(buttonFooter, {
|
|
122
123
|
...buttonFooter.props,
|
|
123
124
|
containerProps: {
|
|
124
125
|
"data-testid": `${dataTestid}--btn`
|
|
@@ -126,10 +127,20 @@ const MobileSelectList = ({
|
|
|
126
127
|
buttonType: "primary",
|
|
127
128
|
size: "l",
|
|
128
129
|
onClick: handleApply.bind(buttonFooter.props)
|
|
129
|
-
})
|
|
130
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
|
+
ButtonFooter,
|
|
132
|
+
{
|
|
133
|
+
containerProps: {
|
|
134
|
+
"data-testid": `${dataTestid}--btn`
|
|
135
|
+
},
|
|
136
|
+
buttonType: "primary",
|
|
137
|
+
size: "l",
|
|
138
|
+
onClick: handleApply
|
|
139
|
+
}
|
|
140
|
+
)
|
|
130
141
|
}
|
|
131
|
-
)
|
|
132
|
-
] })
|
|
142
|
+
) : null
|
|
143
|
+
] });
|
|
133
144
|
};
|
|
134
145
|
const DSMobileSelectList = (0, import_ds_system.withTheme)(MobileSelectList);
|
|
135
146
|
MobileSelectList.propTypes = {
|
|
@@ -147,6 +158,8 @@ MobileSelectList.propTypes = {
|
|
|
147
158
|
dataTestid: import_prop_types.default.string,
|
|
148
159
|
/** footer action, DSButton instance */
|
|
149
160
|
buttonFooter: import_prop_types.default.element,
|
|
161
|
+
/** footer action, DSButton instance */
|
|
162
|
+
ButtonFooter: import_prop_types.default.func,
|
|
150
163
|
/** called when footer action is triggered */
|
|
151
164
|
onApply: import_prop_types.default.func,
|
|
152
165
|
/** zIndex */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobileSelectList/MobileSelectList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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/index.js';\nimport { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from './styled.js';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* 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/index.js';\nimport { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from './styled.js';\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 ButtonFooter,\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 || ButtonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));\n if (!open) return null;\n return (\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 || Boolean(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 {!ButtonFooter ? (\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 ) : (\n <ButtonFooter\n containerProps={{\n 'data-testid': `${dataTestid}--btn`,\n }}\n buttonType=\"primary\"\n size=\"l\"\n onClick={handleApply}\n />\n )}\n </Footer>\n ) : null}\n </StyledContainer>\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 /** footer action, DSButton instance */\n ButtonFooter: PropTypes.func,\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDjB;AAxDN,mBAA2C;AAC3C,oBAAqB;AACrB,wBAAsB;AACtB,qBAAqB;AACrB,qBAA0B;AAC1B,uBAAwD;AACxD,6BAAkC;AAClC,oBAAyG;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;AAAA,EACA,UAAU;AAAA,EACV,WAAW,gBAAgB,CAAC;AAC9B,MAAM;AACJ,QAAM,OAAO,CAAC,QAAQ,CAAC;AACvB,QAAM,CAAC,WAAW,WAAW,QAAI,uBAAS,aAAa;AACvD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AACvC,8BAAU,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,GAAI,aAAY,UAAU,OAAO,CAAC,MAAM,MAAM,KAAK,CAAC;AAAA,UAC3D,aAAY,CAAC,GAAG,WAAW,KAAK,CAAC;AAAA,IACxC,MAAO,aAAY,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,QAAS,MAAK,QAAQ,CAAC;AAChC,YAAQ,GAAG,SAAS;AAAA,EACtB;AACA,MAAI,gBAAgB,aAAc,MAAK,SAAK,qBAAG,SAAK,2CAAyB,MAAM,MAAM,EAAE,GAAG,OAAO,CAAC;AACtG,MAAI,CAAC,KAAM,QAAO;AAClB,SACE,6CAAC,iCAAgB,eAAa,YAAY,MAAY,QACpD;AAAA,iDAAC,iCACE;AAAA;AAAA,MACA,aACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,YAAQ,2CAAyB,MAAM,MAAM,EAAE;AAAA,UAC/C,QAAI,2CAAyB,MAAM,MAAM,CAAC;AAAA,UAC1C,QAAI,2CAAyB,MAAM,MAAM,CAAC;AAAA,UAE1C,sDAAC,4BAAU,UAAU,gBAAgB,aAAY,kBAAiB,OAAO,QAAQ;AAAA;AAAA,MACnF;AAAA,OAEJ;AAAA,IACA,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,OAAO,GAC9B,sDAAC,+BAAc,eAAa,GAAG,UAAU,oBACtC,uBAAAA,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,UAAI,YAAY;AAChB,UAAI,aAAa;AACjB,YAAM,EAAE,OAAO,MAAM,IAAI,MAAM;AAC/B,YAAM,QAAQ,UAAU,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,OAAO,KAAK,CAAC;AACpE,UACE,UACA,CAAC,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,OAAO,kBAAkB,CAAC,KACtE,CAAC,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,OAAO,kBAAkB,CAAC;AAEtE,eAAO;AACT,UAAI,UAAU;AACZ,YAAI,QAAQ,GAAI,aAAY;AAAA,YACvB,aAAY;AAAA,MACnB,WAAW,QAAQ,IAAI;AACrB,qBAAa;AAAA,MACf;AACA,aACE,4CAAC,4CAAkB,SAAS,aAAa,KAAK,MAAM,KAAK,GACtD,uBAAAA,QAAM,aAAa,OAAO,EAAE,WAAW,WAAW,CAAC,GACtD;AAAA,IAEJ,CAAC,GACH,GACF,GACF;AAAA,IACC,gBAAgB,QAAQ,YAAY,IACnC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QAEX,QAAI,2CAAyB,MAAM,MAAM,CAAC;AAAA,QAC1C,QAAI,2CAAyB,MAAM,MAAM,CAAC;AAAA,QAEzC,WAAC,eACA,aAAAA,QAAM,aAAa,cAAc;AAAA,UAC/B,GAAG,aAAa;AAAA,UAChB,gBAAgB;AAAA,YACd,eAAe,GAAG,UAAU;AAAA,UAC9B;AAAA,UACA,YAAY;AAAA,UACZ,MAAM;AAAA,UACN,SAAS,YAAY,KAAK,aAAa,KAAK;AAAA,QAC9C,CAAC,IAED;AAAA,UAAC;AAAA;AAAA,YACC,gBAAgB;AAAA,cACd,eAAe,GAAG,UAAU;AAAA,YAC9B;AAAA,YACA,YAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAS;AAAA;AAAA,QACX;AAAA;AAAA,IAEJ,IACE;AAAA,KACN;AAEJ;AAEA,MAAM,yBAAqB,4BAAU,gBAAgB;AAErD,iBAAiB,YAAY;AAAA;AAAA,EAE3B,MAAM,kBAAAC,QAAU;AAAA;AAAA,EAEhB,QAAQ,kBAAAA,QAAU;AAAA;AAAA,EAElB,UAAU,kBAAAA,QAAU;AAAA;AAAA,EAEpB,UAAU,kBAAAA,QAAU;AAAA;AAAA,EAEpB,UAAU,kBAAAA,QAAU,QAAQ,kBAAAA,QAAU,OAAO;AAAA;AAAA,EAE7C,YAAY,kBAAAA,QAAU;AAAA;AAAA,EAEtB,cAAc,kBAAAA,QAAU;AAAA;AAAA,EAExB,cAAc,kBAAAA,QAAU;AAAA;AAAA,EAExB,SAAS,kBAAAA,QAAU;AAAA;AAAA,EAEnB,QAAQ,kBAAAA,QAAU;AAAA;AAAA,EAElB,WAAW,kBAAAA,QAAU,QAAQ,kBAAAA,QAAU,UAAU,CAAC,kBAAAA,QAAU,QAAQ,kBAAAA,QAAU,MAAM,CAAC,CAAC;AAAA,EACtF,OAAO,kBAAAA,QAAU,OAAO;AAAA,EACxB,WAAW,kBAAAA,QAAU;AAAA,EACrB,UAAU,kBAAAA,QAAU;AACtB;",
|
|
6
6
|
"names": ["React", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2, { useState, useEffect } from "react";
|
|
4
4
|
import { noop } from "lodash";
|
|
5
5
|
import PropTypes from "prop-types";
|
|
@@ -20,6 +20,7 @@ const MobileSelectList = ({
|
|
|
20
20
|
onSearch = noop,
|
|
21
21
|
dataTestid = "mobile-select-list",
|
|
22
22
|
buttonFooter = null,
|
|
23
|
+
ButtonFooter,
|
|
23
24
|
onApply = noop,
|
|
24
25
|
selecteds: initSelecteds = []
|
|
25
26
|
}) => {
|
|
@@ -48,9 +49,9 @@ const MobileSelectList = ({
|
|
|
48
49
|
if (this.onClick) this.onClick(e);
|
|
49
50
|
onApply(e, selecteds);
|
|
50
51
|
};
|
|
51
|
-
if (buttonFooter) rows.push(op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
|
|
52
|
+
if (buttonFooter || ButtonFooter) rows.push(op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
|
|
52
53
|
if (!open) return null;
|
|
53
|
-
return /* @__PURE__ */
|
|
54
|
+
return /* @__PURE__ */ jsxs(StyledContainer, { "data-testid": dataTestid, rows, zIndex, children: [
|
|
54
55
|
/* @__PURE__ */ jsxs(HeaderContainer, { children: [
|
|
55
56
|
header,
|
|
56
57
|
useSearch && /* @__PURE__ */ jsx(
|
|
@@ -79,13 +80,13 @@ const MobileSelectList = ({
|
|
|
79
80
|
}
|
|
80
81
|
return /* @__PURE__ */ jsx(DSMobileTouchable, { onClick: handleChange.bind(child.props), children: React2.cloneElement(child, { leftAddon, rightAddon }) });
|
|
81
82
|
}) }) }) }),
|
|
82
|
-
buttonFooter
|
|
83
|
+
ButtonFooter || Boolean(buttonFooter) ? /* @__PURE__ */ jsx(
|
|
83
84
|
Footer,
|
|
84
85
|
{
|
|
85
86
|
alignItems: "center",
|
|
86
87
|
pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
87
88
|
pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
|
|
88
|
-
children: React2.cloneElement(buttonFooter, {
|
|
89
|
+
children: !ButtonFooter ? React2.cloneElement(buttonFooter, {
|
|
89
90
|
...buttonFooter.props,
|
|
90
91
|
containerProps: {
|
|
91
92
|
"data-testid": `${dataTestid}--btn`
|
|
@@ -93,10 +94,20 @@ const MobileSelectList = ({
|
|
|
93
94
|
buttonType: "primary",
|
|
94
95
|
size: "l",
|
|
95
96
|
onClick: handleApply.bind(buttonFooter.props)
|
|
96
|
-
})
|
|
97
|
+
}) : /* @__PURE__ */ jsx(
|
|
98
|
+
ButtonFooter,
|
|
99
|
+
{
|
|
100
|
+
containerProps: {
|
|
101
|
+
"data-testid": `${dataTestid}--btn`
|
|
102
|
+
},
|
|
103
|
+
buttonType: "primary",
|
|
104
|
+
size: "l",
|
|
105
|
+
onClick: handleApply
|
|
106
|
+
}
|
|
107
|
+
)
|
|
97
108
|
}
|
|
98
|
-
)
|
|
99
|
-
] })
|
|
109
|
+
) : null
|
|
110
|
+
] });
|
|
100
111
|
};
|
|
101
112
|
const DSMobileSelectList = withTheme(MobileSelectList);
|
|
102
113
|
MobileSelectList.propTypes = {
|
|
@@ -114,6 +125,8 @@ MobileSelectList.propTypes = {
|
|
|
114
125
|
dataTestid: PropTypes.string,
|
|
115
126
|
/** footer action, DSButton instance */
|
|
116
127
|
buttonFooter: PropTypes.element,
|
|
128
|
+
/** footer action, DSButton instance */
|
|
129
|
+
ButtonFooter: PropTypes.func,
|
|
117
130
|
/** called when footer action is triggered */
|
|
118
131
|
onApply: PropTypes.func,
|
|
119
132
|
/** zIndex */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileSelectList/MobileSelectList.tsx"],
|
|
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/index.js';\nimport { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from './styled.js';\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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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/index.js';\nimport { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from './styled.js';\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 ButtonFooter,\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 || ButtonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));\n if (!open) return null;\n return (\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 || Boolean(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 {!ButtonFooter ? (\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 ) : (\n <ButtonFooter\n containerProps={{\n 'data-testid': `${dataTestid}--btn`,\n }}\n buttonType=\"primary\"\n size=\"l\"\n onClick={handleApply}\n />\n )}\n </Footer>\n ) : null}\n </StyledContainer>\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 /** footer action, DSButton instance */\n ButtonFooter: PropTypes.func,\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": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -13,6 +13,7 @@ declare const DSMobileSelectList: React.ForwardRefExoticComponent<{
|
|
|
13
13
|
selecteds?: never[] | undefined;
|
|
14
14
|
useSearch?: boolean | null | undefined;
|
|
15
15
|
onSearch?: ((...args: any[]) => void) | undefined;
|
|
16
|
+
ButtonFooter?: ((...args: any[]) => any) | null | undefined;
|
|
16
17
|
} & {
|
|
17
18
|
theme?: import("styled-components").DefaultTheme | undefined;
|
|
18
19
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "3.38.0-rc.
|
|
3
|
+
"version": "3.38.0-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -44,29 +44,29 @@
|
|
|
44
44
|
"prop-types": "~15.8.1",
|
|
45
45
|
"react-window": "~1.8.8",
|
|
46
46
|
"react-window-infinite-loader": "~1.0.8",
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-button": "3.38.0-rc.
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-form": "3.38.0-rc.
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-system": "3.38.0-rc.
|
|
60
|
-
"@elliemae/ds-shared": "3.38.0-rc.
|
|
61
|
-
"@elliemae/ds-tabs": "3.38.0-rc.
|
|
62
|
-
"@elliemae/ds-truncated-expandable-text": "3.38.0-rc.
|
|
47
|
+
"@elliemae/ds-backdrop": "3.38.0-rc.4",
|
|
48
|
+
"@elliemae/ds-button": "3.38.0-rc.4",
|
|
49
|
+
"@elliemae/ds-accordion": "3.38.0-rc.4",
|
|
50
|
+
"@elliemae/ds-circular-progress-indicator": "3.38.0-rc.4",
|
|
51
|
+
"@elliemae/ds-form": "3.38.0-rc.4",
|
|
52
|
+
"@elliemae/ds-form-checkbox": "3.38.0-rc.4",
|
|
53
|
+
"@elliemae/ds-grid": "3.38.0-rc.4",
|
|
54
|
+
"@elliemae/ds-button-v2": "3.38.0-rc.4",
|
|
55
|
+
"@elliemae/ds-icon": "3.38.0-rc.4",
|
|
56
|
+
"@elliemae/ds-icons": "3.38.0-rc.4",
|
|
57
|
+
"@elliemae/ds-props-helpers": "3.38.0-rc.4",
|
|
58
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.38.0-rc.4",
|
|
59
|
+
"@elliemae/ds-system": "3.38.0-rc.4",
|
|
60
|
+
"@elliemae/ds-shared": "3.38.0-rc.4",
|
|
61
|
+
"@elliemae/ds-tabs": "3.38.0-rc.4",
|
|
62
|
+
"@elliemae/ds-truncated-expandable-text": "3.38.0-rc.4"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
66
66
|
"@elliemae/pui-theme": "~2.9.3",
|
|
67
67
|
"styled-components": "~5.3.9",
|
|
68
68
|
"styled-system": "~5.1.5",
|
|
69
|
-
"@elliemae/ds-monorepo-devops": "3.38.0-rc.
|
|
69
|
+
"@elliemae/ds-monorepo-devops": "3.38.0-rc.4"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"@elliemae/pui-theme": "~2.9.3",
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
"scripts": {
|
|
80
80
|
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
81
81
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
82
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
82
83
|
"dts": "exit 0 | echo",
|
|
83
84
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
84
85
|
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
|