@kdcloudjs/kdesign 1.0.2

package/es/radio/style/index.less

@@ -0,0 +1,315 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@radio-prefix-cls: ~'@{kd-prefix}-radio';
+@radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
+@radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
+@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
+@radio-focus-shadow: 0 0 0 3px rgba(@theme-color, 10%);
+
+// 默认类型（单选项）
+.@{radio-prefix-cls} {
+  .reset-component();
+
+  // 默认状态
+  position: relative;
+  display: inline-block;
+  padding-left: @radio-circle-size;
+  margin-right: @radio-margin-right;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  color: @radio-font-color;
+  font-size: @radio-font-size;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: @radio-circle-size;
+    width: @radio-circle-size;
+    content: '';
+    border-radius: 50%;
+    box-sizing: border-box;
+    border: @radio-border-width solid @strong-border-color;
+    background-color: @white;
+    transform: translateY(-50%);
+    transition: border-color @transition-duration, box-shadow @transition-duration;
+  }
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 2px;
+    width: @radio-circle-size - 4px;
+    height: @radio-circle-size - 4px;
+    content: '';
+    border-radius: 50%;
+    background-color: @theme-color;
+    transform: translateY(-50%);
+    animation: kdRadioLeaveEffect calc(@transition-duration - 0.1s) @ease both;
+    transition: all @transition-duration @ease;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  & > span {
+    padding: 0 6px;
+  }
+
+  // 悬停状态
+  &:hover {
+    // color: @theme-color;
+    &::before {
+      border-color: @theme-color;
+    }
+  }
+
+  // 选中状态
+  &-checked {
+    &::before {
+      border-color: @theme-color;
+    }
+
+    &:focus-within::before {
+      box-shadow: @radio-focus-shadow;
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      width: @radio-circle-size - 4px;
+      height: @radio-circle-size - 4px;
+      content: '';
+      border-radius: 50%;
+      background-color: @theme-color;
+      transform: translateY(-50%);
+      animation: kdRadioEffect calc(@transition-duration - 0.1s) @ease both;
+      transition: all calc(@transition-duration - 0.1s) @ease;
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  // 禁用状态
+  &-disabled,
+  &-disabled:hover {
+    cursor: not-allowed;
+    color: @disabled-color;
+
+    &::before {
+      border-color: @disabled-color;
+      background-color: @disabled-contain-bg;
+      box-shadow: none;
+    }
+
+    &::after {
+      background-color: @disabled-color;
+      animation: none;
+    }
+  }
+}
+
+// 方框类型（单选框）
+.@{radio-square-prefix-cls} {
+  .reset-component();
+
+  // 默认状态
+  position: relative;
+  display: inline-block;
+  height: @radio-square-height;
+  padding: @radio-square-padding;
+  margin-right: @radio-margin-right;
+  line-height: @radio-square-height - 2;
+  vertical-align: middle;
+  color: @radio-font-color;
+  font-size: @radio-font-size;
+  cursor: pointer;
+  background-color: @white;
+  overflow: hidden;
+  border-radius: @radius-size;
+  border: @radio-border-width solid @strong-border-color;
+  transition: all @transition-duration;
+
+  &::after {
+    position: absolute;
+    right: -1 * (@radio-square-height - 10px) / 2;
+    bottom: -1 * (@radio-square-height - 10px) / 2;
+    width: @radio-square-height - 10px;
+    height: @radio-square-height - 10px;
+    content: '';
+    background-color: @theme-color;
+    transform: rotate(45deg);
+    animation: kdRadioSquareLeaveEffect calc(@transition-duration - 0.1s) @ease both;
+    transition: all @transition-duration @ease;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &-input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // 悬停状态
+  &:hover {
+    color: @theme-color;
+    border-color: @theme-color;
+  }
+
+  // 选中状态
+  &-checked {
+    border-color: @theme-color;
+    &:focus-within {
+      box-shadow: @radio-focus-shadow;
+    }
+    &::after {
+      position: absolute;
+      right: -1 * (@radio-square-height - 10px) / 2;
+      bottom: -1 * (@radio-square-height - 10px) / 2;
+      width: @radio-square-height - 10px;
+      height: @radio-square-height - 10px;
+      content: '';
+      background-color: @theme-color;
+      transform: rotate(45deg);
+      animation: kdRadioSquareEffect calc(@transition-duration - 0.1s) @ease both;
+      transition: all calc(@transition-duration - 0.1s) @ease;
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    color: @disabled-color;
+    border-color: @strong-border-color;
+    background-color: @disabled-contain-bg;
+    box-shadow: none;
+    cursor: not-allowed;
+
+    &::after {
+      background-color: @disabled-color;
+      animation: none;
+    }
+  }
+}
+
+// 按钮类型（切换按钮）
+.@{radio-button-prefix-cls} {
+  .reset-component();
+
+  // 默认状态
+  position: relative;
+  display: inline-block;
+  height: @radio-button-height;
+  padding: @radio-button-padding;
+  line-height: @radio-button-height;
+  vertical-align: middle;
+  color: @radio-font-color;
+  font-size: @radio-font-size;
+  cursor: pointer;
+  background-color: @white;
+  border: @radio-border-width solid @strong-border-color;
+  border-left: none;
+  transition: all @transition-duration;
+
+  &:first-child {
+    border-radius: @radius-size 0 0 @radius-size;
+    border-left: @radio-border-width solid @strong-border-color;
+    &::before {
+      content: none;
+    }
+  }
+
+  &:last-child {
+    border-radius: 0 @radius-size @radius-size 0;
+  }
+
+  &::before {
+    z-index: 10;
+    position: absolute;
+    top: -1 * @radio-border-width;
+    left: -1 * @radio-border-width;
+    height: @radio-button-height;
+    width: @radio-border-width;
+    content: '';
+    background-color: @strong-border-color;
+  }
+
+  &-input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+  }
+
+  // 悬停状态
+  &:hover {
+    color: @theme-color;
+  }
+
+  // 选中状态
+  &-checked {
+    z-index: 1;
+    color: @white;
+    border-color: @theme-color;
+    background-color: @theme-color;
+
+    &:focus-within {
+      box-shadow: @radio-focus-shadow;
+    }
+
+    &:hover {
+      color: @white;
+    }
+
+    &::before {
+      background-color: @theme-color;
+    }
+
+    &:first-child {
+      border-left-color: @theme-color;
+      &::before {
+        content: none;
+      }
+    }
+
+    & + .@{radio-button-prefix-cls} {
+      &::before {
+        content: none;
+      }
+    }
+
+    &.@{radio-button-prefix-cls}-disabled {
+      background-color: @strong-border-color;
+      border-left-color: @strong-border-color;
+      box-shadow: none;
+    }
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    color: @disabled-color;
+    border-color: @strong-border-color;
+    // background-color: @disabled-contain-bg;
+    cursor: not-allowed;
+  }
+}

package/es/rate/index.d.ts

@@ -0,0 +1,3 @@
+import Rate from './rate';
+export { RateProps } from './rate';
+export default Rate;

package/es/rate/index.js

@@ -0,0 +1,2 @@
+import Rate from './rate';
+export default Rate;

package/es/rate/rate.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export declare const SizeTypes: ["large", "middle", "small"];
+export declare type size = typeof SizeTypes[number];
+export interface RateProps {
+    allowHalf?: boolean;
+    icon?: React.ReactNode | ((props: any) => React.ReactNode);
+    activeIcon?: React.ReactNode | ((props: any) => React.ReactNode);
+    count?: number;
+    defaultValue?: number;
+    value?: number;
+    onlyActiveCurrent?: boolean;
+    disabled?: boolean;
+    color?: string;
+    size?: size;
+    className?: string;
+    style?: React.CSSProperties;
+    onBlur?: () => void;
+    onChange?: (value: number) => void;
+    onHoverChange?: (value: number) => void;
+    onFocus?: () => void;
+}
+declare const Rate: React.FC<RateProps>;
+export default Rate;

package/es/rate/rate.js

@@ -0,0 +1,278 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Number$isInteger from "@babel/runtime-corejs3/core-js-stable/number/is-integer";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import * as React from 'react';
+import classnames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import devWarning from '../_utils/devwarning';
+import { tuple } from '../_utils/type';
+export var SizeTypes = tuple('large', 'middle', 'small');
+
+var Rate = function Rate(props) {
+  var _context2, _classnames2;
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _getCompProps = getCompProps('Rate', userDefaultProps, props),
+      customPrefixcls = _getCompProps.prefixCls,
+      allowHalf = _getCompProps.allowHalf,
+      icon = _getCompProps.icon,
+      activeIcon = _getCompProps.activeIcon,
+      count = _getCompProps.count,
+      defaultValue = _getCompProps.defaultValue,
+      value = _getCompProps.value,
+      onlyActiveCurrent = _getCompProps.onlyActiveCurrent,
+      disabled = _getCompProps.disabled,
+      color = _getCompProps.color,
+      size = _getCompProps.size,
+      className = _getCompProps.className,
+      style = _getCompProps.style,
+      onBlur = _getCompProps.onBlur,
+      onChange = _getCompProps.onChange,
+      onHoverChange = _getCompProps.onHoverChange,
+      onFocus = _getCompProps.onFocus;
+
+  devWarning(SizeTypes.indexOf(size) === -1, 'Rate', "cannot found SizeType '".concat(size, "'")); // className前缀
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'rate', customPrefixcls);
+
+  var _React$useState = React.useState(defaultValue),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedValue = _React$useState2[0],
+      setSelectedValue = _React$useState2[1]; // 当前选中的值，包含一位小数
+
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeNumber = _React$useState4[0],
+      setActiveNumber = _React$useState4[1]; // 鼠标悬停icon位置对应的值
+
+
+  React.useEffect(function () {
+    if (value && value !== 0 && value !== selectedValue) {
+      setSelectedValue(value);
+    }
+  }, [value, selectedValue]); // const shouldSetValue = (value: number) => {
+  //   return value && value !== 0 && value !== selectedValue
+  // }
+
+  var handleClick = React.useCallback(function (value) {
+    setSelectedValue(value);
+    onChange && onChange(value);
+  }, [onChange]);
+  var handleMouseEnter = React.useCallback(function (value) {
+    setActiveNumber(value);
+    onHoverChange && onHoverChange(value);
+  }, [onHoverChange]);
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setActiveNumber(0);
+  };
+
+  var handleFocus = React.useCallback(function () {
+    onFocus && onFocus();
+  }, [onFocus]);
+  var handleBlur = React.useCallback(function () {
+    onBlur && onBlur();
+  }, [onBlur]);
+  /**
+   *获取图标
+   * @param icon
+   * @param index
+   */
+
+  var getIcon = function getIcon(icon, activeIcon, index, isActive) {
+    if (activeIcon && isActive) {
+      icon = activeIcon;
+    }
+
+    if (typeof icon === 'function') {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-icon-wrapper")
+      }, icon(index));
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-icon-second-content")
+    }, icon);
+  };
+  /**
+   * 获取第一个图标状态
+   * @param value
+   * @param index
+   * @param onlyActiveCurrent
+   * @param isSecondIconActive
+   */
+
+
+  var getFirstIconStatus = function getFirstIconStatus(value, index, onlyActiveCurrent, secondIconStatus) {
+    var half = 0.5;
+
+    var isInteger = _Number$isInteger(value);
+
+    value = transferValue(value, index);
+    var isActiveAllLeft = value >= index || value === index - half;
+    var isActiveCurrent = value === index;
+    var isActiveFirst = value === index - half;
+    var mark;
+
+    if (secondIconStatus) {
+      // 第二个图标被激活则第一个也必须激活
+      mark = true;
+    } else if (!onlyActiveCurrent) {
+      // 激活点击位置所有左侧图标
+      mark = isActiveAllLeft;
+    } else if (isInteger) {
+      // 点击全图标只激活当前点击图标
+      mark = isActiveCurrent;
+    } else {
+      mark = isActiveFirst; // 点击半个图标只激活当前点击图标
+    }
+
+    return mark;
+  };
+
+  var transferValue = function transferValue(value, index) {
+    var half = 0.5;
+
+    if (index - value === half) {
+      return value;
+    } else {
+      return Math.round(value);
+    }
+  };
+  /**
+   * 获取第二个图标状态
+   * @param value
+   * @param index
+   * @param onlyActiveCurrent
+   */
+
+
+  var getSecondIconStatus = function getSecondIconStatus(value, index, onlyActiveCurrent) {
+    if (!onlyActiveCurrent) {
+      // 激活所有左侧图标
+      return value >= index;
+    } else {
+      return value === index; // 只激活当前点击图标
+    }
+  };
+  /**
+   * 返回图标的样式
+   * @param isActive
+   */
+
+
+  var getIconStyle = function getIconStyle(isActive) {
+    if (isActive) return {
+      color: color
+    };
+  };
+  /**
+   *
+   * @param selectActive 当前图标是否被选中
+   * @param mouseActive 当前图标是否触发鼠标hover效果
+   */
+
+
+  var isSelected = function isSelected(selectActive, mouseActive) {
+    return activeNumber !== 0 ? mouseActive : selectActive;
+  };
+
+  var getIconClassName = function getIconClassName(name, isActive) {
+    var _context, _classnames;
+
+    return classnames((_classnames = {}, _defineProperty(_classnames, _concatInstanceProperty(_context = "".concat(prefixCls, "-icon-")).call(_context, name), true), _defineProperty(_classnames, "".concat(prefixCls, "-icon-selected"), isActive), _classnames));
+  };
+  /**
+   * 获取图标视图
+   */
+
+
+  var getRateIconView = function getRateIconView() {
+    var half = 0.5;
+    var rateIconsView = [];
+
+    var _loop = function _loop(i) {
+      var isMouseOnSecondIcon = getSecondIconStatus(activeNumber, i, onlyActiveCurrent);
+      var isMouseOnFirstIcon = getFirstIconStatus(activeNumber, i, onlyActiveCurrent, isMouseOnSecondIcon);
+      var isSecondSelected = getSecondIconStatus(selectedValue, i, onlyActiveCurrent);
+      var isFirstSelected = getFirstIconStatus(selectedValue, i, onlyActiveCurrent, isSecondSelected);
+      var isFirstActive = isSelected(isFirstSelected, isMouseOnFirstIcon);
+      var isSecondActive = isSelected(isSecondSelected, isMouseOnSecondIcon);
+      var IconStyle = getIconStyle(isFirstActive);
+      var firstIconStyle = getIconStyle(isFirstActive);
+      var firstIconClassName = getIconClassName('first', isFirstActive);
+      var secondIconClassName = getIconClassName('second', isSecondActive);
+      rateIconsView.push( /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-item"),
+        key: i
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-icon-view")
+      }, allowHalf && /*#__PURE__*/React.createElement("span", {
+        style: firstIconStyle,
+        className: firstIconClassName,
+        onClick: function onClick() {
+          return handleClick(i - half);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return handleMouseEnter(i - half);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleMouseLeave();
+        }
+      }, getIcon(icon, activeIcon, i, isFirstActive)), /*#__PURE__*/React.createElement("span", {
+        style: IconStyle,
+        className: secondIconClassName,
+        onClick: function onClick() {
+          return handleClick(i);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return handleMouseEnter(i);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleMouseLeave();
+        }
+      }, getIcon(icon, activeIcon, i, isSecondActive)))));
+    };
+
+    for (var i = 1; i <= count; i++) {
+      _loop(i);
+    }
+
+    return rateIconsView;
+  };
+  /**
+   * 获取图标下方情感描述文字
+   * @param index 图标对应索引
+   */
+  //   const getEmotionalTextView = (index:number):React.ReactNode => {
+  //     return (
+  //         <span className={`${prefixCls}-item-text`}>
+  //           {emotionalText[index] ? emotionalText[index] : null}
+  //         </span>
+  //     )
+  //   }
+
+
+  var getRateClassName = classnames(prefixCls, className, (_classnames2 = {}, _defineProperty(_classnames2, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classnames2, "".concat(prefixCls, "-disabled"), disabled), _classnames2));
+  var rate = /*#__PURE__*/React.createElement("span", {
+    className: getRateClassName,
+    style: style,
+    onMouseLeave: function onMouseLeave() {
+      return handleBlur();
+    },
+    onMouseEnter: function onMouseEnter() {
+      return handleFocus();
+    }
+  }, getRateIconView());
+  return rate;
+};
+
+Rate.displayName = 'Rate';
+export default Rate;

package/es/rate/style/css.js

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