taro-react-uilib 1.4.30 → 1.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import{__read as e,__spreadArray as t}from"../node_modules/tslib/tslib.es6.js";import n,{useState as o,useMemo as s,useEffect as a}from"react";import r from"classnames";import{View as c,Button as l}from"@tarojs/components";import{replaceCharByIndex as i}from"../src/utils/index.js";import m from"../node_modules/react-transition-group/esm/CSSTransition.js";var d=["京","津","冀","晋","蒙","辽","吉","黑","沪","苏","浙","皖","闽","赣","鲁","豫","鄂","湘","粤","桂","琼","渝","川","贵","云","藏","陕","甘","青","宁","新","港","澳","台","使"],u=["1","2","3","4","5","6","7","8","9","0"],p=["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"],b=["港","澳","学","领"],k=["临","澳","学","领"],y=function(y){var E=y.onBlur,f=y.show,h=y.showClose,N=void 0===h||h,v=y.closeOnClickSpace,x=void 0===v||v,C=y.onClose,T=y.onChange,g=y.value,O=y.closeText,_=void 0===O?"完成":O,A=y.onDelete,R=y.className,V=y.activeIndex,P=e(o(g),2),j=P[0],S=P[1],L=s((function(){return 0===V?d:6===V?t(t(t([],e(u),!1),e(p),!1),e(b),!1):7===V?t(t(t([],e(u),!1),e(p),!1),e(k),!1):t(t([],e(u),!1),e(p),!1)}),[V]),w=s((function(){return 0===V?"选择省份":1===V?"选择字母":"选择数字或字母"}),[V]),B=s((function(){return 0===V?"province":1===V?"letter":"mixed"}),[V]);function D(e){e.stopPropagation(),C&&C(e),E&&E(e)}function F(e){if(e!==g[V]){process.env.TARO_ENV;var t=j;t=V<j.length?i(j,V,e):j+e,S(t),T&&T(t)}}a((function(){return x&&document.addEventListener("click",D),function(){document.removeEventListener("click",D)}}),[]),a((function(){S(g)}),[g]);var G=function(){A()},H=r("xh-license-keyboard",R);return n.createElement(m,{classNames:"slide-up",in:f,unmountOnExit:!0,timeout:200},n.createElement(c,{className:H},n.createElement(c,{className:"xh-license-keyboard-header"},n.createElement(c,{className:"xh-license-keyboard-header-title"},w),n.createElement(c,{className:"xh-license-keyboard-header-delete"}),N&&n.createElement(c,{className:"xh-license-keyboard-header-close",onClick:D},_)),n.createElement(c,{className:"xh-license-keyboard-body"},L.map((function(e,t){return n.createElement(c,{key:t,className:r("xh-license-keyboard-body-key")},"h5"===process.env.TARO_ENV?n.createElement("button",{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV),disabled:"letter"===B&&t<10,onClick:function(t){t.stopPropagation(),F(e)}},e):n.createElement(l,{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV),disabled:"letter"===B&&t<10,onClick:function(n){n.stopPropagation(),"letter"===B&&t<10||F(e)}},e))})),n.createElement(c,{className:r("xh-license-keyboard-body-key","delete")},"h5"===process.env.TARO_ENV?n.createElement("button",{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV,"delete"),disabled:0===V,onClick:function(e){e.stopPropagation(),G()}}):n.createElement(l,{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV,"delete"),disabled:0===V,onClick:function(e){e.stopPropagation(),0!==g.length&&G()}})))))};export{y as default};
1
+ import{__read as e,__spreadArray as t}from"../node_modules/tslib/tslib.es6.js";import a,{useState as o,useMemo as n,useEffect as c}from"react";import r from"classnames";import{View as s,Button as l}from"@tarojs/components";import{replaceCharByIndex as i}from"../src/utils/index.js";import d from"../node_modules/react-transition-group/esm/CSSTransition.js";var m=["京","津","冀","晋","蒙","辽","吉","黑","沪","苏","浙","皖","闽","赣","鲁","豫","鄂","湘","粤","桂","琼","渝","川","贵","云","藏","陕","甘","青","宁","新","港","澳","台","使"],u=["1","2","3","4","5","6","7","8","9","0"],k=["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"],b=["港","澳","学","领"],y=["临","澳","学","领"],p=function(p){var E=p.onBlur,f=p.show,h=p.showClose,N=void 0===h||h,v=p.closeOnClickSpace,_=void 0===v||v,x=p.onClose,T=p.onChange,C=p.value,g=p.closeText,O=void 0===g?"完成":g,A=p.onDelete,I=p.className,R=p.activeIndex,V=p.dataTrackId,P=void 0===V?"LicensePlate_Keyboard":V,K=e(o(C),2),j=K[0],L=K[1],S=n((function(){return 0===R?m:6===R?t(t(t([],e(u),!1),e(k),!1),e(b),!1):7===R?t(t(t([],e(u),!1),e(k),!1),e(y),!1):t(t([],e(u),!1),e(k),!1)}),[R]),w=n((function(){return 0===R?"选择省份":1===R?"选择字母":"选择数字或字母"}),[R]),B=n((function(){return 0===R?"province":1===R?"letter":"mixed"}),[R]);function D(e){e.stopPropagation(),x&&x(e),E&&E(e)}function F(e){if(e!==C[R]){process.env.TARO_ENV;var t=j;t=R<j.length?i(j,R,e):j+e,L(t),T&&T(t)}}c((function(){return _&&document.addEventListener("click",D),function(){document.removeEventListener("click",D)}}),[]),c((function(){L(C)}),[C]);var G=function(){A()},H=r("xh-license-keyboard",I);return a.createElement(d,{classNames:"slide-up",in:f,unmountOnExit:!0,timeout:200},a.createElement(s,{className:H},a.createElement(s,{className:"xh-license-keyboard-header"},a.createElement(s,{className:"xh-license-keyboard-header-title"},w),a.createElement(s,{className:"xh-license-keyboard-header-delete"}),N&&a.createElement(s,{className:"xh-license-keyboard-header-close",dataTrackId:"".concat(P,"_dataTrackId_close"),onClick:D},O)),a.createElement(s,{className:"xh-license-keyboard-body"},S.map((function(e,t){return a.createElement(s,{key:t,className:r("xh-license-keyboard-body-key")},"h5"===process.env.TARO_ENV?a.createElement("button",{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV),dataTrackId:"".concat(P,"_Keyboard_").concat(e),disabled:"letter"===B&&t<10,onClick:function(t){t.stopPropagation(),F(e)}},e):a.createElement(l,{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV),disabled:"letter"===B&&t<10,dataTrackId:"".concat(P,"_Keyboard_").concat(e),onClick:function(a){a.stopPropagation(),"letter"===B&&t<10||F(e)}},e))})),a.createElement(s,{className:r("xh-license-keyboard-body-key","delete")},"h5"===process.env.TARO_ENV?a.createElement("button",{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV,"delete"),disabled:0===R,dataTrackId:"".concat(P,"_Keyboard_delete"),onClick:function(e){e.stopPropagation(),G()}}):a.createElement(l,{className:r("xh-license-keyboard-body-key-item",process.env.TARO_ENV,"delete"),disabled:0===R,dataTrackId:"".concat(P,"_Keyboard_delete"),onClick:function(e){e.stopPropagation(),0!==C.length&&G()}})))))};export{p as default};
2
2
  //# sourceMappingURL=Keyboard.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Keyboard.js","sources":["../../../src/components/LicensePlateInput/Keyboard.tsx"],"sourcesContent":["import React, { FC, useState, useEffect, MouseEvent, useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { Button, View } from \"@tarojs/components\";\n\nimport \"./index.scss\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport { replaceCharByIndex } from \"../../utils\";\n\nexport type NumberKeyboardType = \"default\" | \"custom\";\n\nexport type NumberKeyboardProps = {\n show: boolean;\n showClose?: boolean;\n closeOnClickSpace?: boolean;\n maxLength?: number;\n onBlur?: (e: MouseEvent | Event) => void;\n onClose?: (e: MouseEvent | Event) => void;\n onChange?: (value: string) => void;\n onDelete: () => void;\n value: string;\n closeText?: string;\n activeIndex: number;\n} & XHComponentCommonProps;\n\nexport type KeyType = \"number\" | \"delete\" | \"string\" | \"none\";\n\nexport interface IKey {\n text: number | string;\n value: number | string;\n type: KeyType;\n activeIndex: number;\n}\n\nconst LICENSEPLATE_PROVINCES = [\n \"京\",\n \"津\",\n \"冀\",\n \"晋\",\n \"蒙\",\n \"辽\",\n \"吉\",\n \"黑\",\n \"沪\",\n \"苏\",\n \"浙\",\n \"皖\",\n \"闽\",\n \"赣\",\n \"鲁\",\n \"豫\",\n \"鄂\",\n \"湘\",\n \"粤\",\n \"桂\",\n \"琼\",\n \"渝\",\n \"川\",\n \"贵\",\n \"云\",\n \"藏\",\n \"陕\",\n \"甘\",\n \"青\",\n \"宁\",\n \"新\",\n \"港\",\n \"澳\",\n \"台\",\n \"使\",\n];\n\nconst LICENSEPLATE_NUMBERS = [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\"];\n\nconst LICENSEPLATE_LETTERS = [\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n];\n\nconst specialArea = [\"港\", \"澳\", \"学\", \"领\"];\nconst finalArea = [\"临\", \"澳\", \"学\", \"领\"];\n\nexport type TYPE_MODE = \"province\" | \"letter\" | \"mixed\";\n\nconst LicensePlateKeyboard: FC<NumberKeyboardProps> = props => {\n const {\n onBlur,\n show,\n showClose = true,\n closeOnClickSpace = true,\n onClose,\n onChange,\n value,\n closeText = \"完成\",\n onDelete,\n className,\n activeIndex,\n } = props;\n const [input, setInput] = useState(value);\n\n // 键盘的key\n const keys = useMemo(() => {\n if (activeIndex === 0) return LICENSEPLATE_PROVINCES;\n if (activeIndex === 6)\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS, ...specialArea];\n if (activeIndex === 7)\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS, ...finalArea];\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS];\n }, [activeIndex]);\n\n const title = useMemo(() => {\n if (activeIndex === 0) return \"选择省份\";\n if (activeIndex === 1) return \"选择字母\";\n return \"选择数字或字母\";\n }, [activeIndex]);\n\n const mode = useMemo<TYPE_MODE>(() => {\n if (activeIndex === 0) return \"province\";\n if (activeIndex === 1) return \"letter\";\n return \"mixed\";\n }, [activeIndex]);\n\n useEffect(() => {\n if (closeOnClickSpace) {\n document.addEventListener(\"click\", handleClose);\n }\n\n return () => {\n document.removeEventListener(\"click\", handleClose);\n };\n }, []);\n\n useEffect(() => {\n setInput(value);\n }, [value]);\n\n function handleClose(e): void {\n e.stopPropagation();\n onClose && onClose(e);\n onBlur && onBlur(e);\n }\n\n /**\n * 根据 activeIndex 拼凑新值,如果activeIndex小于当前的值的长度,就说明后面已经有值,这时候直接替换,否则拼接\n * @param key\n */\n function handleKeyPress(key: string): void {\n if (key === value[activeIndex]) return;\n if (process.env.TARO_ENV === \"h5\") {\n // e.stopImmediatePropagation();\n }\n let newInput = input;\n if (activeIndex < input.length) {\n newInput = replaceCharByIndex(input, activeIndex, key);\n } else {\n newInput = input + key;\n }\n\n setInput(newInput);\n\n onChange && onChange(newInput);\n }\n\n const handleDelete = () => {\n onDelete();\n };\n\n const keyboardcls = classNames(\"xh-license-keyboard\", className);\n\n return (\n <CSSTransition classNames=\"slide-up\" in={show} unmountOnExit timeout={200}>\n <View className={keyboardcls}>\n <View className=\"xh-license-keyboard-header\">\n <View className=\"xh-license-keyboard-header-title\">{title}</View>\n <View className=\"xh-license-keyboard-header-delete\"></View>\n {showClose && (\n <View\n className=\"xh-license-keyboard-header-close\"\n onClick={handleClose}\n >\n {closeText}\n </View>\n )}\n </View>\n <View className=\"xh-license-keyboard-body\">\n {keys.map((key, index) => (\n <View\n key={index}\n className={classNames(\"xh-license-keyboard-body-key\")}\n >\n {process.env.TARO_ENV === \"h5\" ? (\n <button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV\n )}\n disabled={mode === \"letter\" && index < 10}\n onClick={e => {\n e.stopPropagation();\n handleKeyPress(key);\n }}\n >\n {key}\n </button>\n ) : (\n <Button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV\n )}\n disabled={mode === \"letter\" && index < 10}\n onClick={e => {\n e.stopPropagation();\n if (mode === \"letter\" && index < 10) return;\n handleKeyPress(key);\n }}\n >\n {key}\n </Button>\n )}\n </View>\n ))}\n <View\n className={classNames(\"xh-license-keyboard-body-key\", \"delete\")}\n >\n {process.env.TARO_ENV === \"h5\" ? (\n <button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV,\n \"delete\"\n )}\n disabled={activeIndex === 0}\n onClick={e => {\n e.stopPropagation();\n handleDelete();\n }}\n ></button>\n ) : (\n <Button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV,\n \"delete\"\n )}\n disabled={activeIndex === 0}\n onClick={e => {\n e.stopPropagation();\n if (value.length === 0) return;\n console.log(\"delete\");\n handleDelete();\n }}\n ></Button>\n )}\n </View>\n </View>\n </View>\n </CSSTransition>\n );\n};\n\nexport default LicensePlateKeyboard;\n"],"names":["LICENSEPLATE_PROVINCES","LICENSEPLATE_NUMBERS","LICENSEPLATE_LETTERS","specialArea","finalArea","LicensePlateKeyboard","props","onBlur","show","_a","showClose","_b","closeOnClickSpace","onClose","onChange","value","_c","closeText","onDelete","className","activeIndex","_d","__read","useState","input","setInput","keys","useMemo","__spreadArray","title","mode","handleClose","e","stopPropagation","handleKeyPress","key","process","env","TARO_ENV","newInput","length","replaceCharByIndex","useEffect","document","addEventListener","removeEventListener","handleDelete","keyboardcls","classNames","React","createElement","CSSTransition","in","unmountOnExit","timeout","View","onClick","map","index","disabled","Button"],"mappings":"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"}
