taro-react-uilib 1.4.19-0 → 1.4.19-2

package/dist/components/BankCardNumberInput/index.js

@@ -1,2 +1,2 @@
-import n,{forwardRef as e,useImperativeHandle as r}from"react";import a from"classnames";import{View as o}from"@tarojs/components";import t from"../FormInput/index.js";import{creditCard as l,checkBankCard as c}from"../src/utils/index.js";var i=e((function(e,i){var u=e.showScan,m=void 0!==u&&u,s=e.label,d=e.value,p=e.bankName,f=e.readOnly,b=e.direction,h=void 0===b?"column":b,v=e.onScan,x=e.placeholder,g=void 0===x?"请输入银行卡号":x,E=e.onError,k=e.onChange,N=e.maxlength,j=void 0===N?23:N,y=e.slot,C=e.className,w=e.border,B=e.onBlur,S=function(n){var e=n.replace(/\s/g,"");return!(e.length<16||e.length>19)&&c(e)};return r(i,(function(){return{isValid:S(d),focus:function(){var n;"object"==typeof i&&(null===(n=null==i?void 0:i.current)||void 0===n||n.focus())}}}),[d]),n.createElement(o,{className:a("xh-bankcard-number-input",C)},n.createElement(t,{padding:!0,ref:i,RightComponent:m&&n.createElement(o,{onClick:function(){null==v||v()},className:"xh-bankcard-number-input-scan"}),direction:h,label:s,mainExtra:"row"!==h&&n.createElement(o,{className:"xh-bankcard-number-input-name"},p),maxlength:j,placeholder:g,readonly:f,type:"tel",border:w,value:l(d),onBlur:function(n){null==B||B(),S(n)||null==E||E(""===n?"银行卡号不能为空":"银行卡号格式不正确")},onChange:function(n){var e=l(n);null==k||k(e)}}),y&&n.createElement(o,{className:"xh-bankcard-number-input-slot"},y))}));export{i as default};
+import n,{forwardRef as e,useRef as r,useImperativeHandle as a}from"react";import l from"classnames";import{View as o}from"@tarojs/components";import t from"../FormInput/index.js";import{creditCard as c,checkBankCard as u}from"../src/utils/index.js";var i=e((function(e,i){var m=e.showScan,s=void 0!==m&&m,d=e.label,p=e.value,f=e.bankName,h=e.readOnly,b=e.direction,v=void 0===b?"column":b,x=e.onScan,g=e.placeholder,E=void 0===g?"请输入银行卡号":g,k=e.onError,N=e.onChange,C=e.maxlength,j=void 0===C?23:C,y=e.slot,w=e.className,B=e.border,S=e.onBlur,F=function(n){var e=n.replace(/\s/g,"");return!(e.length<16||e.length>19)&&u(e)},I=r(null);return a(i,(function(){return{isValid:F(p),focus:function(){var n;null===(n=null==I?void 0:I.current)||void 0===n||n.focus()}}}),[p]),n.createElement(o,{className:l("xh-bankcard-number-input",w)},n.createElement(t,{padding:!0,ref:I,RightComponent:s&&n.createElement(o,{onClick:function(){null==x||x()},className:"xh-bankcard-number-input-scan"}),direction:v,label:d,mainExtra:"row"!==v&&n.createElement(o,{className:"xh-bankcard-number-input-name"},f),maxlength:j,placeholder:E,readonly:h,type:"tel",border:B,value:c(p),onBlur:function(n){null==S||S(),F(n)||null==k||k(""===n?"银行卡号不能为空":"银行卡号格式不正确")},onChange:function(n){var e=c(n);null==N||N(e)}}),y&&n.createElement(o,{className:"xh-bankcard-number-input-slot"},y))}));export{i as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/BankCardNumberInput/index.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useImperativeHandle } from \"react\";\nimport classNames from \"classnames\";\nimport { View } from \"@tarojs/components\";\n\nimport XHFormInput from \"../FormInput\";\nimport { checkBankCard, creditCard } from \"../../utils\";\nimport \"./index.scss\";\nimport { XHComponentCommonProps } from \"../../types\";\n\nexport type PhoneNumberInputProps = {\n  showScan?: boolean;\n  label?: string;\n  /**\n   * 只有在direction为column才生效\n   */\n  bankName?: ReactNode;\n  onChange?: (value: string) => void;\n  value: string;\n  placeholder?: string;\n  readOnly?: boolean;\n  disabled?: boolean;\n  direction?: \"column\" | \"row\";\n  onScan?: () => void;\n  onError?: (msg: string) => void;\n  maxlength?: number;\n  slot?: ReactNode;\n  border?: boolean;\n  onBlur?: () => void;\n} & XHComponentCommonProps;\n\nexport type BankCardNumberInputRef = { isValid: boolean; focus: () => void };\n\nconst BankCardNumberInput = forwardRef<\n  BankCardNumberInputRef,\n  PhoneNumberInputProps\n>((props, fromRef) => {\n  const {\n    showScan = false,\n    label,\n    value,\n    bankName,\n    readOnly,\n    direction = \"column\",\n    onScan,\n    placeholder = \"请输入银行卡号\",\n    onError,\n    onChange,\n    maxlength = 23,\n    slot,\n    className,\n    border,\n    onBlur,\n  } = props;\n\n  const validateCardNumber = value => {\n    const newVal = value.replace(/\\s/g, \"\");\n    if (newVal.length < 16 || newVal.length > 19) return false;\n    return checkBankCard(newVal);\n  };\n\n  const handleBlur = value => {\n    console.log(\"blur\");\n    onBlur?.();\n    if (!validateCardNumber(value))\n      onError?.(value === \"\" ? \"银行卡号不能为空\" : \"银行卡号格式不正确\");\n  };\n\n  const handleChange = value => {\n    const formatValue = creditCard(value);\n    onChange?.(formatValue);\n  };\n\n  const handleOnScan = () => {\n    console.log(fromRef, \"fromRef...\");\n    onScan?.();\n  };\n\n  useImperativeHandle(\n    fromRef,\n    () => {\n      return {\n        isValid: validateCardNumber(value),\n        focus: () => {\n          if (typeof fromRef === \"object\") {\n            fromRef?.current?.focus();\n          }\n        },\n      };\n    },\n    [value]\n  );\n\n  return (\n    <View className={classNames(\"xh-bankcard-number-input\", className)}>\n      <XHFormInput\n        padding\n        ref={fromRef}\n        RightComponent={\n          showScan && (\n            <View\n              onClick={handleOnScan}\n              className=\"xh-bankcard-number-input-scan\"\n            ></View>\n          )\n        }\n        direction={direction}\n        label={label}\n        mainExtra={\n          direction !== \"row\" && (\n            <View className=\"xh-bankcard-number-input-name\">{bankName}</View>\n          )\n        }\n        maxlength={maxlength}\n        placeholder={placeholder}\n        readonly={readOnly}\n        type=\"tel\"\n        border={border}\n        value={creditCard(value)}\n        onBlur={handleBlur}\n        onChange={handleChange}\n      />\n      {slot && <View className=\"xh-bankcard-number-input-slot\">{slot}</View>}\n    </View>\n  );\n});\n\nexport default BankCardNumberInput;\n"],"names":["BankCardNumberInput","forwardRef","props","fromRef","_a","showScan","label","value","bankName","readOnly","_b","direction","onScan","_c","placeholder","onError","onChange","_d","maxlength","slot","className","border","onBlur","validateCardNumber","newVal","replace","length","checkBankCard","useImperativeHandle","isValid","focus","current","React","createElement","View","classNames","XHFormInput","padding","ref","RightComponent","onClick","mainExtra","readonly","type","creditCard","formatValue"],"mappings":"8OAgCA,IAAMA,EAAsBC,GAG1B,SAACC,EAAOC,GAEN,IAAAC,EAeEF,EAAKG,SAfPA,OAAQ,IAAAD,GAAQA,EAChBE,EAcEJ,QAbFK,EAaEL,EAAKK,MAZPC,EAYEN,EAZMM,SACRC,EAWEP,WAVFQ,EAUER,EAVkBS,UAApBA,OAAY,IAAAD,EAAA,WACZE,EASEV,EAAKU,OARPC,EAQEX,EARqBY,YAAvBA,OAAc,IAAAD,EAAA,YACdE,EAOEb,EAAKa,QANPC,EAMEd,EANMc,SACRC,EAKEf,EAAKgB,UALPA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAIEjB,OAHFkB,EAGElB,EAAKkB,UAFPC,EAEEnB,EAFImB,OACNC,EACEpB,SAEEqB,EAAqB,SAAAhB,GACzB,IAAMiB,EAASjB,EAAMkB,QAAQ,MAAO,IACpC,QAAID,EAAOE,OAAS,IAAMF,EAAOE,OAAS,KACnCC,EAAcH,EACvB,EAkCA,OAfAI,EACEzB,GACA,WACE,MAAO,CACL0B,QAASN,EAAmBhB,GAC5BuB,MAAO,iBACkB,iBAAZ3B,IACO,QAAhBC,EAAAD,aAAA,EAAAA,EAAS4B,eAAO,IAAA3B,GAAAA,EAAE0B,QAErB,EAEL,GACA,CAACvB,IAIDyB,EAACC,cAAAC,EAAK,CAAAd,UAAWe,EAAW,2BAA4Bf,IACtDY,EAAAC,cAACG,EACC,CAAAC,WACAC,IAAKnC,EACLoC,eACElC,GACE2B,EAAAC,cAACC,EACC,CAAAM,QA5BS,WAEnB5B,SAAAA,GACF,EA0BYQ,UAAU,kCAIhBT,UAAWA,EACXL,MAAOA,EACPmC,UACgB,QAAd9B,GACEqB,EAACC,cAAAC,EAAK,CAAAd,UAAU,iCAAiCZ,GAGrDU,UAAWA,EACXJ,YAAaA,EACb4B,SAAUjC,EACVkC,KAAK,MACLtB,OAAQA,EACRd,MAAOqC,EAAWrC,GAClBe,OA1Da,SAAAf,GAEjBe,SAAAA,IACKC,EAAmBhB,IACtBQ,SAAAA,EAAoB,KAAVR,EAAe,WAAa,YAC1C,EAsDMS,SApDe,SAAAT,GACnB,IAAMsC,EAAcD,EAAWrC,GAC/BS,SAAAA,EAAW6B,EACb,IAmDK1B,GAAQa,EAAAC,cAACC,EAAI,CAACd,UAAU,iCAAiCD,GAGhE"}
+{"version":3,"file":"index.js","sources":["../../../src/components/BankCardNumberInput/index.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { View } from \"@tarojs/components\";\n\nimport XHFormInput, { FocusHandler } from \"../FormInput\";\nimport { checkBankCard, creditCard } from \"../../utils\";\nimport \"./index.scss\";\nimport { XHComponentCommonProps } from \"../../types\";\n\nexport type PhoneNumberInputProps = {\n  showScan?: boolean;\n  label?: string;\n  /**\n   * 只有在direction为column才生效\n   */\n  bankName?: ReactNode;\n  onChange?: (value: string) => void;\n  value: string;\n  placeholder?: string;\n  readOnly?: boolean;\n  disabled?: boolean;\n  direction?: \"column\" | \"row\";\n  onScan?: () => void;\n  onError?: (msg: string) => void;\n  maxlength?: number;\n  slot?: ReactNode;\n  border?: boolean;\n  onBlur?: () => void;\n} & XHComponentCommonProps;\n\nexport type BankCardNumberInputRef = { isValid: boolean; focus: () => void };\n\nconst BankCardNumberInput = forwardRef<\n  BankCardNumberInputRef,\n  PhoneNumberInputProps\n>((props, fromRef) => {\n  const {\n    showScan = false,\n    label,\n    value,\n    bankName,\n    readOnly,\n    direction = \"column\",\n    onScan,\n    placeholder = \"请输入银行卡号\",\n    onError,\n    onChange,\n    maxlength = 23,\n    slot,\n    className,\n    border,\n    onBlur,\n  } = props;\n\n  const validateCardNumber = value => {\n    const newVal = value.replace(/\\s/g, \"\");\n    if (newVal.length < 16 || newVal.length > 19) return false;\n    return checkBankCard(newVal);\n  };\n\n  const FormInput = useRef<FocusHandler>(null);\n\n  const handleBlur = value => {\n    console.log(\"blur\");\n    onBlur?.();\n    if (!validateCardNumber(value))\n      onError?.(value === \"\" ? \"银行卡号不能为空\" : \"银行卡号格式不正确\");\n  };\n\n  const handleChange = value => {\n    const formatValue = creditCard(value);\n    onChange?.(formatValue);\n  };\n\n  const handleOnScan = () => {\n    console.log(fromRef, \"fromRef...\");\n    onScan?.();\n  };\n\n  useImperativeHandle(\n    fromRef,\n    () => {\n      return {\n        isValid: validateCardNumber(value),\n        focus: () => {\n          FormInput?.current?.focus();\n        },\n      };\n    },\n    [value]\n  );\n\n  return (\n    <View className={classNames(\"xh-bankcard-number-input\", className)}>\n      <XHFormInput\n        padding\n        ref={FormInput}\n        RightComponent={\n          showScan && (\n            <View\n              onClick={handleOnScan}\n              className=\"xh-bankcard-number-input-scan\"\n            ></View>\n          )\n        }\n        direction={direction}\n        label={label}\n        mainExtra={\n          direction !== \"row\" && (\n            <View className=\"xh-bankcard-number-input-name\">{bankName}</View>\n          )\n        }\n        maxlength={maxlength}\n        placeholder={placeholder}\n        readonly={readOnly}\n        type=\"tel\"\n        border={border}\n        value={creditCard(value)}\n        onBlur={handleBlur}\n        onChange={handleChange}\n      />\n      {slot && <View className=\"xh-bankcard-number-input-slot\">{slot}</View>}\n    </View>\n  );\n});\n\nexport default BankCardNumberInput;\n"],"names":["BankCardNumberInput","forwardRef","props","fromRef","_a","showScan","label","value","bankName","readOnly","_b","direction","onScan","_c","placeholder","onError","onChange","_d","maxlength","slot","className","border","onBlur","validateCardNumber","newVal","replace","length","checkBankCard","FormInput","useRef","useImperativeHandle","isValid","focus","current","React","createElement","View","classNames","XHFormInput","padding","ref","RightComponent","onClick","mainExtra","readonly","type","creditCard","formatValue"],"mappings":"0PAqCA,IAAMA,EAAsBC,GAG1B,SAACC,EAAOC,GAEN,IAAAC,EAeEF,EAAKG,SAfPA,OAAQ,IAAAD,GAAQA,EAChBE,EAcEJ,QAbFK,EAaEL,EAAKK,MAZPC,EAYEN,EAZMM,SACRC,EAWEP,WAVFQ,EAUER,EAVkBS,UAApBA,OAAY,IAAAD,EAAA,WACZE,EASEV,EAAKU,OARPC,EAQEX,EARqBY,YAAvBA,OAAc,IAAAD,EAAA,YACdE,EAOEb,EAAKa,QANPC,EAMEd,EANMc,SACRC,EAKEf,EAAKgB,UALPA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAIEjB,OAHFkB,EAGElB,EAAKkB,UAFPC,EAEEnB,EAFImB,OACNC,EACEpB,SAEEqB,EAAqB,SAAAhB,GACzB,IAAMiB,EAASjB,EAAMkB,QAAQ,MAAO,IACpC,QAAID,EAAOE,OAAS,IAAMF,EAAOE,OAAS,KACnCC,EAAcH,EACvB,EAEMI,EAAYC,EAAqB,MAgCvC,OAbAC,EACE3B,GACA,WACE,MAAO,CACL4B,QAASR,EAAmBhB,GAC5ByB,MAAO,iBACa,QAAlB5B,EAAAwB,aAAA,EAAAA,EAAWK,eAAO,IAAA7B,GAAAA,EAAE4B,OACrB,EAEL,GACA,CAACzB,IAID2B,EAACC,cAAAC,EAAK,CAAAhB,UAAWiB,EAAW,2BAA4BjB,IACtDc,EAAAC,cAACG,EACC,CAAAC,WACAC,IAAKZ,EACLa,eACEpC,GACE6B,EAAAC,cAACC,EACC,CAAAM,QA1BS,WAEnB9B,SAAAA,GACF,EAwBYQ,UAAU,kCAIhBT,UAAWA,EACXL,MAAOA,EACPqC,UACgB,QAAdhC,GACEuB,EAACC,cAAAC,EAAK,CAAAhB,UAAU,iCAAiCZ,GAGrDU,UAAWA,EACXJ,YAAaA,EACb8B,SAAUnC,EACVoC,KAAK,MACLxB,OAAQA,EACRd,MAAOuC,EAAWvC,GAClBe,OAxDa,SAAAf,GAEjBe,SAAAA,IACKC,EAAmBhB,IACtBQ,SAAAA,EAAoB,KAAVR,EAAe,WAAa,YAC1C,EAoDMS,SAlDe,SAAAT,GACnB,IAAMwC,EAAcD,EAAWvC,GAC/BS,SAAAA,EAAW+B,EACb,IAiDK5B,GAAQe,EAAAC,cAACC,EAAI,CAAChB,UAAU,iCAAiCD,GAGhE"}

