transform class arrow function to class method function.

src/pages/bin/List.tsx

@@ -58,14 +58,14 @@ export default class List extends TankComponent<IProps, IState> {
     }
   }
 
-  refresh = () => {
+  refresh() {
     // 清空暂存区
     this.selectedMatters = [];
     // 刷新文件列表
     this.refreshPager();
-  };
+  }
 
-  refreshPager = () => {
+  refreshPager() {
     //如果没有任何的排序，默认使用时间倒序和文件夹在顶部
     if (!this.pager.getCurrentSortFilter()) {
       this.pager.setFilterValue("orderDeleteTime", SortDirection.DESC);
@@ -76,9 +76,9 @@ export default class List extends TankComponent<IProps, IState> {
     this.pager.setFilterValue("deleted", true);
 
     this.pager.httpList();
-  };
+  }
 
-  checkMatter = (matter?: Matter) => {
+  checkMatter(matter?: Matter) {
     if (matter) {
       if (matter.check) {
         this.selectedMatters.push(matter);
@@ -98,23 +98,23 @@ export default class List extends TankComponent<IProps, IState> {
       });
     }
     this.updateUI();
-  };
+  }
 
-  checkAll = () => {
+  checkAll() {
     this.pager.data.forEach((i) => {
       i.check = true;
     });
     this.checkMatter();
-  };
+  }
 
-  checkNone = () => {
+  checkNone() {
     this.pager.data.forEach((i) => {
       i.check = false;
     });
     this.checkMatter();
-  };
+  }
 
-  deleteBatch = () => {
+  deleteBatch() {
     Modal.confirm({
       title: Lang.t("actionCanNotRevertConfirm"),
       icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
@@ -126,9 +126,9 @@ export default class List extends TankComponent<IProps, IState> {
         });
       },
     });
-  };
+  }
 
-  recoverBatch = () => {
+  recoverBatch() {
     Modal.confirm({
       title: Lang.t("actionRecoveryConfirm"),
       icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
@@ -140,9 +140,9 @@ export default class List extends TankComponent<IProps, IState> {
         });
       },
     });
-  };
+  }
 
