taro-ui 3.3.3 → 3.4.0

package/dist/components/progress/index.d.ts

@@ -1,7 +1,13 @@
-import { InferProps } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
 import { AtProgressProps } from '../../../types/progress';
-export default class AtProgress extends React.Component<AtProgressProps> {
-    static propTypes: InferProps<AtProgressProps>;
-    render(): JSX.Element;
+declare function AtProgress({ color, percent: percentProp, strokeWidth, status, isHidePercent, className }: AtProgressProps): JSX.Element;
+declare namespace AtProgress {
+    var propTypes: {
+        color: PropTypes.Requireable<string>;
+        status: PropTypes.Requireable<string>;
+        percent: PropTypes.Requireable<number>;
+        strokeWidth: PropTypes.Requireable<number>;
+        isHidePercent: PropTypes.Requireable<boolean>;
+    };
 }
+export default AtProgress;

package/dist/components/progress/index.js

@@ -2,43 +2,46 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
 import { Text, View } from "@tarojs/components";
-class AtProgress extends React.Component {
-  render() {
-    const { color } = this.props;
-    let { percent } = this.props;
-    const { strokeWidth, status, isHidePercent } = this.props;
-    if (typeof percent !== "number") {
-      percent = 0;
-    }
-    if (percent < 0) {
-      percent = 0;
-    } else if (percent > 100) {
-      percent = 100;
-    }
-    const rootClass = classNames(
-      "at-progress",
-      {
-        [`at-progress--${status}`]: !!status
-      },
-      this.props.className
-    );
-    const iconClass = classNames("at-icon", {
-      "at-icon-close-circle": status === "error",
-      "at-icon-check-circle": status === "success"
-    });
-    const progressStyle = {
-      width: percent && `${+percent}%`,
-      height: strokeWidth && `${+strokeWidth}px`,
-      backgroundColor: color
-    };
-    return /* @__PURE__ */ React.createElement(View, { className: rootClass }, /* @__PURE__ */ React.createElement(View, { className: "at-progress__outer" }, /* @__PURE__ */ React.createElement(View, { className: "at-progress__outer-inner" }, /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: "at-progress__outer-inner-background",
-        style: progressStyle
-      }
-    ))), !isHidePercent && /* @__PURE__ */ React.createElement(View, { className: "at-progress__content" }, !status || status === "progress" ? `${percent}%` : /* @__PURE__ */ React.createElement(Text, { className: iconClass })));
+function AtProgress({
+  color,
+  percent: percentProp,
+  strokeWidth,
+  status,
+  isHidePercent,
+  className
+}) {
+  let percent = percentProp;
+  if (typeof percent !== "number") {
+    percent = 0;
   }
+  if (percent < 0) {
+    percent = 0;
+  } else if (percent > 100) {
+    percent = 100;
+  }
+  const rootClass = classNames(
+    "at-progress",
+    {
+      [`at-progress--${status}`]: !!status
+    },
+    className
+  );
+  const iconClass = classNames("at-icon", {
+    "at-icon-close-circle": status === "error",
+    "at-icon-check-circle": status === "success"
+  });
+  const progressStyle = {
+    width: percent && `${+percent}%`,
+    height: strokeWidth && `${+strokeWidth}px`,
+    backgroundColor: color
+  };
+  return /* @__PURE__ */ React.createElement(View, { className: rootClass }, /* @__PURE__ */ React.createElement(View, { className: "at-progress__outer" }, /* @__PURE__ */ React.createElement(View, { className: "at-progress__outer-inner" }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: "at-progress__outer-inner-background",
+      style: progressStyle
+    }
+  ))), !isHidePercent && /* @__PURE__ */ React.createElement(View, { className: "at-progress__content" }, !status || status === "progress" ? `${percent}%` : /* @__PURE__ */ React.createElement(Text, { className: iconClass })));
 }
 AtProgress.propTypes = {
   color: PropTypes.string,

package/dist/components/progress/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/progress/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes, { InferProps } from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { AtProgressProps } from '../../../types/progress'\n\nexport default class AtProgress extends React.Component<AtProgressProps> {\n  public static propTypes: InferProps<AtProgressProps>\n\n  public render(): JSX.Element {\n    const { color } = this.props\n    let { percent } = this.props\n    const { strokeWidth, status, isHidePercent } = this.props\n\n    if (typeof percent !== 'number') {\n      percent = 0\n    }\n\n    if (percent < 0) {\n      percent = 0\n    } else if (percent > 100) {\n      percent = 100\n    }\n\n    const rootClass = classNames(\n      'at-progress',\n      {\n        [`at-progress--${status}`]: !!status\n      },\n      this.props.className\n    )\n    const iconClass = classNames('at-icon', {\n      'at-icon-close-circle': status === 'error',\n      'at-icon-check-circle': status === 'success'\n    })\n\n    const progressStyle = {\n      width: percent && `${+percent}%`,\n      height: strokeWidth && `${+strokeWidth}px`,\n      backgroundColor: color\n    }\n\n    return (\n      <View className={rootClass}>\n        <View className='at-progress__outer'>\n          <View className='at-progress__outer-inner'>\n            <View\n              className='at-progress__outer-inner-background'\n              style={progressStyle}\n            />\n          </View>\n        </View>\n\n        {!isHidePercent && (\n          <View className='at-progress__content'>\n            {!status || status === 'progress' ? (\n              `${percent}%`\n            ) : (\n              <Text className={iconClass}></Text>\n            )}\n          </View>\n        )}\n      </View>\n    )\n  }\n}\n\nAtProgress.propTypes = {\n  color: PropTypes.string,\n  status: PropTypes.string,\n  percent: PropTypes.number,\n  strokeWidth: PropTypes.number,\n  isHidePercent: PropTypes.bool\n}\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,eAA+B;AACtC,OAAO,WAAW;AAClB,SAAS,MAAM,YAAY;AAG3B,MAAO,mBAAiC,MAAM,UAA2B;AAAA,EAGhE,SAAsB;AAC3B,UAAM,EAAE,MAAM,IAAI,KAAK;AACvB,QAAI,EAAE,QAAQ,IAAI,KAAK;AACvB,UAAM,EAAE,aAAa,QAAQ,cAAc,IAAI,KAAK;AAEpD,QAAI,OAAO,YAAY,UAAU;AAC/B,gBAAU;AAAA,IACZ;AAEA,QAAI,UAAU,GAAG;AACf,gBAAU;AAAA,IACZ,WAAW,UAAU,KAAK;AACxB,gBAAU;AAAA,IACZ;AAEA,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,QACE,CAAC,gBAAgB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,MAChC;AAAA,MACA,KAAK,MAAM;AAAA,IACb;AACA,UAAM,YAAY,WAAW,WAAW;AAAA,MACtC,wBAAwB,WAAW;AAAA,MACnC,wBAAwB,WAAW;AAAA,IACrC,CAAC;AAED,UAAM,gBAAgB;AAAA,MACpB,OAAO,WAAW,GAAG,CAAC,OAAO;AAAA,MAC7B,QAAQ,eAAe,GAAG,CAAC,WAAW;AAAA,MACtC,iBAAiB;AAAA,IACnB;AAEA,WACE,oCAAC,QAAK,WAAW,aACf,oCAAC,QAAK,WAAU,wBACd,oCAAC,QAAK,WAAU,8BACd;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA;AAAA,IACT,CACF,CACF,GAEC,CAAC,iBACA,oCAAC,QAAK,WAAU,0BACb,CAAC,UAAU,WAAW,aACrB,GAAG,OAAO,MAEV,oCAAC,QAAK,WAAW,WAAW,CAEhC,CAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,YAAY;AAAA,EACrB,OAAO,UAAU;AAAA,EACjB,QAAQ,UAAU;AAAA,EAClB,SAAS,UAAU;AAAA,EACnB,aAAa,UAAU;AAAA,EACvB,eAAe,UAAU;AAC3B;","names":[]}
+{"version":3,"sources":["../../../src/components/progress/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { AtProgressProps } from '../../../types/progress'\n\nexport default function AtProgress({\n  color,\n  percent: percentProp,\n  strokeWidth,\n  status,\n  isHidePercent,\n  className\n}: AtProgressProps): JSX.Element {\n  let percent = percentProp\n  if (typeof percent !== 'number') {\n    percent = 0\n  }\n\n  if (percent < 0) {\n    percent = 0\n  } else if (percent > 100) {\n    percent = 100\n  }\n\n  const rootClass = classNames(\n    'at-progress',\n    {\n      [`at-progress--${status}`]: !!status\n    },\n    className\n  )\n  const iconClass = classNames('at-icon', {\n    'at-icon-close-circle': status === 'error',\n    'at-icon-check-circle': status === 'success'\n  })\n\n  const progressStyle = {\n    width: percent && `${+percent}%`,\n    height: strokeWidth && `${+strokeWidth}px`,\n    backgroundColor: color\n  }\n\n  return (\n    <View className={rootClass}>\n      <View className='at-progress__outer'>\n        <View className='at-progress__outer-inner'>\n          <View\n            className='at-progress__outer-inner-background'\n            style={progressStyle}\n          />\n        </View>\n      </View>\n\n      {!isHidePercent && (\n        <View className='at-progress__content'>\n          {!status || status === 'progress' ? (\n            `${percent}%`\n          ) : (\n            <Text className={iconClass}></Text>\n          )}\n        </View>\n      )}\n    </View>\n  )\n}\n\nAtProgress.propTypes = {\n  color: PropTypes.string,\n  status: PropTypes.string,\n  percent: PropTypes.number,\n  strokeWidth: PropTypes.number,\n  isHidePercent: PropTypes.bool\n}\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,WAAW;AAClB,SAAS,MAAM,YAAY;AAGZ,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,MAAI,UAAU;AACd,MAAI,OAAO,YAAY,UAAU;AAC/B,cAAU;AAAA,EACZ;AAEA,MAAI,UAAU,GAAG;AACf,cAAU;AAAA,EACZ,WAAW,UAAU,KAAK;AACxB,cAAU;AAAA,EACZ;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,MACE,CAAC,gBAAgB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,WAAW,WAAW;AAAA,IACtC,wBAAwB,WAAW;AAAA,IACnC,wBAAwB,WAAW;AAAA,EACrC,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,OAAO,WAAW,GAAG,CAAC,OAAO;AAAA,IAC7B,QAAQ,eAAe,GAAG,CAAC,WAAW;AAAA,IACtC,iBAAiB;AAAA,EACnB;AAEA,SACE,oCAAC,QAAK,WAAW,aACf,oCAAC,QAAK,WAAU,wBACd,oCAAC,QAAK,WAAU,8BACd;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA;AAAA,EACT,CACF,CACF,GAEC,CAAC,iBACA,oCAAC,QAAK,WAAU,0BACb,CAAC,UAAU,WAAW,aACrB,GAAG,OAAO,MAEV,oCAAC,QAAK,WAAW,WAAW,CAEhC,CAEJ;AAEJ;AAEA,WAAW,YAAY;AAAA,EACrB,OAAO,UAAU;AAAA,EACjB,QAAQ,UAAU;AAAA,EAClB,SAAS,UAAU;AAAA,EACnB,aAAa,UAAU;AAAA,EACvB,eAAe,UAAU;AAC3B;","names":[]}

package/dist/components/radio/index.d.ts

@@ -1,9 +1,13 @@
-import { InferProps } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
 import { AtRadioProps } from '../../../types/radio';
-export default class AtRadio extends React.Component<AtRadioProps<any>> {
-    static defaultProps: AtRadioProps<any>;
-    static propTypes: InferProps<AtRadioProps<any>>;
-    private handleClick;
-    render(): JSX.Element;
+declare function AtRadio({ customStyle, className, value, options, onClick }: AtRadioProps<any>): JSX.Element;
+declare namespace AtRadio {
+    var propTypes: {
+        customStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        className: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
+        value: PropTypes.Requireable<string>;
+        options: PropTypes.Requireable<any[]>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
 }
+export default AtRadio;

package/dist/components/radio/index.js

@@ -2,45 +2,40 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
 import { Text, View } from "@tarojs/components";
-class AtRadio extends React.Component {
-  handleClick(option, event) {
+import { noop } from "../../common/utils";
+function AtRadio({
+  customStyle = "",
+  className = "",
+  value = "",
+  options = [],
+  onClick = noop
+}) {
+  const handleClick = (option, event) => {
     if (option.disabled) return;
-    this.props.onClick(option.value, event);
-  }
-  render() {
-    const { customStyle, className, options, value } = this.props;
-    return /* @__PURE__ */ React.createElement(View, { className: classNames("at-radio", className), style: customStyle }, options.map((option) => /* @__PURE__ */ React.createElement(
+    onClick(option.value, event);
+  };
+  return /* @__PURE__ */ React.createElement(View, { className: classNames("at-radio", className), style: customStyle }, options.map((option) => /* @__PURE__ */ React.createElement(
+    View,
+    {
+      key: option.value,
+      onClick: (event) => handleClick(option, event),
+      className: classNames({
+        "at-radio__option": true,
+        "at-radio__option--disabled": option.disabled
+      })
+    },
+    /* @__PURE__ */ React.createElement(View, { className: "at-radio__option-wrap" }, /* @__PURE__ */ React.createElement(View, { className: "at-radio__option-container" }, /* @__PURE__ */ React.createElement(View, { className: "at-radio__title" }, option.label), /* @__PURE__ */ React.createElement(
       View,
       {
-        key: option.value,
-        onClick: this.handleClick.bind(this, option),
         className: classNames({
-          "at-radio__option": true,
-          "at-radio__option--disabled": option.disabled
+          "at-radio__icon": true,
+          "at-radio__icon--checked": value === option.value
         })
       },
-      /* @__PURE__ */ React.createElement(View, { className: "at-radio__option-wrap" }, /* @__PURE__ */ React.createElement(View, { className: "at-radio__option-container" }, /* @__PURE__ */ React.createElement(View, { className: "at-radio__title" }, option.label), /* @__PURE__ */ React.createElement(
-        View,
-        {
-          className: classNames({
-            "at-radio__icon": true,
-            "at-radio__icon--checked": value === option.value
-          })
-        },
-        /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-check" })
-      )), option.desc && /* @__PURE__ */ React.createElement(View, { className: "at-radio__desc" }, option.desc))
-    )));
-  }
+      /* @__PURE__ */ React.createElement(Text, { className: "at-icon at-icon-check" })
+    )), option.desc && /* @__PURE__ */ React.createElement(View, { className: "at-radio__desc" }, option.desc))
+  )));
 }
-AtRadio.defaultProps = {
-  customStyle: "",
-  className: "",
-  value: "",
-  options: [],
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClick: () => {
-  }
-};
 AtRadio.propTypes = {
   customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
@@ -48,7 +43,8 @@ AtRadio.propTypes = {
   options: PropTypes.array,
   onClick: PropTypes.func
 };
+var radio_default = AtRadio;
 export {
-  AtRadio as default
+  radio_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/components/radio/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes, { InferProps } from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { CommonEvent } from '@tarojs/components/types/common'\nimport { AtRadioProps, RadioOption } from '../../../types/radio'\n\nexport default class AtRadio extends React.Component<AtRadioProps<any>> {\n  public static defaultProps: AtRadioProps<any>\n  public static propTypes: InferProps<AtRadioProps<any>>\n\n  private handleClick(option: RadioOption<any>, event: CommonEvent): void {\n    if (option.disabled) return\n    this.props.onClick(option.value, event)\n  }\n\n  public render(): JSX.Element {\n    const { customStyle, className, options, value } = this.props\n\n    return (\n      <View className={classNames('at-radio', className)} style={customStyle}>\n        {options.map(option => (\n          <View\n            key={option.value}\n            onClick={this.handleClick.bind(this, option)}\n            className={classNames({\n              'at-radio__option': true,\n              'at-radio__option--disabled': option.disabled\n            })}\n          >\n            <View className='at-radio__option-wrap'>\n              <View className='at-radio__option-container'>\n                <View className='at-radio__title'>{option.label}</View>\n                <View\n                  className={classNames({\n                    'at-radio__icon': true,\n                    'at-radio__icon--checked': value === option.value\n                  })}\n                >\n                  <Text className='at-icon at-icon-check'></Text>\n                </View>\n              </View>\n              {option.desc && (\n                <View className='at-radio__desc'>{option.desc}</View>\n              )}\n            </View>\n          </View>\n        ))}\n      </View>\n    )\n  }\n}\n\nAtRadio.defaultProps = {\n  customStyle: '',\n  className: '',\n  value: '',\n  options: [],\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onClick: (): void => {}\n}\n\nAtRadio.propTypes = {\n  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),\n  value: PropTypes.string,\n  options: PropTypes.array,\n  onClick: PropTypes.func\n}\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,eAA+B;AACtC,OAAO,WAAW;AAClB,SAAS,MAAM,YAAY;AAI3B,MAAO,gBAA8B,MAAM,UAA6B;AAAA,EAI9D,YAAY,QAA0B,OAA0B;AACtE,QAAI,OAAO,SAAU;AACrB,SAAK,MAAM,QAAQ,OAAO,OAAO,KAAK;AAAA,EACxC;AAAA,EAEO,SAAsB;AAC3B,UAAM,EAAE,aAAa,WAAW,SAAS,MAAM,IAAI,KAAK;AAExD,WACE,oCAAC,QAAK,WAAW,WAAW,YAAY,SAAS,GAAG,OAAO,eACxD,QAAQ,IAAI,YACX;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,OAAO;AAAA,QACZ,SAAS,KAAK,YAAY,KAAK,MAAM,MAAM;AAAA,QAC3C,WAAW,WAAW;AAAA,UACpB,oBAAoB;AAAA,UACpB,8BAA8B,OAAO;AAAA,QACvC,CAAC;AAAA;AAAA,MAED,oCAAC,QAAK,WAAU,2BACd,oCAAC,QAAK,WAAU,gCACd,oCAAC,QAAK,WAAU,qBAAmB,OAAO,KAAM,GAChD;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,WAAW;AAAA,YACpB,kBAAkB;AAAA,YAClB,2BAA2B,UAAU,OAAO;AAAA,UAC9C,CAAC;AAAA;AAAA,QAED,oCAAC,QAAK,WAAU,yBAAwB;AAAA,MAC1C,CACF,GACC,OAAO,QACN,oCAAC,QAAK,WAAU,oBAAkB,OAAO,IAAK,CAElD;AAAA,IACF,CACD,CACH;AAAA,EAEJ;AACF;AAEA,QAAQ,eAAe;AAAA,EACrB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS,CAAC;AAAA;AAAA,EAEV,SAAS,MAAY;AAAA,EAAC;AACxB;AAEA,QAAQ,YAAY;AAAA,EAClB,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC;AAAA,EAClE,OAAO,UAAU;AAAA,EACjB,SAAS,UAAU;AAAA,EACnB,SAAS,UAAU;AACrB;","names":[]}
+{"version":3,"sources":["../../../src/components/radio/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport { Text, View } from '@tarojs/components'\nimport { CommonEvent } from '@tarojs/components/types/common'\nimport { AtRadioProps, RadioOption } from '../../../types/radio'\nimport { noop } from '../../common/utils'\n\nfunction AtRadio({\n  customStyle = '',\n  className = '',\n  value = '',\n  options = [],\n  onClick = noop\n}: AtRadioProps<any>): JSX.Element {\n  const handleClick = (option: RadioOption<any>, event: CommonEvent): void => {\n    if (option.disabled) return\n    onClick(option.value, event)\n  }\n\n  return (\n    <View className={classNames('at-radio', className)} style={customStyle}>\n      {options.map(option => (\n        <View\n          key={option.value}\n          onClick={event => handleClick(option, event)}\n          className={classNames({\n            'at-radio__option': true,\n            'at-radio__option--disabled': option.disabled\n          })}\n        >\n          <View className='at-radio__option-wrap'>\n            <View className='at-radio__option-container'>\n              <View className='at-radio__title'>{option.label}</View>\n              <View\n                className={classNames({\n                  'at-radio__icon': true,\n                  'at-radio__icon--checked': value === option.value\n                })}\n              >\n                <Text className='at-icon at-icon-check'></Text>\n              </View>\n            </View>\n            {option.desc && (\n              <View className='at-radio__desc'>{option.desc}</View>\n            )}\n          </View>\n        </View>\n      ))}\n    </View>\n  )\n}\n\nAtRadio.propTypes = {\n  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),\n  value: PropTypes.string,\n  options: PropTypes.array,\n  onClick: PropTypes.func\n}\n\nexport default AtRadio\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,WAAW;AAClB,SAAS,MAAM,YAAY;AAG3B,SAAS,YAAY;AAErB,SAAS,QAAQ;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU,CAAC;AAAA,EACX,UAAU;AACZ,GAAmC;AACjC,QAAM,cAAc,CAAC,QAA0B,UAA6B;AAC1E,QAAI,OAAO,SAAU;AACrB,YAAQ,OAAO,OAAO,KAAK;AAAA,EAC7B;AAEA,SACE,oCAAC,QAAK,WAAW,WAAW,YAAY,SAAS,GAAG,OAAO,eACxD,QAAQ,IAAI,YACX;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,OAAO;AAAA,MACZ,SAAS,WAAS,YAAY,QAAQ,KAAK;AAAA,MAC3C,WAAW,WAAW;AAAA,QACpB,oBAAoB;AAAA,QACpB,8BAA8B,OAAO;AAAA,MACvC,CAAC;AAAA;AAAA,IAED,oCAAC,QAAK,WAAU,2BACd,oCAAC,QAAK,WAAU,gCACd,oCAAC,QAAK,WAAU,qBAAmB,OAAO,KAAM,GAChD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,kBAAkB;AAAA,UAClB,2BAA2B,UAAU,OAAO;AAAA,QAC9C,CAAC;AAAA;AAAA,MAED,oCAAC,QAAK,WAAU,yBAAwB;AAAA,IAC1C,CACF,GACC,OAAO,QACN,oCAAC,QAAK,WAAU,oBAAkB,OAAO,IAAK,CAElD;AAAA,EACF,CACD,CACH;AAEJ;AAEA,QAAQ,YAAY;AAAA,EAClB,aAAa,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC;AAAA,EAClE,OAAO,UAAU;AAAA,EACjB,SAAS,UAAU;AAAA,EACnB,SAAS,UAAU;AACrB;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/range/index.d.ts

@@ -1,22 +1,20 @@
-import { InferProps } from 'prop-types';
-import React from 'react';
-import { AtRangeProps, AtRangeState } from '../../../types/range';
-export default class AtRange extends React.Component<AtRangeProps, AtRangeState> {
-    static defaultProps: AtRangeProps;
-    static propTypes: InferProps<AtRangeProps>;
-    private width;
-    private left;
-    private deltaValue;
-    private currentSlider;
-    constructor(props: AtRangeProps);
-    private handleClick;
-    private handleTouchMove;
-    private handleTouchEnd;
-    private setSliderValue;
-    private setValue;
-    private triggerEvent;
-    private updatePos;
-    UNSAFE_componentWillReceiveProps(nextProps: AtRangeProps): void;
-    componentDidMount(): void;
-    render(): JSX.Element;
+import PropTypes from 'prop-types';
+import { AtRangeProps } from '../../../types/range';
+declare function AtRange({ customStyle, className, sliderStyle, railStyle, trackStyle, value, min, max, disabled, blockSize, onChange, onAfterChange }: AtRangeProps): JSX.Element;
+declare namespace AtRange {
+    var propTypes: {
+        customStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        className: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
+        sliderStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        railStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        trackStyle: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        value: PropTypes.Requireable<any[]>;
+        min: PropTypes.Requireable<number>;
+        max: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        blockSize: PropTypes.Requireable<number>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onAfterChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
 }
+export default AtRange;

package/dist/components/range/index.js

@@ -19,174 +19,166 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import classNames from "classnames";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "@tarojs/components";
 import {
   delayQuerySelector,
   getEventDetail,
   mergeStyle
 } from "../../common/utils";
-class AtRange extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = (event) => {
-      if (this.currentSlider && !this.props.disabled) {
-        let sliderValue = 0;
-        const detail = getEventDetail(event);
-        sliderValue = detail.x - this.left;
-        this.setSliderValue(this.currentSlider, sliderValue, "onChange");
-      }
-    };
-    const { min = 0, max = 100 } = props;
-    this.width = 0;
-    this.left = 0;
-    this.deltaValue = max - min;
-    this.currentSlider = "";
-    this.state = {
-      aX: 0,
-      bX: 0
-    };
-  }
-  handleTouchMove(sliderName, event) {
-    if (this.props.disabled) return;
-    event.stopPropagation();
-    const clientX = event.touches[0].clientX;
-    this.setSliderValue(sliderName, clientX - this.left, "onChange");
-  }
-  handleTouchEnd(sliderName) {
-    if (this.props.disabled) return;
-    this.currentSlider = sliderName;
-    this.triggerEvent("onAfterChange");
-  }
-  setSliderValue(sliderName, targetValue, funcName) {
-    const distance = Math.min(Math.max(targetValue, 0), this.width);
-    const sliderValue = Math.floor(distance / this.width * 100);
-    if (funcName) {
-      this.setState(
-        {
-          [sliderName]: sliderValue
-        },
-        () => this.triggerEvent(funcName)
-      );
-    } else {
-      this.setState({
-        [sliderName]: sliderValue
-      });
-    }
-  }
-  setValue(value) {
-    const { min = 0 } = this.props;
-    const aX = Math.round((value[0] - min) / this.deltaValue * 100);
-    const bX = Math.round((value[1] - min) / this.deltaValue * 100);
-    this.setState({ aX, bX });
-  }
-  triggerEvent(funcName) {
-    const { min = 0 } = this.props;
-    const { aX, bX } = this.state;
-    const a = Math.round(aX / 100 * this.deltaValue) + min;
-    const b = Math.round(bX / 100 * this.deltaValue) + min;
+function AtRange({
+  customStyle = "",
+  className = "",
+  sliderStyle = {},
+  railStyle = {},
+  trackStyle = {},
+  value = [0, 0],
+  min = 0,
+  max = 100,
+  disabled = false,
+  blockSize = 0,
+  onChange,
+  onAfterChange
+}) {
+  const widthRef = useRef(0);
+  const leftRef = useRef(0);
+  const deltaValueRef = useRef(max - min);
+  const currentSliderRef = useRef("");
+  const [{ aX, bX }, setAxis] = useState({ aX: 0, bX: 0 });
+  const stateRef = useRef({ aX: 0, bX: 0 });
+  stateRef.current = { aX, bX };
+  deltaValueRef.current = max - min;
+  const triggerEvent = (funcName) => {
+    const { aX: stateAX, bX: stateBX } = stateRef.current;
+    const a = Math.round(stateAX / 100 * deltaValueRef.current) + min;
+    const b = Math.round(stateBX / 100 * deltaValueRef.current) + min;
     const result = [a, b].sort((x, y) => x - y);
     if (funcName === "onChange") {
-      this.props.onChange && this.props.onChange(result);
+      onChange && onChange(result);
     } else if (funcName === "onAfterChange") {
-      this.props.onAfterChange && this.props.onAfterChange(result);
+      onAfterChange && onAfterChange(result);
+    }
+  };
+  const setValue = (nextValue) => {
+    const aXVal = Math.round(
+      (nextValue[0] - min) / deltaValueRef.current * 100
+    );
+    const bXVal = Math.round(
+      (nextValue[1] - min) / deltaValueRef.current * 100
+    );
+    setAxis({ aX: aXVal, bX: bXVal });
+  };
+  const setSliderValue = (sliderName, targetValue, funcName) => {
+    const distance = Math.min(Math.max(targetValue, 0), widthRef.current);
+    const sliderValue = Math.floor(distance / widthRef.current * 100);
+    if (funcName) {
+      setAxis((prev) => {
+        const next = __spreadProps(__spreadValues({}, prev), { [sliderName]: sliderValue });
+        stateRef.current = next;
+        const a = Math.round(next.aX / 100 * deltaValueRef.current) + min;
+        const b = Math.round(next.bX / 100 * deltaValueRef.current) + min;
+        const result = [a, b].sort((x, y) => x - y);
+        if (funcName === "onChange") {
+          onChange && onChange(result);
+        } else if (funcName === "onAfterChange") {
+          onAfterChange && onAfterChange(result);
+        }
+        return next;
+      });
+    } else {
+      setAxis((prev) => __spreadProps(__spreadValues({}, prev), { [sliderName]: sliderValue }));
     }
-  }
-  updatePos() {
+  };
+  const updatePos = () => {
     delayQuerySelector(".at-range__container", 0).then((rect) => {
       var _a, _b;
-      this.width = Math.round((_a = rect[0]) == null ? void 0 : _a.width);
-      this.left = Math.round((_b = rect[0]) == null ? void 0 : _b.left);
+      widthRef.current = Math.round((_a = rect[0]) == null ? void 0 : _a.width);
+      leftRef.current = Math.round((_b = rect[0]) == null ? void 0 : _b.left);
     });
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  };
+  const handleClick = (event) => {
+    if (currentSliderRef.current && !disabled) {
+      let sliderValue = 0;
+      const detail = getEventDetail(event);
+      sliderValue = detail.x - leftRef.current;
+      setSliderValue(currentSliderRef.current, sliderValue, "onChange");
+    }
+  };
+  const handleTouchMove = (sliderName, event) => {
+    if (disabled) return;
+    event.stopPropagation();
+    const clientX = event.touches[0].clientX;
+    setSliderValue(sliderName, clientX - leftRef.current, "onChange");
+  };
+  const handleTouchEnd = (sliderName) => {
+    if (disabled) return;
+    currentSliderRef.current = sliderName;
+    triggerEvent("onAfterChange");
+  };
+  useEffect(() => {
+    updatePos();
+    setValue(value);
+  }, []);
+  const prevValueRef = useRef(value);
+  useEffect(() => {
     var _a, _b;
-    const { value = [] } = nextProps;
-    this.updatePos();
-    if (((_a = this.props.value) == null ? void 0 : _a[0]) !== (value == null ? void 0 : value[0]) || ((_b = this.props.value) == null ? void 0 : _b[1]) !== (value == null ? void 0 : value[1])) {
-      this.setValue(value);
+    updatePos();
+    if (((_a = prevValueRef.current) == null ? void 0 : _a[0]) !== (value == null ? void 0 : value[0]) || ((_b = prevValueRef.current) == null ? void 0 : _b[1]) !== (value == null ? void 0 : value[1])) {
+      setValue(value);
     }
-  }
-  componentDidMount() {
-    const { value = [] } = this.props;
-    this.updatePos();
-    this.setValue(value);
-  }
-  render() {
-    const {
-      className,
-      customStyle,
-      sliderStyle = {},
-      railStyle = {},
-      trackStyle = {},
-      blockSize,
-      disabled
-    } = this.props;
-    const rootCls = classNames(
-      "at-range",
-      {
-        "at-range--disabled": disabled
-      },
-      className
-    );
-    const { aX, bX } = this.state;
-    const sliderCommonStyle = {
-      width: blockSize ? `${blockSize}PX` : "",
-      height: blockSize ? `${blockSize}PX` : "",
-      marginLeft: blockSize ? `${-blockSize / 2}PX` : ""
-    };
-    const sliderAStyle = __spreadProps(__spreadValues({}, sliderCommonStyle), {
-      left: `${aX}%`
-    });
-    const sliderBStyle = __spreadProps(__spreadValues({}, sliderCommonStyle), {
-      left: `${bX}%`
-    });
-    const containerStyle = {
-      height: blockSize ? `${blockSize}PX` : ""
-    };
-    const smallerX = Math.min(aX, bX);
-    const deltaX = Math.abs(aX - bX);
-    const atTrackStyle = {
-      left: `${smallerX}%`,
-      width: `${deltaX}%`
-    };
-    return /* @__PURE__ */ React.createElement(View, { className: rootCls, style: customStyle, onClick: this.handleClick }, /* @__PURE__ */ React.createElement(View, { className: "at-range__container", style: containerStyle }, /* @__PURE__ */ React.createElement(View, { className: "at-range__rail", style: railStyle }), /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: "at-range__track",
-        style: mergeStyle(atTrackStyle, trackStyle)
-      }
-    ), /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: "at-range__slider",
-        style: mergeStyle(sliderAStyle, sliderStyle),
-        onTouchMove: this.handleTouchMove.bind(this, "aX"),
-        onTouchEnd: this.handleTouchEnd.bind(this, "aX")
-      }
-    ), /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: "at-range__slider",
-        style: mergeStyle(sliderBStyle, sliderStyle),
-        onTouchMove: this.handleTouchMove.bind(this, "bX"),
-        onTouchEnd: this.handleTouchEnd.bind(this, "bX")
-      }
-    )));
-  }
+    prevValueRef.current = value;
+  }, [value, min, max]);
+  const rootCls = classNames(
+    "at-range",
+    {
+      "at-range--disabled": disabled
+    },
+    className
+  );
+  const sliderCommonStyle = {
+    width: blockSize ? `${blockSize}PX` : "",
+    height: blockSize ? `${blockSize}PX` : "",
+    marginLeft: blockSize ? `${-blockSize / 2}PX` : ""
+  };
+  const sliderAStyle = __spreadProps(__spreadValues({}, sliderCommonStyle), {
+    left: `${aX}%`
+  });
+  const sliderBStyle = __spreadProps(__spreadValues({}, sliderCommonStyle), {
+    left: `${bX}%`
+  });
+  const containerStyle = {
+    height: blockSize ? `${blockSize}PX` : ""
+  };
+  const smallerX = Math.min(aX, bX);
+  const deltaX = Math.abs(aX - bX);
+  const atTrackStyle = {
+    left: `${smallerX}%`,
+    width: `${deltaX}%`
+  };
+  return /* @__PURE__ */ React.createElement(View, { className: rootCls, style: customStyle, onClick: handleClick }, /* @__PURE__ */ React.createElement(View, { className: "at-range__container", style: containerStyle }, /* @__PURE__ */ React.createElement(View, { className: "at-range__rail", style: railStyle }), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: "at-range__track",
+      style: mergeStyle(atTrackStyle, trackStyle)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: "at-range__slider",
+      style: mergeStyle(sliderAStyle, sliderStyle),
+      onTouchMove: (event) => handleTouchMove("aX", event),
+      onTouchEnd: () => handleTouchEnd("aX")
+    }
+  ), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: "at-range__slider",
+      style: mergeStyle(sliderBStyle, sliderStyle),
+      onTouchMove: (event) => handleTouchMove("bX", event),
+      onTouchEnd: () => handleTouchEnd("bX")
+    }
+  )));
 }
-AtRange.defaultProps = {
-  customStyle: "",
-  className: "",
-  sliderStyle: "",
-  railStyle: "",
-  trackStyle: "",
-  value: [0, 0],
-  min: 0,
-  max: 100,
-  disabled: false,
-  blockSize: 0
-};
 AtRange.propTypes = {
   customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
@@ -201,7 +193,8 @@ AtRange.propTypes = {
   onChange: PropTypes.func,
   onAfterChange: PropTypes.func
 };
+var range_default = AtRange;
 export {
-  AtRange as default
+  range_default as default
 };
 //# sourceMappingURL=index.js.map