@atlaskit/renderer 102.0.0 → 103.0.1
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 +27 -0
- package/dist/cjs/consts.js +2 -2
- package/dist/cjs/i18n/cs.js +4 -4
- package/dist/cjs/i18n/da.js +4 -4
- package/dist/cjs/i18n/de.js +4 -4
- package/dist/cjs/i18n/en.js +4 -4
- package/dist/cjs/i18n/en_GB.js +4 -4
- package/dist/cjs/i18n/es.js +4 -4
- package/dist/cjs/i18n/fi.js +4 -4
- package/dist/cjs/i18n/fr.js +4 -4
- package/dist/cjs/i18n/hu.js +4 -4
- package/dist/cjs/i18n/it.js +4 -4
- package/dist/cjs/i18n/ja.js +4 -4
- package/dist/cjs/i18n/ko.js +4 -4
- package/dist/cjs/i18n/nb.js +4 -4
- package/dist/cjs/i18n/nl.js +4 -4
- package/dist/cjs/i18n/pl.js +4 -4
- package/dist/cjs/i18n/pt_BR.js +4 -4
- package/dist/cjs/i18n/ru.js +4 -4
- package/dist/cjs/i18n/sv.js +4 -4
- package/dist/cjs/i18n/th.js +4 -4
- package/dist/cjs/i18n/tr.js +4 -4
- package/dist/cjs/i18n/uk.js +4 -4
- package/dist/cjs/i18n/vi.js +4 -4
- package/dist/cjs/i18n/zh.js +4 -4
- package/dist/cjs/i18n/zh_TW.js +4 -4
- package/dist/cjs/messages.js +1 -1
- package/dist/cjs/react/nodes/panel.js +19 -10
- package/dist/cjs/react/nodes/tableCell.js +8 -26
- package/dist/cjs/ui/ExtensionRenderer.js +9 -2
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/Renderer/style.js +5 -3
- package/dist/cjs/ui/SortingIcon.js +55 -28
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/consts.js +2 -2
- package/dist/es2019/i18n/cs.js +4 -4
- package/dist/es2019/i18n/da.js +4 -4
- package/dist/es2019/i18n/de.js +4 -4
- package/dist/es2019/i18n/en.js +4 -4
- package/dist/es2019/i18n/en_GB.js +4 -4
- package/dist/es2019/i18n/es.js +4 -4
- package/dist/es2019/i18n/fi.js +4 -4
- package/dist/es2019/i18n/fr.js +4 -4
- package/dist/es2019/i18n/hu.js +4 -4
- package/dist/es2019/i18n/it.js +4 -4
- package/dist/es2019/i18n/ja.js +4 -4
- package/dist/es2019/i18n/ko.js +4 -4
- package/dist/es2019/i18n/nb.js +4 -4
- package/dist/es2019/i18n/nl.js +4 -4
- package/dist/es2019/i18n/pl.js +4 -4
- package/dist/es2019/i18n/pt_BR.js +4 -4
- package/dist/es2019/i18n/ru.js +4 -4
- package/dist/es2019/i18n/sv.js +4 -4
- package/dist/es2019/i18n/th.js +4 -4
- package/dist/es2019/i18n/tr.js +4 -4
- package/dist/es2019/i18n/uk.js +4 -4
- package/dist/es2019/i18n/vi.js +4 -4
- package/dist/es2019/i18n/zh.js +4 -4
- package/dist/es2019/i18n/zh_TW.js +4 -4
- package/dist/es2019/messages.js +1 -1
- package/dist/es2019/react/nodes/panel.js +16 -6
- package/dist/es2019/react/nodes/tableCell.js +8 -27
- package/dist/es2019/ui/ExtensionRenderer.js +7 -2
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/Renderer/style.js +37 -16
- package/dist/es2019/ui/SortingIcon.js +89 -32
- package/dist/es2019/version.json +1 -1
- package/dist/esm/consts.js +2 -2
- package/dist/esm/i18n/cs.js +4 -4
- package/dist/esm/i18n/da.js +4 -4
- package/dist/esm/i18n/de.js +4 -4
- package/dist/esm/i18n/en.js +4 -4
- package/dist/esm/i18n/en_GB.js +4 -4
- package/dist/esm/i18n/es.js +4 -4
- package/dist/esm/i18n/fi.js +4 -4
- package/dist/esm/i18n/fr.js +4 -4
- package/dist/esm/i18n/hu.js +4 -4
- package/dist/esm/i18n/it.js +4 -4
- package/dist/esm/i18n/ja.js +4 -4
- package/dist/esm/i18n/ko.js +4 -4
- package/dist/esm/i18n/nb.js +4 -4
- package/dist/esm/i18n/nl.js +4 -4
- package/dist/esm/i18n/pl.js +4 -4
- package/dist/esm/i18n/pt_BR.js +4 -4
- package/dist/esm/i18n/ru.js +4 -4
- package/dist/esm/i18n/sv.js +4 -4
- package/dist/esm/i18n/th.js +4 -4
- package/dist/esm/i18n/tr.js +4 -4
- package/dist/esm/i18n/uk.js +4 -4
- package/dist/esm/i18n/vi.js +4 -4
- package/dist/esm/i18n/zh.js +4 -4
- package/dist/esm/i18n/zh_TW.js +4 -4
- package/dist/esm/messages.js +1 -1
- package/dist/esm/react/nodes/panel.js +18 -10
- package/dist/esm/react/nodes/tableCell.js +8 -26
- package/dist/esm/ui/ExtensionRenderer.js +9 -2
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/Renderer/style.js +5 -4
- package/dist/esm/ui/SortingIcon.js +55 -27
- package/dist/esm/version.json +1 -1
- package/dist/types/consts.d.ts +2 -2
- package/dist/types/i18n/cs.d.ts +2 -2
- package/dist/types/i18n/da.d.ts +2 -2
- package/dist/types/i18n/de.d.ts +2 -2
- package/dist/types/i18n/en.d.ts +2 -2
- package/dist/types/i18n/en_GB.d.ts +2 -2
- package/dist/types/i18n/es.d.ts +2 -2
- package/dist/types/i18n/fi.d.ts +2 -2
- package/dist/types/i18n/fr.d.ts +2 -2
- package/dist/types/i18n/hu.d.ts +2 -2
- package/dist/types/i18n/it.d.ts +2 -2
- package/dist/types/i18n/ja.d.ts +2 -2
- package/dist/types/i18n/ko.d.ts +2 -2
- package/dist/types/i18n/nb.d.ts +2 -2
- package/dist/types/i18n/nl.d.ts +2 -2
- package/dist/types/i18n/pl.d.ts +2 -2
- package/dist/types/i18n/pt_BR.d.ts +2 -2
- package/dist/types/i18n/ru.d.ts +2 -2
- package/dist/types/i18n/sv.d.ts +2 -2
- package/dist/types/i18n/th.d.ts +2 -2
- package/dist/types/i18n/tr.d.ts +2 -2
- package/dist/types/i18n/uk.d.ts +2 -2
- package/dist/types/i18n/vi.d.ts +2 -2
- package/dist/types/i18n/zh.d.ts +2 -2
- package/dist/types/i18n/zh_TW.d.ts +2 -2
- package/dist/types/react/nodes/bodiedExtension.d.ts +2 -1
- package/dist/types/react/nodes/extension.d.ts +2 -1
- package/dist/types/react/nodes/inlineExtension.d.ts +2 -0
- package/dist/types/ui/ExtensionRenderer.d.ts +2 -0
- package/dist/types/ui/SortingIcon.d.ts +4 -1
- package/dist/types-ts4.0/consts.d.ts +2 -2
- package/dist/types-ts4.0/i18n/cs.d.ts +2 -2
- package/dist/types-ts4.0/i18n/da.d.ts +2 -2
- package/dist/types-ts4.0/i18n/de.d.ts +2 -2
- package/dist/types-ts4.0/i18n/en.d.ts +2 -2
- package/dist/types-ts4.0/i18n/en_GB.d.ts +2 -2
- package/dist/types-ts4.0/i18n/es.d.ts +2 -2
- package/dist/types-ts4.0/i18n/fi.d.ts +2 -2
- package/dist/types-ts4.0/i18n/fr.d.ts +2 -2
- package/dist/types-ts4.0/i18n/hu.d.ts +2 -2
- package/dist/types-ts4.0/i18n/it.d.ts +2 -2
- package/dist/types-ts4.0/i18n/ja.d.ts +2 -2
- package/dist/types-ts4.0/i18n/ko.d.ts +2 -2
- package/dist/types-ts4.0/i18n/nb.d.ts +2 -2
- package/dist/types-ts4.0/i18n/nl.d.ts +2 -2
- package/dist/types-ts4.0/i18n/pl.d.ts +2 -2
- package/dist/types-ts4.0/i18n/pt_BR.d.ts +2 -2
- package/dist/types-ts4.0/i18n/ru.d.ts +2 -2
- package/dist/types-ts4.0/i18n/sv.d.ts +2 -2
- package/dist/types-ts4.0/i18n/th.d.ts +2 -2
- package/dist/types-ts4.0/i18n/tr.d.ts +2 -2
- package/dist/types-ts4.0/i18n/uk.d.ts +2 -2
- package/dist/types-ts4.0/i18n/vi.d.ts +2 -2
- package/dist/types-ts4.0/i18n/zh.d.ts +2 -2
- package/dist/types-ts4.0/i18n/zh_TW.d.ts +2 -2
- package/dist/types-ts4.0/react/nodes/bodiedExtension.d.ts +2 -1
- package/dist/types-ts4.0/react/nodes/extension.d.ts +2 -1
- package/dist/types-ts4.0/react/nodes/inlineExtension.d.ts +2 -0
- package/dist/types-ts4.0/ui/ExtensionRenderer.d.ts +2 -0
- package/dist/types-ts4.0/ui/SortingIcon.d.ts +4 -1
- package/package.json +20 -16
- package/report.api.md +359 -255
|
@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
14
16
|
var _react = _interopRequireDefault(require("react"));
|
|
15
17
|
|
|
16
18
|
var _react2 = require("@emotion/react");
|
|
@@ -31,24 +33,30 @@ var _icons = require("@atlaskit/editor-common/icons");
|
|
|
31
33
|
|
|
32
34
|
var _templateObject, _templateObject2;
|
|
33
35
|
|
|
34
|
-
var
|
|
36
|
+
var _excluded = ["backgroundColor", "hasIcon"];
|
|
37
|
+
|
|
38
|
+
var PanelStyled = function PanelStyled(_ref) {
|
|
39
|
+
var backgroundColor = _ref.backgroundColor,
|
|
40
|
+
hasIcon = _ref.hasIcon,
|
|
41
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
42
|
+
|
|
35
43
|
var styles = function styles(theme) {
|
|
36
|
-
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
|
|
44
|
+
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n\n &[data-panel-type=", "] {\n ", "\n }\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
|
|
37
45
|
theme: theme
|
|
38
|
-
}));
|
|
46
|
+
}), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding: 12px;');
|
|
39
47
|
};
|
|
40
48
|
|
|
41
|
-
if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM &&
|
|
49
|
+
if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
|
|
42
50
|
styles = function styles(theme) {
|
|
43
51
|
var customStyle = (0, _theme.themed)({
|
|
44
52
|
dark: _panel.getPanelBackgroundDarkModeColors,
|
|
45
|
-
light: "background-color: ".concat(
|
|
53
|
+
light: "background-color: ".concat(backgroundColor, ";")
|
|
46
54
|
})({
|
|
47
55
|
theme: theme
|
|
48
56
|
});
|
|
49
|
-
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n ", ";\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
|
|
57
|
+
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n ", ";\n ", "\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
|
|
50
58
|
theme: theme
|
|
51
|
-
}), _adfSchema.PanelType.CUSTOM, customStyle);
|
|
59
|
+
}), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding: 12px;');
|
|
52
60
|
};
|
|
53
61
|
}
|
|
54
62
|
|
|
@@ -101,9 +109,9 @@ var Panel = function Panel(props) {
|
|
|
101
109
|
});
|
|
102
110
|
};
|
|
103
111
|
|
|
104
|
-
var
|
|
105
|
-
var icon = getIcon();
|
|
112
|
+
var icon = getIcon();
|
|
106
113
|
|
|
114
|
+
var renderIcon = function renderIcon() {
|
|
107
115
|
if (icon) {
|
|
108
116
|
return (0, _react2.jsx)("div", {
|
|
109
117
|
className: _panel.PanelSharedCssClassName.icon
|
|
@@ -118,7 +126,8 @@ var Panel = function Panel(props) {
|
|
|
118
126
|
"data-panel-icon": panelIcon,
|
|
119
127
|
"data-panel-icon-id": panelIconId,
|
|
120
128
|
"data-panel-icon-text": panelIconText,
|
|
121
|
-
backgroundColor: panelColor
|
|
129
|
+
backgroundColor: panelColor,
|
|
130
|
+
hasIcon: Boolean(icon)
|
|
122
131
|
}, renderIcon(), (0, _react2.jsx)("div", {
|
|
123
132
|
className: _panel.PanelSharedCssClassName.content
|
|
124
133
|
}, children));
|
|
@@ -174,18 +174,10 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
|
|
|
174
174
|
if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
|
|
175
175
|
event.preventDefault();
|
|
176
176
|
|
|
177
|
-
_this.
|
|
177
|
+
_this.sort();
|
|
178
178
|
}
|
|
179
179
|
});
|
|
180
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "
|
|
181
|
-
// ignore sorting when specific elements are clicked
|
|
182
|
-
var _ref2 = event.target,
|
|
183
|
-
tagName = _ref2.tagName;
|
|
184
|
-
|
|
185
|
-
if (IgnoreSorting.includes(tagName)) {
|
|
186
|
-
return;
|
|
187
|
-
}
|
|
188
|
-
|
|
180
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sort", function () {
|
|
189
181
|
var _this$props2 = _this.props,
|
|
190
182
|
fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
|
|
191
183
|
onSorting = _this$props2.onSorting,
|
|
@@ -237,28 +229,18 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
|
|
|
237
229
|
return /*#__PURE__*/_react.default.createElement(WrapperComponent, this.props);
|
|
238
230
|
}
|
|
239
231
|
|
|
240
|
-
var className = _consts.RendererCssClassName.SORTABLE_COLUMN;
|
|
241
|
-
|
|
242
|
-
if (!onSorting) {
|
|
243
|
-
className = "".concat(className, " ").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
232
|
return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, this.props, {
|
|
247
|
-
className:
|
|
233
|
+
className: _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
248
234
|
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
249
235
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
250
|
-
className: _consts.RendererCssClassName.
|
|
251
|
-
role: "button",
|
|
252
|
-
tabIndex: onSorting ? 0 : -1,
|
|
253
|
-
onClick: this.onClick,
|
|
254
|
-
onKeyDown: this.onKeyPress,
|
|
255
|
-
"aria-disabled": !onSorting
|
|
236
|
+
className: _consts.RendererCssClassName.SORTABLE_COLUMN
|
|
256
237
|
}, children, /*#__PURE__*/_react.default.createElement("figure", {
|
|
257
|
-
"
|
|
258
|
-
className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " ").concat(sortOrderedClassName)
|
|
238
|
+
className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
|
|
259
239
|
}, /*#__PURE__*/_react.default.createElement(_SortingIcon.default, {
|
|
260
240
|
isSortingAllowed: !!onSorting,
|
|
261
|
-
sortOrdered: sortOrdered
|
|
241
|
+
sortOrdered: sortOrdered,
|
|
242
|
+
onClick: this.sort,
|
|
243
|
+
onKeyDown: this.onKeyPress
|
|
262
244
|
}))));
|
|
263
245
|
}
|
|
264
246
|
}]);
|
|
@@ -63,6 +63,8 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
|
|
|
63
63
|
});
|
|
64
64
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
|
|
65
65
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
|
|
66
|
+
var _marks$find, _marks$find$attrs;
|
|
67
|
+
|
|
66
68
|
var _this$props = _this.props,
|
|
67
69
|
extensionHandlers = _this$props.extensionHandlers,
|
|
68
70
|
rendererContext = _this$props.rendererContext,
|
|
@@ -72,14 +74,19 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
|
|
|
72
74
|
content = _this$props.content,
|
|
73
75
|
text = _this$props.text,
|
|
74
76
|
type = _this$props.type,
|
|
75
|
-
localId = _this$props.localId
|
|
77
|
+
localId = _this$props.localId,
|
|
78
|
+
marks = _this$props.marks;
|
|
79
|
+
var fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(function (m) {
|
|
80
|
+
return m.type.name === 'fragment';
|
|
81
|
+
})) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
|
|
76
82
|
var node = {
|
|
77
83
|
type: type,
|
|
78
84
|
extensionKey: extensionKey,
|
|
79
85
|
extensionType: extensionType,
|
|
80
86
|
parameters: parameters,
|
|
81
87
|
content: content || text,
|
|
82
|
-
localId: localId
|
|
88
|
+
localId: localId,
|
|
89
|
+
fragmentLocalId: fragmentLocalId
|
|
83
90
|
};
|
|
84
91
|
var result = null;
|
|
85
92
|
|
|
@@ -102,7 +102,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
|
|
|
102
102
|
var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
103
103
|
exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
|
|
104
104
|
var packageName = "@atlaskit/renderer";
|
|
105
|
-
var packageVersion = "
|
|
105
|
+
var packageVersion = "103.0.1";
|
|
106
106
|
|
|
107
107
|
var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
108
108
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
@@ -27,6 +27,8 @@ var _styles = require("@atlaskit/editor-common/styles");
|
|
|
27
27
|
|
|
28
28
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
29
29
|
|
|
30
|
+
var _utils = require("@atlaskit/editor-common/utils");
|
|
31
|
+
|
|
30
32
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
31
33
|
|
|
32
34
|
var _consts = require("../../consts");
|
|
@@ -98,7 +100,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
|
|
|
98
100
|
headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
|
|
99
101
|
}
|
|
100
102
|
|
|
101
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n
|
|
103
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width: 1.5px;\n border-style: solid;\n border-color: transparent;\n\n > *:first-child {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n @supports selector(:focus-visible) {\n &:focus {\n outline: unset;\n }\n &:focus-visible {\n border-color: ", ";\n }\n }\n\n ", "\n }\n\n .", " {\n margin: 0;\n .", " {\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n .", " {\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n }\n\n &:hover {\n .", " {\n .", " {\n opacity: 1;\n }\n }\n }\n }\n "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
102
104
|
};
|
|
103
105
|
|
|
104
106
|
var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
|
|
@@ -128,7 +130,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
128
130
|
var themeProps = {
|
|
129
131
|
theme: theme
|
|
130
132
|
};
|
|
131
|
-
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", "px 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n * .", " {\n width: 100% !important;\n left: 0 !important;\n }\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: auto 1fr;\n /* stylelint-enable */\n\n grid-template-columns: minmax(0, 1fr);\n position: relative;\n border-radius: ", "px;\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n\n & > span {\n /* stylelint-disable value-no-vendor-prefix */\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n /* stylelint-enable */\n grid-column: 1;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n\n &:hover button.copy-to-clipboard,\n .copy-to-clipboard:focus {\n opacity: 1;\n position: absolute;\n height: 32px;\n width: 32px;\n right: 6px;\n top: 4px;\n padding: 2px;\n }\n }\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", "px;\n & > div + div {\n margin-left: ", "px;\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
|
|
133
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", "px;\n color: ", ";\n padding: 2px 4px;\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", "px 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: 8px;\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n * .", " {\n width: 100% !important;\n left: 0 !important;\n }\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: auto 1fr;\n /* stylelint-enable */\n\n grid-template-columns: minmax(0, 1fr);\n position: relative;\n border-radius: ", "px;\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n\n & > span {\n /* stylelint-disable value-no-vendor-prefix */\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n /* stylelint-enable */\n grid-column: 1;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n\n &:hover button.copy-to-clipboard,\n .copy-to-clipboard:focus {\n opacity: 1;\n position: absolute;\n height: 32px;\n width: 32px;\n right: 6px;\n top: 4px;\n padding: 2px;\n }\n }\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", "px;\n & > div + div {\n margin-left: ", "px;\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n\n ", "\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
|
|
132
134
|
light: (0, _tokens.token)('color.text', colors.N800),
|
|
133
135
|
dark: (0, _tokens.token)('color.text', '#B8C7E0')
|
|
134
136
|
})(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
|
|
@@ -164,7 +166,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
164
166
|
})(themeProps), (0, _components.themed)({
|
|
165
167
|
light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
|
|
166
168
|
dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
|
|
167
|
-
})(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
|
|
169
|
+
})(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
168
170
|
};
|
|
169
171
|
};
|
|
170
172
|
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.
|
|
8
|
+
exports.default = exports.StatusClassNames = void 0;
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
@@ -25,17 +25,11 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
25
25
|
|
|
26
26
|
var _tokens = require("@atlaskit/tokens");
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _consts = require("../consts");
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
// https://product-fabric.atlassian.net/browse/ED-8001
|
|
32
|
-
// Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
|
|
33
|
-
// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
|
|
34
|
-
var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
|
|
35
|
-
exports.TableSortIconDataUrl = TableSortIconDataUrl;
|
|
36
|
-
var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
|
|
37
|
-
var StatusClassNames; // TODO: get design to check border
|
|
30
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
38
31
|
|
|
32
|
+
var StatusClassNames;
|
|
39
33
|
exports.StatusClassNames = StatusClassNames;
|
|
40
34
|
|
|
41
35
|
(function (StatusClassNames) {
|
|
@@ -45,23 +39,34 @@ exports.StatusClassNames = StatusClassNames;
|
|
|
45
39
|
StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
|
|
46
40
|
})(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
|
|
47
41
|
|
|
48
|
-
var
|
|
49
|
-
var
|
|
42
|
+
var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), (0, _tokens.token)('color.border', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
|
|
43
|
+
var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 8px;\n height: 12px;\n transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n transform-origin: 50% 50%;\n display: flex;\n justify-content: center;\n\n &.", " {\n transform: rotate(-180deg);\n }\n\n &.", "-inactive {\n opacity: 0.7;\n }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
|
|
44
|
+
// The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
|
|
45
|
+
// For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
|
|
50
46
|
|
|
51
|
-
var
|
|
52
|
-
|
|
47
|
+
var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 2px;\n border-radius: 50px;\n background: ", ";\n\n &::before,\n &::after {\n background: ", ";\n content: '';\n height: 2px;\n width: 6px;\n position: absolute;\n border-radius: 50px;\n }\n\n &::before {\n transform: rotate(45deg) translate(3.4px, 8.5px);\n }\n\n &::after {\n transform: rotate(-45deg) translate(-6.3px, 5.7px);\n }\n"])), (0, _tokens.token)('color.icon', '#42526E'), (0, _tokens.token)('color.icon', '#42526E'));
|
|
48
|
+
|
|
49
|
+
var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
|
|
50
|
+
var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
|
|
51
|
+
var activeStatusClass = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
|
|
52
|
+
|
|
53
|
+
if (!isSortingAllowed) {
|
|
54
|
+
return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
switch (sortOrdered) {
|
|
53
58
|
case _types.SortOrder.ASC:
|
|
54
|
-
return StatusClassNames.ASC;
|
|
59
|
+
return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
|
|
55
60
|
|
|
56
61
|
case _types.SortOrder.DESC:
|
|
57
|
-
return StatusClassNames.DESC;
|
|
62
|
+
return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
|
|
58
63
|
|
|
59
64
|
default:
|
|
60
|
-
return StatusClassNames.NO_ORDER;
|
|
65
|
+
return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
|
|
61
66
|
}
|
|
62
67
|
};
|
|
63
68
|
|
|
64
|
-
var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed,
|
|
69
|
+
var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
|
|
65
70
|
var noOrderLabel = _messages.sortingIconMessages.noOrderLabel,
|
|
66
71
|
ascOrderLabel = _messages.sortingIconMessages.ascOrderLabel,
|
|
67
72
|
descOrderLabel = _messages.sortingIconMessages.descOrderLabel,
|
|
@@ -71,7 +76,7 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
|
|
|
71
76
|
return intl.formatMessage(invalidLabel);
|
|
72
77
|
}
|
|
73
78
|
|
|
74
|
-
switch (
|
|
79
|
+
switch (sortOrdered) {
|
|
75
80
|
case _types.SortOrder.NO_ORDER:
|
|
76
81
|
return intl.formatMessage(noOrderLabel);
|
|
77
82
|
|
|
@@ -88,21 +93,43 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
|
|
|
88
93
|
var SortingIcon = function SortingIcon(_ref) {
|
|
89
94
|
var isSortingAllowed = _ref.isSortingAllowed,
|
|
90
95
|
sortOrdered = _ref.sortOrdered,
|
|
91
|
-
intl = _ref.intl
|
|
92
|
-
|
|
93
|
-
|
|
96
|
+
intl = _ref.intl,
|
|
97
|
+
onClick = _ref.onClick,
|
|
98
|
+
onKeyDown = _ref.onKeyDown;
|
|
99
|
+
var buttonClassName = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
|
|
94
100
|
var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
|
|
101
|
+
|
|
102
|
+
var handleClick = function handleClick() {
|
|
103
|
+
if (isSortingAllowed) {
|
|
104
|
+
onClick();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
109
|
+
if (isSortingAllowed) {
|
|
110
|
+
onKeyDown(event);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
|
|
95
114
|
return (0, _react.jsx)(_tooltip.default, {
|
|
96
115
|
delay: 0,
|
|
97
116
|
content: content,
|
|
98
117
|
position: "top"
|
|
99
|
-
}, (0, _react.jsx)("figure", {
|
|
100
|
-
css: wrapperStyles,
|
|
101
|
-
className: wrapperClassName
|
|
102
118
|
}, (0, _react.jsx)("div", {
|
|
103
|
-
css:
|
|
104
|
-
className:
|
|
105
|
-
|
|
119
|
+
css: buttonStyles,
|
|
120
|
+
className: buttonClassName,
|
|
121
|
+
role: "button",
|
|
122
|
+
tabIndex: isSortingAllowed ? 0 : -1,
|
|
123
|
+
"aria-label": "sort column",
|
|
124
|
+
"aria-disabled": !isSortingAllowed,
|
|
125
|
+
onClick: handleClick,
|
|
126
|
+
onKeyDown: handleKeyDown
|
|
127
|
+
}, (0, _react.jsx)("div", {
|
|
128
|
+
css: iconWrapperStyles,
|
|
129
|
+
className: getIconClassName(isSortingAllowed, sortOrdered)
|
|
130
|
+
}, (0, _react.jsx)("div", {
|
|
131
|
+
css: iconStyles
|
|
132
|
+
}))));
|
|
106
133
|
};
|
|
107
134
|
|
|
108
135
|
var _default = (0, _reactIntlNext.injectIntl)(SortingIcon);
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/consts.js
CHANGED
|
@@ -5,9 +5,9 @@ export const RendererCssClassName = {
|
|
|
5
5
|
EXTENSION_CENTER_ALIGN: `${clPrefix}extension-center-align`,
|
|
6
6
|
EXTENSION_OVERFLOW_CONTAINER: `${clPrefix}extension-overflow-container`,
|
|
7
7
|
NUMBER_COLUMN: `${clPrefix}table-number-column`,
|
|
8
|
+
SORTABLE_COLUMN_WRAPPER: `${clPrefix}tableHeader-sortable-column__wrapper`,
|
|
8
9
|
SORTABLE_COLUMN: `${clPrefix}tableHeader-sortable-column`,
|
|
9
|
-
|
|
10
|
-
SORTABLE_COLUMN_NOT_ALLOWED: `${clPrefix}tableHeader-sortable-column__not-allowed`,
|
|
10
|
+
SORTABLE_COLUMN_ICON_WRAPPER: `${clPrefix}tableHeader-sorting-icon__wrapper`,
|
|
11
11
|
SORTABLE_COLUMN_ICON: `${clPrefix}tableHeader-sorting-icon`,
|
|
12
12
|
SORTABLE_COLUMN_NO_ORDER: `${clPrefix}tableHeader-sorting-icon__no-order`
|
|
13
13
|
};
|
package/dist/es2019/i18n/cs.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Czech
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Zkopírováno!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopírovat',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Seřadit sloupec od Z do A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'vzestupně',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Zkopírováno!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Kopírovat odkaz na nadpis',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Kopírovat',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Zrušit řazení',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'sestupně',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Kopírování se nezdařilo',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Tabulku se sloučenými buňkami nelze seřadit',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Seřadit sloupec od A do Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Žádné'
|
|
20
20
|
};
|
package/dist/es2019/i18n/da.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Danish (Denmark)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopieret!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopiér',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Sortér kolonnen fra Å til A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'stigende',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Kopieret!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Kopiér link til overskrift',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Kopiér',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Ryd sortering',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'faldende',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Kopiering mislykkedes',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ En tabel med flettede celler kan ikke sorteres',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Sortér kolonnen fra A til Å',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ingen'
|
|
20
20
|
};
|
package/dist/es2019/i18n/de.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//German (Germany)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopiert!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopieren',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Spalte von Z nach A sortieren',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'aufsteigend',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Kopiert!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Link in Überschrift kopieren',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Kopieren',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Sortierung löschen',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'absteigend',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Kopieren ist fehlgeschlagen',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Tabellen mit zusammengeführten Zellen können nicht sortiert werden.',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Spalte von A nach Z sortieren',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Keine'
|
|
20
20
|
};
|
package/dist/es2019/i18n/en.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'ascending',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Copied!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Copy',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel':
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Clear sorting',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'descending',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Copy failed',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': "⚠️ You can't sort a table with merged cells",
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'none'
|
|
20
20
|
};
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//English (United Kingdom)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'ascending',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Copied!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Copy',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel':
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Clear sorting',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'descending',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Copy failed',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': "⚠️ You can't sort a table with merged cells",
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'none'
|
|
20
20
|
};
|
package/dist/es2019/i18n/es.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Spanish (International)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': '¡Copiado!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copiar',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Ordenar columna de la Z a la A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'ascendente',
|
|
13
11
|
'fabric.editor.headingLink.copied': '¡Copiado!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Copiar enlace en el título',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Copiar',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Borrar orden',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'descendente',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Copia fallida',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ No puedes ordenar una tabla con celdas combinadas',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Ordenar columna de la A a la Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ninguno'
|
|
20
20
|
};
|
package/dist/es2019/i18n/fi.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Finnish
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopioitu!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopioi',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Lajittele sarake Z–A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'nousevassa järjestyksessä',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Kopioitu!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Kopioi otsikkolinkki',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Kopioi',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Tyhjennä lajittelu',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'laskevassa järjestyksessä',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Kopiointi epäonnistui',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Et voi lajitella yhdistettyjä soluja sisältävää taulukkoa',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Lajittele sarake A–Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Ei mitään'
|
|
20
20
|
};
|
package/dist/es2019/i18n/fr.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//French (France)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copié !',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copier',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Trier la colonne de Z à A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'ordre croissant',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Copié !',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': "Copier le lien vers l'en-tête",
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Copier',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Effacer le tri',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'ordre décroissant',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Copie impossible',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Impossible de trier un tableau comportant des cellules fusionnées',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Trier la colonne de A à Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Néant'
|
|
20
20
|
};
|
package/dist/es2019/i18n/hu.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Hungarian
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Másolva!',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Másolás',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Oszlop rendezése: Z → A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'növekvő',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Másolva!',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': 'Fejléc linkjének másolása',
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Másolás',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel': '
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': 'Rendezés törlése',
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'csökkenő',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'A másolás nem sikerült',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Nem rendezhetsz egyesített cellákat tartalmazó táblázatot',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Oszlop rendezése: A → Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Nincs'
|
|
20
20
|
};
|
package/dist/es2019/i18n/it.js
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
//Italian (Italy)
|
|
8
8
|
export default {
|
|
9
|
-
'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copiato.',
|
|
10
|
-
'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copia',
|
|
11
9
|
'fabric.editor.headingLink.ascOrderLabel': 'Ordina colonna da Z ad A',
|
|
12
10
|
'fabric.editor.headingLink.ascSortingLabel': 'crescente',
|
|
13
11
|
'fabric.editor.headingLink.copied': 'Copiato.',
|
|
14
12
|
'fabric.editor.headingLink.copyAnchorLink': "Copia link nell'intestazione",
|
|
15
13
|
'fabric.editor.headingLink.copyAriaLabel': 'Copia',
|
|
16
|
-
'fabric.editor.headingLink.descOrderLabel':
|
|
14
|
+
'fabric.editor.headingLink.descOrderLabel': "Cancella l'ordinamento",
|
|
15
|
+
'fabric.editor.headingLink.descSortingLabel': 'decrescente',
|
|
17
16
|
'fabric.editor.headingLink.failedToCopy': 'Copia non riuscita',
|
|
17
|
+
'fabric.editor.headingLink.invalidLabel': '⚠️ Non puoi ordinare una tabella con celle unite',
|
|
18
18
|
'fabric.editor.headingLink.noOrderLabel': 'Ordina colonna da A a Z',
|
|
19
|
-
'fabric.editor.headingLink.noneSortingLabel': '
|
|
19
|
+
'fabric.editor.headingLink.noneSortingLabel': 'nessuno'
|
|
20
20
|
};
|