tiny-ui 0.0.95 → 1.0.0

package/components/menu/demo/inline.md

@@ -1,37 +0,0 @@
-<demo>
-
-### Inline Navigation
-
-Inline navigation menu.
-
-```jsx live
-<Menu mode="inline" style={{ maxWidth: 256 }}>
-  <Menu.Item>Navigation One</Menu.Item>
-  <Menu.Item>Navigation Two</Menu.Item>
-  <Menu.Item disabled>Navigation Three</Menu.Item>
-  <Menu.SubMenu title="Simple SubMenu">
-    <Menu.Item>Menu Item 1</Menu.Item>
-    <Menu.Item disabled>Menu Item 2</Menu.Item>
-    <Menu.Item>Menu Item 3</Menu.Item>
-    <Menu.Item>Menu Item 4</Menu.Item>
-    <Menu.SubMenu title="Second Simple SubMenu">
-      <Menu.Item>Menu Item 5</Menu.Item>
-      <Menu.Item>Menu Item 6</Menu.Item>
-      <Menu.Item>Menu Item 7</Menu.Item>
-    </Menu.SubMenu>
-  </Menu.SubMenu>
-  <Menu.SubMenu title="Submenu with ItemGroup">
-    <Menu.ItemGroup title="Group 1">
-      <Menu.Item>Item group 1 item 1</Menu.Item>
-      <Menu.Item>Item group 1 item 2</Menu.Item>
-    </Menu.ItemGroup>
-    <Menu.ItemGroup title="Group 2">
-      <Menu.Item>Item group 2 item 1</Menu.Item>
-      <Menu.Item disabled>Item group 2 item 2</Menu.Item>
-      <Menu.Item>Item group 2 item 3</Menu.Item>
-    </Menu.ItemGroup>
-  </Menu.SubMenu>
-</Menu>
-```
-
-</demo>

package/components/menu/demo/vertical.md

@@ -1,37 +0,0 @@
-<demo>
-
-### Vertical Navigation
-
-A vertical menu with inline submenus.
-
-```jsx live
-<Menu mode="vertical" style={{ maxWidth: 256 }}>
-  <Menu.Item>Navigation One</Menu.Item>
-  <Menu.Item>Navigation Two</Menu.Item>
-  <Menu.Item disabled>Navigation Three</Menu.Item>
-  <Menu.SubMenu title="Simple SubMenu">
-    <Menu.Item>Menu Item 1</Menu.Item>
-    <Menu.Item disabled>Menu Item 2</Menu.Item>
-    <Menu.Item>Menu Item 3</Menu.Item>
-    <Menu.Item>Menu Item 4</Menu.Item>
-    <Menu.SubMenu title="Second Simple SubMenu">
-      <Menu.Item>Menu Item 5</Menu.Item>
-      <Menu.Item>Menu Item 6</Menu.Item>
-      <Menu.Item>Menu Item 7</Menu.Item>
-    </Menu.SubMenu>
-  </Menu.SubMenu>
-  <Menu.SubMenu title="Submenu with ItemGroup">
-    <Menu.ItemGroup title="Group 1">
-      <Menu.Item>Item group 1 item 1</Menu.Item>
-      <Menu.Item>Item group 1 item 2</Menu.Item>
-    </Menu.ItemGroup>
-    <Menu.ItemGroup title="Group 2">
-      <Menu.Item>Item group 2 item 1</Menu.Item>
-      <Menu.Item disabled>Item group 2 item 2</Menu.Item>
-      <Menu.Item>Item group 2 item 3</Menu.Item>
-    </Menu.ItemGroup>
-  </Menu.SubMenu>
-</Menu>
-```
-
-</demo>

package/components/menu/index.md

