taro-react-uilib 1.3.0-1 → 1.3.0-3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [1.3.0-3](https://code.xhdev.xyz/h5group/taro-uilib/compare/v1.3.0-2...v1.3.0-3) (2023-05-17)
+
+
+### Performance Improvements
+
+* pickeicker优化 ([1c2ea74](https://code.xhdev.xyz/h5group/taro-uilib/commits/1c2ea74764257a42608b0c73e6428879d710c641))
+
+
+
+# [1.3.0-2](https://code.xhdev.xyz/h5group/taro-uilib/compare/v1.3.0-1...v1.3.0-2) (2023-05-11)
+
+
+### Features
+
+* 修复折叠面板问题 ([17a39c5](https://code.xhdev.xyz/h5group/taro-uilib/commits/17a39c51c870ec6852210478eb6128d880d062d0))
+
+
+
 # [1.3.0-1](https://code.xhdev.xyz/h5group/taro-uilib/compare/v1.3.0-0...v1.3.0-1) (2023-05-11)
 
 

package/dist/components/Collapse/index.js

@@ -1,2 +1,2 @@
-import{__rest as e,__read as r,__assign as o}from"../node_modules/tslib/tslib.es6.js";import n,{useRef as t,useState as l,useEffect as s,useMemo as a}from"react";import c from"../List/index.js";import{View as i}from"@tarojs/components";import m from"classnames";var u=function(u){var p=u.summary,h=void 0===p?"":p,v=u.children,d=u.open,f=void 0!==d&&d;u.arrow;var N=u.className,g=u.style,y=u.onToggle,E=e(u,["summary","children","open","arrow","className","style","onToggle"]),x=t(null),T=r(l(f),2),b=T[0],w=T[1],V=r(l(0),2),_=V[0],j=V[1];s((function(){var e;x.current&&"h5"===process.env.TARO_ENV&&j(null===(e=x.current)||void 0===e?void 0:e.scrollHeight)}),[x.current]);var A=a((function(){var e,r={height:0};return b&&(r.height="h5"===process.env.TARO_ENV?"".concat(_,"px"):"auto"),"h5"===process.env.TARO_ENV&&b&&(null===(e=x.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"end",inline:"nearest"})),null==y||y(b),r}),[b,_]);return n.createElement(i,{className:m("xh-collapse",N),style:g},n.createElement(i,{className:m("xh-collapse-summary",{open:b}),onClick:function(){w((function(e){return!e}))}},h||n.createElement(c,o({},E,{arrow:!0}))),n.createElement(i,{className:m("xh-collapse-detail"),ref:x,style:A},v))};export{u as default};
+import{__rest as e,__read as o,__assign as r}from"../node_modules/tslib/tslib.es6.js";import l,{useRef as t,useState as n,useMemo as s}from"react";import a from"../List/index.js";import{View as c}from"@tarojs/components";import i from"classnames";var m=function(m){var u=m.summary,p=void 0===u?"":u,h=m.children,d=m.open,v=void 0!==d&&d;m.arrow;var f=m.className,g=m.style,y=m.onToggle,N=e(m,["summary","children","open","arrow","className","style","onToggle"]),x=t(null),E=o(n(v),2),b=E[0],w=E[1],T=s((function(){var e,o,r={height:0};return b&&(r.height="h5"===process.env.TARO_ENV?"".concat(null===(e=x.current)||void 0===e?void 0:e.scrollHeight,"px"):"auto"),"h5"===process.env.TARO_ENV&&b&&(null===(o=x.current)||void 0===o||o.scrollIntoView({behavior:"smooth",block:"end",inline:"nearest"})),null==y||y(b),r}),[b]);return l.createElement(c,{className:i("xh-collapse",f),style:g},l.createElement(c,{className:i("xh-collapse-summary",{open:b}),onClick:function(){w((function(e){return!e}))}},p||l.createElement(a,r({},N,{arrow:!0}))),l.createElement(c,{className:i("xh-collapse-detail"),ref:x,style:T},h))};export{m as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\nimport { XHComponentCommonProps } from \"@/types\";\nimport List, { XHListProps } from \"@/components/List\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\n\nimport \"./index.scss\";\n\nexport type CollapseProps = {\n  summary?: string | ReactNode;\n  open?: boolean;\n  style?: React.CSSProperties;\n  onToggle?: (open: boolean) => void;\n} & XHComponentCommonProps &\n  XHListProps;\n\nconst Collapse: React.FC<CollapseProps> = props => {\n  const {\n    summary = \"\",\n    children,\n    open = false,\n    arrow,\n    className,\n    style,\n    onToggle,\n    ...rest\n  } = props;\n  const detailRef = useRef<HTMLDivElement>(null);\n  const [innerOpen, setInneropen] = useState(open);\n  const handleOnchange = () => {\n    setInneropen(old => !old);\n  };\n\n  const [originHeight, setoriginHeight] = useState(0); // 原始高度\n\n  useEffect(() => {\n    if (detailRef.current && process.env.TARO_ENV === \"h5\") {\n      setoriginHeight(detailRef.current?.scrollHeight);\n    }\n  }, [detailRef.current]);\n\n  const detailStyle = useMemo(() => {\n    const style: React.CSSProperties = { height: 0 };\n    if (innerOpen)\n      style.height =\n        process.env.TARO_ENV === \"h5\" ? `${originHeight}px` : \"auto\";\n    process.env.TARO_ENV === \"h5\" &&\n      innerOpen &&\n      detailRef.current?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"end\",\n        inline: \"nearest\",\n      });\n    onToggle?.(innerOpen);\n    return style;\n  }, [innerOpen, originHeight]);\n\n  return (\n    <View className={classNames(\"xh-collapse\", className)} style={style}>\n      <View\n        className={classNames(\"xh-collapse-summary\", { open: innerOpen })}\n        onClick={handleOnchange}\n      >\n        {summary || <List {...rest} arrow />}\n      </View>\n      <View\n        className={classNames(\"xh-collapse-detail\")}\n        ref={detailRef}\n        style={detailStyle}\n      >\n        {children}\n      </View>\n    </View>\n  );\n};\n\nexport default Collapse;\n"],"names":["Collapse","props","_a","summary","children","_b","open","arrow","className","style","onToggle","rest","detailRef","useRef","_c","__read","useState","innerOpen","setInneropen","_d","originHeight","setoriginHeight","useEffect","current","process","env","TARO_ENV","scrollHeight","detailStyle","useMemo","height","concat","scrollIntoView","behavior","block","inline","React","createElement","View","classNames","onClick","old","List","__assign","ref"],"mappings":"sQAgBM,IAAAA,EAAoC,SAAAC,GAEtC,IAAAC,EAQED,EARUE,QAAZA,OAAU,IAAAD,EAAA,GAAEA,EACZE,EAOEH,EAPMG,SACRC,EAMEJ,EAAKK,KANPA,OAAI,IAAAD,GAAQA,EAMVJ,EAAKM,MAJP,IAAAC,EAIEP,EAJOO,UACTC,EAGER,EAAKQ,MAFPC,EAEET,EAAKS,SADJC,IACDV,EATE,CASL,UAAA,WAAA,OAAA,QAAA,YAAA,QAAA,aACKW,EAAYC,EAAuB,MACnCC,EAAAC,EAA4BC,EAASV,GAAK,GAAzCW,EAASH,EAAA,GAAEI,OAKZC,EAAAJ,EAAkCC,EAAS,GAAE,GAA5CI,OAAcC,EAA8BF,EAAA,GAEnDG,GAAU,iBACJV,EAAUW,SAAoC,OAAzBC,QAAQC,IAAIC,UACnCL,EAAmC,UAAnBT,EAAUW,eAAS,IAAArB,OAAA,EAAAA,EAAAyB,aAEvC,GAAG,CAACf,EAAUW,UAEd,IAAMK,EAAcC,GAAQ,iBACpBpB,EAA6B,CAAEqB,OAAQ,GAY7C,OAXIb,IACFR,EAAMqB,OACqB,OAAzBN,QAAQC,IAAIC,SAAoB,GAAAK,OAAGX,EAAgB,MAAG,QACjC,OAAzBI,QAAQC,IAAIC,UACVT,IACiB,QAAjBf,EAAAU,EAAUW,eAAO,IAAArB,GAAAA,EAAE8B,eAAe,CAChCC,SAAU,SACVC,MAAO,MACPC,OAAQ,aAEZzB,SAAAA,EAAWO,GACJR,CACT,GAAG,CAACQ,EAAWG,IAEf,OACEgB,EAAAC,cAACC,EAAI,CAAC9B,UAAW+B,EAAW,cAAe/B,GAAYC,MAAOA,GAC5D2B,EAAAC,cAACC,EAAI,CACH9B,UAAW+B,EAAW,sBAAuB,CAAEjC,KAAMW,IACrDuB,QAhCiB,WACrBtB,GAAa,SAAAuB,GAAO,OAACA,CAAG,GAC1B,GAgCOtC,GAAWiC,EAAAC,cAACK,EAAIC,EAAA,GAAKhC,EAAI,CAAEJ,OAAK,MAEnC6B,EAACC,cAAAC,GACC9B,UAAW+B,EAAW,sBACtBK,IAAKhC,EACLH,MAAOmB,GAENxB,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useRef, useState } from \"react\";\nimport List, { XHListProps } from \"@/components/List\";\nimport { View } from \"@tarojs/components\";\nimport classNames from \"classnames\";\n\nimport \"./index.scss\";\n\nexport type CollapseProps = {\n  summary?: string | ReactNode;\n  open?: boolean;\n  style?: React.CSSProperties;\n  onToggle?: (open: boolean) => void;\n} & XHListProps;\n\nconst Collapse: React.FC<CollapseProps> = props => {\n  const {\n    summary = \"\",\n    children,\n    open = false,\n    arrow,\n    className,\n    style,\n    onToggle,\n    ...rest\n  } = props;\n  const detailRef = useRef<HTMLDivElement>(null);\n  const [innerOpen, setInneropen] = useState(open);\n  const handleOnchange = () => {\n    setInneropen(old => !old);\n  };\n\n  const detailStyle = useMemo(() => {\n    const style: React.CSSProperties = { height: 0 };\n    if (innerOpen)\n      style.height =\n        process.env.TARO_ENV === \"h5\"\n          ? `${detailRef.current?.scrollHeight}px`\n          : \"auto\";\n    process.env.TARO_ENV === \"h5\" &&\n      innerOpen &&\n      detailRef.current?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"end\",\n        inline: \"nearest\",\n      });\n    onToggle?.(innerOpen);\n    return style;\n  }, [innerOpen]);\n\n  return (\n    <View className={classNames(\"xh-collapse\", className)} style={style}>\n      <View\n        className={classNames(\"xh-collapse-summary\", { open: innerOpen })}\n        onClick={handleOnchange}\n      >\n        {summary || <List {...rest} arrow />}\n      </View>\n      <View\n        className={classNames(\"xh-collapse-detail\")}\n        ref={detailRef}\n        style={detailStyle}\n      >\n        {children}\n      </View>\n    </View>\n  );\n};\n\nexport default Collapse;\n"],"names":["Collapse","props","_a","summary","children","_b","open","arrow","className","style","onToggle","rest","detailRef","useRef","_c","__read","useState","innerOpen","setInneropen","detailStyle","useMemo","height","process","env","TARO_ENV","current","scrollHeight","scrollIntoView","behavior","block","inline","React","createElement","View","classNames","onClick","old","List","__assign","ref"],"mappings":"uPAcM,IAAAA,EAAoC,SAAAC,GAEtC,IAAAC,EAQED,EARUE,QAAZA,OAAU,IAAAD,EAAA,GAAEA,EACZE,EAOEH,EAPMG,SACRC,EAMEJ,EAAKK,KANPA,OAAI,IAAAD,GAAQA,EAMVJ,EAAKM,MAJP,IAAAC,EAIEP,EAJOO,UACTC,EAGER,EAAKQ,MAFPC,EAEET,EAAKS,SADJC,IACDV,EATE,CASL,UAAA,WAAA,OAAA,QAAA,YAAA,QAAA,aACKW,EAAYC,EAAuB,MACnCC,EAAAC,EAA4BC,EAASV,GAAK,GAAzCW,EAASH,EAAA,GAAEI,OAKZC,EAAcC,GAAQ,mBACpBX,EAA6B,CAAEY,OAAQ,GAc7C,OAbIJ,IACFR,EAAMY,OACqB,OAAzBC,QAAQC,IAAIC,SACR,UAAoB,QAAjBtB,EAAAU,EAAUa,eAAO,IAAAvB,OAAA,EAAAA,EAAEwB,aAAgB,MACtC,QACiB,OAAzBJ,QAAQC,IAAIC,UACVP,IACiB,QAAjBZ,EAAAO,EAAUa,eAAO,IAAApB,GAAAA,EAAEsB,eAAe,CAChCC,SAAU,SACVC,MAAO,MACPC,OAAQ,aAEZpB,SAAAA,EAAWO,GACJR,CACT,GAAG,CAACQ,IAEJ,OACEc,EAAAC,cAACC,EAAI,CAACzB,UAAW0B,EAAW,cAAe1B,GAAYC,MAAOA,GAC5DsB,EAAAC,cAACC,EAAI,CACHzB,UAAW0B,EAAW,sBAAuB,CAAE5B,KAAMW,IACrDkB,QA1BiB,WACrBjB,GAAa,SAAAkB,GAAO,OAACA,CAAG,GAC1B,GA0BOjC,GAAW4B,EAAAC,cAACK,EAAIC,EAAA,GAAK3B,EAAI,CAAEJ,OAAK,MAEnCwB,EAACC,cAAAC,GACCzB,UAAW0B,EAAW,sBACtBK,IAAK3B,EACLH,MAAOU,GAENf,GAIT"}

package/dist/components/Picker/PickerSlot.js

@@ -1,2 +1,2 @@
-import{__read as e,__awaiter as t,__generator as n}from"../node_modules/tslib/tslib.es6.js";import r,{useState as o,useRef as a,useEffect as c,useImperativeHandle as i}from"react";import{View as u}from"@tarojs/components";import{useTouch as l}from"../src/hooks/useTouch.js";var s=r.forwardRef((function(s,f){var m=s.keyIndex,d=void 0===m?0:m,h=s.defaultValue,p=s.data,v=void 0===p?[]:p,b=s.mode,x=void 0===b?"normal":b,g=s.swipeDuration,M=void 0===g?1e3:g,y=s.visible,k=void 0!==y&&y,E=s.onConfirm,j=l(),T=e(o(1),2),D=T[0],N=T[1],w=a(36),Y=e(o(0),2),z=Y[0],F=Y[1],H=e(o("0deg"),2),V=H[0],C=H[1],I=a(!1),P=a(null),R=a(null),S=a(null),_=e(o(0),2),q=_[0],A=_[1],B=e(o(0),2),G=B[0],J=B[1],K=a(0),L=e(o(0),2),O=L[0],Q=L[1],U=function(e){return e>=D+8||e<=D-8},W=function(e,t,n,r){void 0===e&&(e=0),void 0===n&&(n=200);var o=n;"end"!==t&&(o=0),F(o),C(r),Q(e)},X=function(e,t,n){var r=e+K.current;if("end"===t){r>0&&(r=0),r<-(v.length-1)*w.current&&(r=-(v.length-1)*w.current);var o=Math.round(r/w.current)*w.current,a="".concat(20*(Math.abs(Math.round(o/w.current))+1),"deg");W(o,t,n,a),N(Math.abs(Math.round(o/w.current))+1)}else{a=0;var c=20*(-r/w.current+1),i=20*(v.length+1);0<(a=Math.min(Math.max(c,0),i))&&a<i&&(W(r,"",void 0,"".concat(a,"deg")),N(Math.abs(Math.round(r/w.current))+1))}},Z=function(e){var t=Math.round(-e/w.current);E&&E(v[t],d)},$=function(e,t){var n=e;return n=Math.abs(n/t)/.003*(n<0?-1:1)},ee=function(e,t){var n=t||h,r=-1;n?v.forEach((function(e,t){return("object"==typeof e?e.value===n:e===n)&&(r=t,!0)})):v.forEach((function(e,t){("object"==typeof e?e.value===h:e===h)&&(r=t)})),N(-1===r?1:r+1);var o=-1===r?0:r*w.current;e&&Z(-o),X(-o)},te=function(){I.current=!1,F(0),Z(O)},ne=function(e,t){("boolean"!=typeof e.cancelable||e.cancelable)&&e.preventDefault(),t&&e.stopPropagation()};return c((function(){return Q(0),K.current=0,ee(!1),function(){clearTimeout(undefined)}}),[v]),c((function(){k&&setTimeout((function(){t(void 0,void 0,void 0,(function(){return n(this,(function(e){return ee(!0),[2]}))}))}),200)}),[k]),i(f,(function(){return{stopMomentum:te,moving:I.current}})),r.createElement(u,{className:"xh-picker-list",ref:S,onTouchStart:function(e){j.start(e),J(j.deltaY),A(Date.now()),K.current=O},onTouchMove:function(e){j.move(e),j.isVertical()&&(I.current=!0,ne(e,!0));var t=j.deltaY-G;X(t)},onTouchEnd:function(){if(I.current){var e=j.deltaY-G,t=Date.now()-q;if(t<=300&&Math.abs(e)>15){var n=$(e,t);X(n,"end",+M)}else X(e,"end");setTimeout((function(){j.reset()}),0)}}},r.createElement(u,{className:"xh-picker-roller",ref:R,style:"3D"===x?{transition:"transform ".concat(z,"ms cubic-bezier(0.17, 0.89, 0.45, 1)"),transform:"rotate3d(1, 0, 0, ".concat(V,")")}:{transition:"transform ".concat(z,"ms cubic-bezier(0.17, 0.89, 0.45, 1)"),transform:"translate3d(0, ".concat(O,"px, 0)")},onTransitionEnd:te},"3D"===x&&v.map((function(e,t){return r.createElement(u,{className:"xh-picker-roller-item ".concat(U(t+1)&&"nut-picker-roller-item-hidden"),style:{transform:"rotate3d(1, 0, 0, ".concat(-20*(t+1),"deg) translate3d(0px, 0px, 104px)"),height:"".concat(w.current,"px"),lineHeight:"".concat(w.current,"px")},key:"string"==typeof e?t:e.value?e.value:t},r.createElement(r.Fragment,null,"object"==typeof e?e.text:e))})),"normal"===x&&v.map((function(e,t){return r.createElement(u,{className:"xh-picker-roller-item-title",key:"object"==typeof e?e.value:e||t,style:{height:"".concat(w.current,"px"),lineHeight:"".concat(w.current,"px")}},r.createElement(r.Fragment,null,"object"==typeof e?e.text:e))}))),r.createElement(u,{className:"xh-picker-mask"}),r.createElement(u,{className:"xh-picker-indicator",ref:P}))}));export{s as default};
+import{__read as e,__awaiter as t,__generator as n}from"../node_modules/tslib/tslib.es6.js";import r,{useState as o,useRef as a,useEffect as c,useImperativeHandle as i}from"react";import{View as u}from"@tarojs/components";import{useTouch as l}from"../src/hooks/useTouch.js";var s=r.forwardRef((function(s,f){var m=s.keyIndex,d=void 0===m?0:m,h=s.defaultValue,p=s.data,v=void 0===p?[]:p,b=s.mode,x=void 0===b?"normal":b,g=s.swipeDuration,M=void 0===g?1e3:g,y=s.visible,k=void 0!==y&&y,E=s.onConfirm,j=l(),T=e(o(1),2),D=T[0],N=T[1],w=a(48),Y=e(o(0),2),z=Y[0],F=Y[1],H=e(o("0deg"),2),V=H[0],C=H[1],I=a(!1),P=a(null),R=a(null),S=a(null),_=e(o(0),2),q=_[0],A=_[1],B=e(o(0),2),G=B[0],J=B[1],K=a(0),L=e(o(0),2),O=L[0],Q=L[1],U=function(e){return e>=D+8||e<=D-8},W=function(e,t,n,r){void 0===e&&(e=0),void 0===n&&(n=200);var o=n;"end"!==t&&(o=0),F(o),C(r),Q(e)},X=function(e,t,n){var r=e+K.current;if("end"===t){r>0&&(r=0),r<-(v.length-1)*w.current&&(r=-(v.length-1)*w.current);var o=Math.round(r/w.current)*w.current,a="".concat(22*(Math.abs(Math.round(o/w.current))+1),"deg");W(o,t,n,a),N(Math.abs(Math.round(o/w.current))+1)}else{a=0;var c=22*(-r/w.current+1),i=22*(v.length+1);0<(a=Math.min(Math.max(c,0),i))&&a<i&&(W(r,"",void 0,"".concat(a,"deg")),N(Math.abs(Math.round(r/w.current))+1))}},Z=function(e){var t=Math.round(-e/w.current);E&&E(v[t],d)},$=function(e,t){var n=e;return n=Math.abs(n/t)/.003*(n<0?-1:1)},ee=function(e,t){var n=t||h,r=-1;n?v.forEach((function(e,t){return("object"==typeof e?e.value===n:e===n)&&(r=t,!0)})):v.forEach((function(e,t){("object"==typeof e?e.value===h:e===h)&&(r=t)})),N(-1===r?1:r+1);var o=-1===r?0:r*w.current;e&&Z(-o),X(-o)},te=function(){I.current=!1,F(0),Z(O)},ne=function(e,t){("boolean"!=typeof e.cancelable||e.cancelable)&&e.preventDefault(),t&&e.stopPropagation()};return c((function(){return Q(0),K.current=0,ee(!1),function(){clearTimeout(undefined)}}),[v]),c((function(){k&&setTimeout((function(){t(void 0,void 0,void 0,(function(){return n(this,(function(e){return ee(!0),[2]}))}))}),200)}),[k]),i(f,(function(){return{stopMomentum:te,moving:I.current}})),r.createElement(u,{className:"xh-picker-list",ref:S,onTouchStart:function(e){j.start(e),J(j.deltaY),A(Date.now()),K.current=O},onTouchMove:function(e){j.move(e),j.isVertical()&&(I.current=!0,ne(e,!0));var t=j.deltaY-G;X(t)},onTouchEnd:function(){if(I.current){var e=j.deltaY-G,t=Date.now()-q;if(t<=300&&Math.abs(e)>15){var n=$(e,t);X(n,"end",+M)}else X(e,"end");setTimeout((function(){j.reset()}),0)}}},r.createElement(u,{className:"xh-picker-roller",ref:R,style:"3D"===x?{transition:"transform ".concat(z,"ms cubic-bezier(0.17, 0.89, 0.45, 1)"),transform:"rotate3d(1, 0, 0, ".concat(V,")")}:{transition:"transform ".concat(z,"ms cubic-bezier(0.17, 0.89, 0.45, 1)"),transform:"translate3d(0, ".concat(O,"px, 0)")},onTransitionEnd:te},"3D"===x&&v.map((function(e,t){return r.createElement(u,{className:"xh-picker-roller-item ".concat(U(t+1)&&"nut-picker-roller-item-hidden"),style:{transform:"rotate3d(1, 0, 0, ".concat(-22*(t+1),"deg) translate3d(0px, 0px, 104px)"),height:"".concat(w.current,"px"),lineHeight:"".concat(w.current,"px")},key:"string"==typeof e?t:e.value?e.value:t},r.createElement(r.Fragment,null,"object"==typeof e?e.text:e))})),"normal"===x&&v.map((function(e,t){return r.createElement(u,{className:"xh-picker-roller-item-title",key:"object"==typeof e?e.value:e||t,style:{height:"".concat(w.current,"px"),lineHeight:"".concat(w.current,"px")}},r.createElement(r.Fragment,null,"object"==typeof e?e.text:e))}))),r.createElement(u,{className:"xh-picker-mask"}),r.createElement(u,{className:"xh-picker-indicator",ref:P}))}));export{s as default};
 //# sourceMappingURL=PickerSlot.js.map

package/dist/components/Picker/PickerSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSlot.js","sources":["../../../src/components/Picker/PickerSlot.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ForwardRefRenderFunction,\n  useImperativeHandle,\n  MouseEventHandler,\n} from \"react\";\nimport { View } from \"@tarojs/components\";\nimport { useTouch } from \"../../hooks/useTouch\";\nimport \"./index.scss\";\n\ninterface PickerObjectValue {\n  text: string | number;\n  value: string | number;\n  [key: string]: any;\n}\nexport type PickerValue = string | PickerObjectValue;\n\ninterface PickerSlotProps<T extends PickerValue = PickerObjectValue> {\n  defaultValue?: string | number;\n  data: T[];\n  mode?: \"normal\" | \"3D\";\n  swipeDuration?: number | string;\n  onConfirm?: (value: T, index: number) => void;\n  onCancel?: MouseEventHandler;\n  onClose?: MouseEventHandler;\n  keyIndex: number;\n  visible: boolean;\n}\n\nconst InternalPickerSlot: ForwardRefRenderFunction<\n  { stopMomentum: () => void; moving: boolean },\n  Partial<PickerSlotProps>\n> = (props, ref) => {\n  const {\n    keyIndex = 0,\n    defaultValue,\n    data = [],\n    mode = \"normal\",\n    swipeDuration = 1000,\n    visible = false,\n    onConfirm,\n  } = props;\n\n  const touch = useTouch();\n\n  const DEFAULT_DURATION = 200;\n  // 触发惯性滑动条件:\n  // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move\n  // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动\n  const INERTIA_TIME = 300;\n  const INERTIA_DISTANCE = 15;\n  const [currIndex, setCurrIndex] = useState(1);\n  const lineSpacing = useRef(36);\n\n  const [touchTime, setTouchTime] = useState(0);\n  const [touchDeg, setTouchDeg] = useState(\"0deg\");\n  const rotation = 20;\n  const moving = useRef(false);\n  let timer: number | undefined;\n\n  const listbox = useRef<any>(null);\n  const rollerRef = useRef<any>(null);\n  const pickerSlotRef = useRef<any>(null);\n\n  const [startTime, setStartTime] = useState(0);\n  const [startY, setStartY] = useState(0);\n\n  const transformY = useRef(0);\n  const [scrollDistance, setScrollDistance] = useState(0);\n\n  const isHidden = (index: number) => {\n    if (index >= currIndex + 8 || index <= currIndex - 8) {\n      return true;\n    }\n    return false;\n  };\n\n  const setTransform = (\n    translateY = 0,\n    type: string,\n    time = DEFAULT_DURATION,\n    deg: string\n  ) => {\n    let nTime = time;\n    if (type !== \"end\") {\n      nTime = 0;\n    }\n\n    setTouchTime(nTime);\n    setTouchDeg(deg);\n\n    setScrollDistance(translateY);\n  };\n\n  const setMove = (move: number, type?: string, time?: number) => {\n    let updateMove = move + transformY.current;\n    if (type === \"end\") {\n      // 限定滚动距离\n      if (updateMove > 0) {\n        updateMove = 0;\n      }\n      if (updateMove < -(data.length - 1) * lineSpacing.current) {\n        updateMove = -(data.length - 1) * lineSpacing.current;\n      }\n\n      // 设置滚动距离为lineSpacing的倍数值\n      const endMove =\n        Math.round(updateMove / lineSpacing.current) * lineSpacing.current;\n      const deg = `${\n        (Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation\n      }deg`;\n\n      setTransform(endMove, type, time, deg);\n\n      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);\n    } else {\n      let deg = 0;\n      const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation;\n\n      // picker 滚动的最大角度\n      const maxDeg = (data.length + 1) * rotation;\n      const minDeg = 0;\n\n      deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);\n\n      if (minDeg < deg && deg < maxDeg) {\n        setTransform(updateMove, \"\", undefined, `${deg}deg`);\n        setCurrIndex(\n          Math.abs(Math.round(updateMove / lineSpacing.current)) + 1\n        );\n      }\n    }\n  };\n\n  const setChooseValue = (move: number) => {\n    const index = Math.round(-move / lineSpacing.current);\n    onConfirm && onConfirm(data[index], keyIndex);\n  };\n\n  // 开始滚动\n  const touchStart = event => {\n    touch.start(event);\n    setStartY(touch.deltaY);\n    setStartTime(Date.now());\n    transformY.current = scrollDistance;\n  };\n\n  const touchMove = event => {\n    touch.move(event);\n    if (touch.isVertical()) {\n      moving.current = true;\n      preventDefault(event, true);\n    }\n    const move = touch.deltaY - startY;\n    setMove(move);\n  };\n\n  const touchEnd = () => {\n    if (!moving.current) return;\n    const move = touch.deltaY - startY;\n    const moveTime = Date.now() - startTime;\n    // 区分是否为惯性滚动\n    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {\n      // 惯性滚动\n      const distance = momentum(move, moveTime);\n      setMove(distance, \"end\", +swipeDuration);\n    } else {\n      setMove(move, \"end\");\n    }\n\n    setTimeout(() => {\n      touch.reset();\n    }, 0);\n  };\n\n  // 惯性滚动 距离\n  const momentum = (distance: number, duration: number) => {\n    let nDistance = distance;\n    // 惯性滚动的速度\n    const speed = Math.abs(nDistance / duration);\n    // 惯性滚动的距离\n    nDistance = (speed / 0.003) * (nDistance < 0 ? -1 : 1);\n    return nDistance;\n  };\n\n  const modifyStatus = (type?: boolean, val?: string | number) => {\n    const value = val || defaultValue;\n    let index = -1;\n    if (value) {\n      data.forEach((item, idx) => {\n        if (typeof item === \"object\" ? item.value === value : item === value) {\n          index = idx;\n          return true;\n        }\n        return false;\n      });\n    } else {\n      data.forEach((item, i) => {\n        if (\n          typeof item === \"object\"\n            ? item.value === defaultValue\n            : item === defaultValue\n        ) {\n          index = i;\n        }\n      });\n    }\n\n    setCurrIndex(index === -1 ? 1 : index + 1);\n    const move = index === -1 ? 0 : index * lineSpacing.current;\n    type && setChooseValue(-move);\n    setMove(-move);\n  };\n\n  // 惯性滚动结束\n  const stopMomentum = () => {\n    moving.current = false;\n    setTouchTime(0);\n    setChooseValue(scrollDistance);\n  };\n  // 阻止默认事件\n  const preventDefault = (\n    event: React.TouchEvent<HTMLElement>,\n    isStopPropagation?: boolean\n  ) => {\n    /* istanbul ignore else */\n    if (typeof event.cancelable !== \"boolean\" || event.cancelable) {\n      event.preventDefault();\n    }\n\n    if (isStopPropagation) {\n      event.stopPropagation();\n    }\n  };\n\n  const getReference = async () => {\n    // const refe = await getRectByTaro(listbox?.current)\n    // lineSpacing.current = refe.height ? refe.height : 36\n    // lineSpacing.current =  36\n    modifyStatus(true);\n  };\n\n  const touchRollerStyle = () => {\n    return {\n      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,\n      transform: `rotate3d(1, 0, 0, ${touchDeg})`,\n    };\n  };\n  const touchTileStyle = () => {\n    return {\n      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,\n      transform: `translate3d(0, ${scrollDistance}px, 0)`,\n    };\n  };\n\n  useEffect(() => {\n    setScrollDistance(0);\n    transformY.current = 0;\n    modifyStatus(false);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [data]);\n\n  useEffect(() => {\n    if (visible) {\n      setTimeout(() => {\n        getReference();\n      }, 200);\n    }\n  }, [visible]);\n\n  useImperativeHandle(ref, () => ({\n    stopMomentum,\n    moving: moving.current,\n  }));\n\n  return (\n    <View\n      className=\"xh-picker-list\"\n      ref={pickerSlotRef}\n      onTouchStart={touchStart}\n      onTouchMove={touchMove}\n      onTouchEnd={touchEnd}\n    >\n      <View\n        className=\"xh-picker-roller\"\n        ref={rollerRef}\n        style={mode === \"3D\" ? touchRollerStyle() : touchTileStyle()}\n        onTransitionEnd={stopMomentum}\n      >\n        {/* 3D 效果 */}\n        {mode === \"3D\" &&\n          data.map((item, index) => {\n            return (\n              <View\n                className={`xh-picker-roller-item ${\n                  isHidden(index + 1) && \"nut-picker-roller-item-hidden\"\n                }`}\n                style={{\n                  transform: `rotate3d(1, 0, 0, ${\n                    -rotation * (index + 1)\n                  }deg) translate3d(0px, 0px, 104px)`,\n                  height: `${lineSpacing.current}px`,\n                  lineHeight: `${lineSpacing.current}px`,\n                }}\n                key={\n                  typeof item === \"string\"\n                    ? index\n                    : item.value\n                    ? item.value\n                    : index\n                }\n              >\n                <React.Fragment>\n                  {typeof item === \"object\" ? item.text : item}\n                </React.Fragment>\n              </View>\n            );\n          })}\n        {/* 平铺 */}\n        {mode === \"normal\" &&\n          data.map((item, index) => {\n            return (\n              <View\n                className=\"xh-picker-roller-item-title\"\n                key={\n                  typeof item === \"object\" ? item.value : item ? item : index\n                }\n                style={{\n                  height: `${lineSpacing.current}px`,\n                  lineHeight: `${lineSpacing.current}px`,\n                }}\n              >\n                <React.Fragment>\n                  {typeof item === \"object\" ? item.text : item}\n                </React.Fragment>\n              </View>\n            );\n          })}\n      </View>\n\n      <View className=\"xh-picker-mask\" />\n      <View className=\"xh-picker-indicator\" ref={listbox} />\n    </View>\n  );\n};\nconst PickerSlot = React.forwardRef<\n  { stopMomentum: () => void; moving: boolean },\n  Partial<PickerSlotProps>\n>(InternalPickerSlot);\nexport default PickerSlot;\n"],"names":["PickerSlot","React","forwardRef","props","ref","_a","keyIndex","defaultValue","_b","data","_c","mode","_d","swipeDuration","_e","visible","onConfirm","touch","useTouch","_f","__read","useState","currIndex","setCurrIndex","lineSpacing","useRef","_g","touchTime","setTouchTime","_h","touchDeg","setTouchDeg","moving","listbox","rollerRef","pickerSlotRef","_j","startTime","setStartTime","_k","startY","setStartY","transformY","_l","scrollDistance","setScrollDistance","isHidden","index","setTransform","translateY","type","time","deg","nTime","setMove","move","updateMove","current","length","endMove","Math","round","concat","abs","currentDeg","maxDeg","min","max","undefined","setChooseValue","momentum","distance","duration","nDistance","modifyStatus","val","value","forEach","item","idx","i","stopMomentum","preventDefault","event","isStopPropagation","cancelable","stopPropagation","useEffect","clearTimeout","timer","setTimeout","__awaiter","useImperativeHandle","View","className","onTouchStart","start","deltaY","Date","now","onTouchMove","isVertical","onTouchEnd","moveTime","reset","createElement","style","transition","transform","onTransitionEnd","map","height","lineHeight","key","Fragment","text"],"mappings":"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"}
+{"version":3,"file":"PickerSlot.js","sources":["../../../src/components/Picker/PickerSlot.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ForwardRefRenderFunction,\n  useImperativeHandle,\n  MouseEventHandler,\n} from \"react\";\nimport { View } from \"@tarojs/components\";\nimport { useTouch } from \"../../hooks/useTouch\";\nimport \"./index.scss\";\n\ninterface PickerObjectValue {\n  text: string | number;\n  value: string | number;\n  [key: string]: any;\n}\nexport type PickerValue = string | PickerObjectValue;\n\ninterface PickerSlotProps<T extends PickerValue = PickerObjectValue> {\n  defaultValue?: string | number;\n  data: T[];\n  mode?: \"normal\" | \"3D\";\n  swipeDuration?: number | string;\n  onConfirm?: (value: T, index: number) => void;\n  onCancel?: MouseEventHandler;\n  onClose?: MouseEventHandler;\n  keyIndex: number;\n  visible: boolean;\n}\n\nconst InternalPickerSlot: ForwardRefRenderFunction<\n  { stopMomentum: () => void; moving: boolean },\n  Partial<PickerSlotProps>\n> = (props, ref) => {\n  const {\n    keyIndex = 0,\n    defaultValue,\n    data = [],\n    mode = \"normal\",\n    swipeDuration = 1000,\n    visible = false,\n    onConfirm,\n  } = props;\n\n  const touch = useTouch();\n\n  const DEFAULT_DURATION = 200;\n  // 触发惯性滑动条件:\n  // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move\n  // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动\n  const INERTIA_TIME = 300;\n  const INERTIA_DISTANCE = 15;\n  const [currIndex, setCurrIndex] = useState(1);\n  const lineSpacing = useRef(48);\n\n  const [touchTime, setTouchTime] = useState(0);\n  const [touchDeg, setTouchDeg] = useState(\"0deg\");\n  const rotation = 22;\n  const moving = useRef(false);\n  let timer: number | undefined;\n\n  const listbox = useRef<any>(null);\n  const rollerRef = useRef<any>(null);\n  const pickerSlotRef = useRef<any>(null);\n\n  const [startTime, setStartTime] = useState(0);\n  const [startY, setStartY] = useState(0);\n\n  const transformY = useRef(0);\n  const [scrollDistance, setScrollDistance] = useState(0);\n\n  const isHidden = (index: number) => {\n    if (index >= currIndex + 8 || index <= currIndex - 8) {\n      return true;\n    }\n    return false;\n  };\n\n  const setTransform = (\n    translateY = 0,\n    type: string,\n    time = DEFAULT_DURATION,\n    deg: string\n  ) => {\n    let nTime = time;\n    if (type !== \"end\") {\n      nTime = 0;\n    }\n\n    setTouchTime(nTime);\n    setTouchDeg(deg);\n\n    setScrollDistance(translateY);\n  };\n\n  const setMove = (move: number, type?: string, time?: number) => {\n    let updateMove = move + transformY.current;\n    if (type === \"end\") {\n      // 限定滚动距离\n      if (updateMove > 0) {\n        updateMove = 0;\n      }\n      if (updateMove < -(data.length - 1) * lineSpacing.current) {\n        updateMove = -(data.length - 1) * lineSpacing.current;\n      }\n\n      // 设置滚动距离为lineSpacing的倍数值\n      const endMove =\n        Math.round(updateMove / lineSpacing.current) * lineSpacing.current;\n      const deg = `${\n        (Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation\n      }deg`;\n\n      setTransform(endMove, type, time, deg);\n\n      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);\n    } else {\n      let deg = 0;\n      const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation;\n\n      // picker 滚动的最大角度\n      const maxDeg = (data.length + 1) * rotation;\n      const minDeg = 0;\n\n      deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);\n\n      if (minDeg < deg && deg < maxDeg) {\n        setTransform(updateMove, \"\", undefined, `${deg}deg`);\n        setCurrIndex(\n          Math.abs(Math.round(updateMove / lineSpacing.current)) + 1\n        );\n      }\n    }\n  };\n\n  const setChooseValue = (move: number) => {\n    const index = Math.round(-move / lineSpacing.current);\n    onConfirm && onConfirm(data[index], keyIndex);\n  };\n\n  // 开始滚动\n  const touchStart = event => {\n    touch.start(event);\n    setStartY(touch.deltaY);\n    setStartTime(Date.now());\n    transformY.current = scrollDistance;\n  };\n\n  const touchMove = event => {\n    touch.move(event);\n    if (touch.isVertical()) {\n      moving.current = true;\n      preventDefault(event, true);\n    }\n    const move = touch.deltaY - startY;\n    setMove(move);\n  };\n\n  const touchEnd = () => {\n    if (!moving.current) return;\n    const move = touch.deltaY - startY;\n    const moveTime = Date.now() - startTime;\n    // 区分是否为惯性滚动\n    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {\n      // 惯性滚动\n      const distance = momentum(move, moveTime);\n      setMove(distance, \"end\", +swipeDuration);\n    } else {\n      setMove(move, \"end\");\n    }\n\n    setTimeout(() => {\n      touch.reset();\n    }, 0);\n  };\n\n  // 惯性滚动 距离\n  const momentum = (distance: number, duration: number) => {\n    let nDistance = distance;\n    // 惯性滚动的速度\n    const speed = Math.abs(nDistance / duration);\n    // 惯性滚动的距离\n    nDistance = (speed / 0.003) * (nDistance < 0 ? -1 : 1);\n    return nDistance;\n  };\n\n  const modifyStatus = (type?: boolean, val?: string | number) => {\n    const value = val || defaultValue;\n    let index = -1;\n    if (value) {\n      data.forEach((item, idx) => {\n        if (typeof item === \"object\" ? item.value === value : item === value) {\n          index = idx;\n          return true;\n        }\n        return false;\n      });\n    } else {\n      data.forEach((item, i) => {\n        if (\n          typeof item === \"object\"\n            ? item.value === defaultValue\n            : item === defaultValue\n        ) {\n          index = i;\n        }\n      });\n    }\n\n    setCurrIndex(index === -1 ? 1 : index + 1);\n    const move = index === -1 ? 0 : index * lineSpacing.current;\n    type && setChooseValue(-move);\n    setMove(-move);\n  };\n\n  // 惯性滚动结束\n  const stopMomentum = () => {\n    moving.current = false;\n    setTouchTime(0);\n    setChooseValue(scrollDistance);\n  };\n  // 阻止默认事件\n  const preventDefault = (\n    event: React.TouchEvent<HTMLElement>,\n    isStopPropagation?: boolean\n  ) => {\n    /* istanbul ignore else */\n    if (typeof event.cancelable !== \"boolean\" || event.cancelable) {\n      event.preventDefault();\n    }\n\n    if (isStopPropagation) {\n      event.stopPropagation();\n    }\n  };\n\n  const getReference = async () => {\n    // const refe = await getRectByTaro(listbox?.current)\n    // lineSpacing.current = refe.height ? refe.height : 36\n    // lineSpacing.current =  36\n    modifyStatus(true);\n  };\n\n  const touchRollerStyle = () => {\n    return {\n      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,\n      transform: `rotate3d(1, 0, 0, ${touchDeg})`,\n    };\n  };\n  const touchTileStyle = () => {\n    return {\n      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,\n      transform: `translate3d(0, ${scrollDistance}px, 0)`,\n    };\n  };\n\n  useEffect(() => {\n    setScrollDistance(0);\n    transformY.current = 0;\n    modifyStatus(false);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [data]);\n\n  useEffect(() => {\n    if (visible) {\n      setTimeout(() => {\n        getReference();\n      }, 200);\n    }\n  }, [visible]);\n\n  useImperativeHandle(ref, () => ({\n    stopMomentum,\n    moving: moving.current,\n  }));\n\n  return (\n    <View\n      className=\"xh-picker-list\"\n      ref={pickerSlotRef}\n      onTouchStart={touchStart}\n      onTouchMove={touchMove}\n      onTouchEnd={touchEnd}\n    >\n      <View\n        className=\"xh-picker-roller\"\n        ref={rollerRef}\n        style={mode === \"3D\" ? touchRollerStyle() : touchTileStyle()}\n        onTransitionEnd={stopMomentum}\n      >\n        {/* 3D 效果 */}\n        {mode === \"3D\" &&\n          data.map((item, index) => {\n            return (\n              <View\n                className={`xh-picker-roller-item ${\n                  isHidden(index + 1) && \"nut-picker-roller-item-hidden\"\n                }`}\n                style={{\n                  transform: `rotate3d(1, 0, 0, ${\n                    -rotation * (index + 1)\n                  }deg) translate3d(0px, 0px, 104px)`,\n                  height: `${lineSpacing.current}px`,\n                  lineHeight: `${lineSpacing.current}px`,\n                }}\n                key={\n                  typeof item === \"string\"\n                    ? index\n                    : item.value\n                    ? item.value\n                    : index\n                }\n              >\n                <React.Fragment>\n                  {typeof item === \"object\" ? item.text : item}\n                </React.Fragment>\n              </View>\n            );\n          })}\n        {/* 平铺 */}\n        {mode === \"normal\" &&\n          data.map((item, index) => {\n            return (\n              <View\n                className=\"xh-picker-roller-item-title\"\n                key={\n                  typeof item === \"object\" ? item.value : item ? item : index\n                }\n                style={{\n                  height: `${lineSpacing.current}px`,\n                  lineHeight: `${lineSpacing.current}px`,\n                }}\n              >\n                <React.Fragment>\n                  {typeof item === \"object\" ? item.text : item}\n                </React.Fragment>\n              </View>\n            );\n          })}\n      </View>\n\n      <View className=\"xh-picker-mask\" />\n      <View className=\"xh-picker-indicator\" ref={listbox} />\n    </View>\n  );\n};\nconst PickerSlot = React.forwardRef<\n  { stopMomentum: () => void; moving: boolean },\n  Partial<PickerSlotProps>\n>(InternalPickerSlot);\nexport default PickerSlot;\n"],"names":["PickerSlot","React","forwardRef","props","ref","_a","keyIndex","defaultValue","_b","data","_c","mode","_d","swipeDuration","_e","visible","onConfirm","touch","useTouch","_f","__read","useState","currIndex","setCurrIndex","lineSpacing","useRef","_g","touchTime","setTouchTime","_h","touchDeg","setTouchDeg","moving","listbox","rollerRef","pickerSlotRef","_j","startTime","setStartTime","_k","startY","setStartY","transformY","_l","scrollDistance","setScrollDistance","isHidden","index","setTransform","translateY","type","time","deg","nTime","setMove","move","updateMove","current","length","endMove","Math","round","concat","abs","currentDeg","maxDeg","min","max","undefined","setChooseValue","momentum","distance","duration","nDistance","modifyStatus","val","value","forEach","item","idx","i","stopMomentum","preventDefault","event","isStopPropagation","cancelable","stopPropagation","useEffect","clearTimeout","timer","setTimeout","__awaiter","useImperativeHandle","View","className","onTouchStart","start","deltaY","Date","now","onTouchMove","isVertical","onTouchEnd","moveTime","reset","createElement","style","transition","transform","onTransitionEnd","map","height","lineHeight","key","Fragment","text"],"mappings":"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"}

