@os-design/core 1.0.171 → 1.0.172
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.
|
@@ -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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"}
|
|
@@ -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.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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.172",
|
|
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": "90f383e9bec7163cd238e66a21bb38a650e78ba6"
|
|
62
62
|
}
|