ywana-core8 0.2.9 → 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 +9 -4
- 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/ApplicationMenu.css +4 -3
- package/src/desktop/window.css +5 -1
- package/src/desktop/window.js +3 -1
- package/src/html/switch.example.js +1 -1
- package/src/examples/ApplicationMenuExample.js +0 -361
- package/src/html/switch-debug.js +0 -197
- package/src/html/switch-test-visual.js +0 -294
|
@@ -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
|