@opensumi/ide-search 2.21.13 → 2.22.0

package/src/browser/search.module.less

@@ -0,0 +1,352 @@
+.search_container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  font-size: 12px;
+  user-select: none;
+
+  .search_options {
+    padding: 0 8px;
+    display: block;
+
+    input {
+      font-size: 12px; //  搜索这里字号会小一号 12px
+    }
+  }
+
+  .replace {
+    padding: 0 5px;
+  }
+
+  .header {
+    padding: 10px 5px;
+    > span {
+      display: inline-block;
+      margin-left: 10px;
+    }
+
+    .menu {
+      float: right;
+      margin-left: 5px;
+      opacity: 0.5;
+    }
+
+    .menu_active {
+      opacity: 1;
+    }
+  }
+
+  .result_describe,
+  .result_error {
+    padding: 10px;
+    padding-top: 15px;
+    margin: 0;
+    display: flex;
+    .text {
+      display: inline;
+      flex: 1;
+      line-height: 16px;
+    }
+    .result_fresh,
+    .result_fold {
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.1);
+      }
+      &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+    .result_fresh {
+      margin: 0 5px;
+    }
+  }
+
+  .result_error {
+    color: var(--errorForeground);
+  }
+
+  input[type='text'] {
+    width: 100%;
+  }
+
+  .search_and_replace_container {
+    display: flex;
+
+    .replace-toggle {
+      display: flex;
+      align-items: center;
+      width: 15px;
+      min-width: 15px;
+      justify-content: center;
+      margin-right: 2px;
+      box-sizing: border-box;
+
+      &:hover {
+        background: var(--input-background);
+      }
+    }
+
+    .replace_all {
+      color: var(--textLink-foreground);
+      cursor: pointer;
+    }
+
+    .search_and_replace_fields {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .search_input_title {
+      line-height: 20px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .search_title {
+        margin-right: 5px;
+        text-transform: uppercase;
+      }
+    }
+
+    .search_field {
+      display: flex;
+      align-items: center;
+      border: var(--input-border);
+      margin-bottom: 4px;
+
+      &:hover {
+        border-color: var(--inputOption-activeBorder);
+      }
+
+      .option_buttons {
+        height: 23px;
+        display: flex;
+        align-items: center;
+        background: var(--input-background);
+      }
+    }
+
+    .replace_field {
+      display: flex;
+    }
+  }
+
+  .search_details {
+    .glob_field {
+      display: flex;
+      flex-direction: column;
+      white-space: nowrap;
+
+      .label {
+        line-height: 20px;
+        margin: 8px 0 4px 0;
+        user-select: none;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .use_default_excludes_wrapper {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .search_excludes_description {
+    line-height: 1;
+    margin-left: 5px;
+  }
+
+  @option-size: 20px;
+
+  .search_option {
+    width: @option-size;
+    height: @option-size;
+    margin: 0 1px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    user-select: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 1px solid transparent;
+    cursor: pointer;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &::before {
+      display: inline-block;
+      height: @option-size - 2;
+      line-height: @option-size - 2;
+    }
+
+    &.select {
+      background-color: var(--inputOption-activeBackground);
+      border-color: var(--inputOption-activeBorder);
+      opacity: 1;
+    }
+  }
+
+  .replace_all_button {
+    margin-left: 4px;
+    padding: 0 5px;
+    text-align: center;
+    line-height: 26px;
+    color: var(--textLink-foreground);
+    border: 1px solid transparent;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    flex-shrink: 0;
+    cursor: pointer;
+    &.disabled {
+      color: inherit;
+      opacity: 0.7;
+      pointer-events: none;
+    }
+    &:hover {
+      border-radius: 2px;
+      border-color: currentColor;
+    }
+  }
+}
+
+.line_text {
+  white-space: nowrap;
+}
+
+.tree {
+  overflow: hidden;
+}
+
+.tree_child {
+  .icon {
+    font-size: 25px;
+    margin-left: 0px;
+    margin-right: 10px;
+  }
+
+  .text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 22px;
+
+    &:hover {
+      color: var(--list-hoverForeground);
+      background: var(--list-hoverBackground);
+    }
+  }
+
+  .result {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+
+    li {
+      padding-left: 30px;
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+
+      &:hover {
+        color: var(--list-hoverForeground);
+        background: var(--list-hoverBackground);
+      }
+    }
+  }
+
+  &.kt_mod_selected {
+    color: var(--list-activeSelectionForeground);
+    background: var(--list-activeSelectionBackground);
+  }
+
+  &.kt_mod_focused {
+    color: var(--list-focusForeground);
+    background: var(--list-focusBackground);
+  }
+
+  &.kt_mod_invalid {
+    color: var(--list-invalidItemForeground);
+  }
+}
+
+.include_rule_content {
+  font-size: 11px;
+
+  > p {
+    margin-tio: 2px;
+    margin-bottom: 0;
+  }
+
+  > ul {
+    margin: 0;
+    padding: 0;
+
+    > li {
+      color: var(--descriptionForeground);
+      list-style-type: none;
+    }
+  }
+}
+
+.exclude_rule_content {
+  font-size: 11px;
+
+  > p {
+    margin-bottom: 5px;
+    > span {
+      float: right;
+      color: var(--textLink-foreground);
+      cursor: pointer;
+
+      &::hover {
+        color: var(--textLink-activeForeground);
+      }
+    }
+  }
+
+  > div {
+    max-width: 200px;
+    color: var(--descriptionForeground);
+  }
+}
+
+.limit {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.loading-wrap {
+  position: relative;
+  width: calc(100% - 16px);
+  margin-left: 8px;
+}
+
+.search_result_code {
+  color: var(--foreground);
+}
+
+.search_result_label {
+  margin-right: 0;
+}
+
+.checkbox :global(.kt-checkbox-icon) {
+  width: 14px;
+  height: 14px;
+  border-color: var(--input-placeholderForeground);
+}

package/src/browser/search.replace.widget.tsx

@@ -0,0 +1,38 @@
+import cls from 'classnames';
+import React from 'react';
+
+import { Input } from '@opensumi/ide-components';
+import { localize } from '@opensumi/ide-core-common/lib/localize';
+
+import styles from './search.module.less';
+
+interface SearchReplaceWidgetProps {
+  replaceValue: string;
+  onSearch(): void;
+  onReplaceRuleChange(e: React.FormEvent<HTMLInputElement>): void;
+  replaceAll(): void;
+  disabled: boolean;
+}
+
+export const SearchReplaceWidget = React.memo(
+  ({ replaceValue, disabled = true, onSearch, onReplaceRuleChange, replaceAll }: SearchReplaceWidgetProps) => (
+    <div className={styles.search_and_replace_container}>
+      <div className={styles.search_and_replace_fields}>
+        <div className={styles.replace_field}>
+          <Input
+            value={replaceValue}
+            id='replace-input-field'
+            title={localize('search.replace.label')}
+            type='text'
+            placeholder={localize('search.replace.title')}
+            onKeyUp={onSearch}
+            onChange={onReplaceRuleChange}
+          />
+          <div className={cls(styles.replace_all_button, disabled && styles.disabled)} onClick={replaceAll}>
+            <span>{localize('search.replaceAll.label')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);

package/src/browser/search.rules.widget.tsx

@@ -0,0 +1,204 @@
+import cls from 'classnames';
+import React from 'react';
+
+import { Input, CheckBox, Popover, PopoverTriggerType, PopoverPosition } from '@opensumi/ide-components';
+import { ConfigContext } from '@opensumi/ide-core-browser/lib/react-providers/config-provider';
+import { getExternalIcon, getIcon } from '@opensumi/ide-core-browser/lib/style/icon/icon';
+import { localize } from '@opensumi/ide-core-common/lib/localize';
+
+import { IContentSearchClientService } from '../common/content-search';
+
+import styles from './search.module.less';
+import { ContentSearchClientService } from './search.service';
+
+const IncludeRuleContent = () => (
+  <div className={cls(styles.include_rule_content)}>
+    <ul>
+      <li>, : {localize('search.help.concatRule')}</li>
+      <li>* : {localize('search.help.matchOneOrMoreRule')}</li>
+      <li>? : {localize('search.help.matchOne')}</li>
+      <li>** : {localize('search.help.matchAny')}</li>
+      <li>
+        {} : {localize('search.help.matchWithGroup')}
+      </li>
+      <li>[] : {localize('search.help.matchRange')}</li>
+    </ul>
+  </div>
+);
+
+const ExcludeRuleContent = React.memo(() => {
+  const configContext = React.useContext(ConfigContext);
+  const { injector } = configContext;
+  const searchBrowserService = injector.get(IContentSearchClientService);
+  const excludeList = React.useMemo(() => searchBrowserService.getPreferenceSearchExcludes(), [searchBrowserService]);
+
+  return (
+    <div className={cls(styles.exclude_rule_content)}>
+      <div>
+        {excludeList.map((exclude, index) => {
+          if (index === excludeList.length - 1) {
+            return exclude;
+          }
+          return `${exclude}, `;
+        })}
+      </div>
+    </div>
+  );
+});
+
+interface SearchRulesWidgetProps {
+  includeValue: string;
+  excludeValue: string;
+  onChangeInclude(e: React.FormEvent<HTMLInputElement>): void;
+  onChangeExclude(e: React.FormEvent<HTMLInputElement>): void;
+  isOnlyOpenEditors: boolean;
+  onOnlyOpenEditorsToggle(): void;
+  isIncludeIgnored: boolean;
+  onIncludeIgnoredToggle(): void;
+  onSearch(): void;
+  onOpenPreference(): void;
+}
+
+const IncludeInput = React.memo(
+  ({
+    includeValue,
+    isOnlyOpenEditors,
+    onSearch,
+    onChangeInclude,
+    onOnlyOpenEditorsToggle,
+  }: Pick<
+    SearchRulesWidgetProps,
+    'includeValue' | 'onSearch' | 'onChangeInclude' | 'isOnlyOpenEditors' | 'onOnlyOpenEditorsToggle'
+  >) => (
+    <div className={cls(styles.glob_field)}>
+      <div className={cls(styles.label)}>
+        <span className={styles.limit}>{localize('search.includes')}</span>
+        <span className={cls(styles.include_rule)}>
+          <Popover
+            id={'show_include_rule'}
+            title={localize('search.help.supportRule')}
+            content={<IncludeRuleContent />}
+            trigger={PopoverTriggerType.hover}
+            delay={500}
+            position={PopoverPosition.right}
+          >
+            <a>{localize('search.help.showIncludeRule')}</a>
+          </Popover>
+        </span>
+      </div>
+      <Input
+        value={includeValue}
+        type='text'
+        placeholder={localize('search.includes.description')}
+        onKeyUp={onSearch}
+        onChange={onChangeInclude}
+        id='include-input-field'
+        addonAfter={[
+          <span
+            key='onlyOpenEditors'
+            className={cls(getExternalIcon('book'), styles.search_option, { [styles.select]: isOnlyOpenEditors })}
+            title={localize('search.onlyOpenEditors')}
+            onClick={onOnlyOpenEditorsToggle}
+          />,
+        ]}
+      />
+    </div>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.includeValue === nextProps.includeValue && prevProps.isOnlyOpenEditors === nextProps.isOnlyOpenEditors,
+);
+
+const ExcludeInput = React.memo(
+  ({
+    isIncludeIgnored,
+    excludeValue,
+    onIncludeIgnoredToggle,
+    onChangeExclude,
+    onOpenPreference,
+    onSearch,
+  }: Pick<
+    SearchRulesWidgetProps,
+    'isIncludeIgnored' | 'onIncludeIgnoredToggle' | 'onOpenPreference' | 'excludeValue' | 'onSearch' | 'onChangeExclude'
+  >) => (
+    <div className={cls(styles.glob_field, styles.search_excludes)}>
+      <div className={styles.label}>
+        <span className={styles.limit}>{localize('search.excludes')}</span>
+        <div className={styles.use_default_excludes_wrapper}>
+          <CheckBox
+            className={cls(styles.checkbox)}
+            label={localize('search.excludes.default.enable')}
+            checked={!isIncludeIgnored}
+            id='search-input-isIncludeIgnored'
+            onChange={onIncludeIgnoredToggle}
+          />
+          <Popover
+            title={localize('search.help.excludeList')}
+            insertClass={cls(styles.search_excludes_description)}
+            id={'search_excludes'}
+            action={localize('search.help.modify')}
+            onClickAction={onOpenPreference}
+            content={<ExcludeRuleContent />}
+            trigger={PopoverTriggerType.hover}
+            delay={500}
+            position={PopoverPosition.right}
+          >
+            <span className={cls(getIcon('question-circle'))} style={{ opacity: '0.7', cursor: 'pointer' }} />
+          </Popover>
+        </div>
+      </div>
+      <Input
+        type='text'
+        value={excludeValue}
+        placeholder={localize('search.includes.description')}
+        onKeyUp={onSearch}
+        onChange={onChangeExclude}
+        id='exclude-input-field'
+      />
+    </div>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.excludeValue === nextProps.excludeValue && prevProps.isIncludeIgnored === nextProps.isIncludeIgnored,
+);
+
+function isSearchRulesPropsEqual(prevProps: SearchRulesWidgetProps, nextProps: SearchRulesWidgetProps) {
+  return (
+    prevProps.includeValue === nextProps.includeValue &&
+    prevProps.excludeValue === nextProps.excludeValue &&
+    prevProps.isOnlyOpenEditors === nextProps.isOnlyOpenEditors &&
+    prevProps.isIncludeIgnored === nextProps.isIncludeIgnored
+  );
+}
+
+export const SearchRulesWidget = React.memo(
+  ({
+    includeValue,
+    excludeValue,
+    onChangeExclude,
+    onChangeInclude,
+    isOnlyOpenEditors,
+    onOnlyOpenEditorsToggle,
+    isIncludeIgnored,
+    onIncludeIgnoredToggle,
+    onSearch,
+    onOpenPreference,
+  }: SearchRulesWidgetProps) => (
+    <div className='glob_field-container'>
+      <IncludeInput
+        includeValue={includeValue}
+        onSearch={onSearch}
+        onChangeInclude={onChangeInclude}
+        isOnlyOpenEditors={isOnlyOpenEditors}
+        onOnlyOpenEditorsToggle={onOnlyOpenEditorsToggle}
+      />
+      <ExcludeInput
+        isIncludeIgnored={isIncludeIgnored}
+        excludeValue={excludeValue}
+        onIncludeIgnoredToggle={onIncludeIgnoredToggle}
+        onChangeExclude={onChangeExclude}
+        onOpenPreference={onOpenPreference}
+        onSearch={onSearch}
+      />
+    </div>
+  ),
+  isSearchRulesPropsEqual,
+);