{"version":3,"sources":["../../../src/Menu/Menu.tsx"],"names":[".i1o6twv8",".moxhg7q",".m1duopuh"],"mappings":"AAwBMA;AAuDAC;AAaAC","file":"../../../src/Menu/Menu.tsx","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useCallback, createContext, useContext } from \"react\";\nimport { css, cx } from \"linaria\";\nimport { lighten } from \"polished\";\nimport { isElement } from \"react-is\";\nimport { colors, createTransitions } from \"../utils\";\nimport Button from \"../Button/Button\";\n\ntype MenuContextType = {\n  activeKeys: string[];\n  openKeys: string[];\n};\n\nconst MenuContext = createContext<MenuContextType>({\n  activeKeys: [],\n  openKeys: [],\n});\n\nexport type MenuProps = {\n  vertical?: boolean;\n  activeKeys?: string[];\n  openKeys?: string[];\n};\n\nconst InternalMenuStyles = css`\n  margin-left: 18px;\n  & & {\n    margin-left: 0;\n  }\n`;\n\ntype InternalMenuProps = MenuProps & {\n  indent?: number;\n};\n\nconst InternalMenu: React.FC<InternalMenuProps> = ({\n  children,\n  indent = 0,\n}) => {\n  const renderChildren = useCallback(() => {\n    return React.Children.map(children, (child) => {\n      if (!child) {\n        return null;\n      }\n\n      if (!isElement(child)) {\n        return child;\n      }\n\n      if (typeof child === \"string\") {\n        return child;\n      }\n\n      const childProps = child.props;\n      // https://github.com/ant-design/ant-design/issues/11517#issuecomment-477403055\n      if (!childProps || typeof child.type === \"string\") {\n        return child;\n      }\n\n      const newProps = {\n        indent: indent + 1,\n      };\n\n      return React.cloneElement(child, newProps);\n    });\n  }, [children]);\n  return (\n    <ul className={cx(InternalMenuStyles)} style={{ paddingLeft: indent * 18 }}>\n      {renderChildren()}\n    </ul>\n  );\n};\n\nexport type MenuItemProps = {\n  title?: string;\n  id?: string;\n  indent?: number;\n};\n\nconst MenuItemStyles = css`\n  height: 40px;\n  line-height: 40px;\n  padding: 0 18px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-top: 4px;\n  border-top-left-radius: 32px;\n  border-bottom-left-radius: 32px;\n  background-color: #fff;\n  transition: ${createTransitions(\"background-color\")};\n`;\n\nconst MenuItemActive = css`\n  background-color: ${lighten(0.1, colors[\"color-primary\"])};\n  & a button {\n    color: ${colors[\"color-basic-300\"]};\n  }\n`;\n\nconst MenuItem: React.FC<MenuItemProps> = ({ children, title, id }) => {\n  const { activeKeys } = useContext(MenuContext);\n  const renderChildren = useCallback(() => {\n    if (children) {\n      return children;\n    }\n\n    return <div>{title}</div>;\n  }, [children, title]);\n  return (\n    <li\n      className={cx(\n        MenuItemStyles,\n        id && activeKeys.includes(id) && MenuItemActive\n      )}>\n      {renderChildren()}\n    </li>\n  );\n};\n\nconst SubMenu: React.FC<MenuItemProps> = ({ title, indent = 0, ...props }) => {\n  const renderTitle = useCallback(() => {\n    if (typeof title !== \"string\") {\n      return title;\n    }\n\n    return <Button label={title} type={\"link\"} size={\"large\"} />;\n  }, [title]);\n  return (\n    <li>\n      <div style={{ paddingLeft: (indent * 24) / 2, marginBottom: 8 }}>\n        {renderTitle()}\n      </div>\n      <InternalMenu {...props} indent={indent} />\n    </li>\n  );\n};\n\nconst Menu: React.FC<MenuProps> & {\n  Item: typeof MenuItem;\n  SubMenu: typeof SubMenu;\n} = ({ activeKeys = [], openKeys = [], ...props }) => {\n  return (\n    <MenuContext.Provider value={{ activeKeys, openKeys }}>\n      <InternalMenu {...props} indent={0} />\n    </MenuContext.Provider>\n  );\n};\n\nMenu.Item = MenuItem;\nMenu.SubMenu = SubMenu;\n\nexport default Menu;\n"]}