@aloudata/aloudata-design 0.1.0-beta1

package/src/Button/index.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Button as AntdButton } from 'antd';
+import './style';
+import type {
+  ButtonType as AntdButtonType,
+  ButtonProps as AntdButtonProps,
+  ButtonSize as AntdButtonSize,
+} from 'antd/lib/button';
+import classNames from 'classnames';
+import usePrefixCls from '../_utils/hooks/usePrefixCls';
+
+const iconPrefixCls = 'anticon';
+const ICON_LARGE = 20;
+const ICON_SMALL = 16;
+export type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
+export type Size = 'small' | 'default' | 'large';
+export interface IButtonProps
+  extends Omit<
+    AntdButtonProps,
+    'type' | 'size' | 'danger' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'
+  > {
+  /**
+   * @description 类型
+   * @type 'primary' | 'secondary' | 'danger' | 'text' | 'link'
+   * @default primary
+   */
+  type?: ButtonType;
+  /**
+   * @description 尺寸
+   * @type 'small' | 'default' | 'large'
+   * @default large
+   */
+  size?: Size;
+  /**
+   * @description 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 设置按钮的图标组件
+   */
+  icon?: React.ReactNode;
+  shape?: 'circle' | 'default';
+  /**
+   * @description 指定此属性，点击行为和a链接一致
+   */
+  href?: string;
+  /**
+   * @description 相当于 a 链接的 target 属性，href 存在时生效
+   */
+  target?: string;
+  /**
+   * @description 点击按钮时的回调
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * @description 设置按钮进入载入状态
+   * @default false
+   */
+  loading?:
+    | boolean
+    | {
+        delay?: number;
+      };
+}
+function Button(props: IButtonProps) {
+  const prefix = usePrefixCls('btn');
+  const { type = 'primary', size = 'default', shape = 'default', icon, className, ...rest } = props;
+
+  function getButtonType(buttonType: ButtonType): AntdButtonType {
+    if (!['primary', 'secondary', 'danger', 'text', 'link'].includes(buttonType)) {
+      return 'primary';
+    }
+    if (buttonType === 'danger') {
+      return 'primary';
+    }
+    if (buttonType === 'secondary') {
+      return 'default';
+    }
+    return buttonType;
+  }
+
+  function getDangerStatus(buttonType: ButtonType): boolean {
+    if (buttonType === 'danger') {
+      return true;
+    }
+    return false;
+  }
+
+  function getButtonSize(ButtonSize: Size): AntdButtonSize {
+    switch (ButtonSize) {
+      case 'small':
+        return 'small';
+      case 'large':
+        return 'large';
+      default:
+        return 'middle';
+    }
+  }
+
+  function getShape(ButtonShape: 'circle' | 'default'): 'circle' | 'default' {
+    if (ButtonShape === 'circle') {
+      return ButtonShape;
+    }
+    return 'default';
+  }
+  const setIcon = (iconNode: React.ReactElement) => {
+    if (iconNode) {
+      const p = {
+        className: '',
+        size: ICON_LARGE,
+        ...iconNode.props,
+      };
+      // eslint-disable-next-line
+      p.className = classNames(`${iconPrefixCls}-icon-left`, p.className);
+      // eslint-disable-next-line
+      p.size = size === 'large' ? ICON_LARGE : ICON_SMALL;
+      return React.cloneElement(iconNode, p);
+    }
+    return <></>;
+  };
+  return (
+    <AntdButton
+      {...rest}
+      icon={setIcon(icon as React.ReactElement)}
+      type={getButtonType(type)}
+      className={classNames(`${prefix}-${type}`, className)}
+      size={getButtonSize(size)}
+      danger={getDangerStatus(type)}
+      shape={getShape(shape)}
+    >
+      {props.children}
+    </AntdButton>
+  );
+}
+export default Button;

package/src/Button/style/index.less

