@aloudata/aloudata-design 0.3.2 → 0.3.5

package/lib/Radio/components/Radio/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Radio;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _Group = require("../Group");
+
+var _useId = require("../../../_utils/hooks/useId");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 Radio(props) {
+  var groupContext = (0, _react.useContext)(_Group.RadioGroupContext);
+  var labelRef = (0, _react.useRef)(null);
+  var id = (0, _useId.getUUID)().toString();
+
+  var radioProps = _objectSpread({}, props);
+
+  if (!_lodash.default.isEmpty(groupContext)) {
+    radioProps.disabled = props.disabled;
+    radioProps.checked = !props.disabled && groupContext.value === props.value;
+  } else {
+    radioProps.checked = !('checked' in props) ? props.defaultChecked : radioProps.checked;
+  } // 设置input外层盒子的class
+
+
+  var aldRadioClass = (0, _classnames.default)('ald-radio', {
+    'ald-radio-checked': radioProps.checked,
+    'ald-radio-disabled': radioProps.disabled
+  }); // 根据属性设置最外层的class
+
+  var getWrapperClass = function getWrapperClass() {
+    var otherClass = '';
+
+    if (groupContext.type === 'button') {
+      if (groupContext.radioGroupStyle === 'filled') {
+        otherClass = 'ald-radio-button-wrapper-filled';
+      } else {
+        otherClass = 'ald-radio-button-wrapper-border';
+      }
+    } else if (groupContext.type === 'iconButton') {
+      if (groupContext.radioGroupStyle === 'filled') {
+        otherClass = 'ald-radio-icon-button-wrapper-filled';
+      } else {
+        otherClass = 'ald-radio-icon-button-wrapper-border';
+      }
+    } else {
+      // 当type未设置或者是radio时
+      otherClass = 'ald-radio-wrapper';
+    }
+
+    return (0, _classnames.default)('ald-radio-label', otherClass, {
+      'ald-radio-wrapper-checked': radioProps.checked,
+      'ald-radio-wrapper-disabled': radioProps.disabled
+    });
+  }; // filled button模式下，更改滑块的位置
+
+
+  (0, _react.useEffect)(function () {
+    var _groupContext$sliderR;
+
+    if (radioProps.checked && (groupContext === null || groupContext === void 0 ? void 0 : (_groupContext$sliderR = groupContext.sliderRef) === null || _groupContext$sliderR === void 0 ? void 0 : _groupContext$sliderR.current) && (labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
+      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft, "px");
+      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
+    }
+  }, [groupContext.sliderRef, radioProps.checked]);
+
+  var onChange = function onChange() {
+    if (groupContext === null || groupContext === void 0 ? void 0 : groupContext.onChange) {
+      // console.log(e);
+      // input事件的value会被toString，所以此处进行一个覆盖
+      groupContext.onChange(props.value);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: getWrapperClass(),
+    htmlFor: id,
+    ref: labelRef
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: aldRadioClass
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: id,
+    type: "radio",
+    className: "ald-radio-input",
+    checked: radioProps.checked,
+    disabled: radioProps.disabled,
+    value: props.value,
+    onChange: onChange
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "ald-radio-inner"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "ald-radio-desc"
+  }, props.children));
+}

package/lib/Radio/index.d.ts

@@ -1,3 +1,10 @@
-import { Radio } from 'antd';
-export { RadioGroupButtonStyle, RadioGroupOptionType, RadioGroupProps, RadioGroupContextProps, RadioProps, RadioChangeEventTarget, RadioChangeEvent, } from 'antd/lib/radio';
+/// <reference types="react" />
+import RadioGroup from './components/Group';
+import { IRadioProps } from './interface/radio';
+export type { IRadioProps as RadioProps } from './interface/radio';
+export type { IRadioGroupProps as RadioGroupProps } from './interface/radioGroup';
+interface IRadioType extends React.FC<IRadioProps> {
+    Group: typeof RadioGroup;
+}
+declare const Radio: IRadioType;
 export default Radio;

package/lib/Radio/index.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("antd/es/radio/style");
+var _Radio = _interopRequireDefault(require("./components/Radio"));
 
