antd-mobile 5.14.3 → 5.16.0

package/2x/cjs/utils/render-imperatively.js

@@ -17,6 +17,8 @@ function renderImperatively(element) {
   const Wrapper = _react.default.forwardRef((_, ref) => {
     const [visible, setVisible] = (0, _react.useState)(false);
     const closedRef = (0, _react.useRef)(false);
+    const [elementToRender, setElementToRender] = (0, _react.useState)(element);
+    const keyRef = (0, _react.useRef)(0);
     (0, _react.useEffect)(() => {
       if (!closedRef.current) {
         setVisible(true);
@@ -30,20 +32,28 @@ function renderImperatively(element) {
 
       closedRef.current = true;
       setVisible(false);
-      (_b = (_a = element.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     function afterClose() {
       var _a, _b;
 
       unmount();
-      (_b = (_a = element.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     (0, _react.useImperativeHandle)(ref, () => ({
-      close: onClose
+      close: onClose,
+      replace: element => {
+        var _a, _b;
+
+        keyRef.current++;
+        (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        setElementToRender(element);
+      }
     }));
-    return _react.default.cloneElement(element, Object.assign(Object.assign({}, element.props), {
+    return _react.default.cloneElement(elementToRender, Object.assign(Object.assign({}, elementToRender.props), {
+      key: keyRef.current,
       visible,
       onClose,
       afterClose
@@ -55,14 +65,16 @@ function renderImperatively(element) {
   const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
     ref: wrapperRef
   }));
+  return {
+    close: () => {
+      var _a;
 
-  function close() {
-    var _a;
-
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
-  }
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    },
+    replace: element => {
+      var _a;
 
-  return {
-    close
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element);
+    }
   };
 }

package/2x/cjs/utils/use-props-value.js

@@ -24,12 +24,8 @@ function usePropsValue(options) {
 
   const setState = (0, _ahooks.useMemoizedFn)(v => {
     const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
-
-    if (value === undefined) {
-      stateRef.current = nextValue;
-      update();
-    }
-
+    stateRef.current = nextValue;
+    update();
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];

package/2x/es/components/action-sheet/action-sheet.d.ts

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { GetContainer } from '../../utils/render-to-container';
+import { PopupProps } from '../popup';
 export declare type Action = {
     key: string | number;
     text: ReactNode;
@@ -16,15 +16,13 @@ export declare type ActionSheetProps = {
     cancelText?: React.ReactNode;
     onAction?: (action: Action, index: number) => void;
     onClose?: () => void;
-    afterClose?: () => void;
     onMaskClick?: () => void;
     closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    getContainer?: GetContainer;
     safeArea?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-} & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;

package/2x/es/components/action-sheet/action-sheet.js

@@ -12,7 +12,9 @@ const defaultProps = {
   cancelText: '',
   closeOnAction: false,
   closeOnMaskClick: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 export const ActionSheet = p => {
   const props = mergeProps(defaultProps, p);
@@ -30,7 +32,9 @@ export const ActionSheet = p => {
     afterClose: props.afterClose,
     className: classNames(`${classPrefix}-popup`, props.popupClassName),
     style: props.popupStyle,
-    getContainer: props.getContainer
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, props.extra && React.createElement("div", {

package/2x/es/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }

package/2x/es/components/badge/badge.d.ts

@@ -6,5 +6,7 @@ export declare type BadgeProps = {
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/2x/es/components/badge/badge.js

@@ -20,6 +20,7 @@ export const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? React.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: classNames(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };

package/2x/es/components/button/button.d.ts

@@ -31,5 +31,9 @@ export declare const Button: React.ForwardRefExoticComponent<{
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
 export {};

package/2x/es/components/cascader/cascader.d.ts

@@ -1,7 +1,13 @@
-import { ReactNode, FC } from 'react';
+import React, { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { CascaderValue, CascaderValueExtend, CascaderOption } from '../cascader-view';
 import { NativeProps } from '../../utils/native-props';
+export declare type CascaderActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export declare type CascaderRef = CascaderActions;
 export declare type CascaderProps = {
     options: CascaderOption[];
     value?: CascaderValue[];
@@ -15,7 +21,26 @@ export declare type CascaderProps = {
     title?: ReactNode;
     confirmText?: ReactNode;
     cancelText?: ReactNode;
-    children?: (items: (CascaderOption | null)[]) => ReactNode;
+    children?: (items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode;
     onTabsChange?: (index: number) => void;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
-export declare const Cascader: FC<CascaderProps>;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
+export declare const Cascader: React.ForwardRefExoticComponent<{
+    options: CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CascaderActions>>;

package/2x/es/components/cascader/cascader.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import Popup from '../popup';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
@@ -8,9 +8,11 @@ import { useConfig } from '../config-provider';
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend';
 const classPrefix = `adm-cascader`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  destroyOnClose: true,
+  forceRender: false
 };
-export const Cascader = p => {
+export const Cascader = forwardRef((p, ref) => {
   var _a;
 
   const {
@@ -21,6 +23,29 @@ export const Cascader = p => {
     cancelText: locale.common.cancel,
     placeholder: locale.Cascader.placeholder
   }, p);
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;
@@ -31,12 +56,12 @@ export const Cascader = p => {
   const generateValueExtend = useCascaderValueExtend(props.options);
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
-  }, [props.visible]);
+  }, [visible]);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
   }, [value]);
@@ -47,20 +72,18 @@ export const Cascader = p => {
   }, React.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     }
   }, props.cancelText), React.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), React.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a;
-
       setValue(innerValue);
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
     }
   }, props.confirmText)), React.createElement("div", {
     className: `${classPrefix}-body`
@@ -71,26 +94,27 @@ export const Cascader = p => {
 
       setInnerValue(val);
 
-      if (props.visible) {
+      if (visible) {
         (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
       }
     }
   })))));
   const popupElement = React.createElement(Popup, {
-    visible: props.visible,
+    visible: visible,
     position: 'bottom',
     onMaskClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     stopPropagation: props.stopPropagation
   }, cascaderElement);
-  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
-};
+  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items, actions));
+});

package/2x/es/components/cascader/index.d.ts

@@ -1,9 +1,28 @@
 /// <reference types="react" />
 import { prompt } from './prompt';
 import './cascader.less';
-export type { CascaderProps } from './cascader';
+export type { CascaderProps, CascaderRef, CascaderActions } from './cascader';
 export type { CascaderValue, CascaderValueExtend, CascaderOption, } from '../cascader-view';
-declare const _default: import("react").FC<import("./cascader").CascaderProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    options: import("../cascader-view").CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../cascader-view").CascaderOption | null)[], actions: import("./cascader").CascaderActions) => import("react").ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./cascader").CascaderActions>> & {
     prompt: typeof prompt;
     optionSkeleton: import("../cascader-view").CascaderOption[];
 };

package/2x/es/components/center-popup/center-popup.css

@@ -26,4 +26,15 @@
 .adm-center-popup-body {
   background-color: var(--background-color);
   border-radius: var(--border-radius);
+}
+
+.adm-center-popup-close {
+  position: absolute;
+  z-index: 100;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+  padding: 8px;
+  font-size: 36px;
+  color: var(--adm-color-weak);
 }

package/2x/es/components/center-popup/center-popup.d.ts

@@ -1,23 +1,7 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { GetContainer } from '../../utils/render-to-container';
-import { MaskProps } from '../mask';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type CenterPopupProps = PropsWithChildren<{
-    afterClose?: () => void;
-    afterShow?: () => void;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    destroyOnClose?: boolean;
-    disableBodyScroll?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    mask?: boolean;
-    maskClassName?: string;
-    maskStyle?: MaskProps['style'];
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    stopPropagation?: PropagationEvent[];
-    visible?: boolean;
+import { PopupBaseProps } from '../popup/popup-base-props';
+export declare type CenterPopupProps = PopupBaseProps & PropsWithChildren<{
+    role?: string;
 }> & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
 export declare const CenterPopup: FC<CenterPopupProps>;

package/2x/es/components/center-popup/center-popup.js

@@ -10,16 +10,9 @@ import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { ShouldRender } from '../../utils/should-render';
 import { useLockScroll } from '../../utils/use-lock-scroll';
-const defaultProps = {
-  destroyOnClose: false,
-  disableBodyScroll: true,
-  forceRender: false,
-  getContainer: null,
-  mask: true,
-  showCloseButton: false,
-  stopPropagation: ['click'],
-  visible: false
-};
+import { CloseOutline } from 'antd-mobile-icons';
+import { defaultPopupBaseProps } from '../popup/popup-base-props';
+const defaultProps = defaultPopupBaseProps;
 export const CenterPopup = p => {
   const props = mergeProps(defaultProps, p);
   const unmountedRef = useUnmountedRef();
@@ -68,16 +61,34 @@ export const CenterPopup = p => {
     visible: maskVisible,
     forceRender: props.forceRender,
     destroyOnClose: props.destroyOnClose,
-    onMaskClick: props.onMaskClick,
+    onMaskClick: e => {
+      var _a, _b;
+
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     style: props.maskStyle,
     className: classNames('adm-center-popup-mask', props.maskClassName),
-    disableBodyScroll: false
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
   }), React.createElement("div", {
-    className: 'adm-center-popup-wrap'
+    className: 'adm-center-popup-wrap',
+    role: props.role,
+    "aria-label": props['aria-label']
   }, React.createElement(animated.div, {
     style: style,
     ref: ref
-  }, body)))));
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames('adm-center-popup-close', 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseOutline, null)), body)))));
   return React.createElement(ShouldRender, {
     active: active,
     forceRender: props.forceRender,

package/2x/es/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CheckboxValue = string | number;
 export declare type CheckboxProps = {
@@ -13,4 +13,24 @@ export declare type CheckboxProps = {
     icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
     children?: React.ReactNode;
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
-export declare const Checkbox: FC<CheckboxProps>;
+export declare type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => React.ReactNode) | undefined;
+    children?: React.ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CheckboxRef>>;

package/2x/es/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext, useImperativeHandle } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { CheckboxGroupContext } from './group-context';
@@ -14,7 +14,7 @@ const defaultProps = {
   defaultChecked: false,
   indeterminate: false
 };
-export const Checkbox = p => {
+export const Checkbox = forwardRef((p, ref) => {
   const groupContext = useContext(CheckboxGroupContext);
   const props = mergeProps(defaultProps, p);
   let [checked, setChecked] = usePropsValue({
@@ -55,6 +55,18 @@ export const Checkbox = p => {
     disabled = disabled || groupContext.disabled;
   }
 
+  useImperativeHandle(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
+
   const renderIcon = () => {
     if (props.icon) {
       return React.createElement("div", {
@@ -83,4 +95,4 @@ export const Checkbox = p => {
   }), renderIcon(), props.children && React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));
-};
+});

package/2x/es/components/checkbox/index.d.ts

@@ -1,8 +1,23 @@
 /// <reference types="react" />
 import './checkbox.less';
-export type { CheckboxValue, CheckboxProps } from './checkbox';
+export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
 export type { CheckboxGroupProps } from './group';
-declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: import("./checkbox").CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
     Group: import("react").FC<import("./group").CheckboxGroupProps>;
 };
 export default _default;

package/2x/es/components/checkbox/native-input.js

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
 export const NativeInput = props => {
   const inputRef = useRef(null);
+  const handleClick = useMemoizedFn(e => {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const latestChecked = e.target.checked;
+    if (latestChecked === props.checked) return;
+    props.onChange(latestChecked);
+  });
   useEffect(() => {
     if (props.disabled) return;
     if (!inputRef.current) return;
     const input = inputRef.current;
-
-    function handleClick(e) {
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      props.onChange(input.checked);
-    }
-
     input.addEventListener('click', handleClick);
     return () => {
       input.removeEventListener('click', handleClick);
@@ -19,7 +20,7 @@ export const NativeInput = props => {
   }, [props.disabled, props.onChange]);
   return React.createElement("input", {
     ref: inputRef,
-    type: 'checkbox',
+    type: props.type,
     checked: props.checked,
     onChange: () => {},
     disabled: props.disabled,

package/2x/es/components/date-picker/date-picker-date-utils.js

@@ -39,21 +39,6 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
   const maxMinute = max.getMinutes();
   const maxSecond = max.getSeconds();
   const rank = precisionRankRecord[precision];
-
-  if (rank >= precisionRankRecord.year) {
-    const years = [];
-
-    for (let i = minYear; i <= maxYear; i++) {
-      const value = i.toString();
-      years.push({
-        label: renderLabel ? renderLabel('year', i) : value,
-        value
-      });
-    }
-
-    ret.push(years);
-  }
-
   const selectedYear = parseInt(selected[0]);
   const firstDayInSelectedMonth = dayjs(convertStringArrayToDate([selected[0], selected[1], '1']));
   const selectedMonth = parseInt(selected[1]);
@@ -94,6 +79,18 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
     return column;
   };
 
+  if (rank >= precisionRankRecord.year) {
+    const lower = minYear;
+    const upper = maxYear;
+    const years = generateColumn(lower, upper, 'year');
+    ret.push(years.map(v => {
+      return {
+        label: renderLabel('year', v),
+        value: v.toString()
+      };
+    }));
+  }
+
   if (rank >= precisionRankRecord.month) {
     const lower = isInMinYear ? minMonth : 1;
     const upper = isInMaxYear ? maxMonth : 12;