feat: add file uploader as a fragment component#302
Conversation
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
👷 Deploy request for carbon-components-builder pending review.Visit the deploys page to approve it
|
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
|
Verified that the component features and export works. |
Signed-off-by: Max You <JianzhongMax.You@ibm.com>
| acceptedFileFormat: string; | ||
| buttonKind: string; | ||
| buttonLabel: string; | ||
| labelTitle: string; | ||
| filenameStatus: string; | ||
| dragAndDroplabelText: string; | ||
| labelDescription: string; | ||
| iconDescription: string; | ||
| size: string; | ||
| multiple: boolean; | ||
| disabled: boolean; | ||
| dragAndDrop: boolean; |
There was a problem hiding this comment.
some of these (maybe all?) should be optional
| ...commonSlots, | ||
| ...slotsDisabled, | ||
| multiple: 'boolean', | ||
| isMultiple: (state: FileUploaderState) => ({ |
| onChange={(event: any) => { | ||
| sendSignal(state.id, 'valueChange', [event.value], { ...state, value: event.value }); | ||
| }} | ||
| accept={state.acceptedFileFormat.split(',')} |
There was a problem hiding this comment.
looks like acceptedFileFormat should be acceptedFileFormats and be a list of strings
| buttonLabel: 'string', | ||
| labelTitle: 'string', | ||
| filenameStatus: 'string', | ||
| dragAndDroplabelText: 'string', |
There was a problem hiding this comment.
something's off about this
| import { Checkbox, Dropdown, TextInput, FileUploaderDropContainer, FileUploader } from '@carbon/react'; | ||
| import { angularClassNamesFromComponentObj, nameStringToVariableString, reactClassNamesFromComponentObj } from '../helpers/tools'; |
There was a problem hiding this comment.
looks like these would be better split into multiple lines to follow the style in other files
| ...selectedComponent, | ||
| iconDescription: event.currentTarget.value | ||
| })} /> | ||
| </> |
There was a problem hiding this comment.
Something's off with the indentation here
| componentObj.dragAndDrop ? <FileUploaderDropContainer | ||
| className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} | ||
| accept={acceptedFileFormat} | ||
| multiple={componentObj.multiple} | ||
| disabled={componentObj.disabled} | ||
| labelText={componentObj.dragAndDroplabelText} | ||
| tabIndex={0} /> : <FileUploader | ||
| className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} | ||
| accept={acceptedFileFormat} | ||
| buttonKind={componentObj.buttonKind} | ||
| buttonLabel={componentObj.buttonLabel} | ||
| filenameStatus={componentObj.filenameStatus} | ||
| iconDescription={componentObj.iconDescription} | ||
| labelDescription={componentObj.labelDescription} | ||
| labelTitle={componentObj.labelTitle} | ||
| multiple={componentObj.multiple} | ||
| disabled={componentObj.disabled} | ||
| size={componentObj.size} /> |
There was a problem hiding this comment.
this should be more readable. Follow the style from the rest of the repo (as suggested above)
| [disabled]="${nameStringToVariableString(json.codeContext?.name)}Disabled" | ||
| [size]="${nameStringToVariableString(json.codeContext?.name)}Size" | ||
| [disabled]="${nameStringToVariableString(json.codeContext?.name)}Disabled" |
| ${json.dragAndDrop ? `[dropText]="${nameStringToVariableString(json.codeContext?.name)}DropText"` : ''} | ||
| ${json.dragAndDrop ? '' : `[buttonText]="${nameStringToVariableString(json.codeContext?.name)}ButtonText"`} | ||
| ${json.dragAndDrop ? '' : `[buttonType]="${nameStringToVariableString(json.codeContext?.name)}ButtonType"`} | ||
| (filesChange)= ${nameStringToVariableString(json.codeContext?.name)}onDropped.emit($event)> |
| code: ({ json }) => { | ||
| return `<ibm-file-uploader | ||
| ${angularClassNamesFromComponentObj(json)} | ||
| [title]="${nameStringToVariableString(json.codeContext?.name)}Title" | ||
| [description]="${nameStringToVariableString(json.codeContext?.name)}Description" | ||
| [accept]="${nameStringToVariableString(json.codeContext?.name)}Accept" | ||
| [multiple]="${nameStringToVariableString(json.codeContext?.name)}Multiple" | ||
| [disabled]="${nameStringToVariableString(json.codeContext?.name)}Disabled" | ||
| [size]="${nameStringToVariableString(json.codeContext?.name)}Size" | ||
| [disabled]="${nameStringToVariableString(json.codeContext?.name)}Disabled" | ||
| [drop]="${nameStringToVariableString(json.codeContext?.name)}Drop" | ||
| ${json.dragAndDrop ? `[dropText]="${nameStringToVariableString(json.codeContext?.name)}DropText"` : ''} | ||
| ${json.dragAndDrop ? '' : `[buttonText]="${nameStringToVariableString(json.codeContext?.name)}ButtonText"`} | ||
| ${json.dragAndDrop ? '' : `[buttonType]="${nameStringToVariableString(json.codeContext?.name)}ButtonType"`} | ||
| (filesChange)= ${nameStringToVariableString(json.codeContext?.name)}onDropped.emit($event)> | ||
| </ibm-file-uploader>`; |
There was a problem hiding this comment.
indentation + it doesn't need the explicit return statement
for #184