@longline/aqua-ui 1.0.161 → 1.0.162
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/controls/View/EllipsizedContent.d.ts +11 -0
- package/controls/View/EllipsizedContent.js +12 -0
- package/controls/View/ScrollingContent.d.ts +13 -0
- package/controls/View/ScrollingContent.js +23 -0
- package/controls/View/View.d.ts +14 -0
- package/controls/View/View.js +11 -5
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** @ignore */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/** Is the View in `ghost` mode? */
|
|
8
|
+
ghost?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const EllipsizedContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
|
|
11
|
+
export { EllipsizedContent };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import styled from 'styled-components';
|
|
7
|
+
var EllipsizedContentBase = function (props) {
|
|
8
|
+
return React.createElement("div", { className: props.className }, !props.ghost && props.children);
|
|
9
|
+
};
|
|
10
|
+
var EllipsizedContent = styled(EllipsizedContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; \n\n display: flex;\n align-items: center;\n height: 36px;\n"], ["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; \n\n display: flex;\n align-items: center;\n height: 36px;\n"])));
|
|
11
|
+
export { EllipsizedContent };
|
|
12
|
+
var templateObject_1;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** @ignore */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/** Is this View in `ghost` mode? */
|
|
8
|
+
ghost?: boolean;
|
|
9
|
+
/** Height of the view, in pixels. */
|
|
10
|
+
height: number;
|
|
11
|
+
}
|
|
12
|
+
declare const ScrollingContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
|
|
13
|
+
export { ScrollingContent };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import styled from 'styled-components';
|
|
7
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
8
|
+
var ScrollingContentBase = function (props) {
|
|
9
|
+
return React.createElement("div", { className: props.className },
|
|
10
|
+
React.createElement(OverlayScrollbarsComponent, { defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
|
|
11
|
+
position: "absolute",
|
|
12
|
+
left: 0,
|
|
13
|
+
top: 8,
|
|
14
|
+
right: 0,
|
|
15
|
+
bottom: 0,
|
|
16
|
+
paddingBottom: "20px",
|
|
17
|
+
paddingRight: "16px",
|
|
18
|
+
overflowY: "auto",
|
|
19
|
+
} }, !props.ghost && props.children));
|
|
20
|
+
};
|
|
21
|
+
var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: calc(", "px - 44px);\n"], ["\n position: relative;\n height: calc(", "px - 44px);\n"])), function (p) { return p.height; });
|
|
22
|
+
export { ScrollingContent };
|
|
23
|
+
var templateObject_1;
|
package/controls/View/View.d.ts
CHANGED
|
@@ -11,6 +11,20 @@ interface IProps {
|
|
|
11
11
|
* `View` label, e.g. `Email address`. Can be JSX.
|
|
12
12
|
*/
|
|
13
13
|
label?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Optional hint. Can be JSX.
|
|
16
|
+
*/
|
|
17
|
+
hint?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* If set, hint area will not have a background color.
|
|
20
|
+
*/
|
|
21
|
+
noHintBg?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* By default, content is ellipsized to one line. If `height` is set,
|
|
24
|
+
* content is allowed to grow, and a scrollbar is added. Height is in
|
|
25
|
+
* pixels.
|
|
26
|
+
*/
|
|
27
|
+
height?: number;
|
|
14
28
|
/**
|
|
15
29
|
* Views may provide their weight in relative units to other Views,
|
|
16
30
|
* for flexbox alignment, e.g. `2`.
|
package/controls/View/View.js
CHANGED
|
@@ -27,13 +27,19 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css } from 'styled-components';
|
|
29
29
|
import { Label } from '../../containers/Form/elements/Label';
|
|
30
|
+
import { ScrollingContent } from './ScrollingContent';
|
|
31
|
+
import { EllipsizedContent } from './EllipsizedContent';
|
|
30
32
|
var ViewBase = function (props) {
|
|
31
33
|
return (React.createElement("div", { className: props.className },
|
|
32
34
|
React.createElement(Label, null, props.label),
|
|
33
|
-
React.createElement(Content, null,
|
|
35
|
+
React.createElement(Content, null, props.height
|
|
36
|
+
? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height, children: props.children })
|
|
37
|
+
: React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
|
|
38
|
+
props.hint && React.createElement(HintContent, null, props.hint)));
|
|
34
39
|
};
|
|
35
|
-
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
36
|
-
var
|
|
40
|
+
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n min-height: 36px;\n margin-top: 22px;\n margin-bottom: 22px;\n"], ["\n position: relative;\n min-height: 36px;\n margin-top: 22px;\n margin-bottom: 22px;\n"])));
|
|
41
|
+
var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"], ["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
42
|
+
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n ", "\n z-index: 0; // for :before\n padding-left: 12px;\n padding-right: 12px;\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"
|
|
37
43
|
/**
|
|
38
44
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
39
45
|
* children are its value.
|
|
@@ -42,7 +48,7 @@ var ViewStyled = styled(ViewBase)(templateObject_4 || (templateObject_4 = __make
|
|
|
42
48
|
* <View label="Email address">{email}</View>
|
|
43
49
|
* ```
|
|
44
50
|
*/
|
|
45
|
-
])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(
|
|
51
|
+
])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", "px;"], ["height: ", "px;"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "], ["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\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 color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
46
52
|
/**
|
|
47
53
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
48
54
|
* children are its value.
|
|
@@ -56,4 +62,4 @@ var View = function (_a) {
|
|
|
56
62
|
return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
|
|
57
63
|
};
|
|
58
64
|
export { View };
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|