Showing
22 changed files
with
4539 additions
and
0 deletions
Too many changes to show.
To preserve performance only 22 of 99 files are displayed.
es/atom.css
0 → 100644
| 1 | +.fr-container { | |
| 2 | + /* Resets */ | |
| 3 | + /* | |
| 4 | + This will set table to full width and then | |
| 5 | + all cells will be equal width | |
| 6 | + */ | |
| 7 | + /* 1. Fix for Chrome 44 bug. | |
| 8 | + * https://code.google.com/p/chromium/issues/detail?id=506893 */ | |
| 9 | + /* Height Percentages - Based off of height of parent */ | |
| 10 | + /* Screen Height Percentage */ | |
| 11 | + /* String Properties */ | |
| 12 | + /* Max Width Percentages */ | |
| 13 | + /* Max Width Scale */ | |
| 14 | + /* Max Width String Properties */ | |
| 15 | +} | |
| 16 | +.fr-container .outline { | |
| 17 | + outline: 1px solid; | |
| 18 | +} | |
| 19 | +.fr-container .outline-transparent { | |
| 20 | + outline: 1px solid transparent; | |
| 21 | +} | |
| 22 | +.fr-container .outline-0 { | |
| 23 | + outline: 0; | |
| 24 | +} | |
| 25 | +.fr-container .ba { | |
| 26 | + border-style: solid; | |
| 27 | + border-width: 1px; | |
| 28 | +} | |
| 29 | +.fr-container .bt { | |
| 30 | + border-top-style: solid; | |
| 31 | + border-top-width: 1px; | |
| 32 | +} | |
| 33 | +.fr-container .br { | |
| 34 | + border-right-style: solid; | |
| 35 | + border-right-width: 1px; | |
| 36 | +} | |
| 37 | +.fr-container .bb { | |
| 38 | + border-bottom-style: solid; | |
| 39 | + border-bottom-width: 1px; | |
| 40 | +} | |
| 41 | +.fr-container .bl { | |
| 42 | + border-left-style: solid; | |
| 43 | + border-left-width: 1px; | |
| 44 | +} | |
| 45 | +.fr-container .bn { | |
| 46 | + border-style: none; | |
| 47 | + border-width: 0; | |
| 48 | +} | |
| 49 | +.fr-container .br0 { | |
| 50 | + border-radius: 0; | |
| 51 | +} | |
| 52 | +.fr-container .br1 { | |
| 53 | + border-radius: 0.125rem; | |
| 54 | +} | |
| 55 | +.fr-container .br2 { | |
| 56 | + border-radius: 0.25rem; | |
| 57 | +} | |
| 58 | +.fr-container .br3 { | |
| 59 | + border-radius: 0.5rem; | |
| 60 | +} | |
| 61 | +.fr-container .br4 { | |
| 62 | + border-radius: 1rem; | |
| 63 | +} | |
| 64 | +.fr-container .br-100 { | |
| 65 | + border-radius: 100%; | |
| 66 | +} | |
| 67 | +.fr-container .br-pill { | |
| 68 | + border-radius: 9999px; | |
| 69 | +} | |
| 70 | +.fr-container .br--bottom { | |
| 71 | + border-top-left-radius: 0; | |
| 72 | + border-top-right-radius: 0; | |
| 73 | +} | |
| 74 | +.fr-container .br--top { | |
| 75 | + border-bottom-left-radius: 0; | |
| 76 | + border-bottom-right-radius: 0; | |
| 77 | +} | |
| 78 | +.fr-container .br--right { | |
| 79 | + border-top-left-radius: 0; | |
| 80 | + border-bottom-left-radius: 0; | |
| 81 | +} | |
| 82 | +.fr-container .br--left { | |
| 83 | + border-top-right-radius: 0; | |
| 84 | + border-bottom-right-radius: 0; | |
| 85 | +} | |
| 86 | +.fr-container .b--dotted { | |
| 87 | + border-style: dotted; | |
| 88 | +} | |
| 89 | +.fr-container .b--dashed { | |
| 90 | + border-style: dashed; | |
| 91 | +} | |
| 92 | +.fr-container .b--solid { | |
| 93 | + border-style: solid; | |
| 94 | +} | |
| 95 | +.fr-container .b--none { | |
| 96 | + border-style: none; | |
| 97 | +} | |
| 98 | +.fr-container .b--black-10 { | |
| 99 | + border-color: rgba(0, 0, 0, 0.1); | |
| 100 | +} | |
| 101 | +.fr-container .b--black-20 { | |
| 102 | + border-color: rgba(0, 0, 0, 0.2); | |
| 103 | +} | |
| 104 | +.fr-container .b--black-30 { | |
| 105 | + border-color: rgba(0, 0, 0, 0.3); | |
| 106 | +} | |
| 107 | +.fr-container .bw0 { | |
| 108 | + border-width: 0; | |
| 109 | +} | |
| 110 | +.fr-container .bw1 { | |
| 111 | + border-width: 0.125rem; | |
| 112 | +} | |
| 113 | +.fr-container .bw2 { | |
| 114 | + border-width: 0.25rem; | |
| 115 | +} | |
| 116 | +.fr-container .bw3 { | |
| 117 | + border-width: 0.5rem; | |
| 118 | +} | |
| 119 | +.fr-container .bw4 { | |
| 120 | + border-width: 1rem; | |
| 121 | +} | |
| 122 | +.fr-container .bw5 { | |
| 123 | + border-width: 2rem; | |
| 124 | +} | |
| 125 | +.fr-container .bt-0 { | |
| 126 | + border-top-width: 0; | |
| 127 | +} | |
| 128 | +.fr-container .br-0 { | |
| 129 | + border-right-width: 0; | |
| 130 | +} | |
| 131 | +.fr-container .bb-0 { | |
| 132 | + border-bottom-width: 0; | |
| 133 | +} | |
| 134 | +.fr-container .bl-0 { | |
| 135 | + border-left-width: 0; | |
| 136 | +} | |
| 137 | +.fr-container .shadow-1 { | |
| 138 | + box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); | |
| 139 | +} | |
| 140 | +.fr-container .shadow-2 { | |
| 141 | + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); | |
| 142 | +} | |
| 143 | +.fr-container .shadow-3 { | |
| 144 | + box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); | |
| 145 | +} | |
| 146 | +.fr-container .shadow-4 { | |
| 147 | + box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); | |
| 148 | +} | |
| 149 | +.fr-container .shadow-5 { | |
| 150 | + box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); | |
| 151 | +} | |
| 152 | +.fr-container .top-0 { | |
| 153 | + top: 0; | |
| 154 | +} | |
| 155 | +.fr-container .right-0 { | |
| 156 | + right: 0; | |
| 157 | +} | |
| 158 | +.fr-container .bottom-0 { | |
| 159 | + bottom: 0; | |
| 160 | +} | |
| 161 | +.fr-container .left-0 { | |
| 162 | + left: 0; | |
| 163 | +} | |
| 164 | +.fr-container .top-1 { | |
| 165 | + top: 1rem; | |
| 166 | +} | |
| 167 | +.fr-container .right-1 { | |
| 168 | + right: 1rem; | |
| 169 | +} | |
| 170 | +.fr-container .bottom-1 { | |
| 171 | + bottom: 1rem; | |
| 172 | +} | |
| 173 | +.fr-container .left-1 { | |
| 174 | + left: 1rem; | |
| 175 | +} | |
| 176 | +.fr-container .top-2 { | |
| 177 | + top: 2rem; | |
| 178 | +} | |
| 179 | +.fr-container .right-2 { | |
| 180 | + right: 2rem; | |
| 181 | +} | |
| 182 | +.fr-container .bottom-2 { | |
| 183 | + bottom: 2rem; | |
| 184 | +} | |
| 185 | +.fr-container .left-2 { | |
| 186 | + left: 2rem; | |
| 187 | +} | |
| 188 | +.fr-container .top--1 { | |
| 189 | + top: -1rem; | |
| 190 | +} | |
| 191 | +.fr-container .right--1 { | |
| 192 | + right: -1rem; | |
| 193 | +} | |
| 194 | +.fr-container .bottom--1 { | |
| 195 | + bottom: -1rem; | |
| 196 | +} | |
| 197 | +.fr-container .left--1 { | |
| 198 | + left: -1rem; | |
| 199 | +} | |
| 200 | +.fr-container .top--2 { | |
| 201 | + top: -2rem; | |
| 202 | +} | |
| 203 | +.fr-container .right--2 { | |
| 204 | + right: -2rem; | |
| 205 | +} | |
| 206 | +.fr-container .bottom--2 { | |
| 207 | + bottom: -2rem; | |
| 208 | +} | |
| 209 | +.fr-container .left--2 { | |
| 210 | + left: -2rem; | |
| 211 | +} | |
| 212 | +.fr-container .absolute--fill { | |
| 213 | + top: 0; | |
| 214 | + right: 0; | |
| 215 | + bottom: 0; | |
| 216 | + left: 0; | |
| 217 | +} | |
| 218 | +.fr-container .dn { | |
| 219 | + display: none; | |
| 220 | +} | |
| 221 | +.fr-container .di { | |
| 222 | + display: inline; | |
| 223 | +} | |
| 224 | +.fr-container .db { | |
| 225 | + display: block; | |
| 226 | +} | |
| 227 | +.fr-container .dib { | |
| 228 | + display: inline-block; | |
| 229 | +} | |
| 230 | +.fr-container .dit { | |
| 231 | + display: inline-table; | |
| 232 | +} | |
| 233 | +.fr-container .dt { | |
| 234 | + display: table; | |
| 235 | +} | |
| 236 | +.fr-container .dtc { | |
| 237 | + display: table-cell; | |
| 238 | +} | |
| 239 | +.fr-container .dt-row { | |
| 240 | + display: table-row; | |
| 241 | +} | |
| 242 | +.fr-container .dt-row-group { | |
| 243 | + display: table-row-group; | |
| 244 | +} | |
| 245 | +.fr-container .dt-column { | |
| 246 | + display: table-column; | |
| 247 | +} | |
| 248 | +.fr-container .dt-column-group { | |
| 249 | + display: table-column-group; | |
| 250 | +} | |
| 251 | +.fr-container .dt--fixed { | |
| 252 | + table-layout: fixed; | |
| 253 | + width: 100%; | |
| 254 | +} | |
| 255 | +.fr-container .flex { | |
| 256 | + display: flex; | |
| 257 | +} | |
| 258 | +.fr-container .inline-flex { | |
| 259 | + display: inline-flex; | |
| 260 | +} | |
| 261 | +.fr-container .flex-auto { | |
| 262 | + flex: 1 1 auto; | |
| 263 | + min-width: 0; | |
| 264 | + /* 1 */ | |
| 265 | + min-height: 0; | |
| 266 | + /* 1 */ | |
| 267 | +} | |
| 268 | +.fr-container .flex-none { | |
| 269 | + flex: none; | |
| 270 | +} | |
| 271 | +.fr-container .flex-column { | |
| 272 | + flex-direction: column; | |
| 273 | +} | |
| 274 | +.fr-container .flex-row { | |
| 275 | + flex-direction: row; | |
| 276 | +} | |
| 277 | +.fr-container .flex-wrap { | |
| 278 | + flex-wrap: wrap; | |
| 279 | +} | |
| 280 | +.fr-container .flex-nowrap { | |
| 281 | + flex-wrap: nowrap; | |
| 282 | +} | |
| 283 | +.fr-container .flex-wrap-reverse { | |
| 284 | + flex-wrap: wrap-reverse; | |
| 285 | +} | |
| 286 | +.fr-container .flex-column-reverse { | |
| 287 | + flex-direction: column-reverse; | |
| 288 | +} | |
| 289 | +.fr-container .flex-row-reverse { | |
| 290 | + flex-direction: row-reverse; | |
| 291 | +} | |
| 292 | +.fr-container .items-start { | |
| 293 | + align-items: flex-start; | |
| 294 | +} | |
| 295 | +.fr-container .items-end { | |
| 296 | + align-items: flex-end; | |
| 297 | +} | |
| 298 | +.fr-container .items-center { | |
| 299 | + align-items: center; | |
| 300 | +} | |
| 301 | +.fr-container .items-baseline { | |
| 302 | + align-items: baseline; | |
| 303 | +} | |
| 304 | +.fr-container .items-stretch { | |
| 305 | + align-items: stretch; | |
| 306 | +} | |
| 307 | +.fr-container .self-start { | |
| 308 | + align-self: flex-start; | |
| 309 | +} | |
| 310 | +.fr-container .self-end { | |
| 311 | + align-self: flex-end; | |
| 312 | +} | |
| 313 | +.fr-container .self-center { | |
| 314 | + align-self: center; | |
| 315 | +} | |
| 316 | +.fr-container .self-baseline { | |
| 317 | + align-self: baseline; | |
| 318 | +} | |
| 319 | +.fr-container .self-stretch { | |
| 320 | + align-self: stretch; | |
| 321 | +} | |
| 322 | +.fr-container .justify-start { | |
| 323 | + justify-content: flex-start; | |
| 324 | +} | |
| 325 | +.fr-container .justify-end { | |
| 326 | + justify-content: flex-end; | |
| 327 | +} | |
| 328 | +.fr-container .justify-center { | |
| 329 | + justify-content: center; | |
| 330 | +} | |
| 331 | +.fr-container .justify-between { | |
| 332 | + justify-content: space-between; | |
| 333 | +} | |
| 334 | +.fr-container .justify-around { | |
| 335 | + justify-content: space-around; | |
| 336 | +} | |
| 337 | +.fr-container .content-start { | |
| 338 | + align-content: flex-start; | |
| 339 | +} | |
| 340 | +.fr-container .content-end { | |
| 341 | + align-content: flex-end; | |
| 342 | +} | |
| 343 | +.fr-container .content-center { | |
| 344 | + align-content: center; | |
| 345 | +} | |
| 346 | +.fr-container .content-between { | |
| 347 | + align-content: space-between; | |
| 348 | +} | |
| 349 | +.fr-container .content-around { | |
| 350 | + align-content: space-around; | |
| 351 | +} | |
| 352 | +.fr-container .content-stretch { | |
| 353 | + align-content: stretch; | |
| 354 | +} | |
| 355 | +.fr-container .order-0 { | |
| 356 | + order: 0; | |
| 357 | +} | |
| 358 | +.fr-container .order-1 { | |
| 359 | + order: 1; | |
| 360 | +} | |
| 361 | +.fr-container .order-2 { | |
| 362 | + order: 2; | |
| 363 | +} | |
| 364 | +.fr-container .order-3 { | |
| 365 | + order: 3; | |
| 366 | +} | |
| 367 | +.fr-container .order-4 { | |
| 368 | + order: 4; | |
| 369 | +} | |
| 370 | +.fr-container .order-5 { | |
| 371 | + order: 5; | |
| 372 | +} | |
| 373 | +.fr-container .order-6 { | |
| 374 | + order: 6; | |
| 375 | +} | |
| 376 | +.fr-container .order-7 { | |
| 377 | + order: 7; | |
| 378 | +} | |
| 379 | +.fr-container .order-8 { | |
| 380 | + order: 8; | |
| 381 | +} | |
| 382 | +.fr-container .order-last { | |
| 383 | + order: 99999; | |
| 384 | +} | |
| 385 | +.fr-container .flex-grow-0 { | |
| 386 | + flex-grow: 0; | |
| 387 | +} | |
| 388 | +.fr-container .flex-grow-1 { | |
| 389 | + flex-grow: 1; | |
| 390 | +} | |
| 391 | +.fr-container .flex-shrink-0 { | |
| 392 | + flex-shrink: 0; | |
| 393 | +} | |
| 394 | +.fr-container .flex-shrink-1 { | |
| 395 | + flex-shrink: 1; | |
| 396 | +} | |
| 397 | +.fr-container .fw1 { | |
| 398 | + font-weight: 100; | |
| 399 | +} | |
| 400 | +.fr-container .fw2 { | |
| 401 | + font-weight: 200; | |
| 402 | +} | |
| 403 | +.fr-container .fw3 { | |
| 404 | + font-weight: 300; | |
| 405 | +} | |
| 406 | +.fr-container .fw4 { | |
| 407 | + font-weight: 400; | |
| 408 | +} | |
| 409 | +.fr-container .fw5 { | |
| 410 | + font-weight: 500; | |
| 411 | +} | |
| 412 | +.fr-container .fw6 { | |
| 413 | + font-weight: 600; | |
| 414 | +} | |
| 415 | +.fr-container .fw7 { | |
| 416 | + font-weight: 700; | |
| 417 | +} | |
| 418 | +.fr-container .fw8 { | |
| 419 | + font-weight: 800; | |
| 420 | +} | |
| 421 | +.fr-container .fw9 { | |
| 422 | + font-weight: 900; | |
| 423 | +} | |
| 424 | +.fr-container .h1 { | |
| 425 | + height: 1rem; | |
| 426 | +} | |
| 427 | +.fr-container .h2 { | |
| 428 | + height: 2rem; | |
| 429 | +} | |
| 430 | +.fr-container .h3 { | |
| 431 | + height: 4rem; | |
| 432 | +} | |
| 433 | +.fr-container .h4 { | |
| 434 | + height: 8rem; | |
| 435 | +} | |
| 436 | +.fr-container .h5 { | |
| 437 | + height: 16rem; | |
| 438 | +} | |
| 439 | +.fr-container .h-25 { | |
| 440 | + height: 25%; | |
| 441 | +} | |
| 442 | +.fr-container .h-50 { | |
| 443 | + height: 50%; | |
| 444 | +} | |
| 445 | +.fr-container .h-75 { | |
| 446 | + height: 75%; | |
| 447 | +} | |
| 448 | +.fr-container .h-100 { | |
| 449 | + height: 100%; | |
| 450 | +} | |
| 451 | +.fr-container .min-h-100 { | |
| 452 | + min-height: 100%; | |
| 453 | +} | |
| 454 | +.fr-container .vh-25 { | |
| 455 | + height: 25vh; | |
| 456 | +} | |
| 457 | +.fr-container .vh-50 { | |
| 458 | + height: 50vh; | |
| 459 | +} | |
| 460 | +.fr-container .vh-75 { | |
| 461 | + height: 75vh; | |
| 462 | +} | |
| 463 | +.fr-container .vh-100 { | |
| 464 | + height: 100vh; | |
| 465 | +} | |
| 466 | +.fr-container .min-vh-100 { | |
| 467 | + min-height: 100vh; | |
| 468 | +} | |
| 469 | +.fr-container .h-auto { | |
| 470 | + height: auto; | |
| 471 | +} | |
| 472 | +.fr-container .h-inherit { | |
| 473 | + height: inherit; | |
| 474 | +} | |
| 475 | +.fr-container .tracked { | |
| 476 | + letter-spacing: 0.1em; | |
| 477 | +} | |
| 478 | +.fr-container .tracked-tight { | |
| 479 | + letter-spacing: -0.05em; | |
| 480 | +} | |
| 481 | +.fr-container .tracked-mega { | |
| 482 | + letter-spacing: 0.25em; | |
| 483 | +} | |
| 484 | +.fr-container .lh-solid { | |
| 485 | + line-height: 1; | |
| 486 | +} | |
| 487 | +.fr-container .lh-title { | |
| 488 | + line-height: 1.25; | |
| 489 | +} | |
| 490 | +.fr-container .lh-copy { | |
| 491 | + line-height: 1.5; | |
| 492 | +} | |
| 493 | +.fr-container .mw-100 { | |
| 494 | + max-width: 100%; | |
| 495 | +} | |
| 496 | +.fr-container .mw1 { | |
| 497 | + max-width: 1rem; | |
| 498 | +} | |
| 499 | +.fr-container .mw2 { | |
| 500 | + max-width: 2rem; | |
| 501 | +} | |
| 502 | +.fr-container .mw3 { | |
| 503 | + max-width: 4rem; | |
| 504 | +} | |
| 505 | +.fr-container .mw4 { | |
| 506 | + max-width: 8rem; | |
| 507 | +} | |
| 508 | +.fr-container .mw5 { | |
| 509 | + max-width: 16rem; | |
| 510 | +} | |
| 511 | +.fr-container .mw6 { | |
| 512 | + max-width: 32rem; | |
| 513 | +} | |
| 514 | +.fr-container .mw7 { | |
| 515 | + max-width: 48rem; | |
| 516 | +} | |
| 517 | +.fr-container .mw8 { | |
| 518 | + max-width: 64rem; | |
| 519 | +} | |
| 520 | +.fr-container .mw9 { | |
| 521 | + max-width: 96rem; | |
| 522 | +} | |
| 523 | +.fr-container .mw-none { | |
| 524 | + max-width: none; | |
| 525 | +} | |
| 526 | +.fr-container .w1 { | |
| 527 | + width: 1rem; | |
| 528 | +} | |
| 529 | +.fr-container .w2 { | |
| 530 | + width: 2rem; | |
| 531 | +} | |
| 532 | +.fr-container .w3 { | |
| 533 | + width: 4rem; | |
| 534 | +} | |
| 535 | +.fr-container .w4 { | |
| 536 | + width: 8rem; | |
| 537 | +} | |
| 538 | +.fr-container .w5 { | |
| 539 | + width: 16rem; | |
| 540 | +} | |
| 541 | +.fr-container .w-10 { | |
| 542 | + width: 10%; | |
| 543 | +} | |
| 544 | +.fr-container .w-20 { | |
| 545 | + width: 20%; | |
| 546 | +} | |
| 547 | +.fr-container .w-25 { | |
| 548 | + width: 25%; | |
| 549 | +} | |
| 550 | +.fr-container .w-30 { | |
| 551 | + width: 30%; | |
| 552 | +} | |
| 553 | +.fr-container .w-33 { | |
| 554 | + width: 33%; | |
| 555 | +} | |
| 556 | +.fr-container .w-34 { | |
| 557 | + width: 34%; | |
| 558 | +} | |
| 559 | +.fr-container .w-40 { | |
| 560 | + width: 40%; | |
| 561 | +} | |
| 562 | +.fr-container .w-50 { | |
| 563 | + width: 50%; | |
| 564 | +} | |
| 565 | +.fr-container .w-60 { | |
| 566 | + width: 60%; | |
| 567 | +} | |
| 568 | +.fr-container .w-70 { | |
| 569 | + width: 70%; | |
| 570 | +} | |
| 571 | +.fr-container .w-75 { | |
| 572 | + width: 75%; | |
| 573 | +} | |
| 574 | +.fr-container .w-80 { | |
| 575 | + width: 80%; | |
| 576 | +} | |
| 577 | +.fr-container .w-90 { | |
| 578 | + width: 90%; | |
| 579 | +} | |
| 580 | +.fr-container .w-100 { | |
| 581 | + width: 100%; | |
| 582 | +} | |
| 583 | +.fr-container .w-third { | |
| 584 | + width: calc(100% / 3); | |
| 585 | +} | |
| 586 | +.fr-container .w-two-thirds { | |
| 587 | + width: calc(100% / 1.5); | |
| 588 | +} | |
| 589 | +.fr-container .w-auto { | |
| 590 | + width: auto; | |
| 591 | +} | |
| 592 | +.fr-container .tl { | |
| 593 | + text-align: left; | |
| 594 | +} | |
| 595 | +.fr-container .tr { | |
| 596 | + text-align: right; | |
| 597 | +} | |
| 598 | +.fr-container .tc { | |
| 599 | + text-align: center; | |
| 600 | +} | |
| 601 | +.fr-container .tj { | |
| 602 | + text-align: justify; | |
| 603 | +} | |
| 604 | +.fr-container .overflow-visible { | |
| 605 | + overflow: visible; | |
| 606 | +} | |
| 607 | +.fr-container .overflow-hidden { | |
| 608 | + overflow: hidden; | |
| 609 | +} | |
| 610 | +.fr-container .overflow-scroll { | |
| 611 | + overflow: scroll; | |
| 612 | +} | |
| 613 | +.fr-container .overflow-auto { | |
| 614 | + overflow: auto; | |
| 615 | +} | |
| 616 | +.fr-container .overflow-x-visible { | |
| 617 | + overflow-x: visible; | |
| 618 | +} | |
| 619 | +.fr-container .overflow-x-hidden { | |
| 620 | + overflow-x: hidden; | |
| 621 | +} | |
| 622 | +.fr-container .overflow-x-scroll { | |
| 623 | + overflow-x: scroll; | |
| 624 | +} | |
| 625 | +.fr-container .overflow-x-auto { | |
| 626 | + overflow-x: auto; | |
| 627 | +} | |
| 628 | +.fr-container .overflow-y-visible { | |
| 629 | + overflow-y: visible; | |
| 630 | +} | |
| 631 | +.fr-container .overflow-y-hidden { | |
| 632 | + overflow-y: hidden; | |
| 633 | +} | |
| 634 | +.fr-container .overflow-y-scroll { | |
| 635 | + overflow-y: scroll; | |
| 636 | +} | |
| 637 | +.fr-container .overflow-y-auto { | |
| 638 | + overflow-y: auto; | |
| 639 | +} | |
| 640 | +.fr-container .static { | |
| 641 | + position: static; | |
| 642 | +} | |
| 643 | +.fr-container .relative { | |
| 644 | + position: relative; | |
| 645 | +} | |
| 646 | +.fr-container .absolute { | |
| 647 | + position: absolute; | |
| 648 | +} | |
| 649 | +.fr-container .fixed { | |
| 650 | + position: fixed; | |
| 651 | +} | |
| 652 | +.fr-container .o-100 { | |
| 653 | + opacity: 1; | |
| 654 | +} | |
| 655 | +.fr-container .o-90 { | |
| 656 | + opacity: 0.9; | |
| 657 | +} | |
| 658 | +.fr-container .o-80 { | |
| 659 | + opacity: 0.8; | |
| 660 | +} | |
| 661 | +.fr-container .o-70 { | |
| 662 | + opacity: 0.7; | |
| 663 | +} | |
| 664 | +.fr-container .o-60 { | |
| 665 | + opacity: 0.6; | |
| 666 | +} | |
| 667 | +.fr-container .o-50 { | |
| 668 | + opacity: 0.5; | |
| 669 | +} | |
| 670 | +.fr-container .o-40 { | |
| 671 | + opacity: 0.4; | |
| 672 | +} | |
| 673 | +.fr-container .o-30 { | |
| 674 | + opacity: 0.3; | |
| 675 | +} | |
| 676 | +.fr-container .o-20 { | |
| 677 | + opacity: 0.2; | |
| 678 | +} | |
| 679 | +.fr-container .o-10 { | |
| 680 | + opacity: 0.1; | |
| 681 | +} | |
| 682 | +.fr-container .o-05 { | |
| 683 | + opacity: 0.05; | |
| 684 | +} | |
| 685 | +.fr-container .o-025 { | |
| 686 | + opacity: 0.025; | |
| 687 | +} | |
| 688 | +.fr-container .o-0 { | |
| 689 | + opacity: 0; | |
| 690 | +} | |
| 691 | +.fr-container .pa0 { | |
| 692 | + padding: 0; | |
| 693 | +} | |
| 694 | +.fr-container .pa1 { | |
| 695 | + padding: 0.25rem; | |
| 696 | +} | |
| 697 | +.fr-container .pa2 { | |
| 698 | + padding: 0.5rem; | |
| 699 | +} | |
| 700 | +.fr-container .pa3 { | |
| 701 | + padding: 1rem; | |
| 702 | +} | |
| 703 | +.fr-container .pa4 { | |
| 704 | + padding: 2rem; | |
| 705 | +} | |
| 706 | +.fr-container .pa5 { | |
| 707 | + padding: 4rem; | |
| 708 | +} | |
| 709 | +.fr-container .pa6 { | |
| 710 | + padding: 8rem; | |
| 711 | +} | |
| 712 | +.fr-container .pa7 { | |
| 713 | + padding: 16rem; | |
| 714 | +} | |
| 715 | +.fr-container .pl0 { | |
| 716 | + padding-left: 0; | |
| 717 | +} | |
| 718 | +.fr-container .pl1 { | |
| 719 | + padding-left: 0.25rem; | |
| 720 | +} | |
| 721 | +.fr-container .pl2 { | |
| 722 | + padding-left: 0.5rem; | |
| 723 | +} | |
| 724 | +.fr-container .pl3 { | |
| 725 | + padding-left: 1rem; | |
| 726 | +} | |
| 727 | +.fr-container .pl4 { | |
| 728 | + padding-left: 2rem; | |
| 729 | +} | |
| 730 | +.fr-container .pl5 { | |
| 731 | + padding-left: 4rem; | |
| 732 | +} | |
| 733 | +.fr-container .pl6 { | |
| 734 | + padding-left: 8rem; | |
| 735 | +} | |
| 736 | +.fr-container .pl7 { | |
| 737 | + padding-left: 16rem; | |
| 738 | +} | |
| 739 | +.fr-container .pr0 { | |
| 740 | + padding-right: 0; | |
| 741 | +} | |
| 742 | +.fr-container .pr1 { | |
| 743 | + padding-right: 0.25rem; | |
| 744 | +} | |
| 745 | +.fr-container .pr2 { | |
| 746 | + padding-right: 0.5rem; | |
| 747 | +} | |
| 748 | +.fr-container .pr3 { | |
| 749 | + padding-right: 1rem; | |
| 750 | +} | |
| 751 | +.fr-container .pr4 { | |
| 752 | + padding-right: 2rem; | |
| 753 | +} | |
| 754 | +.fr-container .pr5 { | |
| 755 | + padding-right: 4rem; | |
| 756 | +} | |
| 757 | +.fr-container .pr6 { | |
| 758 | + padding-right: 8rem; | |
| 759 | +} | |
| 760 | +.fr-container .pr7 { | |
| 761 | + padding-right: 16rem; | |
| 762 | +} | |
| 763 | +.fr-container .pb0 { | |
| 764 | + padding-bottom: 0; | |
| 765 | +} | |
| 766 | +.fr-container .pb1 { | |
| 767 | + padding-bottom: 0.25rem; | |
| 768 | +} | |
| 769 | +.fr-container .pb2 { | |
| 770 | + padding-bottom: 0.5rem; | |
| 771 | +} | |
| 772 | +.fr-container .pb3 { | |
| 773 | + padding-bottom: 1rem; | |
| 774 | +} | |
| 775 | +.fr-container .pb4 { | |
| 776 | + padding-bottom: 2rem; | |
| 777 | +} | |
| 778 | +.fr-container .pb5 { | |
| 779 | + padding-bottom: 4rem; | |
| 780 | +} | |
| 781 | +.fr-container .pb6 { | |
| 782 | + padding-bottom: 8rem; | |
| 783 | +} | |
| 784 | +.fr-container .pb7 { | |
| 785 | + padding-bottom: 16rem; | |
| 786 | +} | |
| 787 | +.fr-container .pt0 { | |
| 788 | + padding-top: 0; | |
| 789 | +} | |
| 790 | +.fr-container .pt1 { | |
| 791 | + padding-top: 0.25rem; | |
| 792 | +} | |
| 793 | +.fr-container .pt2 { | |
| 794 | + padding-top: 0.5rem; | |
| 795 | +} | |
| 796 | +.fr-container .pt3 { | |
| 797 | + padding-top: 1rem; | |
| 798 | +} | |
| 799 | +.fr-container .pt4 { | |
| 800 | + padding-top: 2rem; | |
| 801 | +} | |
| 802 | +.fr-container .pt5 { | |
| 803 | + padding-top: 4rem; | |
| 804 | +} | |
| 805 | +.fr-container .pt6 { | |
| 806 | + padding-top: 8rem; | |
| 807 | +} | |
| 808 | +.fr-container .pt7 { | |
| 809 | + padding-top: 16rem; | |
| 810 | +} | |
| 811 | +.fr-container .pv0 { | |
| 812 | + padding-top: 0; | |
| 813 | + padding-bottom: 0; | |
| 814 | +} | |
| 815 | +.fr-container .pv1 { | |
| 816 | + padding-top: 0.25rem; | |
| 817 | + padding-bottom: 0.25rem; | |
| 818 | +} | |
| 819 | +.fr-container .pv2 { | |
| 820 | + padding-top: 0.5rem; | |
| 821 | + padding-bottom: 0.5rem; | |
| 822 | +} | |
| 823 | +.fr-container .pv3 { | |
| 824 | + padding-top: 1rem; | |
| 825 | + padding-bottom: 1rem; | |
| 826 | +} | |
| 827 | +.fr-container .pv4 { | |
| 828 | + padding-top: 2rem; | |
| 829 | + padding-bottom: 2rem; | |
| 830 | +} | |
| 831 | +.fr-container .pv5 { | |
| 832 | + padding-top: 4rem; | |
| 833 | + padding-bottom: 4rem; | |
| 834 | +} | |
| 835 | +.fr-container .pv6 { | |
| 836 | + padding-top: 8rem; | |
| 837 | + padding-bottom: 8rem; | |
| 838 | +} | |
| 839 | +.fr-container .pv7 { | |
| 840 | + padding-top: 16rem; | |
| 841 | + padding-bottom: 16rem; | |
| 842 | +} | |
| 843 | +.fr-container .ph0 { | |
| 844 | + padding-left: 0; | |
| 845 | + padding-right: 0; | |
| 846 | +} | |
| 847 | +.fr-container .ph1 { | |
| 848 | + padding-left: 0.25rem; | |
| 849 | + padding-right: 0.25rem; | |
| 850 | +} | |
| 851 | +.fr-container .ph2 { | |
| 852 | + padding-left: 0.5rem; | |
| 853 | + padding-right: 0.5rem; | |
| 854 | +} | |
| 855 | +.fr-container .ph3 { | |
| 856 | + padding-left: 1rem; | |
| 857 | + padding-right: 1rem; | |
| 858 | +} | |
| 859 | +.fr-container .ph4 { | |
| 860 | + padding-left: 2rem; | |
| 861 | + padding-right: 2rem; | |
| 862 | +} | |
| 863 | +.fr-container .ph5 { | |
| 864 | + padding-left: 4rem; | |
| 865 | + padding-right: 4rem; | |
| 866 | +} | |
| 867 | +.fr-container .ph6 { | |
| 868 | + padding-left: 8rem; | |
| 869 | + padding-right: 8rem; | |
| 870 | +} | |
| 871 | +.fr-container .ph7 { | |
| 872 | + padding-left: 16rem; | |
| 873 | + padding-right: 16rem; | |
| 874 | +} | |
| 875 | +.fr-container .ma1 { | |
| 876 | + margin: 0.25rem; | |
| 877 | +} | |
| 878 | +.fr-container .ma2 { | |
| 879 | + margin: 0.5rem; | |
| 880 | +} | |
| 881 | +.fr-container .ma3 { | |
| 882 | + margin: 1rem; | |
| 883 | +} | |
| 884 | +.fr-container .ma4 { | |
| 885 | + margin: 2rem; | |
| 886 | +} | |
| 887 | +.fr-container .ma5 { | |
| 888 | + margin: 4rem; | |
| 889 | +} | |
| 890 | +.fr-container .ma6 { | |
| 891 | + margin: 8rem; | |
| 892 | +} | |
| 893 | +.fr-container .ma7 { | |
| 894 | + margin: 16rem; | |
| 895 | +} | |
| 896 | +.fr-container .ma0 { | |
| 897 | + margin: 0; | |
| 898 | +} | |
| 899 | +.fr-container .ml1 { | |
| 900 | + margin-left: 0.25rem; | |
| 901 | +} | |
| 902 | +.fr-container .ml2 { | |
| 903 | + margin-left: 0.5rem; | |
| 904 | +} | |
| 905 | +.fr-container .ml3 { | |
| 906 | + margin-left: 1rem; | |
| 907 | +} | |
| 908 | +.fr-container .ml4 { | |
| 909 | + margin-left: 2rem; | |
| 910 | +} | |
| 911 | +.fr-container .ml5 { | |
| 912 | + margin-left: 4rem; | |
| 913 | +} | |
| 914 | +.fr-container .ml6 { | |
| 915 | + margin-left: 8rem; | |
| 916 | +} | |
| 917 | +.fr-container .ml7 { | |
| 918 | + margin-left: 16rem; | |
| 919 | +} | |
| 920 | +.fr-container .ml0 { | |
| 921 | + margin-left: 0; | |
| 922 | +} | |
| 923 | +.fr-container .mr1 { | |
| 924 | + margin-right: 0.25rem; | |
| 925 | +} | |
| 926 | +.fr-container .mr2 { | |
| 927 | + margin-right: 0.5rem; | |
| 928 | +} | |
| 929 | +.fr-container .mr3 { | |
| 930 | + margin-right: 1rem; | |
| 931 | +} | |
| 932 | +.fr-container .mr4 { | |
| 933 | + margin-right: 2rem; | |
| 934 | +} | |
| 935 | +.fr-container .mr5 { | |
| 936 | + margin-right: 4rem; | |
| 937 | +} | |
| 938 | +.fr-container .mr6 { | |
| 939 | + margin-right: 8rem; | |
| 940 | +} | |
| 941 | +.fr-container .mr7 { | |
| 942 | + margin-right: 16rem; | |
| 943 | +} | |
| 944 | +.fr-container .mr0 { | |
| 945 | + margin-right: 0; | |
| 946 | +} | |
| 947 | +.fr-container .mb1 { | |
| 948 | + margin-bottom: 0.25rem; | |
| 949 | +} | |
| 950 | +.fr-container .mb2 { | |
| 951 | + margin-bottom: 0.5rem; | |
| 952 | +} | |
| 953 | +.fr-container .mb3 { | |
| 954 | + margin-bottom: 1rem; | |
| 955 | +} | |
| 956 | +.fr-container .mb4 { | |
| 957 | + margin-bottom: 2rem; | |
| 958 | +} | |
| 959 | +.fr-container .mb5 { | |
| 960 | + margin-bottom: 4rem; | |
| 961 | +} | |
| 962 | +.fr-container .mb6 { | |
| 963 | + margin-bottom: 8rem; | |
| 964 | +} | |
| 965 | +.fr-container .mb7 { | |
| 966 | + margin-bottom: 16rem; | |
| 967 | +} | |
| 968 | +.fr-container .mb0 { | |
| 969 | + margin-bottom: 0; | |
| 970 | +} | |
| 971 | +.fr-container .mt1 { | |
| 972 | + margin-top: 0.25rem; | |
| 973 | +} | |
| 974 | +.fr-container .mt2 { | |
| 975 | + margin-top: 0.5rem; | |
| 976 | +} | |
| 977 | +.fr-container .mt3 { | |
| 978 | + margin-top: 1rem; | |
| 979 | +} | |
| 980 | +.fr-container .mt4 { | |
| 981 | + margin-top: 2rem; | |
| 982 | +} | |
| 983 | +.fr-container .mt5 { | |
| 984 | + margin-top: 4rem; | |
| 985 | +} | |
| 986 | +.fr-container .mt6 { | |
| 987 | + margin-top: 8rem; | |
| 988 | +} | |
| 989 | +.fr-container .mt7 { | |
| 990 | + margin-top: 16rem; | |
| 991 | +} | |
| 992 | +.fr-container .mt0 { | |
| 993 | + margin-top: 0; | |
| 994 | +} | |
| 995 | +.fr-container .mv1 { | |
| 996 | + margin-top: 0.25rem; | |
| 997 | + margin-bottom: 0.25rem; | |
| 998 | +} | |
| 999 | +.fr-container .mv2 { | |
| 1000 | + margin-top: 0.5rem; | |
| 1001 | + margin-bottom: 0.5rem; | |
| 1002 | +} | |
| 1003 | +.fr-container .mv3 { | |
| 1004 | + margin-top: 1rem; | |
| 1005 | + margin-bottom: 1rem; | |
| 1006 | +} | |
| 1007 | +.fr-container .mv4 { | |
| 1008 | + margin-top: 2rem; | |
| 1009 | + margin-bottom: 2rem; | |
| 1010 | +} | |
| 1011 | +.fr-container .mv5 { | |
| 1012 | + margin-top: 4rem; | |
| 1013 | + margin-bottom: 4rem; | |
| 1014 | +} | |
| 1015 | +.fr-container .mv6 { | |
| 1016 | + margin-top: 8rem; | |
| 1017 | + margin-bottom: 8rem; | |
| 1018 | +} | |
| 1019 | +.fr-container .mv7 { | |
| 1020 | + margin-top: 16rem; | |
| 1021 | + margin-bottom: 16rem; | |
| 1022 | +} | |
| 1023 | +.fr-container .mv0 { | |
| 1024 | + margin-top: 0; | |
| 1025 | + margin-bottom: 0; | |
| 1026 | +} | |
| 1027 | +.fr-container .mh1 { | |
| 1028 | + margin-left: 0.25rem; | |
| 1029 | + margin-right: 0.25rem; | |
| 1030 | +} | |
| 1031 | +.fr-container .mh2 { | |
| 1032 | + margin-left: 0.5rem; | |
| 1033 | + margin-right: 0.5rem; | |
| 1034 | +} | |
| 1035 | +.fr-container .mh3 { | |
| 1036 | + margin-left: 1rem; | |
| 1037 | + margin-right: 1rem; | |
| 1038 | +} | |
| 1039 | +.fr-container .mh4 { | |
| 1040 | + margin-left: 2rem; | |
| 1041 | + margin-right: 2rem; | |
| 1042 | +} | |
| 1043 | +.fr-container .mh5 { | |
| 1044 | + margin-left: 4rem; | |
| 1045 | + margin-right: 4rem; | |
| 1046 | +} | |
| 1047 | +.fr-container .mh6 { | |
| 1048 | + margin-left: 8rem; | |
| 1049 | + margin-right: 8rem; | |
| 1050 | +} | |
| 1051 | +.fr-container .mh7 { | |
| 1052 | + margin-left: 16rem; | |
| 1053 | + margin-right: 16rem; | |
| 1054 | +} | |
| 1055 | +.fr-container .mh0 { | |
| 1056 | + margin-left: 0; | |
| 1057 | + margin-right: 0; | |
| 1058 | +} | |
| 1059 | +.fr-container .debug * { | |
| 1060 | + outline: 1px solid gold; | |
| 1061 | +} | |
| 1062 | +.fr-container .debug-white * { | |
| 1063 | + outline: 1px solid white; | |
| 1064 | +} | |
| 1065 | +.fr-container .debug-black * { | |
| 1066 | + outline: 1px solid black; | |
| 1067 | +} | |
| 1068 | +.fr-container .debug-grid { | |
| 1069 | + background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; | |
| 1070 | +} | |
| 1071 | +.fr-container .truncate { | |
| 1072 | + white-space: nowrap; | |
| 1073 | + overflow: hidden; | |
| 1074 | + text-overflow: ellipsis; | |
| 1075 | +} | |
| 1076 | +.fr-container .bg-white { | |
| 1077 | + background-color: #fff; | |
| 1078 | +} | |
| 1079 | +.fr-container .pointer:hover { | |
| 1080 | + cursor: pointer; | |
| 1081 | +} | |
| 1082 | +.fr-container .link { | |
| 1083 | + color: #1890ff; | |
| 1084 | + font-size: 14px; | |
| 1085 | +} | |
| 1086 | +.fr-container .link:hover { | |
| 1087 | + color: #40a9ff; | |
| 1088 | + font-size: 14px; | |
| 1089 | +} | ... | ... |
es/connectForm.js
0 → 100644
| 1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 2 | + | |
| 3 | +import React, { forwardRef } from 'react'; | |
| 4 | +import useForm from './useForm'; | |
| 5 | + | |
| 6 | +var connectForm = function connectForm(Component) { | |
| 7 | + return /*#__PURE__*/forwardRef(function (props, ref) { | |
| 8 | + var form = useForm(); | |
| 9 | + return /*#__PURE__*/React.createElement(Component, _extends({ | |
| 10 | + ref: ref | |
| 11 | + }, props, { | |
| 12 | + form: form | |
| 13 | + })); | |
| 14 | + }); | |
| 15 | +}; | |
| 16 | + | |
| 17 | +export default connectForm; | |
| \ No newline at end of file | ... | ... |
| 1 | +import "antd/es/button/style"; | |
| 2 | +import _Button from "antd/es/button"; | |
| 3 | +import "antd/es/space/style"; | |
| 4 | +import _Space from "antd/es/space"; | |
| 5 | +import _ArrowDownOutlined from "@ant-design/icons/es/icons/ArrowDownOutlined"; | |
| 6 | +import _ArrowUpOutlined from "@ant-design/icons/es/icons/ArrowUpOutlined"; | |
| 7 | +import _CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined"; | |
| 8 | +import "antd/es/popconfirm/style"; | |
| 9 | +import _Popconfirm from "antd/es/popconfirm"; | |
| 10 | +import _DeleteOutlined from "@ant-design/icons/es/icons/DeleteOutlined"; | |
| 11 | + | |
| 12 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 13 | + | |
| 14 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 15 | + | |
| 16 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 17 | + | |
| 18 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 19 | + | |
| 20 | +function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | |
| 21 | + | |
| 22 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | |
| 23 | +import React from 'react'; | |
| 24 | +import Core from '../../index'; | |
| 25 | + | |
| 26 | +var CardList = function CardList(_ref) { | |
| 27 | + var _ref$displayList = _ref.displayList, | |
| 28 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | |
| 29 | + listData = _ref.listData, | |
| 30 | + changeList = _ref.changeList, | |
| 31 | + schema = _ref.schema, | |
| 32 | + deleteItem = _ref.deleteItem, | |
| 33 | + copyItem = _ref.copyItem, | |
| 34 | + addItem = _ref.addItem, | |
| 35 | + moveItemUp = _ref.moveItemUp, | |
| 36 | + moveItemDown = _ref.moveItemDown, | |
| 37 | + displayType = _ref.displayType, | |
| 38 | + getFieldsProps = _ref.getFieldsProps; | |
| 39 | + var _schema$props = schema.props, | |
| 40 | + props = _schema$props === void 0 ? {} : _schema$props, | |
| 41 | + itemProps = schema.itemProps; | |
| 42 | + var addBtnProps = { | |
| 43 | + type: 'dashed', | |
| 44 | + children: '新增一条' | |
| 45 | + }; | |
| 46 | + | |
| 47 | + if (props.addBtnProps && _typeof(props.addBtnProps) === 'object') { | |
| 48 | + addBtnProps = _objectSpread(_objectSpread({}, addBtnProps), props.addBtnProps); | |
| 49 | + } | |
| 50 | + | |
| 51 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
| 52 | + className: "fr-card-list" | |
| 53 | + }, displayList.map(function (item, idx) { | |
| 54 | + var fieldsProps = getFieldsProps(idx); | |
| 55 | + fieldsProps.displayType = displayType; | |
| 56 | + return /*#__PURE__*/React.createElement("div", { | |
| 57 | + className: "fr-card-item ".concat(displayType === 'row' ? 'fr-card-item-row' : ''), | |
| 58 | + key: idx | |
| 59 | + }, /*#__PURE__*/React.createElement("div", { | |
| 60 | + className: "fr-card-index" | |
| 61 | + }, idx + 1), /*#__PURE__*/React.createElement(Core, fieldsProps), /*#__PURE__*/React.createElement(_Space, { | |
| 62 | + direction: "horizontal", | |
| 63 | + className: "fr-card-toolbar" | |
| 64 | + }, !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | |
| 65 | + title: "\u786E\u5B9A\u5220\u9664?", | |
| 66 | + onConfirm: function onConfirm() { | |
| 67 | + return deleteItem(idx); | |
| 68 | + }, | |
| 69 | + okText: "\u786E\u5B9A", | |
| 70 | + cancelText: "\u53D6\u6D88" | |
| 71 | + }, /*#__PURE__*/React.createElement(_DeleteOutlined, { | |
| 72 | + style: { | |
| 73 | + fontSize: 17, | |
| 74 | + marginLeft: 8 | |
| 75 | + } | |
| 76 | + })), !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement(_CopyOutlined, { | |
| 77 | + style: { | |
| 78 | + fontSize: 16, | |
| 79 | + marginLeft: 8 | |
| 80 | + }, | |
| 81 | + onClick: function onClick() { | |
| 82 | + return copyItem(idx); | |
| 83 | + } | |
| 84 | + }), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | |
| 85 | + style: { | |
| 86 | + fontSize: 16, | |
| 87 | + marginLeft: 4 | |
| 88 | + }, | |
| 89 | + onClick: function onClick() { | |
| 90 | + return moveItemUp(idx); | |
| 91 | + } | |
| 92 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | |
| 93 | + style: { | |
| 94 | + fontSize: 16, | |
| 95 | + marginLeft: 4 | |
| 96 | + }, | |
| 97 | + onClick: function onClick() { | |
| 98 | + return moveItemDown(idx); | |
| 99 | + } | |
| 100 | + })))); | |
| 101 | + })), /*#__PURE__*/React.createElement("div", { | |
| 102 | + style: { | |
| 103 | + marginTop: displayList.length > 0 ? 0 : 8 | |
| 104 | + } | |
| 105 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, _extends({ | |
| 106 | + onClick: addItem | |
| 107 | + }, addBtnProps)), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
| 108 | + var callback = item.callback, | |
| 109 | + text = item.text, | |
| 110 | + html = item.html; | |
| 111 | + | |
| 112 | + var onClick = function onClick() { | |
| 113 | + console.log({ | |
| 114 | + value: listData, | |
| 115 | + onChange: changeList, | |
| 116 | + schema: schema | |
| 117 | + }); | |
| 118 | + }; | |
| 119 | + | |
| 120 | + if (typeof window[callback] === 'function') { | |
| 121 | + onClick = function onClick() { | |
| 122 | + window[callback]({ | |
| 123 | + value: listData, | |
| 124 | + onChange: changeList, | |
| 125 | + schema: schema | |
| 126 | + }); | |
| 127 | + }; | |
| 128 | + } | |
| 129 | + | |
| 130 | + return /*#__PURE__*/React.createElement(_Button, { | |
| 131 | + key: idx.toString(), | |
| 132 | + style: { | |
| 133 | + marginLeft: 8 | |
| 134 | + }, | |
| 135 | + type: "dashed", | |
| 136 | + onClick: onClick | |
| 137 | + }, /*#__PURE__*/React.createElement("span", { | |
| 138 | + dangerouslySetInnerHTML: { | |
| 139 | + __html: html || text | |
| 140 | + } | |
| 141 | + })); | |
| 142 | + }) : null)); | |
| 143 | +}; | |
| 144 | + | |
| 145 | +export default CardList; | |
| \ No newline at end of file | ... | ... |
| 1 | +import "antd/es/table/style"; | |
| 2 | +import _Table from "antd/es/table"; | |
| 3 | +import "antd/es/drawer/style"; | |
| 4 | +import _Drawer from "antd/es/drawer"; | |
| 5 | +import "antd/es/button/style"; | |
| 6 | +import _Button from "antd/es/button"; | |
| 7 | +import "antd/es/space/style"; | |
| 8 | +import _Space from "antd/es/space"; | |
| 9 | +import _ArrowDownOutlined from "@ant-design/icons/es/icons/ArrowDownOutlined"; | |
| 10 | +import _ArrowUpOutlined from "@ant-design/icons/es/icons/ArrowUpOutlined"; | |
| 11 | +import "antd/es/popconfirm/style"; | |
| 12 | +import _Popconfirm from "antd/es/popconfirm"; | |
| 13 | +var _excluded = ["buttons"], | |
| 14 | + _excluded2 = ["pagination"]; | |
| 15 | + | |
| 16 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 17 | + | |
| 18 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | |
| 19 | + | |
| 20 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 21 | + | |
| 22 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | |
| 23 | + | |
| 24 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | |
| 25 | + | |
| 26 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | |
| 27 | + | |
| 28 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | |
| 29 | + | |
| 30 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 31 | + | |
| 32 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 33 | + | |
| 34 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 35 | + | |
| 36 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | |
| 37 | + | |
| 38 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | |
| 39 | + | |
| 40 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | |
| 41 | +import React, { useRef } from 'react'; | |
| 42 | +import Core from '../../index'; | |
| 43 | +import { useSet } from '../../../hooks'; | |
| 44 | +import { getDataPath, getKeyFromPath, getDisplayValue } from '../../../utils'; | |
| 45 | +import ErrorMessage from '../../RenderField/ErrorMessage'; | |
| 46 | +var FIELD_LENGTH = 170; | |
| 47 | + | |
| 48 | +var DrawerList = function DrawerList(_ref) { | |
| 49 | + var _extends2; | |
| 50 | + | |
| 51 | + var _ref$displayList = _ref.displayList, | |
| 52 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | |
| 53 | + dataPath = _ref.dataPath, | |
| 54 | + children = _ref.children, | |
| 55 | + deleteItem = _ref.deleteItem, | |
| 56 | + addItem = _ref.addItem, | |
| 57 | + moveItemDown = _ref.moveItemDown, | |
| 58 | + moveItemUp = _ref.moveItemUp, | |
| 59 | + flatten = _ref.flatten, | |
| 60 | + errorFields = _ref.errorFields, | |
| 61 | + getFieldsProps = _ref.getFieldsProps, | |
| 62 | + schema = _ref.schema, | |
| 63 | + changeList = _ref.changeList, | |
| 64 | + listData = _ref.listData; | |
| 65 | + var _schema$props = schema.props, | |
| 66 | + props = _schema$props === void 0 ? {} : _schema$props, | |
| 67 | + _schema$itemProps = schema.itemProps, | |
| 68 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps; | |
| 69 | + | |
| 70 | + var buttons = itemProps.buttons, | |
| 71 | + columnProps = _objectWithoutProperties(itemProps, _excluded); | |
| 72 | + | |
| 73 | + var _props$pagination = props.pagination, | |
| 74 | + pagination = _props$pagination === void 0 ? {} : _props$pagination, | |
| 75 | + rest = _objectWithoutProperties(props, _excluded2); | |
| 76 | + | |
| 77 | + var paginationConfig = pagination && _objectSpread({ | |
| 78 | + size: 'small', | |
| 79 | + hideOnSinglePage: true | |
| 80 | + }, pagination); | |
| 81 | + | |
| 82 | + var currentIndex = useRef(-1); | |
| 83 | + | |
| 84 | + var _useSet = useSet({ | |
| 85 | + showDrawer: false | |
| 86 | + }), | |
| 87 | + _useSet2 = _slicedToArray(_useSet, 2), | |
| 88 | + state = _useSet2[0], | |
| 89 | + setState = _useSet2[1]; | |
| 90 | + | |
| 91 | + var showDrawer = state.showDrawer; | |
| 92 | + var dataSource = displayList.map(function (item, index) { | |
| 93 | + return _objectSpread(_objectSpread({}, item), {}, { | |
| 94 | + $idx: index | |
| 95 | + }); | |
| 96 | + }); | |
| 97 | + var columns = children.map(function (child) { | |
| 98 | + var item = flatten[child]; | |
| 99 | + var schema = item && item.schema || {}; | |
| 100 | + | |
| 101 | + var _dataIndex = getKeyFromPath(child); | |
| 102 | + | |
| 103 | + return _objectSpread({ | |
| 104 | + dataIndex: _dataIndex, | |
| 105 | + title: schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | |
| 106 | + className: "fr-label-required" | |
| 107 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title, | |
| 108 | + width: FIELD_LENGTH, | |
| 109 | + render: function render(value, record) { | |
| 110 | + var childPath = getDataPath(child, [record.$idx]); | |
| 111 | + var errorObj = errorFields.find(function (item) { | |
| 112 | + return item.name == childPath; | |
| 113 | + }) || {}; //TODO: 万一error在更深的层,这个办法是find不到的,会展示那一行没有提示。可以整一行加一个红线的方式处理 | |
| 114 | + | |
| 115 | + return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, getDisplayValue(value, schema)), errorObj.error && /*#__PURE__*/React.createElement(ErrorMessage, { | |
| 116 | + message: errorObj.error, | |
| 117 | + schema: schema | |
| 118 | + })); | |
| 119 | + } | |
| 120 | + }, columnProps); | |
| 121 | + }); | |
| 122 | + columns.push({ | |
| 123 | + title: '操作', | |
| 124 | + key: '$action', | |
| 125 | + fixed: 'right', | |
| 126 | + width: 120, | |
| 127 | + render: function render(value, record, idx) { | |
| 128 | + var index = value && value.$idx || 0; | |
| 129 | + return /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement("a", { | |
| 130 | + onClick: function onClick() { | |
| 131 | + return openDrawer(index); | |
| 132 | + } | |
| 133 | + }, "\u7F16\u8F91"), !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | |
| 134 | + title: "\u786E\u5B9A\u5220\u9664?", | |
| 135 | + onConfirm: function onConfirm() { | |
| 136 | + return deleteItem(index); | |
| 137 | + }, | |
| 138 | + okText: "\u786E\u5B9A", | |
| 139 | + cancelText: "\u53D6\u6D88" | |
| 140 | + }, /*#__PURE__*/React.createElement("a", null, "\u5220\u9664")), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | |
| 141 | + style: { | |
| 142 | + color: '#1890ff', | |
| 143 | + fontSize: 16, | |
| 144 | + marginLeft: 4 | |
| 145 | + }, | |
| 146 | + onClick: function onClick() { | |
| 147 | + return moveItemUp(idx); | |
| 148 | + } | |
| 149 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | |
| 150 | + style: { | |
| 151 | + color: '#1890ff', | |
| 152 | + fontSize: 16, | |
| 153 | + marginLeft: 4 | |
| 154 | + }, | |
| 155 | + onClick: function onClick() { | |
| 156 | + return moveItemDown(idx); | |
| 157 | + } | |
| 158 | + }))); | |
| 159 | + } | |
| 160 | + }); | |
| 161 | + var fieldsProps = getFieldsProps(currentIndex.current); | |
| 162 | + | |
| 163 | + var openDrawer = function openDrawer(index) { | |
| 164 | + currentIndex.current = index; | |
| 165 | + setState({ | |
| 166 | + showDrawer: true | |
| 167 | + }); | |
| 168 | + }; | |
| 169 | + | |
| 170 | + var closeDrawer = function closeDrawer() { | |
| 171 | + currentIndex.current = -1; | |
| 172 | + setState({ | |
| 173 | + showDrawer: false | |
| 174 | + }); | |
| 175 | + }; | |
| 176 | + | |
| 177 | + var handleAdd = function handleAdd() { | |
| 178 | + var newIndex = addItem(); | |
| 179 | + openDrawer(newIndex); | |
| 180 | + }; | |
| 181 | + | |
| 182 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
| 183 | + className: "w-100 mb2 tr" | |
| 184 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, { | |
| 185 | + type: "primary", | |
| 186 | + size: "small", | |
| 187 | + onClick: handleAdd | |
| 188 | + }, "\u65B0\u589E"), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
| 189 | + var callback = item.callback, | |
| 190 | + text = item.text, | |
| 191 | + html = item.html; | |
| 192 | + | |
| 193 | + var onClick = function onClick() { | |
| 194 | + console.log({ | |
| 195 | + value: listData, | |
| 196 | + onChange: changeList, | |
| 197 | + schema: schema | |
| 198 | + }); | |
| 199 | + }; | |
| 200 | + | |
| 201 | + if (typeof window[callback] === 'function') { | |
| 202 | + onClick = function onClick() { | |
| 203 | + window[callback]({ | |
| 204 | + value: listData, | |
| 205 | + onChange: changeList, | |
| 206 | + schema: schema | |
| 207 | + }); | |
| 208 | + }; | |
| 209 | + } | |
| 210 | + | |
| 211 | + return /*#__PURE__*/React.createElement(_Button, { | |
| 212 | + key: idx.toString(), | |
| 213 | + style: { | |
| 214 | + marginLeft: 8 | |
| 215 | + }, | |
| 216 | + size: "small", | |
| 217 | + onClick: onClick | |
| 218 | + }, /*#__PURE__*/React.createElement("span", { | |
| 219 | + dangerouslySetInnerHTML: { | |
| 220 | + __html: html || text | |
| 221 | + } | |
| 222 | + })); | |
| 223 | + }) : null), /*#__PURE__*/React.createElement(_Drawer, { | |
| 224 | + width: "600", | |
| 225 | + title: "\u7F16\u8F91", | |
| 226 | + placement: "right", | |
| 227 | + onClose: closeDrawer, | |
| 228 | + visible: showDrawer, | |
| 229 | + destroyOnClose: true // 必须要加,currentIndex不是一个state,Core不会重新渲染就跪了 | |
| 230 | + | |
| 231 | + }, /*#__PURE__*/React.createElement("div", { | |
| 232 | + className: "fr-container" | |
| 233 | + }, /*#__PURE__*/React.createElement(Core, fieldsProps))), /*#__PURE__*/React.createElement(_Table, _extends((_extends2 = { | |
| 234 | + size: "small", | |
| 235 | + scroll: { | |
| 236 | + x: 'max-content' | |
| 237 | + }, | |
| 238 | + columns: columns, | |
| 239 | + dataSource: dataSource, | |
| 240 | + rowClassName: function rowClassName(record, idx) { | |
| 241 | + var index = record && record.$idx; | |
| 242 | + var hasError = errorFields.find(function (item) { | |
| 243 | + return item.name.indexOf("".concat(dataPath, "[").concat(index, "]")) > -1; | |
| 244 | + }); | |
| 245 | + return hasError ? 'fr-row-error' : ''; | |
| 246 | + }, | |
| 247 | + rowKey: "$idx" | |
| 248 | + }, _defineProperty(_extends2, "size", "small"), _defineProperty(_extends2, "pagination", paginationConfig), _extends2), rest))); | |
| 249 | +}; | |
| 250 | + | |
| 251 | +export default DrawerList; | |
| \ No newline at end of file | ... | ... |
| 1 | +import "antd/es/button/style"; | |
| 2 | +import _Button from "antd/es/button"; | |
| 3 | +import _ArrowDownOutlined from "@ant-design/icons/es/icons/ArrowDownOutlined"; | |
| 4 | +import _ArrowUpOutlined from "@ant-design/icons/es/icons/ArrowUpOutlined"; | |
| 5 | +import _CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined"; | |
| 6 | +import "antd/es/popconfirm/style"; | |
| 7 | +import _Popconfirm from "antd/es/popconfirm"; | |
| 8 | +import _DeleteOutlined from "@ant-design/icons/es/icons/DeleteOutlined"; | |
| 9 | + | |
| 10 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 11 | + | |
| 12 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 13 | + | |
| 14 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 15 | + | |
| 16 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 17 | + | |
| 18 | +function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | |
| 19 | + | |
| 20 | +import React from 'react'; | |
| 21 | +import Core from '../../index'; | |
| 22 | + | |
| 23 | +var SimpleList = function SimpleList(_ref) { | |
| 24 | + var schema = _ref.schema, | |
| 25 | + _ref$displayList = _ref.displayList, | |
| 26 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | |
| 27 | + listData = _ref.listData, | |
| 28 | + changeList = _ref.changeList, | |
| 29 | + deleteItem = _ref.deleteItem, | |
| 30 | + addItem = _ref.addItem, | |
| 31 | + copyItem = _ref.copyItem, | |
| 32 | + moveItemUp = _ref.moveItemUp, | |
| 33 | + moveItemDown = _ref.moveItemDown, | |
| 34 | + getFieldsProps = _ref.getFieldsProps; | |
| 35 | + var _schema$props = schema.props, | |
| 36 | + props = _schema$props === void 0 ? {} : _schema$props, | |
| 37 | + itemProps = schema.itemProps; | |
| 38 | + var addBtnProps = { | |
| 39 | + type: 'dashed', | |
| 40 | + children: '新增一条' | |
| 41 | + }; | |
| 42 | + | |
| 43 | + if (props.addBtnProps && _typeof(props.addBtnProps) === 'object') { | |
| 44 | + addBtnProps = _objectSpread(_objectSpread({}, addBtnProps), props.addBtnProps); | |
| 45 | + } | |
| 46 | + | |
| 47 | + return /*#__PURE__*/React.createElement("div", { | |
| 48 | + className: "fr-list-1" | |
| 49 | + }, displayList.map(function (item, idx) { | |
| 50 | + var fieldsProps = getFieldsProps(idx); | |
| 51 | + fieldsProps.displayType = 'inline'; | |
| 52 | + | |
| 53 | + if (props.hideTitle) { | |
| 54 | + fieldsProps.hideTitle = true; | |
| 55 | + } | |
| 56 | + | |
| 57 | + return /*#__PURE__*/React.createElement("div", { | |
| 58 | + key: idx, | |
| 59 | + style: { | |
| 60 | + display: 'flex' | |
| 61 | + } | |
| 62 | + }, /*#__PURE__*/React.createElement(Core, fieldsProps), /*#__PURE__*/React.createElement("div", { | |
| 63 | + style: { | |
| 64 | + marginTop: 6 | |
| 65 | + } | |
| 66 | + }, !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | |
| 67 | + title: "\u786E\u5B9A\u5220\u9664?", | |
| 68 | + onConfirm: function onConfirm() { | |
| 69 | + return deleteItem(idx); | |
| 70 | + }, | |
| 71 | + okText: "\u786E\u5B9A", | |
| 72 | + cancelText: "\u53D6\u6D88" | |
| 73 | + }, /*#__PURE__*/React.createElement(_DeleteOutlined, { | |
| 74 | + style: { | |
| 75 | + fontSize: 17, | |
| 76 | + marginLeft: 8 | |
| 77 | + } | |
| 78 | + })), !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement(_CopyOutlined, { | |
| 79 | + style: { | |
| 80 | + fontSize: 15, | |
| 81 | + marginLeft: 8 | |
| 82 | + }, | |
| 83 | + onClick: function onClick() { | |
| 84 | + return copyItem(idx); | |
| 85 | + } | |
| 86 | + }), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | |
| 87 | + style: { | |
| 88 | + fontSize: 16, | |
| 89 | + marginLeft: 8 | |
| 90 | + }, | |
| 91 | + onClick: function onClick() { | |
| 92 | + return moveItemUp(idx); | |
| 93 | + } | |
| 94 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | |
| 95 | + style: { | |
| 96 | + fontSize: 16, | |
| 97 | + marginLeft: 8 | |
| 98 | + }, | |
| 99 | + onClick: function onClick() { | |
| 100 | + return moveItemDown(idx); | |
| 101 | + } | |
| 102 | + })))); | |
| 103 | + }), /*#__PURE__*/React.createElement("div", { | |
| 104 | + style: { | |
| 105 | + marginTop: displayList.length > 0 ? 0 : 8 | |
| 106 | + } | |
| 107 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, _extends({ | |
| 108 | + onClick: addItem | |
| 109 | + }, addBtnProps)), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
| 110 | + var callback = item.callback, | |
| 111 | + text = item.text, | |
| 112 | + html = item.html; | |
| 113 | + | |
| 114 | + var onClick = function onClick() { | |
| 115 | + console.log({ | |
| 116 | + value: listData, | |
| 117 | + onChange: changeList, | |
| 118 | + schema: schema | |
| 119 | + }); | |
| 120 | + }; | |
| 121 | + | |
| 122 | + if (typeof window[callback] === 'function') { | |
| 123 | + onClick = function onClick() { | |
| 124 | + window[callback]({ | |
| 125 | + value: listData, | |
| 126 | + onChange: changeList, | |
| 127 | + schema: schema | |
| 128 | + }); | |
| 129 | + }; | |
| 130 | + } | |
| 131 | + | |
| 132 | + return /*#__PURE__*/React.createElement(_Button, { | |
| 133 | + key: idx.toString(), | |
| 134 | + style: { | |
| 135 | + marginLeft: 8 | |
| 136 | + }, | |
| 137 | + type: "dashed", | |
| 138 | + onClick: onClick | |
| 139 | + }, /*#__PURE__*/React.createElement("span", { | |
| 140 | + dangerouslySetInnerHTML: { | |
| 141 | + __html: html || text | |
| 142 | + } | |
| 143 | + })); | |
| 144 | + }) : null)); | |
| 145 | +}; | |
| 146 | + | |
| 147 | +export default SimpleList; | |
| \ No newline at end of file | ... | ... |
| 1 | +import "antd/es/table/style"; | |
| 2 | +import _Table from "antd/es/table"; | |
| 3 | +import "antd/es/button/style"; | |
| 4 | +import _Button from "antd/es/button"; | |
| 5 | +import "antd/es/space/style"; | |
| 6 | +import _Space from "antd/es/space"; | |
| 7 | +import _ArrowDownOutlined from "@ant-design/icons/es/icons/ArrowDownOutlined"; | |
| 8 | +import _ArrowUpOutlined from "@ant-design/icons/es/icons/ArrowUpOutlined"; | |
| 9 | +import "antd/es/popconfirm/style"; | |
| 10 | +import _Popconfirm from "antd/es/popconfirm"; | |
| 11 | +var _excluded = ["buttons"], | |
| 12 | + _excluded2 = ["pagination"]; | |
| 13 | + | |
| 14 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 15 | + | |
| 16 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | |
| 17 | + | |
| 18 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 19 | + | |
| 20 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | |
| 21 | + | |
| 22 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | |
| 23 | + | |
| 24 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | |
| 25 | + | |
| 26 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | |
| 27 | + | |
| 28 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 29 | + | |
| 30 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 31 | + | |
| 32 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 33 | + | |
| 34 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | |
| 35 | + | |
| 36 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | |
| 37 | + | |
| 38 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | |
| 39 | +import React from 'react'; | |
| 40 | +import Core from '../../index'; | |
| 41 | +// import ArrowDown from '../../../components/ArrowDown'; | |
| 42 | +var FIELD_LENGTH = 170; | |
| 43 | + | |
| 44 | +var TableList = function TableList(_ref) { | |
| 45 | + var _ref$displayList = _ref.displayList, | |
| 46 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | |
| 47 | + dataIndex = _ref.dataIndex, | |
| 48 | + children = _ref.children, | |
| 49 | + deleteItem = _ref.deleteItem, | |
| 50 | + copyItem = _ref.copyItem, | |
| 51 | + addItem = _ref.addItem, | |
| 52 | + moveItemUp = _ref.moveItemUp, | |
| 53 | + moveItemDown = _ref.moveItemDown, | |
| 54 | + flatten = _ref.flatten, | |
| 55 | + schema = _ref.schema, | |
| 56 | + listData = _ref.listData, | |
| 57 | + changeList = _ref.changeList; | |
| 58 | + var _schema$props = schema.props, | |
| 59 | + props = _schema$props === void 0 ? {} : _schema$props, | |
| 60 | + _schema$itemProps = schema.itemProps, | |
| 61 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps; | |
| 62 | + | |
| 63 | + var buttons = itemProps.buttons, | |
| 64 | + columnProps = _objectWithoutProperties(itemProps, _excluded); | |
| 65 | + | |
| 66 | + var _props$pagination = props.pagination, | |
| 67 | + pagination = _props$pagination === void 0 ? {} : _props$pagination, | |
| 68 | + rest = _objectWithoutProperties(props, _excluded2); | |
| 69 | + | |
| 70 | + var paginationConfig = pagination && _objectSpread({ | |
| 71 | + size: 'small', | |
| 72 | + hideOnSinglePage: true | |
| 73 | + }, pagination); | |
| 74 | + | |
| 75 | + var dataSource = displayList.map(function (item, idx) { | |
| 76 | + return { | |
| 77 | + index: idx | |
| 78 | + }; | |
| 79 | + }); | |
| 80 | + var columns = children.map(function (child) { | |
| 81 | + var item = flatten[child]; | |
| 82 | + var schema = item && item.schema || {}; | |
| 83 | + return _objectSpread({ | |
| 84 | + dataIndex: child, | |
| 85 | + title: schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | |
| 86 | + className: "fr-label-required" | |
| 87 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title, | |
| 88 | + width: FIELD_LENGTH, | |
| 89 | + render: function render(value, record, index) { | |
| 90 | + // Check: record.index 似乎是antd自己会给的,不错哦 | |
| 91 | + var childIndex = [].concat(_toConsumableArray(dataIndex), [record.index]); | |
| 92 | + return /*#__PURE__*/React.createElement(Core, { | |
| 93 | + hideTitle: true, | |
| 94 | + displayType: "inline", | |
| 95 | + key: index.toString(), | |
| 96 | + id: child, | |
| 97 | + dataIndex: childIndex | |
| 98 | + }); | |
| 99 | + } | |
| 100 | + }, columnProps); | |
| 101 | + }); | |
| 102 | + | |
| 103 | + if (!props.hideDelete || !props.hideAdd || !props.hideCopy || !props.hideMove) { | |
| 104 | + columns.push({ | |
| 105 | + title: '操作', | |
| 106 | + key: '$action', | |
| 107 | + fixed: 'right', | |
| 108 | + width: 120, | |
| 109 | + render: function render(value, record, idx) { | |
| 110 | + return /*#__PURE__*/React.createElement(_Space, null, !props.hideAdd && !props.hideCopy && /*#__PURE__*/React.createElement("a", { | |
| 111 | + onClick: function onClick() { | |
| 112 | + return copyItem(idx); | |
| 113 | + } | |
| 114 | + }, "\u590D\u5236"), !props.hideDelete && /*#__PURE__*/React.createElement(_Popconfirm, { | |
| 115 | + title: "\u786E\u5B9A\u5220\u9664?", | |
| 116 | + onConfirm: function onConfirm() { | |
| 117 | + return deleteItem(idx); | |
| 118 | + }, | |
| 119 | + okText: "\u786E\u5B9A", | |
| 120 | + cancelText: "\u53D6\u6D88" | |
| 121 | + }, /*#__PURE__*/React.createElement("a", null, "\u5220\u9664")), !props.hideMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ArrowUpOutlined, { | |
| 122 | + style: { | |
| 123 | + color: '#1890ff', | |
| 124 | + fontSize: 16, | |
| 125 | + marginLeft: 4 | |
| 126 | + }, | |
| 127 | + onClick: function onClick() { | |
| 128 | + return moveItemUp(idx); | |
| 129 | + } | |
| 130 | + }), /*#__PURE__*/React.createElement(_ArrowDownOutlined, { | |
| 131 | + style: { | |
| 132 | + color: '#1890ff', | |
| 133 | + fontSize: 16, | |
| 134 | + marginLeft: 4 | |
| 135 | + }, | |
| 136 | + onClick: function onClick() { | |
| 137 | + return moveItemDown(idx); | |
| 138 | + } | |
| 139 | + }))); | |
| 140 | + } | |
| 141 | + }); | |
| 142 | + } | |
| 143 | + | |
| 144 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
| 145 | + className: "w-100 mb2 tr" | |
| 146 | + }, !props.hideAdd && /*#__PURE__*/React.createElement(_Button, { | |
| 147 | + type: "primary", | |
| 148 | + size: "small", | |
| 149 | + onClick: addItem | |
| 150 | + }, "\u65B0\u589E"), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
| 151 | + var callback = item.callback, | |
| 152 | + text = item.text, | |
| 153 | + html = item.html; | |
| 154 | + | |
| 155 | + var onClick = function onClick() { | |
| 156 | + console.log({ | |
| 157 | + value: listData, | |
| 158 | + onChange: changeList, | |
| 159 | + schema: schema | |
| 160 | + }); | |
| 161 | + }; | |
| 162 | + | |
| 163 | + if (typeof window[callback] === 'function') { | |
| 164 | + onClick = function onClick() { | |
| 165 | + window[callback]({ | |
| 166 | + value: listData, | |
| 167 | + onChange: changeList, | |
| 168 | + schema: schema | |
| 169 | + }); | |
| 170 | + }; | |
| 171 | + } | |
| 172 | + | |
| 173 | + return /*#__PURE__*/React.createElement(_Button, { | |
| 174 | + key: idx.toString(), | |
| 175 | + style: { | |
| 176 | + marginLeft: 8 | |
| 177 | + }, | |
| 178 | + size: "small", | |
| 179 | + onClick: onClick | |
| 180 | + }, /*#__PURE__*/React.createElement("span", { | |
| 181 | + dangerouslySetInnerHTML: { | |
| 182 | + __html: html || text | |
| 183 | + } | |
| 184 | + })); | |
| 185 | + }) : null), /*#__PURE__*/React.createElement(_Table, _extends({ | |
| 186 | + scroll: { | |
| 187 | + x: 'max-content' | |
| 188 | + }, | |
| 189 | + columns: columns, | |
| 190 | + dataSource: dataSource, | |
| 191 | + rowKey: "index", | |
| 192 | + size: "small", | |
| 193 | + pagination: paginationConfig | |
| 194 | + }, rest))); | |
| 195 | +}; | |
| 196 | + | |
| 197 | +export default TableList; | |
| \ No newline at end of file | ... | ... |
| 1 | +import "antd/es/table/style"; | |
| 2 | +import _Table from "antd/es/table"; | |
| 3 | +import "antd/es/alert/style"; | |
| 4 | +import _Alert from "antd/es/alert"; | |
| 5 | +import "antd/es/message/style"; | |
| 6 | +import _message from "antd/es/message"; | |
| 7 | +import "antd/es/input/style"; | |
| 8 | +import _Input from "antd/es/input"; | |
| 9 | +import _SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined"; | |
| 10 | +import "antd/es/tooltip/style"; | |
| 11 | +import _Tooltip from "antd/es/tooltip"; | |
| 12 | +import "antd/es/button/style"; | |
| 13 | +import _Button from "antd/es/button"; | |
| 14 | +import _ExclamationCircleOutlined from "@ant-design/icons/es/icons/ExclamationCircleOutlined"; | |
| 15 | +import _SelectOutlined from "@ant-design/icons/es/icons/SelectOutlined"; | |
| 16 | +import _ExpandAltOutlined from "@ant-design/icons/es/icons/ExpandAltOutlined"; | |
| 17 | +import _EditOutlined from "@ant-design/icons/es/icons/EditOutlined"; | |
| 18 | +import _EyeOutlined from "@ant-design/icons/es/icons/EyeOutlined"; | |
| 19 | +import _CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined"; | |
| 20 | +import _PlusOutlined from "@ant-design/icons/es/icons/PlusOutlined"; | |
| 21 | +import _DeleteOutlined from "@ant-design/icons/es/icons/DeleteOutlined"; | |
| 22 | +import _ImportOutlined from "@ant-design/icons/es/icons/ImportOutlined"; | |
| 23 | +import _ExportOutlined from "@ant-design/icons/es/icons/ExportOutlined"; | |
| 24 | +import "antd/es/modal/style"; | |
| 25 | +import _Modal from "antd/es/modal"; | |
| 26 | +var _excluded = ["scrollY", "summary", "batchKey", "bar", "line", "searchKey", "rowSelection"]; | |
| 27 | + | |
| 28 | +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } | |
| 29 | + | |
| 30 | +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } | |
| 31 | + | |
| 32 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 33 | + | |
| 34 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | |
| 35 | + | |
| 36 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 37 | + | |
| 38 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | |
| 39 | + | |
| 40 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | |
| 41 | + | |
| 42 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 43 | + | |
| 44 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 45 | + | |
| 46 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 47 | + | |
| 48 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | |
| 49 | + | |
| 50 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 51 | + | |
| 52 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | |
| 53 | + | |
| 54 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | |
| 55 | + | |
| 56 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | |
| 57 | + | |
| 58 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | |
| 59 | + | |
| 60 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | |
| 61 | + | |
| 62 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | |
| 63 | + | |
| 64 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | |
| 65 | +import React, { useEffect, useMemo, useRef, useState } from 'react'; | |
| 66 | +import Core from '../../index'; | |
| 67 | +var confirm = _Modal.confirm; | |
| 68 | +import { useVT } from 'virtualizedtableforantd4'; | |
| 69 | +var BUTTON_ICONS_MAP = { | |
| 70 | + ExportOutlined: /*#__PURE__*/React.createElement(_ExportOutlined, null), | |
| 71 | + ImportOutlined: /*#__PURE__*/React.createElement(_ImportOutlined, null), | |
| 72 | + DeleteOutlined: /*#__PURE__*/React.createElement(_DeleteOutlined, null), | |
| 73 | + PlusOutlined: /*#__PURE__*/React.createElement(_PlusOutlined, null), | |
| 74 | + CopyOutlined: /*#__PURE__*/React.createElement(_CopyOutlined, null), | |
| 75 | + EyeOutlined: /*#__PURE__*/React.createElement(_EyeOutlined, null), | |
| 76 | + EditOutlined: /*#__PURE__*/React.createElement(_EditOutlined, null), | |
| 77 | + remove: /*#__PURE__*/React.createElement(_ExpandAltOutlined, null), | |
| 78 | + SelectOutlined: /*#__PURE__*/React.createElement(_SelectOutlined, null) | |
| 79 | +}; | |
| 80 | +var FIELD_LENGTH = 170; | |
| 81 | +var EXPORT_STATUS = { | |
| 82 | + // 执行中 | |
| 83 | + PROCESSING: 'info', | |
| 84 | + // 成功 | |
| 85 | + SUCCESS: 'success', | |
| 86 | + // 失败 | |
| 87 | + FAIL: 'error' | |
| 88 | +}; | |
| 89 | + | |
| 90 | +var VirtualList = function VirtualList(_ref) { | |
| 91 | + var _line$buttons; | |
| 92 | + | |
| 93 | + var _ref$displayList = _ref.displayList, | |
| 94 | + displayList = _ref$displayList === void 0 ? [] : _ref$displayList, | |
| 95 | + dataIndex = _ref.dataIndex, | |
| 96 | + children = _ref.children, | |
| 97 | + deleteItem = _ref.deleteItem, | |
| 98 | + batchDelete = _ref.batchDelete, | |
| 99 | + addItem = _ref.addItem, | |
| 100 | + moveItemUp = _ref.moveItemUp, | |
| 101 | + moveItemDown = _ref.moveItemDown, | |
| 102 | + flatten = _ref.flatten, | |
| 103 | + schema = _ref.schema, | |
| 104 | + listData = _ref.listData, | |
| 105 | + changeList = _ref.changeList, | |
| 106 | + copyItem = _ref.copyItem; | |
| 107 | + var _schema$props = schema.props, | |
| 108 | + props = _schema$props === void 0 ? {} : _schema$props, | |
| 109 | + _schema$itemProps = schema.itemProps, | |
| 110 | + itemProps = _schema$itemProps === void 0 ? {} : _schema$itemProps, | |
| 111 | + fieldName = schema.fieldName, | |
| 112 | + _schema$qxProps = schema.qxProps, | |
| 113 | + qxProps = _schema$qxProps === void 0 ? {} : _schema$qxProps, | |
| 114 | + subformMode = schema.subformMode; | |
| 115 | + | |
| 116 | + var _props$scrollY = props.scrollY, | |
| 117 | + scrollY = _props$scrollY === void 0 ? 600 : _props$scrollY, | |
| 118 | + _summary = props.summary, | |
| 119 | + batchKey = props.batchKey, | |
| 120 | + _props$bar = props.bar, | |
| 121 | + bar = _props$bar === void 0 ? {} : _props$bar, | |
| 122 | + _props$line = props.line, | |
| 123 | + line = _props$line === void 0 ? {} : _props$line, | |
| 124 | + searchKey = props.searchKey, | |
| 125 | + rowSelection = props.rowSelection, | |
| 126 | + rest = _objectWithoutProperties(props, _excluded); | |
| 127 | + | |
| 128 | + var _useVT = useVT(function () { | |
| 129 | + return { | |
| 130 | + scroll: { | |
| 131 | + y: scrollY | |
| 132 | + } | |
| 133 | + }; | |
| 134 | + }, []), | |
| 135 | + _useVT2 = _slicedToArray(_useVT, 2), | |
| 136 | + vt = _useVT2[0], | |
| 137 | + set_components = _useVT2[1]; | |
| 138 | + | |
| 139 | + var _useState = useState(''), | |
| 140 | + _useState2 = _slicedToArray(_useState, 2), | |
| 141 | + keyWord = _useState2[0], | |
| 142 | + setKeyWord = _useState2[1]; | |
| 143 | + | |
| 144 | + var _useState3 = useState([]), | |
| 145 | + _useState4 = _slicedToArray(_useState3, 2), | |
| 146 | + selectedRowKeys = _useState4[0], | |
| 147 | + setSelectedRowKeys = _useState4[1]; | |
| 148 | + | |
| 149 | + var _useState5 = useState(), | |
| 150 | + _useState6 = _slicedToArray(_useState5, 2), | |
| 151 | + exportProgressData = _useState6[0], | |
| 152 | + setProgressData = _useState6[1]; | |
| 153 | + | |
| 154 | + var _useState7 = useState(), | |
| 155 | + _useState8 = _slicedToArray(_useState7, 2), | |
| 156 | + intervalName = _useState8[0], | |
| 157 | + setIntervalName = _useState8[1]; | |
| 158 | + | |
| 159 | + var exportTaskId = useRef(''); | |
| 160 | + var newRowSelection = useMemo(function () { | |
| 161 | + var _bar$buttons; | |
| 162 | + | |
| 163 | + var _rowSelection = _.cloneDeep(rowSelection); // 根据是否含有批量操作按钮,渲染表格是否可选择 | |
| 164 | + | |
| 165 | + | |
| 166 | + var selectable = false; | |
| 167 | + | |
| 168 | + if (((_bar$buttons = bar.buttons) === null || _bar$buttons === void 0 ? void 0 : _bar$buttons.findIndex(function (item) { | |
| 169 | + return item.code === 'DELETE'; | |
| 170 | + })) > -1) { | |
| 171 | + selectable = true; | |
| 172 | + } | |
| 173 | + | |
| 174 | + if (_rowSelection && selectable) { | |
| 175 | + _rowSelection.onChange = function (_selectedRowKeys) { | |
| 176 | + setSelectedRowKeys(_selectedRowKeys); | |
| 177 | + }; | |
| 178 | + | |
| 179 | + _rowSelection.selectedRowKeys = selectedRowKeys; | |
| 180 | + } | |
| 181 | + | |
| 182 | + return _rowSelection; | |
| 183 | + }, [rowSelection, selectedRowKeys, bar]); | |
| 184 | + useEffect(function () { | |
| 185 | + displayList.forEach(function (item, index) { | |
| 186 | + item._index = index; | |
| 187 | + }); | |
| 188 | + }, [displayList]); | |
| 189 | + var _disdisplayList = []; | |
| 190 | + | |
| 191 | + if (props.originWidget === 'relSelector') { | |
| 192 | + displayList.forEach(function (item) { | |
| 193 | + if (!item.hasOwnProperty('$auth') || item.$auth) { | |
| 194 | + _disdisplayList.push(item); | |
| 195 | + } | |
| 196 | + }); | |
| 197 | + } else { | |
| 198 | + _disdisplayList = displayList; | |
| 199 | + } | |
| 200 | + | |
| 201 | + var selectedIds = useMemo(function () { | |
| 202 | + var _selectedIds = []; | |
| 203 | + displayList.forEach(function (item) { | |
| 204 | + if (selectedRowKeys.includes(item._index)) { | |
| 205 | + _selectedIds.push(item.id); | |
| 206 | + } | |
| 207 | + }); | |
| 208 | + return _selectedIds; | |
| 209 | + }, [selectedRowKeys, displayList]); | |
| 210 | + var dataSource = (keyWord.length ? _disdisplayList.filter(function (item) { | |
| 211 | + var _item$searchKey; | |
| 212 | + | |
| 213 | + return ((_item$searchKey = item[searchKey]) === null || _item$searchKey === void 0 ? void 0 : _item$searchKey.indexOf(keyWord)) > -1; | |
| 214 | + }) : _disdisplayList).map(function (item, idx) { | |
| 215 | + return _objectSpread({ | |
| 216 | + index: item._index || idx | |
| 217 | + }, item); | |
| 218 | + }); | |
| 219 | + var pagination = useMemo(function () { | |
| 220 | + return { | |
| 221 | + total: dataSource.length, | |
| 222 | + position: ['bottomRight'], | |
| 223 | + pageSize: 10, | |
| 224 | + showTotal: function showTotal(total) { | |
| 225 | + return "\u5171".concat(total, "\u6761\u8BB0\u5F55"); | |
| 226 | + }, | |
| 227 | + defaultCurrent: 1, | |
| 228 | + size: 'default' | |
| 229 | + }; | |
| 230 | + }, [dataSource]); | |
| 231 | + var barButtons = useMemo(function () { | |
| 232 | + var _barButtons = _.cloneDeep(bar.buttons || []); // 选择、新增位置提前 | |
| 233 | + | |
| 234 | + | |
| 235 | + ['ADD', 'SELECT'].forEach(function (code) { | |
| 236 | + var _index = _barButtons.findIndex(function (item) { | |
| 237 | + return item.code === code; | |
| 238 | + }); | |
| 239 | + | |
| 240 | + if (_index > -1) { | |
| 241 | + var btn = _barButtons.splice(_index, 1); | |
| 242 | + | |
| 243 | + _barButtons.unshift.apply(_barButtons, _toConsumableArray(btn)); | |
| 244 | + } | |
| 245 | + }); // 关联表的导入、导出不可用,先隐藏 TODO | |
| 246 | + | |
| 247 | + if (props.originWidget === 'relSelector') { | |
| 248 | + ['IMPORT', 'EXPORT'].forEach(function (code) { | |
| 249 | + var _index = _barButtons.findIndex(function (item) { | |
| 250 | + return item.code === code; | |
| 251 | + }); | |
| 252 | + | |
| 253 | + if (_index > -1) { | |
| 254 | + _barButtons.splice(_index, 1); | |
| 255 | + } | |
| 256 | + }); | |
| 257 | + } // 子表默认可以新增,删掉ADD按钮 | |
| 258 | + | |
| 259 | + | |
| 260 | + if (props.originWidget === 'subform') { | |
| 261 | + var _index = _barButtons.findIndex(function (item) { | |
| 262 | + return item.code === 'ADD'; | |
| 263 | + }); | |
| 264 | + | |
| 265 | + if (_index > -1) { | |
| 266 | + _barButtons.splice(_index, 1); | |
| 267 | + } | |
| 268 | + } | |
| 269 | + | |
| 270 | + if (batchKey) { | |
| 271 | + _barButtons.push({ | |
| 272 | + code: 'BATCH_ADD', | |
| 273 | + batch: true, | |
| 274 | + action: 'SYS', | |
| 275 | + name: '批量新增' | |
| 276 | + }); | |
| 277 | + } | |
| 278 | + | |
| 279 | + if (subformMode) { | |
| 280 | + _barButtons.push({ | |
| 281 | + code: 'subformEdit', | |
| 282 | + icon: 'EditOutlined', | |
| 283 | + batch: true, | |
| 284 | + action: 'SYS', | |
| 285 | + name: '子表编辑' | |
| 286 | + }); | |
| 287 | + } | |
| 288 | + | |
| 289 | + return _barButtons; | |
| 290 | + }, [props]); | |
| 291 | + var columns = children.map(function (child) { | |
| 292 | + var item = flatten[child]; | |
| 293 | + var schema = item && item.schema || {}; | |
| 294 | + return { | |
| 295 | + dataIndex: child, | |
| 296 | + width: schema.width ? Number(schema.width) || FIELD_LENGTH : FIELD_LENGTH, | |
| 297 | + align: schema.align || 'left', | |
| 298 | + fixed: schema.fixed, | |
| 299 | + title: /*#__PURE__*/React.createElement("div", { | |
| 300 | + style: { | |
| 301 | + width: (parseInt(schema.width) || FIELD_LENGTH) + "px" | |
| 302 | + } | |
| 303 | + }, schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | |
| 304 | + className: "fr-label-required" | |
| 305 | + }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title), | |
| 306 | + render: function render(value, record, index) { | |
| 307 | + // Check: record.index 似乎是antd自己会给的,不错哦 | |
| 308 | + var childIndex = [].concat(_toConsumableArray(dataIndex), [record.index]); | |
| 309 | + return /*#__PURE__*/React.createElement(Core, { | |
| 310 | + hideTitle: true, | |
| 311 | + displayType: "inline", | |
| 312 | + key: index.toString(), | |
| 313 | + id: child, | |
| 314 | + dataIndex: childIndex | |
| 315 | + }); | |
| 316 | + } | |
| 317 | + }; | |
| 318 | + }); | |
| 319 | + | |
| 320 | + var handleAuth = function handleAuth(record, code) { | |
| 321 | + switch (code) { | |
| 322 | + case 'VIEW': | |
| 323 | + return !record.VIEW_flag_; | |
| 324 | + | |
| 325 | + case 'DELETE': | |
| 326 | + return !record.DELETE_flag_; | |
| 327 | + | |
| 328 | + case 'EDIT': | |
| 329 | + return !record.EDIT_flag_; | |
| 330 | + } | |
| 331 | + }; | |
| 332 | + | |
| 333 | + var handleState = function handleState(record, code, originWidget) { | |
| 334 | + if (originWidget === 'subform') { | |
| 335 | + return ''; | |
| 336 | + } else { | |
| 337 | + switch (code) { | |
| 338 | + case 'VIEW': | |
| 339 | + return record.VIEW_flag_ === true ? '' : 'none'; | |
| 340 | + | |
| 341 | + case 'DELETE': | |
| 342 | + return record.DELETE_flag_ === true ? '' : 'none'; | |
| 343 | + | |
| 344 | + case 'EDIT': | |
| 345 | + return record.EDIT_flag_ === true ? '' : 'none'; | |
| 346 | + } | |
| 347 | + } | |
| 348 | + }; | |
| 349 | + | |
| 350 | + if (!props.hideDelete && ((_line$buttons = line.buttons) === null || _line$buttons === void 0 ? void 0 : _line$buttons.length) || Array.isArray(itemProps.buttons) || props.removeable) { | |
| 351 | + var top = line.top, | |
| 352 | + _line$style = line.style, | |
| 353 | + style = _line$style === void 0 ? 'ICON' : _line$style, | |
| 354 | + fixed = line.fixed, | |
| 355 | + buttons = line.buttons; | |
| 356 | + var action = { | |
| 357 | + title: '操作', | |
| 358 | + key: '$action', | |
| 359 | + fixed: fixed ? top ? 'left' : 'right' : props.originWidget === 'subform' ? 'right' : false, | |
| 360 | + align: 'center', | |
| 361 | + width: ((buttons || []).length + (props.removeable ? 1 : 0)) * (style === 'ICON' ? 32 : style === 'TEXT' ? 36 : 57) + 16, | |
| 362 | + render: function render(value, record, idx) { | |
| 363 | + return /*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(itemProps.buttons) ? itemProps.buttons.map(function (item, idx) { | |
| 364 | + var callback = item.callback, | |
| 365 | + text = item.text, | |
| 366 | + html = item.html; | |
| 367 | + | |
| 368 | + var onClick = function onClick() {}; | |
| 369 | + | |
| 370 | + if (typeof window[callback] === 'function') { | |
| 371 | + onClick = function onClick() { | |
| 372 | + window[callback]({ | |
| 373 | + value: listData, | |
| 374 | + onChange: changeList, | |
| 375 | + schema: schema | |
| 376 | + }); | |
| 377 | + }; | |
| 378 | + } | |
| 379 | + | |
| 380 | + return /*#__PURE__*/React.createElement("a", { | |
| 381 | + key: idx.toString(), | |
| 382 | + style: { | |
| 383 | + marginLeft: 8 | |
| 384 | + }, | |
| 385 | + size: "small", | |
| 386 | + onClick: onClick | |
| 387 | + }, /*#__PURE__*/React.createElement("span", { | |
| 388 | + dangerouslySetInnerHTML: { | |
| 389 | + __html: html || text | |
| 390 | + } | |
| 391 | + })); | |
| 392 | + }) : null, Array.isArray(line.buttons) ? line.buttons.map(function (item) { | |
| 393 | + var name = item.name, | |
| 394 | + code = item.code, | |
| 395 | + needConfirm = item.needConfirm, | |
| 396 | + confirmContent = item.confirmContent, | |
| 397 | + icon = item.icon; | |
| 398 | + return /*#__PURE__*/React.createElement(_Tooltip, { | |
| 399 | + title: name | |
| 400 | + }, /*#__PURE__*/React.createElement(_Button, _extends({ | |
| 401 | + key: code, | |
| 402 | + style: { | |
| 403 | + marginLeft: 8, | |
| 404 | + display: "".concat(handleState(record, code, props.originWidget)) | |
| 405 | + } | |
| 406 | + }, item, { | |
| 407 | + icon: icon && style !== 'TEXT' ? BUTTON_ICONS_MAP[icon] : null, | |
| 408 | + type: 'link', | |
| 409 | + size: 'small' // disabled={props.originWidget === 'subform' ? false : handleAuth(record, code)} | |
| 410 | + , | |
| 411 | + onClick: function onClick() { | |
| 412 | + if (needConfirm && confirmContent) { | |
| 413 | + confirm({ | |
| 414 | + title: confirmContent, | |
| 415 | + icon: /*#__PURE__*/React.createElement(_ExclamationCircleOutlined, null), | |
| 416 | + okText: '确认', | |
| 417 | + okType: 'danger', | |
| 418 | + cancelText: '取消', | |
| 419 | + onOk: function onOk() { | |
| 420 | + if (code === 'DELETE' && props.originWidget === 'subform') { | |
| 421 | + deleteItem(idx); | |
| 422 | + } else if (code === 'COPY') { | |
| 423 | + copyItem(idx); | |
| 424 | + } else if (item.action === 'CUSTOM') { | |
| 425 | + props.handleCustom(item, record, schema.$id); | |
| 426 | + } else { | |
| 427 | + props.handleLineBtnClick(code, record, schema.$id, line.action); | |
| 428 | + } | |
| 429 | + }, | |
| 430 | + onCancel: function onCancel() {} | |
| 431 | + }); | |
| 432 | + } else { | |
| 433 | + if (code === 'DELETE' && props.originWidget === 'subform') { | |
| 434 | + deleteItem(idx); | |
| 435 | + } else if (code === 'COPY') { | |
| 436 | + copyItem(idx); | |
| 437 | + } else if (item.action === 'CUSTOM') { | |
| 438 | + props.handleCustom(item, record, schema.$id); | |
| 439 | + } else { | |
| 440 | + props.handleLineBtnClick(code, record, schema.$id, line.action); | |
| 441 | + } | |
| 442 | + } | |
| 443 | + } | |
| 444 | + }), style !== 'ICON' ? name : null)); // } | |
| 445 | + }) : null, props.removeable ? /*#__PURE__*/React.createElement(_Tooltip, { | |
| 446 | + title: '移除' | |
| 447 | + }, /*#__PURE__*/React.createElement(_Button, { | |
| 448 | + key: 'remove', | |
| 449 | + style: { | |
| 450 | + marginLeft: 8 | |
| 451 | + }, | |
| 452 | + icon: style !== 'TEXT' ? BUTTON_ICONS_MAP['remove'] : null, | |
| 453 | + type: 'link', | |
| 454 | + size: 'small', | |
| 455 | + onClick: function onClick() { | |
| 456 | + if (props.removeContent) { | |
| 457 | + confirm({ | |
| 458 | + title: props.removeContent, | |
| 459 | + icon: /*#__PURE__*/React.createElement(_ExclamationCircleOutlined, null), | |
| 460 | + okText: '确认', | |
| 461 | + okType: 'danger', | |
| 462 | + cancelText: '取消', | |
| 463 | + onOk: function onOk() { | |
| 464 | + deleteItem(idx); | |
| 465 | + }, | |
| 466 | + onCancel: function onCancel() {} | |
| 467 | + }); | |
| 468 | + } else { | |
| 469 | + deleteItem(idx); | |
| 470 | + } | |
| 471 | + } | |
| 472 | + }, style !== 'ICON' ? '移除' : null)) : null); | |
| 473 | + } | |
| 474 | + }; | |
| 475 | + | |
| 476 | + if (top) { | |
| 477 | + columns.unshift(action); | |
| 478 | + } else { | |
| 479 | + columns.push(action); | |
| 480 | + } | |
| 481 | + } | |
| 482 | + | |
| 483 | + var handleExport = /*#__PURE__*/function () { | |
| 484 | + var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { | |
| 485 | + var appCode, funCode, fieldName, result; | |
| 486 | + return regeneratorRuntime.wrap(function _callee$(_context) { | |
| 487 | + while (1) { | |
| 488 | + switch (_context.prev = _context.next) { | |
| 489 | + case 0: | |
| 490 | + setProgressData({ | |
| 491 | + "percent": 0, | |
| 492 | + "status": "PROCESSING" | |
| 493 | + }); | |
| 494 | + appCode = qxProps.appCode, funCode = qxProps.funCode, fieldName = qxProps.fieldName; | |
| 495 | + _context.next = 4; | |
| 496 | + return props.exportChild(appCode, funCode, fieldName); | |
| 497 | + | |
| 498 | + case 4: | |
| 499 | + result = _context.sent; | |
| 500 | + exportTaskId.current = result.taskId || ''; | |
| 501 | + | |
| 502 | + if (result.downloadUrl) { | |
| 503 | + setTimeout(function () { | |
| 504 | + exportData(result.taskId); | |
| 505 | + }, 5000); | |
| 506 | + } | |
| 507 | + | |
| 508 | + case 7: | |
| 509 | + case "end": | |
| 510 | + return _context.stop(); | |
| 511 | + } | |
| 512 | + } | |
| 513 | + }, _callee); | |
| 514 | + })); | |
| 515 | + | |
| 516 | + return function handleExport() { | |
| 517 | + return _ref2.apply(this, arguments); | |
| 518 | + }; | |
| 519 | + }(); | |
| 520 | + | |
| 521 | + var exportData = function exportData(taskId) { | |
| 522 | + // const {appCode, funCode, viewCode} = qxProps | |
| 523 | + // taskType: UPLOAD || EXPORT | |
| 524 | + props.exportProgress(taskId || exportTaskId.current).then(function (res) { | |
| 525 | + setProgressData(res || null); | |
| 526 | + }); | |
| 527 | + }; | |
| 528 | + | |
| 529 | + useEffect(function () { | |
| 530 | + if (exportProgressData) { | |
| 531 | + if (exportProgressData.status === 'PROCESSING' && !intervalName) { | |
| 532 | + setIntervalName(setInterval(function () { | |
| 533 | + return exportData(); | |
| 534 | + }, 1000 * 10)); | |
| 535 | + return; | |
| 536 | + } | |
| 537 | + | |
| 538 | + if (exportProgressData.status !== 'PROCESSING' && intervalName) { | |
| 539 | + clearInterval(intervalName); | |
| 540 | + return; | |
| 541 | + } | |
| 542 | + } | |
| 543 | + | |
| 544 | + return function () { | |
| 545 | + if (intervalName) { | |
| 546 | + setTimeout(function () { | |
| 547 | + clearInterval(intervalName); | |
| 548 | + }, 1000 * 60 * 10); | |
| 549 | + } | |
| 550 | + }; | |
| 551 | + }, [exportProgressData]); | |
| 552 | + | |
| 553 | + var handleCloseExport = function handleCloseExport(taskId) { | |
| 554 | + var appCode = qxProps.appCode, | |
| 555 | + funCode = qxProps.funCode, | |
| 556 | + viewCode = qxProps.viewCode; | |
| 557 | + props.closeExport(appCode, funCode, viewCode, { | |
| 558 | + taskId: taskId | |
| 559 | + }).then(function (res) { | |
| 560 | + setProgressData(null); | |
| 561 | + | |
| 562 | + if (intervalName) { | |
| 563 | + clearInterval(intervalName); | |
| 564 | + } | |
| 565 | + }); | |
| 566 | + }; | |
| 567 | + | |
| 568 | + var getExportMessage = function getExportMessage() { | |
| 569 | + if (exportProgressData.status === 'SUCCESS') { | |
| 570 | + return /*#__PURE__*/React.createElement("div", null, "\u5BFC\u51FA\u6210\u529F\uFF0C\u70B9\u51FB", /*#__PURE__*/React.createElement(_Button, { | |
| 571 | + onClick: function onClick() { | |
| 572 | + return handleDownload(exportProgressData.downloadUrl, '导出文件.xlsx', props.REQUEST); | |
| 573 | + }, | |
| 574 | + type: 'link' | |
| 575 | + }, "\u4E0B\u8F7D\u6587\u4EF6"), /*#__PURE__*/React.createElement(_Button, { | |
| 576 | + style: { | |
| 577 | + float: "right" | |
| 578 | + }, | |
| 579 | + onClick: function onClick() { | |
| 580 | + return handleCloseExport(exportProgressData.taskId); | |
| 581 | + }, | |
| 582 | + type: 'link' | |
| 583 | + }, "\u3010\u5173\u95ED\u63D0\u9192\u3011")); | |
| 584 | + } | |
| 585 | + | |
| 586 | + return /*#__PURE__*/React.createElement("div", null, "\u5BFC\u51FA\u8FDB\u884C\u4E2D\uFF0C\u8BF7\u7A0D\u540E......", /*#__PURE__*/React.createElement(_Button, { | |
| 587 | + onClick: function onClick() { | |
| 588 | + return exportData(); | |
| 589 | + }, | |
| 590 | + type: 'link' | |
| 591 | + }, "\u5237\u65B0"), /*#__PURE__*/React.createElement(_Button, { | |
| 592 | + style: { | |
| 593 | + float: "right" | |
| 594 | + }, | |
| 595 | + onClick: function onClick() { | |
| 596 | + return handleCloseExport(exportProgressData.taskId); | |
| 597 | + }, | |
| 598 | + type: 'link' | |
| 599 | + }, "\u3010\u5173\u95ED\u63D0\u9192\u3011")); | |
| 600 | + }; | |
| 601 | + | |
| 602 | + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
| 603 | + className: 'qx-virtual-searchLine', | |
| 604 | + style: { | |
| 605 | + flexDirection: searchKey ? 'row' : 'row-reverse' | |
| 606 | + } | |
| 607 | + }, searchKey ? /*#__PURE__*/React.createElement(_Input, { | |
| 608 | + style: { | |
| 609 | + width: '200px' | |
| 610 | + }, | |
| 611 | + allowClear: true, | |
| 612 | + size: 'small', | |
| 613 | + placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u6761\u4EF6", | |
| 614 | + prefix: /*#__PURE__*/React.createElement(_SearchOutlined, { | |
| 615 | + style: { | |
| 616 | + color: '#666' | |
| 617 | + } | |
| 618 | + }), | |
| 619 | + onChange: function onChange(e) { | |
| 620 | + var _e$target; | |
| 621 | + | |
| 622 | + setKeyWord(((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || ''); | |
| 623 | + } | |
| 624 | + }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", null, barButtons.map(function (item) { | |
| 625 | + var name = item.name, | |
| 626 | + code = item.code, | |
| 627 | + needConfirm = item.needConfirm, | |
| 628 | + confirmContent = item.confirmContent, | |
| 629 | + icon = item.icon, | |
| 630 | + action = item.action; | |
| 631 | + return /*#__PURE__*/React.createElement(_Button, _extends({ | |
| 632 | + key: code, | |
| 633 | + style: { | |
| 634 | + marginLeft: 8 | |
| 635 | + } | |
| 636 | + }, item, { | |
| 637 | + icon: icon ? BUTTON_ICONS_MAP[icon] : null, | |
| 638 | + onClick: function onClick() { | |
| 639 | + if (code === 'DELETE') { | |
| 640 | + if (!selectedRowKeys.length) { | |
| 641 | + return _message.warning('请选择数据'); | |
| 642 | + } | |
| 643 | + | |
| 644 | + if (needConfirm && confirmContent) { | |
| 645 | + confirm({ | |
| 646 | + title: '批量删除确认', | |
| 647 | + icon: /*#__PURE__*/React.createElement(_ExclamationCircleOutlined, null), | |
| 648 | + content: confirmContent, | |
| 649 | + okText: '确认', | |
| 650 | + okType: 'danger', | |
| 651 | + cancelText: '取消', | |
| 652 | + onOk: function onOk() { | |
| 653 | + if (props.originWidget === 'subform') { | |
| 654 | + batchDelete(selectedRowKeys); | |
| 655 | + setSelectedRowKeys([]); | |
| 656 | + } else { | |
| 657 | + props.handleBarBtnClick(code, fieldName, batchKey, selectedRowKeys, schema.$id, selectedIds); | |
| 658 | + } | |
| 659 | + }, | |
| 660 | + onCancel: function onCancel() {} | |
| 661 | + }); | |
| 662 | + } else { | |
| 663 | + if (props.originWidget === 'subform') { | |
| 664 | + batchDelete(selectedRowKeys); | |
| 665 | + setSelectedRowKeys([]); | |
| 666 | + } else { | |
| 667 | + props.handleBarBtnClick(code, fieldName, batchKey, selectedRowKeys, schema.$id, selectedIds); | |
| 668 | + } | |
| 669 | + } | |
| 670 | + } else if (code === 'EXPORT') { | |
| 671 | + handleExport(); | |
| 672 | + } else if (code === 'SELECT') { | |
| 673 | + props.openRelSelect(schema.$id); | |
| 674 | + } else if (code === 'ADD') { | |
| 675 | + props.handleRelAdd(schema.$id); | |
| 676 | + } else if (code === 'subformEdit') { | |
| 677 | + props.handleBatchEdit(fieldName, schema.$id, selectedIds); | |
| 678 | + } else if (action === 'CUSTOM') { | |
| 679 | + props.handleCustom(item, selectedIds, schema.$id); | |
| 680 | + } else { | |
| 681 | + props.handleBarBtnClick(code, fieldName, batchKey, selectedRowKeys, schema.$id, selectedIds); | |
| 682 | + } | |
| 683 | + } | |
| 684 | + }), name); // } | |
| 685 | + })), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
| 686 | + var callback = item.callback, | |
| 687 | + text = item.text, | |
| 688 | + html = item.html; | |
| 689 | + | |
| 690 | + var onClick = function onClick() {}; | |
| 691 | + | |
| 692 | + if (typeof window[callback] === 'function') { | |
| 693 | + onClick = function onClick() { | |
| 694 | + window[callback]({ | |
| 695 | + value: listData, | |
| 696 | + onChange: changeList, | |
| 697 | + schema: schema | |
| 698 | + }); | |
| 699 | + }; | |
| 700 | + } else { | |
| 701 | + if (typeof callback === 'function') { | |
| 702 | + callback({ | |
| 703 | + value: listData, | |
| 704 | + onChange: changeList, | |
| 705 | + schema: schema | |
| 706 | + }); | |
| 707 | + } | |
| 708 | + } | |
| 709 | + | |
| 710 | + return /*#__PURE__*/React.createElement(_Button, { | |
| 711 | + key: idx.toString(), | |
| 712 | + style: { | |
| 713 | + marginLeft: 8 | |
| 714 | + }, | |
| 715 | + size: "small", | |
| 716 | + onClick: onClick | |
| 717 | + }, /*#__PURE__*/React.createElement("span", { | |
| 718 | + dangerouslySetInnerHTML: { | |
| 719 | + __html: html || text | |
| 720 | + } | |
| 721 | + })); | |
| 722 | + }) : null), exportProgressData ? /*#__PURE__*/React.createElement(_Alert, { | |
| 723 | + style: { | |
| 724 | + marginBottom: '12px' | |
| 725 | + }, | |
| 726 | + message: getExportMessage(), | |
| 727 | + type: EXPORT_STATUS[exportProgressData.status] || 'info', | |
| 728 | + showIcon: true, | |
| 729 | + onClose: function onClose() { | |
| 730 | + handleCloseExport(exportProgressData.taskId); | |
| 731 | + } | |
| 732 | + }) : null, /*#__PURE__*/React.createElement(_Table, _extends({ | |
| 733 | + className: 'qx-virtualList', | |
| 734 | + rowKey: "index", | |
| 735 | + scroll: { | |
| 736 | + y: scrollY, | |
| 737 | + x: '100%' | |
| 738 | + }, | |
| 739 | + components: vt, | |
| 740 | + size: "small", | |
| 741 | + columns: columns, | |
| 742 | + dataSource: dataSource, | |
| 743 | + pagination: props.originWidget === 'subform' ? false : pagination, | |
| 744 | + style: { | |
| 745 | + marginBottom: 25 | |
| 746 | + }, | |
| 747 | + rowSelection: newRowSelection, | |
| 748 | + summary: function summary() { | |
| 749 | + if (!_summary) { | |
| 750 | + return null; | |
| 751 | + } | |
| 752 | + | |
| 753 | + return _summary(listData); | |
| 754 | + } | |
| 755 | + }, rest)), !props.hideAdd && props.originWidget === 'subform' && /*#__PURE__*/React.createElement(_Button, { | |
| 756 | + type: "link", | |
| 757 | + icon: /*#__PURE__*/React.createElement(_PlusOutlined, null), | |
| 758 | + onClick: addItem | |
| 759 | + }, "\u65B0\u589E")); | |
| 760 | +}; | |
| 761 | +/** | |
| 762 | + * 文件下载。依赖HTML页面 | |
| 763 | + * | |
| 764 | + * @param url 下载URL | |
| 765 | + * @param name 指定的文件名(包括扩展名) | |
| 766 | + * @param request | |
| 767 | + */ | |
| 768 | + | |
| 769 | + | |
| 770 | +function handleDownload(_x, _x2, _x3) { | |
| 771 | + return _handleDownload.apply(this, arguments); | |
| 772 | +} | |
| 773 | + | |
| 774 | +function _handleDownload() { | |
| 775 | + _handleDownload = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(url, name, request) { | |
| 776 | + var isDownload, | |
| 777 | + link, | |
| 778 | + blob, | |
| 779 | + downloadUrl, | |
| 780 | + _args2 = arguments; | |
| 781 | + return regeneratorRuntime.wrap(function _callee2$(_context2) { | |
| 782 | + while (1) { | |
| 783 | + switch (_context2.prev = _context2.next) { | |
| 784 | + case 0: | |
| 785 | + // eslint-disable-next-line prefer-rest-params | |
| 786 | + isDownload = _args2[2]; | |
| 787 | + | |
| 788 | + if (isDownload === null || Boolean(isDownload)) { | |
| 789 | + _message.warning('即将开始下载,请勿重复点击。'); | |
| 790 | + } | |
| 791 | + | |
| 792 | + link = document.createElement('a'); | |
| 793 | + link.href = url; | |
| 794 | + link.download = name; | |
| 795 | + link.target = '_blank'; | |
| 796 | + document.body.appendChild(link); //TODO 文件过大时,看不到下载进度 | |
| 797 | + | |
| 798 | + _context2.next = 9; | |
| 799 | + return request.get(url, { | |
| 800 | + autoShowError: true | |
| 801 | + }); | |
| 802 | + | |
| 803 | + case 9: | |
| 804 | + blob = _context2.sent; | |
| 805 | + | |
| 806 | + if (blob !== null) { | |
| 807 | + downloadUrl = URL.createObjectURL(blob); | |
| 808 | + link.href = downloadUrl; | |
| 809 | + link.click(); | |
| 810 | + document.body.removeChild(link); | |
| 811 | + URL.revokeObjectURL(downloadUrl); | |
| 812 | + } | |
| 813 | + | |
| 814 | + case 11: | |
| 815 | + case "end": | |
| 816 | + return _context2.stop(); | |
| 817 | + } | |
| 818 | + } | |
| 819 | + }, _callee2); | |
| 820 | + })); | |
| 821 | + return _handleDownload.apply(this, arguments); | |
| 822 | +} | |
| 823 | + | |
| 824 | +export default VirtualList; | |
| \ No newline at end of file | ... | ... |
es/core/RenderChildren/RenderList/index.js
0 → 100644
| 1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 2 | + | |
| 3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 4 | + | |
| 5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 6 | + | |
| 7 | +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | |
| 8 | + | |
| 9 | +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 10 | + | |
| 11 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | |
| 12 | + | |
| 13 | +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | |
| 14 | + | |
| 15 | +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | |
| 16 | + | |
| 17 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | |
| 18 | + | |
| 19 | +/* eslint-disable jsx-a11y/anchor-is-valid */ | |
| 20 | +import React from 'react'; | |
| 21 | +import { get } from 'lodash-es'; | |
| 22 | +import { useStore, useTools } from '../../../hooks'; | |
| 23 | +import { getDataPath, getKeyFromPath, getDisplayValue } from '../../../utils'; // import ArrowDown from '../../../components/ArrowDown'; | |
| 24 | + | |
| 25 | +import "./list.css"; | |
| 26 | +import SimpleList from './SimpleList'; | |
| 27 | +import CardList from './CardList'; | |
| 28 | +import TableList from './TableList'; | |
| 29 | +import DrawerList from './DrawerList'; | |
| 30 | +import VirtualList from './VirtualList'; | |
| 31 | + | |
| 32 | +var RenderList = function RenderList(_ref) { | |
| 33 | + var parentId = _ref.parentId, | |
| 34 | + _ref$schema = _ref.schema, | |
| 35 | + schema = _ref$schema === void 0 ? {} : _ref$schema, | |
| 36 | + _ref$dataIndex = _ref.dataIndex, | |
| 37 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | |
| 38 | + _ref$children = _ref.children, | |
| 39 | + children = _ref$children === void 0 ? [] : _ref$children, | |
| 40 | + errorFields = _ref.errorFields, | |
| 41 | + displayType = _ref.displayType; | |
| 42 | + | |
| 43 | + var _useStore = useStore(), | |
| 44 | + formData = _useStore.formData, | |
| 45 | + flatten = _useStore.flatten; | |
| 46 | + | |
| 47 | + var _useTools = useTools(), | |
| 48 | + onItemChange = _useTools.onItemChange, | |
| 49 | + removeTouched = _useTools.removeTouched; | |
| 50 | + | |
| 51 | + var renderWidget = 'list'; | |
| 52 | + | |
| 53 | + try { | |
| 54 | + renderWidget = schema.widget; | |
| 55 | + } catch (error) {} // 计算 list对应的formData | |
| 56 | + | |
| 57 | + | |
| 58 | + var dataPath = getDataPath(parentId, dataIndex); | |
| 59 | + var listData; | |
| 60 | + | |
| 61 | + if (typeof dataPath === 'string') { | |
| 62 | + // TODO: listData会有不少“窟窿”,submit 的时候,listData 需要补齐 or filter | |
| 63 | + listData = get(formData, dataPath); | |
| 64 | + } | |
| 65 | + | |
| 66 | + var displayList = Array.isArray(listData) ? listData : []; | |
| 67 | + | |
| 68 | + var changeList = function changeList(newList) { | |
| 69 | + onItemChange(dataPath, newList); | |
| 70 | + }; | |
| 71 | + | |
| 72 | + var addItem = function addItem() { | |
| 73 | + var newList = [].concat(_toConsumableArray(displayList), [{}]); | |
| 74 | + var newIndex = newList.length - 1; | |
| 75 | + onItemChange(dataPath, newList); | |
| 76 | + return newIndex; | |
| 77 | + }; | |
| 78 | + | |
| 79 | + var copyItem = function copyItem(idx) { | |
| 80 | + var newItem = displayList[idx]; | |
| 81 | + delete newItem.id; | |
| 82 | + var newList = [].concat(_toConsumableArray(displayList.slice(0, idx)), [newItem], _toConsumableArray(displayList.slice(idx))); | |
| 83 | + onItemChange(dataPath, JSON.parse(JSON.stringify(newList))); | |
| 84 | + }; | |
| 85 | + | |
| 86 | + var deleteItem = function deleteItem(idx) { | |
| 87 | + // TODO: 删除元素的时候,也需要delete相对于的校验信息(errorFields) | |
| 88 | + // remark: 删除时,不存在的item需要补齐,用null | |
| 89 | + var newList = displayList.filter(function (item, kdx) { | |
| 90 | + return kdx !== idx; | |
| 91 | + }); | |
| 92 | + onItemChange(dataPath, newList); | |
| 93 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | |
| 94 | + }; // 批量删除的方法 | |
| 95 | + | |
| 96 | + | |
| 97 | + var batchDelete = function batchDelete(ids) { | |
| 98 | + var newList = displayList.filter(function (item, kdx) { | |
| 99 | + return !ids.includes(kdx); | |
| 100 | + }); | |
| 101 | + onItemChange(dataPath, newList); | |
| 102 | + (ids || []).forEach(function (id) { | |
| 103 | + removeTouched("".concat(dataPath, "[").concat(id, "]")); | |
| 104 | + }); | |
| 105 | + }; //TODO1: 上线翻页要正确!!现在是错的 | |
| 106 | + | |
| 107 | + | |
| 108 | + var moveItemUp = function moveItemUp(idx) { | |
| 109 | + if (idx === 0) return; | |
| 110 | + var currentItem = displayList[idx]; | |
| 111 | + var itemAbove = displayList[idx - 1]; | |
| 112 | + var newList = displayList; | |
| 113 | + newList[idx] = itemAbove; | |
| 114 | + newList[idx - 1] = currentItem; | |
| 115 | + onItemChange(dataPath, newList); // TODO: 这块懒了,之后要处理一下 | |
| 116 | + | |
| 117 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | |
| 118 | + }; | |
| 119 | + | |
| 120 | + var moveItemDown = function moveItemDown(idx) { | |
| 121 | + if (idx >= displayList.length - 1) return; | |
| 122 | + var currentItem = displayList[idx]; | |
| 123 | + var itemBelow = displayList[idx + 1]; | |
| 124 | + var newList = displayList; | |
| 125 | + newList[idx] = itemBelow; | |
| 126 | + newList[idx + 1] = currentItem; | |
| 127 | + onItemChange(dataPath, newList); // TODO: 这块懒了,之后要处理一下 | |
| 128 | + | |
| 129 | + removeTouched("".concat(dataPath, "[").concat(idx, "]")); | |
| 130 | + }; | |
| 131 | + | |
| 132 | + var itemSchema = { | |
| 133 | + type: 'object', | |
| 134 | + // properties: (schema.items && schema.items.properties) || {}, | |
| 135 | + properties: {}, | |
| 136 | + props: schema.props || {}, | |
| 137 | + $id: schema.$id | |
| 138 | + }; | |
| 139 | + var itemFlatten = { | |
| 140 | + schema: itemSchema, | |
| 141 | + children: children | |
| 142 | + }; | |
| 143 | + | |
| 144 | + var getFieldsProps = function getFieldsProps(idx, extraProps) { | |
| 145 | + return _objectSpread({ | |
| 146 | + _item: itemFlatten, | |
| 147 | + dataIndex: [].concat(_toConsumableArray(dataIndex), [idx]) | |
| 148 | + }, extraProps); | |
| 149 | + }; | |
| 150 | + | |
| 151 | + var displayProps = { | |
| 152 | + displayList: displayList, | |
| 153 | + changeList: changeList, | |
| 154 | + schema: schema, | |
| 155 | + dataPath: dataPath, | |
| 156 | + dataIndex: dataIndex, | |
| 157 | + children: children, | |
| 158 | + deleteItem: deleteItem, | |
| 159 | + batchDelete: batchDelete, | |
| 160 | + addItem: addItem, | |
| 161 | + copyItem: copyItem, | |
| 162 | + moveItemDown: moveItemDown, | |
| 163 | + moveItemUp: moveItemUp, | |
| 164 | + listData: listData, | |
| 165 | + flatten: flatten, | |
| 166 | + errorFields: errorFields, | |
| 167 | + displayType: displayType, | |
| 168 | + getFieldsProps: getFieldsProps | |
| 169 | + }; | |
| 170 | + | |
| 171 | + switch (renderWidget) { | |
| 172 | + case 'list0': | |
| 173 | + case 'cardList': | |
| 174 | + return /*#__PURE__*/React.createElement(CardList, displayProps); | |
| 175 | + | |
| 176 | + case 'list1': | |
| 177 | + case 'simpleList': | |
| 178 | + return /*#__PURE__*/React.createElement(SimpleList, displayProps); | |
| 179 | + | |
| 180 | + case 'list2': | |
| 181 | + case 'tableList': | |
| 182 | + return /*#__PURE__*/React.createElement(TableList, displayProps); | |
| 183 | + | |
| 184 | + case 'list3': | |
| 185 | + case 'drawerList': | |
| 186 | + return /*#__PURE__*/React.createElement(DrawerList, displayProps); | |
| 187 | + | |
| 188 | + case 'list4': | |
| 189 | + case 'virtualList': | |
| 190 | + return /*#__PURE__*/React.createElement(VirtualList, displayProps); | |
| 191 | + | |
| 192 | + default: | |
| 193 | + return /*#__PURE__*/React.createElement(CardList, displayProps); | |
| 194 | + } | |
| 195 | +}; | |
| 196 | + | |
| 197 | +export default RenderList; | |
| \ No newline at end of file | ... | ... |
es/core/RenderChildren/RenderList/list.css
0 → 100644
| 1 | +.fr-container .fr-card-item { | |
| 2 | + border: 1px solid rgba(0, 0, 0, 0.1); | |
| 3 | + border-radius: 4px; | |
| 4 | + padding: 10px 12px 4px 12px; | |
| 5 | + margin-bottom: 8px; | |
| 6 | + position: relative; | |
| 7 | + display: flex; | |
| 8 | +} | |
| 9 | +.fr-container .fr-card-item-row { | |
| 10 | + padding-top: 34px; | |
| 11 | +} | |
| 12 | +.fr-container .fr-card-index { | |
| 13 | + position: absolute; | |
| 14 | + top: 0; | |
| 15 | + left: 0; | |
| 16 | + padding-left: 4px; | |
| 17 | + padding-right: 6px; | |
| 18 | + border-bottom-right-radius: 8px; | |
| 19 | + border-top-left-radius: 3px; | |
| 20 | + background-color: rgba(0, 0, 0, 0.36); | |
| 21 | + font-size: 8px; | |
| 22 | + color: #fff; | |
| 23 | +} | |
| 24 | +.fr-container .fr-card-toolbar { | |
| 25 | + position: absolute; | |
| 26 | + top: 8px; | |
| 27 | + right: 8px; | |
| 28 | + display: flex; | |
| 29 | +} | |
| 30 | +.qx-virtual-searchLine { | |
| 31 | + display: flex; | |
| 32 | + justify-content: space-between; | |
| 33 | + padding: 8px 10px; | |
| 34 | +} | |
| 35 | +.qx-virtual-searchLine .ant-input-affix-wrapper-sm { | |
| 36 | + padding: 4px 7px; | |
| 37 | +} | |
| 38 | +.qx-virtualList .ant-btn-sm { | |
| 39 | + padding: 0; | |
| 40 | +} | |
| 41 | +.qx-virtualList .qx-fr-input--readonly { | |
| 42 | + background: none; | |
| 43 | +} | |
| 44 | +.qx-virtualList .ant-select:not(.ant-select-customize-input) .ant-select-selector { | |
| 45 | + border: none; | |
| 46 | +} | |
| 47 | +.qx-virtualList .ant-pagination-total-text { | |
| 48 | + line-height: 32px; | |
| 49 | +} | ... | ... |
es/core/RenderChildren/RenderObject.js
0 → 100644
| 1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 2 | + | |
| 3 | +import React from 'react'; | |
| 4 | +import Core from '../index'; | |
| 5 | + | |
| 6 | +var RenderObject = function RenderObject(_ref) { | |
| 7 | + var _ref$children = _ref.children, | |
| 8 | + children = _ref$children === void 0 ? [] : _ref$children, | |
| 9 | + _ref$dataIndex = _ref.dataIndex, | |
| 10 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | |
| 11 | + displayType = _ref.displayType, | |
| 12 | + hideTitle = _ref.hideTitle; | |
| 13 | + return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (child, i) { | |
| 14 | + var FRProps = { | |
| 15 | + displayType: displayType, | |
| 16 | + id: child, | |
| 17 | + dataIndex: dataIndex, | |
| 18 | + hideTitle: hideTitle | |
| 19 | + }; | |
| 20 | + return /*#__PURE__*/React.createElement(Core, _extends({ | |
| 21 | + key: i.toString() | |
| 22 | + }, FRProps)); | |
| 23 | + })); | |
| 24 | +}; | |
| 25 | + | |
| 26 | +export default RenderObject; | |
| \ No newline at end of file | ... | ... |
es/core/RenderField/ErrorMessage.css
0 → 100644
es/core/RenderField/ErrorMessage.js
0 → 100644
| 1 | +import React from 'react'; | |
| 2 | +import { translateMessage } from '../../utils'; | |
| 3 | +import "./ErrorMessage.css"; | |
| 4 | + | |
| 5 | +var ErrorMessage = function ErrorMessage(_ref) { | |
| 6 | + var message = _ref.message, | |
| 7 | + schema = _ref.schema, | |
| 8 | + softHidden = _ref.softHidden, | |
| 9 | + hardHidden = _ref.hardHidden; | |
| 10 | + var msg = ''; | |
| 11 | + if (typeof message === 'string') msg = message; | |
| 12 | + | |
| 13 | + if (Array.isArray(message)) { | |
| 14 | + msg = message[0] || ''; | |
| 15 | + } | |
| 16 | + | |
| 17 | + msg = translateMessage(msg, schema); | |
| 18 | + if (hardHidden) return /*#__PURE__*/React.createElement("div", { | |
| 19 | + className: "error-message" | |
| 20 | + }); | |
| 21 | + return !msg && softHidden ? null : /*#__PURE__*/React.createElement("div", { | |
| 22 | + className: "error-message" | |
| 23 | + }, msg); | |
| 24 | +}; | |
| 25 | + | |
| 26 | +export default ErrorMessage; | |
| \ No newline at end of file | ... | ... |
es/core/RenderField/ExtendedWidget.js
0 → 100644
| 1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 2 | + | |
| 3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 4 | + | |
| 5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 6 | + | |
| 7 | +import React, { Suspense } from 'react'; | |
| 8 | +import { getWidgetName, extraSchemaList } from '../../mapping'; | |
| 9 | +import { useTools, useStore } from '../../hooks'; | |
| 10 | +import { transformProps } from '../../createWidget'; | |
| 11 | +import { isObjType, isListType, isObject } from '../../utils'; | |
| 12 | + | |
| 13 | +var ErrorSchema = function ErrorSchema(schema) { | |
| 14 | + return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { | |
| 15 | + style: { | |
| 16 | + color: 'red' | |
| 17 | + } | |
| 18 | + }, "schema\u672A\u5339\u914D\u5230\u5C55\u793A\u7EC4\u4EF6\uFF1A"), /*#__PURE__*/React.createElement("div", null, JSON.stringify(schema))); | |
| 19 | +}; | |
| 20 | + | |
| 21 | +var ExtendedWidget = function ExtendedWidget(_ref) { | |
| 22 | + var schema = _ref.schema, | |
| 23 | + onChange = _ref.onChange, | |
| 24 | + value = _ref.value, | |
| 25 | + dependValues = _ref.dependValues, | |
| 26 | + children = _ref.children, | |
| 27 | + onItemChange = _ref.onItemChange, | |
| 28 | + formData = _ref.formData, | |
| 29 | + getValue = _ref.getValue, | |
| 30 | + readOnly = _ref.readOnly, | |
| 31 | + dataPath = _ref.dataPath, | |
| 32 | + disabled = _ref.disabled, | |
| 33 | + dataIndex = _ref.dataIndex; | |
| 34 | + | |
| 35 | + var _useTools = useTools(), | |
| 36 | + widgets = _useTools.widgets, | |
| 37 | + mapping = _useTools.mapping, | |
| 38 | + setValueByPath = _useTools.setValueByPath, | |
| 39 | + getSchemaByPath = _useTools.getSchemaByPath, | |
| 40 | + setSchemaByPath = _useTools.setSchemaByPath, | |
| 41 | + setSchema = _useTools.setSchema, | |
| 42 | + setValues = _useTools.setValues, | |
| 43 | + getValues = _useTools.getValues, | |
| 44 | + resetFields = _useTools.resetFields, | |
| 45 | + setErrorFields = _useTools.setErrorFields, | |
| 46 | + removeErrorField = _useTools.removeErrorField; | |
| 47 | + | |
| 48 | + var _useStore = useStore(), | |
| 49 | + globalProps = _useStore.globalProps; // if (isObjType(schema)) { | |
| 50 | + // return <Map value={value} onChange={onChange} children={children} />; | |
| 51 | + // } | |
| 52 | + // if (isListType(schema)) { | |
| 53 | + // return 'haha'; | |
| 54 | + // } | |
| 55 | + // return <Input value={value} onChange={e => onChange(e.target.value)} />; | |
| 56 | + // TODO: calc widget, better way? | |
| 57 | + // let widgetName = useMemo(() => getWidgetName(schema, mapping), [ | |
| 58 | + // JSON.stringify(schema), | |
| 59 | + // ]); | |
| 60 | + | |
| 61 | + | |
| 62 | + var widgetName = getWidgetName(schema, mapping); | |
| 63 | + var customName = schema.widget || schema['ui:widget']; | |
| 64 | + | |
| 65 | + if (customName && widgets[customName]) { | |
| 66 | + widgetName = customName; | |
| 67 | + } | |
| 68 | + | |
| 69 | + var readOnlyName = schema.readOnlyWidget || 'html'; | |
| 70 | + | |
| 71 | + if (readOnly && !isObjType(schema) && !isListType(schema)) { | |
| 72 | + widgetName = readOnlyName; | |
| 73 | + } | |
| 74 | + | |
| 75 | + if (!widgetName) { | |
| 76 | + widgetName = 'input'; | |
| 77 | + return /*#__PURE__*/React.createElement(ErrorSchema, { | |
| 78 | + schema: schema | |
| 79 | + }); | |
| 80 | + } | |
| 81 | + | |
| 82 | + var Widget = widgets[widgetName]; | |
| 83 | + var extraSchema = extraSchemaList[widgetName]; | |
| 84 | + | |
| 85 | + var widgetProps = _objectSpread(_objectSpread({ | |
| 86 | + schema: _objectSpread(_objectSpread({}, schema), extraSchema), | |
| 87 | + onChange: onChange, | |
| 88 | + value: value, | |
| 89 | + children: children, | |
| 90 | + disabled: disabled, | |
| 91 | + readOnly: readOnly | |
| 92 | + }, schema.props), globalProps); | |
| 93 | + | |
| 94 | + if (schema.type === 'string' && typeof schema.max === 'number') { | |
| 95 | + widgetProps.maxLength = schema.max; | |
| 96 | + } | |
| 97 | + | |
| 98 | + ['title', 'placeholder', 'disabled', 'format'].forEach(function (key) { | |
| 99 | + if (schema[key]) { | |
| 100 | + widgetProps[key] = schema[key]; | |
| 101 | + } | |
| 102 | + }); | |
| 103 | + | |
| 104 | + if (schema.props) { | |
| 105 | + widgetProps = _objectSpread(_objectSpread({}, widgetProps), schema.props); | |
| 106 | + } | |
| 107 | + | |
| 108 | + Object.keys(schema).forEach(function (key) { | |
| 109 | + if (typeof key === 'string' && key.toLowerCase().indexOf('props') > -1 && key.length > 5) { | |
| 110 | + widgetProps[key] = schema[key]; | |
| 111 | + } | |
| 112 | + }); // 支持 addonAfter 为自定义组件的情况 | |
| 113 | + | |
| 114 | + if (isObject(widgetProps.addonAfter) && widgetProps.addonAfter.widget) { | |
| 115 | + var AddonAfterWidget = widgets[widgetProps.addonAfter.widget]; | |
| 116 | + widgetProps.addonAfter = /*#__PURE__*/React.createElement(AddonAfterWidget, schema); | |
| 117 | + } | |
| 118 | + | |
| 119 | + var hideSelf = function hideSelf() { | |
| 120 | + var hidden = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; | |
| 121 | + setSchemaByPath(schema.$id, { | |
| 122 | + hidden: hidden | |
| 123 | + }); | |
| 124 | + }; // 避免传组件不接受的props,按情况传多余的props | |
| 125 | + | |
| 126 | + | |
| 127 | + widgetProps.addons = { | |
| 128 | + dependValues: dependValues, | |
| 129 | + onItemChange: onItemChange, | |
| 130 | + getValue: getValue, | |
| 131 | + formData: formData, | |
| 132 | + dataPath: dataPath, | |
| 133 | + dataIndex: dataIndex, | |
| 134 | + setValueByPath: setValueByPath, | |
| 135 | + setValue: setValueByPath, | |
| 136 | + getSchemaByPath: getSchemaByPath, | |
| 137 | + setSchemaByPath: setSchemaByPath, | |
| 138 | + setSchema: setSchema, | |
| 139 | + setValues: setValues, | |
| 140 | + getValues: getValues, | |
| 141 | + resetFields: resetFields, | |
| 142 | + setErrorFields: setErrorFields, | |
| 143 | + removeErrorField: removeErrorField, | |
| 144 | + hideSelf: hideSelf | |
| 145 | + }; | |
| 146 | + var finalProps = transformProps(widgetProps); | |
| 147 | + return /*#__PURE__*/React.createElement(Suspense, { | |
| 148 | + fallback: /*#__PURE__*/React.createElement("div", null) | |
| 149 | + }, /*#__PURE__*/React.createElement("div", { | |
| 150 | + className: "fr-item-wrapper" | |
| 151 | + }, /*#__PURE__*/React.createElement(Widget, finalProps))); | |
| 152 | +}; | |
| 153 | + | |
| 154 | +var areEqual = function areEqual(prev, current) { | |
| 155 | + if (prev.schema && prev.schema.$id === '#') { | |
| 156 | + return false; | |
| 157 | + } | |
| 158 | + | |
| 159 | + if (prev.readOnly !== current.readOnly) { | |
| 160 | + return false; | |
| 161 | + } | |
| 162 | + | |
| 163 | + if (prev.disabled !== current.disabled) { | |
| 164 | + return false; | |
| 165 | + } | |
| 166 | + | |
| 167 | + if (JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)) { | |
| 168 | + return false; | |
| 169 | + } | |
| 170 | + | |
| 171 | + if (isObjType(prev.schema) && isObjType(current.schema)) { | |
| 172 | + return false; | |
| 173 | + } | |
| 174 | + | |
| 175 | + if (JSON.stringify(prev.value) === JSON.stringify(current.value) && JSON.stringify(prev.schema) === JSON.stringify(current.schema)) { | |
| 176 | + return true; | |
| 177 | + } | |
| 178 | + | |
| 179 | + return false; | |
| 180 | +}; | |
| 181 | + | |
| 182 | +export default /*#__PURE__*/React.memo(ExtendedWidget, areEqual); | |
| \ No newline at end of file | ... | ... |
es/core/RenderField/Extra.css
0 → 100644
es/core/RenderField/Extra.js
0 → 100644
| 1 | +function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } | |
| 2 | + | |
| 3 | +import React from 'react'; | |
| 4 | +import { useTools } from '../../hooks'; | |
| 5 | +import "./Extra.css"; | |
| 6 | + | |
| 7 | +var Extra = function Extra(_ref) { | |
| 8 | + var schema = _ref.schema; | |
| 9 | + var extra = schema.extra; | |
| 10 | + | |
| 11 | + var _useTools = useTools(), | |
| 12 | + widgets = _useTools.widgets; | |
| 13 | + | |
| 14 | + if (!extra) return null; // widget 这个api也可以不对外 | |
| 15 | + | |
| 16 | + var widgetName = extra.widget; | |
| 17 | + var Widget = widgets[widgetName]; | |
| 18 | + if (Widget) return /*#__PURE__*/React.createElement(Widget, { | |
| 19 | + schema: schema | |
| 20 | + }); | |
| 21 | + var __html = ''; | |
| 22 | + | |
| 23 | + if (typeof extra === 'string') { | |
| 24 | + __html = extra; | |
| 25 | + } // 内部BU使用的口子,这个api不对外,也没有必要 | |
| 26 | + | |
| 27 | + | |
| 28 | + if (_typeof(extra) === 'object' && extra.text) { | |
| 29 | + __html = extra.text; | |
| 30 | + } | |
| 31 | + | |
| 32 | + return __html && /*#__PURE__*/React.createElement("div", { | |
| 33 | + className: "fr-form-item-extra", | |
| 34 | + dangerouslySetInnerHTML: { | |
| 35 | + __html: __html | |
| 36 | + } | |
| 37 | + }); | |
| 38 | +}; | |
| 39 | + | |
| 40 | +export default Extra; | |
| \ No newline at end of file | ... | ... |
es/core/RenderField/Title.js
0 → 100644
| 1 | +import React from 'react'; | |
| 2 | +import { useStore2 } from '../../hooks'; | |
| 3 | +import { isCheckBoxType } from '../../utils'; | |
| 4 | + | |
| 5 | +var Description = function Description(_ref) { | |
| 6 | + var displayType = _ref.displayType, | |
| 7 | + schema = _ref.schema; | |
| 8 | + var description = schema.description, | |
| 9 | + descType = schema.descType; | |
| 10 | + if (!description) return null; | |
| 11 | + | |
| 12 | + switch (displayType) { | |
| 13 | + case 'row': | |
| 14 | + return /*#__PURE__*/React.createElement("span", { | |
| 15 | + className: "fr-tooltip-toggle", | |
| 16 | + "aria-label": description | |
| 17 | + }, /*#__PURE__*/React.createElement("i", { | |
| 18 | + className: "fr-tooltip-icon" | |
| 19 | + }), /*#__PURE__*/React.createElement("div", { | |
| 20 | + className: "fr-tooltip-container" | |
| 21 | + }, /*#__PURE__*/React.createElement("i", { | |
| 22 | + className: "fr-tooltip-triangle" | |
| 23 | + }), description)); | |
| 24 | + | |
| 25 | + case 'inline': | |
| 26 | + return null; | |
| 27 | + | |
| 28 | + default: | |
| 29 | + if (descType === 'icon') { | |
| 30 | + return /*#__PURE__*/React.createElement("span", { | |
| 31 | + className: "fr-tooltip-toggle", | |
| 32 | + "aria-label": description | |
| 33 | + }, /*#__PURE__*/React.createElement("i", { | |
| 34 | + className: "fr-tooltip-icon" | |
| 35 | + }), /*#__PURE__*/React.createElement("div", { | |
| 36 | + className: "fr-tooltip-container" | |
| 37 | + }, /*#__PURE__*/React.createElement("i", { | |
| 38 | + className: "fr-tooltip-triangle" | |
| 39 | + }), description)); | |
| 40 | + } | |
| 41 | + | |
| 42 | + return /*#__PURE__*/React.createElement("span", { | |
| 43 | + className: "fr-desc ml2" | |
| 44 | + }, "( ".concat(description, " )")); | |
| 45 | + } | |
| 46 | +}; | |
| 47 | + | |
| 48 | +var Title = function Title(_ref2) { | |
| 49 | + var labelClass = _ref2.labelClass, | |
| 50 | + labelStyle = _ref2.labelStyle, | |
| 51 | + schema = _ref2.schema, | |
| 52 | + displayType = _ref2.displayType; | |
| 53 | + | |
| 54 | + var _useStore = useStore2(), | |
| 55 | + globalDisplayType = _useStore.displayType, | |
| 56 | + readOnly = _useStore.readOnly; | |
| 57 | + | |
| 58 | + var title = schema.title, | |
| 59 | + required = schema.required, | |
| 60 | + type = schema.type; | |
| 61 | + var isObjType = type === 'object'; | |
| 62 | + | |
| 63 | + var _displayType = schema.displayType || displayType || globalDisplayType || 'column'; | |
| 64 | + | |
| 65 | + return /*#__PURE__*/React.createElement("div", { | |
| 66 | + className: labelClass, | |
| 67 | + style: labelStyle | |
| 68 | + }, title ? /*#__PURE__*/React.createElement("label", { | |
| 69 | + className: "fr-label-title ".concat(isCheckBoxType(schema, readOnly) || _displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号 | |
| 70 | + , | |
| 71 | + title: title | |
| 72 | + }, required === true && /*#__PURE__*/React.createElement("span", { | |
| 73 | + className: "fr-label-required" | |
| 74 | + }, " *"), /*#__PURE__*/React.createElement("span", { | |
| 75 | + className: "".concat(isObjType ? 'b' : '', " ").concat(_displayType === 'column' ? 'flex-none' : '') | |
| 76 | + }, /*#__PURE__*/React.createElement("span", { | |
| 77 | + dangerouslySetInnerHTML: { | |
| 78 | + __html: title | |
| 79 | + } | |
| 80 | + })), /*#__PURE__*/React.createElement(Description, { | |
| 81 | + schema: schema, | |
| 82 | + displayType: _displayType | |
| 83 | + })) : null); | |
| 84 | +}; | |
| 85 | + | |
| 86 | +export default Title; | |
| \ No newline at end of file | ... | ... |
es/core/RenderField/index.js
0 → 100644
| 1 | +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | |
| 2 | + | |
| 3 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 4 | + | |
| 5 | +import React, { useEffect, useRef } from 'react'; | |
| 6 | +import { useStore, useStore2, useTools } from '../../hooks'; | |
| 7 | +import useDebouncedCallback from '../../useDebounce'; | |
| 8 | +import { getValueByPath, isCheckBoxType, isObjType } from '../../utils'; | |
| 9 | +import ErrorMessage from './ErrorMessage'; | |
| 10 | +import Extra from './Extra'; | |
| 11 | +import FieldTitle from './Title'; | |
| 12 | +import ExtendedWidget from './ExtendedWidget'; // TODO: 之后不要直接用get,收口到一个内部方法getValue,便于全局 ctrl + f 查找 | |
| 13 | + | |
| 14 | +var RenderField = function RenderField(props) { | |
| 15 | + var $id = props.$id, | |
| 16 | + dataIndex = props.dataIndex, | |
| 17 | + dataPath = props.dataPath, | |
| 18 | + _value = props._value, | |
| 19 | + dependValues = props.dependValues, | |
| 20 | + _schema = props._schema, | |
| 21 | + labelClass = props.labelClass, | |
| 22 | + labelStyle = props.labelStyle, | |
| 23 | + _contentClass = props.contentClass, | |
| 24 | + children = props.children, | |
| 25 | + _props$errorFields = props.errorFields, | |
| 26 | + errorFields = _props$errorFields === void 0 ? [] : _props$errorFields, | |
| 27 | + hideTitle = props.hideTitle, | |
| 28 | + displayType = props.displayType; | |
| 29 | + | |
| 30 | + var _useStore = useStore(), | |
| 31 | + formData = _useStore.formData; | |
| 32 | + | |
| 33 | + var _useStore2 = useStore2(), | |
| 34 | + debounceInput = _useStore2.debounceInput, | |
| 35 | + readOnly = _useStore2.readOnly, | |
| 36 | + disabled = _useStore2.disabled, | |
| 37 | + showValidate = _useStore2.showValidate; | |
| 38 | + | |
| 39 | + var _useTools = useTools(), | |
| 40 | + onValuesChange = _useTools.onValuesChange, | |
| 41 | + onItemChange = _useTools.onItemChange, | |
| 42 | + setEditing = _useTools.setEditing, | |
| 43 | + touchKey = _useTools.touchKey; | |
| 44 | + | |
| 45 | + var formDataRef = useRef(); | |
| 46 | + formDataRef.current = formData; // console.log('<renderField>', $id); | |
| 47 | + | |
| 48 | + var errObj = errorFields.find(function (err) { | |
| 49 | + return err.name === dataPath; | |
| 50 | + }); | |
| 51 | + var errorMessage = errObj && errObj.error; // 是一个list | |
| 52 | + | |
| 53 | + var hasError = Array.isArray(errorMessage) && errorMessage.length > 0; // 补上这个class,会自动让下面所有的展示ui变红! | |
| 54 | + | |
| 55 | + var contentClass = hasError && showValidate ? _contentClass + ' ant-form-item-has-error' : _contentClass; | |
| 56 | + var contentStyle = {}; | |
| 57 | + var debouncedSetEditing = useDebouncedCallback(setEditing, 350); | |
| 58 | + | |
| 59 | + var _readOnly = readOnly !== undefined ? readOnly : _schema.readOnly; | |
| 60 | + | |
| 61 | + var _disabled = disabled !== undefined ? disabled : _schema.disabled; // TODO: 优化一下,只有touch还是false的时候,setTouched | |
| 62 | + | |
| 63 | + | |
| 64 | + var onChange = function onChange(value) { | |
| 65 | + // 动过的key,算被touch了, 这里之后要考虑动的来源 | |
| 66 | + touchKey(dataPath); // 开始编辑,节流 | |
| 67 | + | |
| 68 | + if (debounceInput) { | |
| 69 | + setEditing(true); | |
| 70 | + debouncedSetEditing(false); | |
| 71 | + } | |
| 72 | + | |
| 73 | + if (typeof dataPath === 'string') { | |
| 74 | + onItemChange(dataPath, value); | |
| 75 | + } // 先不暴露给外部,这个api | |
| 76 | + | |
| 77 | + | |
| 78 | + if (typeof onValuesChange === 'function') { | |
| 79 | + onValuesChange(_defineProperty({}, dataPath, value), formDataRef.current); | |
| 80 | + } | |
| 81 | + }; | |
| 82 | + | |
| 83 | + var titleProps = { | |
| 84 | + labelClass: labelClass, | |
| 85 | + labelStyle: labelStyle, | |
| 86 | + schema: _schema, | |
| 87 | + displayType: displayType | |
| 88 | + }; | |
| 89 | + var messageProps = { | |
| 90 | + message: errorMessage, | |
| 91 | + schema: _schema, | |
| 92 | + displayType: displayType, | |
| 93 | + softHidden: displayType === 'inline', | |
| 94 | + // 这个是如果没有校验信息时,展示与否 | |
| 95 | + hardHidden: showValidate === false || _readOnly === true // 这个是强制的展示与否 | |
| 96 | + | |
| 97 | + }; | |
| 98 | + var placeholderTitleProps = { | |
| 99 | + className: labelClass, | |
| 100 | + style: labelStyle | |
| 101 | + }; | |
| 102 | + | |
| 103 | + var _showTitle = !hideTitle && typeof _schema.title === 'string'; // TODO: 这块最好能判断上一层是list1, | |
| 104 | + | |
| 105 | + | |
| 106 | + if (hideTitle && _schema.title) { | |
| 107 | + _schema.placeholder = _schema.placeholder || _schema.title; | |
| 108 | + } | |
| 109 | + | |
| 110 | + var _getValue = function _getValue(path) { | |
| 111 | + return getValueByPath(formData, path); | |
| 112 | + }; | |
| 113 | + | |
| 114 | + var widgetProps = { | |
| 115 | + $id: $id, | |
| 116 | + schema: _schema, | |
| 117 | + readOnly: _readOnly, | |
| 118 | + disabled: _disabled, | |
| 119 | + onChange: onChange, | |
| 120 | + getValue: _getValue, | |
| 121 | + formData: formData, | |
| 122 | + value: _value, | |
| 123 | + dependValues: dependValues, | |
| 124 | + onItemChange: onItemChange, | |
| 125 | + dataIndex: dataIndex, | |
| 126 | + dataPath: dataPath, | |
| 127 | + children: children | |
| 128 | + }; // if (_schema && _schema.default !== undefined) { | |
| 129 | + // widgetProps.value = _schema.default; | |
| 130 | + // } | |
| 131 | + // checkbox必须单独处理,布局太不同了 | |
| 132 | + | |
| 133 | + if (isCheckBoxType(_schema, _readOnly)) { | |
| 134 | + return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && /*#__PURE__*/React.createElement("div", placeholderTitleProps), /*#__PURE__*/React.createElement("div", { | |
| 135 | + className: contentClass, | |
| 136 | + style: contentStyle | |
| 137 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps))); | |
| 138 | + } | |
| 139 | + | |
| 140 | + var titleElement = /*#__PURE__*/React.createElement(FieldTitle, titleProps); | |
| 141 | + | |
| 142 | + if (isObjType(_schema)) { | |
| 143 | + titleElement = /*#__PURE__*/React.createElement("div", { | |
| 144 | + style: { | |
| 145 | + display: 'flex' | |
| 146 | + } | |
| 147 | + }, titleElement, /*#__PURE__*/React.createElement(ErrorMessage, messageProps)); | |
| 148 | + return /*#__PURE__*/React.createElement("div", { | |
| 149 | + className: contentClass, | |
| 150 | + style: contentStyle | |
| 151 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, _extends({}, widgetProps, { | |
| 152 | + message: errorMessage, | |
| 153 | + title: _showTitle ? titleElement : undefined | |
| 154 | + })), /*#__PURE__*/React.createElement(Extra, widgetProps)); | |
| 155 | + } | |
| 156 | + | |
| 157 | + return /*#__PURE__*/React.createElement(React.Fragment, null, _showTitle && titleElement, /*#__PURE__*/React.createElement("div", { | |
| 158 | + className: "".concat(contentClass, " ").concat(hideTitle ? 'fr-content-no-title' : ''), | |
| 159 | + style: contentStyle | |
| 160 | + }, /*#__PURE__*/React.createElement(ExtendedWidget, widgetProps), /*#__PURE__*/React.createElement(Extra, widgetProps), /*#__PURE__*/React.createElement(ErrorMessage, messageProps))); | |
| 161 | +}; | |
| 162 | + | |
| 163 | +export default RenderField; | |
| \ No newline at end of file | ... | ... |
es/core/index.js
0 → 100644
| 1 | +var _excluded = ["id", "_item", "dataIndex", "hideTitle", "hideValidation", "debugCss"], | |
| 2 | + _excluded2 = ["id", "item", "dataIndex", "dataPath", "hideTitle", "hideValidation", "debugCss", "schema", "_value", "dependValues", "displayType", "column", "labelWidth", "readOnly", "errorFields", "effectiveLabelWidth"]; | |
| 3 | + | |
| 4 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 5 | + | |
| 6 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 7 | + | |
| 8 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 9 | + | |
| 10 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | |
| 11 | + | |
| 12 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | |
| 13 | + | |
| 14 | +import React, { useRef } from 'react'; | |
| 15 | +import RenderList from './RenderChildren/RenderList'; | |
| 16 | +import RenderObject from './RenderChildren/RenderObject'; | |
| 17 | +import RenderField from './RenderField'; | |
| 18 | +import { useStore, useStore2 } from '../hooks'; | |
| 19 | +import { isLooselyNumber, isCssLength, getParentProps, getParentPath, isListType, isCheckBoxType, isObjType, getValueByPath, getDataPath, parseRootValueInSchema, clone } from '../utils'; | |
| 20 | + | |
| 21 | +var Core = function Core(_ref) { | |
| 22 | + var _ref$id = _ref.id, | |
| 23 | + id = _ref$id === void 0 ? '#' : _ref$id, | |
| 24 | + _item = _ref._item, | |
| 25 | + _ref$dataIndex = _ref.dataIndex, | |
| 26 | + dataIndex = _ref$dataIndex === void 0 ? [] : _ref$dataIndex, | |
| 27 | + _ref$hideTitle = _ref.hideTitle, | |
| 28 | + hideTitle = _ref$hideTitle === void 0 ? false : _ref$hideTitle, | |
| 29 | + _ref$hideValidation = _ref.hideValidation, | |
| 30 | + hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation, | |
| 31 | + debugCss = _ref.debugCss, | |
| 32 | + rest = _objectWithoutProperties(_ref, _excluded); | |
| 33 | + | |
| 34 | + // console.log('<Core>', id); | |
| 35 | + var snapShot = useRef(); | |
| 36 | + | |
| 37 | + var _useStore = useStore(), | |
| 38 | + flatten = _useStore.flatten, | |
| 39 | + errorFields = _useStore.errorFields, | |
| 40 | + isEditing = _useStore.isEditing, | |
| 41 | + formData = _useStore.formData, | |
| 42 | + allTouched = _useStore.allTouched; | |
| 43 | + | |
| 44 | + var _useStore2 = useStore2(), | |
| 45 | + displayType = _useStore2.displayType, | |
| 46 | + column = _useStore2.column, | |
| 47 | + labelWidth = _useStore2.labelWidth, | |
| 48 | + readOnly = _useStore2.readOnly; | |
| 49 | + | |
| 50 | + var item = _item ? _item : flatten[id]; | |
| 51 | + if (!item) return null; | |
| 52 | + var dataPath = getDataPath(id, dataIndex); | |
| 53 | + var parentPath = getParentPath(dataPath); | |
| 54 | + | |
| 55 | + var _value = getValueByPath(formData, dataPath); | |
| 56 | + | |
| 57 | + var schema = clone(item.schema); | |
| 58 | + var dependencies = schema.dependencies; | |
| 59 | + var dependValues = []; | |
| 60 | + var rootValue; | |
| 61 | + | |
| 62 | + try { | |
| 63 | + if (Array.isArray(dependencies)) { | |
| 64 | + dependencies.forEach(function (item) { | |
| 65 | + var itemPath = getDataPath(item, dataIndex); | |
| 66 | + var result = getValueByPath(formData, itemPath); | |
| 67 | + dependValues.push(result); | |
| 68 | + }); | |
| 69 | + } | |
| 70 | + } catch (error) { | |
| 71 | + console.error("dependencies \u8BA1\u7B97\u62A5\u9519\uFF0C".concat(dependencies)); | |
| 72 | + } | |
| 73 | + | |
| 74 | + try { | |
| 75 | + rootValue = getValueByPath(formData, parentPath); | |
| 76 | + } catch (error) {} // 节流部分逻辑,编辑时不执行 | |
| 77 | + | |
| 78 | + | |
| 79 | + if (isEditing && snapShot.current) { | |
| 80 | + schema = snapShot.current; | |
| 81 | + } else { | |
| 82 | + if (JSON.stringify(schema).indexOf('rootValue') > -1) { | |
| 83 | + schema = parseRootValueInSchema(schema, rootValue); | |
| 84 | + } | |
| 85 | + | |
| 86 | + snapShot.current = schema; | |
| 87 | + } // 真正有效的label宽度需要从现在所在item开始一直往上回溯(设计成了继承关系),找到的第一个有值的 ui:labelWidth | |
| 88 | + | |
| 89 | + | |
| 90 | + var effectiveLabelWidth = getParentProps('labelWidth', id, flatten) || labelWidth; | |
| 91 | + | |
| 92 | + var dataProps = _objectSpread({ | |
| 93 | + id: id, | |
| 94 | + item: item, | |
| 95 | + // 如果直接传了item,就不用id去取item, 暂时是内部属性,不外用 | |
| 96 | + dataIndex: dataIndex, | |
| 97 | + // 数据来源是数组的第几个index,上层每有一个list,就push一个index | |
| 98 | + dataPath: dataPath, | |
| 99 | + _value: _value, | |
| 100 | + dependValues: dependValues, | |
| 101 | + hideTitle: hideTitle, | |
| 102 | + hideValidation: hideValidation, | |
| 103 | + debugCss: debugCss, | |
| 104 | + schema: schema, | |
| 105 | + displayType: displayType, | |
| 106 | + column: column, | |
| 107 | + labelWidth: labelWidth, | |
| 108 | + readOnly: readOnly, | |
| 109 | + errorFields: errorFields, | |
| 110 | + effectiveLabelWidth: effectiveLabelWidth, | |
| 111 | + allTouched: allTouched | |
| 112 | + }, rest); | |
| 113 | + | |
| 114 | + return /*#__PURE__*/React.createElement(CoreRender, dataProps); | |
| 115 | +}; | |
| 116 | + | |
| 117 | +var CoreRender = function CoreRender(_ref2) { | |
| 118 | + var id = _ref2.id, | |
| 119 | + item = _ref2.item, | |
| 120 | + dataIndex = _ref2.dataIndex, | |
| 121 | + dataPath = _ref2.dataPath, | |
| 122 | + hideTitle = _ref2.hideTitle, | |
| 123 | + hideValidation = _ref2.hideValidation, | |
| 124 | + debugCss = _ref2.debugCss, | |
| 125 | + schema = _ref2.schema, | |
| 126 | + _value = _ref2._value, | |
| 127 | + dependValues = _ref2.dependValues, | |
| 128 | + displayType = _ref2.displayType, | |
| 129 | + column = _ref2.column, | |
| 130 | + labelWidth = _ref2.labelWidth, | |
| 131 | + readOnly = _ref2.readOnly, | |
| 132 | + errorFields = _ref2.errorFields, | |
| 133 | + effectiveLabelWidth = _ref2.effectiveLabelWidth, | |
| 134 | + rest = _objectWithoutProperties(_ref2, _excluded2); | |
| 135 | + | |
| 136 | + // if (schema.hidden) { | |
| 137 | + // return null; | |
| 138 | + // } | |
| 139 | + // 样式的逻辑全放在这层 | |
| 140 | + // displayType 一层层网上找值 | |
| 141 | + var _displayType = schema.displayType || rest.displayType || displayType || 'column'; | |
| 142 | + | |
| 143 | + var isList = isListType(schema); | |
| 144 | + var isObj = isObjType(schema); | |
| 145 | + var isComplex = isObj || isList; | |
| 146 | + var isCheckBox = isCheckBoxType(schema, readOnly); | |
| 147 | + var width = schema.width || schema['ui:width']; | |
| 148 | + var containerClass = "fr-field ".concat(_displayType === 'inline' ? '' : 'w-100', " flex"); | |
| 149 | + var labelClass = "fr-label"; | |
| 150 | + var contentClass = "fr-content"; | |
| 151 | + | |
| 152 | + if (typeof schema.className === 'string') { | |
| 153 | + containerClass += ' ' + schema.className; | |
| 154 | + } // common classNames dispite row or column | |
| 155 | + | |
| 156 | + | |
| 157 | + switch (schema.type) { | |
| 158 | + case 'object': | |
| 159 | + if (isObj) { | |
| 160 | + if (schema.title) { | |
| 161 | + labelClass += ' fr-label-object'; | |
| 162 | + } | |
| 163 | + | |
| 164 | + containerClass += ' fr-field-object'; | |
| 165 | + } | |
| 166 | + | |
| 167 | + break; | |
| 168 | + | |
| 169 | + case 'array': | |
| 170 | + // list 有两种展示形式! | |
| 171 | + if (isList) { | |
| 172 | + if (schema.title) { | |
| 173 | + labelClass += ' fr-label-list'; | |
| 174 | + } | |
| 175 | + | |
| 176 | + containerClass += ' fr-field-column'; | |
| 177 | + } | |
| 178 | + | |
| 179 | + break; | |
| 180 | + | |
| 181 | + case 'boolean': | |
| 182 | + if (isCheckBox) { | |
| 183 | + contentClass += ' fr-content-column'; // checkbox高度短,需要居中对齐 | |
| 184 | + | |
| 185 | + containerClass += " flex ".concat(_displayType === 'column' ? 'flex-column' : ''); | |
| 186 | + } | |
| 187 | + | |
| 188 | + break; | |
| 189 | + | |
| 190 | + default: | |
| 191 | + } // column specific className | |
| 192 | + | |
| 193 | + | |
| 194 | + if (!isComplex && !isCheckBox) { | |
| 195 | + if (_displayType === 'column') { | |
| 196 | + containerClass += ' flex-column'; | |
| 197 | + labelClass += ' fr-label-column'; | |
| 198 | + contentClass += ' fr-content-column'; | |
| 199 | + | |
| 200 | + switch (schema.type) { | |
| 201 | + case 'object': | |
| 202 | + break; | |
| 203 | + | |
| 204 | + case 'array': | |
| 205 | + if (schema.title && !schema.enum) {// labelClass += ' b mb2'; | |
| 206 | + } | |
| 207 | + | |
| 208 | + break; | |
| 209 | + | |
| 210 | + case 'boolean': | |
| 211 | + break; | |
| 212 | + | |
| 213 | + default: | |
| 214 | + } | |
| 215 | + } else if (_displayType === 'row') { | |
| 216 | + // row specific className | |
| 217 | + containerClass += ''; | |
| 218 | + labelClass += ' fr-label-row'; | |
| 219 | + contentClass += ' fr-content-row'; | |
| 220 | + | |
| 221 | + if (!isObj && !isCheckBox) { | |
| 222 | + labelClass += ' flex-shrink-0 fr-label-row'; | |
| 223 | + contentClass += ' flex-grow-1 relative'; | |
| 224 | + } | |
| 225 | + } | |
| 226 | + } // style part | |
| 227 | + | |
| 228 | + | |
| 229 | + var columnStyle = {}; | |
| 230 | + | |
| 231 | + if (schema.hidden) { | |
| 232 | + columnStyle.display = 'none'; | |
| 233 | + } // if (!isComplex) { | |
| 234 | + // } | |
| 235 | + | |
| 236 | + | |
| 237 | + if (!isObj) { | |
| 238 | + if (width) { | |
| 239 | + columnStyle.width = width; | |
| 240 | + columnStyle.paddingRight = 8; | |
| 241 | + } else if (column > 1) { | |
| 242 | + columnStyle.width = "calc(100% /".concat(column, ")"); | |
| 243 | + columnStyle.paddingRight = 8; | |
| 244 | + } | |
| 245 | + } | |
| 246 | + | |
| 247 | + var _labelWidth = isLooselyNumber(effectiveLabelWidth) ? Number(effectiveLabelWidth) : isCssLength(effectiveLabelWidth) ? effectiveLabelWidth : 110; // 默认是 110px 的长度 | |
| 248 | + | |
| 249 | + | |
| 250 | + var labelStyle = { | |
| 251 | + width: _labelWidth | |
| 252 | + }; | |
| 253 | + | |
| 254 | + if (isComplex || _displayType === 'column') { | |
| 255 | + labelStyle = { | |
| 256 | + flexGrow: 1 | |
| 257 | + }; | |
| 258 | + } | |
| 259 | + | |
| 260 | + if (_displayType === 'inline') { | |
| 261 | + labelStyle = { | |
| 262 | + marginTop: 5, | |
| 263 | + paddingLeft: 12 | |
| 264 | + }; | |
| 265 | + labelClass = ''; | |
| 266 | + contentClass += ' fr-content-inline'; | |
| 267 | + | |
| 268 | + if (containerClass.indexOf('fr-field-object') === -1) { | |
| 269 | + containerClass += ' fr-field-inline'; | |
| 270 | + } | |
| 271 | + } | |
| 272 | + | |
| 273 | + var hasChildren = item.children && item.children.length > 0; | |
| 274 | + var fieldProps = { | |
| 275 | + $id: id, | |
| 276 | + dataIndex: dataIndex, | |
| 277 | + dataPath: dataPath, | |
| 278 | + _value: _value, | |
| 279 | + dependValues: dependValues, | |
| 280 | + _schema: schema, | |
| 281 | + labelClass: labelClass, | |
| 282 | + labelStyle: labelStyle, | |
| 283 | + contentClass: contentClass, | |
| 284 | + errorFields: errorFields, | |
| 285 | + // 层级间可使用的字段 | |
| 286 | + displayType: _displayType, | |
| 287 | + hideTitle: hideTitle, | |
| 288 | + hideValidation: hideValidation | |
| 289 | + }; | |
| 290 | + var objChildren = /*#__PURE__*/React.createElement("div", { | |
| 291 | + className: "flex flex-wrap" | |
| 292 | + }, /*#__PURE__*/React.createElement(RenderObject, { | |
| 293 | + dataIndex: dataIndex, | |
| 294 | + errorFields: errorFields, | |
| 295 | + displayType: _displayType, | |
| 296 | + hideTitle: hideTitle | |
| 297 | + }, item.children)); | |
| 298 | + var listChildren = /*#__PURE__*/React.createElement(RenderList, { | |
| 299 | + parentId: id, | |
| 300 | + schema: schema, | |
| 301 | + dataIndex: dataIndex, | |
| 302 | + errorFields: errorFields, | |
| 303 | + displayType: _displayType, | |
| 304 | + hideTitle: hideTitle | |
| 305 | + }, item.children); // 计算 children | |
| 306 | + | |
| 307 | + var _children = null; | |
| 308 | + | |
| 309 | + if (hasChildren) { | |
| 310 | + if (isObj) { | |
| 311 | + _children = objChildren; | |
| 312 | + } else if (isList) { | |
| 313 | + _children = listChildren; | |
| 314 | + } | |
| 315 | + } else if (isCheckBox) { | |
| 316 | + _children = schema.title; | |
| 317 | + } | |
| 318 | + | |
| 319 | + return /*#__PURE__*/React.createElement("div", { | |
| 320 | + style: columnStyle, | |
| 321 | + className: "".concat(containerClass, " ").concat(debugCss ? 'debug' : '') | |
| 322 | + }, /*#__PURE__*/React.createElement(RenderField, fieldProps, _children)); | |
| 323 | +}; | |
| 324 | + | |
| 325 | +var areEqual = function areEqual(prev, current) { | |
| 326 | + if (prev.allTouched !== current.allTouched) { | |
| 327 | + return false; | |
| 328 | + } | |
| 329 | + | |
| 330 | + if (prev.displayType !== current.displayType) { | |
| 331 | + return false; | |
| 332 | + } | |
| 333 | + | |
| 334 | + if (prev.column !== current.column) { | |
| 335 | + return false; | |
| 336 | + } | |
| 337 | + | |
| 338 | + if (prev.labelWidth !== current.labelWidth) { | |
| 339 | + return false; | |
| 340 | + } | |
| 341 | + | |
| 342 | + if (JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)) { | |
| 343 | + return false; | |
| 344 | + } | |
| 345 | + | |
| 346 | + if (JSON.stringify(prev._value) === JSON.stringify(current._value) && JSON.stringify(prev.schema) === JSON.stringify(current.schema) && JSON.stringify(prev.errorFields) === JSON.stringify(current.errorFields)) { | |
| 347 | + return true; | |
| 348 | + } | |
| 349 | + | |
| 350 | + return false; | |
| 351 | +}; | |
| 352 | + | |
| 353 | +var MCore = /*#__PURE__*/React.memo(CoreRender, areEqual); | |
| 354 | +export default Core; | |
| \ No newline at end of file | ... | ... |
es/createWidget.js
0 → 100644
| 1 | +var _excluded = ["schema"], | |
| 2 | + _excluded2 = ["onChange", "value", "defaultValue", "schema", "readOnly"]; | |
| 3 | + | |
| 4 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 5 | + | |
| 6 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 7 | + | |
| 8 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 9 | + | |
| 10 | +function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | |
| 11 | + | |
| 12 | +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | |
| 13 | + | |
| 14 | +import React from "react"; | |
| 15 | +import { defaultGetValueFromEvent } from './utils'; | |
| 16 | +export var createWidget = function createWidget(mapProps, extraSchema) { | |
| 17 | + return function (Component) { | |
| 18 | + return function (props) { | |
| 19 | + var schema = props.schema, | |
| 20 | + rest = _objectWithoutProperties(props, _excluded); | |
| 21 | + | |
| 22 | + var _schema = _objectSpread(_objectSpread({}, schema), extraSchema); | |
| 23 | + | |
| 24 | + var propsMap = typeof mapProps === 'function' ? mapProps(_objectSpread({ | |
| 25 | + schema: _schema | |
| 26 | + }, rest)) : {}; | |
| 27 | + | |
| 28 | + var _props = _objectSpread(_objectSpread({ | |
| 29 | + schema: _schema | |
| 30 | + }, rest), propsMap); | |
| 31 | + | |
| 32 | + var finalProps = transformProps(_props); | |
| 33 | + return /*#__PURE__*/React.createElement(Component, finalProps); | |
| 34 | + }; | |
| 35 | + }; | |
| 36 | +}; | |
| 37 | +export var transformProps = function transformProps(props) { | |
| 38 | + var onChange = props.onChange, | |
| 39 | + value = props.value, | |
| 40 | + defaultValue = props.defaultValue, | |
| 41 | + ownSchema = props.schema, | |
| 42 | + readOnly = props.readOnly, | |
| 43 | + rest = _objectWithoutProperties(props, _excluded2); | |
| 44 | + | |
| 45 | + var schema = _objectSpread({}, ownSchema); | |
| 46 | + | |
| 47 | + var _ref = schema || {}, | |
| 48 | + trigger = _ref.trigger, | |
| 49 | + valuePropName = _ref.valuePropName; | |
| 50 | + | |
| 51 | + var controlProps = {}; | |
| 52 | + var _valuePropName = 'value'; | |
| 53 | + | |
| 54 | + var _value = value === undefined ? defaultValue : value; | |
| 55 | + | |
| 56 | + if (valuePropName && typeof valuePropName === 'string') { | |
| 57 | + _valuePropName = valuePropName; | |
| 58 | + controlProps[valuePropName] = _value; | |
| 59 | + } else { | |
| 60 | + controlProps.value = _value; | |
| 61 | + } | |
| 62 | + | |
| 63 | + var _onChange = function _onChange() { | |
| 64 | + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | |
| 65 | + args[_key] = arguments[_key]; | |
| 66 | + } | |
| 67 | + | |
| 68 | + var newValue = defaultGetValueFromEvent.apply(void 0, [_valuePropName].concat(args)); | |
| 69 | + onChange(newValue); | |
| 70 | + }; | |
| 71 | + | |
| 72 | + if (trigger && typeof trigger === 'string') { | |
| 73 | + controlProps[trigger] = _onChange; | |
| 74 | + } else { | |
| 75 | + controlProps.onChange = _onChange; | |
| 76 | + } | |
| 77 | + | |
| 78 | + var usefulPropsFromSchema = { | |
| 79 | + disabled: schema.disabled || schema['ui:disabled'], | |
| 80 | + readOnly: schema.readOnly || schema['ui:readonly'] || readOnly, | |
| 81 | + hidden: schema.hidden || schema['ui:hidden'] | |
| 82 | + }; | |
| 83 | + | |
| 84 | + var _props = _objectSpread(_objectSpread(_objectSpread({}, controlProps), {}, { | |
| 85 | + schema: schema | |
| 86 | + }, usefulPropsFromSchema), rest); | |
| 87 | + | |
| 88 | + return _props; | |
| 89 | +}; | |
| \ No newline at end of file | ... | ... |
es/hooks.js
0 → 100644
| 1 | +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | |
| 2 | + | |
| 3 | +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | |
| 4 | + | |
| 5 | +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | |
| 6 | + | |
| 7 | +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | |
| 8 | + | |
| 9 | +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | |
| 10 | + | |
| 11 | +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | |
| 12 | + | |
| 13 | +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | |
| 14 | + | |
| 15 | +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | |
| 16 | + | |
| 17 | +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | |
| 18 | + | |
| 19 | +import { useReducer, useContext, useRef, useEffect, useState, createContext } from 'react'; | |
| 20 | +export var Ctx = /*#__PURE__*/createContext(function () {}); | |
| 21 | +export var StoreCtx = /*#__PURE__*/createContext({}); | |
| 22 | +export var Store2Ctx = /*#__PURE__*/createContext({}); | |
| 23 | +export var useTools = function useTools() { | |
| 24 | + return useContext(Ctx); | |
| 25 | +}; | |
| 26 | +export var useStore = function useStore() { | |
| 27 | + return useContext(StoreCtx); | |
| 28 | +}; | |
| 29 | +export var useStore2 = function useStore2() { | |
| 30 | + return useContext(Store2Ctx); | |
| 31 | +}; | |
| 32 | +export var useSet = function useSet(initState) { | |
| 33 | + var _useReducer = useReducer(function (state, newState) { | |
| 34 | + var action = newState; | |
| 35 | + | |
| 36 | + if (typeof newState === 'function') { | |
| 37 | + action = action(state); | |
| 38 | + } | |
| 39 | + | |
| 40 | + if (newState.action && newState.payload) { | |
| 41 | + action = newState.payload; | |
| 42 | + | |
| 43 | + if (typeof action === 'function') { | |
| 44 | + action = action(state); | |
| 45 | + } | |
| 46 | + } | |
| 47 | + | |
| 48 | + var result = _objectSpread(_objectSpread({}, state), action); // console.group(newState.action || 'action'); // TODO: give it a name | |
| 49 | + // console.log('%cState:', 'color: #9E9E9E; font-weight: 700;', state); | |
| 50 | + // console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', action); | |
| 51 | + // console.log('%cNext:', 'color: #47B04B; font-weight: 700;', result); | |
| 52 | + // console.groupEnd(); | |
| 53 | + | |
| 54 | + | |
| 55 | + // console.group(newState.action || 'action'); // TODO: give it a name | |
| 56 | + // console.log('%cState:', 'color: #9E9E9E; font-weight: 700;', state); | |
| 57 | + // console.log('%cAction:', 'color: #00A7F7; font-weight: 700;', action); | |
| 58 | + // console.log('%cNext:', 'color: #47B04B; font-weight: 700;', result); | |
| 59 | + // console.groupEnd(); | |
| 60 | + return result; | |
| 61 | + }, initState), | |
| 62 | + _useReducer2 = _slicedToArray(_useReducer, 2), | |
| 63 | + state = _useReducer2[0], | |
| 64 | + setState = _useReducer2[1]; | |
| 65 | + | |
| 66 | + return [state, setState]; | |
| 67 | +}; | |
| 68 | +export function useInterval(callback, delay, start) { | |
| 69 | + var savedCallback = useRef(); | |
| 70 | + useEffect(function () { | |
| 71 | + savedCallback.current = callback; | |
| 72 | + }, [callback]); | |
| 73 | + var id = useRef(); | |
| 74 | + useEffect(function () { | |
| 75 | + if (!start) { | |
| 76 | + return; | |
| 77 | + } | |
| 78 | + | |
| 79 | + function tick() { | |
| 80 | + savedCallback && savedCallback.current && savedCallback.current(); | |
| 81 | + } | |
| 82 | + | |
| 83 | + tick(); | |
| 84 | + | |
| 85 | + if (delay !== null) { | |
| 86 | + id.current = setInterval(tick, delay); | |
| 87 | + return function () { | |
| 88 | + return clearInterval(id.current); | |
| 89 | + }; | |
| 90 | + } | |
| 91 | + }, [delay, start]); | |
| 92 | + return function () { | |
| 93 | + return clearInterval(id.current); | |
| 94 | + }; | |
| 95 | +} | |
| 96 | +export function usePrevious(value) { | |
| 97 | + // The ref object is a generic container whose current property is mutable ... | |
| 98 | + // ... and can hold any value, similar to an instance property on a class | |
| 99 | + var ref = useRef(); // Store current value in ref | |
| 100 | + | |
| 101 | + useEffect(function () { | |
| 102 | + ref.current = value; | |
| 103 | + }, [value]); // Only re-run if value changes | |
| 104 | + // Return previous value (happens before update in useEffect above) | |
| 105 | + | |
| 106 | + return ref.current; | |
| 107 | +} | |
| 108 | +export var useShowOnce = function useShowOnce(localKey) { | |
| 109 | + // 从 localStorage 读取 key 值 | |
| 110 | + var _useState = useState(false), | |
| 111 | + _useState2 = _slicedToArray(_useState, 2), | |
| 112 | + show = _useState2[0], | |
| 113 | + setShow = _useState2[1]; | |
| 114 | + | |
| 115 | + var localStr; | |
| 116 | + | |
| 117 | + try { | |
| 118 | + localStr = localStorage.getItem(localKey); | |
| 119 | + } catch (error) {} | |
| 120 | + | |
| 121 | + if (!localStr) { | |
| 122 | + setShow(true); | |
| 123 | + localStorage.setItem(localKey, JSON.stringify(true)); | |
| 124 | + } | |
| 125 | + | |
| 126 | + return show; | |
| 127 | +}; | |
| 128 | +export var useModal = function useModal() { | |
| 129 | + var _useState3 = useState(false), | |
| 130 | + _useState4 = _slicedToArray(_useState3, 2), | |
| 131 | + show = _useState4[0], | |
| 132 | + setShow = _useState4[1]; | |
| 133 | + | |
| 134 | + var toggle = function toggle() { | |
| 135 | + return setShow(!show); | |
| 136 | + }; | |
| 137 | + | |
| 138 | + return [show, toggle]; | |
| 139 | +}; | |
| 140 | +export var useWindowState = function useWindowState(initState) { | |
| 141 | + var _useState5 = useState(initState), | |
| 142 | + _useState6 = _slicedToArray(_useState5, 2), | |
| 143 | + state = _useState6[0], | |
| 144 | + setState = _useState6[1]; | |
| 145 | + | |
| 146 | + return [state, setState]; | |
| 147 | +}; | |
| 148 | +export var useStorageState = function useStorageState() { | |
| 149 | + var initState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
| 150 | + var searchKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'SAVES'; | |
| 151 | + | |
| 152 | + var readSearchFromStorage = function readSearchFromStorage() { | |
| 153 | + var searchStr = localStorage.getItem(searchKey); | |
| 154 | + | |
| 155 | + if (searchStr) { | |
| 156 | + try { | |
| 157 | + return JSON.parse(searchStr); | |
| 158 | + } catch (error) { | |
| 159 | + return initState; | |
| 160 | + } | |
| 161 | + } | |
| 162 | + | |
| 163 | + return initState; | |
| 164 | + }; | |
| 165 | + | |
| 166 | + var _useState7 = useState(readSearchFromStorage()), | |
| 167 | + _useState8 = _slicedToArray(_useState7, 2), | |
| 168 | + data = _useState8[0], | |
| 169 | + setData = _useState8[1]; | |
| 170 | + | |
| 171 | + var setSearchWithStorage = function setSearchWithStorage(search) { | |
| 172 | + setData(search); | |
| 173 | + localStorage.setItem(searchKey, JSON.stringify(search)); | |
| 174 | + }; | |
| 175 | + | |
| 176 | + return [data, setSearchWithStorage]; | |
| 177 | +}; | |
| \ No newline at end of file | ... | ... |
es/index.css
0 → 100644
| 1 | +/* | |
| 2 | + 用于原有样式的覆盖 | |
| 3 | + */ | |
| 4 | +.fr-container { | |
| 5 | + /* Row */ | |
| 6 | + /* 自定义类 */ | |
| 7 | + /* 组件内部样式*/ | |
| 8 | + /* 其他样式 */ | |
| 9 | +} | |
| 10 | +.fr-container .fr-field { | |
| 11 | + font-size: 14px; | |
| 12 | + padding: 0; | |
| 13 | + color: rgba(0, 0, 0, 0.85); | |
| 14 | + line-height: 1.5715; | |
| 15 | + margin-bottom: 0; | |
| 16 | +} | |
| 17 | +.fr-container .fr-field-column { | |
| 18 | + flex-direction: column; | |
| 19 | +} | |
| 20 | +.fr-container .fr-field-object { | |
| 21 | + flex-direction: column; | |
| 22 | +} | |
| 23 | +.fr-container .fr-field-inline { | |
| 24 | + margin-bottom: 12px; | |
| 25 | +} | |
| 26 | +.fr-container .fr-item-wrapper { | |
| 27 | + position: relative; | |
| 28 | + display: flex; | |
| 29 | + align-items: center; | |
| 30 | + min-height: 32px; | |
| 31 | +} | |
| 32 | +.fr-container .ant-table-cell .fr-field { | |
| 33 | + margin-bottom: 0; | |
| 34 | +} | |
| 35 | +.fr-container .fr-collapse-object { | |
| 36 | + margin-bottom: 8px; | |
| 37 | + overflow: hidden; | |
| 38 | + background: #f7f7f7; | |
| 39 | + border-radius: 2px; | |
| 40 | +} | |
| 41 | +.fr-container .fr-collapse-object .ant-collapse-header { | |
| 42 | + padding-bottom: 4px !important; | |
| 43 | + padding-top: 4px !important; | |
| 44 | +} | |
| 45 | +.fr-container .fr-collapse-object .ant-collapse-content-box { | |
| 46 | + padding: 8px 8px 4px 8px !important; | |
| 47 | +} | |
| 48 | +.fr-container .fr-collapse-object .ant-collapse-arrow { | |
| 49 | + padding-top: 5px !important; | |
| 50 | +} | |
| 51 | +.fr-container .fr-label { | |
| 52 | + display: block; | |
| 53 | +} | |
| 54 | +.fr-container .fr-label-row { | |
| 55 | + text-align: right; | |
| 56 | + flex-shrink: 0; | |
| 57 | + margin-top: 5px; | |
| 58 | +} | |
| 59 | +.fr-container .fr-label-column { | |
| 60 | + margin-bottom: 4px; | |
| 61 | +} | |
| 62 | +.fr-container .fr-label-title { | |
| 63 | + display: inline-flex; | |
| 64 | + color: #333; | |
| 65 | + font-size: 14px; | |
| 66 | + min-height: 22px; | |
| 67 | + /* ""的标签页占位 */ | |
| 68 | + line-height: 22px; | |
| 69 | +} | |
| 70 | +.fr-container .fr-label-required { | |
| 71 | + margin: 1px 4px 0 0; | |
| 72 | + color: #f5222d; | |
| 73 | + font-size: 14px; | |
| 74 | + font-family: SimSun, sans-serif; | |
| 75 | +} | |
| 76 | +.fr-container .fr-label-title::after { | |
| 77 | + content: ':'; | |
| 78 | + position: relative; | |
| 79 | + top: -0.5px; | |
| 80 | + margin: 0 10px 0 2px; | |
| 81 | +} | |
| 82 | +.fr-container .fr-label-title.no-colon::after { | |
| 83 | + content: ''; | |
| 84 | + margin: 0; | |
| 85 | +} | |
| 86 | +.fr-container .fr-label-object .fr-label-title { | |
| 87 | + font-size: 16px; | |
| 88 | + color: #222; | |
| 89 | +} | |
| 90 | +.fr-container .fr-label-list { | |
| 91 | + margin-bottom: 5px; | |
| 92 | +} | |
| 93 | +.fr-container .fr-content { | |
| 94 | + width: 100%; | |
| 95 | +} | |
| 96 | +.fr-container .fr-list-1 .fr-content { | |
| 97 | + min-width: 140px; | |
| 98 | +} | |
| 99 | +.fr-container .fr-list-1 .fr-content-row { | |
| 100 | + flex: 1; | |
| 101 | + position: relative; | |
| 102 | +} | |
| 103 | +.fr-container .fr-list-1 .fr-content.fr-content-inline { | |
| 104 | + width: unset; | |
| 105 | +} | |
| 106 | +.fr-container .fr-list-1 .fr-content.fr-content-inline.fr-content-no-title { | |
| 107 | + margin-right: 8px; | |
| 108 | +} | |
| 109 | +.fr-container .fr-desc { | |
| 110 | + /* margin-top: 3px; */ | |
| 111 | + font-size: 12px; | |
| 112 | + word-break: break-all; | |
| 113 | + color: #888; | |
| 114 | +} | |
| 115 | +.fr-container .fr-validate { | |
| 116 | + margin-left: 12px; | |
| 117 | + font-size: 12px; | |
| 118 | + word-break: break-all; | |
| 119 | + color: #f5222d; | |
| 120 | +} | |
| 121 | +.fr-container .fr-validate-row { | |
| 122 | + margin: 3px 0 0 0; | |
| 123 | +} | |
| 124 | +.fr-container .fr-field-row .fr-tooltip-icon { | |
| 125 | + margin: 3px 2px 0 0; | |
| 126 | +} | |
| 127 | +.fr-container .hover-b--black-20:hover { | |
| 128 | + border-color: rgba(0, 0, 0, 0.3); | |
| 129 | +} | |
| 130 | +.fr-container .pt44 { | |
| 131 | + padding-top: 46px; | |
| 132 | +} | |
| 133 | +.fr-container .pv12 { | |
| 134 | + padding-top: 12px; | |
| 135 | + padding-bottom: 12px; | |
| 136 | +} | |
| 137 | +.fr-container .fr-move-icon { | |
| 138 | + position: absolute; | |
| 139 | + top: 0; | |
| 140 | + right: 0; | |
| 141 | + padding-top: 2px; | |
| 142 | + padding-right: 10px; | |
| 143 | + font-size: 24px; | |
| 144 | + font-weight: 300; | |
| 145 | +} | |
| 146 | +.fr-container .fr-move-icon:hover { | |
| 147 | + cursor: move; | |
| 148 | +} | |
| 149 | +.fr-container .fr-color-picker { | |
| 150 | + width: 100%; | |
| 151 | + display: flex; | |
| 152 | + flex-direction: row; | |
| 153 | + align-items: center; | |
| 154 | + color: #666; | |
| 155 | +} | |
| 156 | +.fr-container .fr-color-picker .rc-color-picker-trigger { | |
| 157 | + margin-right: 12px; | |
| 158 | + height: 32px; | |
| 159 | + width: 60px; | |
| 160 | + border: 1px solid #e5e5e5; | |
| 161 | +} | |
| 162 | +.fr-container .fr-color-picker > p { | |
| 163 | + margin: 0; | |
| 164 | + font-size: 14px; | |
| 165 | + line-height: 28px; | |
| 166 | +} | |
| 167 | +.fr-container .fr-color-picker .rc-color-picker-wrap { | |
| 168 | + display: flex; | |
| 169 | +} | |
| 170 | +.fr-container .next-input, | |
| 171 | +.fr-container .next-number-picker { | |
| 172 | + width: 100%; | |
| 173 | +} | |
| 174 | +.fr-container .upload-img { | |
| 175 | + max-width: 200px; | |
| 176 | + max-height: 200px; | |
| 177 | + margin-right: 24px; | |
| 178 | +} | |
| 179 | +.fr-container .fr-preview-image { | |
| 180 | + width: 160px; | |
| 181 | +} | |
| 182 | +.fr-container .fr-preview { | |
| 183 | + position: relative; | |
| 184 | + cursor: pointer; | |
| 185 | +} | |
| 186 | +.fr-container .fr-upload-mod, | |
| 187 | +.fr-container .fr-upload-file { | |
| 188 | + display: flex; | |
| 189 | +} | |
| 190 | +.fr-container .fr-upload-mod { | |
| 191 | + align-items: center; | |
| 192 | +} | |
| 193 | +.fr-container .fr-upload-mod .fr-upload-preview { | |
| 194 | + margin: 0 12px; | |
| 195 | +} | |
| 196 | +.fr-container .fr-upload-file .ant-upload-list-item { | |
| 197 | + margin: 5px 0 0 8px; | |
| 198 | +} | |
| 199 | +.fr-container .fr-upload-file .ant-upload-list-item-name { | |
| 200 | + margin-right: 6px; | |
| 201 | +} | |
| 202 | +.fr-container .fr-upload-file .ant-upload-list-item-info { | |
| 203 | + cursor: pointer; | |
| 204 | +} | |
| 205 | +.fr-container .fr-upload-file .next-upload-list-text .next-upload-list-item-done, | |
| 206 | +.fr-container .fr-upload-file .next-upload-list-text .next-upload-list-item .next-icon { | |
| 207 | + height: 28px; | |
| 208 | + line-height: 28px; | |
| 209 | + margin-left: 12px; | |
| 210 | +} | |
| 211 | +.fr-container .fr-upload-file .next-upload-list-item-name-wrap { | |
| 212 | + margin-top: -4px; | |
| 213 | +} | |
| 214 | +.fr-container .fr-sort-help-class { | |
| 215 | + background: #fff; | |
| 216 | +} | |
| 217 | +.fr-container .fold-icon.fold-icon-active { | |
| 218 | + transform: rotate(0deg); | |
| 219 | +} | |
| 220 | +.fr-container .fold-icon { | |
| 221 | + transform: rotate(-90deg); | |
| 222 | + transition: transform 0.24s; | |
| 223 | + cursor: pointer; | |
| 224 | + position: relative; | |
| 225 | +} | |
| 226 | +.fr-container .fold-icon::after { | |
| 227 | + content: ''; | |
| 228 | + position: absolute; | |
| 229 | + top: -20px; | |
| 230 | + right: -10px; | |
| 231 | + bottom: -5px; | |
| 232 | + left: -20px; | |
| 233 | +} | |
| 234 | +.fr-container .fr-tooltip-toggle { | |
| 235 | + cursor: pointer; | |
| 236 | + position: relative; | |
| 237 | +} | |
| 238 | +.fr-container .fr-tooltip-toggle:hover .fr-tooltip-container { | |
| 239 | + opacity: 1; | |
| 240 | + visibility: visible; | |
| 241 | +} | |
| 242 | +.fr-container .fr-tooltip-icon { | |
| 243 | + height: 14px; | |
| 244 | + width: 14px; | |
| 245 | + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEnUlEQVR42u1bS0iUURT+zd4Y9KDosSihNhYUaBE9YKpFDKKOOmOLahtJ2SoxA2fUdUoQJK5qU0ib6LlxUYJpkY0LE3tQZkU7y7A0e1jnA4Of8pz//5373/+BF44Oc+/c853v3nOf5xpup0QiMZ9kD8mxeDzeTHKXPveSvKXP3+j/GP1/h++QhzIoW1ZWthu/NYKYysvLN5EhKZJ7ZMQEye8ZyjjJfZIk6vS10YWFhcvI4FoC2wfwLkkf6aiBLt8YHovFNhCoFnRlgNQkY9BJbrLeS9uzqFueYAzXJV9ITgKLVsvBPCnuAAifSIe23kBd7zApHHUI8D3JBfptFUlialbYSJIDweep7+Iog7L4jUMdn4HNzeksmxRcdgColyRZWlq6NQOd21AH6rKrFxiBVanxxcXFS6jSdpsAHtLYUODC1FqAum0S0Q7Mqlp+ESlO2zD8DUmJBhcsgS4bJDwBdhUKb1ko+kll6qLR6AJDU4IuuAZ0W2C7kWnrJy1a/QONvjsNjxLp32VjsEzO1OcOkoJJoeJuGuBWGB4nYCCcD4RGmiSJOm35PIup7kokEplr+CQBCzAJeEeJqC22V3jE2IBQWVd+fv48w2cJmAhbp4C7H7bZaf1KoZJBbET8vCEDRgF/pdXGZim1/ifGl344WtTIJJ//B+ggts+K6t4BrAwBH2GjNKo2CuxVqzJeGLDqFemoFnQ0sq0vDHyP4D+KwI1ILqZqpyqsGmFjznStX8tNIzQlbjYUJasVnCo9wAzsjE1npyPgFQPqJvKDRYC8ioWt/200BFD7FRMwIu0nFBNwgNMFm80Fz0mAFIOqVz4IyoS/ZvQ1mQv1MYBqkO8GCSDXTDRjvAoCznAHrH/X0qu4FqE99Voj2AkErOPsg+3w/wqmwDMjHAkkPGdsPITMBqb7t4SFANjCjTkgoI0ZJY+Hwnp5f9MGdtIMOxF35n1ZXDrG38fYmDa48zWcs4eFANxesUtv+jPMZC4PCwE4NWL0DRvcehkHjyEhACdGCxl9vwBwggEyxw0wXhCAOANG34TsAi4k37kA/RliMnND1ANyGX1DGAMe89Og+uSjaRDSAwKucgeIYSEAcQzc8T4ISDGZrSFygVaml6dAQILJfBEiAl4yy/0KZK6WtsMBJwD+v0bcDk/tlp4yveB0cAmQj8hhs7lQE1NoIAQEPGdsazZ3k+3SoahOAvQfisoDBeR2QAmArjvcsbi2i5FMQ+Ay0Jvn6GIE10VWV2MBIiALmKWrMfFylJsRgkIAsAp1NojX47hCZn74HdfjficAAzp3PY6rf9g4GyBhw3/6Axoi0yW48IDtcQwBRVIUOHaQfguSAiYpvB42Od1Cxiz8s5tkpdfGAwOwSFhhy0xXUnV+DpSEbmCwwFiXKcPXbYTKpnSHykIndFsYf01JsDRJTxCDpUGU7nB5SKcfwuWLiooWK38wQXLJwcOFtIoHE/Bh5v6SE2DMdvNN4BE3nszQ93szfTJDclTbU7lAP5pSGIxY5eWzOdL/lXrkKW6Fp7M3XPTi4SR0zz6dnX087fOEq2k8hTc/nydJm57Pj3v5fP4PSqRR6oYkTaUAAAAASUVORK5CYII='); | |
| 246 | + background-size: cover; | |
| 247 | + display: block; | |
| 248 | + margin: 4px 0 0 4px; | |
| 249 | +} | |
| 250 | +.fr-container .fr-tooltip-container { | |
| 251 | + position: absolute; | |
| 252 | + width: 160px; | |
| 253 | + white-space: initial !important; | |
| 254 | + top: -4px; | |
| 255 | + left: 0; | |
| 256 | + bottom: unset; | |
| 257 | + transform: translateY(-100%); | |
| 258 | + text-align: left; | |
| 259 | + background: #2b222a; | |
| 260 | + padding: 4px; | |
| 261 | + margin-left: -69px; | |
| 262 | + border-radius: 4px; | |
| 263 | + color: #efefef; | |
| 264 | + font-size: 13px; | |
| 265 | + cursor: auto; | |
| 266 | + z-index: 99999; | |
| 267 | + transition: all 0.5s ease; | |
| 268 | + opacity: 0; | |
| 269 | + visibility: hidden; | |
| 270 | + word-wrap: break-word; | |
| 271 | +} | |
| 272 | +.fr-container .fr-tooltip-triangle { | |
| 273 | + position: absolute; | |
| 274 | + left: 50%; | |
| 275 | + border-left: 5px solid transparent; | |
| 276 | + border-right: 5px solid transparent; | |
| 277 | + border-top: 5px solid #2b222a; | |
| 278 | + transition: all 0.5s ease; | |
| 279 | + content: ' '; | |
| 280 | + font-size: 0; | |
| 281 | + line-height: 0; | |
| 282 | + margin-left: -5px; | |
| 283 | + width: 0; | |
| 284 | + bottom: -5px; | |
| 285 | +} | |
| 286 | +.fr-container .fr-tooltip-toggle::before, | |
| 287 | +.fr-container .fr-tooltip-toggle::after { | |
| 288 | + color: #efefef; | |
| 289 | + font-size: 13px; | |
| 290 | + opacity: 0; | |
| 291 | + pointer-events: none; | |
| 292 | + text-align: center; | |
| 293 | +} | |
| 294 | +.fr-container .fr-tooltip-toggle:focus::before, | |
| 295 | +.fr-container .fr-tooltip-toggle:focus::after, | |
| 296 | +.fr-container .fr-tooltip-toggle:hover::before, | |
| 297 | +.fr-container .fr-tooltip-toggle:hover::after { | |
| 298 | + opacity: 1; | |
| 299 | + transition: all 0.75s ease; | |
| 300 | +} | |
| 301 | +.fr-container .fr-slider { | |
| 302 | + display: flex; | |
| 303 | + width: 100%; | |
| 304 | + align-items: center; | |
| 305 | +} | |
| 306 | +.fr-container .fr-map { | |
| 307 | + display: flex; | |
| 308 | + flex-wrap: wrap; | |
| 309 | +} | |
| 310 | +.fr-container .fr-arrow-icon { | |
| 311 | + cursor: pointer; | |
| 312 | +} | |
| 313 | +.fr-container .fr-row-error { | |
| 314 | + background-color: rgba(255, 77, 79, 0.2); | |
| 315 | +} | |
| 316 | +.fr-container .fr-theme-card-wrap { | |
| 317 | + background-color: #fff; | |
| 318 | + padding: 36px 40px; | |
| 319 | + margin-bottom: 24px; | |
| 320 | + border-radius: 4px; | |
| 321 | + display: flex; | |
| 322 | + justify-content: space-between; | |
| 323 | +} | |
| 324 | +.fr-container .fr-theme-card-wrap .fr-theme-card-title { | |
| 325 | + font-size: 16px; | |
| 326 | + margin-bottom: 16px; | |
| 327 | +} | ... | ... |
es/index.d.ts
0 → 100644
| 1 | +import * as React from 'react'; | |
| 2 | +export interface Error { | |
| 3 | + /** 错误的数据路径 */ | |
| 4 | + name: string; | |
| 5 | + /** 错误的内容 */ | |
| 6 | + error: string[]; | |
| 7 | +} | |
| 8 | +export interface FormParams { | |
| 9 | + formData?: any; | |
| 10 | + onChange?: (data: any) => void; | |
| 11 | + onValidate?: (valid: any) => void; | |
| 12 | + showValidate?: boolean; | |
| 13 | + /** 数据分析接口,表单展示完成渲染时触发 */ | |
| 14 | + logOnMount?: (stats: any) => void; | |
| 15 | + /** 数据分析接口,表单提交成功时触发,获得本次表单填写的总时长 */ | |
| 16 | + logOnSubmit?: (stats: any) => void; | |
| 17 | +} | |
| 18 | + | |
| 19 | +export interface ValidateParams { | |
| 20 | + formData: any; | |
| 21 | + schema: any; | |
| 22 | + error: Error[]; | |
| 23 | + [k: string]: any; | |
| 24 | +} | |
| 25 | +export interface FormInstance { | |
| 26 | + formData: any; | |
| 27 | + schema: any; | |
| 28 | + flatten: any; | |
| 29 | + touchedKeys: string[]; | |
| 30 | + touchKey: (key: string) => void; | |
| 31 | + onItemChange: (path: string, value: any) => void; | |
| 32 | + setValueByPath: (path: string, value: any) => void; | |
| 33 | + getSchemaByPath: (path: string) => object; | |
| 34 | + setSchemaByPath: (path: string, value: any) => void; | |
| 35 | + setSchema: (settings: any) => void; | |
| 36 | + setValues: (formData: any) => void; | |
| 37 | + getValues: () => any; | |
| 38 | + resetFields: () => void; | |
| 39 | + submit: () => Promise<void> | Promise<any[]>; | |
| 40 | + submitData: any; | |
| 41 | + errorFields: Error[]; | |
| 42 | + isValidating: boolean; | |
| 43 | + outsideValidating: boolean; | |
| 44 | + isSubmitting: boolean; | |
| 45 | + endValidating: () => void; | |
| 46 | + endSubmitting: () => void; | |
| 47 | + setErrorFields: (error: Error[]) => void; | |
| 48 | + removeErrorField: (path: string) => void; | |
| 49 | + removeTouched: (path: string) => void; | |
| 50 | + changeTouchedKeys: (pathArray: string[]) => void; | |
| 51 | + isEditing: boolean; | |
| 52 | + setEditing: (status: boolean) => void; | |
| 53 | + syncStuff: (args: any) => void; | |
| 54 | + /** 折中升级方案中使用到,正常用不到 */ | |
| 55 | + init: () => void; | |
| 56 | + /** 数据分析接口,表单展示完成渲染时触发 */ | |
| 57 | + logOnMount?: (any) => void; | |
| 58 | + /** 数据分析接口,表单提交成功时触发,获得本次表单填写的总时长 */ | |
| 59 | + logOnSubmit?: (any) => void; | |
| 60 | +} | |
| 61 | + | |
| 62 | +export type WatchProperties = { | |
| 63 | + [path: string]: | |
| 64 | + | { | |
| 65 | + handler: (value: any) => void; | |
| 66 | + immediate?: boolean; | |
| 67 | + } | |
| 68 | + | ((value: any) => void); | |
| 69 | +}; | |
| 70 | + | |
| 71 | +export interface FRProps { | |
| 72 | + /** 表单 id */ | |
| 73 | + id?: string | number; | |
| 74 | + /** 表单顶层的className */ | |
| 75 | + className?: string; | |
| 76 | + /** 表单顶层的样式 */ | |
| 77 | + style?: any; | |
| 78 | + /** 表单 schema */ | |
| 79 | + schema: any; | |
| 80 | + /** form单例 */ | |
| 81 | + form: FormInstance; | |
| 82 | + /** 组件和schema的映射规则 */ | |
| 83 | + mapping?: any; | |
| 84 | + /** 自定义组件 */ | |
| 85 | + widgets?: any; | |
| 86 | + /** 表单提交前钩子 */ | |
| 87 | + displayType?: string; | |
| 88 | + /** 只读模式 */ | |
| 89 | + readOnly?: boolean; | |
| 90 | + /** 禁用模式 */ | |
| 91 | + disabled?: boolean; | |
| 92 | + /** 标签宽度 */ | |
| 93 | + labelWidth?: string | number; | |
| 94 | + /** antd的全局config */ | |
| 95 | + configProvider?: any; | |
| 96 | + theme?: string | number; | |
| 97 | + /** 覆盖默认的校验信息 */ | |
| 98 | + validateMessages?: any; | |
| 99 | + /** 显示当前表单内部状态 */ | |
| 100 | + debug?: boolean; | |
| 101 | + /** 显示css布局提示线 */ | |
| 102 | + debugCss?: boolean; | |
| 103 | + locale?: string; | |
| 104 | + column?: number; | |
| 105 | + debounceInput?: boolean; | |
| 106 | + size?: string; | |
| 107 | + // 数据会作为 beforeFinish 的第四个参数传入 | |
| 108 | + config?: any; | |
| 109 | + // 类似于 vuejs 的 watch 的用法,监控值的变化,触发 callback | |
| 110 | + watch?: WatchProperties; | |
| 111 | + /** 对象组件是否折叠(全局的控制) */ | |
| 112 | + allCollapsed?: boolean; | |
| 113 | + /** 表单的全局共享属性 */ | |
| 114 | + globalProps?: any; | |
| 115 | + /** 表单首次加载钩子 */ | |
| 116 | + onMount?: () => void; | |
| 117 | + /** 表单提交前钩子 */ | |
| 118 | + beforeFinish?: (params: ValidateParams) => Error[] | Promise<Error[]>; | |
| 119 | + /** 表单提交后钩子 */ | |
| 120 | + onFinish?: (formData: any, error: Error[]) => void; | |
| 121 | + /** 时时与外部更新同步的钩子 */ | |
| 122 | + onValuesChange?: (changedValues: any, formData: any) => void; | |
| 123 | + /** 隐藏的数据是否去掉,默认不去掉(false) */ | |
| 124 | + removeHiddenData?: boolean; | |
| 125 | +} | |
| 126 | + | |
| 127 | +declare const FR: React.FC<FRProps>; | |
| 128 | + | |
| 129 | +export declare function useForm(params?: FormParams): FormInstance; | |
| 130 | + | |
| 131 | +export type ConnectedForm<T> = T & { | |
| 132 | + form: FormInstance; | |
| 133 | +}; | |
| 134 | + | |
| 135 | +export declare function connectForm<T extends {} = any>( | |
| 136 | + component: React.ComponentType<ConnectedForm<T>> | |
| 137 | +): React.ComponentType<T>; | |
| 138 | + | |
| 139 | +export default FR; | ... | ... |