@hd-app-modules/message/dist/index.js

A React Native hook for managing loading states and message notifications with toast and modal support

"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MessageProvider=exports.useMessage=exports.useLoading=void 0;const t=require("react/jsx-runtime"),n=require("react"),o=e(require("styled-components/native")),r=e(require("@expo/vector-icons/Ionicons")),i=require("react-native"),u=e(require("@hd-app-modules/translate")),p=require("@hd-app-modules/shared"),l=require("@hd-app-modules/theme"),s=require("zustand"),a=require("@hd-app-modules/components"),c=(0,s.create)(e=>({message:null,setMessage(t){return e({message:t})}}));exports.useLoading=()=>{const e=c(e=>e.setMessage);return(t,n)=>{e(t?{title:n||"",type:"loading"}:null)}},exports.useMessage=()=>{const e=c(e=>e.setMessage);return(t,n,o)=>{e({title:t,type:n,popup:o})}},exports.MessageProvider=()=>{var e;const{themeColor:o}=(0,l.useThemeColor)(),{T:r}=(0,u.default)(),[p,s]=(0,n.useState)(),a=(0,n.useState)(new i.Animated.Value(.6))[0],f=(0,n.useRef)(null),v=c(e=>e.message),y=c(e=>e.setMessage),j=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(v){const e=Object.assign(Object.assign({},v),{popup:v.popup?"object"==typeof v.popup?Object.assign({top:"auto"},v.popup):{top:30}:null});f.current=e,s(e),w(!0)}else f.current=null,w(!1,()=>{s(f.current),f.current&&w(!0)});return j.current&&clearTimeout(j.current),"success"!==(null==v?void 0:v.type)&&"error"!==(null==v?void 0:v.type)||(j.current=setTimeout(()=>{y()},2e3)),()=>{j.current&&clearTimeout(j.current)}},[v]);const b=a.interpolate({inputRange:[.6,1],outputRange:[0,1]}),w=(e,t)=>{i.Animated.timing(a,{toValue:e?1:.6,useNativeDriver:!0,duration:250}).start(t)},$=(null===(e=null==p?void 0:p.popup)||void 0===e?void 0:e.theme)||o;return p?(0,t.jsx)(d,{popup:null==p?void 0:p.popup,style:Object.assign({opacity:b},"object"==typeof(null==p?void 0:p.popup)&&(null==p?void 0:p.popup)||{}),children:(0,t.jsx)(g,{popup:null==p?void 0:p.popup,theme:$,style:{opacity:b,transform:[{scale:a}]},children:"loading"===(null==p?void 0:p.type)?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(x,{color:"light"===$?"#000":"#fff",size:"large"}),(0,t.jsx)(h,{theme:$,children:(null==p?void 0:p.title)||r("Processing...")})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(m,{popup:null==p?void 0:p.popup,type:null==p?void 0:p.type,theme:$,name:"error"===(null==p?void 0:p.type)?"alert-circle":"checkmark-circle"}),(0,t.jsx)(h,{popup:null==p?void 0:p.popup,theme:$,children:p.title})]})})}):null};const d=(0,o.default)(i.Animated.View)`
    position: absolute;
    left: 0;
    top: 0;
    width: ${p.Layout.window.width}px;
    height: ${p.Layout.window.height+100}px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    ${e=>e.popup?"\n     background-color: rgba(0, 0, 0, 0);\n     height: auto;\n     justify-content: flex-start;\n  ":""}
`,g=(0,o.default)(i.Animated.View)`
    background-color: #000;
    width: 280px;
    min-height: 120px;
    border-radius: 12px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    ${e=>"light"===(null==e?void 0:e.theme)?"\n      background-color: #fff;\n  ":""}
    ${e=>e.popup?"\n      flex-direction: row;\n      min-height: 20px;\n      justify-content: flex-start;\n      padding: 3px 9px;\n      border-radius: 9px;\n  ":""}
`,h=(0,o.default)(a.TextNormal)`
    color: white;
    font-size: 15px;
    margin-top: 9px;
    text-align: center;
    ${e=>"light"===e.theme?"\n      color: #000;\n  ":""}
    ${e=>e.popup?"\n      flex: 1;\n      margin-top: 0px;\n      text-align: left;\n  ":""}
`,m=(0,o.default)(r.default)`
    font-size: 50px;
    color: white;
    ${e=>"light"===e.theme&&"error"===e.type?"\n      color: #FF4A59;\n  ":""}
    ${e=>"light"===e.theme&&"success"===e.type?"\n      color: #00BF58;\n  ":""}
    ${e=>e.popup?"\n      font-size: 35px;\n      margin-right: 6px;\n  ":""}
`,x=(0,o.default)(i.ActivityIndicator)`
    color: white;
    ${e=>"light"===e.theme?"\n      color: #000;\n  ":""}
`;