@@ -0,0 +1,255 @@
+@import '../../style/index.less'; 
+
+@ald-prefix:ant;
+@ald-iconfont-css-prefix:anticon;
+.@{ald-prefix}-btn {
+
+  &.@{ald-prefix}-btn {
+    // &-loading::before{
+    //   // display: none !important;
+    // }
+
+    &-primary,
+    &-dangerous,
+    &-secondary,
+    &-text,
+    &-link {
+      font-size: 12px;
+      height: 28px;
+      padding: 0 12px;
+      display: inline-flex;
+      line-height: 1;
+      align-items: center;
+      font-weight: 500;
+      justify-content: space-between;
+      .@{ald-iconfont-css-prefix} {
+        + span {
+          margin-left: 4px;
+        }
+
+        &-icon-left {
+          margin-left: -4px;
+        }
+
+        &-icon-right {
+          margin-right: -4px;
+        }
+      }
+    }
+
+    &-primary {
+      background-color: @B40;
+      border-color: @B40;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+      &:hover,
+      &:focus,
+      &:active,
+      &.@{ald-prefix}-btn-loading {
+        background-color: @B20;
+        border-color: @B20;
+        color: @ND0;
+      }
+
+      &[disabled] {
+        background-color: @NL90;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @NL90;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+    &-dangerous.@{ald-prefix}-btn-primary {
+      background-color: @SC40;
+      border-color: @SC40;
+      color: @ND0;
+      text-shadow: @text-shadow;
+      box-shadow: unset;
+
+      &:hover {
+        background-color: @SC20;
+        border-color: @SC20;
+        color: @ND0;
+      }
+      &:focus,
+      &:active,
+      &.@{ald-prefix}-btn-loading {
+        background-color: @SC20;
+        border-color: @SC20;
+        color: @ND0;
+      }
+
+      &[disabled] {
+        background-color: @NL90;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @NL90;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-secondary {
+      background-color: @BG100;
+      border-color: @NL90;
+      color: @NL30;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.@{ald-prefix}-btn-loading {
+        background-color: @NL97;
+        border-color: @NL90;
+        color: @NL30;
+      }
+
+      &[disabled] {
+        background-color: @BG100;
+        border-color: @NL90;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: @BG100;
+          border-color: @NL90;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-text {
+      background-color: @BG100;
+      border-color: @BG100;
+      color: @NL30;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+      &:hover,
+      &:focus,
+      &:active,
+      &.@{ald-prefix}-btn-loading {
+        background-color: @NL97;
+        // border-color: @NL97;
+        color: @NL30;
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: transparent;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-link {
+      background-color: @BG100;
+      border-color: @BG100;
+      color: @B40;
+      font-weight: 400;
+      box-shadow: none;
+      border-radius: @border-radius-base;
+      text-shadow: @text-shadow;
+      &:hover,
+      &:focus,
+      &:active,
+      &.@{ald-prefix}-btn-loading {
+        background-color: @BG100;
+        border-color: @BG100;
+        color: @B20;
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border-color: transparent;
+        color: @NL80;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: transparent;
+          border-color: transparent;
+          color: @NL80;
+        }
+      }
+    }
+
+    &-icon-only {
+      justify-content: center;
+      padding: 0;
+      vertical-align: bottom;
+      height: @height-base;
+      width: @height-base;
+      &.@{ald-prefix}-btn-loading-icon {
+        vertical-align: baseline;
+      }
+      .@{ald-iconfont-css-prefix} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0;
+      }
+    }
+
+    &-circle {
+      width: @height-base;
+      min-width: auto;
+      padding: 0;
+      justify-content: center;
+      border-radius: 50%;
+    }
+
+    &-lg {
+      height: 32px;
+      font-size: 14px;
+      min-width: auto;
+      &.@{ald-prefix}-btn-icon-only {
+        height: 32px;
+        width: 32px;
+        min-width: auto;
+      }
+      &.@{ald-prefix}-btn-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+    }
+
+    &-sm {
+      height: 24px;
+      border-radius: @border-radius-sm;
+      &.@{ald-prefix}-btn-icon-only {
+        height: 24px;
+        width: 24px;
+        border-radius: @border-radius-sm;
+      }
+      &.@{ald-prefix}-btn-circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/src/Button/style/index.ts

@@ -0,0 +1,2 @@
+import '../../style'
+import './index.less';

package/src/Dropdown/Button.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement } from 'react';
+import Button, { ButtonType, Size} from '../Button';
+// eslint-disable-next-line import/no-cycle
+import Dropdown from './index';
+import Icon from '../Icon';
+import './style'
+
+export type ActionType = 'hover' | 'click' | 'contextMenu';
+
+export interface IDropdownButton {
+  /**
+   * @description 类型
+   * @type 'primary' | 'secondary' | 'danger' | 'text' | 'link'
+   * @default primary
+   */
+  type?: ButtonType;
+  /**
+   * @description 尺寸
+   * @type 'small' | 'default' | 'large'
+   * @default large
+   */
+  size?: Size;
+  /**
+   * @description 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 设置按钮的图标组件
+   */
+  icon?: React.ReactNode;
+  /**
+   * @description 设置按钮进入载入状态
+   * @default false
+   */
+  loading?: boolean | {
+    delay?: number;
+  };
+  /**
+   * @description 菜单
+   * @type Menu | () => Menu
+   * @default -
+   */
+  overlay: ReactElement | (() => ReactElement);
+  /**
+   * @description 菜单弹出位置
+   * @default bottomLeft
+   */
+  placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
+  /**
+   * @description 触发下拉的行为
+   * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+   * @default [hover]
+   */
+  trigger?: ActionType[];
+  /**
+   * @description 菜单是否显示
+   * @default -
+   */
+  visible?: boolean;
+  /**
+   * @description 菜单显示状态改变时调用，参数为 visible，点击菜单按钮导致的消失不会触发
+   * @default -
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * @description 点击按钮时的回调
+   * FIXME: onClick和trigger冲突，antd按钮和下拉菜单触发区域不同，需要和视觉确认
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function DropdownButton(props: IDropdownButton) {
+  const { children, overlay, placement, trigger, visible, disabled, onVisibleChange, ...buttonProps } = props;
+
+  return (
+    <Dropdown
+      overlay={overlay}
+      placement={placement}
+      trigger={trigger}
+      visible={visible}
+      disabled={disabled}
+      onVisibleChange={onVisibleChange}
+    >
+      <Button {...buttonProps}>
+        {children}
+        <Icon type="expand_more" />
+      </Button>
+    </Dropdown>
+  );
+}

package/src/Dropdown/demo/basic/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+import '../../style/index.less';
+import '../../../Menu/style/index.less';
+const MenuItem = Menu.Item;
+
+export default () => {
+  const menu = (
+    <Menu>
+      <MenuItem key={1}>1st menu item</MenuItem>
+      <MenuItem key={2} disabled>2nd menu item</MenuItem>
+      <MenuItem key={3}>3nd menu item</MenuItem>
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <span>Hover me</span>
+    </Dropdown>
+  );
+}

package/src/Dropdown/demo/button/index.less

@@ -0,0 +1,9 @@
+.demo-dropdown-button {
+  .row {
+    margin-bottom: 8px;
+  }
+
+  .title {
+    padding-right: 8px;
+  }
+}

package/src/Dropdown/demo/button/index.tsx

@@ -0,0 +1,98 @@
+import React, { Dispatch, SetStateAction, useState } from 'react';
+import Icon from '../../../Icon';
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+import './index.less';
+
+const DropdownButton = Dropdown.Button;
+
+export default () => {
+  const [size, setSize] = useState('default');
+  const [type, setType] = useState('primary');
+  const [disabled, setDisabled] = useState(false);
+  const [isIcon, setIsIcon] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [placement, setPlacement] = useState('bottomLeft');
+
+  const menu = (
+    <Menu>
+      <Menu.Item key="1">1st menu item</Menu.Item>
+      <Menu.Item key="2">2nd menu item</Menu.Item>
+      <Menu.Item key="3">3rd menu item, long long content</Menu.Item>
+    </Menu>
+  );
+
+  function onChangeValue<T>(setCallback: Dispatch<SetStateAction<T>>) {
+    return (e: RadioChangeEvent) => setCallback(e.target.value);
+  }
+
+  return (
+    <div className="demo-dropdown-button">
+      <div>
+        <div className="row">
+          <span className="title">type:</span>
+          <Radio.Group value={type} onChange={onChangeValue<string>(setType)}>
+            <Radio value="primary">primary</Radio>
+            <Radio value="secondary">secondary</Radio>
+            <Radio value="danger">danger</Radio>
+            <Radio value="text">text</Radio>
+            <Radio value="link">link</Radio>
+          </Radio.Group>
+        </div>
+        <div className="row">
+          <span className="title">size:</span>
+          <Radio.Group value={size} onChange={onChangeValue<string>(setSize)}>
+            <Radio value="large">large</Radio>
+            <Radio value="default">default</Radio>
+            <Radio value="small">small</Radio>
+          </Radio.Group>
+        </div>
+        <div className="row">
+          <span className="title">disabled:</span>
+          <Radio.Group value={disabled} onChange={onChangeValue<boolean>(setDisabled)}>
+            <Radio value={true}>true</Radio>
+            <Radio value={false}>false</Radio>
+          </Radio.Group>
+        </div>
+        <div className="row">
+          <span className="title">icon button:</span>
+          <Radio.Group value={isIcon} onChange={onChangeValue<boolean>(setIsIcon)}>
+            <Radio value={true}>icon button</Radio>
+            <Radio value={false}>not icon button</Radio>
+          </Radio.Group>
+        </div>
+        <div className="row">
+          <span className="title">loading:</span>
+          <Radio.Group value={loading} onChange={onChangeValue<boolean>(setLoading)}>
+            <Radio value={true}>loading</Radio>
+            <Radio value={false}>not loading</Radio>
+          </Radio.Group>
+        </div>
+        <div className="row">
+          <span className="title">placement:</span>
+          <Radio.Group value={placement} onChange={onChangeValue<string>(setPlacement)}>
+            <Radio value="bottomLeft">bottomLeft</Radio>
+            <Radio value="bottomCenter">bottomCenter</Radio>
+            <Radio value="bottomRight">bottomRight</Radio>
+            <Radio value="topLeft">topLeft</Radio>
+            <Radio value="topCenter">topCenter</Radio>
+            <Radio value="topRight">topRight</Radio>
+          </Radio.Group>
+        </div>
+      </div>
+      <div>
+        <DropdownButton
+          overlay={menu}
+          icon={isIcon && <Icon type="Positioning" />}
+          loading={loading}
+          disabled={disabled}
+          size={size}
+          type={type}
+          placement={placement}
+        >
+          {isIcon ? null : 'Button Content'}
+        </DropdownButton>
+      </div>
+    </div>
+  );
+};

package/src/Dropdown/demo/placement/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import Space from 'antd/lib/space';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+
+const menu = (
+  <Menu>
+    <Menu.Item key={1}>
+      1st menu item
+    </Menu.Item>
+    <Menu.Item key={2}>
+      2nd menu item
+    </Menu.Item>
+    <Menu.Item key={3}>
+      3rd menu item
+    </Menu.Item>
+  </Menu>
+);
+
+export default () => (
+  <div className="demo-dropdown-placement">
+    <Space direction="vertical">
+      <Space wrap>
+        <Dropdown overlay={menu} placement="bottomLeft">
+          <Button>bottomLeft</Button>
+        </Dropdown>
+        <Dropdown overlay={menu} placement="bottomCenter">
+          <Button>bottomCenter</Button>
+        </Dropdown>
+        <Dropdown overlay={menu} placement="bottomRight">
+          <Button>bottomRight</Button>
+        </Dropdown>
+      </Space>
+      <Space wrap>
+        <Dropdown overlay={menu} placement="topLeft">
+          <Button>topLeft</Button>
+        </Dropdown>
+        <Dropdown overlay={menu} placement="topCenter">
+          <Button>topCenter</Button>
+        </Dropdown>
+        <Dropdown overlay={menu} placement="topRight">
+          <Button>topRight</Button>
+        </Dropdown>
+      </Space>
+    </Space>
+  </div>
+);

package/src/Dropdown/demo/subMenu/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { message} from 'antd';
+import { Dropdown, Menu } from '@aloudata/aloudata-design';
+
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+const MenuDivider = Menu.Divider;
+
+export default () => {
+  const menu = (
+    <Menu onClick={(info: { key: string }) => {
+      message.info(`Click on menu item ${info.key}`);
+    }}>
+      <MenuItem key={1}>1st menu item</MenuItem>
+      <MenuItem key={2} disabled>2nd menu item</MenuItem>
+      <MenuItem key={3}>3nd menu item</MenuItem>
+      <MenuDivider />
+      <SubMenu key={4} title="sub menu">
+        <MenuItem key={5}>Sub menu item5</MenuItem>
+        <MenuItem key={6}>Sub menu item6Sub menu item6Sub menu item6Sub menu item6</MenuItem>
+        <MenuItem key={7}>Sub menu item7</MenuItem>
+        <SubMenu key={8} title="sub menu">
+          <MenuItem key={9}>Sub menu item9</MenuItem>
+          <MenuItem key={10}>Sub menu item10</MenuItem>
+          <MenuItem key={11}>Sub menu item11</MenuItem>
+        </SubMenu>
+      </SubMenu>
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <span>Hover me</span>
+    </Dropdown>
+  );
+}