-  searchFile = (value?: string) => {
+  searchFile(value?: string) {
     this.pager.resetFilter();
     if (value) {
       this.pager.setFilterValue("orderCreateTime", SortDirection.DESC);
@@ -153,19 +153,19 @@ export default class List extends TankComponent<IProps, IState> {
     } else {
       this.refresh();
     }
-  };
+  }
 
-  changeSearch = (e: any) => {
+  changeSearch(e: any) {
     if (!e.currentTarget.value) this.searchFile();
-  };
+  }
 
-  changePage = (page: number) => {
+  changePage(page: number) {
     this.pager.page = page - 1; // page的页数0基
     this.pager.httpList();
     this.updateUI();
-  };
+  }
 
-  previewImage = (matter: Matter) => {
+  previewImage(matter: Matter) {
     let imageArray: string[] = [];
     let startIndex = -1;
     this.pager.data.forEach((item) => {
@@ -178,7 +178,7 @@ export default class List extends TankComponent<IProps, IState> {
     });
 
     ImagePreviewer.showMultiPhoto(imageArray, startIndex);
-  };
+  }
 
   render() {
     const { pager, selectedMatters } = this;
@@ -190,7 +190,11 @@ export default class List extends TankComponent<IProps, IState> {
           <Col xs={24} sm={24} md={14} lg={16}>
             <Space className="buttons">
               {selectedMatters.length !== pager.data.length ? (
-                <Button type="primary" className="mb10" onClick={this.checkAll}>
+                <Button
+                  type="primary"
+                  className="mb10"
+                  onClick={() => this.checkAll()}
+                >
                   <PlusSquareOutlined />
                   {Lang.t("selectAll")}
                 </Button>
@@ -200,7 +204,7 @@ export default class List extends TankComponent<IProps, IState> {
                 <Button
                   type="primary"
                   className="mb10"
-                  onClick={this.checkNone}
+                  onClick={() => this.checkNone()}
                 >
                   <MinusSquareOutlined />
                   {Lang.t("cancel")}
@@ -211,7 +215,7 @@ export default class List extends TankComponent<IProps, IState> {
                   <Button
                     type="primary"
                     className="mb10"
-                    onClick={this.recoverBatch}
+                    onClick={() => this.recoverBatch()}
                   >
                     <RedoOutlined />
                     {Lang.t("matter.recovery")}
@@ -219,7 +223,7 @@ export default class List extends TankComponent<IProps, IState> {
                   <Button
                     type="primary"
                     className="mb10"
-                    onClick={this.deleteBatch}
+                    onClick={() => this.deleteBatch()}
                   >
                     <CloseCircleOutlined />
                     {Lang.t("matter.hardDelete")}
@@ -227,7 +231,11 @@ export default class List extends TankComponent<IProps, IState> {
                 </>
               ) : null}
 
-              <Button type="primary" className="mb10" onClick={this.refresh}>
+              <Button
+                type="primary"
+                className="mb10"
+                onClick={() => this.refresh()}
+              >
                 <SyncOutlined />
                 {Lang.t("refresh")}
               </Button>
@@ -238,7 +246,7 @@ export default class List extends TankComponent<IProps, IState> {
               className="mb10"
               placeholder={Lang.t("matter.searchFile")}
               onSearch={(value) => this.searchFile(value)}
-              onChange={this.changeSearch}
+              onChange={(e) => this.changeSearch(e)}
               enterButton
             />
           </Col>
@@ -251,10 +259,10 @@ export default class List extends TankComponent<IProps, IState> {
                 recycleMode
                 key={matter.uuid!}
                 matter={matter}
-                onDeleteSuccess={this.refresh}
-                onRecoverySuccess={this.refresh}
-                onCheckMatter={this.checkMatter}
-                onPreviewImage={this.previewImage}
+                onDeleteSuccess={() => this.refresh()}
+                onRecoverySuccess={() => this.refresh()}
+                onCheckMatter={(m) => this.checkMatter(m)}
+                onPreviewImage={(m) => this.previewImage(m)}
               />
             ))
           ) : (
@@ -263,7 +271,7 @@ export default class List extends TankComponent<IProps, IState> {
         </div>
         <Pagination
           className="mt10 pull-right"
-          onChange={this.changePage}
+          onChange={(page) => this.changePage(page)}
           current={pager.page + 1}
           total={pager.totalItems}
           pageSize={pager.pageSize}

src/pages/layout/widget/AboutModal.tsx

@@ -41,7 +41,7 @@ export default class AboutModal extends TankComponent<IProps, IState> {
     })
   };
 
-  changeLang = () => {
+  changeLang() {
     BottomLayout.changeLang();
     this.updateUI();
   };
@@ -56,7 +56,7 @@ export default class AboutModal extends TankComponent<IProps, IState> {
         <span className="item">
           <span dangerouslySetInnerHTML={{__html: preference.record}}/>
         </span>
-        <p className="item" onClick={this.changeLang}>
+        <p className="item" onClick={() => this.changeLang()}>
           {Lang.getSingleton().lang === "zh" ? "English" : "中文"}
         </p>
         <p className="brand">

src/pages/preference/PreviewEngineEdit.tsx

@@ -34,14 +34,14 @@ export default class PreviewEngineEdit extends TankComponent<IProps, IState> {
     this.refresh();
   }
 
-  refresh = () => {
+  refresh() {
     this.preference.httpFetch(() => {
       this.preference.detailLoading = false;
       this.updateUI();
     });
   };
 
-  finish = (values: any) => {
+  finish(values: any) {
     this.preference.assign(values);
     this.preference.httpSavePreviewEngine(function () {
       MessageBoxUtil.success(Lang.t("operationSuccess"));
@@ -65,7 +65,7 @@ export default class PreviewEngineEdit extends TankComponent<IProps, IState> {
             {...layout}
             name="preview-engine"
             ref={this.formRef}
-            onFinish={this.finish}
+            onFinish={e => this.finish(e)}
             onValuesChange={this.updateUI}
           >
             <Form.Item label={<Tooltip title={Lang.t("preference.engineUsageHint")}>

src/pages/preference/ScanEdit.tsx

@@ -65,7 +65,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
     });
   }
 
-  finish = (values: any) => {
+  finish(values: any) {
     if (values.scope === ScanScopeType.CUSTOM) {
       this.preference.scanConfig.assign({
         ...values,
@@ -82,22 +82,22 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
     });
   };
 
-  changeEnableScan = (value: boolean) => {
+  changeEnableScan(value: boolean) {
     this.preference.scanConfig.enable = value;
     this.updateUI();
   };
 
-  changeCronType = (value: ScanCronType) => {
+  changeCronType(value: ScanCronType) {
     this.preference.scanConfig.cronType = value;
     this.updateUI();
   };
 
-  changeScopeType = (value: ScanScopeType) => {
+  changeScopeType(value: ScanScopeType) {
     this.preference.scanConfig.scope = value;
     this.updateUI();
   };
 
-  fetchUser = (value: any) => {
+  fetchUser(value: any) {
     this.pager.resetFilter();
     this.pager.setFilterValue("orderCreateTime", SortDirection.DESC);
     this.pager.setFilterValue("username", value);
@@ -121,7 +121,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
             name="preview-engine"
             ref={this.formRef}
             initialValues={preference.scanConfig}
-            onFinish={this.finish}
+            onFinish={this.finish.bind(this)}
             onValuesChange={() => this.updateUI}
           >
             <Form.Item
@@ -129,7 +129,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
               valuePropName="checked"
               name="enable"
             >
-              <Switch onChange={this.changeEnableScan} />
+              <Switch onChange={this.changeEnableScan.bind(this)} />
             </Form.Item>
             {preference.scanConfig.enable && (
               <>
@@ -137,7 +137,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
                   label={Lang.t("preference.scanCron")}
                   name="cronType"
                 >
-                  <Select onChange={this.changeCronType}>
+                  <Select onChange={this.changeCronType.bind(this)}>
                     {ScanCronTypeList.map((option) => (
                       <Select.Option key={option.value} value={option.value}>
                         {option.name}
@@ -160,7 +160,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
                   </Form.Item>
                 )}
                 <Form.Item label={Lang.t("preference.scanScope")} name="scope">
-                  <Select onChange={this.changeScopeType}>
+                  <Select onChange={this.changeScopeType.bind(this)}>
                     {ScanScopeTypeList.map((option) => (
                       <Select.Option key={option.value} value={option.value}>
                         {option.name}
@@ -187,7 +187,7 @@ export default class ScanEdit extends TankComponent<IProps, IState> {
                         pager.loading ? <Spin size="small" /> : null
                       }
                       filterOption={false}
-                      onSearch={this.fetchUser}
+                      onSearch={this.fetchUser.bind(this)}
                       style={{ width: "100%" }}
                     >
                       {pager.data.map((user: User) => (

src/pages/preference/widget/PreviewConfigPanel.tsx

@@ -20,7 +20,7 @@ export default class PreviewConfigPanel extends TankComponent<IProps, IState> {
     this.state = {};
   }
 
-  addEngine = () => {
+  addEngine() {
     let previewConfig: PreviewConfig = this.props.previewConfig;
 
     let engine: PreviewEngine = new PreviewEngine();
@@ -30,7 +30,7 @@ export default class PreviewConfigPanel extends TankComponent<IProps, IState> {
     this.updateUI();
   };
 
-  delEngineCell = (index: number) => {
+  delEngineCell(index: number) {
     this.props.previewConfig.previewEngines.splice(index, 1);
     this.updateUI();
   };
@@ -59,7 +59,7 @@ export default class PreviewConfigPanel extends TankComponent<IProps, IState> {
           type="dashed"
           block={true}
           icon={<PlusOutlined />}
-          onClick={this.addEngine.bind(this)}
+          onClick={() => this.addEngine()}
         >
           {Lang.t("preference.newEngine")}
         </Button>

src/pages/share/Detail.tsx

@@ -65,7 +65,7 @@ export default class Detail extends TankComponent<IProps, IState> {
     }
   }
 
-  refresh = () => {
+  refresh() {
     const puuid = BrowserUtil.getQueryByName("puuid") || Matter.MATTER_ROOT;
     if (puuid === Matter.MATTER_ROOT) {
       this.share.rootUuid = Matter.MATTER_ROOT
@@ -88,7 +88,7 @@ export default class Detail extends TankComponent<IProps, IState> {
     this.refreshMatterPager();
   };
 
-  refreshMatterPager = () => {
+  refreshMatterPager() {
     //只有当鉴权通过，并且不是分享根目录时需要才去进行page请求，根目录下matters已经通过browse接口拿到了
     const puuid = BrowserUtil.getQueryByName("puuid");
     if (!this.needShareCode && puuid && puuid !== Matter.MATTER_ROOT) {
@@ -109,17 +109,17 @@ export default class Detail extends TankComponent<IProps, IState> {
     }
   };
 
-  getFiles = (value: string) => {
+  getFiles(value: string) {
     this.share.code = value;
     this.refresh();
   };
 
-  downloadZip = () => {
+  downloadZip() {
     const puuid = BrowserUtil.getQueryByName("puuid") || Matter.MATTER_ROOT;
     this.share.downloadZip(puuid);
   };
 
-  cancelShare = () => {
+  cancelShare() {
     Modal.confirm({
       title: Lang.t("share.cancelPrompt"),
       icon: <ExclamationCircleFilled twoToneColor="#FFDC00"/>,
@@ -132,7 +132,7 @@ export default class Detail extends TankComponent<IProps, IState> {
     });
   };
 
-  previewImage = (matter: Matter) => {
+  previewImage(matter: Matter) {
     let imageArray: string[] = [];
     let startIndex = -1;
     const {share} = this;
@@ -148,7 +148,7 @@ export default class Detail extends TankComponent<IProps, IState> {
     ImagePreviewer.showMultiPhoto(imageArray, startIndex);
   };
 
-  goToDirectory = (matterUuid?: string) => {
+  goToDirectory(matterUuid?: string) {
     const paramId = this.props.match.params.uuid;
 
     if (matterUuid) {
@@ -171,7 +171,7 @@ export default class Detail extends TankComponent<IProps, IState> {
     }
   };
 
-  refreshBreadcrumbs = () => {
+  refreshBreadcrumbs() {
     let that = this;
 
     //清空
@@ -214,7 +214,7 @@ export default class Detail extends TankComponent<IProps, IState> {
                   placeholder={Lang.t("share.enterCode")}
                   enterButton={Lang.t("share.getFiles")}
                   size="large"
-                  onSearch={this.getFiles}
+                  onSearch={this.getFiles.bind(this)}
                 />
               </Col>
             </Row>
@@ -236,13 +236,13 @@ export default class Detail extends TankComponent<IProps, IState> {
                 </div>
                 <div className="right-box">
                   <Space>
-                    <Button type="primary" onClick={this.downloadZip}>
+                    <Button type="primary" onClick={() => this.downloadZip()}>
                       <DownloadOutlined/>
                       {Lang.t("download")}
                     </Button>
                     {user.uuid && user.uuid === share.userUuid ? (
                       <>
-                        <Button danger onClick={this.cancelShare}>
+                        <Button danger onClick={() => this.cancelShare()}>
                           <StopOutlined/>
                           {Lang.t("share.cancelShare")}
                         </Button>
@@ -288,8 +288,8 @@ export default class Detail extends TankComponent<IProps, IState> {
                   key={matter.uuid!}
                   matter={matter}
                   share={share}
-                  onGoToDirectory={this.goToDirectory}
-                  onPreviewImage={this.previewImage}
+                  onGoToDirectory={this.goToDirectory.bind(this)}
+                  onPreviewImage={this.previewImage.bind(this)}
                 />
               ))
             ) : (

src/pages/share/List.tsx

@@ -28,11 +28,11 @@ export default class List extends TankComponent<IProps, IState> {
     this.refresh();
   }
 
-  refresh = () => {
+  refresh() {
     this.pager.httpList();
   };
 
-  changePage = (page: number) => {
+  changePage(page: number) {
     this.pager.page = page - 1; // page的页数0基
     this.pager.httpList();
     this.updateUI();
@@ -46,12 +46,12 @@ export default class List extends TankComponent<IProps, IState> {
         <TankTitle name={Lang.t("layout.myShare")}/>
 
         {pager.data.map((share) => (
-          <ShareBar key={share.uuid!} share={share} onDeleteSuccess={this.refresh}/>
+          <ShareBar key={share.uuid!} share={share} onDeleteSuccess={() => this.refresh()}/>
         ))}
 
         <Pagination
           className="mt10 pull-right"
-          onChange={this.changePage}
+          onChange={this.changePage.bind(this)}
           current={pager.page + 1}
           total={pager.totalItems}
           pageSize={pager.pageSize}

src/pages/share/widget/ShareBar.tsx

@@ -32,11 +32,11 @@ export default class ShareBar extends TankComponent<IProps, IState> {
     super(props);
   }
 
-  showShare = () => {
+  showShare() {
     ShareDialogModal.open(this.props.share);
   };
 
-  delShare = () => {
+  delShare() {
     Modal.confirm({
       title: Lang.t("actionCanNotRevertConfirm"),
       icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
@@ -49,7 +49,7 @@ export default class ShareBar extends TankComponent<IProps, IState> {
     });
   };
 
-  toggleHandles = () => {
+  toggleHandles() {
     this.showMore = !this.showMore;
     this.updateUI();
   };

src/pages/share/widget/ShareDialogModal.tsx

@@ -22,13 +22,13 @@ export default class ShareDialogModal extends TankComponent<IProps, IState> {
     super(props);
   }
 
-  clipboard = (text: string) => {
+  clipboard(text: string) {
     ClipboardUtil.copy(text, () => {
       MessageBoxUtil.success(Lang.t("copySuccess"));
     })
   };
 
-  copyAll = () => {
+  copyAll() {
     const { share } = this.props;
     const text = `${Lang.t("share.link")}：${share.getLink()} ${Lang.t("share.code")}：${share.code}`;
     this.clipboard(text);
@@ -97,7 +97,7 @@ export default class ShareDialogModal extends TankComponent<IProps, IState> {
         </div>
         <div className="mt10 text-right">
           <Button className="mr10" onClick={() => this.props.onClose()}>{Lang.t("close")}</Button>
-          <Button type="primary" onClick={this.copyAll}>{Lang.t("matter.copyLinkAndCode")}</Button>
+          <Button type="primary" onClick={() => this.copyAll()}>{Lang.t("matter.copyLinkAndCode")}</Button>
         </div>
       </div>
     );

src/pages/share/widget/ShareMatterPanel.tsx

@@ -33,7 +33,7 @@ export default class ShareMatterPanel extends TankComponent<IProps, IState> {
     super(props);
   }
 
-  clickRow = () => {
+  clickRow() {
     const { matter, share, onGoToDirectory, onPreviewImage } = this.props;
 
     if (matter.dir) {
@@ -48,7 +48,7 @@ export default class ShareMatterPanel extends TankComponent<IProps, IState> {
     }
   };
 
-  getIcon = () => {
+  getIcon() {
     const { matter, share } = this.props;
     if (matter.isImage()) {
       return ImageUtil.handleImageUrl(matter.getSharePreviewUrl(share.uuid!, share.code!, share.rootUuid), false, 100, 100)
@@ -57,12 +57,12 @@ export default class ShareMatterPanel extends TankComponent<IProps, IState> {
     }
   };
 
-  download = () => {
+  download() {
     const { matter, share } = this.props;
     matter.download(matter.getShareDownloadUrl(share.uuid!, share.code!, share.rootUuid))
   };
 
-  toggleHandles = () => {
+  toggleHandles() {
     this.showMore = !this.showMore;
     this.updateUI();
   };

src/pages/user/MobileList.tsx

@@ -32,12 +32,12 @@ export default class MobileList extends TankComponent<IProps, IState> {
     this.refresh();
   }
 
-  search = () => {
+  search() {
     this.pager.page = 0;
     this.refresh();
   };
 
-  refresh = () => {
+  refresh() {
     //如果没有任何的排序，默认使用时间倒序
     if (!this.pager.getCurrentSortFilter()) {
       this.pager.setFilterValue("orderCreateTime", SortDirection.DESC);
@@ -45,14 +45,14 @@ export default class MobileList extends TankComponent<IProps, IState> {
     this.pager.httpList();
   };
 
-  toggleStatus = (user: User) => {
+  toggleStatus(user: User) {
     user.httpToggleStatus(() => {
       MessageBoxUtil.success(Lang.t("operationSuccess"));
       this.updateUI();
     });
   };
 
-  delete = (user: User) => {
+  delete(user: User) {
     Modal.confirm({
       title: Lang.t("user.deleteHint", user.username),
       icon: <ExclamationCircleFilled twoToneColor={Color.WARNING} />,
@@ -65,11 +65,11 @@ export default class MobileList extends TankComponent<IProps, IState> {
     });
   };
 
-  transfiguration = (user: User) => {
+  transfiguration(user: User) {
     TransfigurationModal.open(user);
   };
 
-  searchFile = (value?: string) => {
+  searchFile(value?: string) {
     this.pager.resetFilter();
     if (value) {
       this.pager.setFilterValue("orderCreateTime", SortDirection.DESC);
@@ -80,11 +80,11 @@ export default class MobileList extends TankComponent<IProps, IState> {
     }
   };
 
-  changeSearch = (e: any) => {
+  changeSearch(e: any) {
     if (!e.currentTarget.value) this.searchFile();
   };
 
-  changePage = (page: number) => {
+  changePage(page: number) {
     this.pager.page = page - 1; // page的页数0基
     this.pager.httpList();
     this.updateUI();
@@ -108,7 +108,7 @@ export default class MobileList extends TankComponent<IProps, IState> {
             className="mb10"
             placeholder={Lang.t("matter.searchFile")}
             onSearch={(value) => this.searchFile(value)}
-            onChange={this.changeSearch}
+            onChange={this.changeSearch.bind(this)}
             enterButton
           />
         </div>
@@ -119,15 +119,15 @@ export default class MobileList extends TankComponent<IProps, IState> {
               key={user.uuid!}
               user={user}
               isCurrentUser={currentUser.uuid === user.uuid}
-              onToggleStatus={this.toggleStatus}
-              onDelete={this.delete}
-              onTransfiguration={this.transfiguration}
+              onToggleStatus={this.toggleStatus.bind(this)}
+              onDelete={this.delete.bind(this)}
+              onTransfiguration={this.transfiguration.bind(this)}
             />
           ))}
         </div>
         <Pagination
           className="mt10 pull-right"
-          onChange={this.changePage}
+          onChange={this.changePage.bind(this)}
           current={pager.page + 1}
           total={pager.totalItems}
           pageSize={pager.pageSize}

src/pages/user/widget/MobileUserPanel.tsx

@@ -45,11 +45,11 @@ export default class MobileUserPanel extends TankComponent<IProps, IState> {
     this.state = {};
   }
 
-  clickRow = () => {
+  clickRow() {
     Sun.navigateTo(`/user/detail/${this.props.user.uuid}`);
   };
 
-  toggleHandles = () => {
+  toggleHandles() {
     this.showMore = !this.showMore;
     this.updateUI();
   };
@@ -59,7 +59,7 @@ export default class MobileUserPanel extends TankComponent<IProps, IState> {
 
     return (
       <div className="mobile-user">
-        <div className="panel" onClick={this.clickRow}>
+        <div className="panel" onClick={() => this.clickRow()}>
           <img className="avatar" src={user.getAvatarUrl()} />
           <p className="username one-line">{user.username}</p>
           <Tag color={UserRoleMap[user.role].color}>