Добавление иконки префикса для Antd Cascader

Question

Я работаю с antd cascader и хочу добавить значок префикса в каскад. Хотя в каскадере есть положение для суффикса, я не смог найти способ добавить значок префикса.

import { Cascader } from 'antd';

const options = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                ],
            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];

function onChange(value) {
    console.log(value);
}

ReactDOM.render(
    <Cascader options={options} onChange={onChange} placeholder="Please select" />,
    mountNode,
);

В настоящее время каскад выглядит следующим образом:

Я хочу, чтобы он выглядел примерно так:

, где глобус является значком префикса. Как я могу добавить значок префикса?

Answer 1

Вы можете создать собственный каскад с префиксами / суффиксами по вашему выбору, если вы используете div-оболочку с позиционированием relative и имеете дочерний элемент <Icon/> с позиционированием absolute и z-index выше, чем Cascader/> (к go поверх него).

Проверьте пример здесь: https://codesandbox.io/s/antd-cascader-ynqpk

const CustomCascader = ({ options, width = 300 }) => {
  const [open, setOpen] = useState(false);

  const onChange = value => {
    console.log(value);
  };

  const filter = (inputValue, path) => {
    return path.some(
      option =>
        option.display_name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
    );
  };

  const onPopupVisibleChange = visible => {
    setOpen(visible);
  };

  return (
    <div style={{ position: "relative", width }}>
      <Icon
        type={open ? "up" : "down"}
        style={{ position: "absolute", right: 8, top: 10, zIndex: 5 }}
      />
      <Icon
        type="global"
        style={{ position: "absolute", left: 5, top: 10, zIndex: 5 }}
      />
      <Cascader
        style={{ paddingLeft: 0, width }}
        suffixIcon={<div />}
        expandTrigger="hover"
        fieldNames={{ label: "name", value: "code", children: "items" }}
        options={options}
        onChange={onChange}
        showSearch={{ filter }}
        placeholder="Please select"
        onPopupVisibleChange={onPopupVisibleChange}
        popupVisible={open}
      />
    </div>
  );
};

ReactDOM.render(
  <div>
    <CustomCascader options={options} />
    <CustomCascader options={options} />
    <CustomCascader options={options} />
  </div>,
  document.getElementById("container")
);