taro-modal-form/index.js

A powerful and flexible modal form component for Taro.

import{View as e,Text as t,Form as o,Button as n}from"@tarojs/components";import{pxTransform as r,getEnv as i,ENV_TYPE as l}from"@tarojs/taro";import a,{cloneElement as c,isValidElement as s,useState as d,useEffect as m}from"react";import{createPortal as f}from"react-dom";function u(e,t,o,n){return new(o||(o=Promise))((function(r,i){function l(e){try{c(n.next(e))}catch(e){i(e)}}function a(e){try{c(n.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(l,a)}c((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const p=({name:o,children:n,rule:i})=>{var l;const d={display:"flex",alignItems:"center",gap:4,marginBottom:r(12),fontSize:14,color:"#44474e",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};return a.createElement(e,{style:{marginBottom:r(12)}},a.createElement(e,{style:d},(null==i?void 0:i.required)&&a.createElement(t,{style:{color:"red"}},"*"),o),a.createElement(e,{style:{marginBottom:r(5)}},s(n)?c(n,{name:o}):null),(null==i?void 0:i.required)&&(null==i?void 0:i.error)&&a.createElement(e,{style:{fontSize:12,color:"red",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"}},null!==(l=null==i?void 0:i.message)&&void 0!==l?l:`请输入${o}`))},g=t=>{var g,{title:b,open:y,trigger:v,children:h,width:x=600,zIndex:w=1,formProps:O,cancelBtnText:E="取消",finishBtnText:S="确定",footer:j}=t,z=function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(o[n[r]]=e[n[r]])}return o}(t,["title","open","trigger","children","width","zIndex","formProps","cancelBtnText","finishBtnText","footer"]);const[B,C]=d(!1),[P,k]=d(null!==(g=z.rules)&&void 0!==g?g:[]);m((()=>{void 0!==y&&C(y)}),[y]),m((()=>{var e;null===(e=null==z?void 0:z.onOpenChange)||void 0===e||e.call(z,B)}),[B]);const I={boxSizing:"border-box",position:"fixed",top:0,right:0,bottom:0,left:0,zIndex:w,backgroundColor:"rgba(0, 0, 0, 0.6)"},T={boxSizing:"border-box",fontSize:r(35),marginBottom:r(16),color:"#000",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},A={boxSizing:"border-box",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:r(x),borderRadius:r(6),backgroundColor:"#fff",padding:r(40),overflow:"hidden"},q={boxSizing:"border-box",paddingBottom:r(40)},F={margin:0},R=Object.assign(Object.assign({},F),{margin:`0 0 0 ${r(24)}`}),$=a.createElement(e,{style:I},a.createElement(e,{style:A},b&&a.createElement(e,{style:T},b),a.createElement(o,Object.assign({onSubmit:e=>u(void 0,void 0,void 0,(function*(){var t,o,n;try{const r=null!==(o=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.value)&&void 0!==o?o:{},i=P.filter((e=>{if(!e.required)return!1;const t=r[e.name];return Array.isArray(t)?0===t.length:null!==t&&"object"==typeof t?0===Object.keys(t).length:"boolean"!=typeof t&&(!t&&0!==t)}));if(k((e=>[...e].map((e=>i.find((t=>t.name===e.name))?Object.assign(Object.assign({},e),{error:!0}):Object.assign(Object.assign({},e),{error:!1}))))),0!==i.length)return;!0===(yield null===(n=null==z?void 0:z.onFinish)||void 0===n?void 0:n.call(z,e))&&C(!1)}catch(e){}})),onReset:e=>{}},O),a.createElement(e,{style:q},a.Children.toArray(h).map((t=>s(t)&&t.type===p?c(t,{rule:P.find((e=>e.name===t.props.name))}):a.createElement(e,{style:{marginBottom:r(5)}},t)))),null!=j?j:a.createElement(e,{style:{boxSizing:"border-box",textAlign:"right",fontSize:0}},a.createElement(n,{size:"mini",style:F,onClick:()=>{C(!1)}},E),a.createElement(n,{type:"primary",size:"mini",style:R,formType:"submit"},S)))));return a.createElement(a.Fragment,null,B&&(i()===l.WEB?f($,document.body):$),s(v)?void 0===y?c(v,{onClick:()=>{C(!0)}}):v:null)};export{p as ModalFormItem,g as default};