@atlaskit/editor-plugin-table 5.3.2 → 5.3.3
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/CHANGELOG.md +6 -0
- package/dist/cjs/plugins/table/ui/DragPreview/index.js +39 -0
- package/dist/cjs/plugins/table/ui/Icons/DragInMotionIcon.js +55 -0
- package/dist/es2019/plugins/table/ui/DragPreview/index.js +33 -0
- package/dist/es2019/plugins/table/ui/Icons/DragInMotionIcon.js +47 -0
- package/dist/esm/plugins/table/ui/DragPreview/index.js +32 -0
- package/dist/esm/plugins/table/ui/Icons/DragInMotionIcon.js +48 -0
- package/dist/types/plugins/table/ui/DragPreview/index.d.ts +6 -0
- package/dist/types/plugins/table/ui/Icons/DragInMotionIcon.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/DragPreview/index.d.ts +6 -0
- package/dist/types-ts4.5/plugins/table/ui/Icons/DragInMotionIcon.d.ts +6 -0
- package/package.json +4 -3
- package/src/plugins/table/ui/DragPreview/index.tsx +45 -0
- package/src/plugins/table/ui/Icons/DragInMotionIcon.tsx +60 -0
- package/tsconfig.app.json +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 5.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#41701](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41701) [`168e0da8a1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/168e0da8a1c) - [ux] ED-20425: Added DragPreview and DragInMotionIcon
|
|
8
|
+
|
|
3
9
|
## 5.3.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DragPreview = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _primitives = require("@atlaskit/primitives");
|
|
10
|
+
var _DragInMotionIcon = require("../Icons/DragInMotionIcon");
|
|
11
|
+
var boxStyles = (0, _primitives.xcss)({
|
|
12
|
+
borderColor: 'color.border.focused',
|
|
13
|
+
borderStyle: 'solid',
|
|
14
|
+
borderRadius: 'border.radius.100',
|
|
15
|
+
borderWidth: 'border.width.outline',
|
|
16
|
+
backgroundColor: 'color.blanket.selected'
|
|
17
|
+
});
|
|
18
|
+
var DragPreview = exports.DragPreview = function DragPreview(_ref) {
|
|
19
|
+
var direction = _ref.direction,
|
|
20
|
+
width = _ref.width,
|
|
21
|
+
height = _ref.height;
|
|
22
|
+
var marginLeft = direction === 'row' ? -14 : width / 2 - 14;
|
|
23
|
+
var marginTop = direction === 'row' ? height / 2 - 14 : -10;
|
|
24
|
+
var transform = direction === 'row' ? 'rotate(90deg)' : 'none';
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
26
|
+
xcss: boxStyles,
|
|
27
|
+
style: {
|
|
28
|
+
width: "".concat(width, "px"),
|
|
29
|
+
height: "".concat(height, "px")
|
|
30
|
+
}
|
|
31
|
+
}, /*#__PURE__*/_react.default.createElement(_DragInMotionIcon.DragInMotionIcon, {
|
|
32
|
+
style: {
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
marginLeft: "".concat(marginLeft, "px"),
|
|
35
|
+
marginTop: "".concat(marginTop, "px"),
|
|
36
|
+
transform: transform
|
|
37
|
+
}
|
|
38
|
+
}));
|
|
39
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DragInMotionIcon = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var DragInMotionIcon = exports.DragInMotionIcon = function DragInMotionIcon(_ref) {
|
|
10
|
+
var style = _ref.style;
|
|
11
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
12
|
+
width: "28",
|
|
13
|
+
height: "20",
|
|
14
|
+
viewBox: "0 0 28 20",
|
|
15
|
+
fill: "none",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
+
style: style
|
|
18
|
+
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
19
|
+
x: "1",
|
|
20
|
+
y: "1",
|
|
21
|
+
width: "26",
|
|
22
|
+
height: "18",
|
|
23
|
+
rx: "5",
|
|
24
|
+
fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
|
|
25
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
26
|
+
x: "9",
|
|
27
|
+
y: "6",
|
|
28
|
+
width: "2",
|
|
29
|
+
height: "8",
|
|
30
|
+
rx: "1",
|
|
31
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
32
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
33
|
+
x: "13",
|
|
34
|
+
y: "6",
|
|
35
|
+
width: "2",
|
|
36
|
+
height: "8",
|
|
37
|
+
rx: "1",
|
|
38
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
39
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
40
|
+
x: "17",
|
|
41
|
+
y: "6",
|
|
42
|
+
width: "2",
|
|
43
|
+
height: "8",
|
|
44
|
+
rx: "1",
|
|
45
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
46
|
+
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
47
|
+
x: "1",
|
|
48
|
+
y: "1",
|
|
49
|
+
width: "26",
|
|
50
|
+
height: "18",
|
|
51
|
+
rx: "5",
|
|
52
|
+
stroke: "var(--ds-border-inverse, #FFFFFF)",
|
|
53
|
+
strokeWidth: "2"
|
|
54
|
+
}));
|
|
55
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
3
|
+
import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
|
|
4
|
+
const boxStyles = xcss({
|
|
5
|
+
borderColor: 'color.border.focused',
|
|
6
|
+
borderStyle: 'solid',
|
|
7
|
+
borderRadius: 'border.radius.100',
|
|
8
|
+
borderWidth: 'border.width.outline',
|
|
9
|
+
backgroundColor: 'color.blanket.selected'
|
|
10
|
+
});
|
|
11
|
+
export const DragPreview = ({
|
|
12
|
+
direction,
|
|
13
|
+
width,
|
|
14
|
+
height
|
|
15
|
+
}) => {
|
|
16
|
+
let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
|
|
17
|
+
let marginTop = direction === 'row' ? height / 2 - 14 : -10;
|
|
18
|
+
let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
|
|
19
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
20
|
+
xcss: boxStyles,
|
|
21
|
+
style: {
|
|
22
|
+
width: `${width}px`,
|
|
23
|
+
height: `${height}px`
|
|
24
|
+
}
|
|
25
|
+
}, /*#__PURE__*/React.createElement(DragInMotionIcon, {
|
|
26
|
+
style: {
|
|
27
|
+
position: 'absolute',
|
|
28
|
+
marginLeft: `${marginLeft}px`,
|
|
29
|
+
marginTop: `${marginTop}px`,
|
|
30
|
+
transform: transform
|
|
31
|
+
}
|
|
32
|
+
}));
|
|
33
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const DragInMotionIcon = ({
|
|
3
|
+
style
|
|
4
|
+
}) => /*#__PURE__*/React.createElement("svg", {
|
|
5
|
+
width: "28",
|
|
6
|
+
height: "20",
|
|
7
|
+
viewBox: "0 0 28 20",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
style: style
|
|
11
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
12
|
+
x: "1",
|
|
13
|
+
y: "1",
|
|
14
|
+
width: "26",
|
|
15
|
+
height: "18",
|
|
16
|
+
rx: "5",
|
|
17
|
+
fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
|
|
18
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
19
|
+
x: "9",
|
|
20
|
+
y: "6",
|
|
21
|
+
width: "2",
|
|
22
|
+
height: "8",
|
|
23
|
+
rx: "1",
|
|
24
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
25
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
26
|
+
x: "13",
|
|
27
|
+
y: "6",
|
|
28
|
+
width: "2",
|
|
29
|
+
height: "8",
|
|
30
|
+
rx: "1",
|
|
31
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
32
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
33
|
+
x: "17",
|
|
34
|
+
y: "6",
|
|
35
|
+
width: "2",
|
|
36
|
+
height: "8",
|
|
37
|
+
rx: "1",
|
|
38
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
39
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
40
|
+
x: "1",
|
|
41
|
+
y: "1",
|
|
42
|
+
width: "26",
|
|
43
|
+
height: "18",
|
|
44
|
+
rx: "5",
|
|
45
|
+
stroke: "var(--ds-border-inverse, #FFFFFF)",
|
|
46
|
+
strokeWidth: "2"
|
|
47
|
+
}));
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
3
|
+
import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
|
|
4
|
+
var boxStyles = xcss({
|
|
5
|
+
borderColor: 'color.border.focused',
|
|
6
|
+
borderStyle: 'solid',
|
|
7
|
+
borderRadius: 'border.radius.100',
|
|
8
|
+
borderWidth: 'border.width.outline',
|
|
9
|
+
backgroundColor: 'color.blanket.selected'
|
|
10
|
+
});
|
|
11
|
+
export var DragPreview = function DragPreview(_ref) {
|
|
12
|
+
var direction = _ref.direction,
|
|
13
|
+
width = _ref.width,
|
|
14
|
+
height = _ref.height;
|
|
15
|
+
var marginLeft = direction === 'row' ? -14 : width / 2 - 14;
|
|
16
|
+
var marginTop = direction === 'row' ? height / 2 - 14 : -10;
|
|
17
|
+
var transform = direction === 'row' ? 'rotate(90deg)' : 'none';
|
|
18
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
19
|
+
xcss: boxStyles,
|
|
20
|
+
style: {
|
|
21
|
+
width: "".concat(width, "px"),
|
|
22
|
+
height: "".concat(height, "px")
|
|
23
|
+
}
|
|
24
|
+
}, /*#__PURE__*/React.createElement(DragInMotionIcon, {
|
|
25
|
+
style: {
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
marginLeft: "".concat(marginLeft, "px"),
|
|
28
|
+
marginTop: "".concat(marginTop, "px"),
|
|
29
|
+
transform: transform
|
|
30
|
+
}
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var DragInMotionIcon = function DragInMotionIcon(_ref) {
|
|
3
|
+
var style = _ref.style;
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
5
|
+
width: "28",
|
|
6
|
+
height: "20",
|
|
7
|
+
viewBox: "0 0 28 20",
|
|
8
|
+
fill: "none",
|
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
+
style: style
|
|
11
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
12
|
+
x: "1",
|
|
13
|
+
y: "1",
|
|
14
|
+
width: "26",
|
|
15
|
+
height: "18",
|
|
16
|
+
rx: "5",
|
|
17
|
+
fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
|
|
18
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
19
|
+
x: "9",
|
|
20
|
+
y: "6",
|
|
21
|
+
width: "2",
|
|
22
|
+
height: "8",
|
|
23
|
+
rx: "1",
|
|
24
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
25
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
26
|
+
x: "13",
|
|
27
|
+
y: "6",
|
|
28
|
+
width: "2",
|
|
29
|
+
height: "8",
|
|
30
|
+
rx: "1",
|
|
31
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
32
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
33
|
+
x: "17",
|
|
34
|
+
y: "6",
|
|
35
|
+
width: "2",
|
|
36
|
+
height: "8",
|
|
37
|
+
rx: "1",
|
|
38
|
+
fill: "var(--ds-border-inverse, #FFFFFF)"
|
|
39
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
40
|
+
x: "1",
|
|
41
|
+
y: "1",
|
|
42
|
+
width: "26",
|
|
43
|
+
height: "18",
|
|
44
|
+
rx: "5",
|
|
45
|
+
stroke: "var(--ds-border-inverse, #FFFFFF)",
|
|
46
|
+
strokeWidth: "2"
|
|
47
|
+
}));
|
|
48
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.3",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@atlaskit/adf-schema": "^32.0.0",
|
|
31
31
|
"@atlaskit/custom-steps": "^0.0.2",
|
|
32
|
-
"@atlaskit/editor-common": "^76.
|
|
32
|
+
"@atlaskit/editor-common": "^76.12.0",
|
|
33
33
|
"@atlaskit/editor-palette": "1.5.1",
|
|
34
34
|
"@atlaskit/editor-plugin-analytics": "^0.2.0",
|
|
35
35
|
"@atlaskit/editor-plugin-content-insertion": "^0.1.0",
|
|
@@ -41,8 +41,9 @@
|
|
|
41
41
|
"@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
|
|
42
42
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
|
|
43
43
|
"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^0.4.0",
|
|
44
|
+
"@atlaskit/primitives": "^1.6.7",
|
|
44
45
|
"@atlaskit/theme": "^12.6.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
46
|
+
"@atlaskit/tokens": "^1.28.0",
|
|
46
47
|
"@atlaskit/tooltip": "^17.8.0",
|
|
47
48
|
"@babel/runtime": "^7.0.0",
|
|
48
49
|
"@emotion/react": "^11.7.1",
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
4
|
+
|
|
5
|
+
import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
|
|
6
|
+
|
|
7
|
+
const boxStyles = xcss({
|
|
8
|
+
borderColor: 'color.border.focused',
|
|
9
|
+
borderStyle: 'solid',
|
|
10
|
+
borderRadius: 'border.radius.100',
|
|
11
|
+
borderWidth: 'border.width.outline',
|
|
12
|
+
backgroundColor: 'color.blanket.selected',
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
export const DragPreview = ({
|
|
16
|
+
direction,
|
|
17
|
+
width,
|
|
18
|
+
height,
|
|
19
|
+
}: {
|
|
20
|
+
direction: 'column' | 'row';
|
|
21
|
+
width: number;
|
|
22
|
+
height: number;
|
|
23
|
+
}) => {
|
|
24
|
+
let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
|
|
25
|
+
let marginTop = direction === 'row' ? height / 2 - 14 : -10;
|
|
26
|
+
let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
|
|
27
|
+
return (
|
|
28
|
+
<Box
|
|
29
|
+
xcss={boxStyles}
|
|
30
|
+
style={{
|
|
31
|
+
width: `${width}px`,
|
|
32
|
+
height: `${height}px`,
|
|
33
|
+
}}
|
|
34
|
+
>
|
|
35
|
+
<DragInMotionIcon
|
|
36
|
+
style={{
|
|
37
|
+
position: 'absolute',
|
|
38
|
+
marginLeft: `${marginLeft}px`,
|
|
39
|
+
marginTop: `${marginTop}px`,
|
|
40
|
+
transform: transform,
|
|
41
|
+
}}
|
|
42
|
+
/>
|
|
43
|
+
</Box>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { token } from '@atlaskit/tokens';
|
|
4
|
+
|
|
5
|
+
interface DragInMotionIconProps {
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const DragInMotionIcon = ({ style }: DragInMotionIconProps) => (
|
|
10
|
+
<svg
|
|
11
|
+
width="28"
|
|
12
|
+
height="20"
|
|
13
|
+
viewBox="0 0 28 20"
|
|
14
|
+
fill="none"
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
style={style}
|
|
17
|
+
>
|
|
18
|
+
<rect
|
|
19
|
+
x="1"
|
|
20
|
+
y="1"
|
|
21
|
+
width="26"
|
|
22
|
+
height="18"
|
|
23
|
+
rx="5"
|
|
24
|
+
fill={token('color.background.accent.blue.subtle', '#579DFF')}
|
|
25
|
+
/>
|
|
26
|
+
<rect
|
|
27
|
+
x="9"
|
|
28
|
+
y="6"
|
|
29
|
+
width="2"
|
|
30
|
+
height="8"
|
|
31
|
+
rx="1"
|
|
32
|
+
fill={token('color.border.inverse', '#FFFFFF')}
|
|
33
|
+
/>
|
|
34
|
+
<rect
|
|
35
|
+
x="13"
|
|
36
|
+
y="6"
|
|
37
|
+
width="2"
|
|
38
|
+
height="8"
|
|
39
|
+
rx="1"
|
|
40
|
+
fill={token('color.border.inverse', '#FFFFFF')}
|
|
41
|
+
/>
|
|
42
|
+
<rect
|
|
43
|
+
x="17"
|
|
44
|
+
y="6"
|
|
45
|
+
width="2"
|
|
46
|
+
height="8"
|
|
47
|
+
rx="1"
|
|
48
|
+
fill={token('color.border.inverse', '#FFFFFF')}
|
|
49
|
+
/>
|
|
50
|
+
<rect
|
|
51
|
+
x="1"
|
|
52
|
+
y="1"
|
|
53
|
+
width="26"
|
|
54
|
+
height="18"
|
|
55
|
+
rx="5"
|
|
56
|
+
stroke={token('color.border.inverse', '#FFFFFF')}
|
|
57
|
+
strokeWidth="2"
|
|
58
|
+
/>
|
|
59
|
+
</svg>
|
|
60
|
+
);
|
package/tsconfig.app.json
CHANGED