fix: Disable logo update button when no file is selected #10587
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
CodeQL found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.
hikaru-n-cpu
changed the title
| const [isImageCropModalShow, setIsImageCropModalShow] = useState<boolean>(false); | ||
| const [isDefaultLogoSelected, setIsDefaultLogoSelected] = useState<boolean>(isDefaultLogo ?? true); | ||
| const [retrieveError, setRetrieveError] = useState<any>(); | ||
| const [isFileSelected, setIsFileSelected] = useState<boolean>(false); |
There was a problem hiding this comment.
ファイルが選択されているか否かは uploadLogoSrc を見れば良さそう
目的モーダル内でキャンセルボタンを押した場合に、 やりたい動作モーダルでキャンセルボタンを押した後には、ファイル名を消す動作が正しい このように書いた理由inputタグはjavascript側で任意に選択したファイル名を消す機能がなく、もし消したいなら新しいinputタグを再生成させなければなりません。なので、inputタグにkeyを設定し、 参考文献:
|
| <input type="file" onChange={onSelectFile} name="brandLogo" accept="image/*" /> | ||
| <input | ||
| type="file" | ||
| key={fileInputKey} |
There was a problem hiding this comment.
この部分でinputタグのkeyに呼び出した現在のミリ秒の文字列を代入しています。この処理により毎回resetFileInput()が呼び出されればinputタグが再構築されることによって空のinputタグが生成され、モーダルのキャンセルボタンを押したとしてもすでに選んでしまったfile名が残らないようにしました。
| onModalClose={() => setIsImageCropModalShow(false)} | ||
| onModalClose={() => { | ||
| if (!isImageCropped) { | ||
| resetFileInput(); |
There was a problem hiding this comment.
この部分はモーダルでキャンセルボタンを押した時点で「切り抜きボタン（完了ボタン）」が押されていない場合にはファイル名を初期化するように実装してあります。
There was a problem hiding this comment.
jsx の部分にロジックがあると見にくいので closeImageCropModalHandler みたいなメソッドを作ってそれを渡すようにしてください
| }, [t, isDefaultLogoSelected]); | ||
|
|
||
| const resetFileInput = useCallback(() => { | ||
| setFileInputKey(Date.now().toString()); |
There was a problem hiding this comment.
ここで呼び出した瞬間のミリ秒時間を引数として入力することによって呼び出したら必ず異なるkeyがinput タグに入力されることになります。
There was a problem hiding this comment.
key をリセットするやり方がちょっとトリッキーなので useRef 使って実装してみてください。
例
const fileInputRef = useRef<HTMLInputElement | null>(null);
const clearFileInput = useCallback(() => {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}, []);
| setUploadLogoSrc(null); | ||
| setIsImageCropped(false); | ||
| setIsImageCropModalShow(false); | ||
| resetFileInput(); |
There was a problem hiding this comment.
ロゴを削除するというボタンが押された場合にファイル名を初期化するように実装してあります。
| }, [t, isDefaultLogoSelected]); | ||
|
|
||
| const resetFileInput = useCallback(() => { | ||
| setFileInputKey(Date.now().toString()); |
There was a problem hiding this comment.
key をリセットするやり方がちょっとトリッキーなので useRef 使って実装してみてください。
例
const fileInputRef = useRef<HTMLInputElement | null>(null);
const clearFileInput = useCallback(() => {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}, []);| onModalClose={() => setIsImageCropModalShow(false)} | ||
| onModalClose={() => { | ||
| if (!isImageCropped) { | ||
| resetFileInput(); |
There was a problem hiding this comment.
jsx の部分にロジックがあると見にくいので closeImageCropModalHandler みたいなメソッドを作ってそれを渡すようにしてください
| <AdminUpdateButtonRow | ||
| onClick={onClickSubmit} | ||
| disabled={retrieveError != null | ||
| || (!isDefaultLogoSelected && uploadLogoSrc == null && !isCustomizedLogoUploaded)} |
There was a problem hiding this comment.
isUpdateButtonDisabled みたいな変数を作ってそれを渡すようにしてください
| src={uploadLogoSrc} | ||
| onModalClose={() => setIsImageCropModalShow(false)} | ||
| onModalClose={() => { | ||
| if (!isImageCropped) { |
There was a problem hiding this comment.
onImageProcessCompleted というメソッドが ImageCropModal 側に提供されているみたいですが、ためしてみました？
state が増えると実装が複雑になるので増やすのは慎重にしたいです
TASK
https://redmine.weseek.co.jp/issues/175223
https://redmine.weseek.co.jp/issues/176103
行ったこと
ファイル選択がされていない状態で更新ボタンを押そうとしたときにはボタンがdisabledになるようにしました。
ファイル選択時にファイル名が残ってしまうバグを直しました。
具体例