ywana-core8 0.2.10 → 0.2.13
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/dist/index.css +5 -1
- package/dist/index.js +258 -198
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +258 -198
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +258 -198
- package/dist/index.umd.js.map +1 -1
- package/package.json +6 -7
- package/src/desktop/window.css +5 -1
- package/src/desktop/window.js +3 -1
- package/src/html/switch.example.js +1 -1
- package/src/html/switch-debug.js +0 -197
- package/src/html/switch-test-visual.js +0 -294
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ywana-core8",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.13",
|
|
4
4
|
"description": "ywana-core8",
|
|
5
5
|
"homepage": "https://ywana.github.io/workspace",
|
|
6
6
|
"author": "Ernesto Roldan Garcia",
|
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
"svgo": "^3.0.0",
|
|
33
33
|
"webpack-dev-server": "^4.15.1"
|
|
34
34
|
},
|
|
35
|
+
"overrides": {
|
|
36
|
+
"react": "^19.1.1",
|
|
37
|
+
"react-dom": "^19.1.1"
|
|
38
|
+
},
|
|
35
39
|
"peerDependencies": {
|
|
36
40
|
"react": "^19.1.1",
|
|
37
41
|
"react-dom": "^19.1.1"
|
|
@@ -45,21 +49,16 @@
|
|
|
45
49
|
"jsdom": "^26.1.0",
|
|
46
50
|
"react": "^19.1.1",
|
|
47
51
|
"react-dom": "^19.1.1",
|
|
48
|
-
"vite": "^7.1.
|
|
52
|
+
"vite": "^7.1.5"
|
|
49
53
|
},
|
|
50
54
|
"dependencies": {
|
|
51
55
|
"axios": "^1.3.4",
|
|
52
|
-
"crypto-js": "^4.1.1",
|
|
53
56
|
"deep-equal": "^2.0.5",
|
|
54
57
|
"material-design-icons-iconfont": "^6.7.0",
|
|
55
58
|
"moment": "^2.29.1",
|
|
56
59
|
"moment-range": "^4.0.2",
|
|
57
|
-
"react-datepicker": "^4.6.0",
|
|
58
60
|
"react-error-overlay": "^6.0.10",
|
|
59
|
-
"react-image-pan-zoom-rotate": "^1.6.0",
|
|
60
61
|
"react-notifications-component": "^4.0.1",
|
|
61
|
-
"react-switch": "^6.0.0",
|
|
62
|
-
"react-syntax-highlighter": "^15.6.6",
|
|
63
62
|
"resumablejs": "^1.1.0"
|
|
64
63
|
}
|
|
65
64
|
}
|
package/src/desktop/window.css
CHANGED
|
@@ -24,6 +24,11 @@
|
|
|
24
24
|
box-shadow: none;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
.window--minimized {
|
|
28
|
+
visibility: hidden;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
27
32
|
.window--dragging {
|
|
28
33
|
pointer-events: none;
|
|
29
34
|
}
|
|
@@ -143,7 +148,6 @@
|
|
|
143
148
|
/* Content */
|
|
144
149
|
.window__content {
|
|
145
150
|
flex: 1;
|
|
146
|
-
overflow: auto;
|
|
147
151
|
background: white;
|
|
148
152
|
}
|
|
149
153
|
|
package/src/desktop/window.js
CHANGED
|
@@ -301,12 +301,14 @@ export const Window = ({
|
|
|
301
301
|
width: maximized ? 'calc(100% - 0px)' : size.width,
|
|
302
302
|
height: maximized ? 'calc(100% - 50px)' : size.height, // Leave space for taskbar
|
|
303
303
|
zIndex: zIndex,
|
|
304
|
-
display
|
|
304
|
+
// Removed display property - let CSS handle it
|
|
305
|
+
...(minimized && { visibility: 'hidden' }) // Use visibility instead of display
|
|
305
306
|
}
|
|
306
307
|
|
|
307
308
|
const windowClasses = [
|
|
308
309
|
'window',
|
|
309
310
|
maximized && 'window--maximized',
|
|
311
|
+
minimized && 'window--minimized',
|
|
310
312
|
isDragging && 'window--dragging',
|
|
311
313
|
isResizing && 'window--resizing',
|
|
312
314
|
className
|
package/src/html/switch-debug.js
DELETED
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import RSwitch from 'react-switch'
|
|
3
|
-
import { Switch, Switch2 } from './switch'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Componente de debug para verificar que los switches se ven correctamente
|
|
7
|
-
*/
|
|
8
|
-
export const SwitchDebug = () => {
|
|
9
|
-
const [checked, setChecked] = useState(false)
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<div style={{ padding: '2rem', maxWidth: '600px' }}>
|
|
13
|
-
<h1>🔍 Debug de Switches</h1>
|
|
14
|
-
|
|
15
|
-
{/* React Switch directo */}
|
|
16
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
17
|
-
<h3>React Switch Directo (sin wrapper)</h3>
|
|
18
|
-
<div style={{
|
|
19
|
-
background: '#fff',
|
|
20
|
-
padding: '1.5rem',
|
|
21
|
-
borderRadius: '8px',
|
|
22
|
-
border: '1px solid #ddd'
|
|
23
|
-
}}>
|
|
24
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
|
|
25
|
-
<span>Estado: {checked ? 'ON' : 'OFF'}</span>
|
|
26
|
-
<RSwitch
|
|
27
|
-
checked={checked}
|
|
28
|
-
onChange={setChecked}
|
|
29
|
-
onColor="#2693e6"
|
|
30
|
-
offColor="#ccc"
|
|
31
|
-
onHandleColor="#ffffff"
|
|
32
|
-
offHandleColor="#ffffff"
|
|
33
|
-
handleDiameter={18}
|
|
34
|
-
uncheckedIcon={false}
|
|
35
|
-
checkedIcon={false}
|
|
36
|
-
boxShadow="0px 2px 4px rgba(0, 0, 0, 0.2)"
|
|
37
|
-
activeBoxShadow="0px 0px 0px 3px rgba(38, 147, 230, 0.2)"
|
|
38
|
-
height={20}
|
|
39
|
-
width={48}
|
|
40
|
-
/>
|
|
41
|
-
</div>
|
|
42
|
-
<p style={{ fontSize: '0.9rem', color: '#666' }}>
|
|
43
|
-
Este es react-switch sin ningún wrapper. Si no se ve bien, el problema es con la librería o CSS global.
|
|
44
|
-
</p>
|
|
45
|
-
</div>
|
|
46
|
-
</section>
|
|
47
|
-
|
|
48
|
-
{/* Nuestro Switch wrapper */}
|
|
49
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
50
|
-
<h3>Nuestro Switch (wrapper)</h3>
|
|
51
|
-
<div style={{
|
|
52
|
-
background: '#fff',
|
|
53
|
-
padding: '1.5rem',
|
|
54
|
-
borderRadius: '8px',
|
|
55
|
-
border: '1px solid #ddd'
|
|
56
|
-
}}>
|
|
57
|
-
<Switch
|
|
58
|
-
id="debug-switch"
|
|
59
|
-
label="Switch con wrapper"
|
|
60
|
-
checked={checked}
|
|
61
|
-
onChange={(id, value) => setChecked(value)}
|
|
62
|
-
/>
|
|
63
|
-
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
|
|
64
|
-
Este usa nuestro wrapper. Debería verse igual que el de arriba.
|
|
65
|
-
</p>
|
|
66
|
-
</div>
|
|
67
|
-
</section>
|
|
68
|
-
|
|
69
|
-
{/* Switch2 para comparación */}
|
|
70
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
71
|
-
<h3>Switch2 (Material Icons)</h3>
|
|
72
|
-
<div style={{
|
|
73
|
-
background: '#fff',
|
|
74
|
-
padding: '1.5rem',
|
|
75
|
-
borderRadius: '8px',
|
|
76
|
-
border: '1px solid #ddd'
|
|
77
|
-
}}>
|
|
78
|
-
<Switch2
|
|
79
|
-
id="debug-switch2"
|
|
80
|
-
label="Switch2 con iconos"
|
|
81
|
-
checked={checked}
|
|
82
|
-
onChange={(id, value) => setChecked(value)}
|
|
83
|
-
/>
|
|
84
|
-
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '1rem' }}>
|
|
85
|
-
Este usa iconos Material. Debería mostrar toggle_on/toggle_off.
|
|
86
|
-
</p>
|
|
87
|
-
</div>
|
|
88
|
-
</section>
|
|
89
|
-
|
|
90
|
-
{/* Diferentes estados */}
|
|
91
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
92
|
-
<h3>Diferentes Estados</h3>
|
|
93
|
-
<div style={{
|
|
94
|
-
background: '#fff',
|
|
95
|
-
padding: '1.5rem',
|
|
96
|
-
borderRadius: '8px',
|
|
97
|
-
border: '1px solid #ddd'
|
|
98
|
-
}}>
|
|
99
|
-
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }}>
|
|
100
|
-
<div>
|
|
101
|
-
<h4>Normal OFF</h4>
|
|
102
|
-
<RSwitch
|
|
103
|
-
checked={false}
|
|
104
|
-
onChange={() => {}}
|
|
105
|
-
onColor="#2693e6"
|
|
106
|
-
offColor="#ccc"
|
|
107
|
-
height={20}
|
|
108
|
-
width={48}
|
|
109
|
-
handleDiameter={18}
|
|
110
|
-
uncheckedIcon={false}
|
|
111
|
-
checkedIcon={false}
|
|
112
|
-
/>
|
|
113
|
-
</div>
|
|
114
|
-
<div>
|
|
115
|
-
<h4>Normal ON</h4>
|
|
116
|
-
<RSwitch
|
|
117
|
-
checked={true}
|
|
118
|
-
onChange={() => {}}
|
|
119
|
-
onColor="#2693e6"
|
|
120
|
-
offColor="#ccc"
|
|
121
|
-
height={20}
|
|
122
|
-
width={48}
|
|
123
|
-
handleDiameter={18}
|
|
124
|
-
uncheckedIcon={false}
|
|
125
|
-
checkedIcon={false}
|
|
126
|
-
/>
|
|
127
|
-
</div>
|
|
128
|
-
<div>
|
|
129
|
-
<h4>Disabled OFF</h4>
|
|
130
|
-
<RSwitch
|
|
131
|
-
checked={false}
|
|
132
|
-
onChange={() => {}}
|
|
133
|
-
disabled={true}
|
|
134
|
-
onColor="#2693e6"
|
|
135
|
-
offColor="#ccc"
|
|
136
|
-
height={20}
|
|
137
|
-
width={48}
|
|
138
|
-
handleDiameter={18}
|
|
139
|
-
uncheckedIcon={false}
|
|
140
|
-
checkedIcon={false}
|
|
141
|
-
/>
|
|
142
|
-
</div>
|
|
143
|
-
<div>
|
|
144
|
-
<h4>Disabled ON</h4>
|
|
145
|
-
<RSwitch
|
|
146
|
-
checked={true}
|
|
147
|
-
onChange={() => {}}
|
|
148
|
-
disabled={true}
|
|
149
|
-
onColor="#2693e6"
|
|
150
|
-
offColor="#ccc"
|
|
151
|
-
height={20}
|
|
152
|
-
width={48}
|
|
153
|
-
handleDiameter={18}
|
|
154
|
-
uncheckedIcon={false}
|
|
155
|
-
checkedIcon={false}
|
|
156
|
-
/>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
</section>
|
|
161
|
-
|
|
162
|
-
{/* Información de debug */}
|
|
163
|
-
<section>
|
|
164
|
-
<h3>Información de Debug</h3>
|
|
165
|
-
<div style={{
|
|
166
|
-
background: '#f8f9fa',
|
|
167
|
-
padding: '1rem',
|
|
168
|
-
borderRadius: '4px',
|
|
169
|
-
border: '1px solid #dee2e6'
|
|
170
|
-
}}>
|
|
171
|
-
<h4>¿Qué deberías ver?</h4>
|
|
172
|
-
<ul>
|
|
173
|
-
<li><strong>Switch OFF:</strong> Fondo gris (#ccc), handle blanco a la izquierda</li>
|
|
174
|
-
<li><strong>Switch ON:</strong> Fondo azul (#2693e6), handle blanco a la derecha</li>
|
|
175
|
-
<li><strong>Handle:</strong> Círculo blanco con sombra sutil</li>
|
|
176
|
-
<li><strong>Transición:</strong> Animación suave al cambiar estado</li>
|
|
177
|
-
</ul>
|
|
178
|
-
|
|
179
|
-
<h4>Si solo ves un círculo gris:</h4>
|
|
180
|
-
<ul>
|
|
181
|
-
<li>Verifica que react-switch esté instalado: <code>npm list react-switch</code></li>
|
|
182
|
-
<li>Revisa la consola del navegador por errores</li>
|
|
183
|
-
<li>Verifica que no hay CSS conflictivo</li>
|
|
184
|
-
<li>Asegúrate de que las props de color se están aplicando</li>
|
|
185
|
-
</ul>
|
|
186
|
-
|
|
187
|
-
<h4>Estado actual:</h4>
|
|
188
|
-
<pre style={{ background: '#fff', padding: '0.5rem', borderRadius: '4px' }}>
|
|
189
|
-
{JSON.stringify({ checked }, null, 2)}
|
|
190
|
-
</pre>
|
|
191
|
-
</div>
|
|
192
|
-
</section>
|
|
193
|
-
</div>
|
|
194
|
-
)
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
export default SwitchDebug
|
|
@@ -1,294 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import RSwitch from 'react-switch'
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Componente de prueba visual para diagnosticar problemas con react-switch
|
|
6
|
-
*/
|
|
7
|
-
export const SwitchTestVisual = () => {
|
|
8
|
-
const [checked, setChecked] = useState(false)
|
|
9
|
-
|
|
10
|
-
return (
|
|
11
|
-
<div style={{
|
|
12
|
-
padding: '2rem',
|
|
13
|
-
maxWidth: '800px',
|
|
14
|
-
fontFamily: 'Arial, sans-serif'
|
|
15
|
-
}}>
|
|
16
|
-
<h1>🔧 Diagnóstico Visual de Switch</h1>
|
|
17
|
-
|
|
18
|
-
<div style={{
|
|
19
|
-
background: '#fff3cd',
|
|
20
|
-
padding: '1rem',
|
|
21
|
-
borderRadius: '8px',
|
|
22
|
-
border: '1px solid #ffeaa7',
|
|
23
|
-
marginBottom: '2rem'
|
|
24
|
-
}}>
|
|
25
|
-
<h3>🎯 Objetivo</h3>
|
|
26
|
-
<p>Este componente usa react-switch directamente con configuraciones optimizadas para verificar que se vea correctamente.</p>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
{/* Prueba básica */}
|
|
30
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
31
|
-
<h3>Prueba Básica</h3>
|
|
32
|
-
<div style={{
|
|
33
|
-
background: '#ffffff',
|
|
34
|
-
padding: '2rem',
|
|
35
|
-
borderRadius: '8px',
|
|
36
|
-
border: '2px solid #007bff',
|
|
37
|
-
display: 'flex',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
gap: '1rem'
|
|
40
|
-
}}>
|
|
41
|
-
<span style={{ fontSize: '1.1rem', fontWeight: 'bold' }}>
|
|
42
|
-
Estado: {checked ? '🟢 ON' : '🔴 OFF'}
|
|
43
|
-
</span>
|
|
44
|
-
<RSwitch
|
|
45
|
-
checked={checked}
|
|
46
|
-
onChange={setChecked}
|
|
47
|
-
onColor="#007bff"
|
|
48
|
-
offColor="#6c757d"
|
|
49
|
-
onHandleColor="#ffffff"
|
|
50
|
-
offHandleColor="#ffffff"
|
|
51
|
-
handleDiameter={20}
|
|
52
|
-
uncheckedIcon={false}
|
|
53
|
-
checkedIcon={false}
|
|
54
|
-
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
|
|
55
|
-
activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
|
|
56
|
-
height={24}
|
|
57
|
-
width={52}
|
|
58
|
-
/>
|
|
59
|
-
<button
|
|
60
|
-
onClick={() => setChecked(!checked)}
|
|
61
|
-
style={{
|
|
62
|
-
padding: '0.5rem 1rem',
|
|
63
|
-
backgroundColor: '#28a745',
|
|
64
|
-
color: 'white',
|
|
65
|
-
border: 'none',
|
|
66
|
-
borderRadius: '4px',
|
|
67
|
-
cursor: 'pointer'
|
|
68
|
-
}}
|
|
69
|
-
>
|
|
70
|
-
Toggle
|
|
71
|
-
</button>
|
|
72
|
-
</div>
|
|
73
|
-
</section>
|
|
74
|
-
|
|
75
|
-
{/* Diferentes configuraciones */}
|
|
76
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
77
|
-
<h3>Diferentes Configuraciones</h3>
|
|
78
|
-
<div style={{
|
|
79
|
-
background: '#ffffff',
|
|
80
|
-
padding: '1.5rem',
|
|
81
|
-
borderRadius: '8px',
|
|
82
|
-
border: '1px solid #dee2e6'
|
|
83
|
-
}}>
|
|
84
|
-
<div style={{
|
|
85
|
-
display: 'grid',
|
|
86
|
-
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
|
87
|
-
gap: '1.5rem'
|
|
88
|
-
}}>
|
|
89
|
-
{/* Switch 1: Configuración original */}
|
|
90
|
-
<div style={{ textAlign: 'center' }}>
|
|
91
|
-
<h4>Configuración Original</h4>
|
|
92
|
-
<RSwitch
|
|
93
|
-
checked={true}
|
|
94
|
-
onChange={() => {}}
|
|
95
|
-
onColor="#86d3ff"
|
|
96
|
-
onHandleColor="#2693e6"
|
|
97
|
-
handleDiameter={30}
|
|
98
|
-
uncheckedIcon={false}
|
|
99
|
-
checkedIcon={false}
|
|
100
|
-
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
|
|
101
|
-
activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
|
|
102
|
-
height={20}
|
|
103
|
-
width={48}
|
|
104
|
-
/>
|
|
105
|
-
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
|
|
106
|
-
onColor: #86d3ff<br/>
|
|
107
|
-
handleColor: #2693e6
|
|
108
|
-
</p>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
{/* Switch 2: Configuración mejorada */}
|
|
112
|
-
<div style={{ textAlign: 'center' }}>
|
|
113
|
-
<h4>Configuración Mejorada</h4>
|
|
114
|
-
<RSwitch
|
|
115
|
-
checked={true}
|
|
116
|
-
onChange={() => {}}
|
|
117
|
-
onColor="#007bff"
|
|
118
|
-
offColor="#6c757d"
|
|
119
|
-
onHandleColor="#ffffff"
|
|
120
|
-
offHandleColor="#ffffff"
|
|
121
|
-
handleDiameter={20}
|
|
122
|
-
uncheckedIcon={false}
|
|
123
|
-
checkedIcon={false}
|
|
124
|
-
boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
|
|
125
|
-
activeBoxShadow="0px 0px 0px 2px rgba(0, 123, 255, 0.25)"
|
|
126
|
-
height={24}
|
|
127
|
-
width={52}
|
|
128
|
-
/>
|
|
129
|
-
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
|
|
130
|
-
onColor: #007bff<br/>
|
|
131
|
-
handleColor: #ffffff
|
|
132
|
-
</p>
|
|
133
|
-
</div>
|
|
134
|
-
|
|
135
|
-
{/* Switch 3: Configuración simple */}
|
|
136
|
-
<div style={{ textAlign: 'center' }}>
|
|
137
|
-
<h4>Configuración Simple</h4>
|
|
138
|
-
<RSwitch
|
|
139
|
-
checked={true}
|
|
140
|
-
onChange={() => {}}
|
|
141
|
-
onColor="#28a745"
|
|
142
|
-
offColor="#dc3545"
|
|
143
|
-
height={20}
|
|
144
|
-
width={40}
|
|
145
|
-
/>
|
|
146
|
-
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '0.5rem' }}>
|
|
147
|
-
Configuración mínima<br/>
|
|
148
|
-
Verde/Rojo
|
|
149
|
-
</p>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</section>
|
|
154
|
-
|
|
155
|
-
{/* Estados ON/OFF */}
|
|
156
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
157
|
-
<h3>Estados ON/OFF</h3>
|
|
158
|
-
<div style={{
|
|
159
|
-
background: '#ffffff',
|
|
160
|
-
padding: '1.5rem',
|
|
161
|
-
borderRadius: '8px',
|
|
162
|
-
border: '1px solid #dee2e6'
|
|
163
|
-
}}>
|
|
164
|
-
<div style={{
|
|
165
|
-
display: 'grid',
|
|
166
|
-
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
|
167
|
-
gap: '1rem'
|
|
168
|
-
}}>
|
|
169
|
-
<div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
|
|
170
|
-
<h4>OFF</h4>
|
|
171
|
-
<RSwitch
|
|
172
|
-
checked={false}
|
|
173
|
-
onChange={() => {}}
|
|
174
|
-
onColor="#007bff"
|
|
175
|
-
offColor="#6c757d"
|
|
176
|
-
onHandleColor="#ffffff"
|
|
177
|
-
offHandleColor="#ffffff"
|
|
178
|
-
handleDiameter={18}
|
|
179
|
-
uncheckedIcon={false}
|
|
180
|
-
checkedIcon={false}
|
|
181
|
-
height={22}
|
|
182
|
-
width={48}
|
|
183
|
-
/>
|
|
184
|
-
</div>
|
|
185
|
-
<div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
|
|
186
|
-
<h4>ON</h4>
|
|
187
|
-
<RSwitch
|
|
188
|
-
checked={true}
|
|
189
|
-
onChange={() => {}}
|
|
190
|
-
onColor="#007bff"
|
|
191
|
-
offColor="#6c757d"
|
|
192
|
-
onHandleColor="#ffffff"
|
|
193
|
-
offHandleColor="#ffffff"
|
|
194
|
-
handleDiameter={18}
|
|
195
|
-
uncheckedIcon={false}
|
|
196
|
-
checkedIcon={false}
|
|
197
|
-
height={22}
|
|
198
|
-
width={48}
|
|
199
|
-
/>
|
|
200
|
-
</div>
|
|
201
|
-
<div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
|
|
202
|
-
<h4>Disabled OFF</h4>
|
|
203
|
-
<RSwitch
|
|
204
|
-
checked={false}
|
|
205
|
-
onChange={() => {}}
|
|
206
|
-
disabled={true}
|
|
207
|
-
onColor="#007bff"
|
|
208
|
-
offColor="#6c757d"
|
|
209
|
-
onHandleColor="#ffffff"
|
|
210
|
-
offHandleColor="#ffffff"
|
|
211
|
-
handleDiameter={18}
|
|
212
|
-
uncheckedIcon={false}
|
|
213
|
-
checkedIcon={false}
|
|
214
|
-
height={22}
|
|
215
|
-
width={48}
|
|
216
|
-
/>
|
|
217
|
-
</div>
|
|
218
|
-
<div style={{ textAlign: 'center', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
|
|
219
|
-
<h4>Disabled ON</h4>
|
|
220
|
-
<RSwitch
|
|
221
|
-
checked={true}
|
|
222
|
-
onChange={() => {}}
|
|
223
|
-
disabled={true}
|
|
224
|
-
onColor="#007bff"
|
|
225
|
-
offColor="#6c757d"
|
|
226
|
-
onHandleColor="#ffffff"
|
|
227
|
-
offHandleColor="#ffffff"
|
|
228
|
-
handleDiameter={18}
|
|
229
|
-
uncheckedIcon={false}
|
|
230
|
-
checkedIcon={false}
|
|
231
|
-
height={22}
|
|
232
|
-
width={48}
|
|
233
|
-
/>
|
|
234
|
-
</div>
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
</section>
|
|
238
|
-
|
|
239
|
-
{/* Información de diagnóstico */}
|
|
240
|
-
<section>
|
|
241
|
-
<h3>📋 Información de Diagnóstico</h3>
|
|
242
|
-
<div style={{
|
|
243
|
-
background: '#e9ecef',
|
|
244
|
-
padding: '1.5rem',
|
|
245
|
-
borderRadius: '8px',
|
|
246
|
-
border: '1px solid #adb5bd'
|
|
247
|
-
}}>
|
|
248
|
-
<h4>¿Qué deberías ver?</h4>
|
|
249
|
-
<ul style={{ marginBottom: '1rem' }}>
|
|
250
|
-
<li><strong>Switch OFF:</strong> Fondo gris oscuro, handle blanco a la izquierda</li>
|
|
251
|
-
<li><strong>Switch ON:</strong> Fondo azul, handle blanco a la derecha</li>
|
|
252
|
-
<li><strong>Handle:</strong> Círculo blanco que se desliza suavemente</li>
|
|
253
|
-
<li><strong>Transición:</strong> Animación fluida al cambiar estado</li>
|
|
254
|
-
</ul>
|
|
255
|
-
|
|
256
|
-
<h4>Si solo ves un círculo gris con borde:</h4>
|
|
257
|
-
<ul style={{ marginBottom: '1rem' }}>
|
|
258
|
-
<li>El problema podría ser CSS conflictivo en el proyecto</li>
|
|
259
|
-
<li>Verifica la consola del navegador por errores</li>
|
|
260
|
-
<li>Asegúrate de que react-switch se importa correctamente</li>
|
|
261
|
-
<li>Revisa si hay estilos globales que afecten los elementos div</li>
|
|
262
|
-
</ul>
|
|
263
|
-
|
|
264
|
-
<h4>Versión de react-switch:</h4>
|
|
265
|
-
<p style={{
|
|
266
|
-
background: '#ffffff',
|
|
267
|
-
padding: '0.5rem',
|
|
268
|
-
borderRadius: '4px',
|
|
269
|
-
fontFamily: 'monospace',
|
|
270
|
-
margin: '0.5rem 0'
|
|
271
|
-
}}>
|
|
272
|
-
Ejecuta: <code>npm list react-switch</code>
|
|
273
|
-
</p>
|
|
274
|
-
|
|
275
|
-
<h4>Estado actual del switch interactivo:</h4>
|
|
276
|
-
<pre style={{
|
|
277
|
-
background: '#ffffff',
|
|
278
|
-
padding: '1rem',
|
|
279
|
-
borderRadius: '4px',
|
|
280
|
-
fontFamily: 'monospace',
|
|
281
|
-
overflow: 'auto'
|
|
282
|
-
}}>
|
|
283
|
-
{JSON.stringify({
|
|
284
|
-
checked,
|
|
285
|
-
timestamp: new Date().toISOString()
|
|
286
|
-
}, null, 2)}
|
|
287
|
-
</pre>
|
|
288
|
-
</div>
|
|
289
|
-
</section>
|
|
290
|
-
</div>
|
|
291
|
-
)
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
export default SwitchTestVisual
|