@flatbiz/antd/dist/search-menu-CoeYR0X4.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { classNames } from '@dimjs/utils/class-names/class-names';
import { a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { useState, useMemo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { valueIsEqual } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.js';
import { I as InputSearchWrapper } from './input-search-wrapper-Fw29CABR.js';
import { Empty } from 'antd';
import { R as RollLocationCenter } from './center-DgQUmnwe.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

/**
 * 搜索列表
 * @param props
 * @returns search menu list view
 */
var ListView = function ListView(props) {
  var value = props.value,
    dataList = props.dataList,
    onChange = props.onChange,
    style = props.style,
    emptyView = props.emptyView;
  // 数据判空提示
  if (!(dataList !== null && dataList !== void 0 && dataList.length)) {
    return emptyView ? /*#__PURE__*/jsx(Fragment, {
      children: emptyView
    }) : /*#__PURE__*/jsx(Empty, {
      style: {
        marginTop: '40px'
      },
      description: "\u6682\u65E0\u6570\u636E"
    });
  }
  return /*#__PURE__*/jsx("ul", {
    className: "v-search-menu-list-view",
    style: style,
    children: /*#__PURE__*/jsx(RollLocationCenter, {
      activeKey: props.value,
      renderList: dataList.map(function (item) {
        return {
          activeKey: item.key,
          render: /*#__PURE__*/jsx("li", {
            className: classNames('v-search-menu-list-view-item', {
              'v-search-menu-list-view-item-active': value == item.key
            }),
            onClick: onChange === null || onChange === void 0 ? void 0 : onChange.bind(null, item.key, item),
            children: item.label
          }, item.key)
        };
      })
    })
  });
};

function SearchMenu(props) {
  var value = props.value,
    onChange = props.onChange,
    dataSource = props.dataSource,
    searchKeyList = props.searchKeyList,
    wrapStyle = props.wrapStyle,
    style = props.style,
    placeholder = props.placeholder,
    fieldNames = props.fieldNames,
    renderItem = props.renderItem,
    lazySearch = props.lazySearch,
    className = props.className,
    searchStyle = props.searchStyle,
    emptyView = props.emptyView,
    showSearch = props.showSearch,
    searchAutoFocus = props.searchAutoFocus,
    size = props.size;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    listFilter = _useState2[0],
    setListFilter = _useState2[1];

  /** 格式化对象 */
  var mergeFormatOption = useMemo(function () {
    return _objectSpread2({
      label: 'label',
      key: 'key'
    }, fieldNames);
  }, [fieldNames]);

  /** 可搜索的字段值 */
  var targetSearchKeyList = searchKeyList !== null && searchKeyList !== void 0 && searchKeyList.length ? searchKeyList : [mergeFormatOption.label];

  /** 生成菜单列表 */
  var listViewData = useMemo(function () {
    var label = mergeFormatOption.label,
      key = mergeFormatOption.key;
    return listFilter === null || listFilter === void 0 ? void 0 : listFilter.map(function (item) {
      return _objectSpread2(_objectSpread2({}, item), {}, {
        label: renderItem ? renderItem(item) : item === null || item === void 0 ? void 0 : item[label],
        key: item === null || item === void 0 ? void 0 : item[key]
      });
    });
  }, [listFilter, mergeFormatOption, renderItem]);

  /**
   * 数据格式化
   */
  fbaHooks.useEffectCustom(function () {
    handleSearch('');
  }, [dataSource]);

  /** 搜索 */
  var handleSearch = function handleSearch(searchWord) {
    if (!searchWord) {
      // 还原列表
      setListFilter(dataSource);
      return;
    }
    // 根据搜索次过滤
    var resList = dataSource.filter(function (item) {
      return !!(targetSearchKeyList !== null && targetSearchKeyList !== void 0 && targetSearchKeyList.find(function (key) {
        var _item$key;
        return (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.includes(searchWord);
      }));
    });
    setListFilter(resList);
  };

  /**
   * 搜索词变换
   * @param e
   */
  var handleWordChange = function handleWordChange(e) {
    handleSearch(e.target.value);
  };

  /**
   * 点击条目
   */
  var onClick = useMemoizedFn(function (key) {
    var targetItem = dataSource.find(function (item) {
      return valueIsEqual(key, item[mergeFormatOption.key]);
    });
    onChange === null || onChange === void 0 || onChange(key, targetItem);
  });
  var cname = classNames(className, 'v-search-menu', {
    'v-search-menu-small': size === 'small'
  });
  return /*#__PURE__*/jsxs("div", {
    style: wrapStyle,
    className: cname,
    children: [showSearch !== false ? /*#__PURE__*/jsxs("div", {
      className: "v-search-menu-search-area",
      style: searchStyle,
      children: [/*#__PURE__*/jsx(InputSearchWrapper, {
        onSearch: lazySearch ? handleSearch : undefined,
        onChange: !lazySearch ? handleWordChange : undefined,
        placeholder: placeholder || '请输入搜索关键词',
        allowClear: true,
        autoFocus: searchAutoFocus
      }), !!props.searchExtraElement && /*#__PURE__*/jsx("div", {
        className: "v-search-menu-search-extra",
        children: props.searchExtraElement
      })]
    }) : null, /*#__PURE__*/jsx(ListView, {
      style: style,
      value: value,
      dataList: listViewData,
      onChange: onClick,
      emptyView: emptyView
    })]
  });
}

export { SearchMenu as S };
//# sourceMappingURL=search-menu-CoeYR0X4.js.map