-var _radio = _interopRequireDefault(require("antd/es/radio"));
+var _Group = _interopRequireDefault(require("./components/Group"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = _radio.default;
+var Radio = _Radio.default;
+Radio.Group = _Group.default;
+var _default = Radio;
 exports.default = _default;

package/lib/Radio/interface/radio.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface IRadioProps {
+    /**
+     * @description  当前元素是否选中
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * @description  当前元素是否默认选中
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * @description  当前元素是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description  当前元素的value值，与Group中的value匹配
+     * @default -
+     */
+    value?: any;
+    children?: ReactNode[] | ReactNode;
+}

package/lib/Radio/interface/radio.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Radio/interface/radioGroup.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export declare type TRadioGroupStyle = 'border' | 'filled';
+export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
+export declare type TRadioType = 'radio' | 'button' | 'iconButton';
+export interface IRadioGroupProps {
+    /**
+     * @description 按钮组的样式 'border' ｜ 'filled'
+     * @default  'border'
+     */
+    radioGroupStyle?: TRadioGroupStyle;
+    /**
+     * @description 按钮组的默认选项，按钮组为非受控组件请勿使用value设置默认值
+     * @default -
+     */
+    defaultValue?: any;
+    /**
+     * @description 设置按钮组的大小，有'large' | 'middle'('default') | 'small
+     * @default 'middle'
+     */
+    size?: TRadioSize;
+    /**
+     * @description 当按钮组为受控组件时，设置按钮组的当前选中的值
+     * @default -
+     */
+    value?: any;
+    /**
+     * @description 当按钮组选中值变化时的回调函数
+     * @default -
+     */
+    onChange?: (selectedValue: any) => void;
+    /**
+     * @description 设置按钮组的类型 'radio' | 'button' | 'iconButton'
+     * @default 'radio'
+     */
+    type?: TRadioType;
+    /**
+     * @description 按钮组最外层盒子的类名
+     * @default -
+     */
+    className?: string;
+    children?: ReactNode[] | ReactNode;
+}

package/lib/Radio/interface/radioGroup.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Radio/style/index.less

@@ -1 +1,349 @@
 @import '../../style/index.less';
+
+@radio-icon-button-padding-large: 10px;
+@radio-icon-button-padding-middle: 9px;
+@radio-icon-button-padding-small: 8px;
+@radio-group-height-large: 36px;
+@radio-group-height-middle: 32px;
+@radio-group-height-small: 28px;
+@radio-button-padding: 12px;
+
+// Radio组件基础样式
+.ald-radio-wrapper {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: start;
+  height: 20px;
+  padding: 0;
+  cursor: pointer;
+}
+
+.ald-radio {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.ald-radio-input {
+  position: absolute;
+  z-index: 1;
+  width: 1px;
+  height: 1px;
+  cursor: pointer;
+  opacity: 0;
+  inset: 0;
+}
+
+.ald-radio-inner {
+  position: relative;
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  border: 1px solid @NL90;
+  border-radius: 50%;
+}
+
+.ald-radio-desc {
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: @NL0;
+  font-weight: 400;
+}
+// 绘制选中时的圆圈样式
+.ald-radio-checked > .ald-radio-inner {
+  background-color: @B60;
+  border: 0;
+  transform: background 0.5s ease;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    background-color: @ND0;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+  }
+}
+// 禁用状态下的样式
+.ald-radio-disabled > .ald-radio-inner {
+  background-color: @NL90;
+  border: 0;
+}
+
+.ald-radio-disabled.ald-radio-checked > .ald-radio-inner::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: @NL90;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  content: '';
+}
+// 禁用的样式
+.ald-radio-label.ald-radio-wrapper-disabled {
+  cursor: default;
+
+  .ald-radio-desc {
+    color: @NL60;
+  }
+}
+// RadioGroup基础样式
+.ald-radio-group {
+  position: relative;
+
+  .ald-radio-label .ald-radio-desc {
+    color: @NL30;
+    font-weight: 500;
+    font-size: @font-size-middle;
+    font-style: normal;
+  }
+
+  &.ald-radio-group-radio {
+    .ald-radio-desc {
+      color: @NL0;
+      font-weight: 400;
+    }
+  }
+
+  .ald-radio-wrapper:not(:first-child) {
+    margin-left: 16px;
+  }
+}
+
+// filled填充样式下的滑块样式
+.ald-radio-filled-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: 100%;
+  background: @BG100;
+  border: 1px solid @NL90;
+  border-radius: @border-radius-middle;
+  transition: width, left, height 0.3s, 0.3s, 0.3s ease;
+}
+
+// button状态下的样式
+.ald-radio-group-button,
+.ald-radio-group-icon-button {
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: min-content;
+  width: auto;
+  padding: 0;
+  overflow: hidden;
+
+  .ald-radio-label {
+    color: @NL30;
+    font-size: @font-size-middle;
+  }
+  // 按钮样式禁用的文字颜色
+  .ald-radio-wrapper-disabled {
+    .ald-radio-desc {
+      color: @NL80;
+    }
+  }
+  // border的样式
+  .ald-radio-button-wrapper-border {
+    padding: 0 @radio-button-padding - 1;
+  }
+
+  .ald-radio-button-wrapper-border,
+  .ald-radio-icon-button-wrapper-border {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: @BG100;
+    border: 1px solid @NL90;
+    border-right: 1px solid transparent;
+    cursor: pointer;
+
+    &:first-child {
+      border-radius: 6px 0 0 6px;
+    }
+
+    &:last-child {
+      border-right: 1px solid @NL90;
+      border-radius: 0 6px 6px 0;
+    }
+
+    .ald-radio {
+      width: 0;
+
+      .ald-radio-input,
+      .ald-radio-inner {
+        width: 0;
+        border: 0;
+      }
+    }
+
+    .ald-radio-checked > .ald-radio-inner::after {
+      width: 0;
+    }
+  }
+
+  // button选中状态下的样式
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border {
+    background: @B98;
+    transition: background 0.5s ease;
+
+    .ald-radio-desc {
+      position: relative;
+      color: @NL0;
+      transition: text-shadow 0.5s ease;
+    }
+  }
+
+  // filled样式的button
+  .ald-radio-button-wrapper-filled {
+    padding: 0 @radio-button-padding;
+  }
+
+  .ald-radio-button-wrapper-filled,
+  .ald-radio-icon-button-wrapper-filled {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: @BG90;
+    cursor: pointer;
+
+    &:first-of-type {
+      border-radius: @border-radius-middle 0 0 @border-radius-middle;
+    }
+
+    &:last-of-type {
+      border-radius: 0 @border-radius-middle @border-radius-middle 0;
+    }
+
+    .ald-radio {
+      width: 0;
+
+      .ald-radio-input,
+      .ald-radio-inner {
+        width: 0;
+        border: 0;
+      }
+    }
+
+    .ald-radio-checked > .ald-radio-inner::after {
+      width: 0;
+    }
+  }
+
+  .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
+  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filled {
+    position: relative;
+
+    .ald-radio-desc {
+      position: relative;
+      z-index: 2;
+      color: @NL0;
+    }
+  }
+  // 各种大小
+  &.ald-radio-group-middle {
+    height: @radio-group-height-middle;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-middle;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-middle - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-middle;
+      }
+    }
+  }
+
+  &.ald-radio-group-small {
+    height: @radio-group-height-small;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-small;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-small - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-small;
+      }
+    }
+
+    .ald-radio-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filled {
+      &:first-of-type {
+        border-radius: @border-radius-small 0 0 @border-radius-small;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @border-radius-small 0 @border-radius-small 0;
+      }
+    }
+
+    .ald-radio-filled-slider {
+      border-radius: @border-radius-small;
+    }
+  }
+
+  &.ald-radio-group.ald-radio-group-large {
+    height: @radio-group-height-large;
+
+    .ald-radio-icon-button-wrapper-filled {
+      padding: 0 @radio-icon-button-padding-large;
+    }
+
+    .ald-radio-icon-button-wrapper-border {
+      padding: 0 @radio-icon-button-padding-large - 1;
+    }
+
+    .ald-radio-label {
+      .ald-radio-desc {
+        font-size: @font-size-large;
+      }
+    }
+
+    .ald-radio-button-wrapper-border,
+    .ald-radio-icon-button-wrapper-border,
+    .ald-radio-button-wrapper-filled,
+    .ald-radio-icon-button-wrapper-filled {
+      &:first-of-type {
+        border-radius: @border-radius-large 0 0 @border-radius-large;
+      }
+
+      &:last-of-type {
+        border-radius: 0 @border-radius-large @border-radius-large 0;
+      }
+    }
+
+    .ald-radio-filled-slider {
+      border-radius: @border-radius-large;
+    }
+  }
+}

