@os-design/core 1.0.169 → 1.0.170
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/ListItem/index.js +28 -45
- package/dist/cjs/ListItem/index.js.map +1 -1
- package/dist/cjs/ListItemActions/index.js +118 -0
- package/dist/cjs/ListItemActions/index.js.map +1 -0
- package/dist/cjs/ListItemLink/index.js +18 -55
- package/dist/cjs/ListItemLink/index.js.map +1 -1
- package/dist/cjs/ListSkeleton/index.js +16 -7
- package/dist/cjs/ListSkeleton/index.js.map +1 -1
- package/dist/esm/ListItem/index.js +29 -55
- package/dist/esm/ListItem/index.js.map +1 -1
- package/dist/esm/ListItemActions/index.js +121 -0
- package/dist/esm/ListItemActions/index.js.map +1 -0
- package/dist/esm/ListItemLink/index.js +27 -63
- package/dist/esm/ListItemLink/index.js.map +1 -1
- package/dist/esm/ListSkeleton/index.js +11 -3
- package/dist/esm/ListSkeleton/index.js.map +1 -1
- package/dist/types/ListItem/index.d.ts +8 -8
- package/dist/types/ListItem/index.d.ts.map +1 -1
- package/dist/types/ListItemActions/index.d.ts +13 -0
- package/dist/types/ListItemActions/index.d.ts.map +1 -0
- package/dist/types/ListItemLink/index.d.ts +3 -3
- package/dist/types/ListItemLink/index.d.ts.map +1 -1
- package/dist/types/ListSkeleton/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/cjs/ListItem/ListItemContent.js +0 -99
- package/dist/cjs/ListItem/ListItemContent.js.map +0 -1
- package/dist/esm/ListItem/ListItemContent.js +0 -92
- package/dist/esm/ListItem/ListItemContent.js.map +0 -1
- package/dist/types/ListItem/ListItemContent.d.ts +0 -25
- package/dist/types/ListItem/ListItemContent.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n /**\n * The title of the item.\n */\n title: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\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 ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n ({ title, description, left, right, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChD,oBAAC,SAAS,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IAC3BH,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,oBAAC,WAAW,QAAEA,WAAW,CAAe,CAChD,EAETE,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,CACF;AAEDJ,QAAQ,CAACO,WAAW,GAAG,UAAU;AAEjC,eAAeP,QAAQ"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
import styled from '@emotion/styled';
|
|
4
|
+
import { sizeStyles, transitionStyles } from '@os-design/styles';
|
|
5
|
+
import { clr } from '@os-design/theming';
|
|
6
|
+
import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
|
|
7
|
+
import React, { forwardRef, useCallback, useMemo } from 'react';
|
|
8
|
+
import Button from '../Button';
|
|
9
|
+
const Container = styled.div`
|
|
10
|
+
position: relative;
|
|
11
|
+
|
|
12
|
+
@media (hover: hover) {
|
|
13
|
+
// Hide actions by default
|
|
14
|
+
& > nav {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Display actions either on focus, or on hover
|
|
19
|
+
&:hover,
|
|
20
|
+
&:focus-within {
|
|
21
|
+
& > nav {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
const swipeableStyles = p => p.swipeable && css`
|
|
28
|
+
transform: translateX(100%);
|
|
29
|
+
${transitionStyles('transform')(p)};
|
|
30
|
+
`;
|
|
31
|
+
const openedStyles = p => p.opened && css`
|
|
32
|
+
transform: translateX(0);
|
|
33
|
+
`;
|
|
34
|
+
const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'size'))`
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
bottom: 0;
|
|
39
|
+
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
|
|
43
|
+
padding-left: ${p => p.theme.listItemActionsPaddingLeft}em;
|
|
44
|
+
background: linear-gradient(
|
|
45
|
+
to right,
|
|
46
|
+
${p => clr([...p.theme.colorBg.slice(0, 3), 0])},
|
|
47
|
+
${p => clr(p.theme.colorBg)}
|
|
48
|
+
${p => p.theme.listItemActionsPaddingLeft}em
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
${swipeableStyles};
|
|
52
|
+
${openedStyles};
|
|
53
|
+
${sizeStyles}
|
|
54
|
+
`;
|
|
55
|
+
let actionIndex = 0;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Shows the menu in the list item.
|
|
59
|
+
*/
|
|
60
|
+
const ListItemActions = /*#__PURE__*/forwardRef(({
|
|
61
|
+
actions = [],
|
|
62
|
+
onTouchStart = () => {},
|
|
63
|
+
onTouchMove = () => {},
|
|
64
|
+
onTouchEnd = () => {},
|
|
65
|
+
children,
|
|
66
|
+
size,
|
|
67
|
+
...rest
|
|
68
|
+
}, ref) => {
|
|
69
|
+
const {
|
|
70
|
+
opened,
|
|
71
|
+
handlers
|
|
72
|
+
} = useSwipe();
|
|
73
|
+
const swipeable = useMemo(() => isTouchDevice(), []);
|
|
74
|
+
const touchStartHandler = useCallback(e => {
|
|
75
|
+
handlers.onTouchStart(e);
|
|
76
|
+
onTouchStart(e);
|
|
77
|
+
}, [handlers, onTouchStart]);
|
|
78
|
+
const touchMoveHandler = useCallback(e => {
|
|
79
|
+
handlers.onTouchMove(e);
|
|
80
|
+
onTouchMove(e);
|
|
81
|
+
}, [handlers, onTouchMove]);
|
|
82
|
+
const touchEndHandler = useCallback(e => {
|
|
83
|
+
handlers.onTouchEnd(e);
|
|
84
|
+
onTouchEnd(e);
|
|
85
|
+
}, [handlers, onTouchEnd]);
|
|
86
|
+
const actionsComponent = useMemo(() => {
|
|
87
|
+
if (actions.length === 0) return null;
|
|
88
|
+
const items = actions.map(({
|
|
89
|
+
icon,
|
|
90
|
+
onClick = () => {},
|
|
91
|
+
...actionRest
|
|
92
|
+
}) => {
|
|
93
|
+
actionIndex += 1;
|
|
94
|
+
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
95
|
+
key: actionIndex,
|
|
96
|
+
type: "ghost",
|
|
97
|
+
wide: "never",
|
|
98
|
+
size: size,
|
|
99
|
+
onClick: e => {
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
onClick(e);
|
|
102
|
+
}
|
|
103
|
+
}, actionRest), icon);
|
|
104
|
+
});
|
|
105
|
+
return /*#__PURE__*/React.createElement(Actions, {
|
|
106
|
+
swipeable: swipeable,
|
|
107
|
+
opened: opened,
|
|
108
|
+
size: size
|
|
109
|
+
}, items);
|
|
110
|
+
}, [actions, opened, size, swipeable]);
|
|
111
|
+
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
112
|
+
onTouchStart: touchStartHandler,
|
|
113
|
+
onTouchMove: touchMoveHandler,
|
|
114
|
+
onTouchEnd: touchEndHandler
|
|
115
|
+
}, rest, {
|
|
116
|
+
ref: ref
|
|
117
|
+
}), children, actionsComponent);
|
|
118
|
+
});
|
|
119
|
+
ListItemActions.displayName = 'ListItemActions';
|
|
120
|
+
export default ListItemActions;
|
|
121
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useSwipe","React","forwardRef","useCallback","useMemo","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","actionsComponent","length","items","map","icon","onClick","actionRest","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n /**\n * Buttons to control the item.\n * For example, edit, delete.\n * @default undefined\n */\n actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n position: relative;\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\nconst swipeableStyles = (p) =>\n p.swipeable &&\n css`\n transform: translateX(100%);\n ${transitionStyles('transform')(p)};\n `;\n\nconst openedStyles = (p) =>\n p.opened &&\n css`\n transform: translateX(0);\n `;\n\ninterface ActionsProps extends WithSize {\n swipeable: boolean;\n opened: boolean;\n}\nconst Actions = styled(\n 'nav',\n omitEmotionProps('swipeable', 'opened', 'size')\n)<ActionsProps>`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n background: linear-gradient(\n to right,\n ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n ${(p) => clr(p.theme.colorBg)}\n ${(p) => p.theme.listItemActionsPaddingLeft}em\n );\n\n ${swipeableStyles};\n ${openedStyles};\n ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n (\n {\n actions = [],\n onTouchStart = () => {},\n onTouchMove = () => {},\n onTouchEnd = () => {},\n children,\n size,\n ...rest\n },\n ref\n ) => {\n const { opened, handlers } = useSwipe();\n const swipeable = useMemo(() => isTouchDevice(), []);\n\n const touchStartHandler = useCallback(\n (e) => {\n handlers.onTouchStart(e);\n onTouchStart(e);\n },\n [handlers, onTouchStart]\n );\n\n const touchMoveHandler = useCallback(\n (e) => {\n handlers.onTouchMove(e);\n onTouchMove(e);\n },\n [handlers, onTouchMove]\n );\n\n const touchEndHandler = useCallback(\n (e) => {\n handlers.onTouchEnd(e);\n onTouchEnd(e);\n },\n [handlers, onTouchEnd]\n );\n\n const actionsComponent = useMemo(() => {\n if (actions.length === 0) return null;\n const items = actions.map(\n ({ icon, onClick = () => {}, ...actionRest }) => {\n actionIndex += 1;\n return (\n <Button\n key={actionIndex}\n type='ghost'\n wide='never'\n size={size}\n onClick={(e) => {\n e.preventDefault();\n onClick(e);\n }}\n {...actionRest}\n >\n {icon}\n </Button>\n );\n }\n );\n return (\n <Actions swipeable={swipeable} opened={opened} size={size}>\n {items}\n </Actions>\n );\n }, [actions, opened, size, swipeable]);\n\n return (\n <Container\n onTouchStart={touchStartHandler}\n onTouchMove={touchMoveHandler}\n onTouchEnd={touchEndHandler}\n {...rest}\n ref={ref}\n >\n {children}\n {actionsComponent}\n </Container>\n );\n }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
|
|
@@ -1,35 +1,32 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
import React, { forwardRef, useMemo } from 'react';
|
|
3
2
|
import styled from '@emotion/styled';
|
|
4
|
-
import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
|
|
5
|
-
import { clr } from '@os-design/theming';
|
|
6
3
|
import { resetFocusStyles } from '@os-design/styles';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
const
|
|
11
|
-
& > nav {
|
|
12
|
-
background: linear-gradient(
|
|
13
|
-
to right,
|
|
14
|
-
${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
|
|
15
|
-
${clr(p.theme.listItemColorBgHover)}
|
|
16
|
-
${p.theme.listItemActionsPaddingLeft}em
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
const StyledLink = styled(ListItemContainer.withComponent('a'), omitEmotionProps('touchDevice', 'as'))`
|
|
4
|
+
import { clr } from '@os-design/theming';
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
|
+
import ListItem from '../ListItem';
|
|
7
|
+
const Link = styled.a`
|
|
21
8
|
${resetFocusStyles};
|
|
9
|
+
|
|
22
10
|
cursor: pointer;
|
|
23
11
|
text-decoration: none;
|
|
24
12
|
|
|
25
13
|
@media (hover: hover) {
|
|
26
14
|
&:hover,
|
|
27
15
|
&:focus-within {
|
|
28
|
-
|
|
16
|
+
& > div {
|
|
17
|
+
background-color: ${p => clr(p.theme.listItemColorBgHover)};
|
|
18
|
+
|
|
19
|
+
& > nav {
|
|
20
|
+
background: linear-gradient(
|
|
21
|
+
to right,
|
|
22
|
+
${p => clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
|
|
23
|
+
${p => clr(p.theme.listItemColorBgHover)}
|
|
24
|
+
${p => p.theme.listItemActionsPaddingLeft}em
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
29
28
|
}
|
|
30
29
|
}
|
|
31
|
-
|
|
32
|
-
${actionsBgStyles};
|
|
33
30
|
`;
|
|
34
31
|
|
|
35
32
|
/**
|
|
@@ -40,50 +37,17 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
|
|
|
40
37
|
description,
|
|
41
38
|
left,
|
|
42
39
|
right,
|
|
43
|
-
actions
|
|
44
|
-
as,
|
|
45
|
-
onMouseDown = () => {},
|
|
46
|
-
onTouchStart = () => {},
|
|
47
|
-
onTouchMove = () => {},
|
|
48
|
-
onTouchEnd = () => {},
|
|
40
|
+
actions,
|
|
49
41
|
...rest
|
|
50
|
-
}, ref) => {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}, rest, {
|
|
60
|
-
onMouseDown: e => {
|
|
61
|
-
onMouseDown(e);
|
|
62
|
-
e.preventDefault();
|
|
63
|
-
},
|
|
64
|
-
onTouchStart: e => {
|
|
65
|
-
handlers.onTouchStart(e);
|
|
66
|
-
onTouchStart(e);
|
|
67
|
-
},
|
|
68
|
-
onTouchMove: e => {
|
|
69
|
-
handlers.onTouchMove(e);
|
|
70
|
-
onTouchMove(e);
|
|
71
|
-
},
|
|
72
|
-
onTouchEnd: e => {
|
|
73
|
-
handlers.onTouchEnd(e);
|
|
74
|
-
onTouchEnd(e);
|
|
75
|
-
},
|
|
76
|
-
ref: ref
|
|
77
|
-
}), /*#__PURE__*/React.createElement(ListItemContent, {
|
|
78
|
-
title: title,
|
|
79
|
-
description: description,
|
|
80
|
-
left: left,
|
|
81
|
-
right: right,
|
|
82
|
-
actions: actions,
|
|
83
|
-
hasSwipe: touchDevice,
|
|
84
|
-
opened: opened
|
|
85
|
-
}));
|
|
86
|
-
});
|
|
42
|
+
}, ref) => /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
|
|
43
|
+
ref: ref
|
|
44
|
+
}), /*#__PURE__*/React.createElement(ListItem, {
|
|
45
|
+
title: title,
|
|
46
|
+
description: description,
|
|
47
|
+
left: left,
|
|
48
|
+
right: right,
|
|
49
|
+
actions: actions
|
|
50
|
+
})));
|
|
87
51
|
ListItemLink.displayName = 'ListItemLink';
|
|
88
52
|
export default ListItemLink;
|
|
89
53
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","rest","ref","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n ReactRouterLinkProps &\n Pick<LinkProps, 'as'> &\n ListItemProps;\n\nconst Link = styled.a`\n ${resetFocusStyles};\n\n cursor: pointer;\n text-decoration: none;\n\n @media (hover: hover) {\n &:hover,\n &:focus-within {\n & > div {\n background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n & > nav {\n background: linear-gradient(\n to right,\n ${(p) =>\n clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n ${(p) => clr(p.theme.listItemColorBgHover)}\n ${(p) => p.theme.listItemActionsPaddingLeft}em\n );\n }\n }\n }\n }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n ({ title, description, left, right, actions, ...rest }, ref) => (\n <Link {...rest} ref={ref}>\n <ListItem\n title={title}\n description={description}\n left={left}\n right={right}\n actions={actions}\n />\n </Link>\n )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAE;AACtB,IAAIN,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeF,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAW;AAC7E,cAAeH,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,oBAAoB,CAAE;AACvD,gBAAiBF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGT,UAAU,CAC7B,CAAC;EAAEU,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzD,oBAAC,IAAI,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACvB,oBAAC,QAAQ;EACP,KAAK,EAAEN,KAAM;EACb,WAAW,EAAEC,WAAY;EACzB,IAAI,EAAEC,IAAK;EACX,KAAK,EAAEC,KAAM;EACb,OAAO,EAAEC;AAAQ,EACjB,CAEL,CACF;AAEDL,YAAY,CAACQ,WAAW,GAAG,cAAc;AAEzC,eAAeR,YAAY"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
2
|
-
import React, { forwardRef, useCallback } from 'react';
|
|
3
2
|
import styled from '@emotion/styled';
|
|
4
3
|
import { horizontalPaddingStyles } from '@os-design/styles';
|
|
5
4
|
import { clr } from '@os-design/theming';
|
|
6
|
-
import
|
|
5
|
+
import React, { forwardRef, useCallback } from 'react';
|
|
7
6
|
import List from '../List';
|
|
8
|
-
import
|
|
7
|
+
import Skeleton from '../Skeleton';
|
|
9
8
|
const ListItem = styled.div`
|
|
10
9
|
width: 100%;
|
|
11
10
|
height: 100%;
|
|
@@ -27,6 +26,15 @@ const DescriptionSkeleton = styled(Skeleton)`
|
|
|
27
26
|
height: ${p => p.theme.sizes.small}em;
|
|
28
27
|
margin-top: 0.3em;
|
|
29
28
|
`;
|
|
29
|
+
const LeftAddon = styled.div`
|
|
30
|
+
color: ${p => clr(p.theme.colorText)};
|
|
31
|
+
padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
|
|
32
|
+
`;
|
|
33
|
+
const RightAddon = styled.div`
|
|
34
|
+
color: ${p => clr(p.theme.colorText)};
|
|
35
|
+
margin-left: auto;
|
|
36
|
+
padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
|
|
37
|
+
`;
|
|
30
38
|
|
|
31
39
|
/**
|
|
32
40
|
* Provides a list placeholder while a user waits for the content to load.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","horizontalPaddingStyles","clr","React","forwardRef","useCallback","List","Skeleton","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","LeftAddon","colorText","listItemAddonPaddingHorizontal","RightAddon","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\n\nexport interface ListSkeletonProps\n extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n Pick<ListItemProps, 'left' | 'right'> {\n /**\n * The description placeholder.\n * @default false\n */\n hasDescription?: boolean;\n /**\n * The width of the title.\n * @default 30%\n */\n titleWidth?: string;\n /**\n * The width of the description.\n * @default 40%\n */\n descriptionWidth?: string;\n /**\n * Total count of items.\n * @default 10\n */\n itemCount?: number;\n}\n\nconst ListItem = styled.div`\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n box-sizing: border-box;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n height: ${(p) => p.theme.sizes.small}em;\n margin-top: 0.3em;\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n (\n {\n hasDescription = false,\n titleWidth = '30%',\n descriptionWidth = '40%',\n itemCount = 10,\n left,\n right,\n ...rest\n },\n ref\n ) => {\n const itemRenderer = useCallback(\n ({ style }) => (\n <ListItem style={style}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n <Content>\n <Skeleton width={titleWidth} />\n {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n </Content>\n\n {right && <RightAddon>{right}</RightAddon>}\n </ListItem>\n ),\n [descriptionWidth, hasDescription, left, right, titleWidth]\n );\n\n return (\n <List\n itemCount={itemCount}\n itemRenderer={itemRenderer}\n {...rest}\n ref={ref}\n />\n );\n }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,OAAOC,IAAI,MAAqB,SAAS;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AA2BlC,MAAMC,QAAQ,GAAGR,MAAM,CAACS,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIX,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMY,OAAO,GAAGb,MAAM,CAACS,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGd,MAAM,CAACO,QAAQ,CAAE;AAC7C,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;AAED,MAAMC,SAAS,GAAGjB,MAAM,CAACS,GAAI;AAC7B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CAACS,GAAI;AAC9B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,YAAY,gBAAGjB,UAAU,CAC7B,CACE;EACEkB,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,SAAS,GAAG,EAAE;EACdC,IAAI;EACJC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAGzB,WAAW,CAC9B,CAAC;IAAE0B;EAAM,CAAC,kBACR,oBAAC,QAAQ;IAAC,KAAK,EAAEA;EAAM,GACpBL,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,QAAQ;IAAC,KAAK,EAAEH;EAAW,EAAG,EAC9BD,cAAc,iBAAI,oBAAC,mBAAmB;IAAC,KAAK,EAAEE;EAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,oBAAC,IAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEK;EAAa,GACvBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDR,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
declare const ListItem: React.ForwardRefExoticComponent<
|
|
2
|
+
import { ListItemActionsProps } from '../ListItemActions';
|
|
3
|
+
export interface ListItemProps extends ListItemActionsProps {
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
left?: React.ReactNode;
|
|
7
|
+
right?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
10
|
export default ListItem;
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IAIzD,KAAK,EAAE,MAAM,CAAC;IAKd,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA+CD,QAAA,MAAM,QAAQ,sFAab,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { WithSize } from '@os-design/styles';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ButtonProps } from '../Button';
|
|
4
|
+
export interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {
|
|
5
|
+
icon: React.ReactElement;
|
|
6
|
+
}
|
|
7
|
+
declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
|
|
8
|
+
export interface ListItemActionsProps extends JsxDivProps, WithSize {
|
|
9
|
+
actions?: ListItemAction[];
|
|
10
|
+
}
|
|
11
|
+
declare const ListItemActions: React.ForwardRefExoticComponent<ListItemActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export default ListItemActions;
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG3E,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IAMjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAoED,QAAA,MAAM,eAAe,6FAkFpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ListItemContentProps } from '../ListItem/ListItemContent';
|
|
3
2
|
import { LinkProps, ReactRouterLinkProps } from '../Link';
|
|
3
|
+
import { ListItemProps } from '../ListItem';
|
|
4
4
|
declare type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
|
|
5
|
-
export declare type ListItemLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> &
|
|
6
|
-
declare const ListItemLink: React.ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> &
|
|
5
|
+
export declare type ListItemLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> & ListItemProps;
|
|
6
|
+
declare const ListItemLink: React.ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> & ListItemProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
7
7
|
export default ListItemLink;
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,aAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,oBAAY,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,aAAa,CAAC;AA+BhB,QAAA,MAAM,YAAY,oJAYjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListSkeleton/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListSkeleton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,cAAc,CAAC,EACnD,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC;IAKvC,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwCD,QAAA,MAAM,YAAY,8FAsCjB,CAAC;AAIF,eAAe,YAAY,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.170",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "f8f0c23877ffa6db63eaa33313df54cd0bd36df0"
|
|
62
62
|
}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = exports.RightAddon = exports.LeftAddon = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
-
var _theming = require("@os-design/theming");
|
|
10
|
-
var _styles = require("@os-design/styles");
|
|
11
|
-
var _utils = require("@os-design/utils");
|
|
12
|
-
var _react2 = require("@emotion/react");
|
|
13
|
-
var _Button = _interopRequireDefault(require("../Button"));
|
|
14
|
-
var _excluded = ["icon", "onClick"];
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
18
|
-
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; }
|
|
19
|
-
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; }
|
|
20
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
21
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
23
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
24
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
25
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
26
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
27
|
-
var Content = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n"])));
|
|
28
|
-
var Title = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n font-weight: 500;\n ", ";\n"])), function (p) {
|
|
29
|
-
return (0, _theming.clr)(p.theme.colorText);
|
|
30
|
-
}, _styles.ellipsisStyles);
|
|
31
|
-
var Description = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: ", "em;\n ", ";\n"])), function (p) {
|
|
32
|
-
return (0, _theming.clr)(p.theme.listItemColorDescription);
|
|
33
|
-
}, function (p) {
|
|
34
|
-
return p.theme.sizes.small;
|
|
35
|
-
}, _styles.ellipsisStyles);
|
|
36
|
-
var LeftAddon = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n padding-right: ", "em;\n"])), function (p) {
|
|
37
|
-
return (0, _theming.clr)(p.theme.colorText);
|
|
38
|
-
}, function (p) {
|
|
39
|
-
return p.theme.listItemAddonPaddingHorizontal;
|
|
40
|
-
});
|
|
41
|
-
exports.LeftAddon = LeftAddon;
|
|
42
|
-
var RightAddon = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n margin-left: auto;\n padding-left: ", "em;\n"])), function (p) {
|
|
43
|
-
return (0, _theming.clr)(p.theme.colorText);
|
|
44
|
-
}, function (p) {
|
|
45
|
-
return p.theme.listItemAddonPaddingHorizontal;
|
|
46
|
-
});
|
|
47
|
-
exports.RightAddon = RightAddon;
|
|
48
|
-
var hasSwipeStyles = function hasSwipeStyles(p) {
|
|
49
|
-
return p.hasSwipe && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n transform: translateX(100%);\n ", ";\n "])), (0, _styles.transitionStyles)('transform')(p));
|
|
50
|
-
};
|
|
51
|
-
var openedStyles = function openedStyles(p) {
|
|
52
|
-
return p.opened && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n transform: translateX(0);\n "])));
|
|
53
|
-
};
|
|
54
|
-
var Actions = (0, _styled["default"])('nav', (0, _utils.omitEmotionProps)('hasSwipe', 'opened'))(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n\n display: flex;\n align-items: center;\n\n padding-left: ", "em;\n background: linear-gradient(\n to right,\n ", ",\n ", "\n ", "em\n );\n\n ", ";\n ", ";\n ", ";\n"])), function (p) {
|
|
55
|
-
return p.theme.listItemActionsPaddingLeft;
|
|
56
|
-
}, function (p) {
|
|
57
|
-
return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.colorBg.slice(0, 3)), [0]));
|
|
58
|
-
}, function (p) {
|
|
59
|
-
return (0, _theming.clr)(p.theme.colorBg);
|
|
60
|
-
}, function (p) {
|
|
61
|
-
return p.theme.listItemActionsPaddingLeft;
|
|
62
|
-
}, hasSwipeStyles, openedStyles, (0, _styles.horizontalPaddingStyles)('right'));
|
|
63
|
-
var actionIndex = 0;
|
|
64
|
-
|
|
65
|
-
// Used by ListItem, ListItemLink
|
|
66
|
-
var ListItemContent = function ListItemContent(_ref) {
|
|
67
|
-
var title = _ref.title,
|
|
68
|
-
description = _ref.description,
|
|
69
|
-
left = _ref.left,
|
|
70
|
-
right = _ref.right,
|
|
71
|
-
_ref$actions = _ref.actions,
|
|
72
|
-
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
73
|
-
hasSwipe = _ref.hasSwipe,
|
|
74
|
-
opened = _ref.opened;
|
|
75
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description)), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right), actions.length > 0 && /*#__PURE__*/_react["default"].createElement(Actions, {
|
|
76
|
-
hasSwipe: hasSwipe,
|
|
77
|
-
opened: opened
|
|
78
|
-
}, actions.map(function (_ref2) {
|
|
79
|
-
var icon = _ref2.icon,
|
|
80
|
-
_ref2$onClick = _ref2.onClick,
|
|
81
|
-
_onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
|
|
82
|
-
actionRest = _objectWithoutProperties(_ref2, _excluded);
|
|
83
|
-
actionIndex += 1;
|
|
84
|
-
return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
|
|
85
|
-
type: "ghost",
|
|
86
|
-
wide: "never",
|
|
87
|
-
size: "small",
|
|
88
|
-
key: actionIndex,
|
|
89
|
-
onClick: function onClick(e) {
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
_onClick(e);
|
|
92
|
-
}
|
|
93
|
-
}, actionRest), icon);
|
|
94
|
-
})));
|
|
95
|
-
};
|
|
96
|
-
ListItemContent.displayName = 'ListItemContent';
|
|
97
|
-
var _default = ListItemContent;
|
|
98
|
-
exports["default"] = _default;
|
|
99
|
-
//# sourceMappingURL=ListItemContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContent.js","names":["Content","styled","div","Title","p","clr","theme","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","listItemActionsPaddingLeft","colorBg","slice","horizontalPaddingStyles","actionIndex","ListItemContent","title","description","left","right","actions","length","map","icon","onClick","actionRest","e","preventDefault","displayName"],"sources":["../../../src/ListItem/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr, Color } from '@os-design/theming';\nimport {\n ellipsisStyles,\n horizontalPaddingStyles,\n transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction\n extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'wide'> {\n icon: React.ReactElement;\n}\n\nexport interface ListItemContentProps {\n /**\n * The title of the item.\n */\n title: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n /**\n * Buttons to control the item.\n * For example, edit, delete.\n * @default undefined\n */\n actions?: ListItemAction[];\n\n hasSwipe: boolean;\n opened: boolean;\n}\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst hasSwipeStyles = (p) =>\n p.hasSwipe &&\n css`\n transform: translateX(100%);\n ${transitionStyles('transform')(p)};\n `;\n\nconst openedStyles = (p) =>\n p.opened &&\n css`\n transform: translateX(0);\n `;\n\ninterface ActionsProps {\n hasSwipe: boolean;\n opened: boolean;\n}\nconst Actions = styled(\n 'nav',\n omitEmotionProps('hasSwipe', 'opened')\n)<ActionsProps>`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n\n display: flex;\n align-items: center;\n\n padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n background: linear-gradient(\n to right,\n ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n ${(p) => clr(p.theme.colorBg)}\n ${(p) => p.theme.listItemActionsPaddingLeft}em\n );\n\n ${hasSwipeStyles};\n ${openedStyles};\n ${horizontalPaddingStyles('right')};\n`;\n\nlet actionIndex = 0;\n\n// Used by ListItem, ListItemLink\nconst ListItemContent: React.FC<ListItemContentProps> = ({\n title,\n description,\n left,\n right,\n actions = [],\n hasSwipe,\n opened,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n\n {right && <RightAddon>{right}</RightAddon>}\n\n {actions.length > 0 && (\n <Actions hasSwipe={hasSwipe} opened={opened}>\n {actions.map(({ icon, onClick = () => {}, ...actionRest }) => {\n actionIndex += 1;\n return (\n <Button\n type='ghost'\n wide='never'\n size='small'\n key={actionIndex}\n onClick={(e) => {\n e.preventDefault();\n onClick(e);\n }}\n {...actionRest}\n >\n {icon}\n </Button>\n );\n })}\n </Actions>\n )}\n </>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":"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"}
|