@longline/aqua-ui 1.0.243 → 1.0.245
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.
|
@@ -18,6 +18,7 @@ import styled, { useTheme } from 'styled-components';
|
|
|
18
18
|
import { SVG } from '../../../svg';
|
|
19
19
|
import { Icon } from '../../Icon';
|
|
20
20
|
var ColumnDraggableBase = function (props) {
|
|
21
|
+
var _a;
|
|
21
22
|
var theme = useTheme();
|
|
22
23
|
var wrapperRef = React.useRef(null);
|
|
23
24
|
var handleMouseDown = function () {
|
|
@@ -73,7 +74,7 @@ var ColumnDraggableBase = function (props) {
|
|
|
73
74
|
}
|
|
74
75
|
};
|
|
75
76
|
return (React.createElement("div", { className: "".concat(props.className, " dropzone"), "x-name": props.column.name, ref: wrapperRef, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop },
|
|
76
|
-
React.createElement(Handle, { className: "handle", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }, props.column.name),
|
|
77
|
+
React.createElement(Handle, { className: "handle", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }, (_a = props.column.label) !== null && _a !== void 0 ? _a : props.column.name),
|
|
77
78
|
!props.column.fixed && React.createElement(Icon, { color: theme.colors.primary[5], circle: true, url: SVG.Icons.Cross, onClick: props.onRemove })));
|
|
78
79
|
};
|
|
79
80
|
var Handle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n &:before {\n position: absolute;\n content: '';\n left: 0;\n top: calc(50% - 12px);\n width: 16px;\n height: 24px;\n background-image: radial-gradient(circle at center, ", " 1px, transparent 1px, transparent 4px);\n background-size: 6px 6px;\n }\n cursor: pointer;\n padding-left: 24px;\n"], ["\n position: relative;\n &:before {\n position: absolute;\n content: '';\n left: 0;\n top: calc(50% - 12px);\n width: 16px;\n height: 24px;\n background-image: radial-gradient(circle at center, ", " 1px, transparent 1px, transparent 4px);\n background-size: 6px 6px;\n }\n cursor: pointer;\n padding-left: 24px;\n"])), function (p) { return p.theme.colors.neutral[80]; });
|
|
@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import styled from 'styled-components';
|
|
18
18
|
import { Selector } from '../../../inputs/Selector';
|
|
19
|
-
import { HighlightFormatter } from '../../../formatters/HighlightFormatter';
|
|
20
19
|
import { List } from '../../../containers/List';
|
|
21
20
|
var SourceColumnsBase = function (props) {
|
|
22
21
|
var _a = React.useState(""), q = _a[0], setQ = _a[1];
|
|
@@ -33,12 +32,12 @@ var SourceColumnsBase = function (props) {
|
|
|
33
32
|
};
|
|
34
33
|
return (React.createElement("div", { className: props.className },
|
|
35
34
|
React.createElement(List, { maxItems: 6, search: q, placeholder: "Search...", onSearch: handleQ }, props.columns.filter(function (c) { return !q || c.name.toLowerCase().includes(q); }).sort(function (a, b) { return a.name.localeCompare(b.name); }).map(function (c, idx) {
|
|
35
|
+
var _a;
|
|
36
36
|
return React.createElement(Entry, { key: c.name },
|
|
37
|
-
React.createElement(Selector, { disabled: c.fixed, checked: !!c.active, onChange: function () { return handleChange(c.name); } }),
|
|
38
|
-
React.createElement(HighlightFormatter, { value: c.name, q: q }));
|
|
37
|
+
React.createElement(Selector, { disabled: c.fixed, checked: !!c.active, onChange: function () { return handleChange(c.name); } }), (_a = c.label) !== null && _a !== void 0 ? _a : c.name);
|
|
39
38
|
}))));
|
|
40
39
|
};
|
|
41
|
-
var Entry = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n color: ", ";\n padding-left: 16px;\n padding-right: 16px;\n"], ["\n display: flex;\n align-items: center;\n color: ", ";\n padding-left: 16px;\n padding-right: 16px;\n"])), function (p) { return p.theme.colors.primary[5]; });
|
|
40
|
+
var Entry = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n color: ", ";\n padding-left: 16px;\n padding-right: 16px;\n height: 28px;\n"], ["\n display: flex;\n align-items: center;\n color: ", ";\n padding-left: 16px;\n padding-right: 16px;\n height: 28px;\n"])), function (p) { return p.theme.colors.primary[5]; });
|
|
42
41
|
var SourceColumnsStyled = styled(SourceColumnsBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font: ", ";\n display: flex;\n flex-direction: column;\n flex: 1;\n"], ["\n font: ", ";\n display: flex;\n flex-direction: column;\n flex: 1;\n"])), function (p) { return p.theme.font.bodyMedium; });
|
|
43
42
|
var SourceColumns = function (props) { return React.createElement(SourceColumnsStyled, __assign({}, props)); };
|
|
44
43
|
export { SourceColumns };
|