package/dist/components/LicensePlateInput/index.js

@@ -1,2 +1,2 @@
-import{__rest as e,__read as n,__assign as a}from"../node_modules/tslib/tslib.es6.js";import o,{useState as t,useRef as r}from"react";import l from"classnames";import{View as i}from"@tarojs/components";import s from"./Keyboard.js";var c=function(c){var m=c.value,u=void 0===m?"":m,d=c.onChange,f=c.className,h=c.showKeyboard,v=void 0!==h&&h,p=c.padding,b=void 0!==p&&p,g=c.border,N=void 0!==g&&g;c.onFinish;var x=c.label,w=e(c,["value","onChange","className","showKeyboard","padding","border","onFinish","label"]),C=n(t(u.length),2),E=C[0],P=C[1],y=n(t(v),2),j=y[0],K=y[1],k=r(null);var F=l("xh-licensePlate",f,{padding:b},{border:N});return o.createElement(i,{className:F},x&&o.createElement("label",{className:"xh-licensePlate-label"},x),o.createElement(i,{className:"xh-licensePlate-input",onClick:function(e){e.stopPropagation(),K(!0)},ref:k},function(){for(var e=[],n=0;n<8;n++){var a=u[n];e.push(o.createElement(i,{key:n,className:l("xh-licensePlate-input-item",{active:E-1===n,showNew:7===n&&8!==u.length})},a))}return e}()),o.createElement(s,a({activeIndex:E,show:j,value:u,onChange:function(e){P((function(e){return e+1})),d(e)},onDelete:function(){var e=u.slice(0,-1);P((function(e){return e-1})),d(e)},onClose:function(){K(!1)}},w)))};export{c as default};
+import{__rest as e,__read as o,__assign as n}from"../node_modules/tslib/tslib.es6.js";import a,{useState as t,useRef as r,useEffect as l}from"react";import i from"classnames";import{View as s}from"@tarojs/components";import c from"./Keyboard.js";var m=function(m){var u=m.value,d=void 0===u?"":u,h=m.onChange,v=m.className,f=m.showKeyboard,p=void 0!==f&&f,b=m.padding,g=void 0!==b&&b,N=m.border,w=void 0!==N&&N;m.onFinish;var x=m.autoScroll,E=void 0===x||x,C=m.label,P=e(m,["value","onChange","className","showKeyboard","padding","border","onFinish","autoScroll","label"]),y=o(t(d.length),2),j=y[0],K=y[1],k=o(t(p),2),F=k[0],I=k[1],S=r(null);l((function(){F&&S.current&&E&&"h5"===process.env.TARO_ENV&&S.current.scrollIntoView({behavior:"smooth"})}),[F,E]);var V=i("xh-licensePlate",v,{padding:g},{border:w});return a.createElement(s,{className:V},C&&a.createElement("label",{className:"xh-licensePlate-label"},C),a.createElement(s,{className:"xh-licensePlate-input",onClick:function(e){e.stopPropagation(),I(!0)},ref:S},function(){for(var e=[],o=0;o<8;o++){var n=d[o];e.push(a.createElement(s,{key:o,className:i("xh-licensePlate-input-item",{active:j-1===o,showNew:7===o&&8!==d.length})},n))}return e}()),a.createElement(c,n({activeIndex:j,show:F,value:d,onChange:function(e){K((function(e){return e+1})),h(e)},onDelete:function(){var e=d.slice(0,-1);K((function(e){return e-1})),h(e)},onClose:function(){I(!1)}},P)))};export{m as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/LicensePlateInput/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { ITouchEvent, View } from \"@tarojs/components\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport Keyboard from \"./Keyboard\";\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} & XHComponentCommonProps;\n\nconst LENGTH = 8;\n\nconst LicensePlateInput: FC<LicensePlateProps> = props => {\n  const {\n    value = \"\",\n    onChange,\n    className,\n    showKeyboard = false,\n    padding = false,\n    border = false,\n    onFinish,\n    label,\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  const handleOnChage = neVal => {\n    setActiveIndex(old => {\n      return old + 1;\n    });\n    // if (neVal.length === LENGTH) {\n    //   onFinish?.();\n    //   setShowKeyboard(false);\n    // }\n    onChange(neVal);\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 - 1 === i,\n            showNew: i === LENGTH - 1 && value.length !== LENGTH,\n          })}\n        >\n          {char}\n        </View>\n      );\n    }\n\n    return Inputs;\n  }\n\n  /**\n   * 删除最后一位\n   */\n  const handleDelete = () => {\n    const newValue = value.slice(0, -1);\n    setActiveIndex(old => old - 1);\n    onChange(newValue);\n  };\n\n  const handleClose = () => {\n    setShowKeyboard(false);\n  };\n\n  function handlerClick(e: ITouchEvent): void {\n    e.stopPropagation();\n    setShowKeyboard(true);\n    // if (process.env.TARO_ENV === \"h5\") {\n    //   InputRef.current?.scrollIntoView(false)\n    // }\n  }\n  const xhLicensePlateCls = classNames(\n    \"xh-licensePlate\",\n    className,\n    { padding },\n    { border }\n  );\n\n  return (\n    <View className={xhLicensePlateCls}>\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\nexport default LicensePlateInput;\n"],"names":["LicensePlateInput","props","_a","value","onChange","className","_b","showKeyboard","_c","padding","_d","border","onFinish","label","rest","__rest","_e","__read","useState","length","activeIndex","setActiveIndex","_f","show","setShowKeyboard","InputRef","useRef","xhLicensePlateCls","classNames","React","createElement","View","onClick","e","stopPropagation","ref","Inputs","i","char","push","key","active","showNew","LENGTH","renderInputs","Keyboard","__assign","neVal","old","onDelete","newValue","slice","onClose"],"mappings":"uOAqBA,IAEMA,EAA2C,SAAAC,GAE7C,IAAAC,EASED,EATQE,MAAVA,OAAK,IAAAD,EAAG,GAAEA,EACVE,EAQEH,EARMG,SACRC,EAOEJ,EAAKI,UANPC,EAMEL,EAAKM,aANPA,OAAe,IAAAD,GAAKA,EACpBE,EAKEP,EAAKQ,QALPA,OAAU,IAAAD,GAAKA,EACfE,EAIET,EAJYU,OAAdA,OAAM,IAAAD,GAAQA,EAIZT,EAHMW,SACR,IAAAC,EAEEZ,EAAKY,MADJC,EACDC,EAAAd,EAVE,CAAA,QAAA,WAAA,YAAA,eAAA,UAAA,SAAA,WAAA,UAYAe,EAAAC,EAAgCC,EAASf,EAAMgB,QAAO,GAArDC,EAAWJ,EAAA,GAAEK,OAEdC,EAAAL,EAA0BC,EAASX,GAAa,GAA/CgB,EAAID,EAAA,GAAEE,OAEPC,EAAWC,EAAuB,MAuDxC,IAAMC,EAAoBC,EACxB,kBACAvB,EACA,CAAEI,QAAOA,GACT,CAAEE,OAAMA,IAGV,OACEkB,EAACC,cAAAC,EAAK,CAAA1B,UAAWsB,GACdd,GAASgB,EAAOC,cAAA,QAAA,CAAAzB,UAAU,yBAAyBQ,GACpDgB,EAAAC,cAACC,EACC,CAAA1B,UAAU,wBACV2B,QAnBN,SAAsBC,GACpBA,EAAEC,kBACFV,GAAgB,EAIjB,EAcKW,IAAKV,GAvDX,WAGE,IAFA,IAAMW,EAAc,GAEXC,EAAI,EAAGA,EAnCL,EAmCiBA,IAAK,CAC/B,IAAMC,EAAOnC,EAAMkC,GAEnBD,EAAOG,KACLV,EAAAC,cAACC,EACC,CAAAS,IAAKH,EACLhC,UAAWuB,EAAW,6BAA8B,CAClDa,OAAQrB,EAAc,IAAMiB,EAC5BK,QAAeC,IAANN,GA3CN,IA2C0BlC,EAAMgB,UAGpCmB,GAGN,CAED,OAAOF,CACR,CAqCMQ,IAEHf,EAAAC,cAACe,EAAQC,EAAA,CACP1B,YAAaA,EACbG,KAAMA,EACNpB,MAAOA,EACPC,SA1EgB,SAAA2C,GACpB1B,GAAe,SAAA2B,GACb,OAAOA,EAAM,CACf,IAKA5C,EAAS2C,EACX,EAkEME,SAvCe,WACnB,IAAMC,EAAW/C,EAAMgD,MAAM,GAAI,GACjC9B,GAAe,SAAA2B,GAAO,OAAAA,EAAM,CAAC,IAC7B5C,EAAS8C,EACX,EAoCME,QAlCc,WAClB5B,GAAgB,EAClB,GAiCUV,IAIZ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/LicensePlateInput/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { ITouchEvent, View } from \"@tarojs/components\";\nimport { XHComponentCommonProps } from \"../../types\";\nimport Keyboard from \"./Keyboard\";\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} & XHComponentCommonProps;\n\nconst LENGTH = 8;\n\nconst LicensePlateInput: FC<LicensePlateProps> = props => {\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    ...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  const handleOnChage = neVal => {\n    setActiveIndex(old => {\n      return old + 1;\n    });\n    // if (neVal.length === LENGTH) {\n    //   onFinish?.();\n    //   setShowKeyboard(false);\n    // }\n    onChange(neVal);\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 - 1 === i,\n            showNew: i === LENGTH - 1 && value.length !== LENGTH,\n          })}\n        >\n          {char}\n        </View>\n      );\n    }\n\n    return Inputs;\n  }\n\n  /**\n   * 删除最后一位\n   */\n  const handleDelete = () => {\n    const newValue = value.slice(0, -1);\n    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}>\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\nexport default LicensePlateInput;\n"],"names":["LicensePlateInput","props","_a","value","onChange","className","_b","showKeyboard","_c","padding","_d","border","onFinish","_e","autoScroll","label","rest","__rest","_f","__read","useState","length","activeIndex","setActiveIndex","_g","show","setShowKeyboard","InputRef","useRef","useEffect","current","process","env","TARO_ENV","scrollIntoView","behavior","xhLicensePlateCls","classNames","React","createElement","View","onClick","e","stopPropagation","ref","Inputs","i","char","push","key","active","showNew","LENGTH","renderInputs","Keyboard","__assign","neVal","old","onDelete","newValue","slice","onClose"],"mappings":"sPAsBA,IAEMA,EAA2C,SAAAC,GAE7C,IAAAC,EAUED,EAVQE,MAAVA,OAAQ,IAAAD,EAAA,GAAEA,EACVE,EASEH,EAAKG,SARPC,EAQEJ,EAAKI,UAPPC,EAOEL,EAAKM,aAPPA,OAAY,IAAAD,GAAQA,EACpBE,EAMEP,EANaQ,QAAfA,OAAU,IAAAD,GAAKA,EACfE,EAKET,EALYU,OAAdA,OAAS,IAAAD,GAAKA,EAKZT,EAJMW,SAAA,IACRC,EAGEZ,EAAKa,WAHPA,OAAa,IAAAD,GAAIA,EACjBE,EAEEd,EAFGc,MACFC,EACDC,EAAAhB,EAXE,CAAA,QAAA,WAAA,YAAA,eAAA,UAAA,SAAA,WAAA,aAAA,UAaAiB,EAAAC,EAAgCC,EAASjB,EAAMkB,QAAO,GAArDC,EAAWJ,EAAA,GAAEK,OAEdC,EAAAL,EAA0BC,EAASb,GAAa,GAA/CkB,EAAID,EAAA,GAAEE,OAEPC,EAAWC,EAAuB,MAgDxCC,GAAU,WAENJ,GACAE,EAASG,SACThB,GACyB,OAAzBiB,QAAQC,IAAIC,UAEZN,EAASG,QAAQI,eAAe,CAAEC,SAAU,UAEhD,GAAG,CAACV,EAAMX,IAMV,IAAMsB,EAAoBC,EACxB,kBACAhC,EACA,CAAEI,QAAOA,GACT,CAAEE,OAAMA,IAGV,OACE2B,EAACC,cAAAC,EAAK,CAAAnC,UAAW+B,GACdrB,GAASuB,EAAOC,cAAA,QAAA,CAAAlC,UAAU,yBAAyBU,GACpDuB,EAAAC,cAACC,EACC,CAAAnC,UAAU,wBACVoC,QAhBN,SAAsBC,GACpBA,EAAEC,kBACFjB,GAAgB,EACjB,EAcKkB,IAAKjB,GA/DX,WAGE,IAFA,IAAMkB,EAAc,GAEXC,EAAI,EAAGA,EApCL,EAoCiBA,IAAK,CAC/B,IAAMC,EAAO5C,EAAM2C,GAEnBD,EAAOG,KACLV,EAAAC,cAACC,EACC,CAAAS,IAAKH,EACLzC,UAAWgC,EAAW,6BAA8B,CAClDa,OAAQ5B,EAAc,IAAMwB,EAC5BK,QAAeC,IAANN,GA5CN,IA4C0B3C,EAAMkB,UAGpC0B,GAGN,CAED,OAAOF,CACR,CA6CMQ,IAEHf,EAAAC,cAACe,EAAQC,EAAA,CACPjC,YAAaA,EACbG,KAAMA,EACNtB,MAAOA,EACPC,SAlFgB,SAAAoD,GACpBjC,GAAe,SAAAkC,GACb,OAAOA,EAAM,CACf,IAKArD,EAASoD,EACX,EA0EME,SA/Ce,WACnB,IAAMC,EAAWxD,EAAMyD,MAAM,GAAI,GACjCrC,GAAe,SAAAkC,GAAO,OAAAA,EAAM,CAAC,IAC7BrD,EAASuD,EACX,EA4CME,QA1Cc,WAClBnC,GAAgB,EAClB,GAyCUV,IAIZ"}