BlockInputs.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import FormatSelector from './FormatSelector'
  2. import { TextInput } from '../../form'
  3. import BlockInstanceInputs from './BlockInstanceInputs'
  4. import {
  5. emptyBlockInstance,
  6. emptyExercise,
  7. emptyExerciseInstance
  8. } from '../utils'
  9. import ExerciseInstanceInputs from './ExerciseInstanceInputs'
  10. import { TBlock } from '../types'
  11. import { useState, ChangeEvent } from 'react'
  12. import BlockSelector from './BlockSelector'
  13. interface IBlockInputs {
  14. onChange: GenericEventHandler
  15. value: TBlock
  16. name: string
  17. }
  18. const BlockInputs = ({ onChange, value, name }: IBlockInputs) => {
  19. return (
  20. <>
  21. <p>
  22. {value.id} {value.title}
  23. </p>
  24. <BlockSelector
  25. name={name}
  26. value={value}
  27. label='Existing block'
  28. onChange={onChange}
  29. />
  30. <TextInput
  31. name={`${name}.title`}
  32. label='Title'
  33. value={value.title}
  34. onChange={onChange}
  35. />
  36. <TextInput
  37. name={`${name}.description`}
  38. label='Description'
  39. value={value.description ?? ''}
  40. onChange={onChange}
  41. />
  42. <TextInput
  43. name={`${name}.duration`}
  44. label='Duration'
  45. value={value.duration ?? ''}
  46. type='number'
  47. onChange={onChange}
  48. />
  49. <FormatSelector
  50. name={`${name}.format`}
  51. value={value.format}
  52. onChange={onChange}
  53. />
  54. <TextInput
  55. name={`${name}.rest`}
  56. label='Rest'
  57. value={value.rest ?? ''}
  58. type='number'
  59. onChange={onChange}
  60. />
  61. <label>Blocks</label>
  62. {value.blocks && value.blocks.length > 0 && (
  63. <BlockInstanceInputs
  64. name={`${name}.blocks`}
  65. value={value.blocks}
  66. onChange={onChange}
  67. />
  68. )}
  69. <button
  70. onClick={event => {
  71. event.preventDefault()
  72. const newBlock = emptyBlockInstance({
  73. order: value.blocks ? value.blocks.length : 0
  74. })
  75. onChange({
  76. target: {
  77. type: 'custom',
  78. name: `${name}.blocks`,
  79. value: value.blocks ? [...value.blocks, newBlock] : [newBlock]
  80. }
  81. })
  82. }}
  83. type='button'
  84. >
  85. Add block
  86. </button>
  87. <label>Exercises</label>
  88. {value.exercises && value.exercises.length > 0 && (
  89. <ExerciseInstanceInputs
  90. name={`${name}.exercises`}
  91. value={value.exercises}
  92. onChange={onChange}
  93. />
  94. )}
  95. <button
  96. onClick={event => {
  97. event.preventDefault()
  98. const newExercise = emptyExerciseInstance({
  99. order: value.exercises ? value.exercises.length : 0
  100. })
  101. onChange({
  102. target: {
  103. type: 'custom',
  104. name: `${name}.exercises`,
  105. value: value.exercises
  106. ? [...value.exercises, newExercise]
  107. : [newExercise]
  108. }
  109. })
  110. }}
  111. type='button'
  112. >
  113. Add exercise
  114. </button>
  115. </>
  116. )
  117. }
  118. export default BlockInputs