79625 change button position and names of methods and state vars

packages/app/src/components/SearchPage.jsx

@@ -32,16 +32,16 @@ class SearchPage extends React.Component {
       searchResultMeta: {},
       selectedPage: {},
       selectedPages: new Set(),
-      excludeUsersHome: true,
-      excludeTrash: true,
+      includeUsersHome: false,
+      includeTrash: false,
     };
 
     this.changeURL = this.changeURL.bind(this);
     this.search = this.search.bind(this);
     this.selectPage = this.selectPage.bind(this);
     this.toggleCheckBox = this.toggleCheckBox.bind(this);
-    this.onExcludeUsersHome = this.onExcludeUsersHome.bind(this);
-    this.onExcludeTrash = this.onExcludeTrash.bind(this);
+    this.onIncludeUsersHome = this.onIncludeUsersHome.bind(this);
+    this.onIncludeTrash = this.onIncludeTrash.bind(this);
   }
 
   componentDidMount() {
@@ -63,12 +63,12 @@ class SearchPage extends React.Component {
     return query;
   }
 
-  onExcludeUsersHome() {
-    this.setState({ excludeUsersHome: !this.state.excludeUsersHome });
+  onIncludeUsersHome() {
+    this.setState({ includeUsersHome: !this.state.includeUsersHome });
   }
 
-  onExcludeTrash() {
-    this.setState({ excludeTrash: !this.state.excludeTrash });
+  onIncludeTrash() {
+    this.setState({ includeTrash: !this.state.includeTrash });
   }
 
   changeURL(keyword, refreshHash) {
@@ -86,10 +86,10 @@ class SearchPage extends React.Component {
     let query = keyword;
 
     // pages included in specific path are not retrived when prefix is added
-    if (this.state.excludeTrash) {
+    if (this.state.includeTrash) {
       query = `${query} -prefix:${specificPathNames.trash}`;
     }
-    if (this.state.excludeUsersHome) {
+    if (this.state.includeUsersHome) {
       query = `${query} -prefix:${specificPathNames.user}`;
     }
 
@@ -190,8 +190,8 @@ class SearchPage extends React.Component {
         searchingKeyword={this.state.searchingKeyword}
         appContainer={this.props.appContainer}
         onSearchInvoked={this.search}
-        onExcludeUsersHome={this.onExcludeUsersHome}
-        onExcludeTrash={this.onExcludeTrash}
+        onIncludeUsersHome={this.onIncludeUsersHome}
+        onIncludeTrash={this.onIncludeTrash}
       >
       </SearchControl>
     );

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -7,8 +7,8 @@ type Props = {
   searchingKeyword: string,
   appContainer: AppContainer,
   onSearchInvoked: (data : any[]) => boolean,
-  onExcludeUsersHome?: () => void,
-  onExcludeTrash?: () => void,
+  onIncludeUsersHome?: () => void,
+  onIncludeTrash?: () => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
@@ -17,15 +17,15 @@ const SearchControl: FC <Props> = (props: Props) => {
   const SearchPageFormTypeAny : any = SearchPageForm;
   const { t } = useTranslation('');
 
-  const onExcludeUsersHome = () => {
-    if (props.onExcludeUsersHome != null) {
-      props.onExcludeUsersHome();
+  const onIncludeUsersHome = () => {
+    if (props.onIncludeUsersHome != null) {
+      props.onIncludeUsersHome();
     }
   };
 
-  const onExcludeTrash = () => {
-    if (props.onExcludeTrash != null) {
-      props.onExcludeTrash();
+  const onIncludeTrash = () => {
+    if (props.onIncludeTrash != null) {
+      props.onIncludeTrash();
     }
   };
 
@@ -40,29 +40,27 @@ const SearchControl: FC <Props> = (props: Props) => {
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
       <div className="d-flex my-4">
-        <div className="form-check border-gray">
+        {/* ボタン1 */}
+        <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
+          <label className="my-0 mr-2" htmlFor="flexCheckDefault">
+            {t('Include Subordinated Target Page', { target: '/user' })}
+          </label>
           <input
-            className="form-check-input"
             type="checkbox"
-            value=""
             id="flexCheckDefault"
-            onClick={() => onExcludeUsersHome()}
+            onClick={() => onIncludeUsersHome()}
           />
-          <label className="form-check-label" htmlFor="flexCheckDefault">
-            {t('Include Subordinated Target Page', { target: '/user' })}
-          </label>
         </div>
-        <div className="form-check">
+        {/* ボタン２ */}
+        <div className="d-flex align-items-center border rounded border-gray px-2 mr-3">
+          <label className="my-0 mr-2" htmlFor="flexCheckChecked">
+            {t('Include Subordinated Target Page', { target: '/trash' })}
+          </label>
           <input
-            className="form-check-input"
             type="checkbox"
-            value=""
             id="flexCheckChecked"
-            onClick={() => onExcludeTrash()}
+            onClick={() => onIncludeTrash()}
           />
-          <label className="form-check-label" htmlFor="flexCheckChecked">
-            {t('Include Subordinated Target Page', { target: '/trash' })}
-          </label>
         </div>
       </div>
     </div>