@aloudata/aloudata-design 0.1.0-beta1

package/lib/Button/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./style");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));
+
+var _excluded = ["type", "size", "shape", "icon", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var iconPrefixCls = 'anticon';
+var ICON_LARGE = 20;
+var ICON_SMALL = 16;
+
+function Button(props) {
+  var prefix = (0, _usePrefixCls.default)('btn');
+
+  var _props$type = props.type,
+      type = _props$type === void 0 ? 'primary' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'default' : _props$shape,
+      icon = props.icon,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  function getButtonType(buttonType) {
+    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) {
+    if (buttonType === 'danger') {
+      return true;
+    }
+
+    return false;
+  }
+
+  function getButtonSize(ButtonSize) {
+    switch (ButtonSize) {
+      case 'small':
+        return 'small';
+
+      case 'large':
+        return 'large';
+
+      default:
+        return 'middle';
+    }
+  }
+
+  function getShape(ButtonShape) {
+    if (ButtonShape === 'circle') {
+      return ButtonShape;
+    }
+
+    return 'default';
+  }
+
+  var setIcon = function setIcon(iconNode) {
+    if (iconNode) {
+      var p = _objectSpread({
+        className: '',
+        size: ICON_LARGE
+      }, iconNode.props); // eslint-disable-next-line
+
+
+      p.className = (0, _classnames.default)("".concat(iconPrefixCls, "-icon-left"), p.className); // eslint-disable-next-line
+
+      p.size = size === 'large' ? ICON_LARGE : ICON_SMALL;
+      return /*#__PURE__*/_react.default.cloneElement(iconNode, p);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_button.default, _objectSpread(_objectSpread({}, rest), {}, {
+    icon: setIcon(icon),
+    type: getButtonType(type),
+    className: (0, _classnames.default)("".concat(prefix, "-").concat(type), className),
+    size: getButtonSize(size),
+    danger: getDangerStatus(type),
+    shape: getShape(shape)
+  }), props.children);
+}
+
+var _default = Button;
+exports.default = _default;

package/lib/Button/style/index.d.ts

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

package/lib/Button/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style");
+
+require("./index.less");

package/lib/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/lib/Dropdown/Button.d.ts

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react';
+import { ButtonType, Size } from '../Button';
+import './style';
+export declare 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): JSX.Element;

package/lib/Dropdown/Button.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DropdownButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+require("./style");
+
+var _excluded = ["children", "overlay", "placement", "trigger", "visible", "disabled", "onVisibleChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function DropdownButton(props) {
+  var children = props.children,
+      overlay = props.overlay,
+      placement = props.placement,
+      trigger = props.trigger,
+      visible = props.visible,
+      disabled = props.disabled,
+      onVisibleChange = props.onVisibleChange,
+      buttonProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    overlay: overlay,
+    placement: placement,
+    trigger: trigger,
+    visible: visible,
+    disabled: disabled,
+    onVisibleChange: onVisibleChange
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, _objectSpread({}, buttonProps), children, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: "expand_more"
+  })));
+}

package/lib/Dropdown/demo/basic/index.d.ts

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

package/lib/Dropdown/demo/basic/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("../../style/index.less");
+
+require("../../../Menu/style/index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuItem = _aloudataDesign.Menu.Item;
+
+var _default = function _default() {
+  var menu = /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu, null, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"));
+
+  return /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Hover me"));
+};
+
+exports.default = _default;

package/lib/Dropdown/demo/button/index.d.ts

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