panel.js 17.5 KB
Newer Older
1 2 3 4 5 6
import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';
邓晓峰's avatar
邓晓峰 committed
7 8 9 10 11 12 13 14 15 16

import classNames from 'classnames';
import PinyinMatch from 'pinyin-match';
import { useHistory } from 'react-router-dom';

import Icon, { RightCircleOutlined } from '@ant-design/icons';

import Modal from '../modal';
import styes from './index.less';

邓晓峰's avatar
邓晓峰 committed
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
const HistorySvg = () => (
  <svg
    className="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    width="10"
    height="10"
  >
    <path
      d="M1016.405333 0h-351.573333a7.594667 7.594667 0 0 0-5.376 12.885333l149.077333 149.674667-244.224 249.770667H434.346667A7.594667 7.594667 0 0 0 426.666667 419.84v169.898667c0 4.266667 3.413333 7.594667 7.594666 7.594666h169.813334c4.266667 0 7.68-3.413333 7.68-7.594666V486.826667l263.253333-257.792 136.106667 135.509333A7.594667 7.594667 0 0 0 1024 359.253333V7.68A7.594667 7.594667 0 0 0 1016.405333 0z"
      fill="#C1C1C1"
    />
    <path
      d="M979.626667 640a45.226667 45.226667 0 0 0-44.202667 46.08v249.258667H88.490667V88.576h245.418666l1.194667-0.085333A45.056 45.056 0 0 0 378.88 44.288 45.056 45.056 0 0 0 333.994667 0H7.68A7.68 7.68 0 0 0 0 7.68v1008.64c0 4.266667 3.413333 7.68 7.68 7.68h1008.64c4.266667 0 7.68-3.413333 7.68-7.68V686.08a45.226667 45.226667 0 0 0-44.373333-46.08z"
      fill="#C1C1C1"
    />
  </svg>
);
const DelHistory = () => (
  <svg
    className="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    width="12"
    height="12"
  >
    <path
      d="M153.6 345.6a38.4 38.4 0 0 1 0-76.8h665.6a38.4 38.4 0 1 1 0 76.8H153.6z"
      fill="#888888"
    />
    <path
      d="M345.6 307.2a38.4 38.4 0 0 1-76.8 0V204.8c0-49.4592 40.1408-89.6 89.6-89.6h256c49.4592 0 89.6 40.1408 89.6 89.6v102.4a38.4 38.4 0 1 1-76.8 0V204.8a12.8 12.8 0 0 0-12.8-12.8H358.4a12.8 12.8 0 0 0-12.8 12.8v102.4zM166.4 460.8a38.4 38.4 0 0 1 76.8 0v358.4c0 7.0656 5.7344 12.8 12.8 12.8h460.8a12.8 12.8 0 0 0 12.8-12.8V460.8a38.4 38.4 0 1 1 76.8 0v358.4A89.6 89.6 0 0 1 716.8 908.8H256A89.6 89.6 0 0 1 166.4 819.2V460.8z"
      fill="#888888"
    />
    <path
      d="M371.2 460.8a38.4 38.4 0 0 1 76.8 0v256a38.4 38.4 0 1 1-76.8 0V460.8zM524.8 460.8a38.4 38.4 0 0 1 76.8 0v256a38.4 38.4 0 1 1-76.8 0V460.8z"
      fill="#888888"
    />
  </svg>
);
邓晓峰's avatar
邓晓峰 committed
57
const HistoryHrefIcon = props => <Icon component={HistorySvg} {...props} />;
邓晓峰's avatar
邓晓峰 committed
58
const DelIcon = props => <Icon component={DelHistory} {...props} />;
邓晓峰's avatar
邓晓峰 committed
59
const unique = (arr, val) => {
邓晓峰's avatar
邓晓峰 committed
60 61 62
  const res = new Map();
  return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1));
};
邓晓峰's avatar
邓晓峰 committed
63
const SearchPanel = props => {
邓晓峰's avatar
邓晓峰 committed
64
  const [visible, setVisible] = useState(false);
65 66
  // const [disabled, setDisabled] = useState(false);
  // const [axis, setAxis] = useState('both');
67 68 69 70
  // const [currentIndex, setCurrentIndex] = useState(-1);
  const [eventCounts, setEventCounts] = useState(() => ['resultConsole', -1]);
  const featureRef = useRef(null);
  const consoleRef = useRef(null);
邓晓峰's avatar
邓晓峰 committed
71 72 73 74 75 76
  let recentKeywords = props.recentKeywords.toJS
    ? props.recentKeywords.toJS()
    : props.recentKeywords;
  recentKeywords = Array.isArray(recentKeywords)
    ? recentKeywords
    : [recentKeywords];
邓晓峰's avatar
邓晓峰 committed
77

邓晓峰's avatar
邓晓峰 committed
78 79 80 81 82 83
  let recentVisited = props.recentVisited.toJS
    ? props.recentVisited.toJS()
    : props.recentVisited;
  recentVisited = Array.isArray(recentVisited)
    ? recentVisited
    : [recentVisited];
邓晓峰's avatar
邓晓峰 committed
84

邓晓峰's avatar
邓晓峰 committed
85 86 87 88 89 90
  let recentProducts = props.recentProducts.toJS
    ? props.recentProducts.toJS()
    : props.recentProducts;
  recentProducts = Array.isArray(recentProducts)
    ? recentProducts
    : [recentProducts];
邓晓峰's avatar
邓晓峰 committed
91

邓晓峰's avatar
邓晓峰 committed
92 93 94 95 96 97 98 99 100 101 102
  const history = useHistory();
  // eslint-disable-next-line consistent-return
  function getParents(data, key) {
    // eslint-disable-next-line guard-for-in,no-restricted-syntax
    for (const i in data) {
      if (data[i].key === key) {
        return [];
      }
      if (data[i].routes) {
        const ro = getParents(data[i].routes, key);
        if (ro !== undefined) return ro.concat(data[i]);
邓晓峰's avatar
邓晓峰 committed
103
      }
邓晓峰's avatar
邓晓峰 committed
104
    }
邓晓峰's avatar
邓晓峰 committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
  }
  const goFeature = (path, rect, value) => {
    // eslint-disable-next-line no-param-reassign
    value = value || props.value;
    const findKeywordIndex =
      recentKeywords.length > 0
        ? recentKeywords.findIndex(item => item.data === value)
        : -1;
    const findRecentVisitedIndex =
      recentVisited.length > 0
        ? recentVisited.findIndex(item => item.data.name === rect.name)
        : -1;
    if (findKeywordIndex === -1)
      props.updateRecentKeywords && props.updateRecentKeywords(value);
    if (findRecentVisitedIndex === -1)
      props.updateRecentVisited && props.updateRecentVisited(rect);
    let parents = getParents(props.menu, rect.key);
    parents = parents[parents.length - 1];
    const findIndex = props.menu.findIndex(k => k.name === parents.name);
    props.updateCurrentIndex && props.updateCurrentIndex(findIndex);
    props.updateOpenKeys && props.updateOpenKeys([parents.key]);
    props.updateComplexConfig && props.updateComplexConfig({});
    props.updateComplexPathName && props.updateComplexPathName(null);
邓晓峰's avatar
邓晓峰 committed
128

邓晓峰's avatar
邓晓峰 committed
129 130 131 132 133 134 135
    if (rect && rect.routes && rect.routes.length > 0) {
      props.updateComplexConfig && props.updateComplexConfig(rect);
      props.updateComplexPathName &&
        props.updateComplexPathName(rect.routes[0].path);
      history.push(rect.routes[0].path);
    } else {
      history.push(path);
邓晓峰's avatar
邓晓峰 committed
136
    }
邓晓峰's avatar
邓晓峰 committed
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
    props.updateSelectedKeys && props.updateSelectedKeys(rect.key);
    props.updatePathname && props.updatePathname(rect.key);
  };
  const goProduct = (event, item) => {
    /* eslint-disable */
    event.persist && event.persist();
    event && event.stopPropagation();
    const findRecentIndex =
      recentProducts.length > 0
        ? recentProducts.findIndex(item => item.data.name === item.name)
        : -1;
    if (findRecentIndex === -1)
      props.updateRecentProduct && props.updateRecentProduct(item);
    const findIndex = props.menu.findIndex(k => k.name === item.name);
    props.updateCurrentIndex && props.updateCurrentIndex(findIndex);
  };
邓晓峰's avatar
邓晓峰 committed
153

邓晓峰's avatar
邓晓峰 committed
154 155 156
  const handlerMore = event => {
    event.persist && event.persist();
    event && event.nativeEvent.stopImmediatePropagation();
邓晓峰's avatar
邓晓峰 committed
157
    setVisible(!visible);
邓晓峰's avatar
邓晓峰 committed
158 159
    props.onClose && props.onClose(event);
  };
邓晓峰's avatar
邓晓峰 committed
160

邓晓峰's avatar
邓晓峰 committed
161 162 163 164 165 166 167 168
  const handlerDelHistory = () => {
    props.clearRecentProduct && props.clearRecentProduct();
  };

  const matchValue = (str, value) => {
    const match = PinyinMatch.match(str, value || props.value);
    return match;
  };
邓晓峰's avatar
邓晓峰 committed
169

邓晓峰's avatar
邓晓峰 committed
170 171 172 173 174 175
  const transformRecentProduct = () =>
    unique(recentProducts.map(item => item.data), 'name');

  const transformWillSearch = () => {
    if (props.willSearch.length === 0) {
      return null;
邓晓峰's avatar
邓晓峰 committed
176
    }
邓晓峰's avatar
邓晓峰 committed
177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
    return (
      <div className={styes.item}>
        <div className={styes.title}>你是不是想搜:</div>
        <div className={styes.label}>
          {(unique(props.willSearch, 'name') || []).map(item => (
            // eslint-disable-next-line react/button-has-type
            <button
              className={styes.btn}
              key={item.name}
              title={item.title}
              onClick={() => props.onWillSearch(item.name)}
            >
              {item.name}
            </button>
          ))}
        </div>
      </div>
    );
  };
邓晓峰's avatar
邓晓峰 committed
196

邓晓峰's avatar
邓晓峰 committed
197 198 199
  const transformConsole = () => {
    if (props.console.length === 0) {
      return <div className={styes.empty}>没有找到相关内容</div>;
邓晓峰's avatar
邓晓峰 committed
200
    }
邓晓峰's avatar
邓晓峰 committed
201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
    return (props.console || []).map((item, index) => {
      const match = matchValue(item.name);
      const name = match ? (
        <span>
          {item.name.substring(0, match[0])}
          <em>{item.name.substring(match[0], match[1] + 1)}</em>
          {item.name.substring(match[1] + 1)}
        </span>
      ) : (
        item.name
      );
      return (
        <a
          className={styes.featureItem}
          key={item.name}
          onClick={event => goProduct(event, item)}
217 218
          tabIndex="1"
          onKeyDown={event => event.key === 'Enter' && event.keyCode === 13 && goProduct(event, item)}
邓晓峰's avatar
邓晓峰 committed
219 220 221 222 223 224 225 226 227
        >
          <span className={styes.text}>{name}</span>
          <span className={styes.featIn}>
            <RightCircleOutlined />
          </span>
        </a>
      );
    });
  };
邓晓峰's avatar
邓晓峰 committed
228

邓晓峰's avatar
邓晓峰 committed
229 230 231
  const transformFeature = () => {
    if (props.willSearch.length === 0) {
      return <div className={styes.empty}>没有找到相关内容</div>;
邓晓峰's avatar
邓晓峰 committed
232
    }
邓晓峰's avatar
邓晓峰 committed
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
    return (unique(props.willSearch.slice(0, 20), 'path') || []).map(
      (item, index) => {
        const match = matchValue(item.name);
        const name = match ? (
          <span>
            {item.name.substring(0, match[0])}
            <em>{item.name.substring(match[0], match[1] + 1)}</em>
            {item.name.substring(match[1] + 1)}
          </span>
        ) : (
          item.name
        );
        return (
          <a
            className={styes.featureItem}
            key={index}
            onClick={() => goFeature(item.path, item)}
250 251
            tabIndex="1"
            onKeyDown={event => event.key === 'Enter' && event.keyCode === 13 && goFeature(item.path, item)}
邓晓峰's avatar
邓晓峰 committed
252 253 254 255 256 257 258 259 260 261 262
          >
            <span className={styes.text}>
              {name}
              <HistoryHrefIcon className={styes.href} />
            </span>
            <span className={styes.featIn}>
              {item.parent && item.parent.name}
            </span>
          </a>
        );
      },
263
     );
邓晓峰's avatar
邓晓峰 committed
264
  };
265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388
  useEffect(() => {
    setEventCounts(['resultConsole', -1])
  }, [props.value]);

  const RESULT_KEYS = ['resultConsole', 'resultFeature'];
  const getFistKey = (response, key, type) => {
    const result = RESULT_KEYS.filter(item => {
      const ret = response[item];
      return !!(ret && 'success' === ret.type && ret.response.items.length > 0);
    });
    if(0 === result.length) {
      return null;
    };
    if(!key) {
      return "down" === type ? result[0]: type === "left" ? result[0]: type === "right" ? result[result.length - 1]:result[result.length - 1];
    }
    const index = result.indexOf(key);
    return index < 0 ? null: 'down' === type ? index + 1 < result.length ? result[index + 1]: null: index - 1 >= 0 ? result[index - 1]: null;

  }
  const transfromEventHander = useCallback((children, data, type, handlerKey) => {
    if (children === 'none') {
      return
    }

    if (null === children) {
      const key = getFistKey(data, null, handlerKey ? handlerKey: type);
      if (!key) {
        return null;
      }
      children = key === 'resultConsole' ? consoleRef.current.children: featureRef.current.children
      const ret = data[key];
      const currentIndex = 'up' === type ? ret.response.items.length - 1 : 0
      return 'success' !== ret.type ? null : (
        setEventCounts([key, currentIndex]),
        'up' === type ? (props.onNavUp && (props.onNavUp(), children[currentIndex].focus())): props.onNavDown && (props.onNavDown(), children[currentIndex].focus())
      );
    }

    let eventsKey = eventCounts[0];
    let eventsIndex = eventCounts[1];
    let resultData = data[eventsKey];
    if(resultData.response.items.length === 0) {
      const key = getFistKey(data, null, type);
      eventsKey = key;
      eventsIndex= -1;
      resultData = data[key];
      children = key === 'resultConsole' ? consoleRef.current.children: featureRef.current.children
    }
    if ('success' !== resultData.type) {
      return null;
    }
    const index= "up" === type ? eventsIndex - 1: eventsIndex + 1;
    if(index >=0 && index < resultData.response.items.length) {
      return setEventCounts([eventsKey, index]), 'up' === type ? (props.onNavUp && (props.onNavUp(), children[index].focus())): props.onNavDown && (props.onNavDown(), children[index].focus())
    }
    const getKey = getFistKey(data, eventsKey, type);
    if(!getKey) {
      return null;
    }
    const result = data[getKey];
    if('success' !== result.type) {
      return null;
    }
    if('up' === type) {
      children = getKey === 'resultConsole' ? consoleRef.current.children: featureRef.current.children
      return setEventCounts([getKey, result.response.items.length - 1]), props.onNavUp && ( props.onNavUp(), children[result.response.items.length - 1].focus())
    }
    return setEventCounts([getKey, 0]), (props.onNavDown && (props.onNavDown(), featureRef.current.children[0].focus()))
  }, [eventCounts, props.console, props.willSearch])

  const transfomResponse = (data) => {
    return {
      query: props.value,
      response: {
        items: data,
        total: data.length
      },
      type: 'success'
    }
  }
  let children = null;
  const eventHander = useCallback((event) => {
    const transformData = {
      resultConsole: transfomResponse(props.console),
      resultFeature: transfomResponse( unique(props.willSearch.slice(0, 20), 'path')),
    };

    switch (event.key) {
      case "Escape":
        props.onEsc && ( event.preventDefault(), props.onEsc())
        break;
      case "ArrowRight":
        event.preventDefault();
        children = featureRef.current.children;
        transfromEventHander(null, transformData, 'down', 'right')
        break;
      case "ArrowDown":
        const type = eventCounts[0]
        children = type === 'resultFeature'  ? featureRef.current.children: consoleRef.current.children;
        event.preventDefault();
        transfromEventHander(children, transformData, 'down')
        break;
      case "ArrowLeft":
        event.preventDefault();
        // const leftChildren = consoleRef.current.children;
        setEventCounts(['resultConsole', -1])
        transfromEventHander(null, transformData, 'up', 'left')
        break;
      case "ArrowUp":
        children = eventCounts[0] === 'resultFeature'  ? featureRef.current.children: consoleRef.current.children;
        event.preventDefault();
        transfromEventHander(children, transformData, 'up')
        break
    }
  }, [eventCounts, props.console, props.willSearch]);

  useEffect(() => {
    props.test && document.addEventListener('keydown', eventHander);
    return function() {
      return document.removeEventListener('keydown', eventHander)
    }
  }, [props.test, eventHander, eventCounts])

邓晓峰's avatar
邓晓峰 committed
389 390 391 392 393 394 395 396 397

  return (
    <div
      className={classNames(styes.searchPanel, props.className)}
      style={props.style}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
      onFocus={props.onFocusChange}
    >
398
      <div className={styes.container} ref={props.wrapperRef}>
邓晓峰's avatar
邓晓峰 committed
399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422
        {props.value === '' && (
          <div className={styes.body} style={{ display: 'flex' }}>
            <div className={styes.flexItem}>
              {recentKeywords.length > 0 ? (
                <>
                  <h5 className={styes.historyTitle}>
                    最近搜索
                    <DelIcon onClick={handlerDelHistory} />
                  </h5>
                  <div className={styes.label}>
                    {(unique(recentKeywords, 'data') || []).map(item => (
                      // eslint-disable-next-line react/button-has-type
                      <button
                        className={styes.btn}
                        title={item.data}
                        key={item.data}
                        onClick={() => props.onWillSearch(item.data)}
                      >
                        {item.data}
                      </button>
                    ))}
                  </div>
                </>
              ) : null}
邓晓峰's avatar
邓晓峰 committed
423

邓晓峰's avatar
邓晓峰 committed
424 425 426 427 428 429 430 431 432 433 434 435 436 437 438
              <h5
                className={styes.historyTitle}
                style={{
                  margin: recentKeywords.length > 0 ? '16px 0px 0px' : '0',
                }}
              >
                最近访问的产品
              </h5>
              {recentProducts.length > 0 ? (
                (transformRecentProduct() || []).map(item => (
                  <a
                    title={item.name}
                    className={styes.historyHref}
                    key={item.name}
                    onClick={event => goProduct(event, item)}
439
                    onKeyDown={(event => console.log(event))}
邓晓峰's avatar
邓晓峰 committed
440 441 442 443
                  >
                    <span className={styes.title}>{item.name}</span>
                    <span className={styes.featIn}>
                      <RightCircleOutlined />
邓晓峰's avatar
邓晓峰 committed
444
                    </span>
邓晓峰's avatar
邓晓峰 committed
445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462
                  </a>
                ))
              ) : (
                <div className={styes.empty}>无最近访问的产品</div>
              )}
            </div>
            <div className={styes.flexItem}>
              <div className={styes.title}>关注更多信息</div>
              <div className={styes.label}>
                <div className={styes.empty}>没有找到相关内容</div>
              </div>
            </div>
          </div>
        )}
        {props.value !== '' && (
          <>
            <div className={styes.body}>
              {transformWillSearch()}
邓晓峰's avatar
邓晓峰 committed
463

邓晓峰's avatar
邓晓峰 committed
464 465 466 467 468
              <div className={styes.features}>
                <div className={styes.flex}>
                  <h5 className={styes.title}>
                    产品入口({props.console.length})
                  </h5>
469
                  <div className={styes.feature} ref={consoleRef}>{transformConsole()}</div>
邓晓峰's avatar
邓晓峰 committed
470 471 472
                </div>
                <div className={styes.flex}>
                  <h5 className={styes.title}>快捷操作</h5>
473
                  <div className={styes.feature} ref={featureRef}>{transformFeature()}</div>
邓晓峰's avatar
邓晓峰 committed
474 475
                </div>
              </div>
邓晓峰's avatar
邓晓峰 committed
476
            </div>
邓晓峰's avatar
邓晓峰 committed
477 478 479 480 481 482 483 484
            {props.willSearch.length > 0 || props.console.length > 0 ? (
              <div className={styes.footer}>
                <span onClick={handlerMore}>查看全部结果</span>
              </div>
            ) : null}
          </>
        )}
      </div>
邓晓峰's avatar
邓晓峰 committed
485 486 487 488 489 490 491 492
      <Modal
        visible={visible}
        triggerElRef={props.target}
        {...props}
        matchValue={matchValue}
        goFeature={goFeature}
        goProduct={goProduct}
      />
邓晓峰's avatar
邓晓峰 committed
493 494 495
    </div>
  );
};
邓晓峰's avatar
邓晓峰 committed
496

邓晓峰's avatar
邓晓峰 committed
497
export default SearchPanel;