feat(ui): add slider component

package.json

@@ -41,7 +41,7 @@
     "regenerator-runtime": "^0.13.9",
     "rfs": "^9.0.6",
     "rxjs": "^7.5.2",
-    "scrollview-resize": "^1.0.0",
+    "scrollview-resize": "^1.0.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -64,14 +64,14 @@
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.177",
     "@types/marked": "^4.0.1",
-    "@types/node": "^17.0.10",
+    "@types/node": "^17.0.12",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "babel-jest": "^27.4.6",
     "cypress": "^9.3.1",
-    "dotenv": "^14.2.0",
+    "dotenv": "^14.3.0",
     "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",

packages/site/tsconfig.app.json

@@ -2,6 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "sourceMap": false,
     "types": ["node", "react/next", "react-dom/next"]
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],

packages/ui/src/components/_alert-dialog/AlertDialog.tsx

@@ -5,7 +5,7 @@ import { useAsync } from '../../hooks';
 export interface DAlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
   dHidden: boolean;
   dDuration: number;
-  dDialogRef?: React.LegacyRef<HTMLDivElement>;
+  dDialogRef?: React.Ref<HTMLDivElement>;
   onClose?: () => void;
 }
 

packages/ui/src/components/_dialog/Dialog.tsx

@@ -11,7 +11,7 @@ export interface DDialogProps extends React.HTMLAttributes<HTMLDivElement> {
   dMaskClosable?: boolean;
   dEscClosable?: boolean;
   dDestroy?: boolean;
-  dDialogRef?: React.LegacyRef<HTMLDivElement>;
+  dDialogRef?: React.Ref<HTMLDivElement>;
   onClose?: () => void;
 }
 

packages/ui/src/components/_popup/Popup.tsx

