@aloudata/aloudata-design 0.2.7 → 0.3.0-beta.1

package/lib/Button/index.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 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 }; }
@@ -29,12 +27,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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;
+var iconPrefixCls = 'aldicon';
+var ICON_LARGE = 16;
+var ICON_MIDDLE = 14;
+var ICON_SMALL = 12;
+var ICON_MINI = 12;
 
 function Button(props) {
-  var prefix = (0, _usePrefixCls.default)('btn');
+  var prefix = 'ald-btn';
 
   var _props$type = props.type,
       type = _props$type === void 0 ? 'secondary' : _props$type,
@@ -47,11 +47,11 @@ function Button(props) {
       rest = _objectWithoutProperties(props, _excluded);
 
   function getButtonType(buttonType) {
-    if (!['primary', 'secondary', 'danger', 'text', 'link'].includes(buttonType)) {
+    if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
       return 'default';
     }
 
-    if (buttonType === 'danger') {
+    if (buttonType === 'dangerous') {
       return 'primary';
     }
 
@@ -63,24 +63,31 @@ function Button(props) {
   }
 
   function getDangerStatus(buttonType) {
-    if (buttonType === 'danger') {
+    if (buttonType === 'dangerous') {
       return true;
     }
 
     return false;
   }
 
-  function getButtonSize(ButtonSize) {
-    switch (ButtonSize) {
-      case 'small':
-        return 'small';
+  function getButtonSizeClass(ButtonSize) {
+    return ButtonSize === 'default' || undefined ? "".concat(prefix, "-middle") : "".concat(prefix, "-").concat(ButtonSize);
+  }
+
+  function getIconSize(ButtonSize) {
+    if (ButtonSize === 'large') {
+      return ICON_LARGE;
+    }
 
-      case 'large':
-        return 'large';
+    if (ButtonSize === 'small') {
+      return ICON_SMALL;
+    }
 
-      default:
-        return 'middle';
+    if (ButtonSize === 'mini') {
+      return ICON_MINI;
     }
+
+    return ICON_MIDDLE;
   }
 
   function getShape(ButtonShape) {
@@ -96,12 +103,10 @@ function Button(props) {
       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
+      }, iconNode.props);
 
-      p.size = size === 'large' ? ICON_LARGE : ICON_SMALL;
+      p.className = (0, _classnames.default)("".concat(iconPrefixCls, "-icon-left"), p.className, iconPrefixCls);
+      p.size = getIconSize(size);
       return /*#__PURE__*/_react.default.cloneElement(iconNode, p);
     }
 
@@ -111,8 +116,7 @@ function Button(props) {
   return /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({}, rest, {
     icon: setIcon(icon),
     type: getButtonType(type),
-    className: (0, _classnames.default)("".concat(prefix, "-").concat(type), className),
-    size: getButtonSize(size),
+    className: (0, _classnames.default)(prefix, "".concat(prefix, "-").concat(type), className, getButtonSizeClass(size)),
     danger: getDangerStatus(type),
     shape: getShape(shape)
   }), props.children);

package/lib/Button/style/index.less

@@ -1,10 +1,8 @@
 @import '../../style/index.less';
+@import './variables.less';
 
-@ald-prefix: ant;
-@ald-iconfont-css-prefix: anticon;
-
-.ant-btn {
-  &.ant-btn {
+.ant-btn.ald-btn {
+  &.ald-btn {
     // &-loading::before{
     //   // display: none !important;
     // }
@@ -17,11 +15,13 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      height: @ald-height-base;
-      padding: 0 11px;
+      height: @height-base;
+      padding: @Button-padding;
       font-weight: 500;
       font-size: 12px;
-      line-height: @ald-height-base;
+      line-height: @height-base;
+      text-shadow: none;
+      // border: none;
       .@{ald-iconfont-css-prefix} {
         + span {
           margin-left: 4px;
@@ -37,213 +37,204 @@
       }
     }
 
+    &.ant-btn-loading::before {
+      display: none;
+    }
+
     &-primary {
-      text-shadow: @text-shadow;
-      background-color: @B40;
-      border-color: @B40;
-      border-radius: @ald-border-radius-base;
+      color: @Button-primary-color;
+      background-color: @Button-primary-bgColor;
+      border-color: @Button-primary-bgColor;
       box-shadow: none;
 
       &:focus {
-        text-shadow: @text-shadow;
-        background-color: @B40;
-        border-color: @B40;
-        border-radius: @ald-border-radius-base;
+        //text-shadow: @text-shadow;
+        color: @Button-primary-color;
+        background-color: @Button-primary-bgColor;
+        border-color: @Button-primary-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @ND0;
-        background-color: @B20;
-        border-color: @B20;
+      &:active {
+        color: @Button-primary-color-active;
+        background-color: @Button-primary-bgColor-active;
+        border-color: @Button-primary-bgColor-active;
       }
 
+      &.ant-btn-loading,
       &[disabled] {
-        color: @NL80;
-        background-color: @NL90;
-        border-color: transparent;
+        color: @Button-primary-color-disable;
+        background-color: @Button-primary-bgColor-disable;
+        border-color: @Button-primary-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @NL90;
-          border-color: transparent;
+          color: @Button-primary-color-disable;
+          background-color: @Button-primary-bgColor-disable;
+          border-color: @Button-primary-bgColor-disable;
         }
       }
     }
 
-    &-dangerous.ant-btn-primary {
-      color: @ND0;
-      text-shadow: @text-shadow;
-      background-color: @SC40;
-      border-color: @SC40;
+    &-dangerous {
+      color: @Button-dangerous-color;
+      background-color: @Button-dangerous-bgColor;
+      border-color: @Button-dangerous-bgColor;
       box-shadow: unset;
 
       &:focus {
-        color: @ND0;
-        text-shadow: @text-shadow;
-        background-color: @SC40;
-        border-color: @SC40;
+        color: @Button-dangerous-color;
+        background-color: @Button-dangerous-bgColor;
+        border-color: @Button-dangerous-bgColor;
         box-shadow: unset;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @ND0;
-        background-color: @SC20;
-        border-color: @SC20;
+      &:active {
+        color: @Button-dangerous-color-active;
+        background-color: @Button-dangerous-bgColor-active;
+        border-color: @Button-dangerous-bgColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: @NL90;
-        border-color: transparent;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-dangerous-color-disable;
+        background-color: @Button-dangerous-bgColor-disable;
+        border-color: @Button-dangerous-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @NL90;
-          border-color: transparent;
+          color: @Button-dangerous-color-disable;
+          background-color: @Button-dangerous-bgColor-disable;
+          border-color: @Button-dangerous-bgColor-disable;
         }
       }
     }
 
+    &-default,
     &-secondary {
-      color: @NL30;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @NL90;
-      border-radius: @ald-border-radius-base;
+      padding: @Button-border-padding;
+      color: @Button-secondary-color;
+      background-color: @Button-secondary-bgColor;
+      border: 1px solid;
+      border-color: @Button-secondary-borderColor;
       box-shadow: none;
 
       &:focus {
-        color: @NL30;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @NL90;
-        border-radius: @ald-border-radius-base;
+        color: @Button-secondary-color;
+        //text-shadow: @text-shadow;
+        background-color: @Button-secondary-bgColor;
+        border-color: @Button-secondary-borderColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @NL30;
-        background-color: @NL97;
-        border-color: @NL90;
+      &:active {
+        color: @Button-secondary-color-active;
+        background-color: @Button-secondary-bgColor-active;
+        border-color: @Button-secondary-borderColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: @BG100;
-        border-color: @NL90;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-secondary-color-disable;
+        background-color: @Button-secondary-bgColor-disable;
+        border-color: @Button-secondary-borderColor;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @BG100;
-          border-color: @NL90;
+          color: @Button-secondary-color-disable;
+          background-color: @Button-secondary-bgColor-disable;
+          border-color: @Button-secondary-borderColor;
         }
       }
     }
 
     &-text {
-      color: @NL30;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @BG100;
-      border-radius: @ald-border-radius-base;
+      color: @Button-text-color;
+      background-color: @Button-text-bgColor;
+      border: none;
       box-shadow: none;
 
       &:focus {
-        color: @NL30;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @BG100;
-        border-radius: @ald-border-radius-base;
+        color: @Button-text-color;
+        background-color: @Button-text-bgColor;
         box-shadow: none;
       }
 
       &:hover,
       &:active,
       &.ant-btn-loading {
-        // border-color: @NL97;
-        color: @NL30;
-        background-color: @NL97;
+        color: @Button-text-color-active;
+        background-color: @Button-text-bgColor-active;
       }
 
       &[disabled] {
-        color: @NL80;
-        background-color: transparent;
-        border-color: transparent;
+        color: @Button-text-color-disable;
+        background-color: @Button-text-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: transparent;
-          border-color: transparent;
+          color: @Button-text-color-disable;
+          background-color: @Button-text-bgColor-disable;
         }
       }
     }
 
     &-link {
-      color: @B40;
+      color: @Button-link-color;
       font-weight: 400;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @BG100;
-      border-radius: @ald-border-radius-base;
+      //text-shadow: @text-shadow;
+      background-color: @Button-link-bgColor;
+      border-color: @Button-link-bgColor;
       box-shadow: none;
 
       &:focus {
-        color: @B40;
+        color: @Button-link-color;
         font-weight: 400;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @BG100;
-        border-radius: @ald-border-radius-base;
+        //text-shadow: @text-shadow;
+        background-color: @Button-link-bgColor;
+        border-color: @Button-link-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @B20;
-        background-color: @BG100;
-        border-color: @BG100;
+      &:active {
+        color: @Button-link-color-active;
+        background-color: @Button-link-bgColor-active;
+        border-color: @Button-link-bgColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: transparent;
-        border-color: transparent;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-link-color-disable;
+        background-color: @Button-link-bgColor-disable;
+        border-color: @Button-link-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: transparent;
-          border-color: transparent;
+          color: @Button-link-color-disable;
+          background-color: @Button-link-bgColor-disable;
+          border-color: @Button-link-bgColor-disable;
         }
       }
     }
 
-    &-icon-only {
+    &.ant-btn-icon-only {
       justify-content: center;
-      width: @ald-height-base;
-      height: @ald-height-base;
+      width: @height-base;
+      height: @height-base;
       padding: 0;
       vertical-align: bottom;
 
@@ -260,44 +251,86 @@
 
     &-circle {
       justify-content: center;
-      width: @ald-height-base;
+      width: @height-base;
       min-width: auto;
       padding: 0;
       border-radius: 50%;
     }
 
-    &-lg {
+    &-large {
+      min-width: auto;
+      height: @Button-height-large;
+      font-size: @Button-text-size-large;
+      border-radius: @Button-borderRadius-large;
+
+      &.ant-btn-icon-only {
+        width: @Button-height-large;
+        min-width: auto;
+        height: @Button-height-large;
+        border-radius: @Button-borderRadius-large;
+      }
+
+      &.ant-btn-circle {
+        width: @Button-height-large;
+        height: @Button-height-large;
+        border-radius: 50%;
+      }
+    }
+
+    &-middle {
       min-width: auto;
-      height: 32px;
-      font-size: 14px;
+      height: @Button-height-middle;
+      font-size: @Button-text-size-middle;
+      border-radius: @Button-borderRadius-middle;
 
       &.ant-btn-icon-only {
-        width: 32px;
+        width: @Button-height-middle;
         min-width: auto;
-        height: 32px;
+        height: @Button-height-middle;
+        border-radius: @Button-borderRadius-middle;
+      }
+
+      &.ant-btn-circle {
+        width: @Button-height-middle;
+        height: @Button-height-middle;
+        border-radius: 50%;
+      }
+    }
+
+    &-small {
+      height: @Button-height-small;
+      font-size: @Button-text-size-small;
+      line-height: 22px;
+      border-radius: @Button-borderRadius-small;
+
+      &.ant-btn-icon-only {
+        width: @Button-height-small;
+        height: @Button-height-small;
+        border-radius: @Button-borderRadius-small;
       }
 
       &.ant-btn-circle {
-        width: 32px;
-        height: 32px;
+        width: @Button-height-small;
+        height: @Button-height-small;
         border-radius: 50%;
       }
     }
 
-    &-sm {
-      height: 24px;
+    &-mini {
+      height: @Button-height-mini;
+      font-size: @Button-text-size-mini;
       line-height: 22px;
-      border-radius: @ald-border-radius-sm;
+      border-radius: @Button-borderRadius-mini;
 
       &.ant-btn-icon-only {
-        width: 24px;
-        height: 24px;
-        border-radius: @ald-border-radius-sm;
+        width: @Button-height-mini;
+        height: @Button-height-mini;
+        border-radius: @Button-borderRadius-mini;
       }
 
       &.ant-btn-circle {
-        width: 32px;
-        height: 32px;
+        width: @Button-height-mini;
+        height: @Button-height-mini;
         border-radius: 50%;
       }
     }

package/lib/Button/style/variables.less

@@ -0,0 +1,60 @@
+@ald-prefix: ald;
+@ald-iconfont-css-prefix: aldicon;
+
+@Button-padding: 0 12px;
+@Button-border-padding: 0 11px;
+
+/** size控制 **/
+@Button-height-large: 36px;
+@Button-text-size-large: 16px;
+@Button-borderRadius-large: 8px;
+
+@Button-height-middle: 32px;
+@Button-text-size-middle: 14px;
+@Button-borderRadius-middle: 6px;
+
+@Button-height-small: 28px;
+@Button-text-size-small: 12px;
+@Button-borderRadius-small: 4px;
+
+@Button-height-mini: 24px;
+@Button-text-size-mini: 12px;
+@Button-borderRadius-mini: 4px;
+
+/****  type控制  ****/
+@Button-primary-bgColor: @B60;
+@Button-primary-bgColor-active: @B50;
+@Button-primary-bgColor-disable: @B90;
+@Button-primary-color: @ND0;
+@Button-primary-color-active: @ND0;
+@Button-primary-color-disable: @ND0;
+
+@Button-dangerous-bgColor: @SC60;
+@Button-dangerous-bgColor-active: @SC50;
+@Button-dangerous-bgColor-disable: @SC90;
+@Button-dangerous-color: @ND0;
+@Button-dangerous-color-active: @ND0;
+@Button-dangerous-color-disable: @ND0;
+
+@Button-secondary-bgColor: @BG97;
+@Button-secondary-bgColor-active: @BG95;
+@Button-secondary-bgColor-disable: @BG97;
+@Button-secondary-color: @NL30;
+@Button-secondary-color-active: @B60;
+@Button-secondary-color-disable: @NL80;
+@Button-secondary-borderColor: @NL90;
+@Button-secondary-borderColor-active: @B60;
+
+@Button-text-bgColor: @BG100;
+@Button-text-bgColor-active: @NL97;
+@Button-text-bgColor-disable: @BG100;
+@Button-text-color: @NL30;
+@Button-text-color-active: @B60;
+@Button-text-color-disable: @NL80;
+
+@Button-link-bgColor: @BG100;
+@Button-link-bgColor-active: @BG100;
+@Button-link-bgColor-disable: @BG100;
+@Button-link-color: @B60;
+@Button-link-color-active: @B50;
+@Button-link-color-disable: @B90;

package/lib/Checkbox/style/index.less

@@ -2,6 +2,8 @@
 
 .ald-checkbox {
   .ant-checkbox-inner {
+    width: 16px;
+    height: 16px;
     background-color: @BG97;
     border-color: @NL60;
     border-radius: 4px;
@@ -34,6 +36,12 @@
   }
 
   .ant-checkbox-disabled {
+    cursor: default;
+
+    & + span {
+      cursor: default;
+    }
+
     .ant-checkbox-inner {
       background-color: @NL90;
       border-color: @NL90;
@@ -72,8 +80,15 @@
     border-color: @B60;
   }
 
-  .ant-checkbox:hover .ant-checkbox-inner,
   .ant-checkbox-input:focus + .ant-checkbox-inner {
+    border-color: @NL60;
+  }
+
+  .ant-checkbox:hover .ant-checkbox-inner {
     border-color: @B60;
   }
 }
+
+.ald-checkbox.ant-checkbox-wrapper-disabled {
+  cursor: default;
+}

package/lib/ConfigProvider/index.d.ts

@@ -1,3 +1,4 @@
 import { ConfigProvider } from 'antd';
+export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, DirectionType, ConfigConsumerProps, configConsumerProps, globalConfig, } from 'antd/lib/config-provider/';
 export type { ConfigProviderProps } from 'antd/lib/config-provider';
 export default ConfigProvider;