@os-design/core 1.0.171 → 1.0.173
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/ListItemActions/index.js +23 -3
- package/dist/cjs/ListItemActions/index.js.map +1 -1
- package/dist/cjs/ListItemLink/index.js +3 -1
- package/dist/cjs/ListItemLink/index.js.map +1 -1
- package/dist/esm/ListItemActions/index.js +15 -5
- package/dist/esm/ListItemActions/index.js.map +1 -1
- package/dist/esm/ListItemLink/index.js +4 -0
- package/dist/esm/ListItemLink/index.js.map +1 -1
- package/dist/types/ListItemActions/index.d.ts.map +1 -1
- package/dist/types/ListItemLink/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -19,6 +19,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
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; }
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
21
|
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); }
|
|
22
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
23
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
25
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
22
26
|
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; }
|
|
23
27
|
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; }
|
|
24
28
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
@@ -35,8 +39,10 @@ var swipeableStyles = function swipeableStyles(p) {
|
|
|
35
39
|
var openedStyles = function openedStyles(p) {
|
|
36
40
|
return p.opened && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n transform: translateX(0);\n "])));
|
|
37
41
|
};
|
|
38
|
-
var Actions = (0, _styled["default"])('nav', (0, _utils.omitEmotionProps)('swipeable', 'opened', 'size'))(_templateObject4 || (_templateObject4 = _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) {
|
|
42
|
+
var Actions = (0, _styled["default"])('nav', (0, _utils.omitEmotionProps)('swipeable', 'opened', 'paddingRight', 'size'))(_templateObject4 || (_templateObject4 = _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 padding-right: ", "px;\n\n background: linear-gradient(\n to right,\n ", ",\n ", "\n ", "em\n );\n\n ", ";\n ", ";\n ", "\n"])), function (p) {
|
|
39
43
|
return p.theme.listItemActionsPaddingLeft;
|
|
44
|
+
}, function (p) {
|
|
45
|
+
return p.paddingRight;
|
|
40
46
|
}, function (p) {
|
|
41
47
|
return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.colorBg.slice(0, 3)), [0]));
|
|
42
48
|
}, function (p) {
|
|
@@ -61,6 +67,10 @@ var ListItemActions = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref)
|
|
|
61
67
|
children = _ref.children,
|
|
62
68
|
size = _ref.size,
|
|
63
69
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
70
|
+
var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
|
|
71
|
+
_useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
|
|
72
|
+
containerRef = _useForwardedRef2[0],
|
|
73
|
+
mergedContainerRef = _useForwardedRef2[1];
|
|
64
74
|
var _useSwipe = (0, _utils.useSwipe)(),
|
|
65
75
|
opened = _useSwipe.opened,
|
|
66
76
|
handlers = _useSwipe.handlers;
|
|
@@ -79,6 +89,15 @@ var ListItemActions = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref)
|
|
|
79
89
|
handlers.onTouchEnd(e);
|
|
80
90
|
onTouchEnd(e);
|
|
81
91
|
}, [handlers, onTouchEnd]);
|
|
92
|
+
var _useState = (0, _react2.useState)(0),
|
|
93
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
94
|
+
paddingRight = _useState2[0],
|
|
95
|
+
setPaddingRight = _useState2[1];
|
|
96
|
+
(0, _react2.useLayoutEffect)(function () {
|
|
97
|
+
if (!containerRef.current) return;
|
|
98
|
+
var value = Number(window.getComputedStyle(containerRef.current).getPropertyValue('padding-right').replace('px', ''));
|
|
99
|
+
setPaddingRight(value);
|
|
100
|
+
}, [containerRef]);
|
|
82
101
|
var actionsComponent = (0, _react2.useMemo)(function () {
|
|
83
102
|
if (actions.length === 0) return null;
|
|
84
103
|
var items = actions.map(function (_ref2) {
|
|
@@ -101,15 +120,16 @@ var ListItemActions = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref)
|
|
|
101
120
|
return /*#__PURE__*/_react2["default"].createElement(Actions, {
|
|
102
121
|
swipeable: swipeable,
|
|
103
122
|
opened: opened,
|
|
123
|
+
paddingRight: paddingRight,
|
|
104
124
|
size: size
|
|
105
125
|
}, items);
|
|
106
|
-
}, [actions, opened, size, swipeable]);
|
|
126
|
+
}, [actions, opened, paddingRight, size, swipeable]);
|
|
107
127
|
return /*#__PURE__*/_react2["default"].createElement(Container, _extends({
|
|
108
128
|
onTouchStart: touchStartHandler,
|
|
109
129
|
onTouchMove: touchMoveHandler,
|
|
110
130
|
onTouchEnd: touchEndHandler
|
|
111
131
|
}, rest, {
|
|
112
|
-
ref:
|
|
132
|
+
ref: mergedContainerRef
|
|
113
133
|
}), children, actionsComponent);
|
|
114
134
|
});
|
|
115
135
|
ListItemActions.displayName = 'ListItemActions';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","clr","colorBg","slice","sizeStyles","actionIndex","ListItemActions","forwardRef","ref","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","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 {
|
|
1
|
+
{"version":3,"file":"index.js","names":["Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","paddingRight","clr","colorBg","slice","sizeStyles","actionIndex","ListItemActions","forwardRef","ref","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","useForwardedRef","containerRef","mergedContainerRef","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","e","touchMoveHandler","touchEndHandler","useState","setPaddingRight","useLayoutEffect","current","value","Number","window","getComputedStyle","getPropertyValue","replace","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 {\n isTouchDevice,\n omitEmotionProps,\n useForwardedRef,\n useSwipe,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useLayoutEffect,\n useMemo,\n useState,\n} 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 paddingRight: number;\n}\nconst Actions = styled(\n 'nav',\n omitEmotionProps('swipeable', 'opened', 'paddingRight', '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 padding-right: ${(p) => p.paddingRight}px;\n\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 [containerRef, mergedContainerRef] = useForwardedRef(ref);\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 [paddingRight, setPaddingRight] = useState(0);\n useLayoutEffect(() => {\n if (!containerRef.current) return;\n const value = Number(\n window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('padding-right')\n .replace('px', '')\n );\n setPaddingRight(value);\n }, [containerRef]);\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\n swipeable={swipeable}\n opened={opened}\n paddingRight={paddingRight}\n size={size}\n >\n {items}\n </Actions>\n );\n }, [actions, opened, paddingRight, size, swipeable]);\n\n return (\n <Container\n onTouchStart={touchStartHandler}\n onTouchMove={touchMoveHandler}\n onTouchEnd={touchEndHandler}\n {...rest}\n ref={mergedContainerRef}\n >\n {children}\n {actionsComponent}\n </Container>\n );\n }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
|
|
@@ -25,7 +25,9 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
|
|
|
25
25
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
26
26
|
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; }
|
|
27
27
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
28
|
-
var Link = _styled["default"].a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n\n cursor: pointer;\n text-decoration: none;\n\n @media (hover: hover) {\n &:hover,\n &:focus-within {\n & > div {\n background-color: ", ";\n\n & > nav {\n background: linear-gradient(\n to right,\n ", ",\n ", "\n ", "em\n );\n }\n }\n }\n }\n"])), _styles.resetFocusStyles, function (p) {
|
|
28
|
+
var Link = _styled["default"].a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n\n cursor: pointer;\n text-decoration: none;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ", ";\n }\n\n @media (hover: hover) {\n &:hover,\n &:focus-within {\n & > div {\n background-color: ", ";\n\n & > nav {\n background: linear-gradient(\n to right,\n ", ",\n ", "\n ", "em\n );\n }\n }\n }\n }\n"])), _styles.resetFocusStyles, function (p) {
|
|
29
|
+
return (0, _theming.clr)(p.theme.listItemColorBorder);
|
|
30
|
+
}, function (p) {
|
|
29
31
|
return (0, _theming.clr)(p.theme.listItemColorBgHover);
|
|
30
32
|
}, function (p) {
|
|
31
33
|
return (0, _theming.clr)([].concat(_toConsumableArray(p.theme.listItemColorBgHover.slice(0, 3)), [0]));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Link","styled","a","resetFocusStyles","p","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","forwardRef","ref","title","description","left","right","actions","rest","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;AACA;AACA;AACA;AAEA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtD,IAAMA,IAAI,GAAGC,kBAAM,CAACC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","names":["Link","styled","a","resetFocusStyles","p","clr","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","forwardRef","ref","title","description","left","right","actions","rest","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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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;AACA;AACA;AACA;AAEA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtD,IAAMA,IAAI,GAAGC,kBAAM,CAACC,CAAC,sfACjBC,wBAAgB,EAMW,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAC;AAAA,GAO1C,UAACH,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACE,oBAAoB,CAAC;AAAA,GAKtD,UAACJ,CAAC;EAAA,OACF,IAAAC,YAAG,+BAAKD,CAAC,CAACE,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAE,CAAC,GAAW;AAAA,GAC9D,UAACL,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACE,oBAAoB,CAAC;AAAA,GACtC,UAACJ,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACI,0BAA0B;AAAA,EAMxD;;AAED;AACA;AACA;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAU,EAC7B,gBAAwDC,GAAG;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,WAAW,QAAXA,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAKC,IAAI;EAAA,oBAClD,gCAAC,IAAI,eAAKA,IAAI;IAAE,GAAG,EAAEN;EAAI,iBACvB,gCAAC,oBAAQ;IACP,KAAK,EAAEC,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC;EAAQ,EACjB,CACG;AAAA,CACR,CACF;AAEDP,YAAY,CAACS,WAAW,GAAG,cAAc;AAAC,eAE3BT,YAAY;AAAA"}
|
|
@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
|
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import { sizeStyles, transitionStyles } from '@os-design/styles';
|
|
5
5
|
import { clr } from '@os-design/theming';
|
|
6
|
-
import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
|
|
7
|
-
import React, { forwardRef, useCallback, useMemo } from 'react';
|
|
6
|
+
import { isTouchDevice, omitEmotionProps, useForwardedRef, useSwipe } from '@os-design/utils';
|
|
7
|
+
import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
|
8
8
|
import Button from '../Button';
|
|
9
9
|
const Container = styled.div`
|
|
10
10
|
position: relative;
|
|
@@ -31,7 +31,7 @@ const swipeableStyles = p => p.swipeable && css`
|
|
|
31
31
|
const openedStyles = p => p.opened && css`
|
|
32
32
|
transform: translateX(0);
|
|
33
33
|
`;
|
|
34
|
-
const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'size'))`
|
|
34
|
+
const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size'))`
|
|
35
35
|
position: absolute;
|
|
36
36
|
top: 0;
|
|
37
37
|
right: 0;
|
|
@@ -41,6 +41,8 @@ const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'size'))`
|
|
|
41
41
|
align-items: center;
|
|
42
42
|
|
|
43
43
|
padding-left: ${p => p.theme.listItemActionsPaddingLeft}em;
|
|
44
|
+
padding-right: ${p => p.paddingRight}px;
|
|
45
|
+
|
|
44
46
|
background: linear-gradient(
|
|
45
47
|
to right,
|
|
46
48
|
${p => clr([...p.theme.colorBg.slice(0, 3), 0])},
|
|
@@ -66,6 +68,7 @@ const ListItemActions = /*#__PURE__*/forwardRef(({
|
|
|
66
68
|
size,
|
|
67
69
|
...rest
|
|
68
70
|
}, ref) => {
|
|
71
|
+
const [containerRef, mergedContainerRef] = useForwardedRef(ref);
|
|
69
72
|
const {
|
|
70
73
|
opened,
|
|
71
74
|
handlers
|
|
@@ -83,6 +86,12 @@ const ListItemActions = /*#__PURE__*/forwardRef(({
|
|
|
83
86
|
handlers.onTouchEnd(e);
|
|
84
87
|
onTouchEnd(e);
|
|
85
88
|
}, [handlers, onTouchEnd]);
|
|
89
|
+
const [paddingRight, setPaddingRight] = useState(0);
|
|
90
|
+
useLayoutEffect(() => {
|
|
91
|
+
if (!containerRef.current) return;
|
|
92
|
+
const value = Number(window.getComputedStyle(containerRef.current).getPropertyValue('padding-right').replace('px', ''));
|
|
93
|
+
setPaddingRight(value);
|
|
94
|
+
}, [containerRef]);
|
|
86
95
|
const actionsComponent = useMemo(() => {
|
|
87
96
|
if (actions.length === 0) return null;
|
|
88
97
|
const items = actions.map(({
|
|
@@ -105,15 +114,16 @@ const ListItemActions = /*#__PURE__*/forwardRef(({
|
|
|
105
114
|
return /*#__PURE__*/React.createElement(Actions, {
|
|
106
115
|
swipeable: swipeable,
|
|
107
116
|
opened: opened,
|
|
117
|
+
paddingRight: paddingRight,
|
|
108
118
|
size: size
|
|
109
119
|
}, items);
|
|
110
|
-
}, [actions, opened, size, swipeable]);
|
|
120
|
+
}, [actions, opened, paddingRight, size, swipeable]);
|
|
111
121
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
112
122
|
onTouchStart: touchStartHandler,
|
|
113
123
|
onTouchMove: touchMoveHandler,
|
|
114
124
|
onTouchEnd: touchEndHandler
|
|
115
125
|
}, rest, {
|
|
116
|
-
ref:
|
|
126
|
+
ref: mergedContainerRef
|
|
117
127
|
}), children, actionsComponent);
|
|
118
128
|
});
|
|
119
129
|
ListItemActions.displayName = 'ListItemActions';
|
|
@@ -1 +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 {
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","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 {\n isTouchDevice,\n omitEmotionProps,\n useForwardedRef,\n useSwipe,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useLayoutEffect,\n useMemo,\n useState,\n} 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 paddingRight: number;\n}\nconst Actions = styled(\n 'nav',\n omitEmotionProps('swipeable', 'opened', 'paddingRight', '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 padding-right: ${(p) => p.paddingRight}px;\n\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 [containerRef, mergedContainerRef] = useForwardedRef(ref);\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 [paddingRight, setPaddingRight] = useState(0);\n useLayoutEffect(() => {\n if (!containerRef.current) return;\n const value = Number(\n window\n .getComputedStyle(containerRef.current)\n .getPropertyValue('padding-right')\n .replace('px', '')\n );\n setPaddingRight(value);\n }, [containerRef]);\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\n swipeable={swipeable}\n opened={opened}\n paddingRight={paddingRight}\n size={size}\n >\n {items}\n </Actions>\n );\n }, [actions, opened, paddingRight, size, swipeable]);\n\n return (\n <Container\n onTouchStart={touchStartHandler}\n onTouchMove={touchMoveHandler}\n onTouchEnd={touchEndHandler}\n {...rest}\n ref={mergedContainerRef}\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 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","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 &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\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,+BAAgCO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BF,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeH,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAW;AAC7E,cAAeJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACvD,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGV,UAAU,CAC7B,CAAC;EAAEW,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,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;AAuED,QAAA,MAAM,eAAe,6FAoGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAmChB,QAAA,MAAM,YAAY,oJAYjB,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.173",
|
|
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": "64eba4e531c42c7779d48619fd07656c274428cd"
|
|
62
62
|
}
|