@@ -1,28 +0,0 @@
-import Horizontal from './demo/horizontal.md';
-import Vertical from './demo/vertical.md';
-import Inline from './demo/inline.md';
-
-# Menu
-
-A versatile navigation component with dropdown menu.
-
-## Scenario
-
-An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
-
-## Usage
-
-```jsx
-import { Menu } from 'tiny-ui';
-
-const { Item, SubMenu, ItemGroup, Divider } = Menu;
-```
-
-## Examples
-
-<Horizontal />
-<Vertical />
-<Inline />
-
-
-## API

package/components/menu/index.tsx

@@ -1,20 +0,0 @@
-import Menu from './menu';
-import MenuItem from './menu-item';
-import SubMenu from './sub-menu';
-import MenuItemGroup from './menu-item-group';
-import MenuDivider from './menu-divider';
-
-type IMenu = typeof Menu & {
-  Item: typeof MenuItem;
-  SubMenu: typeof SubMenu;
-  ItemGroup: typeof MenuItemGroup;
-  Divider: typeof MenuDivider;
-};
-
-const DefaultMenu = Menu as IMenu;
-DefaultMenu.Item = MenuItem;
-DefaultMenu.SubMenu = SubMenu;
-DefaultMenu.ItemGroup = MenuItemGroup;
-DefaultMenu.Divider = MenuDivider;
-
-export default DefaultMenu;

package/components/menu/menu-context.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { MenuMode } from './types';
-
-type Props = {
-  index: string;
-  mode: MenuMode;
-  inlineIndent: number;
-  onSelect?: (selectedIndex: string) => void;
-};
-
-export const MenuContext = React.createContext<Props>({
-  index: '0',
-  inlineIndent: 20,
-  mode: 'horizontal',
-});

package/components/menu/menu-divider.tsx