@@ -599,7 +599,6 @@ const Popup: React.ForwardRefRenderFunction<DPopupRef, DPopupProps> = (props, re
     <>
       {dTriggerRender?.(triggerRenderProps)}
       {!(dDestroy && hidden) &&
-        dPopupContent &&
         containerRef.current &&
         ReactDOM.createPortal(
           <div

packages/ui/src/components/button/Button.tsx

@@ -74,7 +74,7 @@ const Button: React.ForwardRefRenderFunction<DButtonRef, DButtonProps> = (props,
     [theme, dPrefix, onClick, buttonType, wave]
   );
 
-  const buttonIcon = (loading: boolean, ref?: React.LegacyRef<HTMLSpanElement>) => (
+  const buttonIcon = (loading: boolean, ref?: React.Ref<HTMLSpanElement>) => (
     <span
       ref={ref}
       className={getClassName(`${dPrefix}button__icon`, {

packages/ui/src/components/cascader/Cascader.tsx

@@ -88,8 +88,8 @@ export function DCascader<T>(props: DCascaderMultipleProps<T>): React.ReactEleme
 export function DCascader<T>(props: DCascaderProps<T>): React.ReactElement;
 export function DCascader<T>(props: DCascaderProps<T>) {
   const {
-    dModel,
     dFormControlName,
+    dModel,
     dVisible,
     dOptions,
     dOptionRender = DEFAULT_PROPS.dOptionRender,
@@ -131,7 +131,7 @@ export function DCascader<T>(props: DCascaderProps<T>) {
     dMultiple ? [] : null,
     dModel,
     onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+    { formControlName: dFormControlName, id: _id }
   );
 
   const [rendered, setRendered] = useState(visible);

packages/ui/src/components/checkbox/Checkbox.tsx

@@ -7,21 +7,21 @@ import { generateComponentMate, getClassName } from '../../utils';
 import { DCheckboxGroupContext } from './CheckboxGroup';
 
 export interface DCheckboxProps<T = unknown> extends React.HTMLAttributes<HTMLElement> {
-  dModel?: [boolean, Updater<boolean>?];
   dFormControlName?: string;
+  dModel?: [boolean, Updater<boolean>?];
   dIndeterminate?: boolean;
   dDisabled?: boolean;
   dValue?: T;
   dInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  dInputRef?: React.LegacyRef<HTMLInputElement>;
+  dInputRef?: React.Ref<HTMLInputElement>;
   onModelChange?: (checked: boolean) => void;
 }
 
 const { COMPONENT_NAME } = generateComponentMate('DCheckbox');
 export function DCheckbox<T>(props: DCheckboxProps<T>) {
   const {
-    dModel,
     dFormControlName,
+    dModel,
     dIndeterminate = false,
     dDisabled = false,
     dValue,
@@ -51,7 +51,7 @@ export function DCheckbox<T>(props: DCheckboxProps<T>) {
     false,
     dModel ?? (dIndeterminate ? [undefined] : inGroup ? [checkboxGroupValue?.includes(dValue) ?? false] : undefined),
     onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+    { formControlName: dFormControlName, id: _id }
   );
 
   const disabled = dDisabled || gDisabled || controlDisabled;

packages/ui/src/components/checkbox/CheckboxGroup.tsx

@@ -22,8 +22,8 @@ export interface DCheckboxGroupRef<T> {
 }
 
 export interface DCheckboxGroupProps<T = unknown> extends React.HTMLAttributes<HTMLDivElement> {
-  dModel?: [T[], Updater<T[]>?];
   dFormControlName?: string;
+  dModel?: [T[], Updater<T[]>?];
   dDisabled?: boolean;
   dVertical?: boolean;
   onModelChange?: (values: T[]) => void;
@@ -32,8 +32,8 @@ export interface DCheckboxGroupProps<T = unknown> extends React.HTMLAttributes<H
 const { COMPONENT_NAME } = generateComponentMate('DCheckboxGroup');
 function CheckboxGroup<T>(props: DCheckboxGroupProps<T>, ref: React.ForwardedRef<DCheckboxGroupRef<T>>) {
   const {
-    dModel,
     dFormControlName,
+    dModel,
     dDisabled = false,
     dVertical = false,
     onModelChange,
@@ -49,12 +49,9 @@ function CheckboxGroup<T>(props: DCheckboxGroupProps<T>, ref: React.ForwardedRef
 
   const [checkboxs, setCheckboxs] = useImmer(new Map<string, { id: string; value: T }>());
 
-  const [value, changeValue, { ariaAttribute, controlDisabled }] = useTwoWayBinding<T[]>(
-    [],
-    dModel,
-    onModelChange,
-    dFormControlName ? { formControlName: dFormControlName } : undefined
-  );
+  const [value, changeValue, { ariaAttribute, controlDisabled }] = useTwoWayBinding<T[]>([], dModel, onModelChange, {
+    formControlName: dFormControlName,
+  });
 
   const disabled = dDisabled || gDisabled || controlDisabled;
 

packages/ui/src/components/checkbox/README.md

@@ -23,7 +23,7 @@ Extend `React.HTMLAttributes<HTMLElement>`.
 | dDisabled | Whether to disable | boolean | false |
 | dValue | Pass as an identifier in checkbox group | any  | - |
 | dInputProps | Attributes applied to the `input` element | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
-| dInputRef | Pass a `ref` to the `input` element | React.LegacyRef\<HTMLInputElement\>  | - |
+| dInputRef | Pass a `ref` to the `input` element | React.Ref\<HTMLInputElement\>  | - |
 | onModelChange | Selected change callback | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 

packages/ui/src/components/checkbox/README.zh-Hant.md

@@ -22,7 +22,7 @@ title: 多选组
 | dDisabled | 是否禁用 | boolean | false |
 | dValue | 多选组中作为标识传递 | any  | - |
 | dInputProps | 应用于 `input` 元素的属性 | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
-| dInputRef | 将 `ref` 传递给 `input` 元素 | React.LegacyRef\<HTMLInputElement\>  | - |
+| dInputRef | 将 `ref` 传递给 `input` 元素 | React.Ref\<HTMLInputElement\>  | - |
 | onModelChange | 选中改变的回调 | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 

packages/ui/src/components/form/demos/13.SupportComponents.md

@@ -32,6 +32,7 @@ import {
   DCheckboxGroup,
   DSwitch,
   DCascader,
+  DSlider,
 } from '@react-devui/ui';
 
 export default function Demo() {
@@ -74,6 +75,7 @@ export default function Demo() {
         Cascader: new FormControl([1, 1, 10], () => ({ error: true })),
         Textarea: new FormControl('', () => ({ error: true })),
         Switch: new FormControl(false),
+        Slider: new FormControl(40, () => ({ error: true })),
       })
   );
 
@@ -97,10 +99,10 @@ export default function Demo() {
           <DInput dFormControlName="Number" placeholder="Number" />
         </DInputAffix>
       </DFormItem>
-      <DFormItem dLabel="Checkbox" dErrors="Errors!">
+      <DFormItem dLabel="Checkbox">
         <DCheckbox dFormControlName="Checkbox">Checkbox</DCheckbox>
       </DFormItem>
-      <DFormItem dLabel="CheckboxGroup" dErrors="Errors!">
+      <DFormItem dLabel="CheckboxGroup">
         <DCheckboxGroup dFormControlName="CheckboxGroup">
           {[1, 2, 3].map((n) => (
             <DCheckbox key={n} dValue={n} dDisabled={n === 2}>
@@ -109,10 +111,10 @@ export default function Demo() {
           ))}
         </DCheckboxGroup>
       </DFormItem>
-      <DFormItem dLabel="Radio" dErrors="Errors!">
+      <DFormItem dLabel="Radio">
         <DRadio dFormControlName="Radio">Radio</DRadio>
       </DFormItem>
-      <DFormItem dLabel="RadioGroup" dErrors="Errors!">
+      <DFormItem dLabel="RadioGroup">
         <DRadioGroup dFormControlName="RadioGroup">
           {[1, 2, 3].map((n) => (
             <DRadio key={n} dValue={n} dDisabled={n === 2}>
@@ -121,7 +123,7 @@ export default function Demo() {
           ))}
         </DRadioGroup>
       </DFormItem>
-      <DFormItem dLabel="Switch" dErrors="Errors!">
+      <DFormItem dLabel="Switch">
         <DSwitch dFormControlName="Switch"></DSwitch>
       </DFormItem>
       <DFormItem dLabel="Select" dErrors="Errors!">
@@ -133,6 +135,9 @@ export default function Demo() {
       <DFormItem dLabel="Textarea" dErrors="Errors!">
         <DTextarea dFormControlName="Textarea" dRows="auto" />
       </DFormItem>
+      <DFormItem dLabel="Slider" dErrors="Errors!">
+        <DSlider dFormControlName="Slider"></DSlider>
+      </DFormItem>
       <DFormItem>
         <DButton onClick={handleVerify}>Verify</DButton>
       </DFormItem>

packages/ui/src/components/index.ts

@@ -61,6 +61,9 @@ export { DSelect } from './select';
 export type { DSeparatorProps } from './separator';
 export { DSeparator } from './separator';
 
+export type { DSliderProps } from './slider';
+export { DSlider } from './slider';
+
 export type { DSwitchProps } from './switch';
 export { DSwitch } from './switch';
 

packages/ui/src/components/input/Input.tsx

@@ -10,17 +10,17 @@ import { DInputAffixContext } from './InputAffix';
 export type DInputRef = HTMLInputElement;
 
 export interface DInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  dModel?: [string, Updater<string>?];
   dFormControlName?: string;
+  dModel?: [string, Updater<string>?];
   dSize?: 'smaller' | 'larger';
   onModelChange?: (value: string) => void;
 }
 
 const { COMPONENT_NAME } = generateComponentMate('DInput');
 const Input: React.ForwardRefRenderFunction<DInputRef, DInputProps> = (props, ref) => {
   const {
-    dModel,
     dFormControlName,
+    dModel,
     dSize,
     onModelChange,
     id,
@@ -60,12 +60,10 @@ const Input: React.ForwardRefRenderFunction<DInputRef, DInputProps> = (props, re
 
   const size = dSize ?? gSize;
 
-  const [value, changeValue, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding<string>(
-    '',
-    dModel,
-    onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
-  );
+  const [value, changeValue, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding<string>('', dModel, onModelChange, {
+    formControlName: dFormControlName,
+    id: _id,
+  });
 
   const _disabled = disabled || inputAffixDisabled || gDisabled || controlDisabled;
 

packages/ui/src/components/pagination/Pagination.tsx

@@ -1,8 +1,9 @@
 import type { Updater } from '../../hooks/two-way-binding';
 
 import React, { useCallback, useMemo, useState } from 'react';
+import { useEffect } from 'react';
 
-import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useTranslation, useAsync } from '../../hooks';
+import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useTranslation } from '../../hooks';
 import { generateComponentMate, getClassName } from '../../utils';
 import { DIcon } from '../icon';
 import { DInput, DInputAffix } from '../input';
@@ -51,7 +52,6 @@ export function DPagination(props: DPaginationProps) {
   const dPrefix = usePrefixConfig();
   //#endregion
 
-  const asyncCapture = useAsync();
   const [t] = useTranslation('DPagination');
 
   const [isChange, setIsChange] = useState(false);
@@ -65,10 +65,14 @@ export function DPagination(props: DPaginationProps) {
       _changeActive(active);
 
       setIsChange(true);
-      asyncCapture.setTimeout(() => setIsChange(false));
     },
-    [_changeActive, asyncCapture]
+    [_changeActive]
   );
+  useEffect(() => {
+    if (isChange) {
+      setIsChange(false);
+    }
+  }, [isChange]);
 
   const lastPage = Math.max(Math.ceil(dTotal / pageSize), 1);
   const iconSize = '0.9em';

packages/ui/src/components/radio/README.md

@@ -22,7 +22,7 @@ Extend `React.HTMLAttributes<HTMLElement>`.
 | dDisabled | Whether to disable | boolean | false |
 | dValue | Pass as an identifier in radio group | any  | - |
 | dInputProps | Attributes applied to the `input` element | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
-| dInputRef | Pass a `ref` to the `input` element | React.LegacyRef\<HTMLInputElement\>  | - |
+| dInputRef | Pass a `ref` to the `input` element | React.Ref\<HTMLInputElement\>  | - |
 | onModelChange | Selected change callback | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 

packages/ui/src/components/radio/README.zh-Hant.md

@@ -21,7 +21,7 @@ title: 单选组
 | dDisabled | 是否禁用 | boolean | false |
 | dValue | 单选组中作为标识传递 | any  | - |
 | dInputProps | 应用于 `input` 元素的属性 | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
-| dInputRef | 将 `ref` 传递给 `input` 元素 | React.LegacyRef\<HTMLInputElement\>  | - |
+| dInputRef | 将 `ref` 传递给 `input` 元素 | React.Ref\<HTMLInputElement\>  | - |
 | onModelChange | 选中改变的回调 | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 

packages/ui/src/components/radio/Radio.tsx

@@ -7,20 +7,20 @@ import { generateComponentMate, getClassName } from '../../utils';
 import { DRadioGroupContext } from './RadioGroup';
 
 export interface DRadioProps<T = unknown> extends React.HTMLAttributes<HTMLElement> {
-  dModel?: [boolean, Updater<boolean>?];
   dFormControlName?: string;
+  dModel?: [boolean, Updater<boolean>?];
   dDisabled?: boolean;
   dValue?: T;
   dInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  dInputRef?: React.LegacyRef<HTMLInputElement>;
+  dInputRef?: React.Ref<HTMLInputElement>;
   onModelChange?: (checked: boolean) => void;
 }
 
 const { COMPONENT_NAME } = generateComponentMate('DRadio');
 export function DRadio<T>(props: DRadioProps<T>) {
   const {
-    dModel,
     dFormControlName,
+    dModel,
     dDisabled = false,
     dValue,
     dInputProps,
@@ -49,7 +49,7 @@ export function DRadio<T>(props: DRadioProps<T>) {
     false,
     dModel ?? (inGroup ? [radioGroupValue === dValue] : undefined),
     onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+    { formControlName: dFormControlName, id: _id }
   );
 
   const disabled = dDisabled || gDisabled || controlDisabled;