@elliemae/ds-page-header 2.2.1 → 2.3.0-alpha.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/cjs/DSPageHeader.js +36 -21
- package/cjs/DSPageHeader.js.map +7 -0
- package/cjs/index.js +43 -26
- package/cjs/index.js.map +7 -0
- package/cjs/v1/DSPageHeader.js +93 -120
- package/cjs/v1/DSPageHeader.js.map +7 -0
- package/cjs/v1/DropdownTitle.js +49 -35
- package/cjs/v1/DropdownTitle.js.map +7 -0
- package/cjs/v1/EditableTitle.js +68 -54
- package/cjs/v1/EditableTitle.js.map +7 -0
- package/cjs/v1/PageHeaderImpl.js +122 -116
- package/cjs/v1/PageHeaderImpl.js.map +7 -0
- package/cjs/v1/Title.js +42 -24
- package/cjs/v1/Title.js.map +7 -0
- package/cjs/v1/TitleWrapper.js +37 -8
- package/cjs/v1/TitleWrapper.js.map +7 -0
- package/cjs/v2/PageHeader.js +104 -89
- package/cjs/v2/PageHeader.js.map +7 -0
- package/cjs/v2/components/PageHeaderBack/PageHeaderBack.js +38 -36
- package/cjs/v2/components/PageHeaderBack/PageHeaderBack.js.map +7 -0
- package/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +87 -101
- package/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js.map +7 -0
- package/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js +38 -36
- package/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js.map +7 -0
- package/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js +50 -57
- package/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js.map +7 -0
- package/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js +51 -60
- package/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js.map +7 -0
- package/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +38 -36
- package/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js.map +7 -0
- package/cjs/v2/components/blocks.js +48 -24
- package/cjs/v2/components/blocks.js.map +7 -0
- package/cjs/v2/props.js +44 -32
- package/cjs/v2/props.js.map +7 -0
- package/cjs/v2/tests/utils.js +123 -0
- package/cjs/v2/tests/utils.js.map +7 -0
- package/esm/DSPageHeader.js +7 -6
- package/esm/DSPageHeader.js.map +7 -0
- package/esm/index.js +14 -6
- package/esm/index.js.map +7 -0
- package/esm/v1/DSPageHeader.js +65 -109
- package/esm/v1/DSPageHeader.js.map +7 -0
- package/esm/v1/DropdownTitle.js +20 -27
- package/esm/v1/DropdownTitle.js.map +7 -0
- package/esm/v1/EditableTitle.js +35 -42
- package/esm/v1/EditableTitle.js.map +7 -0
- package/esm/v1/PageHeaderImpl.js +95 -110
- package/esm/v1/PageHeaderImpl.js.map +7 -0
- package/esm/v1/Title.js +13 -17
- package/esm/v1/Title.js.map +7 -0
- package/esm/v1/TitleWrapper.js +8 -6
- package/esm/v1/TitleWrapper.js.map +7 -0
- package/esm/v2/PageHeader.js +72 -70
- package/esm/v2/PageHeader.js.map +7 -0
- package/esm/v2/components/PageHeaderBack/PageHeaderBack.js +9 -27
- package/esm/v2/components/PageHeaderBack/PageHeaderBack.js.map +7 -0
- package/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +53 -83
- package/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js.map +7 -0
- package/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js +9 -27
- package/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js.map +7 -0
- package/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js +21 -46
- package/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js.map +7 -0
- package/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js +22 -47
- package/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js.map +7 -0
- package/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +9 -27
- package/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js.map +7 -0
- package/esm/v2/components/blocks.js +20 -13
- package/esm/v2/components/blocks.js.map +7 -0
- package/esm/v2/props.js +15 -27
- package/esm/v2/props.js.map +7 -0
- package/esm/v2/tests/utils.js +94 -0
- package/esm/v2/tests/utils.js.map +7 -0
- package/package.json +11 -11
package/esm/v1/DSPageHeader.js
CHANGED
|
@@ -1,112 +1,68 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsx(PageHeaderImpl, _objectSpread({
|
|
42
|
-
containerProps: containerProps,
|
|
43
|
-
editable: editable,
|
|
44
|
-
editing: editing,
|
|
45
|
-
onGoToPreviousPage: onGoToPreviousPage,
|
|
46
|
-
onSelectOption: onSelectOption,
|
|
47
|
-
optionsMinWidth: optionsMinWidth,
|
|
48
|
-
optionsSelection: optionsSelection,
|
|
49
|
-
previousPage: previousPage,
|
|
50
|
-
renderToolbar: renderToolbar,
|
|
51
|
-
subtitle: subtitle,
|
|
52
|
-
title: title,
|
|
53
|
-
titleInputProps: titleInputProps,
|
|
54
|
-
titleOptions: titleOptions,
|
|
55
|
-
withBottomSeparator: withBottomSeparator,
|
|
56
|
-
zIndex: zIndex
|
|
57
|
-
}, otherProps)));
|
|
58
|
-
};
|
|
59
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { describe, PropTypes } from "react-desc";
|
|
4
|
+
import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import PageHeaderImpl from "./PageHeaderImpl";
|
|
6
|
+
const DSPageHeader = ({
|
|
7
|
+
containerProps = {},
|
|
8
|
+
renderToolbar = void 0,
|
|
9
|
+
withBottomSeparator = true,
|
|
10
|
+
title = "",
|
|
11
|
+
titleOptions = void 0,
|
|
12
|
+
onSelectOption = () => null,
|
|
13
|
+
subtitle = "",
|
|
14
|
+
optionsSelection = {},
|
|
15
|
+
onGoToPreviousPage = () => null,
|
|
16
|
+
previousPage,
|
|
17
|
+
editable = false,
|
|
18
|
+
editing = void 0,
|
|
19
|
+
titleInputProps = {},
|
|
20
|
+
zIndex = 2,
|
|
21
|
+
optionsMinWidth = void 0,
|
|
22
|
+
...otherProps
|
|
23
|
+
}) => /* @__PURE__ */ React2.createElement(TooltipTextProvider, null, /* @__PURE__ */ React2.createElement(PageHeaderImpl, {
|
|
24
|
+
containerProps,
|
|
25
|
+
editable,
|
|
26
|
+
editing,
|
|
27
|
+
onGoToPreviousPage,
|
|
28
|
+
onSelectOption,
|
|
29
|
+
optionsMinWidth,
|
|
30
|
+
optionsSelection,
|
|
31
|
+
previousPage,
|
|
32
|
+
renderToolbar,
|
|
33
|
+
subtitle,
|
|
34
|
+
title,
|
|
35
|
+
titleInputProps,
|
|
36
|
+
titleOptions,
|
|
37
|
+
withBottomSeparator,
|
|
38
|
+
zIndex,
|
|
39
|
+
...otherProps
|
|
40
|
+
}));
|
|
60
41
|
const props = {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
titleOptions: PropTypes.arrayOf(PropTypes.object).description('The title dropdown options'),
|
|
78
|
-
|
|
79
|
-
/* Handler when a user selects an item in the dropdown menu */
|
|
80
|
-
onSelectOption: PropTypes.func.description('Handler when a user selects an item in the dropdown menu'),
|
|
81
|
-
|
|
82
|
-
/* Description text below the title */
|
|
83
|
-
subtitle: PropTypes.string.description('Description text below the title'),
|
|
84
|
-
|
|
85
|
-
/* Selection state for the title dropdown */
|
|
86
|
-
optionsSelection: PropTypes.object.description('Selection state for the title dropdown'),
|
|
87
|
-
|
|
88
|
-
/* Whether the title is editable or not */
|
|
89
|
-
editable: PropTypes.bool.description('Whether the title is editable or not'),
|
|
90
|
-
|
|
91
|
-
/* Activates/Deactivates the editing state in the title */
|
|
92
|
-
editing: PropTypes.bool.description('Activates/Deactivates the editing state in the title'),
|
|
93
|
-
|
|
94
|
-
/* Props passed to the input for editing the title */
|
|
95
|
-
titleInputProps: PropTypes.object.description('Props passed to the input for editing the title'),
|
|
96
|
-
|
|
97
|
-
/* Enables navigation to previous page with back-arrow */
|
|
98
|
-
previousPage: PropTypes.object.description('Enables navigation to previous page with back-arrow'),
|
|
99
|
-
|
|
100
|
-
/* Callback to handle navigation to previous page */
|
|
101
|
-
onGoToPreviousPage: PropTypes.func.description('Callback to handle navigation to previous page'),
|
|
102
|
-
|
|
103
|
-
/* z-index to use for the DropdownMenu */
|
|
104
|
-
zIndex: PropTypes.number.description('z-index to use for the DropdownMenu'),
|
|
105
|
-
|
|
106
|
-
/** min width for options dropdown menu */
|
|
107
|
-
optionsMinWidth: PropTypes.number.description('min width for options dropdown menu')
|
|
42
|
+
version: PropTypes.oneOf([1, 2]).description("Component version"),
|
|
43
|
+
containerProps: PropTypes.object.description("props injected to page header wrapper node"),
|
|
44
|
+
renderToolbar: PropTypes.func.description("Function that returns the toolbar to the right of the page header"),
|
|
45
|
+
withBottomSeparator: PropTypes.bool.description("Whether to show a separator at the bottom of the header"),
|
|
46
|
+
title: PropTypes.string.description("The page header title"),
|
|
47
|
+
titleOptions: PropTypes.arrayOf(PropTypes.object).description("The title dropdown options"),
|
|
48
|
+
onSelectOption: PropTypes.func.description("Handler when a user selects an item in the dropdown menu"),
|
|
49
|
+
subtitle: PropTypes.string.description("Description text below the title"),
|
|
50
|
+
optionsSelection: PropTypes.object.description("Selection state for the title dropdown"),
|
|
51
|
+
editable: PropTypes.bool.description("Whether the title is editable or not"),
|
|
52
|
+
editing: PropTypes.bool.description("Activates/Deactivates the editing state in the title"),
|
|
53
|
+
titleInputProps: PropTypes.object.description("Props passed to the input for editing the title"),
|
|
54
|
+
previousPage: PropTypes.object.description("Enables navigation to previous page with back-arrow"),
|
|
55
|
+
onGoToPreviousPage: PropTypes.func.description("Callback to handle navigation to previous page"),
|
|
56
|
+
zIndex: PropTypes.number.description("z-index to use for the DropdownMenu"),
|
|
57
|
+
optionsMinWidth: PropTypes.number.description("min width for options dropdown menu")
|
|
108
58
|
};
|
|
109
|
-
|
|
59
|
+
DSPageHeader.propTypes = props;
|
|
60
|
+
const DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated("use DSPageHeaderV2");
|
|
110
61
|
DSPageHeaderV1WithSchema.propTypes = props;
|
|
111
|
-
|
|
112
|
-
export {
|
|
62
|
+
var DSPageHeader_default = DSPageHeader;
|
|
63
|
+
export {
|
|
64
|
+
DSPageHeader,
|
|
65
|
+
DSPageHeaderV1WithSchema,
|
|
66
|
+
DSPageHeader_default as default
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=DSPageHeader.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSPageHeader.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport PageHeaderImpl from './PageHeaderImpl';\n\nconst DSPageHeader = ({\n containerProps = {},\n renderToolbar = undefined,\n withBottomSeparator = true,\n title = '',\n titleOptions = undefined,\n onSelectOption = () => null,\n subtitle = '',\n optionsSelection = {},\n onGoToPreviousPage = () => null,\n previousPage,\n editable = false,\n editing = undefined,\n titleInputProps = {},\n zIndex = 2,\n optionsMinWidth = undefined,\n ...otherProps\n}) => (\n <TooltipTextProvider>\n <PageHeaderImpl\n containerProps={containerProps}\n editable={editable}\n editing={editing}\n onGoToPreviousPage={onGoToPreviousPage}\n onSelectOption={onSelectOption}\n optionsMinWidth={optionsMinWidth}\n optionsSelection={optionsSelection}\n previousPage={previousPage}\n renderToolbar={renderToolbar}\n subtitle={subtitle}\n title={title}\n titleInputProps={titleInputProps}\n titleOptions={titleOptions}\n withBottomSeparator={withBottomSeparator}\n zIndex={zIndex}\n {...otherProps}\n />\n </TooltipTextProvider>\n);\n\nconst props = {\n /* Component version */\n version: PropTypes.oneOf([1, 2]).description('Component version'),\n /* props injected to page header wrapper node */\n containerProps: PropTypes.object.description(\n 'props injected to page header wrapper node',\n ),\n /* Function that returns the toolbar to the right of the page header */\n renderToolbar: PropTypes.func.description(\n 'Function that returns the toolbar to the right of the page header',\n ),\n /* Whether to show a separator at the bottom of the header */\n withBottomSeparator: PropTypes.bool.description(\n 'Whether to show a separator at the bottom of the header',\n ),\n /* The page header title */\n title: PropTypes.string.description('The page header title'),\n /* The title dropdown options */\n titleOptions: PropTypes.arrayOf(PropTypes.object).description(\n 'The title dropdown options',\n ),\n /* Handler when a user selects an item in the dropdown menu */\n onSelectOption: PropTypes.func.description(\n 'Handler when a user selects an item in the dropdown menu',\n ),\n /* Description text below the title */\n subtitle: PropTypes.string.description('Description text below the title'),\n /* Selection state for the title dropdown */\n optionsSelection: PropTypes.object.description(\n 'Selection state for the title dropdown',\n ),\n /* Whether the title is editable or not */\n editable: PropTypes.bool.description('Whether the title is editable or not'),\n /* Activates/Deactivates the editing state in the title */\n editing: PropTypes.bool.description(\n 'Activates/Deactivates the editing state in the title',\n ),\n /* Props passed to the input for editing the title */\n titleInputProps: PropTypes.object.description(\n 'Props passed to the input for editing the title',\n ),\n /* Enables navigation to previous page with back-arrow */\n previousPage: PropTypes.object.description(\n 'Enables navigation to previous page with back-arrow',\n ),\n /* Callback to handle navigation to previous page */\n onGoToPreviousPage: PropTypes.func.description(\n 'Callback to handle navigation to previous page',\n ),\n /* z-index to use for the DropdownMenu */\n zIndex: PropTypes.number.description('z-index to use for the DropdownMenu'),\n /** min width for options dropdown menu */\n optionsMinWidth: PropTypes.number.description(\n 'min width for options dropdown menu',\n ),\n};\n\nDSPageHeader.propTypes = props;\nconst DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated(\n 'use DSPageHeaderV2',\n);\nDSPageHeaderV1WithSchema.propTypes = props;\n\nexport { DSPageHeader, DSPageHeaderV1WithSchema };\nexport default DSPageHeader;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,kBAAkB;AAAA,KACf;AAAA,MAEH,qCAAC,qBAAD,MACE,qCAAC,gBAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACI;AAAA;AAKV,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,MAAM,CAAC,GAAG,IAAI,YAAY;AAAA,EAE7C,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAGF,eAAe,UAAU,KAAK,YAC5B;AAAA,EAGF,qBAAqB,UAAU,KAAK,YAClC;AAAA,EAGF,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,cAAc,UAAU,QAAQ,UAAU,QAAQ,YAChD;AAAA,EAGF,gBAAgB,UAAU,KAAK,YAC7B;AAAA,EAGF,UAAU,UAAU,OAAO,YAAY;AAAA,EAEvC,kBAAkB,UAAU,OAAO,YACjC;AAAA,EAGF,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,SAAS,UAAU,KAAK,YACtB;AAAA,EAGF,iBAAiB,UAAU,OAAO,YAChC;AAAA,EAGF,cAAc,UAAU,OAAO,YAC7B;AAAA,EAGF,oBAAoB,UAAU,KAAK,YACjC;AAAA,EAGF,QAAQ,UAAU,OAAO,YAAY;AAAA,EAErC,iBAAiB,UAAU,OAAO,YAChC;AAAA;AAIJ,aAAa,YAAY;AACzB,MAAM,2BAA2B,SAAS,cAAc,WACtD;AAEF,yBAAyB,YAAY;AAGrC,IAAO,uBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/v1/DropdownTitle.js
CHANGED
|
@@ -1,33 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import DSDropdownMenu from
|
|
4
|
-
import { ChevronSmallDown } from
|
|
5
|
-
import DSButton from
|
|
6
|
-
import TitleWrapper from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function DropdownTitle(_ref) {
|
|
11
|
-
let {
|
|
12
|
-
titleComponent,
|
|
13
|
-
onSelectOption,
|
|
14
|
-
options,
|
|
15
|
-
optionsMinWidth,
|
|
16
|
-
selection,
|
|
17
|
-
zIndex
|
|
18
|
-
} = _ref;
|
|
19
|
-
return /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx(DSDropdownMenu, {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
|
|
4
|
+
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
5
|
+
import DSButton from "@elliemae/ds-button";
|
|
6
|
+
import TitleWrapper from "./TitleWrapper";
|
|
7
|
+
function DropdownTitle({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) {
|
|
8
|
+
return /* @__PURE__ */ React2.createElement(TitleWrapper, null, titleComponent, /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
|
|
20
9
|
minWidth: optionsMinWidth,
|
|
21
10
|
onSelectMenuItem: onSelectOption,
|
|
22
|
-
options
|
|
23
|
-
selection
|
|
24
|
-
triggerComponent:
|
|
11
|
+
options,
|
|
12
|
+
selection,
|
|
13
|
+
triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
|
|
25
14
|
buttonType: "text",
|
|
26
15
|
"data-testid": "page-header-dropdown-trigger-component",
|
|
27
|
-
icon:
|
|
28
|
-
})
|
|
29
|
-
zIndex
|
|
16
|
+
icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null)
|
|
17
|
+
}),
|
|
18
|
+
zIndex
|
|
30
19
|
}));
|
|
31
20
|
}
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
DropdownTitle.propTypes = {};
|
|
22
|
+
var DropdownTitle_default = DropdownTitle;
|
|
23
|
+
export {
|
|
24
|
+
DropdownTitle_default as default
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=DropdownTitle.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DropdownTitle.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport TitleWrapper from './TitleWrapper';\n\nfunction DropdownTitle({ titleComponent, onSelectOption, options, optionsMinWidth, selection, zIndex }) {\n return (\n <TitleWrapper>\n {titleComponent}\n <DSDropdownMenu\n minWidth={optionsMinWidth}\n onSelectMenuItem={onSelectOption}\n options={options}\n selection={selection}\n triggerComponent={\n <DSButton\n buttonType=\"text\"\n data-testid=\"page-header-dropdown-trigger-component\"\n icon={<ChevronSmallDown />}\n />\n }\n zIndex={zIndex}\n />\n </TitleWrapper>\n );\n}\n\nDropdownTitle.propTypes = {};\n\nexport default DropdownTitle;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,uBAAuB,EAAE,gBAAgB,gBAAgB,SAAS,iBAAiB,WAAW,UAAU;AACtG,SACE,qCAAC,cAAD,MACG,gBACD,qCAAC,gBAAD;AAAA,IACE,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,kBACE,qCAAC,UAAD;AAAA,MACE,YAAW;AAAA,MACX,eAAY;AAAA,MACZ,MAAM,qCAAC,kBAAD;AAAA;AAAA,IAGV;AAAA;AAAA;AAMR,cAAc,YAAY;AAE1B,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/v1/EditableTitle.js
CHANGED
|
@@ -1,47 +1,40 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
|
-
const blockName = 'page-header';
|
|
20
|
-
const EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
|
|
21
|
-
|
|
22
|
-
function EditableTitle(_ref) {
|
|
23
|
-
let {
|
|
24
|
-
children: value,
|
|
25
|
-
editing: editingProp,
|
|
26
|
-
titleInputProps
|
|
27
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useRef, useState } from "react";
|
|
3
|
+
import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
6
|
+
import { runAll } from "@elliemae/ds-utilities";
|
|
7
|
+
import DSInput from "@elliemae/ds-form/Input";
|
|
8
|
+
import Title from "./Title";
|
|
9
|
+
const blockName = "page-header";
|
|
10
|
+
const EditableTitleComponent = aggregatedClasses(DSInput)(`${blockName}-title`, "editable-title");
|
|
11
|
+
function EditableTitle({
|
|
12
|
+
children: value,
|
|
13
|
+
editing: editingProp,
|
|
14
|
+
titleInputProps
|
|
15
|
+
}) {
|
|
28
16
|
const [titleValue, setTitleValue] = useState(value);
|
|
29
17
|
const [hovered, setHovered] = useState(false);
|
|
30
18
|
const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
|
|
31
19
|
const titleRef = useRef(null);
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
})
|
|
44
|
-
});
|
|
20
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, hovered || editing ? /* @__PURE__ */ React2.createElement(EditableTitleComponent, {
|
|
21
|
+
...titleInputProps,
|
|
22
|
+
onBlur: runAll(() => setEditing(false), titleInputProps.onBlur),
|
|
23
|
+
onChange: runAll((e) => setTitleValue(e.target.value), titleInputProps.onChange),
|
|
24
|
+
onFocus: runAll(() => setEditing(true), titleInputProps.onFocus),
|
|
25
|
+
onMouseOut: runAll(() => setHovered(false), titleInputProps.onMouseOut),
|
|
26
|
+
value: titleValue
|
|
27
|
+
}) : /* @__PURE__ */ React2.createElement("div", {
|
|
28
|
+
ref: titleRef,
|
|
29
|
+
onMouseEnter: () => setHovered(true)
|
|
30
|
+
}, /* @__PURE__ */ React2.createElement(Title, null, titleValue)));
|
|
45
31
|
}
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
EditableTitle.propTypes = {
|
|
33
|
+
children: PropTypes.string,
|
|
34
|
+
editing: PropTypes.bool
|
|
35
|
+
};
|
|
36
|
+
var EditableTitle_default = EditableTitle;
|
|
37
|
+
export {
|
|
38
|
+
EditableTitle_default as default
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=EditableTitle.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/EditableTitle.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { runAll } from '@elliemae/ds-utilities';\nimport DSInput from '@elliemae/ds-form/Input';\nimport Title from './Title';\n\nconst blockName = 'page-header';\n\nconst EditableTitleComponent = aggregatedClasses(DSInput)(\n `${blockName}-title`,\n 'editable-title',\n);\n\nfunction EditableTitle({\n children: value,\n editing: editingProp,\n titleInputProps,\n}) {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n return (\n <>\n {hovered || editing ? (\n <EditableTitleComponent\n {...titleInputProps}\n onBlur={runAll(() => setEditing(false), titleInputProps.onBlur)}\n onChange={runAll(\n (e) => setTitleValue(e.target.value),\n titleInputProps.onChange,\n )}\n onFocus={runAll(() => setEditing(true), titleInputProps.onFocus)}\n onMouseOut={runAll(\n () => setHovered(false),\n titleInputProps.onMouseOut,\n )}\n value={titleValue}\n />\n ) : (\n <div ref={titleRef} onMouseEnter={() => setHovered(true)}>\n <Title>{titleValue}</Title>\n </div>\n )}\n </>\n );\n}\n\nEditableTitle.propTypes = {\n /** The title text */\n children: PropTypes.string,\n /** Whether the title is editing or not */\n editing: PropTypes.bool,\n};\n\nexport default EditableTitle;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,yBAAyB,kBAAkB,SAC/C,GAAG,mBACH;AAGF,uBAAuB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,GACC;AACD,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,SAAS,cAAc,SAAS;AACvC,QAAM,CAAC,SAAS,cAAc,yBAAyB,eAAe;AACtE,QAAM,WAAW,OAAO;AACxB,SACE,4DACG,WAAW,UACV,qCAAC,wBAAD;AAAA,OACM;AAAA,IACJ,QAAQ,OAAO,MAAM,WAAW,QAAQ,gBAAgB;AAAA,IACxD,UAAU,OACR,CAAC,MAAM,cAAc,EAAE,OAAO,QAC9B,gBAAgB;AAAA,IAElB,SAAS,OAAO,MAAM,WAAW,OAAO,gBAAgB;AAAA,IACxD,YAAY,OACV,MAAM,WAAW,QACjB,gBAAgB;AAAA,IAElB,OAAO;AAAA,OAGT,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAU,cAAc,MAAM,WAAW;AAAA,KACjD,qCAAC,OAAD,MAAQ;AAAA;AAOlB,cAAc,YAAY;AAAA,EAExB,UAAU,UAAU;AAAA,EAEpB,SAAS,UAAU;AAAA;AAGrB,IAAO,wBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/v1/PageHeaderImpl.js
CHANGED
|
@@ -1,121 +1,106 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
import { DSIconSizes } from '@elliemae/ds-icon';
|
|
16
|
-
import EditableTitle from './EditableTitle.js';
|
|
17
|
-
import Title from './Title.js';
|
|
18
|
-
import DropdownTitle from './DropdownTitle.js';
|
|
19
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
20
|
-
|
|
21
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
|
-
|
|
23
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
-
const blockName = 'page-header';
|
|
25
|
-
const PageHeaderContainer = aggregatedClasses('div')(blockName, null, _ref => {
|
|
26
|
-
let {
|
|
27
|
-
withBottomSeparator,
|
|
28
|
-
subtitle
|
|
29
|
-
} = _ref;
|
|
30
|
-
return {
|
|
31
|
-
'with-bottom-separator': withBottomSeparator,
|
|
32
|
-
'with-subtitle': subtitle
|
|
33
|
-
};
|
|
34
|
-
});
|
|
35
|
-
const PageHeaderMainSection = aggregatedClasses('div')("".concat(blockName, "-main-section"));
|
|
36
|
-
const PageHeaderTitleSection = aggregatedClasses('div')("".concat(blockName, "-title-section"));
|
|
37
|
-
const PageHeaderToolbar = aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, () => ({
|
|
38
|
-
'ie-flex-basis-auto': true
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { isFunction } from "@elliemae/ds-utilities";
|
|
4
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
|
+
import { ChevronLeft } from "@elliemae/ds-icons";
|
|
6
|
+
import DSBreadcrumb from "@elliemae/ds-breadcrumb";
|
|
7
|
+
import { DSIconSizes } from "@elliemae/ds-icon";
|
|
8
|
+
import EditableTitle from "./EditableTitle";
|
|
9
|
+
import Title from "./Title";
|
|
10
|
+
import DropdownTitle from "./DropdownTitle";
|
|
11
|
+
const blockName = "page-header";
|
|
12
|
+
const PageHeaderContainer = aggregatedClasses("div")(blockName, null, ({ withBottomSeparator, subtitle }) => ({
|
|
13
|
+
"with-bottom-separator": withBottomSeparator,
|
|
14
|
+
"with-subtitle": subtitle
|
|
39
15
|
}));
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
16
|
+
const PageHeaderMainSection = aggregatedClasses("div")(`${blockName}-main-section`);
|
|
17
|
+
const PageHeaderTitleSection = aggregatedClasses("div")(`${blockName}-title-section`);
|
|
18
|
+
const PageHeaderToolbar = aggregatedClasses("div")(`${blockName}-toolbar`, null, () => ({
|
|
19
|
+
"ie-flex-basis-auto": true
|
|
20
|
+
}));
|
|
21
|
+
const PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)(`${blockName}-breadcrumb`);
|
|
22
|
+
const PageHeaderTitle = aggregatedClasses("div")(`${blockName}-title`);
|
|
23
|
+
const Subtitle = aggregatedClasses("div")(`${blockName}-title`, "subtitle");
|
|
24
|
+
const BackArrow = aggregatedClasses(ChevronLeft)(`${blockName}-backarrow`);
|
|
25
|
+
function HeaderTitle({
|
|
26
|
+
title = "",
|
|
27
|
+
options = [],
|
|
28
|
+
optionsMinWidth,
|
|
29
|
+
onSelectOption = () => null,
|
|
30
|
+
selection,
|
|
31
|
+
subtitle = "",
|
|
32
|
+
editable = false,
|
|
33
|
+
editing = false,
|
|
34
|
+
titleInputProps,
|
|
35
|
+
zIndex
|
|
36
|
+
}) {
|
|
37
|
+
const titleComponent = editable ? /* @__PURE__ */ React2.createElement(EditableTitle, {
|
|
38
|
+
editing,
|
|
39
|
+
titleInputProps
|
|
40
|
+
}, title) : /* @__PURE__ */ React2.createElement(Title, null, title);
|
|
41
|
+
return /* @__PURE__ */ React2.createElement(PageHeaderTitle, null, options.length ? /* @__PURE__ */ React2.createElement(DropdownTitle, {
|
|
42
|
+
onSelectOption,
|
|
43
|
+
options,
|
|
49
44
|
optionsMinWidth,
|
|
50
|
-
onSelectOption = () => null,
|
|
51
45
|
selection,
|
|
52
|
-
|
|
53
|
-
editable = false,
|
|
54
|
-
editing = false,
|
|
55
|
-
titleInputProps,
|
|
46
|
+
titleComponent,
|
|
56
47
|
zIndex
|
|
57
|
-
}
|
|
58
|
-
const titleComponent = editable ? /*#__PURE__*/_jsx(EditableTitle, {
|
|
59
|
-
editing: editing,
|
|
60
|
-
titleInputProps: titleInputProps
|
|
61
|
-
}, void 0, title) : /*#__PURE__*/_jsx(Title, {}, void 0, title);
|
|
62
|
-
return /*#__PURE__*/_jsx(PageHeaderTitle, {}, void 0, options.length ? /*#__PURE__*/_jsx(DropdownTitle, {
|
|
63
|
-
onSelectOption: onSelectOption,
|
|
64
|
-
options: options,
|
|
65
|
-
optionsMinWidth: optionsMinWidth,
|
|
66
|
-
selection: selection,
|
|
67
|
-
titleComponent: titleComponent,
|
|
68
|
-
zIndex: zIndex
|
|
69
|
-
}) : titleComponent, subtitle && /*#__PURE__*/_jsx(Subtitle, {}, void 0, subtitle));
|
|
48
|
+
}) : titleComponent, subtitle && /* @__PURE__ */ React2.createElement(Subtitle, null, subtitle));
|
|
70
49
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
50
|
+
function PageHeaderImpl({
|
|
51
|
+
containerProps,
|
|
52
|
+
className,
|
|
53
|
+
title,
|
|
54
|
+
titleOptions,
|
|
55
|
+
renderToolbar,
|
|
56
|
+
breadcrumbs = [],
|
|
57
|
+
previousPage,
|
|
58
|
+
onGoToPreviousPage = () => null,
|
|
59
|
+
subtitle = "",
|
|
60
|
+
withBottomSeparator,
|
|
61
|
+
onSelectOption,
|
|
62
|
+
optionsSelection,
|
|
63
|
+
optionsMinWidth,
|
|
64
|
+
editable = false,
|
|
65
|
+
titleInputProps,
|
|
66
|
+
editing = void 0,
|
|
67
|
+
zIndex
|
|
68
|
+
}) {
|
|
69
|
+
const hasBreadcrumbs = !!breadcrumbs.length;
|
|
70
|
+
return /* @__PURE__ */ React2.createElement(PageHeaderContainer, {
|
|
71
|
+
...containerProps,
|
|
75
72
|
className,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
73
|
+
classProps: {
|
|
74
|
+
withBottomSeparator,
|
|
75
|
+
subtitle
|
|
76
|
+
}
|
|
77
|
+
}, previousPage && /* @__PURE__ */ React2.createElement(BackArrow, {
|
|
78
|
+
"data-testid": "back-arrow",
|
|
79
|
+
onClick: onGoToPreviousPage,
|
|
80
|
+
size: DSIconSizes.M
|
|
81
|
+
}), /* @__PURE__ */ React2.createElement(PageHeaderMainSection, null, hasBreadcrumbs && /* @__PURE__ */ React2.createElement(PageHeaderBreadcrumb, null, breadcrumbs.map((breadcrumb) => /* @__PURE__ */ React2.createElement(DSBreadcrumb.Item, {
|
|
82
|
+
key: breadcrumb.label,
|
|
83
|
+
...breadcrumb
|
|
84
|
+
}))), previousPage && /* @__PURE__ */ React2.createElement(PageHeaderBreadcrumb, null, /* @__PURE__ */ React2.createElement(DSBreadcrumb.Item, {
|
|
85
|
+
key: previousPage.id,
|
|
86
|
+
label: previousPage.title,
|
|
87
|
+
onClick: previousPage.onClick,
|
|
88
|
+
...previousPage
|
|
89
|
+
})), /* @__PURE__ */ React2.createElement(PageHeaderTitleSection, null, /* @__PURE__ */ React2.createElement(HeaderTitle, {
|
|
90
|
+
editable,
|
|
91
|
+
editing,
|
|
84
92
|
onSelectOption,
|
|
85
|
-
|
|
93
|
+
options: titleOptions,
|
|
86
94
|
optionsMinWidth,
|
|
87
|
-
|
|
95
|
+
selection: optionsSelection,
|
|
96
|
+
subtitle,
|
|
97
|
+
title,
|
|
88
98
|
titleInputProps,
|
|
89
|
-
editing = undefined,
|
|
90
99
|
zIndex
|
|
91
|
-
}
|
|
92
|
-
const hasBreadcrumbs = !!breadcrumbs.length;
|
|
93
|
-
return /*#__PURE__*/jsxs(PageHeaderContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
|
|
94
|
-
className: className,
|
|
95
|
-
classProps: {
|
|
96
|
-
withBottomSeparator,
|
|
97
|
-
subtitle
|
|
98
|
-
},
|
|
99
|
-
children: [previousPage && /*#__PURE__*/_jsx(BackArrow, {
|
|
100
|
-
"data-testid": "back-arrow",
|
|
101
|
-
onClick: onGoToPreviousPage,
|
|
102
|
-
size: DSIconSizes.M
|
|
103
|
-
}), /*#__PURE__*/_jsx(PageHeaderMainSection, {}, void 0, hasBreadcrumbs && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, breadcrumbs.map(breadcrumb => /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({}, breadcrumb), breadcrumb.label))), previousPage && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({
|
|
104
|
-
label: previousPage.title,
|
|
105
|
-
onClick: previousPage.onClick
|
|
106
|
-
}, previousPage), previousPage.id)), /*#__PURE__*/_jsx(PageHeaderTitleSection, {}, void 0, /*#__PURE__*/_jsx(HeaderTitle, {
|
|
107
|
-
editable: editable,
|
|
108
|
-
editing: editing,
|
|
109
|
-
onSelectOption: onSelectOption,
|
|
110
|
-
options: titleOptions,
|
|
111
|
-
optionsMinWidth: optionsMinWidth,
|
|
112
|
-
selection: optionsSelection,
|
|
113
|
-
subtitle: subtitle,
|
|
114
|
-
title: title,
|
|
115
|
-
titleInputProps: titleInputProps,
|
|
116
|
-
zIndex: zIndex
|
|
117
|
-
}), isFunction(renderToolbar) && /*#__PURE__*/_jsx(PageHeaderToolbar, {}, void 0, renderToolbar())))]
|
|
118
|
-
}));
|
|
100
|
+
}), isFunction(renderToolbar) && /* @__PURE__ */ React2.createElement(PageHeaderToolbar, null, renderToolbar()))));
|
|
119
101
|
}
|
|
120
|
-
|
|
121
|
-
export {
|
|
102
|
+
var PageHeaderImpl_default = PageHeaderImpl;
|
|
103
|
+
export {
|
|
104
|
+
PageHeaderImpl_default as default
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=PageHeaderImpl.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/PageHeaderImpl.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport DSBreadcrumb from '@elliemae/ds-breadcrumb';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport EditableTitle from './EditableTitle';\nimport Title from './Title';\nimport DropdownTitle from './DropdownTitle';\n\nconst blockName = 'page-header';\n\nconst PageHeaderContainer = aggregatedClasses('div')(blockName, null, ({ withBottomSeparator, subtitle }) => ({\n 'with-bottom-separator': withBottomSeparator,\n 'with-subtitle': subtitle,\n}));\n\nconst PageHeaderMainSection = aggregatedClasses('div')(`${blockName}-main-section`);\nconst PageHeaderTitleSection = aggregatedClasses('div')(`${blockName}-title-section`);\nconst PageHeaderToolbar = aggregatedClasses('div')(`${blockName}-toolbar`, null, () => ({\n 'ie-flex-basis-auto': true,\n}));\nconst PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)(`${blockName}-breadcrumb`);\n\nconst PageHeaderTitle = aggregatedClasses('div')(`${blockName}-title`);\nconst Subtitle = aggregatedClasses('div')(`${blockName}-title`, 'subtitle');\nconst BackArrow = aggregatedClasses(ChevronLeft)(`${blockName}-backarrow`);\n\nfunction HeaderTitle({\n title = '',\n options = [],\n optionsMinWidth,\n onSelectOption = () => null,\n selection,\n subtitle = '',\n editable = false,\n editing = false,\n titleInputProps,\n zIndex,\n}) {\n const titleComponent = editable ? (\n <EditableTitle editing={editing} titleInputProps={titleInputProps}>\n {title}\n </EditableTitle>\n ) : (\n <Title>{title}</Title>\n );\n\n return (\n <PageHeaderTitle>\n {options.length ? (\n <DropdownTitle\n onSelectOption={onSelectOption}\n options={options}\n optionsMinWidth={optionsMinWidth}\n selection={selection}\n titleComponent={titleComponent}\n zIndex={zIndex}\n />\n ) : (\n titleComponent\n )}\n {subtitle && <Subtitle>{subtitle}</Subtitle>}\n </PageHeaderTitle>\n );\n}\n\nfunction PageHeaderImpl({\n containerProps,\n className,\n title,\n titleOptions,\n renderToolbar,\n breadcrumbs = [],\n previousPage,\n onGoToPreviousPage = () => null,\n subtitle = '',\n withBottomSeparator,\n onSelectOption,\n optionsSelection,\n optionsMinWidth,\n editable = false,\n titleInputProps,\n editing = undefined,\n zIndex,\n}) {\n const hasBreadcrumbs = !!breadcrumbs.length;\n\n return (\n <PageHeaderContainer\n {...containerProps}\n className={className}\n classProps={{\n withBottomSeparator,\n subtitle,\n }}\n >\n {previousPage && <BackArrow data-testid=\"back-arrow\" onClick={onGoToPreviousPage} size={DSIconSizes.M} />}\n <PageHeaderMainSection>\n {hasBreadcrumbs && (\n <PageHeaderBreadcrumb>\n {breadcrumbs.map((breadcrumb) => (\n <DSBreadcrumb.Item key={breadcrumb.label} {...breadcrumb} />\n ))}\n </PageHeaderBreadcrumb>\n )}\n {previousPage && (\n <PageHeaderBreadcrumb>\n <DSBreadcrumb.Item\n key={previousPage.id}\n label={previousPage.title}\n onClick={previousPage.onClick}\n {...previousPage}\n />\n </PageHeaderBreadcrumb>\n )}\n <PageHeaderTitleSection>\n <HeaderTitle\n editable={editable}\n editing={editing}\n onSelectOption={onSelectOption}\n options={titleOptions}\n optionsMinWidth={optionsMinWidth}\n selection={optionsSelection}\n subtitle={subtitle}\n title={title}\n titleInputProps={titleInputProps}\n zIndex={zIndex}\n />\n {isFunction(renderToolbar) && <PageHeaderToolbar>{renderToolbar()}</PageHeaderToolbar>}\n </PageHeaderTitleSection>\n </PageHeaderMainSection>\n </PageHeaderContainer>\n );\n}\n\nexport default PageHeaderImpl;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,OAAO,WAAW,MAAM,CAAC,EAAE,qBAAqB,eAAgB;AAAA,EAC5G,yBAAyB;AAAA,EACzB,iBAAiB;AAAA;AAGnB,MAAM,wBAAwB,kBAAkB,OAAO,GAAG;AAC1D,MAAM,yBAAyB,kBAAkB,OAAO,GAAG;AAC3D,MAAM,oBAAoB,kBAAkB,OAAO,GAAG,qBAAqB,MAAM,MAAO;AAAA,EACtF,sBAAsB;AAAA;AAExB,MAAM,uBAAuB,kBAAkB,cAAc,GAAG;AAEhE,MAAM,kBAAkB,kBAAkB,OAAO,GAAG;AACpD,MAAM,WAAW,kBAAkB,OAAO,GAAG,mBAAmB;AAChE,MAAM,YAAY,kBAAkB,aAAa,GAAG;AAEpD,qBAAqB;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,GACC;AACD,QAAM,iBAAiB,WACrB,qCAAC,eAAD;AAAA,IAAe;AAAA,IAAkB;AAAA,KAC9B,SAGH,qCAAC,OAAD,MAAQ;AAGV,SACE,qCAAC,iBAAD,MACG,QAAQ,SACP,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OAGF,gBAED,YAAY,qCAAC,UAAD,MAAW;AAAA;AAK9B,wBAAwB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,qBAAqB,MAAM;AAAA,EAC3B,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,GACC;AACD,QAAM,iBAAiB,CAAC,CAAC,YAAY;AAErC,SACE,qCAAC,qBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA;AAAA,KAGD,gBAAgB,qCAAC,WAAD;AAAA,IAAW,eAAY;AAAA,IAAa,SAAS;AAAA,IAAoB,MAAM,YAAY;AAAA,MACpG,qCAAC,uBAAD,MACG,kBACC,qCAAC,sBAAD,MACG,YAAY,IAAI,CAAC,eAChB,qCAAC,aAAa,MAAd;AAAA,IAAmB,KAAK,WAAW;AAAA,OAAW;AAAA,QAInD,gBACC,qCAAC,sBAAD,MACE,qCAAC,aAAa,MAAd;AAAA,IACE,KAAK,aAAa;AAAA,IAClB,OAAO,aAAa;AAAA,IACpB,SAAS,aAAa;AAAA,OAClB;AAAA,OAIV,qCAAC,wBAAD,MACE,qCAAC,aAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAED,WAAW,kBAAkB,qCAAC,mBAAD,MAAoB;AAAA;AAO5D,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|