@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.11

package/lib/Tooltip/demo/placement/index.less

@@ -1,7 +0,0 @@
-.demo-placement {
-  .ant-btn {
-    width: 70px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-  }
-}

package/lib/Tooltip/demo/trigger/index.d.ts

@@ -1,3 +0,0 @@
-import './index.less';
-declare const _default: () => JSX.Element;
-export default _default;

package/lib/Tooltip/demo/trigger/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _aloudataDesign = require("@aloudata/aloudata-design");
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = function _default() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "demo-trigger"
-  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
-    title: "Tooltip",
-    trigger: "hover"
-  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "hover")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
-    title: "Tooltip",
-    trigger: "click"
-  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "click")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
-    title: "Tooltip",
-    trigger: "contextMenu"
-  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "contextMenu")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Tooltip, {
-    title: "Tooltip",
-    trigger: "focus"
-  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, null, "focus"))));
-};
-
-exports.default = _default;

package/lib/Tooltip/demo/trigger/index.less

@@ -1,5 +0,0 @@
-.demo-trigger {
-  .ant-btn {
-    margin-right: 8px;
-  }
-}

package/src/Button/demo/Icon/index.less

@@ -1,6 +0,0 @@
-.ald-button-demo {
-  .ant-btn {
-    margin-right: 8px;
-    margin-bottom: 12px;
-  }
-}

package/src/Button/demo/Icon/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Button } from '@aloudata/aloudata-design';
-import './index.less';
-import Icon from '../../../Icon'
-export default () => {
-  return (
-    <div className="ald-button-demo">
-      <Button type="primary" icon={<Icon type="add" size={20} />}>
-        Search
-      </Button>
-      <Button type="secondary" icon={<Icon type="add" size={20} />}>
-        Search
-      </Button>
-      <Button type="text" icon={<Icon type="add" size={20} />}>
-        Search
-      </Button>
-      <Button type="danger" icon={<Icon type="add" size={20} />}>
-        Search
-      </Button>
-      <Button type="link" icon={<Icon type="add" size={20} />}>
-        Search
-      </Button>
-      <br />
-      <Button icon={<Icon type="add" size={20} />}>
-      </Button>
-      <Button shape='circle' icon={<Icon type="add" size={20} />}>
-      </Button>
-      <Button shape='circle'>
-        S
-      </Button>
-      <br />
-      <Button size='small' icon={<Icon type="add" size={20} />}>
-      </Button>
-      <Button shape='circle' size="large" icon={<Icon type="add" size={20} />}>
-      </Button>
-      <Button shape='circle'>
-        M
-      </Button>
-    </div>
-  )
-}

package/src/Button/demo/basic/index.less

@@ -1,7 +0,0 @@
-
-.ald-button-demo {
-  .ant-btn {
-    margin-right: 8px;
-    margin-top: 12px;
-  }
-}

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button } from '@aloudata/aloudata-design';
-import '../../style/index.less';
-import { Radio } from 'antd';
-import './index.less';
-export default () => {
-  const [size, setSize] = React.useState('default');
-  const handleSizeChange = (e: any) => {
-    setSize(e.target.value);
-  }
-  return (
-    <div className='ald-button-demo'>
-      <Radio.Group value={size} onChange={handleSizeChange}>
-        <Radio.Button value="small">Small</Radio.Button>
-        <Radio.Button value='default'>Default</Radio.Button>
-        <Radio.Button value="large">Large</Radio.Button>
-      </Radio.Group>
-      <br />
-      <Button type="primary" size={size}>Primary Button</Button>
-      <Button type="danger" size={size}>danger Button</Button>
-      <Button type="secondary" size={size}>secondary Button</Button>
-      <Button type="text" size={size}>Text Button</Button>
-      <Button type="link" size={size}>Link Button</Button>
-    </div>
-  )
-};

package/src/Button/demo/disable/index.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from '@aloudata/aloudata-design';
-import './index.less';
-
-export default () => {
-
-  return (
-    <div className="ald-button-demo">
-      <Button type="primary" disabled>primary disable</Button>
-      <Button type="secondary" disabled>secondary disable</Button>
-      <Button type="text" disabled>text disable</Button>
-      <Button type="danger" disabled>danger disable</Button>
-      <Button type="link" disabled>link disable</Button>
-      </div>
-  )
-}