1
+ {"version":3,"file":"Keyboard.js","sources":["../../../src/components/LicensePlateInput/Keyboard.tsx"],"sourcesContent":["import React, { FC, useState, useEffect, MouseEvent, useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { Button, View } from \"@tarojs/components\";\n\nimport \"./index.scss\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport { replaceCharByIndex } from \"../../utils\";\n\nexport type NumberKeyboardType = \"default\" | \"custom\";\n\nexport type NumberKeyboardProps = {\n show: boolean;\n showClose?: boolean;\n closeOnClickSpace?: boolean;\n maxLength?: number;\n onBlur?: (e: MouseEvent | Event) => void;\n onClose?: (e: MouseEvent | Event) => void;\n onChange?: (value: string) => void;\n onDelete: () => void;\n value: string;\n closeText?: string;\n activeIndex: number;\n dataTrackId?: string;\n} & XHComponentCommonProps;\n\nexport type KeyType = \"number\" | \"delete\" | \"string\" | \"none\";\n\nexport interface IKey {\n text: number | string;\n value: number | string;\n type: KeyType;\n activeIndex: number;\n}\n\nconst LICENSEPLATE_PROVINCES = [\n \"京\",\n \"津\",\n \"冀\",\n \"晋\",\n \"蒙\",\n \"辽\",\n \"吉\",\n \"黑\",\n \"沪\",\n \"苏\",\n \"浙\",\n \"皖\",\n \"闽\",\n \"赣\",\n \"鲁\",\n \"豫\",\n \"鄂\",\n \"湘\",\n \"粤\",\n \"桂\",\n \"琼\",\n \"渝\",\n \"川\",\n \"贵\",\n \"云\",\n \"藏\",\n \"陕\",\n \"甘\",\n \"青\",\n \"宁\",\n \"新\",\n \"港\",\n \"澳\",\n \"台\",\n \"使\",\n];\n\nconst LICENSEPLATE_NUMBERS = [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\"];\n\nconst LICENSEPLATE_LETTERS = [\n \"A\",\n \"B\",\n \"C\",\n \"D\",\n \"E\",\n \"F\",\n \"G\",\n \"H\",\n \"J\",\n \"K\",\n \"L\",\n \"M\",\n \"N\",\n \"P\",\n \"Q\",\n \"R\",\n \"S\",\n \"T\",\n \"U\",\n \"V\",\n \"W\",\n \"X\",\n \"Y\",\n \"Z\",\n];\n\nconst specialArea = [\"港\", \"澳\", \"学\", \"领\"];\nconst finalArea = [\"临\", \"澳\", \"学\", \"领\"];\n\nexport type TYPE_MODE = \"province\" | \"letter\" | \"mixed\";\n\nconst LicensePlateKeyboard: FC<NumberKeyboardProps> = props => {\n const {\n onBlur,\n show,\n showClose = true,\n closeOnClickSpace = true,\n onClose,\n onChange,\n value,\n closeText = \"完成\",\n onDelete,\n className,\n activeIndex,\n dataTrackId = \"LicensePlate_Keyboard\",\n } = props;\n const [input, setInput] = useState(value);\n\n // 键盘的key\n const keys = useMemo(() => {\n if (activeIndex === 0) return LICENSEPLATE_PROVINCES;\n if (activeIndex === 6)\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS, ...specialArea];\n if (activeIndex === 7)\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS, ...finalArea];\n return [...LICENSEPLATE_NUMBERS, ...LICENSEPLATE_LETTERS];\n }, [activeIndex]);\n\n const title = useMemo(() => {\n if (activeIndex === 0) return \"选择省份\";\n if (activeIndex === 1) return \"选择字母\";\n return \"选择数字或字母\";\n }, [activeIndex]);\n\n const mode = useMemo<TYPE_MODE>(() => {\n if (activeIndex === 0) return \"province\";\n if (activeIndex === 1) return \"letter\";\n return \"mixed\";\n }, [activeIndex]);\n\n useEffect(() => {\n if (closeOnClickSpace) {\n document.addEventListener(\"click\", handleClose);\n }\n\n return () => {\n document.removeEventListener(\"click\", handleClose);\n };\n }, []);\n\n useEffect(() => {\n setInput(value);\n }, [value]);\n\n function handleClose(e): void {\n e.stopPropagation();\n onClose && onClose(e);\n onBlur && onBlur(e);\n }\n\n /**\n * 根据 activeIndex 拼凑新值,如果activeIndex小于当前的值的长度,就说明后面已经有值,这时候直接替换,否则拼接\n * @param key\n */\n function handleKeyPress(key: string): void {\n if (key === value[activeIndex]) return;\n if (process.env.TARO_ENV === \"h5\") {\n // e.stopImmediatePropagation();\n }\n let newInput = input;\n if (activeIndex < input.length) {\n newInput = replaceCharByIndex(input, activeIndex, key);\n } else {\n newInput = input + key;\n }\n\n setInput(newInput);\n\n onChange && onChange(newInput);\n }\n\n const handleDelete = () => {\n onDelete();\n };\n\n const keyboardcls = classNames(\"xh-license-keyboard\", className);\n\n return (\n <CSSTransition classNames=\"slide-up\" in={show} unmountOnExit timeout={200}>\n <View className={keyboardcls}>\n <View className=\"xh-license-keyboard-header\">\n <View className=\"xh-license-keyboard-header-title\">{title}</View>\n <View className=\"xh-license-keyboard-header-delete\"></View>\n {showClose && (\n <View\n className=\"xh-license-keyboard-header-close\"\n // @ts-ignore\n dataTrackId={`${dataTrackId}_dataTrackId_close`}\n onClick={handleClose}\n >\n {closeText}\n </View>\n )}\n </View>\n <View className=\"xh-license-keyboard-body\">\n {keys.map((key, index) => (\n <View\n key={index}\n className={classNames(\"xh-license-keyboard-body-key\")}\n >\n {process.env.TARO_ENV === \"h5\" ? (\n <button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV\n )}\n // @ts-ignore\n dataTrackId={`${dataTrackId}_Keyboard_${key}`}\n disabled={mode === \"letter\" && index < 10}\n onClick={e => {\n e.stopPropagation();\n handleKeyPress(key);\n }}\n >\n {key}\n </button>\n ) : (\n <Button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV\n )}\n disabled={mode === \"letter\" && index < 10}\n // @ts-ignore\n dataTrackId={`${dataTrackId}_Keyboard_${key}`}\n onClick={e => {\n e.stopPropagation();\n if (mode === \"letter\" && index < 10) return;\n handleKeyPress(key);\n }}\n >\n {key}\n </Button>\n )}\n </View>\n ))}\n <View\n className={classNames(\"xh-license-keyboard-body-key\", \"delete\")}\n >\n {process.env.TARO_ENV === \"h5\" ? (\n <button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV,\n \"delete\"\n )}\n disabled={activeIndex === 0}\n // @ts-ignore\n dataTrackId={`${dataTrackId}_Keyboard_delete`}\n onClick={e => {\n e.stopPropagation();\n handleDelete();\n }}\n ></button>\n ) : (\n <Button\n className={classNames(\n \"xh-license-keyboard-body-key-item\",\n process.env.TARO_ENV,\n \"delete\"\n )}\n disabled={activeIndex === 0}\n // @ts-ignore\n dataTrackId={`${dataTrackId}_Keyboard_delete`}\n onClick={e => {\n e.stopPropagation();\n if (value.length === 0) return;\n console.log(\"delete\");\n handleDelete();\n }}\n ></Button>\n )}\n </View>\n </View>\n </View>\n </CSSTransition>\n );\n};\n\nexport default LicensePlateKeyboard;\n"],"names":["LICENSEPLATE_PROVINCES","LICENSEPLATE_NUMBERS","LICENSEPLATE_LETTERS","specialArea","finalArea","LicensePlateKeyboard","props","onBlur","show","_a","showClose","_b","closeOnClickSpace","onClose","onChange","value","_c","closeText","onDelete","className","activeIndex","_d","dataTrackId","_e","__read","useState","input","setInput","keys","useMemo","__spreadArray","title","mode","handleClose","e","stopPropagation","handleKeyPress","key","process","env","TARO_ENV","newInput","length","replaceCharByIndex","useEffect","document","addEventListener","removeEventListener","handleDelete","keyboardcls","classNames","React","createElement","CSSTransition","in","unmountOnExit","timeout","View","concat","onClick","map","index","disabled","Button"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{__rest as e,__read as n,__assign as a}from"../node_modules/tslib/tslib.es6.js";import o,{forwardRef as t,useState as r,useRef as l,useImperativeHandle as i,useEffect as c}from"react";import s from"classnames";import{View as u}from"@tarojs/components";import d from"./Keyboard.js";import{isLicenseNo as m,replaceCharByIndex as h}from"../src/utils/index.js";var f=t((function(t,f){var v=t.value,p=void 0===v?"":v,b=t.onChange,g=t.className,N=t.showKeyboard,x=void 0!==N&&N,k=t.padding,w=void 0!==k&&k,C=t.border,E=void 0!==C&&C;t.onFinish;var P=t.autoScroll,j=void 0===P||P,y=t.label,I=t.dataTrackId,O=e(t,["value","onChange","className","showKeyboard","padding","border","onFinish","autoScroll","label","dataTrackId"]),K=n(r(p.length),2),T=K[0],V=K[1],F=n(r(x),2),S=F[0],_=F[1],A=l(null);i(f,(function(){return{isValid:m(p)}}),[p]);c((function(){S&&A.current&&j&&"h5"===process.env.TARO_ENV&&A.current.scrollIntoView({behavior:"smooth"})}),[S,j]);var D=s("xh-licensePlate",g,{padding:w},{border:E});return o.createElement(u,{className:D,"data-track-id":I},y&&o.createElement("label",{className:"xh-licensePlate-label"},y),o.createElement(u,{className:"xh-licensePlate-input",onClick:function(e){e.stopPropagation(),_(!0)},ref:A},function(){for(var e=[],n=function(n){var a=p[n];e.push(o.createElement(u,{key:n,className:s("xh-licensePlate-input-item",{active:T===n,showNew:7===n&&8!==p.length}),onClick:function(){var e;(e=n)>p.length-1||V(e)}},"O"===a?"":a))},a=0;a<8;a++)n(a);return e}()),o.createElement(d,a({activeIndex:T,show:S,value:p,onChange:function(e){V((function(n){return e.replace(/O/g,"").length>=8?n:n+1})),b(e)},onDelete:function(){var e=p[T+1],n=h(p,T,e?"O":"");0!==n.length&&V((function(e){return e-1})),b(n)},onClose:function(){_(!1)}},O)))}));export{f as default};
1
+ import{__rest as e,__read as a,__assign as n}from"../node_modules/tslib/tslib.es6.js";import t,{forwardRef as o,useState as r,useRef as l,useImperativeHandle as c,useEffect as i}from"react";import s from"classnames";import{View as d}from"@tarojs/components";import u from"./Keyboard.js";import{isLicenseNo as m,replaceCharByIndex as h}from"../src/utils/index.js";var f=o((function(o,f){var p=o.value,v=void 0===p?"":p,b=o.onChange,g=o.className,k=o.showKeyboard,I=void 0!==k&&k,N=o.padding,x=void 0!==N&&N,T=o.border,w=void 0!==T&&T;o.onFinish;var C=o.autoScroll,E=void 0===C||C,P=o.label,j=o.dataTrackId,y=void 0===j?"LicensePlateInput":j,O=e(o,["value","onChange","className","showKeyboard","padding","border","onFinish","autoScroll","label","dataTrackId"]),K=a(r(v.length),2),V=K[0],F=K[1],S=a(r(I),2),_=S[0],A=S[1],D=l(null);c(f,(function(){return{isValid:m(v)}}),[v]);i((function(){_&&D.current&&E&&"h5"===process.env.TARO_ENV&&D.current.scrollIntoView({behavior:"smooth"})}),[_,E]);var L=s("xh-licensePlate",g,{padding:x},{border:w});return t.createElement(d,{className:L,dataTrackId:y},P&&t.createElement("label",{className:"xh-licensePlate-label"},P),t.createElement(d,{className:"xh-licensePlate-input",onClick:function(e){e.stopPropagation(),A(!0)},dataTrackId:"".concat(y,"-input"),ref:D},function(){for(var e=[],a=function(a){var n=v[a];e.push(t.createElement(d,{key:a,className:s("xh-licensePlate-input-item",{active:V===a,showNew:7===a&&8!==v.length}),dataTrackId:"".concat(y,"-input-item-").concat(a),onClick:function(){var e;(e=a)>v.length-1||F(e)}},"O"===n?"":n))},n=0;n<8;n++)a(n);return e}()),t.createElement(u,n({activeIndex:V,dataTrackId:y,show:_,value:v,onChange:function(e){F((function(a){return e.replace(/O/g,"").length>=8?a:a+1})),b(e)},onDelete:function(){var e=v[V+1],a=h(v,V,e?"O":"");0!==a.length&&F((function(e){return e-1})),b(a)},onClose:function(){A(!1)}},O)))}));export{f as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/LicensePlateInput/index.tsx"],"sourcesContent":["import React, {\n useImperativeHandle,\n forwardRef,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { ITouchEvent, View } from \"@tarojs/components\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport Keyboard from \"./Keyboard\";\nimport { isLicenseNo, replaceCharByIndex } from \"../../utils\";\n\nimport \"./index.scss\";\n\nexport type LicensePlateProps = {\n value: string;\n onChange: (index: string) => void;\n /**\n * 是否默认展示键盘\n */\n showKeyboard?: boolean;\n closeText?: string;\n label?: ReactNode;\n onFinish?: () => void;\n padding?: boolean;\n border?: boolean;\n autoScroll?: boolean;\n dataTrackId?: string;\n} & XHComponentCommonProps;\n\nconst LENGTH = 8;\n\nexport type LicensePlateInputRef = {\n /**\n * 是否有效,组件会用大写字母(O) 来代替空位,如果要自己校验,那么就得判断有没有“O”来判断有没有空格\n */\n isValid: boolean;\n};\n\nconst LicensePlateInput = forwardRef<LicensePlateInputRef, LicensePlateProps>(\n (props, fromRef) => {\n const {\n value = \"\",\n onChange,\n className,\n showKeyboard = false,\n padding = false,\n border = false,\n onFinish,\n autoScroll = true,\n label,\n dataTrackId,\n ...rest\n } = props;\n\n const [activeIndex, setActiveIndex] = useState(value.length);\n\n const [show, setShowKeyboard] = useState(showKeyboard);\n\n const InputRef = useRef<HTMLDivElement>(null);\n\n /**\n * 空位用“O”代替(大写字母 O)\n * @param neVal 新值\n */\n const handleOnChage = neVal => {\n setActiveIndex(old => {\n if (neVal.replace(/O/g, \"\").length >= LENGTH) return old;\n return old + 1;\n });\n // if (neVal.length === LENGTH) {\n // onFinish?.();\n // setShowKeyboard(false);\n // }\n onChange(neVal);\n };\n\n const handleKeyClick = (index: number) => {\n if (index > value.length - 1) return;\n setActiveIndex(index);\n };\n\n useImperativeHandle(\n fromRef,\n () => ({\n isValid: isLicenseNo(value),\n }),\n [value]\n );\n\n function renderInputs(): ReactNode {\n const Inputs: any = [];\n\n for (let i = 0; i < LENGTH; i++) {\n const char = value[i];\n\n Inputs.push(\n <View\n key={i}\n className={classNames(\"xh-licensePlate-input-item\", {\n active: activeIndex === i,\n showNew: i === LENGTH - 1 && value.length !== LENGTH,\n })}\n onClick={() => handleKeyClick(i)}\n >\n {char === \"O\" ? \"\" : char}\n </View>\n );\n }\n\n return Inputs;\n }\n\n /**\n * 删除其中一位\n * 如果删除那一位后面有值就用“O”代替删除的那一位,否则直接删除\n * 只要当前value有值就把 index-1\n */\n const handleDelete = () => {\n const nextChar = value[activeIndex + 1];\n const replaceChar = nextChar ? \"O\" : \"\";\n const newValue = replaceCharByIndex(value, activeIndex, replaceChar);\n\n if (newValue.length !== 0) setActiveIndex(old => old - 1);\n onChange(newValue);\n };\n\n const handleClose = () => {\n setShowKeyboard(false);\n };\n\n useEffect(() => {\n if (\n show &&\n InputRef.current &&\n autoScroll &&\n process.env.TARO_ENV === \"h5\"\n ) {\n InputRef.current.scrollIntoView({ behavior: \"smooth\" });\n }\n }, [show, autoScroll]);\n\n function handlerClick(e: ITouchEvent): void {\n e.stopPropagation();\n setShowKeyboard(true);\n }\n const xhLicensePlateCls = classNames(\n \"xh-licensePlate\",\n className,\n { padding },\n { border }\n );\n\n return (\n <View className={xhLicensePlateCls} data-track-id={dataTrackId}>\n {label && <label className=\"xh-licensePlate-label\">{label}</label>}\n <View\n className=\"xh-licensePlate-input\"\n onClick={handlerClick}\n ref={InputRef}\n >\n {renderInputs()}\n </View>\n <Keyboard\n activeIndex={activeIndex}\n show={show}\n value={value}\n onChange={handleOnChage}\n onDelete={handleDelete}\n onClose={handleClose}\n {...rest}\n />\n </View>\n );\n }\n);\n\nexport default LicensePlateInput;\n"],"names":["LicensePlateInput","forwardRef","props","fromRef","_a","value","onChange","className","_b","showKeyboard","_c","padding","_d","border","onFinish","_e","autoScroll","label","dataTrackId","rest","__rest","_f","__read","useState","length","activeIndex","setActiveIndex","_g","show","setShowKeyboard","InputRef","useRef","useImperativeHandle","isValid","isLicenseNo","useEffect","current","process","env","TARO_ENV","scrollIntoView","behavior","xhLicensePlateCls","classNames","React","View","createElement","onClick","e","stopPropagation","ref","Inputs","i","char","push","key","active","showNew","LENGTH","index","renderInputs","Keyboard","__assign","neVal","old","replace","onDelete","nextChar","newValue","replaceCharByIndex","onClose"],"mappings":"2WAgCA,IASMA,EAAoBC,GACxB,SAACC,EAAOC,GAEJ,IAAAC,EAWEF,EAAKG,MAXPA,aAAQ,GAAED,EACVE,EAUEJ,EAAKI,SATPC,EASEL,EAAKK,UARPC,EAQEN,EARkBO,aAApBA,OAAY,IAAAD,GAAQA,EACpBE,EAOER,UAPFS,OAAU,IAAAD,KACVE,EAMEV,EAAKW,OANPA,OAAM,IAAAD,GAAQA,EAMZV,EAAKY,aAJPC,EAIEb,EAJec,WAAjBA,OAAa,IAAAD,GAAIA,EACjBE,EAGEf,EAHGe,MACLC,EAEEhB,EAFSgB,YACRC,EACDC,EAAAlB,EAZE,CAAA,QAAA,WAAA,YAAA,eAAA,UAAA,SAAA,WAAA,aAAA,QAAA,gBAcAmB,EAAAC,EAAgCC,EAASlB,EAAMmB,QAAO,GAArDC,EAAWJ,EAAA,GAAEK,OAEdC,EAAAL,EAA0BC,EAASd,GAAa,GAA/CmB,EAAID,EAAA,GAAEE,OAEPC,EAAWC,EAAuB,MAuBxCC,EACE7B,GACA,WAAM,MAAC,CACL8B,QAASC,EAAY7B,GACrB,GACF,CAACA,IA4CH8B,GAAU,WAENP,GACAE,EAASM,SACTpB,GACyB,OAAzBqB,QAAQC,IAAIC,UAEZT,EAASM,QAAQI,eAAe,CAAEC,SAAU,UAEhD,GAAG,CAACb,EAAMZ,IAMV,IAAM0B,EAAoBC,EACxB,kBACApC,EACA,CAAEI,QAAOA,GACT,CAAEE,OAAMA,IAGV,OACE+B,gBAACC,EAAI,CAACtC,UAAWmC,kBAAkCxB,GAChDD,GAAS2B,EAAOE,cAAA,QAAA,CAAAvC,UAAU,yBAAyBU,GACpD2B,EAAAE,cAACD,EACC,CAAAtC,UAAU,wBACVwC,QAhBN,SAAsBC,GACpBA,EAAEC,kBACFpB,GAAgB,EACjB,EAcKqB,IAAKpB,GArEX,WAGE,IAFA,IAAMqB,EAAc,cAEXC,GACP,IAAMC,EAAOhD,EAAM+C,GAEnBD,EAAOG,KACLV,EAAAE,cAACD,EACC,CAAAU,IAAKH,EACL7C,UAAWoC,EAAW,6BAA8B,CAClDa,OAAQ/B,IAAgB2B,EACxBK,QAAeC,IAANN,GAvER,IAuE4B/C,EAAMmB,SAErCuB,QAAS,WA1BM,IAACY,KA0BcP,GAzBxB/C,EAAMmB,OAAS,GAC3BE,EAAeiC,KA0BC,MAATN,EAAe,GAAKA,KAZlBD,EAAI,EAAGA,EA/DP,EA+DmBA,MAAnBA,GAiBT,OAAOD,CACR,CAkDMS,IAEHhB,EAAAE,cAACe,EAAQC,EAAA,CACPrC,YAAaA,EACbG,KAAMA,EACNvB,MAAOA,EACPC,SAtGgB,SAAAyD,GACpBrC,GAAe,SAAAsC,GACb,OAAID,EAAME,QAAQ,KAAM,IAAIzC,QArCrB,EAqC8CwC,EAC9CA,EAAM,CACf,IAKA1D,EAASyD,EACX,EA6FMG,SAlDe,WACnB,IAAMC,EAAW9D,EAAMoB,EAAc,GAE/B2C,EAAWC,EAAmBhE,EAAOoB,EADvB0C,EAAW,IAAM,IAGb,IAApBC,EAAS5C,QAAcE,GAAe,SAAAsC,GAAO,OAAAA,EAAM,CAAC,IACxD1D,EAAS8D,EACX,EA4CME,QA1Cc,WAClBzC,GAAgB,EAClB,GAyCUV,IAIZ"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/LicensePlateInput/index.tsx"],"sourcesContent":["import React, {\n useImperativeHandle,\n forwardRef,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { ITouchEvent, View } from \"@tarojs/components\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport Keyboard from \"./Keyboard\";\nimport { isLicenseNo, replaceCharByIndex } from \"../../utils\";\n\nimport \"./index.scss\";\n\nexport type LicensePlateProps = {\n value: string;\n onChange: (index: string) => void;\n /**\n * 是否默认展示键盘\n */\n showKeyboard?: boolean;\n closeText?: string;\n label?: ReactNode;\n onFinish?: () => void;\n padding?: boolean;\n border?: boolean;\n autoScroll?: boolean;\n dataTrackId?: string;\n} & XHComponentCommonProps;\n\nconst LENGTH = 8;\n\nexport type LicensePlateInputRef = {\n /**\n * 是否有效,组件会用大写字母(O) 来代替空位,如果要自己校验,那么就得判断有没有“O”来判断有没有空格\n */\n isValid: boolean;\n};\n\nconst LicensePlateInput = forwardRef<LicensePlateInputRef, LicensePlateProps>(\n (props, fromRef) => {\n const {\n value = \"\",\n onChange,\n className,\n showKeyboard = false,\n padding = false,\n border = false,\n onFinish,\n autoScroll = true,\n label,\n dataTrackId = \"LicensePlateInput\",\n ...rest\n } = props;\n\n const [activeIndex, setActiveIndex] = useState(value.length);\n\n const [show, setShowKeyboard] = useState(showKeyboard);\n\n const InputRef = useRef<HTMLDivElement>(null);\n\n /**\n * 空位用“O”代替(大写字母 O)\n * @param neVal 新值\n */\n const handleOnChage = neVal => {\n setActiveIndex(old => {\n if (neVal.replace(/O/g, \"\").length >= LENGTH) return old;\n return old + 1;\n });\n // if (neVal.length === LENGTH) {\n // onFinish?.();\n // setShowKeyboard(false);\n // }\n onChange(neVal);\n };\n\n const handleKeyClick = (index: number) => {\n if (index > value.length - 1) return;\n setActiveIndex(index);\n };\n\n useImperativeHandle(\n fromRef,\n () => ({\n isValid: isLicenseNo(value),\n }),\n [value]\n );\n\n function renderInputs(): ReactNode {\n const Inputs: any = [];\n\n for (let i = 0; i < LENGTH; i++) {\n const char = value[i];\n\n Inputs.push(\n <View\n key={i}\n className={classNames(\"xh-licensePlate-input-item\", {\n active: activeIndex === i,\n showNew: i === LENGTH - 1 && value.length !== LENGTH,\n })}\n // @ts-ignore\n dataTrackId={`${dataTrackId}-input-item-${i}`}\n onClick={() => handleKeyClick(i)}\n >\n {char === \"O\" ? \"\" : char}\n </View>\n );\n }\n\n return Inputs;\n }\n\n /**\n * 删除其中一位\n * 如果删除那一位后面有值就用“O”代替删除的那一位,否则直接删除\n * 只要当前value有值就把 index-1\n */\n const handleDelete = () => {\n const nextChar = value[activeIndex + 1];\n const replaceChar = nextChar ? \"O\" : \"\";\n const newValue = replaceCharByIndex(value, activeIndex, replaceChar);\n\n if (newValue.length !== 0) setActiveIndex(old => old - 1);\n onChange(newValue);\n };\n\n const handleClose = () => {\n setShowKeyboard(false);\n };\n\n useEffect(() => {\n if (\n show &&\n InputRef.current &&\n autoScroll &&\n process.env.TARO_ENV === \"h5\"\n ) {\n InputRef.current.scrollIntoView({ behavior: \"smooth\" });\n }\n }, [show, autoScroll]);\n\n function handlerClick(e: ITouchEvent): void {\n e.stopPropagation();\n setShowKeyboard(true);\n }\n const xhLicensePlateCls = classNames(\n \"xh-licensePlate\",\n className,\n { padding },\n { border }\n );\n\n return (\n <View\n className={xhLicensePlateCls}\n // @ts-ignore\n dataTrackId={dataTrackId}\n >\n {label && <label className=\"xh-licensePlate-label\">{label}</label>}\n <View\n className=\"xh-licensePlate-input\"\n onClick={handlerClick}\n // @ts-ignore\n dataTrackId={`${dataTrackId}-input`}\n ref={InputRef}\n >\n {renderInputs()}\n </View>\n <Keyboard\n activeIndex={activeIndex}\n dataTrackId={dataTrackId}\n show={show}\n value={value}\n onChange={handleOnChage}\n onDelete={handleDelete}\n onClose={handleClose}\n {...rest}\n />\n </View>\n );\n }\n);\n\nexport default LicensePlateInput;\n"],"names":["LicensePlateInput","forwardRef","props","fromRef","_a","value","onChange","className","_b","showKeyboard","_c","padding","_d","border","onFinish","_e","autoScroll","label","_f","dataTrackId","rest","__rest","_g","__read","useState","length","activeIndex","setActiveIndex","_h","show","setShowKeyboard","InputRef","useRef","useImperativeHandle","isValid","isLicenseNo","useEffect","current","process","env","TARO_ENV","scrollIntoView","behavior","xhLicensePlateCls","classNames","React","createElement","View","onClick","e","stopPropagation","concat","ref","Inputs","i","char","push","key","active","showNew","LENGTH","index","renderInputs","Keyboard","__assign","neVal","old","replace","onDelete","nextChar","newValue","replaceCharByIndex","onClose"],"mappings":"2WAgCA,IASMA,EAAoBC,GACxB,SAACC,EAAOC,GAEJ,IAAAC,EAWEF,EAAKG,MAXPA,aAAQ,GAAED,EACVE,EAUEJ,EAAKI,SATPC,EASEL,EATOK,UACTC,EAQEN,eARFO,OAAe,IAAAD,KACfE,EAOER,EAAKS,QAPPA,OAAO,IAAAD,GAAQA,EACfE,EAMEV,EAAKW,OANPA,cAAcD,EAMZV,EAAKY,SAJP,IAAAC,EAIEb,EAJec,WAAjBA,OAAa,IAAAD,KACbE,EAGEf,QAFFgB,EAEEhB,EAAKiB,YAFPA,OAAW,IAAAD,EAAG,oBAAmBA,EAC9BE,EAAIC,EACLnB,EAZE,CAAA,QAAA,WAAA,YAAA,eAAA,UAAA,SAAA,WAAA,aAAA,QAAA,gBAcAoB,EAAAC,EAAgCC,EAASnB,EAAMoB,QAAO,GAArDC,EAAWJ,EAAA,GAAEK,OAEdC,EAAAL,EAA0BC,EAASf,GAAa,GAA/CoB,EAAID,EAAA,GAAEE,OAEPC,EAAWC,EAAuB,MAuBxCC,EACE9B,GACA,WAAM,MAAC,CACL+B,QAASC,EAAY9B,GACrB,GACF,CAACA,IA8CH+B,GAAU,WAENP,GACAE,EAASM,SACTrB,GACyB,OAAzBsB,QAAQC,IAAIC,UAEZT,EAASM,QAAQI,eAAe,CAAEC,SAAU,UAEhD,GAAG,CAACb,EAAMb,IAMV,IAAM2B,EAAoBC,EACxB,kBACArC,EACA,CAAEI,QAAOA,GACT,CAAEE,OAAMA,IAGV,OACEgC,EAACC,cAAAC,EACC,CAAAxC,UAAWoC,EAEXxB,YAAaA,GAEZF,GAAS4B,EAAOC,cAAA,QAAA,CAAAvC,UAAU,yBAAyBU,GACpD4B,EAACC,cAAAC,GACCxC,UAAU,wBACVyC,QApBN,SAAsBC,GACpBA,EAAEC,kBACFpB,GAAgB,EACjB,EAmBKX,YAAa,GAAGgC,OAAAhC,EAAmB,UACnCiC,IAAKrB,GA7EX,WAGE,IAFA,IAAMsB,EAAc,cAEXC,GACP,IAAMC,EAAOlD,EAAMiD,GAEnBD,EAAOG,KACLX,EAAAC,cAACC,EACC,CAAAU,IAAKH,EACL/C,UAAWqC,EAAW,6BAA8B,CAClDc,OAAQhC,IAAgB4B,EACxBK,QAAeC,IAANN,GAvER,IAuE4BjD,EAAMoB,SAGrCN,YAAa,GAAAgC,OAAGhC,EAAW,gBAAAgC,OAAeG,GAC1CN,QAAS,WA5BM,IAACa,KA4BcP,GA3BxBjD,EAAMoB,OAAS,GAC3BE,EAAekC,KA4BC,MAATN,EAAe,GAAKA,KAdlBD,EAAI,EAAGA,EA/DP,EA+DmBA,MAAnBA,GAmBT,OAAOD,CACR,CAwDMS,IAEHjB,EAAAC,cAACiB,EAAQC,EAAA,CACPtC,YAAaA,EACbP,YAAaA,EACbU,KAAMA,EACNxB,MAAOA,EACPC,SA/GgB,SAAA2D,GACpBtC,GAAe,SAAAuC,GACb,OAAID,EAAME,QAAQ,KAAM,IAAI1C,QArCrB,EAqC8CyC,EAC9CA,EAAM,CACf,IAKA5D,EAAS2D,EACX,EAsGMG,SAzDe,WACnB,IAAMC,EAAWhE,EAAMqB,EAAc,GAE/B4C,EAAWC,EAAmBlE,EAAOqB,EADvB2C,EAAW,IAAM,IAGb,IAApBC,EAAS7C,QAAcE,GAAe,SAAAuC,GAAO,OAAAA,EAAM,CAAC,IACxD5D,EAASgE,EACX,EAmDME,QAjDc,WAClB1C,GAAgB,EAClB,GAgDUV,IAIZ"}