@ant-design/icons#createFromIconfontCN JavaScript Examples

Icon.createFromIconfontCN = createFromIconfontCN;

Icon= createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1773709_52px07fzrwt.js',
})

IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2316101_26mu1eoa684h.js',
})

IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js',
})

Icon.createFromIconfontCN = createFromIconfontCN;

IconFont = createFromIconfontCN({
  scriptUrl: defaultSettings.iconfontUrl
})

IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1873282_onfaq4da0nb.js',
})

LTIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1947291_lkykr5j0jn.js', // 在 iconfont.cn 上生成
})

IconFont = createFromIconfontCN({
  scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
})

BaseMenu = function BaseMenu(props) {
  var theme = props.theme,
      mode = props.mode,
      _props$location = props.location,
      location = _props$location === void 0 ? {
    pathname: '/'
  } : _props$location,
      className = props.className,
      handleOpenChange = props.handleOpenChange,
      style = props.style,
      menuData = props.menuData,
      _props$menu = props.menu,
      menu = _props$menu === void 0 ? {
    locale: true
  } : _props$menu,
      iconfontUrl = props.iconfontUrl,
      splitMenus = props.splitMenus,
      propsSelectedKeys = props.selectedKeys,
      onSelect = props.onSelect,
      propsOpenKeys = props.openKeys;
  var openKeysRef = useRef([]); // 用于减少 defaultOpenKeys 计算的组件

  var defaultOpenKeysRef = useRef([]);

  var _useState = useState(function () {
    return menuData;
  }),
      _useState2 = _slicedToArray(_useState, 2),
      postMenuData = _useState2[0],
      setPostMenuData = _useState2[1];

  var postMenuDataRef = useRef(postMenuData);
  var pathname = location.pathname;

  var _MenuCounter$useConta = MenuCounter.useContainer(),
      flatMenuKeys = _MenuCounter$useConta.flatMenuKeys;

  var _useState3 = useState(menu.defaultOpenAll),
      _useState4 = _slicedToArray(_useState3, 2),
      defaultOpenAll = _useState4[0],
      setDefaultOpenAll = _useState4[1];

  var _useMergeValue = useMergeValue(function () {
    if (menu.defaultOpenAll) {
      return getOpenKeysFromMenuData(menuData) || [];
    }

    if (propsOpenKeys === false) {
      return false;
    }

    return [];
  }, {
    value: propsOpenKeys === false ? undefined : propsOpenKeys,
    onChange: handleOpenChange
  }),
      _useMergeValue2 = _slicedToArray(_useMergeValue, 2),
      openKeys = _useMergeValue2[0],
      setOpenKeys = _useMergeValue2[1];

  var _useMergeValue3 = useMergeValue([], {
    value: propsSelectedKeys,
    onChange: onSelect ? function (keys) {
      if (onSelect && keys) {
        onSelect(keys);
      }
    } : undefined
  }),
      _useMergeValue4 = _slicedToArray(_useMergeValue3, 2),
      selectedKeys = _useMergeValue4[0],
      setSelectedKeys = _useMergeValue4[1];

  useEffect(function () {
    if (menu.defaultOpenAll || propsOpenKeys === false || flatMenuKeys.length) {
      return;
    }

    var keys = getSelectedMenuKeys(location.pathname || '/', postMenuDataRef.current || []);

    if (keys) {
      openKeysRef.current = keys;
      setOpenKeys(keys);
      setSelectedKeys(keys);
    }
  }, [flatMenuKeys.join('-')]);
  useEffect(function () {
    // reset IconFont
    if (iconfontUrl) {
      IconFont = createFromIconfontCN({
        scriptUrl: iconfontUrl
      });
    }
  }, [iconfontUrl]);
  useEffect(function () {
    // if pathname can't match, use the nearest parent's key
    var keys = getSelectedMenuKeys(location.pathname || '/', postMenuDataRef.current || []);
    var animationFrameId = requestAnimationFrame(function () {
      if (keys.join('-') !== (selectedKeys || []).join('-')) {
        setSelectedKeys(keys);
      }

      if (!defaultOpenAll && propsOpenKeys !== false && keys.join('-') !== (openKeysRef.current || []).join('-')) {
        setOpenKeys(keys);
        openKeysRef.current = keys;
      } else if (flatMenuKeys.length > 0) {
        setDefaultOpenAll(false);
      }
    });
    return function () {
      return window.cancelAnimationFrame && window.cancelAnimationFrame(animationFrameId);
    };
  }, [pathname]);
  var openKeysProps = useMemo(function () {
    return getOpenKeysProps(openKeys, props);
  }, [openKeys, props.layout, props.collapsed]);
  var cls = classNames(className, {
    'top-nav-menu': mode === 'horizontal'
  });

  var _useState5 = useState(function () {
    return new MenuUtil(props);
  }),
      _useState6 = _slicedToArray(_useState5, 1),
      menuUtils = _useState6[0];
  /**
   * 这里需要用 menuData
   * 为了计算 splitMenus 需要用最全的 menuData
   */


  useEffect(function () {
    var _a;

    if (splitMenus && openKeys) {
      var keys = getSelectedMenuKeys(location.pathname || '/', menuData || []);

      var _keys = _slicedToArray(keys, 1),
          key = _keys[0];

      if (key) {
        var postData = ((_a = menuData === null || menuData === void 0 ? void 0 : menuData.find(function (item) {
          return item.key === key;
        })) === null || _a === void 0 ? void 0 : _a.children) || [];
        setPostMenuData(postData);
        return;
      }
    }

    setPostMenuData(menuData);
  }, [pathname, splitMenus, flatMenuKeys.join('-')]); // 这次 openKeys === false 的时候的情况，这种情况下帮用户选中一次
  // 第二次以后不再关系，所以用了 defaultOpenKeys

  if (props.openKeys === false && !props.handleOpenChange) {
    var keys = getSelectedMenuKeys(location.pathname || '/', menuData || []);
    defaultOpenKeysRef.current = keys;

    if (keys.length < 1) {
      return null;
    }
  }

  var finallyData = props.postMenuData ? props.postMenuData(postMenuData) : postMenuData;
  /**
   * 记下最新的 menuData
   */

  postMenuDataRef.current = finallyData;
  return React.createElement(_Menu, Object.assign({}, openKeysProps, {
    key: "Menu",
    mode: mode,
    defaultOpenKeys: defaultOpenKeysRef.current,
    theme: theme,
    inlineIndent: 16,
    selectedKeys: selectedKeys,
    style: style,
    className: cls,
    onOpenChange: function onOpenChange(keys) {
      return setOpenKeys(keys);
    }
  }, props.menuProps), menuUtils.getNavMenuItems(finallyData, false));
}