package/dist/components/Popup/index.js

@@ -1,2 +1,2 @@
-import t,{useEffect as e}from"react";import o from"react-dom";import n from"classnames";import{View as r}from"@tarojs/components";import c from"../Animated/Slide/index.js";import i from"../Animated/Fade/index.js";import m from"../Mask/index.js";var p={top:"down",bottom:"up",left:"right",right:"left"},a=function(a){var d=a.visible,l=a.position,u=void 0===l?"bottom":l,s=a.children,f=a.onClose,h=p[u],v=n("xh-popup-content",{"xh-popup-content-left":"left"===u,"xh-popup-content-right":"right"===u,"xh-popup-content-top":"top"===u,"xh-popup-content-bottom":"bottom"===u});function b(){f&&f()}if(e((function(){return d?(document.body.style.touchAction="none",document.body.addEventListener("touchmove",(function(t){t.stopPropagation(),t.preventDefault()})),document.body.style.overflowY="hidden"):(document.body.style.touchAction="",document.body.removeEventListener("touchmove",(function(t){t.stopPropagation(),t.preventDefault()})),document.body.style.overflowY="auto"),function(){document.body.style.touchAction="",document.body.style.overflowY="auto"}}),[d]),"h5"!==process.env.TARO_ENV){var y=n("xh-popup",d?"visible":"hidden");return t.createElement(r,{className:y},t.createElement(m,{onClick:b}),t.createElement(r,{className:v},s))}return o.createPortal(t.createElement(i,{in:d},t.createElement("div",{className:"xh-popup"},t.createElement(m,{onClick:b}),t.createElement(c,{direction:h,in:d},t.createElement("div",{className:v},s)))),document.body)};export{a as default};
+import e,{useEffect as t}from"react";import o from"react-dom";import n from"classnames";import{View as r}from"@tarojs/components";import c from"../Animated/Slide/index.js";import m from"../Animated/Fade/index.js";import i from"../Mask/index.js";var d={top:"down",bottom:"up",left:"right",right:"left"},p=function(p){var a=p.visible,l=p.position,u=void 0===l?"bottom":l,s=p.children,f=p.onClose,h=d[u],v=n("xh-popup-content",{"xh-popup-content-left":"left"===u,"xh-popup-content-right":"right"===u,"xh-popup-content-top":"top"===u,"xh-popup-content-bottom":"bottom"===u}),b=function(e){e.stopPropagation(),e.preventDefault()};function y(){f&&f()}if(t((function(){return a?(document.body.style.touchAction="none",document.body.addEventListener("touchmove",b),document.body.style.overflowY="hidden"):(document.body.style.touchAction="",document.body.removeEventListener("touchmove",b),document.body.style.overflowY="auto"),function(){document.body.style.touchAction="",document.body.style.overflowY="auto",document.body.removeEventListener("touchmove",b)}}),[a]),"h5"!==process.env.TARO_ENV){var E=n("xh-popup",a?"visible":"hidden");return e.createElement(r,{className:E},e.createElement(i,{onClick:y}),e.createElement(r,{className:v},s))}return o.createPortal(e.createElement(m,{in:a},e.createElement("div",{className:"xh-popup"},e.createElement(i,{onClick:y}),e.createElement(c,{direction:h,in:a},e.createElement("div",{className:v},s)))),document.body)};export{p as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popup/index.tsx"],"sourcesContent":["import React, { FC, PropsWithChildren, useEffect } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport classNames from \"classnames\";\nimport { View } from \"@tarojs/components\";\n\nimport { Fade, Slide } from \"../Animated\";\nimport { SlideDirection } from \"../Animated/Slide\";\nimport Mask from \"../Mask\";\n\nimport \"./index.scss\";\n\nexport type PopupPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopupProps extends PropsWithChildren<{}> {\n  visible: boolean;\n  position?: PopupPosition;\n  onClose?: () => void;\n}\n\nconst positionMap = {\n  top: \"down\",\n  bottom: \"up\",\n  left: \"right\",\n  right: \"left\",\n};\n\nconst Popup: FC<PopupProps> = props => {\n  const { visible, position = \"bottom\", children, onClose } = props;\n  const direction = positionMap[position] as SlideDirection;\n  const cls = classNames(\"xh-popup-content\", {\n    \"xh-popup-content-left\": position === \"left\",\n    \"xh-popup-content-right\": position === \"right\",\n    \"xh-popup-content-top\": position === \"top\",\n    \"xh-popup-content-bottom\": position === \"bottom\",\n  });\n\n  useEffect(() => {\n    if (visible) {\n      document.body.style.touchAction = \"none\";\n      document.body.addEventListener(\"touchmove\", e => {\n        e.stopPropagation();\n        e.preventDefault();\n      });\n      document.body.style.overflowY = \"hidden\";\n    } else {\n      document.body.style.touchAction = \"\";\n      document.body.removeEventListener(\"touchmove\", e => {\n        e.stopPropagation();\n        e.preventDefault();\n      });\n      document.body.style.overflowY = \"auto\";\n    }\n\n    return () => {\n      document.body.style.touchAction = \"\";\n      document.body.style.overflowY = \"auto\";\n    };\n  }, [visible]);\n\n  function handleClickOnMask(): void {\n    onClose && onClose();\n  }\n  if (process.env.TARO_ENV !== \"h5\") {\n    const minicls = classNames(\"xh-popup\", visible ? \"visible\" : \"hidden\");\n    return (\n      <View className={minicls}>\n        <Mask onClick={handleClickOnMask} />\n        <View className={cls}>{children}</View>\n      </View>\n    );\n  }\n  return ReactDOM.createPortal(\n    <Fade in={visible}>\n      <div className=\"xh-popup\">\n        <Mask onClick={handleClickOnMask} />\n        <Slide direction={direction} in={visible}>\n          <div className={cls}>{children}</div>\n        </Slide>\n      </div>\n    </Fade>,\n    document.body\n  );\n};\n\nexport default Popup;\n"],"names":["positionMap","top","bottom","left","right","Popup","props","visible","_a","position","children","onClose","direction","cls","classNames","handleClickOnMask","useEffect","document","body","style","touchAction","addEventListener","e","stopPropagation","preventDefault","overflowY","removeEventListener","process","env","TARO_ENV","minicls","React","createElement","View","className","Mask","onClick","ReactDOM","createPortal","Fade","in","Slide"],"mappings":"qPAmBA,IAAMA,EAAc,CAClBC,IAAK,OACLC,OAAQ,KACRC,KAAM,QACNC,MAAO,QAGHC,EAAwB,SAAAC,GACpB,IAAAC,EAAoDD,EAAKC,QAAhDC,EAA2CF,EAAxBG,SAAnBA,OAAQ,IAAAD,EAAG,SAAQA,EAAEE,EAAsBJ,EAAKI,SAAjBC,EAAYL,EAAKK,QAC3DC,EAAYZ,EAAYS,GACxBI,EAAMC,EAAW,mBAAoB,CACzC,wBAAsC,SAAbL,EACzB,yBAAuC,UAAbA,EAC1B,uBAAqC,QAAbA,EACxB,0BAAwC,WAAbA,IA0B7B,SAASM,IACPJ,GAAWA,GACZ,CACD,GA1BAK,GAAU,WAiBR,OAhBIT,GACFU,SAASC,KAAKC,MAAMC,YAAc,OAClCH,SAASC,KAAKG,iBAAiB,aAAa,SAAAC,GAC1CA,EAAEC,kBACFD,EAAEE,gBACJ,IACAP,SAASC,KAAKC,MAAMM,UAAY,WAEhCR,SAASC,KAAKC,MAAMC,YAAc,GAClCH,SAASC,KAAKQ,oBAAoB,aAAa,SAAAJ,GAC7CA,EAAEC,kBACFD,EAAEE,gBACJ,IACAP,SAASC,KAAKC,MAAMM,UAAY,QAG3B,WACLR,SAASC,KAAKC,MAAMC,YAAc,GAClCH,SAASC,KAAKC,MAAMM,UAAY,MAClC,CACF,GAAG,CAAClB,IAKyB,OAAzBoB,QAAQC,IAAIC,SAAmB,CACjC,IAAMC,EAAUhB,EAAW,WAAYP,EAAU,UAAY,UAC7D,OACEwB,EAACC,cAAAC,EAAK,CAAAC,UAAWJ,GACfC,EAAAC,cAACG,EAAI,CAACC,QAASrB,IACfgB,EAACC,cAAAC,EAAK,CAAAC,UAAWrB,GAAMH,GAG5B,CACD,OAAO2B,EAASC,aACdP,gBAACQ,EAAI,CAACC,GAAIjC,GACRwB,EAAKC,cAAA,MAAA,CAAAE,UAAU,YACbH,EAAAC,cAACG,EAAI,CAACC,QAASrB,IACfgB,EAACC,cAAAS,GAAM7B,UAAWA,EAAW4B,GAAIjC,GAC/BwB,EAAAC,cAAA,MAAA,CAAKE,UAAWrB,GAAMH,MAI5BO,SAASC,KAEb"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popup/index.tsx"],"sourcesContent":["import React, { FC, PropsWithChildren, useEffect } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport classNames from \"classnames\";\nimport { View } from \"@tarojs/components\";\n\nimport { Fade, Slide } from \"../Animated\";\nimport { SlideDirection } from \"../Animated/Slide\";\nimport Mask from \"../Mask\";\n\nimport \"./index.scss\";\n\nexport type PopupPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopupProps extends PropsWithChildren<{}> {\n  visible: boolean;\n  position?: PopupPosition;\n  onClose?: () => void;\n}\n\nconst positionMap = {\n  top: \"down\",\n  bottom: \"up\",\n  left: \"right\",\n  right: \"left\",\n};\n\nconst Popup: FC<PopupProps> = props => {\n  const { visible, position = \"bottom\", children, onClose } = props;\n  const direction = positionMap[position] as SlideDirection;\n  const cls = classNames(\"xh-popup-content\", {\n    \"xh-popup-content-left\": position === \"left\",\n    \"xh-popup-content-right\": position === \"right\",\n    \"xh-popup-content-top\": position === \"top\",\n    \"xh-popup-content-bottom\": position === \"bottom\",\n  });\n\n  const preventSTH = (e: TouchEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n  };\n\n  useEffect(() => {\n    if (visible) {\n      document.body.style.touchAction = \"none\";\n      document.body.addEventListener(\"touchmove\", preventSTH);\n      document.body.style.overflowY = \"hidden\";\n    } else {\n      document.body.style.touchAction = \"\";\n      document.body.removeEventListener(\"touchmove\", preventSTH);\n      document.body.style.overflowY = \"auto\";\n    }\n\n    return () => {\n      document.body.style.touchAction = \"\";\n      document.body.style.overflowY = \"auto\";\n      document.body.removeEventListener(\"touchmove\", preventSTH);\n    };\n  }, [visible]);\n\n  function handleClickOnMask(): void {\n    onClose && onClose();\n  }\n  if (process.env.TARO_ENV !== \"h5\") {\n    const minicls = classNames(\"xh-popup\", visible ? \"visible\" : \"hidden\");\n    return (\n      <View className={minicls}>\n        <Mask onClick={handleClickOnMask} />\n        <View className={cls}>{children}</View>\n      </View>\n    );\n  }\n  return ReactDOM.createPortal(\n    <Fade in={visible}>\n      <div className=\"xh-popup\">\n        <Mask onClick={handleClickOnMask} />\n        <Slide direction={direction} in={visible}>\n          <div className={cls}>{children}</div>\n        </Slide>\n      </div>\n    </Fade>,\n    document.body\n  );\n};\n\nexport default Popup;\n"],"names":["positionMap","top","bottom","left","right","Popup","props","visible","_a","position","children","onClose","direction","cls","classNames","preventSTH","e","stopPropagation","preventDefault","handleClickOnMask","useEffect","document","body","style","touchAction","addEventListener","overflowY","removeEventListener","process","env","TARO_ENV","minicls","React","createElement","View","className","Mask","onClick","ReactDOM","createPortal","Fade","in","Slide"],"mappings":"qPAmBA,IAAMA,EAAc,CAClBC,IAAK,OACLC,OAAQ,KACRC,KAAM,QACNC,MAAO,QAGHC,EAAwB,SAAAC,GACpB,IAAAC,EAAoDD,EAAKC,QAAhDC,EAA2CF,EAAxBG,SAAnBA,OAAQ,IAAAD,EAAG,SAAQA,EAAEE,EAAsBJ,EAAKI,SAAjBC,EAAYL,EAAKK,QAC3DC,EAAYZ,EAAYS,GACxBI,EAAMC,EAAW,mBAAoB,CACzC,wBAAsC,SAAbL,EACzB,yBAAuC,UAAbA,EAC1B,uBAAqC,QAAbA,EACxB,0BAAwC,WAAbA,IAGvBM,EAAa,SAACC,GAClBA,EAAEC,kBACFD,EAAEE,gBACJ,EAoBA,SAASC,IACPR,GAAWA,GACZ,CACD,GArBAS,GAAU,WAWR,OAVIb,GACFc,SAASC,KAAKC,MAAMC,YAAc,OAClCH,SAASC,KAAKG,iBAAiB,YAAaV,GAC5CM,SAASC,KAAKC,MAAMG,UAAY,WAEhCL,SAASC,KAAKC,MAAMC,YAAc,GAClCH,SAASC,KAAKK,oBAAoB,YAAaZ,GAC/CM,SAASC,KAAKC,MAAMG,UAAY,QAG3B,WACLL,SAASC,KAAKC,MAAMC,YAAc,GAClCH,SAASC,KAAKC,MAAMG,UAAY,OAChCL,SAASC,KAAKK,oBAAoB,YAAaZ,EACjD,CACF,GAAG,CAACR,IAKyB,OAAzBqB,QAAQC,IAAIC,SAAmB,CACjC,IAAMC,EAAUjB,EAAW,WAAYP,EAAU,UAAY,UAC7D,OACEyB,EAACC,cAAAC,EAAK,CAAAC,UAAWJ,GACfC,EAAAC,cAACG,EAAI,CAACC,QAASlB,IACfa,EAACC,cAAAC,EAAK,CAAAC,UAAWtB,GAAMH,GAG5B,CACD,OAAO4B,EAASC,aACdP,gBAACQ,EAAI,CAACC,GAAIlC,GACRyB,EAAKC,cAAA,MAAA,CAAAE,UAAU,YACbH,EAAAC,cAACG,EAAI,CAACC,QAASlB,IACfa,EAACC,cAAAS,GAAM9B,UAAWA,EAAW6B,GAAIlC,GAC/ByB,EAAAC,cAAA,MAAA,CAAKE,UAAWtB,GAAMH,MAI5BW,SAASC,KAEb"}