@elliemae/ds-mobile 3.8.0-rc.4 → 3.9.0-next.0
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.
|
@@ -156,7 +156,7 @@ const MobilePageHeader = ({
|
|
|
156
156
|
children: [
|
|
157
157
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
158
158
|
pt: breadCrumb ? 0 : theme.space.xxxs,
|
|
159
|
-
alignItems: "start",
|
|
159
|
+
alignItems: "flex-start",
|
|
160
160
|
justifyItems: "center",
|
|
161
161
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_expandable_text.TruncatedExpandableText, {
|
|
162
162
|
value: pageTitle
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MobilePageHeader/MobilePageHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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=\"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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MobileSeparator", "DSButton", "React"]
|
|
7
7
|
}
|
|
@@ -126,7 +126,7 @@ const MobilePageHeader = ({
|
|
|
126
126
|
children: [
|
|
127
127
|
/* @__PURE__ */ jsx(Grid, {
|
|
128
128
|
pt: breadCrumb ? 0 : theme.space.xxxs,
|
|
129
|
-
alignItems: "start",
|
|
129
|
+
alignItems: "flex-start",
|
|
130
130
|
justifyItems: "center",
|
|
131
131
|
children: /* @__PURE__ */ jsx(TruncatedExpandableText, {
|
|
132
132
|
value: pageTitle
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobilePageHeader/MobilePageHeader.tsx"],
|
|
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=\"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": "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
|
|
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": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-mobile",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.9.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -435,21 +435,21 @@
|
|
|
435
435
|
"typeSafety": false
|
|
436
436
|
},
|
|
437
437
|
"dependencies": {
|
|
438
|
-
"@elliemae/ds-accordion": "3.
|
|
439
|
-
"@elliemae/ds-backdrop": "3.
|
|
440
|
-
"@elliemae/ds-button": "3.
|
|
441
|
-
"@elliemae/ds-circular-progress-indicator": "3.
|
|
442
|
-
"@elliemae/ds-form": "3.
|
|
443
|
-
"@elliemae/ds-form-checkbox": "3.
|
|
444
|
-
"@elliemae/ds-grid": "3.
|
|
445
|
-
"@elliemae/ds-icon": "3.
|
|
446
|
-
"@elliemae/ds-icons": "3.
|
|
447
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.
|
|
448
|
-
"@elliemae/ds-shared": "3.
|
|
449
|
-
"@elliemae/ds-system": "3.
|
|
450
|
-
"@elliemae/ds-tabs": "3.
|
|
451
|
-
"@elliemae/ds-truncated-expandable-text": "3.
|
|
452
|
-
"@elliemae/ds-utilities": "3.
|
|
438
|
+
"@elliemae/ds-accordion": "3.9.0-next.0",
|
|
439
|
+
"@elliemae/ds-backdrop": "3.9.0-next.0",
|
|
440
|
+
"@elliemae/ds-button": "3.9.0-next.0",
|
|
441
|
+
"@elliemae/ds-circular-progress-indicator": "3.9.0-next.0",
|
|
442
|
+
"@elliemae/ds-form": "3.9.0-next.0",
|
|
443
|
+
"@elliemae/ds-form-checkbox": "3.9.0-next.0",
|
|
444
|
+
"@elliemae/ds-grid": "3.9.0-next.0",
|
|
445
|
+
"@elliemae/ds-icon": "3.9.0-next.0",
|
|
446
|
+
"@elliemae/ds-icons": "3.9.0-next.0",
|
|
447
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.9.0-next.0",
|
|
448
|
+
"@elliemae/ds-shared": "3.9.0-next.0",
|
|
449
|
+
"@elliemae/ds-system": "3.9.0-next.0",
|
|
450
|
+
"@elliemae/ds-tabs": "3.9.0-next.0",
|
|
451
|
+
"@elliemae/ds-truncated-expandable-text": "3.9.0-next.0",
|
|
452
|
+
"@elliemae/ds-utilities": "3.9.0-next.0",
|
|
453
453
|
"polished": "~3.6.7",
|
|
454
454
|
"prop-types": "~15.8.1",
|
|
455
455
|
"react-window": "~1.8.7",
|