ant-design-blazor/components/cascader/Cascader.razor

@namespace AntDesign
@inherits AntInputComponentBase<string>

<div style="@Style">
    <span class="ant-cascader-picker @_pickerSizeClass" tabindex="1" @onclick="InputOnToggle" @onblur="CascaderOnBlur" @onmouseover="InputOnMouseOver" @onmouseout="InputOnMouseOut">
        <span class="ant-cascader-picker-label"></span>
        <input autocomplete="off" tabindex="-1" placeholder="@PlaceHolder" class="ant-input ant-cascader-input @_inputSizeClass" readonly="@Readonly" type="text" value="@_displayText">
        @if (Value != null && Value.Any() || !ShowClearIcon)
        {
            <span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow @(ToggleState ? "ant-cascader-picker-arrow-expand" : string.Empty)">
                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                </svg>
            </span>
        }
        else
        {
            <span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear" @onclick="ClearSelected" @onclick:stopPropagation="true">
                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
                </svg>
            </span>
        }
    </span>

    @if (ToggleState)
    {
        <div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft" tabindex="-1" @onblur="CascaderOnBlur">
            <div @onmouseover="NodesOnMouseOver" @onmouseout="NodesOnMouseOut">
                <ul class="ant-cascader-menu">
                    @foreach (CascaderNode nd in _nodelist)
                    {
                        bool isActive = _renderNodes.Where(n => n.Label == nd.Label).Any();
                        string activeClass = isActive ? "ant-cascader-menu-item-active" : string.Empty;

                        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand @activeClass @(nd.Disabled ? "ant-cascader-menu-item-disabled" : string.Empty)" title="@nd.Label" role="menuitem"
                            @onclick="@(e => NodeOnClick(nd))" @onmouseover="@(e => NodeOnMouseOver(nd))">
                            @nd.Label
                            @if (nd.HasChildren)
                            {
                                <span class="ant-cascader-menu-item-expand-icon">
                                    <span role="img" aria-label="right" class="anticon anticon-right">
                                        <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                        </svg>
                                    </span>
                                </span>
                            }
                        </li>
                    }
                </ul>
                @foreach (CascaderNode node in _renderNodes)
                {
                    if (node.HasChildren)
                    {
                        <ul class="ant-cascader-menu">
                            @foreach (CascaderNode m in node.Children)
                            {
                                bool isActive = _renderNodes.Where(n => n.Label == m.Label).Any();
                                string activeClass = isActive ? "ant-cascader-menu-item-active" : string.Empty;

                                <li class="ant-cascader-menu-item ant-cascader-menu-item-expand @activeClass @(m.Disabled ? "ant-cascader-menu-item-disabled" : string.Empty)" title="@m.Label" role="menuitem"
                                    @onclick="@(e => NodeOnClick(m))" @onmouseover="@(e => NodeOnMouseOver(m))">
                                    @m.Label
                                    @if (m.HasChildren)
                                    {
                                        <span class="ant-cascader-menu-item-expand-icon">
                                            <span role="img" aria-label="right" class="anticon anticon-right">
                                                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                                    <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                                </svg>
                                            </span>
                                        </span>
                                    }
                                </li>
                            }
                        </ul>
                    }
                }
            </div>
        </div>
    }
</div>