| 1 |
- {"version":3,"file":"index.js","sources":["../../src/components/Payment/PriceOptions/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from \"antd\";\r\nimport styles from \"./PriceOptions.less\";\r\nimport { exportStyleSizeClass } from '../Utils/utils';\r\n\r\n/**\r\n * rowModa: \"single\" 单行 | \"multi\" 两行\r\n * price:number 金额\r\n * onPriceChange: (value: price) => void\r\n * size: \"small\" | \"normal\" | \"large\" 样式暂无支持\r\n * focusScroll:boolean 点击时是否自动滚动到输入框处\r\n * withTitle:boolean 是否显示标题\r\n * titleText:string|dom 标题内容 \r\n * inputPlaceholderText:string 输入框默认内容\r\n * priceOptions:Array 金额按钮数组，默认为 [100, 600, 800]\r\n * priceRender:Function 金额按钮内部数字渲染字样\r\n * inputPriceRender:Function 输入框金额字体渲染字样\r\n * inputSuffix:string|dom Antd组件Suffix属性\r\n * injectOptions: { priceBtnClass, priceInputClass } 分别控制具体渲染按钮和输入框样式 \r\n * inputRef:React.RefObject<any> Input的Ref \r\n * @interface Props\r\n */\r\ninterface Props {\r\n rowMode: \"single\" | \"multi\";\r\n price: number;\r\n onPriceChange: (v: number) => void;\r\n size: \"small\" | \"normal\" | \"large\";\r\n focusScroll: boolean;\r\n withTitle: boolean;\r\n titleText?: string | JSX.Element[] | JSX.Element;\r\n inputPlaceholderText?: string;\r\n priceOptions?: Array<any>;\r\n priceRender?: Function;\r\n inputPriceRender?: Function;\r\n inputSuffix?: string | JSX.Element[] | JSX.Element;\r\n injectOptions?: {\r\n priceBtnClass: (isActive: boolean) => any;\r\n priceInputClass: Function;\r\n }\r\n inputRef: React.RefObject<any>;\r\n}\r\n\r\nconst PriceOptions = ({\r\n price,\r\n onPriceChange,\r\n rowMode = \"single\",\r\n size = \"normal\",\r\n focusScroll = true,\r\n withTitle = true,\r\n titleText = \"Price\",\r\n inputPlaceholderText = \"Others\",\r\n priceOptions = [100, 600, 800],\r\n priceRender = (i: any) => i / 100,\r\n inputPriceRender = (i: any) => (i ? i / 100 : \"\"),\r\n inputSuffix = \"￥\",\r\n injectOptions = {\r\n priceBtnClass: () => undefined,\r\n priceInputClass: () => undefined,\r\n },\r\n inputRef\r\n}: Props) => {\r\n const defaultOptions = priceOptions;\r\n // 控制是否为其他金额输入情况\r\n const [inputStatus, setInputStatus] = useState(false);\r\n const [inputPrice, setInputPrice] = useState('');\r\n\r\n return (\r\n <div className={classnames(styles.options, {\r\n [styles.multi]: rowMode === \"multi\",\r\n ...exportStyleSizeClass(styles, size),\r\n })}>\r\n {withTitle ? (titleText || null) : null}\r\n <div className={styles.infoItem}>\r\n <span className={styles.priceBtn}>\r\n {defaultOptions.map(item => (\r\n <span\r\n className={classnames({\r\n [styles.priceItem]: true,\r\n [styles.active]: price === item && !inputStatus,\r\n ...injectOptions.priceBtnClass(price === item && !inputStatus),\r\n })}\r\n key={item}\r\n onClick={() => {\r\n onPriceChange(item);\r\n setInputStatus(false);\r\n }}\r\n >\r\n {priceRender(item)}\r\n </span>\r\n ))}\r\n </span>\r\n <Input\r\n ref={inputRef}\r\n className={classnames(styles.priceInput, {...injectOptions.priceInputClass()})}\r\n onMouseEnter={() => {\r\n if (inputStatus && inputRef && inputRef.current) {\r\n inputRef.current.focus();\r\n inputRef.current.select();\r\n }\r\n }}\r\n suffix={inputSuffix}\r\n value={inputStatus ? inputPriceRender(inputPrice) : \"\"}\r\n placeholder={inputPlaceholderText}\r\n onChange={e => {\r\n const n = +e.target.value;\r\n if (Number.isNaN(n)) {\r\n return;\r\n }\r\n // 测试暂时改成1分\r\n setInputPrice(`${n * 100}`);\r\n onPriceChange(n * 100);\r\n }}\r\n onClick={e => {\r\n if (!inputStatus) {\r\n setInputPrice('');\r\n setInputStatus(true);\r\n }\r\n }}\r\n onFocus={e => {\r\n e.target.placeholder = \"\";\r\n if (inputStatus) {\r\n setInputPrice(`${price}`);\r\n } else {\r\n setInputPrice('');\r\n setInputStatus(true);\r\n }\r\n if (focusScroll) {\r\n e.target.scrollIntoView();\r\n }\r\n }}\r\n onBlur={e => {\r\n e.target.placeholder = inputPlaceholderText;\r\n if (inputPrice) {\r\n setInputStatus(true);\r\n } else {\r\n setInputStatus(false);\r\n }\r\n }}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default PriceOptions;\r\n"],"names":["PriceOptions","price","onPriceChange","rowMode","size","focusScroll","withTitle","titleText","inputPlaceholderText","priceOptions","priceRender","i","inputPriceRender","inputSuffix","injectOptions","priceBtnClass","undefined","priceInputClass","inputRef","defaultOptions","useState","inputStatus","setInputStatus","inputPrice","setInputPrice","React","createElement","className","classnames","styles","options","multi","exportStyleSizeClass","infoItem","priceBtn","map","item","priceItem","active","key","onClick","Input","ref","priceInput","onMouseEnter","current","focus","select","suffix","value","placeholder","onChange","e","n","target","Number","isNaN","onFocus","scrollIntoView","onBlur"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAMA,YAAY,GAAG,SAAfA,YAAe,KAAA,EAkBT;MAjBVC,KAiBU,QAjBVA;MACAC,aAgBU,QAhBVA;0BACAC;MAAAA,OAeU,6BAfA;uBACVC;MAAAA,IAcU,0BAdH;8BACPC;MAAAA,WAaU,iCAbI;4BACdC;MAAAA,SAYU,+BAZE;4BACZC;MAAAA,SAWU,+BAXE;mCACZC;MAAAA,oBAUU,sCAVa;+BACvBC;MAAAA,YASU,kCATK,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX;8BACfC;MAAAA,WAQU,iCARI,UAACC,CAAD;WAAYA,CAAC,GAAG;AAQpB;mCAPVC;MAAAA,gBAOU,sCAPS,UAACD,CAAD;WAAaA,CAAC,GAAGA,CAAC,GAAG,GAAP,GAAa;AAOpC;8BANVE;MAAAA,WAMU,iCANI;gCACdC;MAAAA,aAKU,mCALM;AACdC,IAAAA,aAAa,EAAE,sBAAA;aAAMC;AADP,KAAA;AAEdC,IAAAA,eAAe,EAAE,wBAAA;aAAMD;;AAFT;MAIhBE,QACU,QADVA;MAEMC,cAAc,GAAGV;;kBAEeW,QAAQ,CAAC,KAAD;;MAAvCC,WAHG;MAGUC,cAHV;;mBAI0BF,QAAQ,CAAC,EAAD;;MAArCG,UAJG;MAISC,aAJT;;SAORC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAR,oCACvBD,MAAM,CAACE,OAAQ5B,OAAO,KAAK,UACzB6B,oBAAoB,CAACH,MAAD,EAASzB,IAAT,EAFC;AAA1B,GAAA,EAIGE,SAAS,GAAIC,SAAS,IAAI,IAAjB,GAAyB,IAJrC,EAKEkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEE,MAAM,CAACI;AAAvB,GAAA,EACER,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAEE,MAAM,CAACK;AAAxB,GAAA,EACGf,cAAc,CAACgB,GAAf,CAAmB,UAAAC,IAAA;;;WAClBX,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,SAAS,EAAEC,UAAU,qEAClBC,MAAM,CAACQ,WAAY,uCACnBR,MAAM,CAACS,QAASrC,KAAK,KAAKmC,IAAV,IAAkB,CAACf,+BACjCP,aAAa,CAACC,aAAd,CAA4Bd,KAAK,KAAKmC,IAAV,IAAkB,CAACf,WAA/C,EAHgB,CADvB;AAMEkB,MAAAA,GAAG,EAAEH,IANP;AAOEI,MAAAA,OAAO,EAAE,gBAAA,GAAK;AACZtC,QAAAA,aAAa,CAACkC,IAAD,CAAb;AACAd,QAAAA,cAAc,CAAC,KAAD,CAAd;;AATJ,KAAA,EAYGZ,WAAW,CAAC0B,IAAD,CAZd;AADD,GAAA,CADH,CADF,EAmBEX,KAAA,CAAAC,aAAA,CAACe,KAAD,EAAM;AACJC,IAAAA,GAAG,EAAExB,QADD;AAEJS,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACc,UAAR,oBAAwB7B,aAAa,CAACG,eAAd,GAAxB,CAFjB;AAGJ2B,IAAAA,YAAY,EAAE,qBAAA,GAAK;UACbvB,WAAW,IAAIH,QAAf,IAA2BA,QAAQ,CAAC2B,SAAS;AAC/C3B,QAAAA,QAAQ,CAAC2B,OAAT,CAAiBC,KAAjB;AACA5B,QAAAA,QAAQ,CAAC2B,OAAT,CAAiBE,MAAjB;;AANA,KAAA;AASJC,IAAAA,MAAM,EAAEnC,WATJ;AAUJoC,IAAAA,KAAK,EAAE5B,WAAW,GAAGT,gBAAgB,CAACW,UAAD,CAAnB,GAAkC,EAVhD;AAWJ2B,IAAAA,WAAW,EAAE1C,oBAXT;AAYJ2C,IAAAA,QAAQ,EAAE,iBAAA,CAAAC,CAAA,EAAI;UACNC,CAAC,GAAG,CAACD,CAAC,CAACE,MAAF,CAASL;;UAChBM,MAAM,CAACC,KAAP,CAAaH,CAAb,GAAiB;;;;AAIrB7B,MAAAA,aAAa,WAAI6B,CAAC,GAAG,IAAR,CAAb;AACAnD,MAAAA,aAAa,CAACmD,CAAC,GAAG,GAAL,CAAb;AAnBE,KAAA;AAqBJb,IAAAA,OAAO,EAAE,gBAAA,CAAAY,CAAA,EAAI;UACP,CAAC/B,aAAa;AAChBG,QAAAA,aAAa,CAAC,EAAD,CAAb;AACAF,QAAAA,cAAc,CAAC,IAAD,CAAd;;AAxBA,KAAA;AA2BJmC,IAAAA,OAAO,EAAE,gBAAA,CAAAL,CAAA,EAAI;AACXA,MAAAA,CAAC,CAACE,MAAF,CAASJ,WAAT,GAAuB,EAAvB;;UACI7B,aAAa;AACfG,QAAAA,aAAa,WAAIvB,MAAJ,CAAb;AADF,aAEO;AACLuB,QAAAA,aAAa,CAAC,EAAD,CAAb;AACAF,QAAAA,cAAc,CAAC,IAAD,CAAd;;;UAEEjB,aAAa;AACf+C,QAAAA,CAAC,CAACE,MAAF,CAASI,cAAT;;AApCA,KAAA;AAuCJC,IAAAA,MAAM,EAAE,eAAA,CAAAP,CAAA,EAAI;AACVA,MAAAA,CAAC,CAACE,MAAF,CAASJ,WAAT,GAAuB1C,oBAAvB;;UACIe,YAAY;AACdD,QAAAA,cAAc,CAAC,IAAD,CAAd;AADF,aAEO;AACLA,QAAAA,cAAc,CAAC,KAAD,CAAd;;;AA5CA,GAAN,CAnBF,CALF;AAzBJ,CAAA;;;;"}
|