package/lib/Select/index.js

@@ -27,7 +27,7 @@ var _motion = require("antd/lib/_util/motion");
 
 var _statusUtils = require("antd/lib/_util/statusUtils");
 
-var _defaultRenderEmpty = _interopRequireDefault(require("antd/lib/config-provider/defaultRenderEmpty"));
+var _defaultRenderEmpty = _interopRequireDefault(require("../ConfigProvider/defaultRenderEmpty"));
 
 var _iconUtil = _interopRequireDefault(require("./utils/iconUtil"));
 

package/lib/Select/rc-select/OptionList.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("@aloudata/icons-react/styles/index.less");
+
+var _CheckLine2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/CheckLine"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
@@ -29,18 +33,16 @@ var _SelectContext = _interopRequireDefault(require("./SelectContext"));
 
 var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
 
-var _CheckLine = _interopRequireDefault(require("../../Icon/icons/CheckLine"));
-
 var _themeColorModule = _interopRequireDefault(require("../../style/themes/default/themeColor.module.less"));
 
 var _excluded = ["disabled", "title", "children", "style", "className"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
@@ -407,7 +409,7 @@ var OptionList = function OptionList(_, ref) {
       style: style
     }), !multiple && /*#__PURE__*/React.createElement("div", {
       className: 'ald-select-single-check'
-    }, selected && /*#__PURE__*/React.createElement(_CheckLine.default, {
+    }, selected && /*#__PURE__*/React.createElement(_CheckLine2.default, {
       color: _themeColorModule.default.B60,
       size: '1em'
     })), multiple && /*#__PURE__*/React.createElement(_Checkbox.default, {

package/lib/Select/rc-select/hooks/useOptions.d.ts

@@ -6,6 +6,6 @@ import type { FieldNames } from '../Select';
  */
 export default function useOptions<OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string, optionLabelProp: string): {
     options: OptionType[];
-    valueOptions: Map<string | number, OptionType>;
+    valueOptions: Map<React.Key, OptionType>;
     labelOptions: Map<React.ReactNode, OptionType>;
 };