package/src/Button/demo/href/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button } from '@aloudata/aloudata-design';
-
-export default () => {
-
-  return (
-    <div className="ald-button-demo">
-      <Button href="https://www.aloudata.com/">aloudata</Button>
-      <Button href="https://www.aloudata.com/" target="_blank">target _blank aloudata</Button>
-      <Button href="https://www.aloudata.com/" target="_self">target _self aloudata</Button>
-      <Button target="_blank"> 无href target _blank</Button>
-    </div>
-  )
-}

package/src/Button/demo/loading/index.less

@@ -1,6 +0,0 @@
-.ald-button-demo {
-  .ant-btn {
-    margin-right: 8px;
-    margin-bottom: 12px;
-  }
-}

package/src/Button/demo/loading/index.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Button } from "@aloudata/aloudata-design";
-import './index.less'
-
-
-export default () => {
-  const [loading, setLoading] = React.useState(false);
-  const handleChange = (e: any) => {
-    setLoading(true);
-    setTimeout(setLoading.bind(false), 3000)
-  }
-
-  return (
-    <div className="ald-button-demo">
-      <Button loading={true}>loading</Button>
-      <Button loading={true}></Button>
-      <Button loading={loading} onClick={handleChange}>点击提交</Button>
-    </div>
-
-  )
-}

package/src/Button/index.md

@@ -1,25 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Button 按钮
-group:
-  title: 组件
----
-
-## Button 按钮
-
-按钮用于开始一个即时操作。
-
-## 代码演示
-
-<code src="./demo/basic" title="基础用法" description="不同尺寸不同类型的按钮">
-<code src="./demo/icon" title="带图标" description="纯图标和带前缀图标">
-<code src="./demo/loading" title="加载中" description="纯图标和带前缀图标">
-<code src="./demo/disable" title="禁用状态">
-<code src="./demo/href" title="链接" description="target属性在有href时生效">
-
-<API />
-
-支持原生 button 的其他所有属性。
-

package/src/Button/index.test.tsx

@@ -1,58 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Button from './index';
-import { SearchOutlined } from '@ant-design/icons';
-
-describe('Button ', () => {
-  it('render Button with type=link', () => {
-    const type = 'link';
-    render(<Button type={type}>{type}</Button>);
-    expect(document.querySelector('.ant-btn-link')).not.toBeNull();
-  });
-
-  it('render Button with type=danger', () => {
-    const type = 'danger';
-    render(<Button type={type}>{type}</Button>);
-    expect(document.querySelector('.ant-btn-dangerous')).not.toBeNull();
-  });
-
-  it('render Button size=small', () => {
-    const size = 'small';
-    render(<Button size={size} className="ald-btn-sm">{size}</Button>);
-    expect(document.querySelector('.ald-btn-sm')).toHaveClass('ant-btn-sm');
-  });
-
-  it('render Button disable', () => {
-    render(<Button disabled className="ald-btn-disable">disabled</Button>);
-    expect(document.querySelector('.ald-btn-disable')).toBeDisabled();
-  });
-
-  it('render Button shape=circle', () => {
-    render(<Button shape="circle" className="ald-btn-circle">circle</Button>);
-    expect(document.querySelector('.ald-btn-circle')).toHaveClass('ant-btn-circle');
-  });
-
-  it('render Button icon', () => {
-    render(<Button icon={<SearchOutlined />}>Search</Button>);
-    expect(document.querySelector('.anticon-search')).not.toBeNull();
-  });
-
-  it('render Button loading', () => {
-    render(<Button loading>loading</Button>);
-    expect(document.querySelector('.anticon-loading')).not.toBeNull();
-  });
-
-  it('render Button href', () => {
-    render(<Button href="https://www.aloudata.com/" className="ald-btn-href">aloudata</Button>);
-    expect(document.querySelector('.ald-btn-href')).toHaveAttribute('href', 'https://www.aloudata.com/');
-  });
-
-  it('render Button onClick', () => {
-    const onClick = jest.fn();
-    render(<Button onClick={onClick}>onClick</Button>);
-    const button = screen.queryByRole('button');
-    fireEvent.click(button!);
-    expect(onClick).toBeCalled();
-  });
-});

package/src/Button/index.tsx

@@ -1,136 +0,0 @@
-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.ts

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

package/src/Dropdown/Button.tsx

@@ -1,93 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,98 +0,0 @@
-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>
-  );
-};