@longline/aqua-ui 1.0.274 → 1.0.276
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.
|
@@ -31,12 +31,12 @@ var LinearChartBase = function (props) {
|
|
|
31
31
|
var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
|
|
32
32
|
return (React.createElement("div", { className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
|
|
33
33
|
props.label && React.createElement(Label, null,
|
|
34
|
-
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top:
|
|
34
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }),
|
|
35
35
|
!props.ghost && props.label),
|
|
36
36
|
!props.ghost && props.numbered && React.createElement(Number, null, percentage),
|
|
37
37
|
!props.ghost && React.createElement(Bar, null),
|
|
38
38
|
props.ghost && React.createElement(GhostWrapper, null,
|
|
39
|
-
React.createElement(Ghost, { style: { position: 'absolute', left: 0, top:
|
|
39
|
+
React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }))));
|
|
40
40
|
};
|
|
41
41
|
var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"], ["\n position: relative;\n width: 120px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 18px;\n line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"])));
|
|
42
42
|
var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 40px;\n text-align: right;\n height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n line-height: 18px;\n"], ["\n width: 40px;\n text-align: right;\n height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n line-height: 18px;\n"])));
|
package/controls/TabBar/Tab.js
CHANGED
|
@@ -33,13 +33,13 @@ var TabBase = React.forwardRef(function (props, ref) {
|
|
|
33
33
|
props.onClick();
|
|
34
34
|
};
|
|
35
35
|
return (React.createElement("div", { className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
|
|
36
|
-
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '
|
|
36
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '9px', right: '5px', bottom: '9px', zIndex: 100 } }),
|
|
37
37
|
React.createElement(Content, null,
|
|
38
38
|
props.children,
|
|
39
39
|
props.badge !== undefined && React.createElement(Badge, null, props.badge))));
|
|
40
40
|
});
|
|
41
|
-
var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n
|
|
42
|
-
var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n"])));
|
|
41
|
+
var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: 40px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"], ["\n position: relative;\n padding: 0 20px;\n\n font: ", ";\n box-sizing: border-box;\n ", "\n height: 40px;\n z-index: 1;\n cursor: pointer;\n color: ", ";\n transition: color ", "ms ease-in-out;\n\n /* User cannot select header text.\n * This prevents accidental selection when clicking the tab.\n */\n user-select: none; \n\n ", " \n &:hover {\n color: ", ";\n }\n\n // Ghost and disabled cannot be clicked:\n ", "\n\n // Disabled:\n ", "\n\n // Ghost state:\n ", " \n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & > *:not(:first-child) {\n visibility: hidden;\n } \n "], ["\n & > *:not(:first-child) {\n visibility: hidden;\n } \n "]))); });
|
|
42
|
+
var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n height: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n height: 100%;\n"])));
|
|
43
43
|
var Badge = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: ", ";\n border-radius: ", "px;\n padding: 0 6px;\n font: ", ";\n"], ["\n background: ", ";\n border-radius: ", "px;\n padding: 0 6px;\n font: ", ";\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.labelSmall; });
|
|
44
44
|
var Tab = React.forwardRef(function (_a, ref) {
|
|
45
45
|
var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["ghost", "disabled"]);
|
|
@@ -39,6 +39,11 @@ interface ITabBarProps {
|
|
|
39
39
|
* @default false
|
|
40
40
|
*/
|
|
41
41
|
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Alignment of tab items. One of `left`, `right` and `center`.
|
|
44
|
+
* @default left
|
|
45
|
+
*/
|
|
46
|
+
align?: 'left' | 'right' | 'center';
|
|
42
47
|
}
|
|
43
48
|
/**
|
|
44
49
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
@@ -48,7 +53,7 @@ interface ITabBarProps {
|
|
|
48
53
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
49
54
|
*/
|
|
50
55
|
declare const TabBar: {
|
|
51
|
-
({ active, ghost, disabled, ...props }: ITabBarProps): React.JSX.Element;
|
|
56
|
+
({ active, ghost, disabled, align, ...props }: ITabBarProps): React.JSX.Element;
|
|
52
57
|
Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
|
|
53
58
|
displayName: string;
|
|
54
59
|
};
|
|
@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
|
-
import styled from 'styled-components';
|
|
28
|
+
import styled, { css } from 'styled-components';
|
|
29
29
|
import { Tab } from './Tab';
|
|
30
30
|
import { Underliner } from './Underliner';
|
|
31
31
|
var TabBarBase = function (props) {
|
|
@@ -200,13 +200,17 @@ var TabBarBase = function (props) {
|
|
|
200
200
|
tabWidth: props.tabWidth,
|
|
201
201
|
ghost: props.ghost,
|
|
202
202
|
disabled: props.disabled,
|
|
203
|
-
onClick: function () {
|
|
203
|
+
onClick: function () {
|
|
204
|
+
if (child.props.onClick)
|
|
205
|
+
child.props.onClick();
|
|
206
|
+
handleTabClick(idx);
|
|
207
|
+
}
|
|
204
208
|
});
|
|
205
209
|
}),
|
|
206
|
-
React.createElement(Underliner, { disabled: props.disabled || props.ghost, ref: underlinerRef }))));
|
|
210
|
+
React.createElement(Underliner, { ghost: props.ghost, disabled: props.disabled || props.ghost, ref: underlinerRef }))));
|
|
207
211
|
};
|
|
208
|
-
var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n height: 40px;\n box-sizing: border-box;\n display:
|
|
209
|
-
var TabBarStyled = styled(TabBarBase)(
|
|
212
|
+
var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position & size:\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n height: 40px;\n\n // Content:\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n justify-content: end;\n flex-wrap: nowrap;\n align-items: center;\n\n // Appearance:\n border-bottom: solid 1px ", ";\n"], ["\n // Position & size:\n position: absolute;\n left: 0;\n top: 0;\n width: auto !important;\n min-width: 100%;\n height: 40px;\n\n // Content:\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n justify-content: end;\n flex-wrap: nowrap;\n align-items: center;\n\n // Appearance:\n border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[80]; });
|
|
213
|
+
var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n ", "\n ", "\n }\n"], ["\n position: relative;\n display: block;\n height: 40px;\n min-height: 40px;\n overflow-x: hidden;\n overflow-y: hidden;\n ", " {\n border-color: ", ";\n ", "\n ", "\n }\n"
|
|
210
214
|
/**
|
|
211
215
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
212
216
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -214,7 +218,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
|
|
|
214
218
|
*
|
|
215
219
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
216
220
|
*/
|
|
217
|
-
])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; });
|
|
221
|
+
])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; }, function (p) { return p.align === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["justify-content: end;"], ["justify-content: end;"]))); }, function (p) { return p.align === 'center' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: center;"], ["justify-content: center;"]))); });
|
|
218
222
|
/**
|
|
219
223
|
* A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
|
|
220
224
|
* with an underliner under the active child. The `onClick(idx)` event is fired
|
|
@@ -223,10 +227,10 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
|
|
|
223
227
|
* This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
|
|
224
228
|
*/
|
|
225
229
|
var TabBar = function (_a) {
|
|
226
|
-
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, props = __rest(_a, ["active", "ghost", "disabled"]);
|
|
227
|
-
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled }, props));
|
|
230
|
+
var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, props = __rest(_a, ["active", "ghost", "disabled", "align"]);
|
|
231
|
+
return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled, align: align }, props));
|
|
228
232
|
};
|
|
229
233
|
TabBar.Tab = Tab;
|
|
230
234
|
TabBar.displayName = "TabBar";
|
|
231
235
|
export { TabBar };
|
|
232
|
-
var templateObject_1, templateObject_2;
|
|
236
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -4,6 +4,8 @@ interface IUnderlinerProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
/** Is TabBar disabled? */
|
|
6
6
|
disabled?: boolean;
|
|
7
|
+
/** Is TabBar ghosted? */
|
|
8
|
+
ghost?: boolean;
|
|
7
9
|
}
|
|
8
10
|
declare const Underliner: React.ForwardRefExoticComponent<IUnderlinerProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
11
|
export { Underliner };
|
|
@@ -21,7 +21,7 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
|
|
|
21
21
|
/**
|
|
22
22
|
* Underliner passes a reference to itself back to its parent.
|
|
23
23
|
*/
|
|
24
|
-
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"], ["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; });
|
|
24
|
+
var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n opacity: ", ";\n"], ["\n // Position and size:\n position: absolute;\n left: 0;\n top: 38px;\n width: 0px;\n height: 0px;\n // Appearance:\n border-top: solid 4px ", ";\n box-sizing: border-box;\n transition: transform ease .3s, width ease .3s;\n opacity: ", ";\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; }, function (p) { return p.ghost ? 0 : 1; });
|
|
25
25
|
var Underliner = React.forwardRef(function (props, ref) {
|
|
26
26
|
return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
|
|
27
27
|
});
|