@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { BaseProps } from '../_utils/props';
-
-const MenuDivider = (props: BaseProps): JSX.Element => {
-  const { prefixCls: customisedCls, className } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('menu-divider', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-
-  return <li className={cls} />;
-};
-
-MenuDivider.displayName = 'MenuDivider';
-
-export default MenuDivider;

package/components/menu/menu-item-group.tsx

@@ -1,54 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { MenuItemGroupProps, MenuItemProps } from './types';
-import { MenuContext } from './menu-context';
-import { SubMenuContext } from './sub-menu-context';
-
-const MenuItemGroup = (props: MenuItemGroupProps): JSX.Element => {
-  const {
-    index,
-    title,
-    className,
-    style,
-    children,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const { inlineIndent } = useContext(MenuContext);
-  const { level = 1 } = useContext(SubMenuContext);
-  const prefixCls = getPrefixCls('menu-item-group', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className);
-
-  return (
-    <li {...otherProps} key={title} className={cls} style={style}>
-      <div
-        className={`${prefixCls}__title`}
-        style={{
-          paddingLeft: inlineIndent * level - inlineIndent / 2,
-        }}>
-        {title}
-      </div>
-      <ul className={`${prefixCls}__list`}>
-        {React.Children.map(children, (child, idx) => {
-          const childElement = child as React.FunctionComponentElement<MenuItemProps>;
-          if (childElement.type.displayName === 'MenuItem') {
-            const childProps: Partial<MenuItemProps> = {
-              index: `${index}-${idx}`,
-            };
-            return React.cloneElement(childElement, childProps);
-          } else {
-            console.warn('Menu has a child that is not a MenuItem component.');
-            return null;
-          }
-        })}
-      </ul>
-    </li>
-  );
-};
-
-MenuItemGroup.displayName = 'MenuItemGroup';
-
-export default MenuItemGroup;

package/components/menu/menu-item.tsx

@@ -1,58 +0,0 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { MenuContext } from './menu-context';
-import { SubMenuContext } from './sub-menu-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { MenuItemProps } from './types';
-
-const MenuItem = (props: MenuItemProps): JSX.Element => {
-  const {
-    disabled = false,
-    index,
-    className,
-    style,
-    children,
-    onClick,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const menuContext = useContext(MenuContext);
-  const subMenuContext = useContext(SubMenuContext);
-  const { inlineIndent, mode } = menuContext;
-  const { level = 1, onMenuItemClick } = subMenuContext;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('menu-item', configContext.prefixCls, customisedCls);
-  const cls = classNames(prefixCls, className, {
-    [`${prefixCls}_disabled`]: disabled,
-    [`${prefixCls}_active`]: menuContext.index === index,
-  });
-
-  const onItemClick = (e: React.MouseEvent): void => {
-    if (disabled) {
-      return;
-    }
-
-    onClick && onClick(e);
-    onMenuItemClick && onMenuItemClick();
-    if (menuContext.onSelect && typeof index === 'string') {
-      menuContext.onSelect(index);
-    }
-  };
-
-  return (
-    <li
-      {...otherProps}
-      key={index}
-      role="menuitem"
-      className={cls}
-      style={{ paddingLeft: mode === 'inline' ? level * inlineIndent : undefined, ...style }}
-      onClick={onItemClick}>
-      {children}
-    </li>
-  );
-};
-
-MenuItem.displayName = 'MenuItem';
-
-export default MenuItem;

package/components/menu/menu.tsx

@@ -1,71 +0,0 @@
-import React, { useContext, useState } from 'react';
-import classNames from 'classnames';
-import { MenuContext } from './menu-context';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { MenuItemProps, MenuProps } from './types';
-
-const Menu = (props: MenuProps): JSX.Element => {
-  const {
-    defaultIndex = '0',
-    mode = 'horizontal',
-    theme = 'light',
-    inlineIndent = 20,
-    onSelect,
-    className,
-    overlayClassName,
-    style,
-    children,
-    prefixCls: customisedCls,
-    ...otherProps
-  } = props;
-  const configContext = useContext(ConfigContext);
-  const prefixCls = getPrefixCls('menu', configContext.prefixCls, customisedCls);
-  const cls = classNames(
-    prefixCls,
-    className,
-    `${prefixCls}_root`,
-    `${prefixCls}_${theme}`,
-    `${prefixCls}_${mode}`
-  );
-  const [activeIndex, setActiveIndex] = useState<string>(defaultIndex);
-  const contextValue = {
-    mode,
-    inlineIndent,
-    index: activeIndex,
-    onSelect: (index: string): void => {
-      setActiveIndex(index);
-      onSelect && onSelect(index);
-    },
-  };
-
-  return (
-    <ul {...otherProps} role="menu" className={cls} style={style}>
-      <MenuContext.Provider value={contextValue}>
-        {React.Children.map(children, (child, index) => {
-          const childElement = child as React.FunctionComponentElement<MenuItemProps>;
-          const { displayName } = childElement.type;
-          if (
-            displayName === 'MenuItem' ||
-            displayName === 'SubMenu' ||
-            displayName === 'MenuItemGroup' ||
-            (displayName === 'MenuDivider' && mode !== 'horizontal')
-          ) {
-            const childProps = {
-              overlayClassName,
-              index: `${index}`,
-            };
-            return React.cloneElement(childElement, childProps);
-          } else {
-            console.warn('Menu has a child that is not a MenuItem component.');
-            return null;
-          }
-        })}
-      </MenuContext.Provider>
-    </ul>
-  );
-};
-
-Menu.displayName = 'Menu';
-
-export default Menu;

package/components/menu/style/_index.scss

@@ -1,183 +0,0 @@
-@import "../../style/variables";
-@import "./mixin";
-
-.#{$prefix}-menu {
-  display: flex;
-  flex-wrap: nowrap;
-  box-sizing: border-box;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  white-space: nowrap;
-  border: 0;
-
-  &_horizontal {
-    position: relative;
-
-    &:before {
-      content: '';
-      position: absolute;
-      border-bottom: 1px solid;
-      width: 100%;
-      bottom: 0;
-    }
-
-    .#{$prefix}-menu-item {
-      height: 48px;
-      padding: 0 15px;
-      line-height: 48px;
-      margin: 0 5px;
-      border-bottom: 2px solid transparent;
-      position: relative;
-
-      &_active {
-        color: $primary-color;
-        border-bottom-color: $primary-color;
-      }
-    }
-  }
-
-  &_inline, &_vertical {
-    flex-direction: column;
-    position: relative;
-
-    &:before {
-      content: '';
-      position: absolute;
-      border-right: 1px solid;
-      height: 100%;
-      right: 0;
-    }
-
-    .#{$prefix}-menu-item {
-      padding: $menu-item-padding-vertical;
-      margin: 5px 0;
-      position: relative;
-    }
-  }
-
-  &_inline li.#{$prefix}-menu-item_active {
-    @include menu-item-active($primary-color, true);
-  }
-
-  &_vertical li.#{$prefix}-menu-item_active {
-    @include menu-item-active($primary-color);
-  }
-
-  &_light {
-    color: $font-color;
-    background: #fff;
-
-    &:before {
-      border-color: #f0f0f0;
-    }
-  }
-
-  &_dark {
-    color: rgba(255, 255, 255, .65);
-    background: #001529;
-
-    &:before {
-      border-color: #001529;
-    }
-  }
-}
-
-.#{$prefix}-menu-item {
-  box-sizing: border-box;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 300ms, color 250ms;
-
-  &:hover {
-    color: $primary-color;
-  }
-
-  &_disabled {
-    color: $gray-700 !important;
-    opacity: .5;
-    cursor: not-allowed;
-  }
-}
-
-.#{$prefix}-menu-sub {
-
-  .#{$prefix}-popup__wrapper {
-    display: block;
-  }
-
-  &__list {
-    margin: 0;
-    min-width: 100%;
-    list-style: none;
-    padding-left: 0;
-    white-space: nowrap;
-
-    .#{$prefix}-menu-item {
-      @include menu-sub-item-style();
-    }
-
-    &_popup {
-      min-width: 160px;
-
-      li.#{$prefix}-menu-item_active {
-        @include menu-item-active($primary-color);
-      }
-    }
-  }
-
-  &__title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &.#{$prefix}-menu-item_active {
-      color: $primary-color;
-    }
-  }
-
-  &__arrow {
-    display: inline-block;
-    transition: transform 300ms;
-    margin-left: 20px;
-
-    &_reverse {
-      transform: rotate(180deg);
-    }
-
-    &_right {
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-.#{$prefix}-menu-item-group {
-  box-sizing: border-box;
-
-  &__title {
-    padding: 10px 16px;
-    color: rgba(0, 0, 0, .45);
-    font-size: 14px;
-    cursor: default;
-
-    &:first-child {
-      margin-top: 4px;
-    }
-  }
-
-  &__list {
-    list-style: none;
-    padding-left: 0;
-    white-space: nowrap;
-
-    > .#{$prefix}-menu-item {
-      padding: 12px 35px 12px 25px;
-    }
-  }
-}
-
-.#{$prefix}-menu-divider {
-  height: 1px;
-  background-color: rgba(0, 0, 0, .1);
-  margin: 5px 0;
-}

package/components/menu/style/_mixin.scss

@@ -1,16 +0,0 @@
-@mixin menu-sub-item-style($padding: 12px 20px){
-  padding: $padding;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis;
-}
-
-@mixin menu-item-active($color, $display-right-border: false){
-  background-color: rgba($color, .2);
-  color: $color;
-  @if $display-right-border {
-    border-right: 3px solid $color;
-  }
-}

package/components/menu/style/index.tsx

@@ -1,4 +0,0 @@
-import './index.scss';
-
-import '../../popup/style/index.scss';
-import '../../collapse-transition/style/index.scss';

package/components/menu/sub-menu-context.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-type Props = {
-  level?: number;
-  onMenuItemClick?: () => void;
-};
-
-export const SubMenuContext = React.createContext<Props>({});