FileUploader Componentを追加 #203
Conversation
| <Flex display="flex"> | ||
| <Icon name="folder_open" size="md" color="active" /> | ||
| <Typography weight="bold" color="primary"> | ||
| ドラッグ&ドロップするか、クリックしてアップロード |
There was a problem hiding this comment.
超長期でみれば、この文言はpropsで管理してあわよくば初期値は英語にしてしまいたい思いがありますw
| onSelectFile: (files: File) => void; | ||
| }; | ||
|
|
||
| const FileUploader: React.FunctionComponent<FileUploaderProps> = ({ |
There was a problem hiding this comment.
やろうとしていること自体は単純で、ファイルを引数にコールバック叩ければ良いので、ライブラリを使うまでもないのでは...:thinking:と思っていたのですが、とっても良いサンプル見つけました。
https://github.com/kufu/smarthr-ui/tree/master/src/components/DropZone
There was a problem hiding this comment.
依存の管理が手間なので、自前で書いてしまった方がラクなのではと思うのですが、どうでしょう....??
There was a problem hiding this comment.
確かにそうですね！
自前でかいちゃいます！
| export type FileUploaderProps = { | ||
| description?: string; | ||
| title?: string; | ||
| accept?: string; |
There was a problem hiding this comment.
なんか型で制御出来たら嬉しいなって思ったけど、そこら辺おいしいやつなさそうよね。。。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
There was a problem hiding this comment.
うん、ごめん、TypeScriptの HTMLInputElement の accept も string だったから string でおいといて良さそうですね！
| width: 564px; | ||
| height: 144px; |
There was a problem hiding this comment.
変更したい場合はStyle当ててもらえばいいかなーと思ったのですが、やはり引数で指定できるようにしたほうがいいですかね...？
There was a problem hiding this comment.
使う側は引数で利用した方がラクなのでその方が良いです！
が、今回は要素の中身(文言の大きさや周辺の余白)が固定なので幅とかいじっても見辛くなりそうですよね。
この辺りは @noronaoki さんとディスカッションした方が良いかもです(大きさを変えたいユースケースがあったりするのかとか）
ref: https://github.com/voyagegroup/fluct_XDC/issues/98