@aloudata/aloudata-design 0.3.2 → 0.3.5

package/es/Radio/components/Radio/index.js

@@ -0,0 +1,95 @@
+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; }
+
+import classNames from 'classnames';
+import React, { useContext, useEffect, useRef } from 'react';
+import _ from 'lodash';
+import { RadioGroupContext } from '../Group';
+import { getUUID } from '../../../_utils/hooks/useId';
+export default function Radio(props) {
+  var groupContext = useContext(RadioGroupContext);
+  var labelRef = useRef(null);
+  var id = getUUID().toString();
+
+  var radioProps = _objectSpread({}, props);
+
+  if (!_.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 = classNames('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 classNames('ald-radio-label', otherClass, {
+      'ald-radio-wrapper-checked': radioProps.checked,
+      'ald-radio-wrapper-disabled': radioProps.disabled
+    });
+  }; // filled button模式下，更改滑块的位置
+
+
+  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.createElement("label", {
+    className: getWrapperClass(),
+    htmlFor: id,
+    ref: labelRef
+  }, /*#__PURE__*/React.createElement("span", {
+    className: aldRadioClass
+  }, /*#__PURE__*/React.createElement("input", {
+    id: id,
+    type: "radio",
+    className: "ald-radio-input",
+    checked: radioProps.checked,
+    disabled: radioProps.disabled,
+    value: props.value,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ald-radio-inner"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ald-radio-desc"
+  }, props.children));
+}

package/es/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/es/Radio/index.js

@@ -1,3 +1,5 @@
-import "antd/es/radio/style";
-import _Radio from "antd/es/radio";
-export default _Radio;
+import InternalRadio from './components/Radio';
+import RadioGroup from './components/Group';
+var Radio = InternalRadio;
+Radio.Group = RadioGroup;
+export default Radio;

package/es/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/es/Radio/interface/radio.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/Radio/interface/radioGroup.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/Select/index.js

@@ -23,7 +23,7 @@ import DisabledContext from 'antd/lib/config-provider/DisabledContext';
 import { FormItemInputContext } from 'antd/lib/form/context';
 import { getTransitionDirection, getTransitionName } from 'antd/lib/_util/motion';
 import { getMergedStatus, getStatusClassNames } from 'antd/lib/_util/statusUtils';
-import defaultRenderEmpty from 'antd/lib/config-provider/defaultRenderEmpty';
+import defaultRenderEmpty from '../ConfigProvider/defaultRenderEmpty';
 import getIcons from './utils/iconUtil';
 var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 

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

@@ -1,3 +1,5 @@
+import "@aloudata/icons-react/styles/index.less";
+import _CheckLine from "@aloudata/icons-react/es/icons/CheckLine";
 var _excluded = ["disabled", "title", "children", "style", "className"];
 
 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; }
@@ -39,7 +41,6 @@ import { isPlatformMac } from './utils/platformUtil';
 import useBaseProps from './hooks/useBaseProps';
 import SelectContext from './SelectContext';
 import Checkbox from '../../Checkbox';
-import CheckLine from '../../Icon/icons/CheckLine';
 import colors from '../../style/themes/default/themeColor.module.less';
 
 function isTitleType(content) {
@@ -382,7 +383,7 @@ var OptionList = function OptionList(_, ref) {
       style: style
     }), !multiple && /*#__PURE__*/React.createElement("div", {
       className: 'ald-select-single-check'
-    }, selected && /*#__PURE__*/React.createElement(CheckLine, {
+    }, selected && /*#__PURE__*/React.createElement(_CheckLine, {
       color: colors.B60,
       size: '1em'
     })), multiple && /*#__PURE__*/React.createElement(Checkbox, {

package/es/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>;
 };