taro-modal-form/dist/index.cjs

A powerful and flexible modal form component for Taro.

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