@zohodesk/dot 1.0.0-beta.198 → 1.0.0-beta.200
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/README.md +10 -0
- package/es/avatar/AvatarThread/AvatarThread.js +7 -5
- package/es/list/ListLayout/ListLayout.js +7 -4
- package/es/list/ListLayout/ListLayout.module.css +29 -2
- package/lib/avatar/AvatarThread/AvatarThread.js +7 -5
- package/lib/list/ListLayout/ListLayout.js +6 -4
- package/lib/list/ListLayout/ListLayout.module.css +29 -2
- package/package.json +3 -3
- package/src/avatar/AvatarThread/AvatarThread.js +8 -3
- package/src/list/ListLayout/ListLayout.js +7 -4
- package/src/list/ListLayout/ListLayout.module.css +20 -3
package/README.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
In this Library we Provide Some Basic Components to Build Your Application
|
|
4
4
|
|
|
5
|
+
# 1.0.0-beta.200
|
|
6
|
+
|
|
7
|
+
- ListLayout => isKeyboardActive prop and ui added
|
|
8
|
+
|
|
9
|
+
# 1.0.0-beta.199
|
|
10
|
+
|
|
11
|
+
- - AvatarThread component -> getCustomThread prop added
|
|
12
|
+
|
|
5
13
|
# 1.0.0-beta.198
|
|
6
14
|
|
|
7
15
|
- TextEditor => default font changed to Lato
|
|
@@ -14,9 +22,11 @@ In this Library we Provide Some Basic Components to Build Your Application
|
|
|
14
22
|
|
|
15
23
|
- Messagebanner => FontSize Fixed
|
|
16
24
|
- TextEditor => PuviFont Version Updated
|
|
25
|
+
|
|
17
26
|
# 1.0.0-beta.194
|
|
18
27
|
|
|
19
28
|
- CommonEmptyState missing dark palette variables moved under Themes folder files
|
|
29
|
+
|
|
20
30
|
# 1.0.0-beta.193
|
|
21
31
|
|
|
22
32
|
- ListLayout -> needPointer prop added and hover css fix
|
|
@@ -29,7 +29,8 @@ export default class AvatarThread extends React.Component {
|
|
|
29
29
|
customTextClass,
|
|
30
30
|
needTitle,
|
|
31
31
|
customProps,
|
|
32
|
-
iconClass
|
|
32
|
+
iconClass,
|
|
33
|
+
getCustomThread
|
|
33
34
|
} = this.props;
|
|
34
35
|
let {
|
|
35
36
|
AvatarThreadProps = {},
|
|
@@ -50,19 +51,19 @@ export default class AvatarThread extends React.Component {
|
|
|
50
51
|
textPalette: textPalette,
|
|
51
52
|
customClass: customTextClass,
|
|
52
53
|
needTitle: needTitle
|
|
53
|
-
}, AvatarProps)), iconName && /*#__PURE__*/React.createElement("span", {
|
|
54
|
+
}, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
|
|
54
55
|
className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
|
|
55
56
|
"data-title": iconTitle,
|
|
56
57
|
"data-id": iconTitle === 'Remove Follower' && 'removeFollower',
|
|
57
58
|
onClick: onIconClick
|
|
58
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
59
|
+
}, iconName && /*#__PURE__*/React.createElement("span", {
|
|
59
60
|
className: style.icon
|
|
60
61
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
61
62
|
name: iconName,
|
|
62
63
|
size: iconSize,
|
|
63
64
|
iconClass: `${iconClass}
|
|
64
65
|
${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
|
|
65
|
-
}))));
|
|
66
|
+
})), getCustomThread && getCustomThread()));
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
}
|
|
@@ -99,7 +100,8 @@ AvatarThread.propTypes = {
|
|
|
99
100
|
AvatarThreadProps: PropTypes.object,
|
|
100
101
|
AvatarProps: PropTypes.object
|
|
101
102
|
}),
|
|
102
|
-
iconClass: PropTypes.string
|
|
103
|
+
iconClass: PropTypes.string,
|
|
104
|
+
getCustomThread: PropTypes.func
|
|
103
105
|
};
|
|
104
106
|
|
|
105
107
|
if (false) {
|
|
@@ -25,7 +25,8 @@ export default class ListLayout extends Component {
|
|
|
25
25
|
a11y,
|
|
26
26
|
isHovered,
|
|
27
27
|
onMouseEnter,
|
|
28
|
-
needPointer
|
|
28
|
+
needPointer,
|
|
29
|
+
isKeyboardActive
|
|
29
30
|
} = this.props;
|
|
30
31
|
let {
|
|
31
32
|
role = 'listitem',
|
|
@@ -34,7 +35,7 @@ export default class ListLayout extends Component {
|
|
|
34
35
|
ariaSetsize
|
|
35
36
|
} = a11y;
|
|
36
37
|
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
-
className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} `,
|
|
38
|
+
className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `,
|
|
38
39
|
onClick: onClick,
|
|
39
40
|
onMouseEnter: onMouseEnter,
|
|
40
41
|
onMouseLeave: onMouseLeave,
|
|
@@ -73,7 +74,8 @@ ListLayout.propTypes = {
|
|
|
73
74
|
}),
|
|
74
75
|
onMouseEnter: PropTypes.func,
|
|
75
76
|
view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
|
|
76
|
-
needPointer: PropTypes.bool
|
|
77
|
+
needPointer: PropTypes.bool,
|
|
78
|
+
isKeyboardActive: PropTypes.bool
|
|
77
79
|
};
|
|
78
80
|
ListLayout.defaultProps = {
|
|
79
81
|
needHover: true,
|
|
@@ -83,7 +85,8 @@ ListLayout.defaultProps = {
|
|
|
83
85
|
a11y: {},
|
|
84
86
|
isHovered: false,
|
|
85
87
|
onMouseEnter: () => {},
|
|
86
|
-
needPointer: true
|
|
88
|
+
needPointer: true,
|
|
89
|
+
isKeyboardActive: false
|
|
87
90
|
};
|
|
88
91
|
export class Column extends Component {
|
|
89
92
|
constructor(props) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
position: relative;
|
|
6
6
|
composes: varClass;
|
|
7
7
|
}
|
|
8
|
-
.listHover:hover, .hoveredStyle
|
|
8
|
+
.listHover:hover, .hoveredStyle{
|
|
9
9
|
background-color: var(--zdt_listLayout_hover_border);
|
|
10
10
|
}
|
|
11
11
|
.active, .active:hover {
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
.cursorPointer{
|
|
15
15
|
cursor: pointer
|
|
16
16
|
}
|
|
17
|
-
|
|
18
17
|
/* View */
|
|
19
18
|
.classic .innerContainer {
|
|
20
19
|
min-height: var(--zd_size70);
|
|
@@ -31,3 +30,31 @@
|
|
|
31
30
|
.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
|
|
32
31
|
border-bottom: 1px dotted var(--listBorder);
|
|
33
32
|
}
|
|
33
|
+
[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
|
|
34
|
+
margin-left: var(--zd_size2);
|
|
35
|
+
}
|
|
36
|
+
[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
|
|
37
|
+
margin-right: var(--zd_size2);
|
|
38
|
+
}
|
|
39
|
+
.keyboardActive {
|
|
40
|
+
position: relative;
|
|
41
|
+
}
|
|
42
|
+
.keyboardActive::after {
|
|
43
|
+
content: '';
|
|
44
|
+
position: absolute;
|
|
45
|
+
z-index: 2;
|
|
46
|
+
height: 100%;
|
|
47
|
+
top:0;
|
|
48
|
+
}
|
|
49
|
+
[dir=ltr] .keyboardActive::after {
|
|
50
|
+
border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
|
|
51
|
+
left: 0;
|
|
52
|
+
border-top-left-radius: var(--zd_size5);
|
|
53
|
+
border-bottom-left-radius: var(--zd_size5);
|
|
54
|
+
}
|
|
55
|
+
[dir=rtl] .keyboardActive::after {
|
|
56
|
+
border-right: var(--zd_size2) solid var(--dot_border_slateGrey);
|
|
57
|
+
right: 0;
|
|
58
|
+
border-top-right-radius: var(--zd_size5);
|
|
59
|
+
border-bottom-right-radius: var(--zd_size5);
|
|
60
|
+
}
|
|
@@ -77,7 +77,8 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
|
|
|
77
77
|
customTextClass = _this$props.customTextClass,
|
|
78
78
|
needTitle = _this$props.needTitle,
|
|
79
79
|
customProps = _this$props.customProps,
|
|
80
|
-
iconClass = _this$props.iconClass
|
|
80
|
+
iconClass = _this$props.iconClass,
|
|
81
|
+
getCustomThread = _this$props.getCustomThread;
|
|
81
82
|
var _customProps$AvatarTh = customProps.AvatarThreadProps,
|
|
82
83
|
AvatarThreadProps = _customProps$AvatarTh === void 0 ? {} : _customProps$AvatarTh,
|
|
83
84
|
_customProps$AvatarPr = customProps.AvatarProps,
|
|
@@ -97,18 +98,18 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
|
|
|
97
98
|
textPalette: textPalette,
|
|
98
99
|
customClass: customTextClass,
|
|
99
100
|
needTitle: needTitle
|
|
100
|
-
}, AvatarProps)), iconName && /*#__PURE__*/_react["default"].createElement("span", {
|
|
101
|
+
}, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/_react["default"].createElement("span", {
|
|
101
102
|
className: "".concat(_AvatarThreadModule["default"].thread, " ").concat(onIconClick ? _AvatarThreadModule["default"].pointer : _AvatarThreadModule["default"].defaultCursor, " ").concat(needBackground ? _AvatarThreadModule["default"].threadBg : '', " ").concat(_AvatarThreadModule["default"]["thread_".concat(size, "_pos")], " ").concat(needBorder ? _AvatarThreadModule["default"]["border_".concat(borderPalette)] : ''),
|
|
102
103
|
"data-title": iconTitle,
|
|
103
104
|
"data-id": iconTitle === 'Remove Follower' && 'removeFollower',
|
|
104
105
|
onClick: onIconClick
|
|
105
|
-
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
106
|
+
}, iconName && /*#__PURE__*/_react["default"].createElement("span", {
|
|
106
107
|
className: _AvatarThreadModule["default"].icon
|
|
107
108
|
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
108
109
|
name: iconName,
|
|
109
110
|
size: iconSize,
|
|
110
111
|
iconClass: "".concat(iconClass, "\n ").concat(_AvatarThreadModule["default"]["text_".concat(iconColor)] ? _AvatarThreadModule["default"]["text_".concat(iconColor)] : iconColor)
|
|
111
|
-
}))));
|
|
112
|
+
})), getCustomThread && getCustomThread()));
|
|
112
113
|
}
|
|
113
114
|
}]);
|
|
114
115
|
|
|
@@ -149,7 +150,8 @@ AvatarThread.propTypes = {
|
|
|
149
150
|
AvatarThreadProps: _propTypes["default"].object,
|
|
150
151
|
AvatarProps: _propTypes["default"].object
|
|
151
152
|
}),
|
|
152
|
-
iconClass: _propTypes["default"].string
|
|
153
|
+
iconClass: _propTypes["default"].string,
|
|
154
|
+
getCustomThread: _propTypes["default"].func
|
|
153
155
|
};
|
|
154
156
|
|
|
155
157
|
if (false) {
|
|
@@ -76,14 +76,15 @@ var ListLayout = /*#__PURE__*/function (_Component) {
|
|
|
76
76
|
a11y = _this$props.a11y,
|
|
77
77
|
isHovered = _this$props.isHovered,
|
|
78
78
|
onMouseEnter = _this$props.onMouseEnter,
|
|
79
|
-
needPointer = _this$props.needPointer
|
|
79
|
+
needPointer = _this$props.needPointer,
|
|
80
|
+
isKeyboardActive = _this$props.isKeyboardActive;
|
|
80
81
|
var _a11y$role = a11y.role,
|
|
81
82
|
role = _a11y$role === void 0 ? 'listitem' : _a11y$role,
|
|
82
83
|
ariaLabel = a11y.ariaLabel,
|
|
83
84
|
ariaPosinset = a11y.ariaPosinset,
|
|
84
85
|
ariaSetsize = a11y.ariaSetsize;
|
|
85
86
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
|
-
className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " "),
|
|
87
|
+
className: "".concat(_ListLayoutModule["default"].container, " ").concat(containerClass, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " ").concat(isKeyboardActive ? _ListLayoutModule["default"].keyboardActive : '', " "),
|
|
87
88
|
onClick: onClick,
|
|
88
89
|
onMouseEnter: onMouseEnter,
|
|
89
90
|
onMouseLeave: onMouseLeave,
|
|
@@ -125,7 +126,7 @@ ListLayout.propTypes = (_ListLayout$propTypes = {
|
|
|
125
126
|
ariaSetsize: _propTypes["default"].number
|
|
126
127
|
}),
|
|
127
128
|
onMouseEnter: _propTypes["default"].func
|
|
128
|
-
}, _defineProperty(_ListLayout$propTypes, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])), _defineProperty(_ListLayout$propTypes, "needPointer", _propTypes["default"].bool), _ListLayout$propTypes);
|
|
129
|
+
}, _defineProperty(_ListLayout$propTypes, "view", _propTypes["default"].oneOf(['classic', 'compact', 'superCompact'])), _defineProperty(_ListLayout$propTypes, "needPointer", _propTypes["default"].bool), _defineProperty(_ListLayout$propTypes, "isKeyboardActive", _propTypes["default"].bool), _ListLayout$propTypes);
|
|
129
130
|
ListLayout.defaultProps = {
|
|
130
131
|
needHover: true,
|
|
131
132
|
view: 'classic',
|
|
@@ -134,7 +135,8 @@ ListLayout.defaultProps = {
|
|
|
134
135
|
a11y: {},
|
|
135
136
|
isHovered: false,
|
|
136
137
|
onMouseEnter: function onMouseEnter() {},
|
|
137
|
-
needPointer: true
|
|
138
|
+
needPointer: true,
|
|
139
|
+
isKeyboardActive: false
|
|
138
140
|
};
|
|
139
141
|
|
|
140
142
|
var Column = /*#__PURE__*/function (_Component2) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
position: relative;
|
|
6
6
|
composes: varClass;
|
|
7
7
|
}
|
|
8
|
-
.listHover:hover, .hoveredStyle
|
|
8
|
+
.listHover:hover, .hoveredStyle{
|
|
9
9
|
background-color: var(--zdt_listLayout_hover_border);
|
|
10
10
|
}
|
|
11
11
|
.active, .active:hover {
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
.cursorPointer{
|
|
15
15
|
cursor: pointer
|
|
16
16
|
}
|
|
17
|
-
|
|
18
17
|
/* View */
|
|
19
18
|
.classic .innerContainer {
|
|
20
19
|
min-height: var(--zd_size70);
|
|
@@ -31,3 +30,31 @@
|
|
|
31
30
|
.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
|
|
32
31
|
border-bottom: 1px dotted var(--listBorder);
|
|
33
32
|
}
|
|
33
|
+
[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
|
|
34
|
+
margin-left: var(--zd_size2);
|
|
35
|
+
}
|
|
36
|
+
[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
|
|
37
|
+
margin-right: var(--zd_size2);
|
|
38
|
+
}
|
|
39
|
+
.keyboardActive {
|
|
40
|
+
position: relative;
|
|
41
|
+
}
|
|
42
|
+
.keyboardActive::after {
|
|
43
|
+
content: '';
|
|
44
|
+
position: absolute;
|
|
45
|
+
z-index: 2;
|
|
46
|
+
height: 100%;
|
|
47
|
+
top:0;
|
|
48
|
+
}
|
|
49
|
+
[dir=ltr] .keyboardActive::after {
|
|
50
|
+
border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
|
|
51
|
+
left: 0;
|
|
52
|
+
border-top-left-radius: var(--zd_size5);
|
|
53
|
+
border-bottom-left-radius: var(--zd_size5);
|
|
54
|
+
}
|
|
55
|
+
[dir=rtl] .keyboardActive::after {
|
|
56
|
+
border-right: var(--zd_size2) solid var(--dot_border_slateGrey);
|
|
57
|
+
right: 0;
|
|
58
|
+
border-top-right-radius: var(--zd_size5);
|
|
59
|
+
border-bottom-right-radius: var(--zd_size5);
|
|
60
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/dot",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.200",
|
|
4
4
|
"main": "lib/index",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"jsnext:main": "es/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"velocity-react": "^1.4.3",
|
|
33
33
|
"@zohodesk/variables": "1.0.0-beta.25",
|
|
34
34
|
"@zohodesk/i18n": "^1.0.0-beta.7",
|
|
35
|
-
"@zohodesk/components": "1.0.0-alpha-
|
|
35
|
+
"@zohodesk/components": "1.0.0-alpha-216",
|
|
36
36
|
"@zohodesk/icons": "1.0.0-beta.85",
|
|
37
37
|
"@zohodesk/svg": "1.0.0-beta.37",
|
|
38
38
|
"@zohodesk/virtualizer": "1.0.3",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"velocity-react": "^1.4.3",
|
|
43
43
|
"@zohodesk/variables": "^1.0.0-beta.25",
|
|
44
44
|
"@zohodesk/i18n": "^1.0.0-beta.7",
|
|
45
|
-
"@zohodesk/components": "1.0.0-alpha-
|
|
45
|
+
"@zohodesk/components": "1.0.0-alpha-216",
|
|
46
46
|
"@zohodesk/icons": "^1.0.0-beta.85",
|
|
47
47
|
"@zohodesk/svg": "^1.0.0-beta.37"
|
|
48
48
|
},
|
|
@@ -28,7 +28,8 @@ export default class AvatarThread extends React.Component {
|
|
|
28
28
|
customTextClass,
|
|
29
29
|
needTitle,
|
|
30
30
|
customProps,
|
|
31
|
-
iconClass
|
|
31
|
+
iconClass,
|
|
32
|
+
getCustomThread
|
|
32
33
|
} = this.props;
|
|
33
34
|
let { AvatarThreadProps = {}, AvatarProps = {} } = customProps;
|
|
34
35
|
let hoverEffect = showOnHover ? style.hover : '';
|
|
@@ -53,7 +54,7 @@ export default class AvatarThread extends React.Component {
|
|
|
53
54
|
needTitle={needTitle}
|
|
54
55
|
{...AvatarProps}
|
|
55
56
|
/>
|
|
56
|
-
{iconName && (
|
|
57
|
+
{(iconName || getCustomThread) && (
|
|
57
58
|
<span
|
|
58
59
|
className={`${style.thread} ${
|
|
59
60
|
onIconClick ? style.pointer : style.defaultCursor
|
|
@@ -64,6 +65,7 @@ export default class AvatarThread extends React.Component {
|
|
|
64
65
|
data-id={iconTitle === 'Remove Follower' && 'removeFollower'}
|
|
65
66
|
onClick={onIconClick}
|
|
66
67
|
>
|
|
68
|
+
{iconName &&
|
|
67
69
|
<span className={style.icon}>
|
|
68
70
|
<Icon
|
|
69
71
|
name={iconName}
|
|
@@ -75,6 +77,8 @@ export default class AvatarThread extends React.Component {
|
|
|
75
77
|
}
|
|
76
78
|
/>
|
|
77
79
|
</span>
|
|
80
|
+
}
|
|
81
|
+
{getCustomThread && getCustomThread()}
|
|
78
82
|
</span>
|
|
79
83
|
)}
|
|
80
84
|
</div>
|
|
@@ -121,7 +125,8 @@ AvatarThread.propTypes = {
|
|
|
121
125
|
AvatarThreadProps: PropTypes.object,
|
|
122
126
|
AvatarProps: PropTypes.object
|
|
123
127
|
}),
|
|
124
|
-
iconClass: PropTypes.string
|
|
128
|
+
iconClass: PropTypes.string,
|
|
129
|
+
getCustomThread: PropTypes.func
|
|
125
130
|
};
|
|
126
131
|
|
|
127
132
|
if (__DOCS__) {
|
|
@@ -23,7 +23,8 @@ export default class ListLayout extends Component {
|
|
|
23
23
|
a11y,
|
|
24
24
|
isHovered,
|
|
25
25
|
onMouseEnter,
|
|
26
|
-
needPointer
|
|
26
|
+
needPointer,
|
|
27
|
+
isKeyboardActive
|
|
27
28
|
} = this.props;
|
|
28
29
|
|
|
29
30
|
let { role = 'listitem', ariaLabel, ariaPosinset, ariaSetsize } = a11y;
|
|
@@ -33,7 +34,7 @@ export default class ListLayout extends Component {
|
|
|
33
34
|
needHover ? style.listHover : ''
|
|
34
35
|
} ${isActive ? style.active : ''} ${style[view]} ${
|
|
35
36
|
onClick && needPointer ? style.cursorPointer : ''
|
|
36
|
-
} ${isHovered ? style.hoveredStyle : ''} `}
|
|
37
|
+
} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `}
|
|
37
38
|
onClick={onClick}
|
|
38
39
|
onMouseEnter={onMouseEnter}
|
|
39
40
|
onMouseLeave={onMouseLeave}
|
|
@@ -76,7 +77,8 @@ ListLayout.propTypes = {
|
|
|
76
77
|
}),
|
|
77
78
|
onMouseEnter: PropTypes.func,
|
|
78
79
|
view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
|
|
79
|
-
needPointer: PropTypes.bool
|
|
80
|
+
needPointer: PropTypes.bool,
|
|
81
|
+
isKeyboardActive: PropTypes.bool
|
|
80
82
|
};
|
|
81
83
|
ListLayout.defaultProps = {
|
|
82
84
|
needHover: true,
|
|
@@ -86,7 +88,8 @@ ListLayout.defaultProps = {
|
|
|
86
88
|
a11y: {},
|
|
87
89
|
isHovered: false,
|
|
88
90
|
onMouseEnter: () => {},
|
|
89
|
-
needPointer: true
|
|
91
|
+
needPointer: true,
|
|
92
|
+
isKeyboardActive: false
|
|
90
93
|
};
|
|
91
94
|
export class Column extends Component {
|
|
92
95
|
constructor(props) {
|
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
position: relative;
|
|
6
6
|
composes: varClass;
|
|
7
7
|
}
|
|
8
|
-
.listHover:hover,
|
|
9
|
-
.hoveredStyle {
|
|
8
|
+
.listHover:hover, .hoveredStyle{
|
|
10
9
|
background-color: var(--zdt_listLayout_hover_border);
|
|
11
10
|
}
|
|
12
11
|
.active,
|
|
@@ -16,7 +15,6 @@
|
|
|
16
15
|
.cursorPointer{
|
|
17
16
|
cursor: pointer
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
/* View */
|
|
21
19
|
.classic .innerContainer {
|
|
22
20
|
padding: var(--zd_size13) 0;
|
|
@@ -35,3 +33,22 @@
|
|
|
35
33
|
.superCompact .innerContainer {
|
|
36
34
|
border-bottom: 1px dotted var(--listBorder);
|
|
37
35
|
}
|
|
36
|
+
.compact,
|
|
37
|
+
.classic,
|
|
38
|
+
.superCompact {
|
|
39
|
+
margin-left: var(--zd_size2);
|
|
40
|
+
}
|
|
41
|
+
.keyboardActive {
|
|
42
|
+
position: relative;
|
|
43
|
+
}
|
|
44
|
+
.keyboardActive::after {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
z-index: 2;
|
|
48
|
+
height: 100%;
|
|
49
|
+
border-left: var(--zd_size2) solid var(--dot_border_slateGrey);
|
|
50
|
+
left: 0;
|
|
51
|
+
top:0;
|
|
52
|
+
border-top-left-radius: var(--zd_size5);
|
|
53
|
+
border-bottom-left-radius: var(--zd_size5);
|
|
54
|
+
}
|