@get-set/gs-sortable 0.0.15 → 0.0.17
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.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import NewGuid from '../helpers/uihelpers';
|
|
3
2
|
import getCurrentParams from '../actions/getCurrentParams';
|
|
4
3
|
import init from '../actions/init';
|
|
5
4
|
import destroy from '../actions/destroy';
|
|
@@ -10,6 +9,12 @@ import initSortEnd from '../actions/initSortEnd';
|
|
|
10
9
|
import initScroll from '../actions/initScroll';
|
|
11
10
|
import types from '../constants/types';
|
|
12
11
|
import './styles/GSSortable.css';
|
|
12
|
+
import {
|
|
13
|
+
NewGuid,
|
|
14
|
+
convertScssToCss,
|
|
15
|
+
injectCssToHead,
|
|
16
|
+
removeCssToHead,
|
|
17
|
+
} from '../helpers/uihelpers';
|
|
13
18
|
|
|
14
19
|
const params = {
|
|
15
20
|
reference: PropTypes.string,
|
|
@@ -99,6 +104,15 @@ const GSSortable = ({ children, ...rest }) => {
|
|
|
99
104
|
const currentRef = window.GSSortableConfigue.references.find(
|
|
100
105
|
x => x.key === componentKey,
|
|
101
106
|
).ref;
|
|
107
|
+
|
|
108
|
+
if (params.gsx != undefined) {
|
|
109
|
+
const scss = {};
|
|
110
|
+
scss[`[data-key='${componentKey}']`] = {
|
|
111
|
+
...params.gsx,
|
|
112
|
+
};
|
|
113
|
+
const style = convertScssToCss(scss);
|
|
114
|
+
injectCssToHead(style, componentKey);
|
|
115
|
+
}
|
|
102
116
|
init(currentRef);
|
|
103
117
|
}
|
|
104
118
|
return () => {
|
|
@@ -108,6 +122,7 @@ const GSSortable = ({ children, ...rest }) => {
|
|
|
108
122
|
x => x.key !== componentKey,
|
|
109
123
|
);
|
|
110
124
|
}
|
|
125
|
+
removeCssToHead(componentKey);
|
|
111
126
|
};
|
|
112
127
|
}
|
|
113
128
|
}, [componentKey]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const NewGuid = () => {
|
|
1
|
+
export const NewGuid = () => {
|
|
2
2
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
3
3
|
const r = (Math.random() * 16) | 0,
|
|
4
4
|
v = c == 'x' ? r : (r & 0x3) | 0x8;
|
|
@@ -6,4 +6,47 @@ const NewGuid = () => {
|
|
|
6
6
|
});
|
|
7
7
|
};
|
|
8
8
|
|
|
9
|
-
export
|
|
9
|
+
export const removeCssToHead = key => {
|
|
10
|
+
const style = document.querySelector(`head style[data-key='${key}']`);
|
|
11
|
+
if (style != null) {
|
|
12
|
+
style.remove();
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
export const injectCssToHead = (css, key) => {
|
|
16
|
+
// Create a <style> element
|
|
17
|
+
const style = document.createElement('style');
|
|
18
|
+
style.dataset.key = key;
|
|
19
|
+
// Set the CSS as the inner content of the <style> element
|
|
20
|
+
style.innerHTML = css;
|
|
21
|
+
// Append the <style> element to the <head>
|
|
22
|
+
document.head.appendChild(style);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const camelToKebab = str =>
|
|
26
|
+
str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
27
|
+
|
|
28
|
+
export const convertScssToCss = scssObj => {
|
|
29
|
+
// Helper function to handle nested objects
|
|
30
|
+
const convertObjectToCss = (obj, parent = '') => {
|
|
31
|
+
let css = '';
|
|
32
|
+
|
|
33
|
+
// Iterate over each key-value pair in the SCSS object
|
|
34
|
+
for (let key in obj) {
|
|
35
|
+
const value = obj[key];
|
|
36
|
+
|
|
37
|
+
if (typeof value === 'object') {
|
|
38
|
+
// If the value is an object, it's a nested rule, so we recurse
|
|
39
|
+
const newParent = parent ? `${parent} ${key}` : key;
|
|
40
|
+
css += convertObjectToCss(value, newParent); // Recurse and concatenate
|
|
41
|
+
} else {
|
|
42
|
+
// Otherwise, it's a property-value pair (e.g. color: red)
|
|
43
|
+
css += `${parent} { ${camelToKebab(key)}: ${value}; }\n`;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return css;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// Start recursion with the top-level object
|
|
51
|
+
return convertObjectToCss(scssObj, '');
|
|
52
|
+
};
|