@os-design/core 1.0.115 → 1.0.118
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/Button/ButtonContent.js.map +1 -1
- package/dist/cjs/Checkbox/index.js +18 -12
- package/dist/cjs/Checkbox/index.js.map +1 -1
- package/dist/cjs/CheckboxSkeleton/index.js +79 -0
- package/dist/cjs/CheckboxSkeleton/index.js.map +1 -0
- package/dist/cjs/Layout/index.js.map +1 -1
- package/dist/cjs/List/WindowScroller.js.map +1 -1
- package/dist/cjs/ListItem/index.js +23 -2
- package/dist/cjs/ListItem/index.js.map +1 -1
- package/dist/cjs/ListItemLink/index.js +25 -4
- package/dist/cjs/ListItemLink/index.js.map +1 -1
- package/dist/cjs/PageContent/index.js.map +1 -1
- package/dist/cjs/index.js +21 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Button/ButtonContent.js.map +1 -1
- package/dist/esm/Checkbox/index.js +14 -8
- package/dist/esm/Checkbox/index.js.map +1 -1
- package/dist/esm/CheckboxSkeleton/index.js +43 -0
- package/dist/esm/CheckboxSkeleton/index.js.map +1 -0
- package/dist/esm/Layout/index.js.map +1 -1
- package/dist/esm/List/WindowScroller.js.map +1 -1
- package/dist/esm/ListItem/index.js +16 -1
- package/dist/esm/ListItem/index.js.map +1 -1
- package/dist/esm/ListItemLink/index.js +18 -3
- package/dist/esm/ListItemLink/index.js.map +1 -1
- package/dist/esm/PageContent/index.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/types/Button/ButtonContent.d.ts +1 -0
- package/dist/types/Button/ButtonContent.d.ts.map +1 -1
- package/dist/types/Checkbox/index.d.ts.map +1 -1
- package/dist/types/CheckboxSkeleton/index.d.ts +7 -0
- package/dist/types/CheckboxSkeleton/index.d.ts.map +1 -0
- package/dist/types/Layout/index.d.ts +1 -0
- package/dist/types/Layout/index.d.ts.map +1 -1
- package/dist/types/List/WindowScroller.d.ts +1 -0
- package/dist/types/List/WindowScroller.d.ts.map +1 -1
- package/dist/types/ListItem/index.d.ts +2 -2
- package/dist/types/ListItem/index.d.ts.map +1 -1
- package/dist/types/ListItemLink/index.d.ts.map +1 -1
- package/dist/types/PageContent/index.d.ts +1 -1
- package/dist/types/PageContent/index.d.ts.map +1 -1
- package/dist/types/Select/SelectToggle.d.ts +0 -2
- package/dist/types/Select/SelectToggle.d.ts.map +1 -1
- package/dist/types/Select/index.d.ts +0 -2
- package/dist/types/Select/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +13 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAWA,IAAMA,SAAS,GAAGC,mBAAOC,GAAV,uHAEI,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFJ,CAAf;;AAKA,IAAMC,UAAU,GAAGL,mBAAOC,GAAV,wHAEE,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFF,CAAhB;;AAKA,IAAME,OAAO,GAAGN,mBAAOO,IAAV,6KAIU,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAf;AAAA,CAJV,CAAb;;AASA,IAAMC,WAAW,GAAG,wBAAOC,cAAP,CAAH,8FAAjB;AAIA,IAAMC,aAAa,OAAGC,iBAAH,wHAAnB;AAQA,IAAMC,gBAAgB,GAAG,wBACvB,KADuB,EAEvB,6BAAiB,QAAjB,CAFuB,CAAH,8TAeX,UAACX,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASC,IAAb,CAAP;AAAA,CAfW,EAgBA,UAACb,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACY,MAAF,CAASE,EAAb,CAAP;AAAA,CAhBA,EAiBPL,aAjBO,EAiBU,UAACT,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQc,eAAf;AAAA,CAjBV,CAAtB,C,CAoBA;;AACA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C;AAAA,MAClDC,IADkD,QAClDA,IADkD;AAAA,MAElDC,KAFkD,QAElDA,KAFkD;AAAA,0BAGlDC,OAHkD;AAAA,MAGlDA,OAHkD,6BAGxC,KAHwC;AAAA,MAIlDC,aAJkD,QAIlDA,aAJkD;AAAA,MAKlDC,QALkD,QAKlDA,QALkD;AAAA,sBAOlD,kEACGJ,IAAI,iBAAI,gCAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,gCAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,gCAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,gCAAC,gBAAD;AAAkB,IAAA,MAAM,EAAEC;AAA1B,kBACE,gCAAC,WAAD,OADF,CALJ,CAPkD;AAAA,CAApD;;eAmBeJ,a","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}
|
|
@@ -23,7 +23,7 @@ var _theming = require("@os-design/theming");
|
|
|
23
23
|
|
|
24
24
|
var _excluded = ["disabled", "value", "defaultValue", "onChange", "size", "onKeyDown", "onMouseDown", "children"];
|
|
25
25
|
|
|
26
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
26
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
27
27
|
|
|
28
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
29
|
|
|
@@ -63,9 +63,7 @@ var disabledIconStyles = function disabledIconStyles(p) {
|
|
|
63
63
|
return p.disabled && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n "])), (0, _theming.clr)(p.theme.checkboxDisabledColorBg), (0, _theming.clr)(p.theme.checkboxDisabledColorIcon), (0, _theming.clr)(p.theme.checkboxDisabledColorBorder));
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'checked'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
67
|
-
return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
|
|
68
|
-
}, function (p) {
|
|
66
|
+
var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'checked'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: ", "em;\n height: ", "em;\n min-width: ", "em;\n min-height: ", "em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ", "em;\n color: ", ";\n margin-top: ", "em;\n\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (p) {
|
|
69
67
|
return p.theme.checkboxSize;
|
|
70
68
|
}, function (p) {
|
|
71
69
|
return p.theme.checkboxSize;
|
|
@@ -77,6 +75,8 @@ var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)
|
|
|
77
75
|
return p.theme.borderRadius;
|
|
78
76
|
}, function (p) {
|
|
79
77
|
return (0, _theming.clr)(p.theme.checkboxCheckedColorIcon);
|
|
78
|
+
}, function (p) {
|
|
79
|
+
return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
|
|
80
80
|
}, uncheckedIconStyles, checkedIconStyles, disabledIconStyles, (0, _styles.transitionStyles)('background-color', 'color', 'border-color'));
|
|
81
81
|
|
|
82
82
|
var hoverUncheckedIconStyles = function hoverUncheckedIconStyles(p) {
|
|
@@ -92,19 +92,24 @@ var hoverStyles = function hoverStyles(p) {
|
|
|
92
92
|
};
|
|
93
93
|
|
|
94
94
|
var disabledContainerStyles = function disabledContainerStyles(p) {
|
|
95
|
-
return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n
|
|
95
|
+
return p.disabled && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
96
96
|
};
|
|
97
97
|
|
|
98
|
-
var Container = (0, _styled["default"])('label', (0, _utils.omitEmotionProps)('disabled', 'size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n user-select: none;\n\n display: flex;\n
|
|
99
|
-
return
|
|
98
|
+
var Container = (0, _styled["default"])('label', (0, _utils.omitEmotionProps)('disabled', 'size', 'checked'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ", "em 0;\n\n ", ";\n ", ";\n ", ";\n ", ";\n"])), _styles.resetFocusStyles, function (p) {
|
|
99
|
+
return p.theme.checkboxVerticalIndent;
|
|
100
100
|
}, hoverStyles, disabledContainerStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('color'));
|
|
101
101
|
|
|
102
|
-
var
|
|
102
|
+
var disabledTextStyles = function disabledTextStyles(p) {
|
|
103
|
+
return p.disabled && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: ", ";\n "])), (0, _theming.clr)(p.theme.checkboxDisabledColorText));
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
var Text = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-left: 0.4em;\n color: ", ";\n ", ";\n"])), function (p) {
|
|
107
|
+
return (0, _theming.clr)(p.theme.colorText);
|
|
108
|
+
}, disabledTextStyles);
|
|
103
109
|
/**
|
|
104
110
|
* The checkbox that can be enabled or disabled.
|
|
105
111
|
*/
|
|
106
112
|
|
|
107
|
-
|
|
108
113
|
var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
109
114
|
var _ref$disabled = _ref.disabled,
|
|
110
115
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
@@ -133,8 +138,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
133
138
|
disabled: disabled,
|
|
134
139
|
checked: forwardedValue,
|
|
135
140
|
size: size,
|
|
136
|
-
tabIndex: !disabled ? 0 : -1
|
|
137
|
-
,
|
|
141
|
+
tabIndex: !disabled ? 0 : -1,
|
|
138
142
|
onClick: function onClick() {
|
|
139
143
|
if (disabled) return;
|
|
140
144
|
setForwardedValue(!forwardedValue);
|
|
@@ -162,7 +166,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
162
166
|
}), /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
163
167
|
disabled: disabled,
|
|
164
168
|
checked: forwardedValue
|
|
165
|
-
}, forwardedValue && /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), /*#__PURE__*/_react["default"].createElement(Text,
|
|
169
|
+
}, forwardedValue && /*#__PURE__*/_react["default"].createElement(_icons.Check, null)), children && /*#__PURE__*/_react["default"].createElement(Text, {
|
|
170
|
+
disabled: disabled
|
|
171
|
+
}, children));
|
|
166
172
|
});
|
|
167
173
|
Checkbox.displayName = 'Checkbox';
|
|
168
174
|
var _default = Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Checkbox/index.tsx"],"names":["uncheckedIconStyles","p","checked","css","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","lineHeight","checkboxSize","borderRadius","checkboxCheckedColorIcon","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","checkboxDisabledColorText","Container","resetFocusStyles","colorText","sizeStyles","Text","styled","div","Checkbox","ref","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Pick<CheckboxProps, 'disabled'> {\n checked: CheckboxProps['value'];\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ninterface ContainerProps extends Pick<CheckboxProps, 'disabled' | 'size'> {\n checked: CheckboxProps['value'];\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n // role={!disabled ? 'checkbox' : undefined}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n <Text>{children}</Text>\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Checkbox/index.tsx"],"names":["uncheckedIconStyles","p","checked","css","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","resetFocusStyles","checkboxVerticalIndent","sizeStyles","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","ref","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _styles = require("@os-design/styles");
|
|
15
|
+
|
|
16
|
+
var _utils = require("@os-design/utils");
|
|
17
|
+
|
|
18
|
+
var _theming = require("@os-design/theming");
|
|
19
|
+
|
|
20
|
+
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
|
|
21
|
+
|
|
22
|
+
var _excluded = ["children"];
|
|
23
|
+
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
25
|
+
|
|
26
|
+
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); }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
31
|
+
|
|
32
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
33
|
+
|
|
34
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
35
|
+
|
|
36
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
37
|
+
|
|
38
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
39
|
+
|
|
40
|
+
var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n user-select: none;\n display: flex;\n margin: ", "em 0;\n ", ";\n"])), function (p) {
|
|
41
|
+
return p.theme.checkboxVerticalIndent;
|
|
42
|
+
}, _styles.sizeStyles);
|
|
43
|
+
var ImageSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "em;\n height: ", "em;\n min-width: ", "em;\n min-height: ", "em;\n\n border-radius: ", "em;\n margin-top: ", "em;\n"])), function (p) {
|
|
44
|
+
return p.theme.checkboxSize;
|
|
45
|
+
}, function (p) {
|
|
46
|
+
return p.theme.checkboxSize;
|
|
47
|
+
}, function (p) {
|
|
48
|
+
return p.theme.checkboxSize;
|
|
49
|
+
}, function (p) {
|
|
50
|
+
return p.theme.checkboxSize;
|
|
51
|
+
}, function (p) {
|
|
52
|
+
return p.theme.borderRadius;
|
|
53
|
+
}, function (p) {
|
|
54
|
+
return (p.theme.lineHeight - p.theme.checkboxSize) / 2;
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
var Text = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 0.4em;\n color: ", ";\n"])), function (p) {
|
|
58
|
+
return (0, _theming.clr)(p.theme.colorText);
|
|
59
|
+
});
|
|
60
|
+
/**
|
|
61
|
+
* Provides a checkbox placeholder while a user waits for the content to load.
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
var CheckboxSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
66
|
+
var children = _ref.children,
|
|
67
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
68
|
+
|
|
69
|
+
return /*#__PURE__*/_react["default"].createElement(Container, _extends({
|
|
70
|
+
role: "checkbox",
|
|
71
|
+
"aria-busy": true
|
|
72
|
+
}, rest, {
|
|
73
|
+
ref: ref
|
|
74
|
+
}), /*#__PURE__*/_react["default"].createElement(ImageSkeleton, null), children && /*#__PURE__*/_react["default"].createElement(Text, null, children));
|
|
75
|
+
});
|
|
76
|
+
CheckboxSkeleton.displayName = 'CheckboxSkeleton';
|
|
77
|
+
var _default = CheckboxSkeleton;
|
|
78
|
+
exports["default"] = _default;
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":["Container","p","theme","checkboxVerticalIndent","sizeStyles","ImageSkeleton","Skeleton","checkboxSize","borderRadius","lineHeight","Text","styled","div","colorText","CheckboxSkeleton","ref","children","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,8IAGH,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAf;AAAA,CAHG,EAIXC,kBAJW,CAAf;AAOA,IAAMC,aAAa,GAAG,wBAAOC,oBAAP,CAAH,+MACR,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CADQ,EAEP,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAFO,EAGJ,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAHI,EAIH,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,YAAf;AAAA,CAJG,EAMA,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQM,YAAf;AAAA,CANA,EAOH,UAACP,CAAD;AAAA,SAAO,CAACA,CAAC,CAACC,KAAF,CAAQO,UAAR,GAAqBR,CAAC,CAACC,KAAF,CAAQK,YAA9B,IAA8C,CAArD;AAAA,CAPG,CAAnB;;AAUA,IAAMG,IAAI,GAAGC,mBAAOC,GAAV,iHAEC,UAACX,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQW,SAAZ,CAAP;AAAA,CAFD,CAAV;AAKA;AACA;AACA;;;AACA,IAAMC,gBAAgB,gBAAG,uBACvB,gBAAwBC,GAAxB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAgBC,IAAhB;;AAAA,sBACE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B;AAA3B,KAAyCA,IAAzC;AAA+C,IAAA,GAAG,EAAEF;AAApD,mBACE,gCAAC,aAAD,OADF,EAEGC,QAAQ,iBAAI,gCAAC,IAAD,QAAOA,QAAP,CAFf,CADF;AAAA,CADuB,CAAzB;AASAF,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;eAEeJ,gB","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children && <Text>{children}</Text>}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/Layout/index.tsx"],"names":["Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;AAoBA;AACA;AACA;AACA,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIhC;AAAA,gCAHJC,aAGI;AAAA,MAHJA,aAGI,mCAHY,KAGZ;AAAA,gCAFJC,aAEI;AAAA,MAFJA,aAEI,mCAFY,KAEZ;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,YAAY,GAAG,oBACnB;AAAA,WAAO;AAAEH,MAAAA,aAAa,EAAbA,aAAF;AAAiBC,MAAAA,aAAa,EAAbA;AAAjB,KAAP;AAAA,GADmB,EAEnB,CAACD,aAAD,EAAgBC,aAAhB,CAFmB,CAArB;AAKA,sBACE,gCAAC,yBAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAEE;AAA/B,KACGD,QADH,CADF;AAKD,CAfD;;AAiBAH,MAAM,CAACK,WAAP,GAAqB,QAArB;eAEeL,M","sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n /**\n * Whether there is the navigation in the layout.\n * @default false\n */\n hasNavigation?: boolean;\n /**\n * Whether there is the page header in the layout.\n * @default false\n */\n hasPageHeader?: boolean;\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n hasNavigation = false,\n hasPageHeader = false,\n children,\n}) => {\n const contextValue = useMemo(\n () => ({ hasNavigation, hasPageHeader }),\n [hasNavigation, hasPageHeader]\n );\n\n return (\n <LayoutContext.Provider value={contextValue}>\n {children}\n </LayoutContext.Provider>\n );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/WindowScroller.tsx"],"names":["DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/List/WindowScroller.tsx"],"names":["DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAeA;AACA;AACA;AACA;AACO,IAAMA,mCAAmC,GAAG,GAA5C;;;AAEP,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAGhD;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;AAAA,MADJC,QACI,QADJA,QACI;AACJ,MAAMC,WAAW,GAAG,oBAApB;AAEA,wBAAU,YAAM;AACdA,IAAAA,WAAW,CAACC,OAAZ,GAAsBH,QAAtB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,MAAMI,cAAc,GAAG,wBAAY,YAAM;AACvC;AACA,8DAAkCN,mCAAlC;AACA,QAAI,CAACI,WAAW,CAACC,OAAjB,EAA0B;AAC1BD,IAAAA,WAAW,CAACC,OAAZ,CAAoB;AAClBE,MAAAA,GAAG,EAAEC,MAAM,CAACC,WADM;AAElBC,MAAAA,IAAI,EAAEF,MAAM,CAACG;AAFK,KAApB;AAID,GARsB,EAQpB,EARoB,CAAvB;AAUA,wBAAU;AAAA,WAAM;AAAA,aAAM,0DAAkC,CAAlC,CAAN;AAAA,KAAN;AAAA,GAAV,EAA4D,EAA5D;AACA,uBAASC,QAAT,EAAmB,QAAnB,EAA6BN,cAA7B,EAlBI,CAoBJ;;AACA,sBAAO,kEAAGH,QAAH,CAAP;AACD,CAzBD;;eA2BeF,c","sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { useEvent } from '@os-design/utils';\nimport {\n disableBodyPointerEvents,\n enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n top: number;\n left: number;\n}\n\ninterface WindowScrollerProps {\n onScroll?: (props: ScrollPosition) => void;\n children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n onScroll = () => {},\n children,\n}) => {\n const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n useEffect(() => {\n onScrollRef.current = onScroll;\n }, [onScroll]);\n\n const scrollListener = useCallback(() => {\n disableBodyPointerEvents();\n enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n if (!onScrollRef.current) return;\n onScrollRef.current({\n top: window.pageYOffset,\n left: window.pageXOffset,\n });\n }, []);\n\n useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n useEvent(document, 'scroll', scrollListener);\n\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"file":"WindowScroller.js"}
|
|
@@ -19,7 +19,7 @@ var _theming = require("@os-design/theming");
|
|
|
19
19
|
|
|
20
20
|
var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
|
|
21
21
|
|
|
22
|
-
var _excluded = ["title", "description", "left", "right", "actions"];
|
|
22
|
+
var _excluded = ["title", "description", "left", "right", "actions", "onTouchStart", "onTouchMove", "onTouchEnd"];
|
|
23
23
|
|
|
24
24
|
var _templateObject;
|
|
25
25
|
|
|
@@ -53,6 +53,12 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
53
53
|
right = _ref.right,
|
|
54
54
|
_ref$actions = _ref.actions,
|
|
55
55
|
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
56
|
+
_ref$onTouchStart = _ref.onTouchStart,
|
|
57
|
+
_onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
|
|
58
|
+
_ref$onTouchMove = _ref.onTouchMove,
|
|
59
|
+
_onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
|
|
60
|
+
_ref$onTouchEnd = _ref.onTouchEnd,
|
|
61
|
+
_onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
|
|
56
62
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
57
63
|
|
|
58
64
|
var touchDevice = (0, _react.useMemo)(function () {
|
|
@@ -63,7 +69,22 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
63
69
|
opened = _useSwipe.opened,
|
|
64
70
|
handlers = _useSwipe.handlers;
|
|
65
71
|
|
|
66
|
-
return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({},
|
|
72
|
+
return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, rest, {
|
|
73
|
+
onTouchStart: function onTouchStart(e) {
|
|
74
|
+
handlers.onTouchStart(e);
|
|
75
|
+
|
|
76
|
+
_onTouchStart(e);
|
|
77
|
+
},
|
|
78
|
+
onTouchMove: function onTouchMove(e) {
|
|
79
|
+
handlers.onTouchMove(e);
|
|
80
|
+
|
|
81
|
+
_onTouchMove(e);
|
|
82
|
+
},
|
|
83
|
+
onTouchEnd: function onTouchEnd(e) {
|
|
84
|
+
handlers.onTouchEnd(e);
|
|
85
|
+
|
|
86
|
+
_onTouchEnd(e);
|
|
87
|
+
},
|
|
67
88
|
ref: ref
|
|
68
89
|
}), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
|
|
69
90
|
title: title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","rest","touchDevice","opened","handlers","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","opened","handlers","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAYEC,GAZF,EAaK;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,MAVDC,WAUC,QAVDA,WAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,KAQC,QARDA,KAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,EAOT;AAAA,+BANDC,YAMC;AAAA,MANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;AAAA,8BALDC,WAKC;AAAA,MALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;AAAA,6BAJDC,UAIC;AAAA,MAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;AAAA,MAHEC,IAGF;;AACH,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eACMH,IADN;AAEE,IAAA,YAAY,EAAE,sBAACI,CAAD,EAAO;AACnBD,MAAAA,QAAQ,CAACN,YAAT,CAAsBO,CAAtB;;AACAP,MAAAA,aAAY,CAACO,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAE,qBAACA,CAAD,EAAO;AAClBD,MAAAA,QAAQ,CAACL,WAAT,CAAqBM,CAArB;;AACAN,MAAAA,YAAW,CAACM,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAE,oBAACA,CAAD,EAAO;AACjBD,MAAAA,QAAQ,CAACJ,UAAT,CAAoBK,CAApB;;AACAL,MAAAA,WAAU,CAACK,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEb;AAdP,mBAgBE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEK,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;eAEef,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n position: relative;\n box-sizing: border-box;\n min-height: 4em;\n overflow: hidden;\n\n display: flex;\n align-items: center;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n @media (hover: hover) {\n // Hide actions by default\n & > nav {\n opacity: 0;\n }\n\n // Display actions either on focus, or on hover\n &:hover,\n &:focus-within {\n & > nav {\n opacity: 1;\n }\n }\n }\n\n ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n (\n {\n title,\n description,\n left,\n right,\n actions = [],\n onTouchStart = () => {},\n onTouchMove = () => {},\n onTouchEnd = () => {},\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const { opened, handlers } = useSwipe();\n\n return (\n <ListItemContainer\n {...rest}\n onTouchStart={(e) => {\n handlers.onTouchStart(e);\n onTouchStart(e);\n }}\n onTouchMove={(e) => {\n handlers.onTouchMove(e);\n onTouchMove(e);\n }}\n onTouchEnd={(e) => {\n handlers.onTouchEnd(e);\n onTouchEnd(e);\n }}\n ref={ref}\n >\n <ListItemContent\n title={title}\n description={description}\n left={left}\n right={right}\n actions={actions}\n hasSwipe={touchDevice}\n opened={opened}\n />\n </ListItemContainer>\n );\n }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}
|
|
@@ -23,7 +23,7 @@ var _ListItem = require("../ListItem");
|
|
|
23
23
|
|
|
24
24
|
var _ListItemContent = _interopRequireDefault(require("../ListItem/ListItemContent"));
|
|
25
25
|
|
|
26
|
-
var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown"];
|
|
26
|
+
var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown", "onTouchStart", "onTouchMove", "onTouchEnd"];
|
|
27
27
|
|
|
28
28
|
var _templateObject, _templateObject2;
|
|
29
29
|
|
|
@@ -74,6 +74,12 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
74
74
|
as = _ref.as,
|
|
75
75
|
_ref$onMouseDown = _ref.onMouseDown,
|
|
76
76
|
_onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
|
|
77
|
+
_ref$onTouchStart = _ref.onTouchStart,
|
|
78
|
+
_onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
|
|
79
|
+
_ref$onTouchMove = _ref.onTouchMove,
|
|
80
|
+
_onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
|
|
81
|
+
_ref$onTouchEnd = _ref.onTouchEnd,
|
|
82
|
+
_onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
|
|
77
83
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
78
84
|
|
|
79
85
|
var touchDevice = (0, _react.useMemo)(function () {
|
|
@@ -86,13 +92,28 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
86
92
|
|
|
87
93
|
return /*#__PURE__*/_react["default"].createElement(StyledLink, _extends({
|
|
88
94
|
touchDevice: touchDevice,
|
|
89
|
-
as: as
|
|
95
|
+
as: as
|
|
96
|
+
}, rest, {
|
|
90
97
|
onMouseDown: function onMouseDown(e) {
|
|
91
98
|
_onMouseDown(e);
|
|
92
99
|
|
|
93
100
|
e.preventDefault();
|
|
94
|
-
}
|
|
95
|
-
|
|
101
|
+
},
|
|
102
|
+
onTouchStart: function onTouchStart(e) {
|
|
103
|
+
handlers.onTouchStart(e);
|
|
104
|
+
|
|
105
|
+
_onTouchStart(e);
|
|
106
|
+
},
|
|
107
|
+
onTouchMove: function onTouchMove(e) {
|
|
108
|
+
handlers.onTouchMove(e);
|
|
109
|
+
|
|
110
|
+
_onTouchMove(e);
|
|
111
|
+
},
|
|
112
|
+
onTouchEnd: function onTouchEnd(e) {
|
|
113
|
+
handlers.onTouchEnd(e);
|
|
114
|
+
|
|
115
|
+
_onTouchEnd(e);
|
|
116
|
+
},
|
|
96
117
|
ref: ref
|
|
97
118
|
}), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
|
|
98
119
|
title: title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","rest","opened","handlers","e","preventDefault","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtB,CAACA,CAAC,CAACC,WAAH,QACAC,WADA,iNAKQ,+CAAQF,CAAC,CAACG,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAR,IAAkD,CAAlD,GALR,EAMQ,kBAAIL,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CANR,EAOUJ,CAAC,CAACG,KAAF,CAAQG,0BAPlB,CADsB;AAAA,CAAxB;;AAgBA,IAAMC,UAAU,GAAG,wBACjBC,4BAAkBC,aAAlB,CAAgC,GAAhC,CADiB,EAEjB,6BAAiB,aAAjB,EAAgC,IAAhC,CAFiB,CAAH,wPAIZC,wBAJY,EAWU,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CAAP;AAAA,CAXV,EAeZL,eAfY,CAAhB;AAkBA;AACA;AACA;;AACA,IAAMY,YAAY,gBAAG,uBACnB,
|
|
1
|
+
{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","opened","handlers","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n !p.touchDevice &&\n css`\n & > nav {\n background: linear-gradient(\n to right,\n ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n ${clr(p.theme.listItemColorBgHover)}\n ${p.theme.listItemActionsPaddingLeft}em\n );\n }\n `;\n\ninterface StyledLinkProps {\n touchDevice: boolean;\n}\nconst StyledLink = styled(\n ListItemContainer.withComponent('a'),\n omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n ${resetFocusStyles};\n cursor: pointer;\n text-decoration: none;\n\n @media (hover: hover) {\n &:hover,\n &:focus-within {\n background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n }\n }\n\n ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n (\n {\n title,\n description,\n left,\n right,\n actions = [],\n as,\n onMouseDown = () => {},\n onTouchStart = () => {},\n onTouchMove = () => {},\n onTouchEnd = () => {},\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const { opened, handlers } = useSwipe();\n\n return (\n <StyledLink\n touchDevice={touchDevice}\n as={as}\n {...rest}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n onTouchStart={(e) => {\n handlers.onTouchStart(e);\n onTouchStart(e);\n }}\n onTouchMove={(e) => {\n handlers.onTouchMove(e);\n onTouchMove(e);\n }}\n onTouchEnd={(e) => {\n handlers.onTouchEnd(e);\n onTouchEnd(e);\n }}\n ref={ref}\n >\n <ListItemContent\n title={title}\n description={description}\n left={left}\n right={right}\n actions={actions}\n hasSwipe={touchDevice}\n opened={opened}\n />\n </StyledLink>\n );\n }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","ref","children","rest","LayoutContext","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;AAAA,SAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,SAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;AAAA,SAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,SAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;AAAA,SACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,uCAA0Bd,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACf,CAAD;AAAA,SAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMc,SAAS,GAAG,wBAChB,MADgB,EAEhB,6BAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXjB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXE,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAME,WAAW,gBAAG,uBAClB,gBAAyCC,GAAzC,EAAiD;AAAA,0BAA9Cf,OAA8C;AAAA,MAA9CA,OAA8C,6BAApC,KAAoC;AAAA,MAA7BgB,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,IAAgB;;AAC/C,oBAAyC,uBAAWC,yBAAX,CAAzC;AAAA,MAAQpB,aAAR,eAAQA,aAAR;AAAA,MAAuBU,aAAvB,eAAuBA,aAAvB;;AAEA,sBACE,gCAAC,SAAD;AACE,IAAA,aAAa,EAAEV,aADjB;AAEE,IAAA,aAAa,EAAEU,aAFjB;AAGE,IAAA,OAAO,EAAER;AAHX,KAIMiB,IAJN;AAKE,IAAA,GAAG,EAAEF;AALP,MAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;eAEeL,W","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\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?: boolean;\n hasPageHeader?: boolean;\n hasList?: boolean;\n}\nconst Container = styled(\n 'main',\n omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\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<
|
|
1
|
+
{"version":3,"sources":["../../../src/PageContent/index.tsx"],"names":["hasNavigationStyles","p","hasNavigation","css","hasList","theme","navigationTabHeight","m","min","md","navigationSideWidth","hasPageHeaderStyles","hasPageHeader","pageHeaderHeight","notHasListStyles","pageContentPaddingVertical","notHasNavigationStyles","Container","PageContent","ref","children","rest","LayoutContext","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;AAAA,SAC1BA,CAAC,CAACC,aAAF,QACAC,WADA,6JAEI,CAACF,CAAC,CAACG,OAAH,QACFD,WADE,mKAGIF,CAAC,CAACI,KAAF,CAAQC,mBAHZ,CAFJ,EAQIC,SAAEC,GAAF,CAAMC,EARV,EAUmBR,CAAC,CAACI,KAAF,CAAQK,mBAV3B,CAD0B;AAAA,CAA5B;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACV,CAAD;AAAA,SAC1BA,CAAC,CAACW,aAAF,IACA,CAACX,CAAC,CAACG,OADH,QAEAD,WAFA,oJAGgBF,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CAHhB,EAIIN,SAAEC,GAAF,CAAMC,EAJV,EAKkBR,CAAC,CAACI,KAAF,CAAQQ,gBAAR,CAAyB,CAAzB,CALlB,CAD0B;AAAA,CAA5B;;AAUA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACb,CAAD;AAAA,SACvB,CAACA,CAAC,CAACG,OAAH,QACAD,WADA,+IAEiBF,CAAC,CAACI,KAAF,CAAQU,0BAFzB,EAGoBd,CAAC,CAACI,KAAF,CAAQU,0BAH5B,EAII,uCAA0Bd,CAA1B,CAJJ,CADuB;AAAA,CAAzB;;AAQA,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACf,CAAD;AAAA,SAC7B,CAACA,CAAC,CAACC,aAAH,IACA,CAACD,CAAC,CAACG,OADH,QAEAD,WAFA,6HAD6B;AAAA,CAA/B;;AAYA,IAAMc,SAAS,GAAG,wBAChB,MADgB,EAEhB,6BAAiB,eAAjB,EAAkC,eAAlC,EAAmD,SAAnD,CAFgB,CAAH,8GAIXjB,mBAJW,EAKXW,mBALW,EAMXG,gBANW,EAOXE,sBAPW,CAAf;AAUA;AACA;AACA;;AACA,IAAME,WAAW,gBAAG,uBAClB,gBAAyCC,GAAzC,EAAiD;AAAA,0BAA9Cf,OAA8C;AAAA,MAA9CA,OAA8C,6BAApC,KAAoC;AAAA,MAA7BgB,QAA6B,QAA7BA,QAA6B;AAAA,MAAhBC,IAAgB;;AAC/C,oBAAyC,uBAAWC,yBAAX,CAAzC;AAAA,MAAQpB,aAAR,eAAQA,aAAR;AAAA,MAAuBU,aAAvB,eAAuBA,aAAvB;;AAEA,sBACE,gCAAC,SAAD;AACE,IAAA,aAAa,EAAEV,aADjB;AAEE,IAAA,aAAa,EAAEU,aAFjB;AAGE,IAAA,OAAO,EAAER;AAHX,KAIMiB,IAJN;AAKE,IAAA,GAAG,EAAEF;AALP,MAOGC,QAPH,CADF;AAWD,CAfiB,CAApB;AAkBAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;eAEeL,W","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useContext } from 'react';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\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?: boolean;\n hasPageHeader?: boolean;\n hasList?: boolean;\n}\nconst Container = styled(\n 'main',\n omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')\n)<ContainerProps>`\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, children, ...rest }, ref) => {\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n\n return (\n <Container\n hasNavigation={hasNavigation}\n hasPageHeader={hasPageHeader}\n hasList={hasList}\n {...rest}\n ref={ref}\n >\n {children}\n </Container>\n );\n }\n);\n\nPageContent.displayName = 'PageContent';\n\nexport default PageContent;\n"],"file":"index.js"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var _exportNames = {
|
|
|
13
13
|
BreadcrumbItem: true,
|
|
14
14
|
Button: true,
|
|
15
15
|
Checkbox: true,
|
|
16
|
+
CheckboxSkeleton: true,
|
|
16
17
|
DatePicker: true,
|
|
17
18
|
Drawer: true,
|
|
18
19
|
Form: true,
|
|
@@ -108,6 +109,12 @@ Object.defineProperty(exports, "Checkbox", {
|
|
|
108
109
|
return _Checkbox["default"];
|
|
109
110
|
}
|
|
110
111
|
});
|
|
112
|
+
Object.defineProperty(exports, "CheckboxSkeleton", {
|
|
113
|
+
enumerable: true,
|
|
114
|
+
get: function get() {
|
|
115
|
+
return _CheckboxSkeleton["default"];
|
|
116
|
+
}
|
|
117
|
+
});
|
|
111
118
|
Object.defineProperty(exports, "DatePicker", {
|
|
112
119
|
enumerable: true,
|
|
113
120
|
get: function get() {
|
|
@@ -519,6 +526,20 @@ Object.keys(_Checkbox).forEach(function (key) {
|
|
|
519
526
|
});
|
|
520
527
|
});
|
|
521
528
|
|
|
529
|
+
var _CheckboxSkeleton = _interopRequireWildcard(require("./CheckboxSkeleton"));
|
|
530
|
+
|
|
531
|
+
Object.keys(_CheckboxSkeleton).forEach(function (key) {
|
|
532
|
+
if (key === "default" || key === "__esModule") return;
|
|
533
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
534
|
+
if (key in exports && exports[key] === _CheckboxSkeleton[key]) return;
|
|
535
|
+
Object.defineProperty(exports, key, {
|
|
536
|
+
enumerable: true,
|
|
537
|
+
get: function get() {
|
|
538
|
+
return _CheckboxSkeleton[key];
|
|
539
|
+
}
|
|
540
|
+
});
|
|
541
|
+
});
|
|
542
|
+
|
|
522
543
|
var _DatePicker = _interopRequireWildcard(require("./DatePicker"));
|
|
523
544
|
|
|
524
545
|
Object.keys(_DatePicker).forEach(function (key) {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AA6DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA5DA;;AACA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA3DA;;AACA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AA1DA;;AA2DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as Alert } from './Alert';\nexport { default as Avatar } from './Avatar';\nexport { default as AvatarSkeleton } from './AvatarSkeleton';\nexport { default as Breadcrumb } from './Breadcrumb';\nexport { default as BreadcrumbItem } from './BreadcrumbItem';\nexport { default as Button } from './Button';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxSkeleton } from './CheckboxSkeleton';\nexport { default as DatePicker } from './DatePicker';\nexport { default as Drawer } from './Drawer';\nexport { default as Form } from './Form';\nexport { default as FormDivider } from './FormDivider';\nexport { default as FormItem } from './FormItem';\nexport { default as GlobalStyles } from './GlobalStyles';\nexport { default as HeaderSkeleton } from './HeaderSkeleton';\nexport { default as Image } from './Image';\nexport { default as ImageSkeleton } from './ImageSkeleton';\nexport { default as Input } from './Input';\nexport { default as InputNumber } from './InputNumber';\nexport { default as InputPassword } from './InputPassword';\nexport { default as InputSearch } from './InputSearch';\nexport { default as InputSkeleton } from './InputSkeleton';\nexport { default as Layout } from './Layout';\nexport { default as Link } from './Link';\nexport { default as LinkButton } from './LinkButton';\nexport { default as List } from './List';\nexport { default as ListItem } from './ListItem';\nexport { default as ListItemLink } from './ListItemLink';\nexport { default as ListSkeleton } from './ListSkeleton';\nexport { default as LogoLink } from './LogoLink';\nexport { default as message } from './message';\nexport { default as Menu } from './Menu';\nexport { default as MenuDivider } from './MenuDivider';\nexport { default as MenuGroup } from './MenuGroup';\nexport { default as MenuItem } from './MenuItem';\nexport { default as Modal } from './Modal';\nexport { default as Navigation } from './Navigation';\nexport { default as NavigationItem } from './NavigationItem';\nexport { default as PageContent } from './PageContent';\nexport { default as PageHeader } from './PageHeader';\nexport { default as PageHeaderInputSearch } from './PageHeaderInputSearch';\nexport { default as PageHeaderSkeleton } from './PageHeaderSkeleton';\nexport { default as ParagraphSkeleton } from './ParagraphSkeleton';\nexport { default as Popover } from './Popover';\nexport { default as Progress } from './Progress';\nexport { default as Result } from './Result';\nexport { default as ScrollButton } from './ScrollButton';\nexport { default as Select } from './Select';\nexport { default as Skeleton } from './Skeleton';\nexport { default as Switch } from './Switch';\nexport { default as SwitchSkeleton } from './SwitchSkeleton';\nexport { default as Tag } from './Tag';\nexport { default as TagLink } from './TagLink';\nexport { default as TagList } from './TagList';\nexport { default as TagListSkeleton } from './TagListSkeleton';\nexport { default as TagSkeleton } from './TagSkeleton';\nexport { default as TextArea } from './TextArea';\nexport { default as TextAreaSkeleton } from './TextAreaSkeleton';\nexport { default as ThemeSwitcher } from './ThemeSwitcher';\nexport { default as YouTubeVideo } from './YouTubeVideo';\n\nexport * from './Alert';\nexport * from './Avatar';\nexport * from './AvatarSkeleton';\nexport * from './Breadcrumb';\nexport * from './BreadcrumbItem';\nexport * from './Button';\nexport * from './Checkbox';\nexport * from './CheckboxSkeleton';\nexport * from './DatePicker';\nexport * from './Drawer';\nexport * from './Form';\nexport * from './FormDivider';\nexport * from './FormItem';\nexport * from './HeaderSkeleton';\nexport * from './Image';\nexport * from './ImageSkeleton';\nexport * from './Input';\nexport * from './InputNumber';\nexport * from './InputPassword';\nexport * from './InputSearch';\nexport * from './InputSkeleton';\nexport * from './Layout';\nexport * from './Link';\nexport * from './LinkButton';\nexport * from './List';\nexport * from './ListItem';\nexport * from './ListItemLink';\nexport * from './ListSkeleton';\nexport * from './LogoLink';\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuItem';\nexport * from './Modal';\nexport * from './Navigation';\nexport * from './NavigationItem';\nexport * from './PageContent';\nexport * from './PageHeader';\nexport * from './PageHeaderInputSearch';\nexport * from './PageHeaderSkeleton';\nexport * from './ParagraphSkeleton';\nexport * from './Popover';\nexport * from './Progress';\nexport * from './Result';\nexport * from './ScrollButton';\nexport * from './Select';\nexport * from './Skeleton';\nexport * from './Switch';\nexport * from './SwitchSkeleton';\nexport * from './Tag';\nexport * from './TagLink';\nexport * from './TagList';\nexport * from './TagListSkeleton';\nexport * from './TagSkeleton';\nexport * from './TextArea';\nexport * from './TextAreaSkeleton';\nexport * from './ThemeSwitcher';\nexport * from './YouTubeVideo';\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;AACnDC,EAAAA,IADmD;AAEnDC,EAAAA,KAFmD;AAGnDC,EAAAA,OAAO,GAAG,KAHyC;AAInDC,EAAAA,aAJmD;AAKnDC,EAAAA;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;AAAkB,EAAA,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}
|