@longline/aqua-ui 1.0.20 → 1.0.23
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/containers/Form/elements/BoxWrapper.js +4 -3
- package/controls/ListView/Column.d.ts +4 -0
- package/controls/ListView/Ghost.js +3 -3
- package/controls/ListView/HeaderCell.js +3 -2
- package/controls/ListView/IListViewProps.d.ts +5 -0
- package/controls/ListView/ListView.d.ts +1 -1
- package/controls/ListView/ListView.js +2 -2
- package/controls/ListView/Table.js +1 -1
- package/controls/ListView/index.d.ts +1 -0
- package/controls/ListView/index.js +1 -0
- package/inputs/Dropdown/Selector.js +1 -1
- package/inputs/Input/InputWrapper.js +1 -1
- package/inputs/Slider/Slider.js +0 -1
- package/package.json +1 -1
|
@@ -28,8 +28,9 @@ var BoxWrapperBase = function (props) {
|
|
|
28
28
|
return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
|
|
29
29
|
props.label,
|
|
30
30
|
props.children,
|
|
31
|
-
props.hint));
|
|
31
|
+
React.createElement(HintBackground, null, props.hint)));
|
|
32
32
|
};
|
|
33
|
-
var
|
|
33
|
+
var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
|
|
34
|
+
var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
34
35
|
export { BoxWrapper };
|
|
35
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
36
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -4,6 +4,10 @@ interface IColumnProps {
|
|
|
4
4
|
* Column name, e.g. "Number of Users"
|
|
5
5
|
*/
|
|
6
6
|
name: string;
|
|
7
|
+
/**
|
|
8
|
+
* Optional label. `name` will be used if not specified.
|
|
9
|
+
*/
|
|
10
|
+
label?: React.ReactNode;
|
|
7
11
|
/**
|
|
8
12
|
* Column width. If a number, e.g. `1`, then it is the column's weight,
|
|
9
13
|
* relative to other columns. If it is a string, e.g. `50px`, then it is
|
|
@@ -19,9 +19,9 @@ var GhostBase = function (props) {
|
|
|
19
19
|
return (React.createElement("div", { className: props.className },
|
|
20
20
|
React.createElement("div", { className: "mask1" }),
|
|
21
21
|
React.createElement("div", { className: "mask2" }),
|
|
22
|
-
props.onCheck && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }),
|
|
23
|
-
props.columns.filter(function (c) { return c.active; }).map(function (c, idx) { return React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": true, key: idx }); }),
|
|
24
|
-
props.columnsEditable && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false })));
|
|
22
|
+
!props.noheader && props.onCheck && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }),
|
|
23
|
+
!props.noheader && props.columns.filter(function (c) { return c.active; }).map(function (c, idx) { return React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": true, key: idx }); }),
|
|
24
|
+
!props.noheader && props.columnsEditable && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false })));
|
|
25
25
|
};
|
|
26
26
|
var Pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n background-position-x: 0px;\n }\n 100% {\n background-position-x: 250px;\n }\n"], ["\n 0% {\n background-position-x: 0px;\n }\n 100% {\n background-position-x: 250px;\n }\n"])));
|
|
27
27
|
var Pulse2 = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n background-position-x: 125px;\n }\n 50% {\n background-position-x: 250px; \n }\n 50.1% {\n background-position-x: 0px; \n } \n 100% {\n background-position-x: 125px;\n }\n"], ["\n 0% {\n background-position-x: 125px;\n }\n 50% {\n background-position-x: 250px; \n }\n 50.1% {\n background-position-x: 0px; \n } \n 100% {\n background-position-x: 125px;\n }\n"])));
|
|
@@ -17,6 +17,7 @@ import * as React from 'react';
|
|
|
17
17
|
import styled from 'styled-components';
|
|
18
18
|
import { SortButton } from './SortButton';
|
|
19
19
|
var HeaderCellBase = function (props) {
|
|
20
|
+
var _a;
|
|
20
21
|
var sorted = props.sort == props.column.sort;
|
|
21
22
|
return (React.createElement("th", {
|
|
22
23
|
// Sorted column gets .sorted class:
|
|
@@ -24,8 +25,8 @@ var HeaderCellBase = function (props) {
|
|
|
24
25
|
// Sortable column has pointer cursor:
|
|
25
26
|
cursor: props.column.sort ? 'pointer' : 'auto'
|
|
26
27
|
}, onClick: (props.column.sort && props.onSortClick) ? function () { return props.onSortClick(props.column); } : null },
|
|
27
|
-
React.createElement("
|
|
28
|
-
React.createElement(SortButton, { dark: props.dark, active: sorted,
|
|
28
|
+
React.createElement("div", { style: { width: '100%' } }, (_a = props.column.label) !== null && _a !== void 0 ? _a : props.column.name),
|
|
29
|
+
props.column.sort && React.createElement(SortButton, { dark: props.dark, active: sorted,
|
|
29
30
|
// If currently sorted, show sort direction.
|
|
30
31
|
// If not currently sorted, show default sort direction.
|
|
31
32
|
reverse: sorted ? props.reverse : props.column.reverse })));
|
|
@@ -11,7 +11,7 @@ interface IProps extends IListViewProps {
|
|
|
11
11
|
children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
|
|
12
12
|
}
|
|
13
13
|
declare const ListView: {
|
|
14
|
-
({ dark, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, columnsEditable, ...props }: IProps): React.JSX.Element;
|
|
14
|
+
({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, columnsEditable, ...props }: IProps): React.JSX.Element;
|
|
15
15
|
Column: {
|
|
16
16
|
(_: IColumnProps): null;
|
|
17
17
|
displayName: string;
|
|
@@ -90,8 +90,8 @@ var ListViewBase = function (props) {
|
|
|
90
90
|
};
|
|
91
91
|
// Wrapper for default values:
|
|
92
92
|
var ListView = function (_a) {
|
|
93
|
-
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.
|
|
94
|
-
return React.createElement(ListViewBase, __assign({ dark: dark, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, columnsEditable: columnsEditable }, props));
|
|
93
|
+
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.columnsEditable, columnsEditable = _o === void 0 ? false : _o, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "columnsEditable"]);
|
|
94
|
+
return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, columnsEditable: columnsEditable }, props));
|
|
95
95
|
};
|
|
96
96
|
ListView.Column = Column;
|
|
97
97
|
export { ListView };
|
|
@@ -71,7 +71,7 @@ var TableBase = function (_a) {
|
|
|
71
71
|
React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && props.data.includes(props.active)) ? 'visible' : 'hidden' } }, (props.active && props.aux && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
|
|
72
72
|
React.createElement(Inner, { onScroll: handleScroll, ref: innerRef },
|
|
73
73
|
React.createElement("table", { className: className },
|
|
74
|
-
React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
|
|
74
|
+
props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
|
|
75
75
|
React.createElement(Body, __assign({}, props, { columns: activeColumns })))),
|
|
76
76
|
props.total && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
|
|
77
77
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ListView } from './ListView';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ListView } from './ListView';
|
|
@@ -11,6 +11,6 @@ var Selector = function (props) {
|
|
|
11
11
|
return (React.createElement(InputWrapper, { fluid: true, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, onClick: props.onClick, onClear: props.onClear, icon: props.onClear ? null : SVG.Icons.Caret, iconPosition: 'right' },
|
|
12
12
|
React.createElement(Selection, { tabIndex: -1, "$multiple": props.multiple, "$placeholder": props.placeholder }, props.children)));
|
|
13
13
|
};
|
|
14
|
-
var Selection = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width:
|
|
14
|
+
var Selection = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n outline: none;\n overflow-x: hidden;\n overflow-y: hidden;\n white-space: nowrap;\n ", " \n // Add ellipsis to selection text:\n ", " \n"], ["\n width: 100%;\n outline: none;\n overflow-x: hidden;\n overflow-y: hidden;\n white-space: nowrap;\n ", " \n // Add ellipsis to selection text:\n ", " \n"])), function (p) { return p.$placeholder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: rgb(from ", " r g b / 50%);\n "], ["\n color: rgb(from ", " r g b / 50%);\n "])), function (p) { return p.theme.colors.primary[3]; }); }, function (p) { return !p.$multiple && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["text-overflow: ellipsis;"], ["text-overflow: ellipsis;"]))); });
|
|
15
15
|
export { Selector };
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
|
|
|
42
42
|
}
|
|
43
43
|
return (React.createElement("div", { className: props.className, onClick: props.onClick },
|
|
44
44
|
icon && !props.ghost && props.iconPosition == 'left' && icon,
|
|
45
|
-
React.createElement("div", { style: { flex: 1 } }, props.children),
|
|
45
|
+
React.createElement("div", { style: { position: 'relative', flex: 1, overflowX: 'hidden' } }, props.children),
|
|
46
46
|
icon && !props.ghost && props.iconPosition == 'right' && icon,
|
|
47
47
|
props.onClear && React.createElement(Clear, { onClick: props.onClear }),
|
|
48
48
|
React.createElement(Unit, null, props.unit)));
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -154,7 +154,6 @@ var SliderBase = function (props) {
|
|
|
154
154
|
// Create a number of ticks and return them.
|
|
155
155
|
return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
|
|
156
156
|
};
|
|
157
|
-
var className = props.className, restProps = __rest(props, ["className"]);
|
|
158
157
|
return (React.createElement("div", { className: props.className, ref: sliderRef, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
|
|
159
158
|
React.createElement(Track, null,
|
|
160
159
|
React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
|