| 1502 | } |
| 1503 | |
| 1504 | function ArrayControl({control, valueType, value = [], onChange}) { |
| 1505 | let ref = useRef<HTMLDivElement | null>(null); |
| 1506 | return ( |
| 1507 | <Wrapper |
| 1508 | ref={ref} |
| 1509 | control={control} |
| 1510 | styles={style({gridColumnStart: 1, gridColumnEnd: -1, width: 150})}> |
| 1511 | {value.length === 0 && ( |
| 1512 | <ActionButton |
| 1513 | size="S" |
| 1514 | aria-label="Add item" |
| 1515 | styles={style({alignSelf: 'start'})} |
| 1516 | onPress={() => { |
| 1517 | flushSync(() => onChange([''])); |
| 1518 | ref.current?.querySelector('input')?.focus(); |
| 1519 | }}> |
| 1520 | <AddCircle /> |
| 1521 | </ActionButton> |
| 1522 | )} |
| 1523 | {value.map((item, index) => { |
| 1524 | let rendered; |
| 1525 | switch (valueType.type) { |
| 1526 | case 'string': |
| 1527 | rendered = ( |
| 1528 | <TextField |
| 1529 | aria-label={`${control.name}, item ${index}`} |
| 1530 | size="S" |
| 1531 | styles={style({flexGrow: 1})} |
| 1532 | value={item} |
| 1533 | onChange={newValue => { |
| 1534 | let arr: any[] = [...value]; |
| 1535 | arr[index] = newValue; |
| 1536 | onChange(arr); |
| 1537 | }} |
| 1538 | /> |
| 1539 | ); |
| 1540 | break; |
| 1541 | default: |
| 1542 | console.warn('unknown array element type', valueType); |
| 1543 | return null; |
| 1544 | } |
| 1545 | |
| 1546 | return ( |
| 1547 | <div key={index} className={style({display: 'flex', gap: 4})}> |
| 1548 | {rendered} |
| 1549 | <ActionButton |
| 1550 | size="S" |
| 1551 | aria-label="Add item after" |
| 1552 | onPress={() => { |
| 1553 | let arr: any[] = [...value]; |
| 1554 | arr.splice(index + 1, 0, ''); |
| 1555 | flushSync(() => onChange(arr)); |
| 1556 | ref.current?.querySelectorAll('input')[index + 1]?.focus(); |
| 1557 | }}> |
| 1558 | <AddCircle /> |
| 1559 | </ActionButton> |
| 1560 | <ActionButton |
| 1561 | size="S" |