Month: April 2021
圖表製作
custom select
- 有input可以輸入值
- 自動補完 (打兩個字元才出現
- 用鍵盤↓↑移動 (若有hover從hover的位置開始)
- 彈出視窗，一開始點擊即彈出，提供兩種選擇
一、可以輸入文字
二、可以往下滑來選
（有的需求是打了二個字才出現dropdown，不是點擊就彈出） - 可以清除文字
- 搜尋後保留原本搜尋的文字
- 搜尋出來的列表，換頁是依原本搜尋的關鍵字來換，不是依目前輸入的值，可以先把keyword存到redux，再打search API（裡面getState）
- 點擊其它地方，收起dropdown list（這樣也不用擔心會擋到其它dropdown的z-index
- 思考：假設列表很短，做輸入／搜尋有意義嗎？
- 有的下拉式選單，例如選擇國家的，好像沒有清除值的必要，重選就好了
- 可以直接輸入值，不需要一定要選擇哪一個項目？（感覺要不要直接input…對，直接input就好，又不是只要列出這個項目的東西，情境不一樣）
- 可以塞預設值給它
- 想一想覺得應該很多元件都做成「如果有值就吃值，沒有就用預設」（例如寬度）
- 刪除按鈕應該不是用alwaysShowDeleteButton來控制，怪怪的，刪掉它了，少一點東西也好，應該是有值的話才出來
最新版的在Central上，之後抽出來
做Modal的方式
- 共用style，然後不同的內容用props來填，但是每個不同的modal要各別開一個component來呈現。適合各別客製化需求多的modal
- 共用同一個component，訊息從redux裡面讀。但就不同有太多客製化的東西。適合簡單的訊息提示窗。
有空要研究的功能
- 自己刻select下拉式選單，還要可以搜尋、可以用鍵盤移動
webpack react-testing-library
用webpack，不用腳手架create-react-app，來配置react-testing-library
參考Jest官網的教學
Using with webpack
TypeScript學習
看書一邊寫筆記：
unknown和any相近，但是如果把一個變數的值的type換成另外一種type，unknown在編譯的時候會報錯，可是any不會，unknown就像是一個label的根念。
如果定義一個function的形狀，它沒有回傳值的話(s) => console.log(s)
那定義type可以寫成 (s: string) => void
參考文章：
Using Jest and RTL with React and TypeScript
學英文的提案
買有翻譯的英文小說，之後再去買它的中文小說，交叉比對理解意思。
或是直接買有中英對照的書。例如愛麗絲夢遊仙境等等…
比較有名的作品例如1984就有英文/中文版。或是國外歐美翻譯小說也可以，總之逛逛書局有中文版的，它應該都有英文版，除非它原文是西班牙文什麼的！