renderFileUploadIcon is misleading

Guy_Guy · July 24, 2024, 2:30pm

[Question]
While renderSendMessageIcon indeed lets you replace the icon only, the renderFileUploadIcon requires you to implement the whole file upload UI (with file select, etc.).

We need an easy way to replace icons only and customize UI kit according to our design system.

[UIKit Version]

"@sendbird/uikit-react": "^3.14.13"

[Resources]

github.com

sendbird/sendbird-uikit-react/blob/0bf5a29bb1a517cc40733634ff269ea3abfcce6a/src/ui/MessageInput/index.tsx#L525


      
              className="sendbird-message-input--placeholder"
              type={LabelTypography.BODY_1}
              color={disabled ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_3}
            >
              {placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER}
            </Label>
          )}
          {/* send icon */}
          {!isEdit && isInput && (
            <IconButton className="sendbird-message-input--send" height="32px" width="32px" onClick={() => sendMessage()} testID="sendbird-message-input-send-button">
              {renderSendMessageIcon?.() || (
                <Icon
                  type={IconTypes.SEND}
                  fillColor={disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY}
                  width="20px"
                  height="20px"
                />
              )}
            </IconButton>
          )}
          {/* file upload icon */}

and

github.com

sendbird/sendbird-uikit-react/blob/0bf5a29bb1a517cc40733634ff269ea3abfcce6a/src/ui/MessageInput/index.tsx#L538


      
                  fillColor={disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY}
                  width="20px"
                  height="20px"
                />
              )}
            </IconButton>
          )}
          {/* file upload icon */}
          {!isEdit
            && !isInput
            && (renderFileUploadIcon?.()
              // UIKit Dashboard configuration should have lower priority than
              // renderFileUploadIcon which is set in code level
              || (isFileUploadEnabled && (
                <IconButton
                  className={classnames('sendbird-message-input--attach', isVoiceMessageEnabled && 'is-voice-message-enabled')}
                  height="32px"
                  width="32px"
                  onClick={() => {
                    // todo: clear previous input
                    fileInputRef?.current?.click?.();

bmusil · July 29, 2024, 6:15pm

Yep, we ended up having to make our own message input component. IMHO the more customized interface the more you end up just using the context store wrappers and rolling your own UI components or referencing the JS sdk directly.

It seems like a big effort at first, but my tip is starting with what users are actually going to use and then adding functionality back piece-wise as you go.

renderFileUploadIcon is misleading

Not finding what you need