+
+ {def.question || 'Upload file'}
+ {(isRequired || isSoftRequired) && (
+
+ *
+
+ )}
+ {maxFiles > 1 && (
+
+ ({fileDataArr.length}/{maxFiles})
+
+ )}
+
+
+ {errorMsg && (
+
+ {errorMsg}
+
+ )}
+
+ {fileDataArr.length > 0 && (
+
+ {fileDataArr.map((file, index) => (
+
+
+
+ {file.title || 'Unnamed file'}
+
+
+ {file.contentType}
+ {file.size && •}
+ {file.size && {formatFileSize(file.size)}}
+
+
+ {!isReadOnly && isEnabled && (
+
+ )}
+
+ ))}
+
+ )}
+
+ {canAddMore && (
+
+
1}
+ onClick={(e) => {
+ (e.target as HTMLInputElement).value = '';
+ }}
+ onChange={(e) => handleFiles(e.target.files)}
+ disabled={!isEnabled || isReadOnly}
+ className="ms:hidden"
+ />
+
+
+ )}
+
+
+
+ onUpdate({ question: e.target.value })}
+ placeholder="Enter question"
+ className="ms:px-3 ms:py-2 ms:h-10 ms:w-full ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg"
+ />
+
+
+
+
+
+
+
+ {
+ const val = e.target.value ? Number(e.target.value) : undefined;
+ onUpdate({
+ maxFileSize: val
+ ? convertUnitToBytes(val, sizeUnit)
+ : undefined,
+ });
+ }}
+ placeholder="Optional"
+ className="ms:px-3 ms:py-2 ms:h-10 ms:flex-1 ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg"
+ />
+
+
+
+
+
+
+
+ onUpdate({
+ maxFiles: e.target.value ? Number(e.target.value) : undefined,
+ })
+ }
+ onBlur={(e) => {
+ const val = e.target.value ? Number(e.target.value) : 0;
+ if (val < 1) {
+ onUpdate({ maxFiles: 1 });
+ }
+ }}
+ placeholder="1"
+ className="ms:px-3 ms:py-2 ms:h-10 ms:w-full ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg"
+ />
+
+
+
+ {def.question || 'Question'}
+ {(isRequired || isSoftRequired) && (
+
+ *
+
+ )}
+
+
+
{
+ if (!val) {
+ onResponse({ selected: undefined });
+ return;
+ }
+
+ if (val === otherOptionId) {
+ onResponse({ selected: { id: otherOptionId, value: '' } });
+ return;
+ }
+
+ const opt = options.find((o) => o.id === val);
+ if (opt) {
+ onResponse({ selected: { id: opt.id, value: opt.value } });
+ }
+ }}
+ disabled={!isEnabled}
+ orientation="vertical"
+ className="ms:space-y-2"
+ >
+ {options.map((option: FieldOption) => (
+
+ ))}
+
+
+
+
+
+ {
+ onResponse({
+ selected: { id: otherOptionId, value: e.target.value },
+ });
+ }}
+ disabled={!isOtherSelected}
+ className={`ms:w-full ms:px-3 ms:py-2 ms:h-9 ms:rounded-lg ms:transition-all ${
+ isOtherSelected
+ ? 'ms:border ms:border-msborder ms:focus:border-msprimary ms:focus:ring-1 ms:focus:ring-msprimary/30 ms:outline-none ms:bg-mssurface ms:text-mstext ms:cursor-text'
+ : 'ms:border ms:border-dashed ms:border-msborder ms:bg-mssurface ms:text-mstextmuted ms:opacity-40 ms:cursor-not-allowed'
+ }`}
+ />
+
+
+
+
+
+ onUpdate({ question: e.target.value })}
+ placeholder="Enter question"
+ className="ms:px-3 ms:py-2 ms:h-10 ms:w-full ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg"
+ />
+
+
+
+
+ Options
+
+
+ {options.map((option: FieldOption) => (
+
+
+
+ form
+ .getState()
+ .updateOption(def.id, option.id, e.target.value)
+ }
+ placeholder="Option text"
+ className="ms:flex-1 ms:min-w-0 ms:outline-none ms:bg-transparent ms:text-mstext"
+ />
+
+
+ ))}
+
+
+
+
+
+
+
+ onUpdate({ otherLabel: e.target.value })}
+ placeholder="Other, please Specify :"
+ className="ms:px-3 ms:py-2 ms:h-10 ms:w-full ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg"
+ />
+
+