@os-design/core 1.0.209 → 1.0.211
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/PageContent/index.js +9 -4
- package/dist/cjs/PageContent/index.js.map +1 -1
- package/dist/esm/PageContent/index.js +7 -4
- package/dist/esm/PageContent/index.js.map +1 -1
- package/dist/types/PageContent/index.d.ts +1 -0
- package/dist/types/PageContent/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/PageContent/index.tsx +16 -7
|
@@ -12,7 +12,7 @@ var _styles = require("@os-design/styles");
|
|
|
12
12
|
var _utils = require("@os-design/utils");
|
|
13
13
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
|
|
15
|
-
var _excluded = ["hasList", "children"];
|
|
15
|
+
var _excluded = ["hasList", "marginTop", "children"];
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
17
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -25,7 +25,7 @@ var hasNavigationStyles = function hasNavigationStyles(p) {
|
|
|
25
25
|
return p.hasNavigation && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n ", " {\n margin-bottom: 0;\n margin-left: ", "em;\n }\n "])), !p.hasList && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-bottom: calc(\n ", "em + env(safe-area-inset-bottom)\n );\n "])), p.theme.navigationTabHeight), _media.m.min.md, p.theme.navigationSideWidth);
|
|
26
26
|
};
|
|
27
27
|
var hasPageHeaderStyles = function hasPageHeaderStyles(p) {
|
|
28
|
-
return p.hasPageHeader && !p.hasList && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-top: ", "em;\n ", " {\n margin-top: ", "em;\n }\n "])), p.theme.pageHeaderHeight[0], _media.m.min.md, p.theme.pageHeaderHeight[1]);
|
|
28
|
+
return p.hasPageHeader && !p.hasList && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-top: ", "em;\n ", " {\n margin-top: ", "em;\n }\n "])), p.theme.pageHeaderHeight[0] + p.marginTop, _media.m.min.md, p.theme.pageHeaderHeight[1] + p.marginTop);
|
|
29
29
|
};
|
|
30
30
|
var notHasListStyles = function notHasListStyles(p) {
|
|
31
31
|
return !p.hasList && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-top: ", "em;\n padding-bottom: ", "em;\n ", ";\n "])), p.theme.pageContentPaddingVertical, p.theme.pageContentPaddingVertical, (0, _styles.horizontalPaddingStyles)()(p));
|
|
@@ -33,7 +33,9 @@ var notHasListStyles = function notHasListStyles(p) {
|
|
|
33
33
|
var notHasNavigationStyles = function notHasNavigationStyles(p) {
|
|
34
34
|
return !p.hasNavigation && !p.hasList && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-bottom: env(safe-area-inset-bottom);\n "])));
|
|
35
35
|
};
|
|
36
|
-
var Container = (0, _styled["default"])('main', (0, _utils.omitEmotionProps)('hasNavigation', 'hasPageHeader', 'hasList'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n ", ";\n ", ";\n"])),
|
|
36
|
+
var Container = (0, _styled["default"])('main', (0, _utils.omitEmotionProps)('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-top: ", "em;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (p) {
|
|
37
|
+
return p.marginTop;
|
|
38
|
+
}, hasNavigationStyles, hasPageHeaderStyles, notHasListStyles, notHasNavigationStyles);
|
|
37
39
|
|
|
38
40
|
/**
|
|
39
41
|
* The wrapper that adds padding to the page content.
|
|
@@ -41,6 +43,8 @@ var Container = (0, _styled["default"])('main', (0, _utils.omitEmotionProps)('ha
|
|
|
41
43
|
var PageContent = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
42
44
|
var _ref$hasList = _ref.hasList,
|
|
43
45
|
hasList = _ref$hasList === void 0 ? false : _ref$hasList,
|
|
46
|
+
_ref$marginTop = _ref.marginTop,
|
|
47
|
+
marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
|
|
44
48
|
children = _ref.children,
|
|
45
49
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
46
50
|
var _useContext = (0, _react2.useContext)(_LayoutContext["default"]),
|
|
@@ -49,7 +53,8 @@ var PageContent = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
|
49
53
|
return /*#__PURE__*/_react2["default"].createElement(Container, _extends({
|
|
50
54
|
hasNavigation: hasNavigation,
|
|
51
55
|
hasPageHeader: hasPageHeader,
|
|
52
|
-
hasList: hasList
|
|
56
|
+
hasList: hasList,
|
|
57
|
+
marginTop: marginTop
|
|
53
58
|
}, rest, {
|
|
54
59
|
ref: ref
|
|
55
60
|
}), children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_styles","_utils","_react2","_interopRequireWildcard","_LayoutContext","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","horizontalPaddingStyles","notHasNavigationStyles","Container","styled","omitEmotionProps","PageContent","forwardRef","_ref","ref","_ref$hasList","children","rest","_useContext","useContext","LayoutContext","createElement","displayName","_default","exports"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n /**\n * Whether there is the list in the page content.\n * @default false\n */\n hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n p.hasNavigation &&\n css`\n ${!p.hasList &&\n css`\n margin-bottom: calc(\n ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n );\n `}\n ${m.min.md} {\n margin-bottom: 0;\n margin-left: ${p.theme.navigationSideWidth}em;\n }\n `;\n\nconst hasPageHeaderStyles = (p) =>\n p.hasPageHeader &&\n !p.hasList &&\n css`\n margin-top: ${p.theme.pageHeaderHeight[0]}em;\n ${m.min.md} {\n margin-top: ${p.theme.pageHeaderHeight[1]}em;\n }\n `;\n\nconst notHasListStyles = (p) =>\n !p.hasList &&\n css`\n padding-top: ${p.theme.pageContentPaddingVertical}em;\n padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n ${horizontalPaddingStyles()(p)};\n `;\n\nconst notHasNavigationStyles = (p) =>\n !p.hasNavigation &&\n !p.hasList &&\n css`\n margin-bottom: env(safe-area-inset-bottom);\n `;\n\ninterface ContainerProps {\n hasNavigation
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_styles","_utils","_react2","_interopRequireWildcard","_LayoutContext","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","marginTop","notHasListStyles","pageContentPaddingVertical","horizontalPaddingStyles","notHasNavigationStyles","Container","styled","omitEmotionProps","PageContent","forwardRef","_ref","ref","_ref$hasList","_ref$marginTop","children","rest","_useContext","useContext","LayoutContext","createElement","displayName","_default","exports"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n /**\n * Whether there is the list in the page content.\n * @default false\n */\n hasList?: boolean;\n /**\n * Additional upper indent (em).\n * It can be used, for example, if you have an additional fixed header.\n * @default 0\n */\n marginTop?: number;\n}\n\nconst hasNavigationStyles = (p) =>\n p.hasNavigation &&\n css`\n ${!p.hasList &&\n css`\n margin-bottom: calc(\n ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n );\n `}\n ${m.min.md} {\n margin-bottom: 0;\n margin-left: ${p.theme.navigationSideWidth}em;\n }\n `;\n\nconst hasPageHeaderStyles = (p) =>\n p.hasPageHeader &&\n !p.hasList &&\n css`\n margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;\n ${m.min.md} {\n margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;\n }\n `;\n\nconst notHasListStyles = (p) =>\n !p.hasList &&\n css`\n padding-top: ${p.theme.pageContentPaddingVertical}em;\n padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n ${horizontalPaddingStyles()(p)};\n `;\n\nconst notHasNavigationStyles = (p) =>\n !p.hasNavigation &&\n !p.hasList &&\n css`\n margin-bottom: env(safe-area-inset-bottom);\n `;\n\ninterface ContainerProps {\n hasNavigation: boolean;\n hasPageHeader: boolean;\n hasList: boolean;\n marginTop: number;\n}\nconst Container = styled(\n 'main',\n omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop')\n)<ContainerProps>`\n margin-top: ${(p) => p.marginTop}em;\n ${hasNavigationStyles};\n ${hasPageHeaderStyles};\n ${notHasListStyles};\n ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n ({ hasList = false, marginTop = 0, children, ...rest }, ref) => {\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n return (\n <Container\n hasNavigation={hasNavigation}\n hasPageHeader={hasPageHeader}\n hasList={hasList}\n marginTop={marginTop}\n {...rest}\n ref={ref}\n >\n {children}\n </Container>\n );\n }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":"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"}
|
|
@@ -18,9 +18,9 @@ const hasNavigationStyles = p => p.hasNavigation && css`
|
|
|
18
18
|
}
|
|
19
19
|
`;
|
|
20
20
|
const hasPageHeaderStyles = p => p.hasPageHeader && !p.hasList && css`
|
|
21
|
-
margin-top: ${p.theme.pageHeaderHeight[0]}em;
|
|
21
|
+
margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;
|
|
22
22
|
${m.min.md} {
|
|
23
|
-
margin-top: ${p.theme.pageHeaderHeight[1]}em;
|
|
23
|
+
margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;
|
|
24
24
|
}
|
|
25
25
|
`;
|
|
26
26
|
const notHasListStyles = p => !p.hasList && css`
|
|
@@ -31,7 +31,8 @@ const notHasListStyles = p => !p.hasList && css`
|
|
|
31
31
|
const notHasNavigationStyles = p => !p.hasNavigation && !p.hasList && css`
|
|
32
32
|
margin-bottom: env(safe-area-inset-bottom);
|
|
33
33
|
`;
|
|
34
|
-
const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList'))`
|
|
34
|
+
const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop'))`
|
|
35
|
+
margin-top: ${p => p.marginTop}em;
|
|
35
36
|
${hasNavigationStyles};
|
|
36
37
|
${hasPageHeaderStyles};
|
|
37
38
|
${notHasListStyles};
|
|
@@ -43,6 +44,7 @@ const Container = styled('main', omitEmotionProps('hasNavigation', 'hasPageHeade
|
|
|
43
44
|
*/
|
|
44
45
|
const PageContent = /*#__PURE__*/forwardRef(({
|
|
45
46
|
hasList = false,
|
|
47
|
+
marginTop = 0,
|
|
46
48
|
children,
|
|
47
49
|
...rest
|
|
48
50
|
}, ref) => {
|
|
@@ -53,7 +55,8 @@ const PageContent = /*#__PURE__*/forwardRef(({
|
|
|
53
55
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
54
56
|
hasNavigation: hasNavigation,
|
|
55
57
|
hasPageHeader: hasPageHeader,
|
|
56
|
-
hasList: hasList
|
|
58
|
+
hasList: hasList,
|
|
59
|
+
marginTop: marginTop
|
|
57
60
|
}, rest, {
|
|
58
61
|
ref: ref
|
|
59
62
|
}), children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","m","horizontalPaddingStyles","omitEmotionProps","React","forwardRef","useContext","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n /**\n * Whether there is the list in the page content.\n * @default false\n */\n hasList?: boolean;\n}\n\nconst hasNavigationStyles = (p) =>\n p.hasNavigation &&\n css`\n ${!p.hasList &&\n css`\n margin-bottom: calc(\n ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n );\n `}\n ${m.min.md} {\n margin-bottom: 0;\n margin-left: ${p.theme.navigationSideWidth}em;\n }\n `;\n\nconst hasPageHeaderStyles = (p) =>\n p.hasPageHeader &&\n !p.hasList &&\n css`\n margin-top: ${p.theme.pageHeaderHeight[0]}em;\n ${m.min.md} {\n margin-top: ${p.theme.pageHeaderHeight[1]}em;\n }\n `;\n\nconst notHasListStyles = (p) =>\n !p.hasList &&\n css`\n padding-top: ${p.theme.pageContentPaddingVertical}em;\n padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n ${horizontalPaddingStyles()(p)};\n `;\n\nconst notHasNavigationStyles = (p) =>\n !p.hasNavigation &&\n !p.hasList &&\n css`\n margin-bottom: env(safe-area-inset-bottom);\n `;\n\ninterface ContainerProps {\n hasNavigation
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","m","horizontalPaddingStyles","omitEmotionProps","React","forwardRef","useContext","LayoutContext","hasNavigationStyles","p","hasNavigation","hasList","theme","navigationTabHeight","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","marginTop","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useContext } from 'react';\nimport LayoutContext from '../Layout/LayoutContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageContentProps extends JsxDivProps {\n /**\n * Whether there is the list in the page content.\n * @default false\n */\n hasList?: boolean;\n /**\n * Additional upper indent (em).\n * It can be used, for example, if you have an additional fixed header.\n * @default 0\n */\n marginTop?: number;\n}\n\nconst hasNavigationStyles = (p) =>\n p.hasNavigation &&\n css`\n ${!p.hasList &&\n css`\n margin-bottom: calc(\n ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n );\n `}\n ${m.min.md} {\n margin-bottom: 0;\n margin-left: ${p.theme.navigationSideWidth}em;\n }\n `;\n\nconst hasPageHeaderStyles = (p) =>\n p.hasPageHeader &&\n !p.hasList &&\n css`\n margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;\n ${m.min.md} {\n margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;\n }\n `;\n\nconst notHasListStyles = (p) =>\n !p.hasList &&\n css`\n padding-top: ${p.theme.pageContentPaddingVertical}em;\n padding-bottom: ${p.theme.pageContentPaddingVertical}em;\n ${horizontalPaddingStyles()(p)};\n `;\n\nconst notHasNavigationStyles = (p) =>\n !p.hasNavigation &&\n !p.hasList &&\n css`\n margin-bottom: env(safe-area-inset-bottom);\n `;\n\ninterface ContainerProps {\n hasNavigation: boolean;\n hasPageHeader: boolean;\n hasList: boolean;\n marginTop: number;\n}\nconst Container = styled(\n 'main',\n omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop')\n)<ContainerProps>`\n margin-top: ${(p) => p.marginTop}em;\n ${hasNavigationStyles};\n ${hasPageHeaderStyles};\n ${notHasListStyles};\n ${notHasNavigationStyles};\n`;\n\n/**\n * The wrapper that adds padding to the page content.\n */\nconst PageContent = forwardRef<HTMLElement, PageContentProps>(\n ({ hasList = false, marginTop = 0, children, ...rest }, ref) => {\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n return (\n <Container\n hasNavigation={hasNavigation}\n hasPageHeader={hasPageHeader}\n hasList={hasList}\n marginTop={marginTop}\n {...rest}\n ref={ref}\n >\n {children}\n </Container>\n );\n }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AAiBnD,MAAMC,mBAAmB,GAAIC,CAAC,IAC5BA,CAAC,CAACC,aAAa,IACfX,GAAI;AACN,MAAM,CAACU,CAAC,CAACE,OAAO,IACZZ,GAAI;AACR;AACA,UAAUU,CAAC,CAACG,KAAK,CAACC,mBAAoB;AACtC;AACA,KAAM;AACN,MAAMZ,CAAC,CAACa,GAAG,CAACC,EAAG;AACf;AACA,qBAAqBN,CAAC,CAACG,KAAK,CAACI,mBAAoB;AACjD;AACA,GAAG;AAEH,MAAMC,mBAAmB,GAAIR,CAAC,IAC5BA,CAAC,CAACS,aAAa,IACf,CAACT,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,kBAAkBU,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAU;AAC5D,MAAMnB,CAAC,CAACa,GAAG,CAACC,EAAG;AACf,oBAAoBN,CAAC,CAACG,KAAK,CAACO,gBAAgB,CAAC,CAAC,CAAC,GAAGV,CAAC,CAACW,SAAU;AAC9D;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIZ,CAAC,IACzB,CAACA,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN,mBAAmBU,CAAC,CAACG,KAAK,CAACU,0BAA2B;AACtD,sBAAsBb,CAAC,CAACG,KAAK,CAACU,0BAA2B;AACzD,MAAMpB,uBAAuB,CAAC,CAAC,CAACO,CAAC,CAAE;AACnC,GAAG;AAEH,MAAMc,sBAAsB,GAAId,CAAC,IAC/B,CAACA,CAAC,CAACC,aAAa,IAChB,CAACD,CAAC,CAACE,OAAO,IACVZ,GAAI;AACN;AACA,GAAG;AAQH,MAAMyB,SAAS,GAAGxB,MAAM,CACtB,MAAM,EACNG,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,CAC3E,CAAkB;AAClB,gBAAiBM,CAAC,IAAKA,CAAC,CAACW,SAAU;AACnC,IAAIZ,mBAAoB;AACxB,IAAIS,mBAAoB;AACxB,IAAII,gBAAiB;AACrB,IAAIE,sBAAuB;AAC3B,CAAC;;AAED;AACA;AACA;AACA,MAAME,WAAW,gBAAGpB,UAAU,CAC5B,CAAC;EAAEM,OAAO,GAAG,KAAK;EAAES,SAAS,GAAG,CAAC;EAAEM,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAM;IAAElB,aAAa;IAAEQ;EAAc,CAAC,GAAGZ,UAAU,CAACC,aAAa,CAAC;EAElE,oBACEH,KAAA,CAAAyB,aAAA,CAACL,SAAS,EAAAM,QAAA;IACRpB,aAAa,EAAEA,aAAc;IAC7BQ,aAAa,EAAEA,aAAc;IAC7BP,OAAO,EAAEA,OAAQ;IACjBS,SAAS,EAAEA;EAAU,GACjBO,IAAI;IACRC,GAAG,EAAEA;EAAI,IAERF,QACQ,CAAC;AAEhB,CACF,CAAC;AAEDD,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW"}
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
|
|
3
3
|
export interface PageContentProps extends JsxDivProps {
|
|
4
4
|
hasList?: boolean;
|
|
5
|
+
marginTop?: number;
|
|
5
6
|
}
|
|
6
7
|
declare const PageContent: React.ForwardRefExoticComponent<PageContentProps & React.RefAttributes<HTMLElement>>;
|
|
7
8
|
export default PageContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IAKnD,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IAKnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8DD,QAAA,MAAM,WAAW,sFAiBhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.211",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@os-design/date-picker-utils": "^1.0.21",
|
|
34
34
|
"@os-design/icons": "^1.0.53",
|
|
35
|
-
"@os-design/input-number-utils": "^1.0.
|
|
35
|
+
"@os-design/input-number-utils": "^1.0.27",
|
|
36
36
|
"@os-design/media": "^1.0.23",
|
|
37
37
|
"@os-design/menu-utils": "^1.0.19",
|
|
38
38
|
"@os-design/portal": "^1.0.15",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react": ">=18",
|
|
60
60
|
"react-dom": ">=18"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "0d332dcea88bf4c8baa45b749f5d34945ded9846"
|
|
63
63
|
}
|
|
@@ -13,6 +13,12 @@ export interface PageContentProps extends JsxDivProps {
|
|
|
13
13
|
* @default false
|
|
14
14
|
*/
|
|
15
15
|
hasList?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Additional upper indent (em).
|
|
18
|
+
* It can be used, for example, if you have an additional fixed header.
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
marginTop?: number;
|
|
16
22
|
}
|
|
17
23
|
|
|
18
24
|
const hasNavigationStyles = (p) =>
|
|
@@ -34,9 +40,9 @@ const hasPageHeaderStyles = (p) =>
|
|
|
34
40
|
p.hasPageHeader &&
|
|
35
41
|
!p.hasList &&
|
|
36
42
|
css`
|
|
37
|
-
margin-top: ${p.theme.pageHeaderHeight[0]}em;
|
|
43
|
+
margin-top: ${p.theme.pageHeaderHeight[0] + p.marginTop}em;
|
|
38
44
|
${m.min.md} {
|
|
39
|
-
margin-top: ${p.theme.pageHeaderHeight[1]}em;
|
|
45
|
+
margin-top: ${p.theme.pageHeaderHeight[1] + p.marginTop}em;
|
|
40
46
|
}
|
|
41
47
|
`;
|
|
42
48
|
|
|
@@ -56,14 +62,16 @@ const notHasNavigationStyles = (p) =>
|
|
|
56
62
|
`;
|
|
57
63
|
|
|
58
64
|
interface ContainerProps {
|
|
59
|
-
hasNavigation
|
|
60
|
-
hasPageHeader
|
|
61
|
-
hasList
|
|
65
|
+
hasNavigation: boolean;
|
|
66
|
+
hasPageHeader: boolean;
|
|
67
|
+
hasList: boolean;
|
|
68
|
+
marginTop: number;
|
|
62
69
|
}
|
|
63
70
|
const Container = styled(
|
|
64
71
|
'main',
|
|
65
|
-
omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')
|
|
72
|
+
omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList', 'marginTop')
|
|
66
73
|
)<ContainerProps>`
|
|
74
|
+
margin-top: ${(p) => p.marginTop}em;
|
|
67
75
|
${hasNavigationStyles};
|
|
68
76
|
${hasPageHeaderStyles};
|
|
69
77
|
${notHasListStyles};
|
|
@@ -74,7 +82,7 @@ const Container = styled(
|
|
|
74
82
|
* The wrapper that adds padding to the page content.
|
|
75
83
|
*/
|
|
76
84
|
const PageContent = forwardRef<HTMLElement, PageContentProps>(
|
|
77
|
-
({ hasList = false, children, ...rest }, ref) => {
|
|
85
|
+
({ hasList = false, marginTop = 0, children, ...rest }, ref) => {
|
|
78
86
|
const { hasNavigation, hasPageHeader } = useContext(LayoutContext);
|
|
79
87
|
|
|
80
88
|
return (
|
|
@@ -82,6 +90,7 @@ const PageContent = forwardRef<HTMLElement, PageContentProps>(
|
|
|
82
90
|
hasNavigation={hasNavigation}
|
|
83
91
|
hasPageHeader={hasPageHeader}
|
|
84
92
|
hasList={hasList}
|
|
93
|
+
marginTop={marginTop}
|
|
85
94
|
{...rest}
|
|
86
95
|
ref={ref}
|
|
87
96
|
>
|