@get-set/gs-sortable 0.0.14 → 0.0.15
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.
|
@@ -14,6 +14,8 @@ import './styles/GSSortable.css';
|
|
|
14
14
|
const params = {
|
|
15
15
|
reference: PropTypes.string,
|
|
16
16
|
handler: PropTypes.string,
|
|
17
|
+
className: PropTypes.string,
|
|
18
|
+
gsx: PropTypes.object,
|
|
17
19
|
gap: PropTypes.string,
|
|
18
20
|
allowOutOfBox: PropTypes.bool,
|
|
19
21
|
count: PropTypes.number,
|
|
@@ -26,6 +28,8 @@ const params = {
|
|
|
26
28
|
* @component
|
|
27
29
|
* @param {Object} props - The props object.
|
|
28
30
|
* @param {string} props.reference - Unique key for each sortable.
|
|
31
|
+
* @param {boolean} props.className - Enable add classes.
|
|
32
|
+
* @param {React.CSSProperties & Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties>>>} props.gsx
|
|
29
33
|
* @param {string} props.gap - Allows set gap among elements.
|
|
30
34
|
* @param {string} props.handler - selector of target element to move.
|
|
31
35
|
* @param {number} props.count - Shows items count per row.
|
|
@@ -115,7 +119,6 @@ const GSSortable = ({ children, ...rest }) => {
|
|
|
115
119
|
}, []);
|
|
116
120
|
|
|
117
121
|
useEffect(() => {
|
|
118
|
-
console.log('children change');
|
|
119
122
|
if (componentKey != null) {
|
|
120
123
|
const ref = window.GSSortableConfigue.instance(componentKey);
|
|
121
124
|
if (ref !== undefined) {
|
|
@@ -126,7 +129,7 @@ const GSSortable = ({ children, ...rest }) => {
|
|
|
126
129
|
|
|
127
130
|
return (
|
|
128
131
|
<div
|
|
129
|
-
className={`gs-sortable-instance gs-sortable-${params.type}`}
|
|
132
|
+
className={`gs-sortable-instance gs-sortable-${params.type} ${rest.className}`}
|
|
130
133
|
ref={gridRef}
|
|
131
134
|
{...Object.fromEntries(
|
|
132
135
|
Object.entries({ ...rest }).filter(([key]) => !(key in defaultParams)),
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
.gs-sortable-instance {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
-webkit-user-select: none !important;
|
|
4
|
-
-moz-user-select: none !important;
|
|
5
|
-
user-select: none !important;
|
|
6
|
-
transition: 0.4s;
|
|
7
|
-
z-index: 1;
|
|
8
|
-
}
|
|
9
|
-
.gs-sortable-instance.gs-sortable-active {
|
|
10
|
-
z-index: 2;
|
|
11
|
-
}
|
|
12
|
-
.gs-sortable-instance * {
|
|
13
|
-
-webkit-user-select: none !important;
|
|
14
|
-
-moz-user-select: none !important;
|
|
15
|
-
user-select: none !important;
|
|
16
|
-
}
|
|
17
|
-
.gs-sortable-instance .gs-sortable-placeholder {
|
|
18
|
-
position: absolute;
|
|
19
|
-
background-color: #f1f1f1;
|
|
20
|
-
border: 1px solid;
|
|
21
|
-
z-index: 1;
|
|
22
|
-
}
|
|
23
|
-
.gs-sortable-instance .gs-sortable-item {
|
|
24
|
-
z-index: 2;
|
|
25
|
-
}
|
|
26
|
-
.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
|
|
27
|
-
z-index: 3;
|
|
28
|
-
}
|
|
29
|
-
.gs-sortable-instance .gs-sortable-item-inmove {
|
|
30
|
-
transition: none !important;
|
|
31
|
-
z-index: 99999;
|
|
32
|
-
}
|
|
33
|
-
.gs-sortable-instance .gs-sortable-item-addjusting {
|
|
34
|
-
z-index: 99999;
|
|
35
|
-
}
|
|
36
|
-
.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
|
|
37
|
-
width: -moz-max-content;
|
|
38
|
-
width: max-content;
|
|
1
|
+
.gs-sortable-instance {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
-webkit-user-select: none !important;
|
|
4
|
+
-moz-user-select: none !important;
|
|
5
|
+
user-select: none !important;
|
|
6
|
+
transition: 0.4s;
|
|
7
|
+
z-index: 1;
|
|
8
|
+
}
|
|
9
|
+
.gs-sortable-instance.gs-sortable-active {
|
|
10
|
+
z-index: 2;
|
|
11
|
+
}
|
|
12
|
+
.gs-sortable-instance * {
|
|
13
|
+
-webkit-user-select: none !important;
|
|
14
|
+
-moz-user-select: none !important;
|
|
15
|
+
user-select: none !important;
|
|
16
|
+
}
|
|
17
|
+
.gs-sortable-instance .gs-sortable-placeholder {
|
|
18
|
+
position: absolute;
|
|
19
|
+
background-color: #f1f1f1;
|
|
20
|
+
border: 1px solid;
|
|
21
|
+
z-index: 1;
|
|
22
|
+
}
|
|
23
|
+
.gs-sortable-instance .gs-sortable-item {
|
|
24
|
+
z-index: 2;
|
|
25
|
+
}
|
|
26
|
+
.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
|
|
27
|
+
z-index: 3;
|
|
28
|
+
}
|
|
29
|
+
.gs-sortable-instance .gs-sortable-item-inmove {
|
|
30
|
+
transition: none !important;
|
|
31
|
+
z-index: 99999;
|
|
32
|
+
}
|
|
33
|
+
.gs-sortable-instance .gs-sortable-item-addjusting {
|
|
34
|
+
z-index: 99999;
|
|
35
|
+
}
|
|
36
|
+
.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
|
|
37
|
+
width: -moz-max-content;
|
|
38
|
+
width: max-content;
|
|
39
39
|
}/*# sourceMappingURL=GSSortable.css.map */
|