@bikdotai/bik-component-library 0.0.742-beta.7 → 0.0.742-beta.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BikGiftedChat/Bubble/Bubble.js +1 -1
- package/dist/cjs/components/BikGiftedChat/Bubble/types.d.ts +13 -0
- package/dist/cjs/components/BikGiftedChat/Bubble/types.js +1 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/Day.d.ts +2 -0
- package/dist/cjs/components/BikGiftedChat/GiftedChat/Day.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/types.d.ts +60 -2
- package/dist/cjs/components/TypographyStyle.d.ts +8 -0
- package/dist/cjs/components/TypographyStyle.js +14 -13
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/list-item/themes.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/cjs/components/toaster/Toaster.d.ts +2 -0
- package/dist/cjs/components/toaster/Toaster.js +1 -1
- package/dist/cjs/components/toaster/Toaster.styled.js +1 -1
- package/dist/cjs/constants/Theme.d.ts +5 -0
- package/dist/cjs/constants/Theme.js +1 -1
- package/dist/esm/components/BikGiftedChat/Bubble/Bubble.js +1 -1
- package/dist/esm/components/BikGiftedChat/Bubble/types.d.ts +13 -0
- package/dist/esm/components/BikGiftedChat/Bubble/types.js +1 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/Day.d.ts +2 -0
- package/dist/esm/components/BikGiftedChat/GiftedChat/Day.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/types.d.ts +60 -2
- package/dist/esm/components/TypographyStyle.d.ts +8 -0
- package/dist/esm/components/TypographyStyle.js +13 -12
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/list-item/themes.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/toaster/Toaster.d.ts +2 -0
- package/dist/esm/components/toaster/Toaster.js +1 -1
- package/dist/esm/components/toaster/Toaster.styled.js +1 -1
- package/dist/esm/constants/Theme.d.ts +5 -0
- package/dist/esm/constants/Theme.js +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9",10:"#F9F3FF"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",70:"#F7F7F7",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"},bikAi:{500:"linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)",100:"linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)",50:"linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],brandVeryLight:e.brand[10],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"},white:e.grayscale.white,lightbrand:"#F3EDF9"},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100],grey:e.grayscale[70],ai:e.bikAi[500],aiLight:e.bikAi[50]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F",ai:e.bikAi[500]},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"},ai:{lightAlt:"#FEBAD2",vibrant:"#F23275"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:40,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};exports.BASE_COLORS=e,exports.COLORS=t,exports.DEFAULT_THEME=n,exports.FONTS=i;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",100:"#F3EDF9",50:"#EFE6F9",10:"#F9F3FF"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",70:"#F7F7F7",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"},bikAi:{500:"linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)",100:"linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)",50:"linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],brandVeryLight:e.brand[10],pureWhite:e.grayscale.white,brandTint:e.brand[100],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"},white:e.grayscale.white,lightbrand:"#F3EDF9"},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100],grey:e.grayscale[70],ai:e.bikAi[500],aiLight:e.bikAi[50]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F",ai:e.bikAi[500]},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"},ai:{lightAlt:"#FEBAD2",vibrant:"#F23275"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:40,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};exports.BASE_COLORS=e,exports.COLORS=t,exports.DEFAULT_THEME=n,exports.FONTS=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t,{useMemo as n,useCallback as o}from"react";import{COLORS as a}from"../../../constants/Theme.js";import{useWindowSize as l}from"../../../hooks/useWindowSize.js";import{MESSAGE_CHANNELS as s}from"../GiftedChat/types.js";import{Constants as r,isStringifiedArray as d}from"../GiftedChat/utils.js";import{GiftedChatAppType as c}from"./types.js";const g=t=>{var g,f,u,v;const{currentMessage:m,position:h,renderMessageText:b,renderTicks:y,renderTime:p,renderCustomView:j,isCustomViewBottom:T,isUnsatisfactoryMessageFn:I,messagesGroupedByAiTraceId:M,onPress:O,containerStyle:k,bubbleStyles:x,appType:C=c.Bik}=t,A=l(),w=m,G=n((()=>w.category===r.ChatActivity.Category.ACTIVITY&&w.activityType===r.ChatActivity.Type.PRIVATE_NOTE),[w.category,w.activityType]),P=n((()=>{const[e,i]=d(null==w?void 0:w.message);return e&&i&&Array.isArray(i)}),[null==w?void 0:w.message]),B=n((()=>{var e,i,t;const n={borderRadius:8,minHeight:20,margin:0,flexGrow:A?1:0},o=(null==w?void 0:w.channelId)===s.GMAIL||(null==w?void 0:w.channelName)===s.GMAIL,l=(null==w?void 0:w.channelId)===s.SMTP||(null==w?void 0:w.channelName)===s.SMTP;let r={};if("left"===h)r=C===c.Manifest?x&&"object"==typeof x.left?x.left:{}:Object.assign(Object.assign({},A||o||l?{maxWidth:"100%"}:{}),G?{background:(null===(e=null==w?void 0:w.meta)||void 0===e?void 0:e.aiUsed)?"linear-gradient(90deg, #ffe6ee 0%, #fff0e7 100%)":a.background.warning.light}:{backgroundColor:(null==w?void 0:w.isPrivateMail)?a.background.blue.light:a.surface.hovered});else if("right"===h)if(C===c.Manifest)r=x&&"object"==typeof x.right?x.right:{};else{const e=I&&I({aiTraceId:null===(i=w.eventProperties)||void 0===i?void 0:i.aiTraceId,messagesGroupedByAiTraceId:M});r=Object.assign(Object.assign({backgroundColor:"failed"===w.status||e?a.background.negative.light:a.background.brandVeryLight},G?{background:(null===(t=null==w?void 0:w.meta)||void 0===t?void 0:t.aiUsed)?"linear-gradient(90deg, #ffe6ee 0%, #fff0e7 100%)":a.background.warning.light}:{}),!A&&P?{maxWidth:500}:{})}return C===c.Manifest?Object.assign({},r):Object.assign(Object.assign({},n),r)}),[null==w?void 0:w.channelId,null==w?void 0:w.channelName,null===(g=null==w?void 0:w.meta)||void 0===g?void 0:g.aiUsed,null==w?void 0:w.status,null===(f=null==w?void 0:w.eventProperties)||void 0===f?void 0:f.aiTraceId,h,A,G,P,I,M,null==w?void 0:w.isPrivateMail,x,C]),S=o((()=>e("div",{children:[!T&&(null==j?void 0:j(t)),null==b?void 0:b(t),T&&(null==j?void 0:j(t))]})),[T,j,b,t]);return i("div",Object.assign({style:Object.assign(Object.assign({display:"flex",marginTop:C===c.Manifest?0:6,marginBottom:C===c.Manifest?0:(null===(v=null===(u=null==m?void 0:m.messageInformation)||void 0===u?void 0:u.reactions)||void 0===v?void 0:v.length)>0?24:6,flexGrow:A?1:0},C===c.Manifest?Object.assign({alignItems:"flex-end"},"right"===h?{cursor:"pointer"}:{}):{}),C!==c.Manifest||"object"!=typeof k?{}:"left"===h&&"left"in k&&k.left&&"object"==typeof k.left?k.left:"right"===h&&"right"in k&&k.right&&"object"==typeof k.right?k.right:{})},C===c.Manifest?{onClick:O}:{},{children:i("div",Object.assign({style:B},{children:e("div",{children:[i("div",Object.assign({id:m.chatActivityId||`message-${m.psqlId}`},{children:S()})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",marginLeft:"32px"}},{children:[null==p?void 0:p(t),null==y?void 0:y(m)]}))]})}))}))},f=t.memo(g);export{f as Bubble,f as default};
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IMessage, User } from '../types';
|
|
3
|
+
export declare enum GiftedChatAppType {
|
|
4
|
+
Bik = "bik",
|
|
5
|
+
Manifest = "manifest"
|
|
6
|
+
}
|
|
3
7
|
export interface BubbleProps<TMessage extends IMessage = IMessage> {
|
|
4
8
|
currentMessage: TMessage;
|
|
5
9
|
previousMessage?: TMessage;
|
|
@@ -22,4 +26,13 @@ export interface BubbleProps<TMessage extends IMessage = IMessage> {
|
|
|
22
26
|
messagesGroupedByAiTraceId?: any;
|
|
23
27
|
}) => boolean;
|
|
24
28
|
messagesGroupedByAiTraceId?: any;
|
|
29
|
+
containerStyle?: {
|
|
30
|
+
left?: React.CSSProperties;
|
|
31
|
+
right?: React.CSSProperties;
|
|
32
|
+
} | React.CSSProperties;
|
|
33
|
+
bubbleStyles?: {
|
|
34
|
+
left?: React.CSSProperties;
|
|
35
|
+
right?: React.CSSProperties;
|
|
36
|
+
} | React.CSSProperties;
|
|
37
|
+
appType?: GiftedChatAppType;
|
|
25
38
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var i;!function(i){i.Bik="bik",i.Manifest="manifest"}(i||(i={}));export{i as GiftedChatAppType};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { GiftedChatAppType } from '../Bubble/types';
|
|
2
3
|
export interface DayProps {
|
|
3
4
|
createdAt?: Date | number | string;
|
|
4
5
|
dateFormat?: string;
|
|
@@ -10,6 +11,7 @@ export interface DayProps {
|
|
|
10
11
|
lastWeek?: string;
|
|
11
12
|
sameElse?: string;
|
|
12
13
|
};
|
|
14
|
+
appType?: GiftedChatAppType;
|
|
13
15
|
}
|
|
14
16
|
export declare const Day: React.NamedExoticComponent<DayProps>;
|
|
15
17
|
export default Day;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{startOfDay as r,format as n,isSameYear as a,differenceInDays as i}from"date-fns";import o,{useMemo as s}from"react";import{COLORS as l}from"../../../constants/Theme.js";import{BodyCaption as p}from"../../TypographyStyle.js";import{GiftedChatAppType as d}from"../Bubble/types.js";const y=o=>{let{createdAt:y,dateFormat:c="D MMMM YY",dateFormatCalendar:m,appType:f=d.Bik}=o;const g=s((()=>{if(null==y)return null;let e;if("number"==typeof y)e=r(new Date(y));else if(y instanceof Date)e=r(y);else{if("string"!=typeof y)return null;e=r(new Date(y))}if(f===d.Manifest)return n(e,"MMM d, yyyy");const t=r(new Date);if(!a(t,e))return n(e,"EEEE, d MMMM yy");const o=i(t,e);return o<1?(null==m?void 0:m.sameDay)?m.sameDay.replace(/\[|\]/g,""):"Today":1===o?"Yesterday":n(e,"EEEE, d MMMM yy")}),[y,c,m,f]);return g?f===d.Manifest?e("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"center",marginTop:5,marginBottom:10}},{children:e("span",Object.assign({style:{background:"transparent",color:"#b2b2b2",fontSize:12,fontWeight:600,padding:"2px 8px"}},{children:g}))})):t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"center",margin:"12px 0px 12px 8px"}},{children:[e("div",{style:{flex:1,height:"1px",backgroundColor:l.stroke.primary}}),e("div",Object.assign({style:{border:`1px solid ${l.stroke.primary}`,borderRadius:"16px",padding:"4px 12px"}},{children:e(p,Object.assign({style:{color:l.content.secondary}},{children:g}))})),e("div",{style:{flex:1,height:"1px",backgroundColor:l.stroke.primary}})]})):null},c=o.memo(y);export{c as Day,c as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../../_virtual/_tslib.js";import{jsx as r,Fragment as t,jsxs as i}from"react/jsx-runtime";import s,{forwardRef as n,useRef as a,useMemo as o,useImperativeHandle as l,useCallback as d}from"react";import{COLORS as g}from"../../../constants/Theme.js";import{useWindowSize as c}from"../../../hooks/useWindowSize.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{Day as
|
|
1
|
+
import{__rest as e}from"../../../_virtual/_tslib.js";import{jsx as r,Fragment as t,jsxs as i}from"react/jsx-runtime";import s,{forwardRef as n,useRef as a,useMemo as o,useImperativeHandle as l,useCallback as d}from"react";import{COLORS as g}from"../../../constants/Theme.js";import{useWindowSize as c}from"../../../hooks/useWindowSize.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{GiftedChatAppType as p}from"../Bubble/types.js";import{Day as v}from"./Day.js";import{getMessagePlacement as h,shouldCenterAlign as m}from"./messageHelpers.js";import{useScrollToBottom as f,useInitialMountScroll as y,useScrollCleanup as b,useRestoreScrollPosition as j,useAutoScrollOnNewMessages as x,useResizeObserverForFirstMessage as M,useScrollHandler as T}from"./scrollHooks.js";import{MESSAGE_CHANNELS as O}from"./types.js";import{TOP_THRESHOLD as A,normalizeRef as w,isSameDay as k,Constants as _}from"./utils.js";var E=n(((n,E)=>{var S;const B=n||{},{messages:C=[],user:I,renderBubble:L,renderAvatar:R,renderDay:D,renderLoading:P,renderChatEmpty:$,listViewProps:F={},renderAvatarOnTop:U=!1,showUserAvatar:V=!1,showAvatarForEveryMessage:W=!1,inverted:G=!1,messageIdGenerator:H,topThreshold:N=A,appType:Y=p.Bik}=B,z=e(B,["messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","appType"]),X=c(),q=a(null),J=w(F.ref||E,q),K=a({isInitialMount:!0,isUserScrolling:!1,isLoadingOldMessages:!1,isAtBottom:!0,hasTriggeredEndReached:!1,lastMessagesLength:null!==(S=null==C?void 0:C.length)&&void 0!==S?S:0,previousScrollHeight:0,previousScrollTop:0,scrollTimeout:null}),Q=o((()=>C&&0!==C.length?[...C].reverse():[]),[C]),Z=f(J,K);l(E,(()=>J.current)),y(J,K,Q.length,Z),b(K),j(J,K,Q.length),x(J,K,C.length,Z),M(null==C?void 0:C[0],K,Z,H);const ee=T(K,F.onEndReached,F.onScroll,N),re=d((e=>{var r;return Boolean(e&&I&&(null===(r=e.user)||void 0===r?void 0:r._id)===I._id)}),[I]),te=d(((e,r)=>!!V&&(!!W||(!r||r.user._id!==e.user._id))),[V,W]),ie=d(((e,t,i)=>{const s=re(e)?"right":"left",n=Object.assign({currentMessage:e,previousMessage:t,nextMessage:i,position:s,user:I},z);return L?L(n):r("div",Object.assign({style:Object.assign(Object.assign({maxWidth:Y===p.Manifest?"50%":"70%",width:"fit-content"},Y===p.Manifest?{minWidth:"130px"}:{}),{padding:"8px 12px",borderRadius:Y===p.Manifest?16:4,border:"left"===s&&Y===p.Manifest?"1px solid rgb(224, 224, 224)":"none",backgroundColor:"right"===s?Y===p.Manifest?g.background.brandTint:g.background.brandLight:Y===p.Manifest?g.background.pureWhite:g.background.inactive,color:g.content.primary,wordBreak:"break-word"})},{children:r(u,{children:e.text})}))}),[re,I,L,z]),se=d(((e,r,t)=>{if(!te(e,t))return null;const i=re(e)?"right":"left";return R?R({currentMessage:e,previousMessage:r,nextMessage:t,position:i,user:I,renderAvatarOnTop:U,showUserAvatar:V,showAvatarForEveryMessage:W}):null}),[te,re,I,U,V,W,R]);return C&&0!==C.length?i("div",Object.assign({ref:J,style:Object.assign({flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column"},F.style),onScroll:ee},{children:[r("div",{style:{flex:"1 0 auto"}}),r("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:"0 0 auto"}},{children:Q.map(((e,t)=>{var n,a,o,l,d;const g=re(e)?"right":"left",c=Q[t-1],u=Q[t+1],f=!k(e,c),y=h(e,g),b=m(e),j=(null==e?void 0:e.channelId)===O.SMTP||(null==e?void 0:e.channelName)===O.SMTP,x=e.category===_.ChatActivity.Category.ACTIVITY&&e.activityType===_.ChatActivity.Type.PRIVATE_NOTE;return i(s.Fragment,{children:[f&&(D?D({createdAt:e.createdAt}):r(v,{createdAt:e.createdAt,appType:Y})),i("div",Object.assign({style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},X?{margin:"0 4px"}:{}),b?{}:{display:"flex"}),Y!==p.Manifest?X||2!==(null===(n=null==e?void 0:e.user)||void 0===n?void 0:n._id)?{marginRight:8}:{marginLeft:8}:{}),j&&!x&&X?{marginLeft:8,marginRight:8}:{}),{justifyContent:y,marginBottom:8})},{children:[!X&&"left"===g&&r("div",Object.assign({style:{margin:"0 8px"}},{children:se(e,c,u)})),r("div",Object.assign({id:`message-bubble-${null!==(a=e._id)&&void 0!==a?a:`${t}-${null!==(o=null==H?void 0:H())&&void 0!==o?o:"id"}`}`,style:Y===p.Manifest?{width:"100%"}:X&&j?{display:"flex",flexGrow:1}:{}},{children:ie(e,c,u)})),!X&&"right"===g&&r("div",Object.assign({style:{margin:"0 8px"}},{children:se(e,c,u)}))]}))]},null!==(l=e._id)&&void 0!==l?l:`${t}-${null!==(d=null==H?void 0:H())&&void 0!==d?d:"id"}`)}))}))]})):$?r(t,{children:$()}):null}));export{E as default};
|
|
@@ -1,78 +1,136 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BubbleProps } from '../Bubble/types';
|
|
2
|
+
import { BubbleProps, GiftedChatAppType } from '../Bubble/types';
|
|
3
3
|
import { IMessage, LeftRightStyle, User } from '../types';
|
|
4
4
|
export interface ListViewProps {
|
|
5
|
+
/** Custom styles for the container. */
|
|
5
6
|
style?: React.CSSProperties;
|
|
7
|
+
/** Callback when end of list is reached. */
|
|
6
8
|
onEndReached?: () => void;
|
|
9
|
+
/** Threshold for triggering end reached. */
|
|
7
10
|
onEndReachedThreshold?: number;
|
|
11
|
+
/** Scroll event handler. */
|
|
8
12
|
onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
|
|
13
|
+
/** Ref for the scrollable container. */
|
|
9
14
|
ref?: React.RefObject<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;
|
|
10
15
|
}
|
|
11
16
|
export interface AvatarProps<TMessage extends IMessage = IMessage> {
|
|
17
|
+
/** The current message for the avatar. */
|
|
12
18
|
currentMessage: TMessage;
|
|
19
|
+
/** The previous message. */
|
|
13
20
|
previousMessage?: TMessage;
|
|
21
|
+
/** The next message. */
|
|
14
22
|
nextMessage?: TMessage;
|
|
23
|
+
/** Position of the avatar ('left' or 'right'). */
|
|
15
24
|
position: 'left' | 'right';
|
|
25
|
+
/** The user object. */
|
|
16
26
|
user: User;
|
|
27
|
+
/** Whether to render avatar on top. */
|
|
17
28
|
renderAvatarOnTop?: boolean;
|
|
29
|
+
/** Whether to show user avatar. */
|
|
18
30
|
showUserAvatar?: boolean;
|
|
31
|
+
/** Show avatar for every message. */
|
|
19
32
|
showAvatarForEveryMessage?: boolean;
|
|
33
|
+
/** Custom styles for avatar image. */
|
|
20
34
|
imageStyle?: LeftRightStyle<React.CSSProperties>;
|
|
35
|
+
/** Custom styles for avatar container. */
|
|
21
36
|
containerStyle?: LeftRightStyle<React.CSSProperties>;
|
|
22
37
|
[key: string]: any;
|
|
23
38
|
}
|
|
24
39
|
export interface DayProps {
|
|
40
|
+
/** Date/time for the separator. */
|
|
25
41
|
createdAt?: Date | number | string;
|
|
42
|
+
/** Format for displaying the date. */
|
|
26
43
|
dateFormat?: string;
|
|
44
|
+
/** Calendar format options. */
|
|
27
45
|
dateFormatCalendar?: {
|
|
46
|
+
/** Format for same day. */
|
|
28
47
|
sameDay?: string;
|
|
48
|
+
/** Format for next day. */
|
|
29
49
|
nextDay?: string;
|
|
50
|
+
/** Format for next week. */
|
|
30
51
|
nextWeek?: string;
|
|
52
|
+
/** Format for last day. */
|
|
31
53
|
lastDay?: string;
|
|
54
|
+
/** Format for last week. */
|
|
32
55
|
lastWeek?: string;
|
|
56
|
+
/** Format for other days. */
|
|
33
57
|
sameElse?: string;
|
|
34
58
|
};
|
|
35
59
|
}
|
|
36
60
|
export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
|
|
61
|
+
/** Array of chat messages. */
|
|
37
62
|
messages: TMessage[];
|
|
63
|
+
/** The current user object. */
|
|
38
64
|
user: User;
|
|
65
|
+
/** Custom bubble renderer. */
|
|
39
66
|
renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode;
|
|
67
|
+
/** Custom avatar renderer. */
|
|
40
68
|
renderAvatar?: (props: AvatarProps<TMessage>) => React.ReactNode;
|
|
69
|
+
/** Custom day separator renderer. */
|
|
41
70
|
renderDay?: (props: DayProps) => React.ReactNode;
|
|
71
|
+
/** Custom loading renderer. */
|
|
42
72
|
renderLoading?: () => React.ReactNode;
|
|
73
|
+
/** Custom empty chat renderer. */
|
|
43
74
|
renderChatEmpty?: () => React.ReactNode;
|
|
75
|
+
/** Props for the scrollable list view. */
|
|
44
76
|
listViewProps?: ListViewProps;
|
|
77
|
+
/** Scroll threshold for loading old messages. */
|
|
45
78
|
topThreshold?: number;
|
|
79
|
+
/** Whether to render avatar on top. */
|
|
46
80
|
renderAvatarOnTop?: boolean;
|
|
81
|
+
/** Whether to show user avatar. */
|
|
47
82
|
showUserAvatar?: boolean;
|
|
83
|
+
/** Show avatar for every message. */
|
|
48
84
|
showAvatarForEveryMessage?: boolean;
|
|
85
|
+
/** Whether to invert the message list. */
|
|
49
86
|
inverted?: boolean;
|
|
87
|
+
/** Handler for long press on message. */
|
|
50
88
|
onLongPress?: (context?: any, message?: TMessage) => void;
|
|
89
|
+
/** Handler for press on message. */
|
|
51
90
|
onPress?: (context?: any, message?: TMessage) => void;
|
|
91
|
+
/** Function to generate message IDs. */
|
|
52
92
|
messageIdGenerator?: (message?: TMessage) => string;
|
|
53
|
-
|
|
93
|
+
appType?: GiftedChatAppType;
|
|
54
94
|
[key: string]: any;
|
|
55
95
|
}
|
|
56
96
|
export interface ScrollState {
|
|
97
|
+
/** Is initial mount of the component. */
|
|
57
98
|
isInitialMount: boolean;
|
|
99
|
+
/** Is user currently scrolling. */
|
|
58
100
|
isUserScrolling: boolean;
|
|
101
|
+
/** Is loading old messages. */
|
|
59
102
|
isLoadingOldMessages: boolean;
|
|
103
|
+
/** Is scroll at bottom. */
|
|
60
104
|
isAtBottom: boolean;
|
|
105
|
+
/** Has end reached been triggered. */
|
|
61
106
|
hasTriggeredEndReached: boolean;
|
|
107
|
+
/** Last known messages length. */
|
|
62
108
|
lastMessagesLength: number;
|
|
109
|
+
/** Previous scroll height. */
|
|
63
110
|
previousScrollHeight: number;
|
|
111
|
+
/** Previous scroll top position. */
|
|
64
112
|
previousScrollTop: number;
|
|
113
|
+
/** Debounce timer for scroll events. */
|
|
65
114
|
scrollTimeout: number | null;
|
|
66
115
|
}
|
|
67
116
|
export declare enum CHAT_ACTIVITY_TYPES_FOR_CALL_BUBBLE {
|
|
117
|
+
/** User is calling another user. */
|
|
68
118
|
CALLING_CALL = "CALLING_CALL",
|
|
119
|
+
/** Call is ringing for the recipient. */
|
|
69
120
|
RINGING_CALL = "RINGING_CALL",
|
|
121
|
+
/** Call is ongoing between users. */
|
|
70
122
|
ONGOING_CALL = "ONGOING_CALL",
|
|
123
|
+
/** Call has been completed. */
|
|
71
124
|
COMPLETED_CALL = "COMPLETED_CALL",
|
|
125
|
+
/** Call was missed by the recipient. */
|
|
72
126
|
MISSED_CALL = "MISSED_CALL",
|
|
127
|
+
/** Callback was requested. */
|
|
73
128
|
REQUESTED_CALLBACK = "REQUESTED_CALLBACK",
|
|
129
|
+
/** Call was declined by the recipient. */
|
|
74
130
|
DECLINED_CALL = "DECLINED_CALL",
|
|
131
|
+
/** Call was disconnected. */
|
|
75
132
|
DISCONNECTED_CALL = "DISCONNECTED_CALL",
|
|
133
|
+
/** Call was unanswered. */
|
|
76
134
|
UNANSWERED_CALL = "UNANSWERED_CALL"
|
|
77
135
|
}
|
|
78
136
|
export declare const enum MESSAGE_CHANNELS {
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
interface customStyles {
|
|
2
|
+
fontWeight?: number;
|
|
3
|
+
fontSize?: number;
|
|
4
|
+
width?: number;
|
|
5
|
+
}
|
|
1
6
|
export declare const TitleXlarge: import("styled-components").StyledComponent<"div", any, {
|
|
2
7
|
numberOfLines?: number | undefined;
|
|
3
8
|
color?: string | undefined;
|
|
@@ -37,6 +42,7 @@ export declare const BodyPrimary: import("styled-components").StyledComponent<"d
|
|
|
37
42
|
export declare const BodySecondary: import("styled-components").StyledComponent<"div", any, {
|
|
38
43
|
numberOfLines?: number | undefined;
|
|
39
44
|
color?: string | undefined;
|
|
45
|
+
customStyles?: customStyles | undefined;
|
|
40
46
|
}, never>;
|
|
41
47
|
export declare const ButtonRegularAI: import("styled-components").StyledComponent<"div", any, {
|
|
42
48
|
numberOfLines?: number | undefined;
|
|
@@ -50,6 +56,7 @@ export declare const BodyPrimaryLink: import("styled-components").StyledComponen
|
|
|
50
56
|
export declare const BodySecondaryLink: import("styled-components").StyledComponent<"div", any, {
|
|
51
57
|
numberOfLines?: number | undefined;
|
|
52
58
|
color?: string | undefined;
|
|
59
|
+
customStyles?: customStyles | undefined;
|
|
53
60
|
}, never>;
|
|
54
61
|
export declare const BodyCaption: import("styled-components").StyledComponent<"div", any, {
|
|
55
62
|
numberOfLines?: number | undefined;
|
|
@@ -111,3 +118,4 @@ export declare const Tiny: import("styled-components").StyledComponent<"div", an
|
|
|
111
118
|
numberOfLines?: number | undefined;
|
|
112
119
|
color?: string | undefined;
|
|
113
120
|
}, never>;
|
|
121
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
|
|
1
|
+
import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>void 0===e||null==e?"":e+"px",n=e.div`
|
|
2
2
|
font-family: Inter;
|
|
3
3
|
color: ${e=>e.color||i.text.primary};
|
|
4
4
|
font-weight: ${t.titleXLarge.fontWeight};
|
|
@@ -90,9 +90,10 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
90
90
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
91
91
|
`,g=e.div`
|
|
92
92
|
font-family: Inter;
|
|
93
|
+
width: ${e=>{var i;return o(null===(i=e.customStyles)||void 0===i?void 0:i.width)}};
|
|
93
94
|
color: ${e=>e.color||i.text.primary};
|
|
94
|
-
font-weight: ${t.bodySecondary.fontWeight};
|
|
95
|
-
font-size: ${o(t.bodySecondary.fontSize)};
|
|
95
|
+
font-weight: ${e=>{var i;return(null===(i=e.customStyles)||void 0===i?void 0:i.fontWeight)||t.bodySecondary.fontWeight}};
|
|
96
|
+
font-size: ${e=>{var i;return o(null===(i=e.customStyles)||void 0===i?void 0:i.fontSize)||o(t.bodySecondary.fontSize)}};
|
|
96
97
|
line-height: ${o(t.bodySecondary.lineHeight)};
|
|
97
98
|
-webkit-box-orient: vertical;
|
|
98
99
|
overflow: hidden;
|
|
@@ -124,7 +125,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
124
125
|
color: ${i.content.brand};
|
|
125
126
|
text-decoration-color: ${i.content.brand};
|
|
126
127
|
cursor: pointer;
|
|
127
|
-
`,
|
|
128
|
+
`,y=e.div`
|
|
128
129
|
font-family: Inter;
|
|
129
130
|
color: ${e=>e.color||i.text.primary};
|
|
130
131
|
font-weight: ${t.caption.fontWeight};
|
|
@@ -136,7 +137,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
136
137
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
137
138
|
word-break: break-word;
|
|
138
139
|
overflow-wrap: break-word;
|
|
139
|
-
`,
|
|
140
|
+
`,p=e.div`
|
|
140
141
|
font-family: Inter;
|
|
141
142
|
color: ${e=>e.color||i.text.primary};
|
|
142
143
|
font-weight: ${t.caption.fontWeight};
|
|
@@ -161,7 +162,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
161
162
|
overflow: hidden;
|
|
162
163
|
display: -webkit-box;
|
|
163
164
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
164
|
-
`,
|
|
165
|
+
`,s=e.div`
|
|
165
166
|
color: ${e=>e.color||i.text.primary};
|
|
166
167
|
font-weight: ${t.tiny.fontWeight};
|
|
167
168
|
font-size: ${o(t.tiny.fontSize)};
|
|
@@ -176,7 +177,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
176
177
|
-webkit-text-fill-color: transparent;
|
|
177
178
|
background-clip: text;
|
|
178
179
|
text-fill-color: transparent;
|
|
179
|
-
`,
|
|
180
|
+
`,k=e.div`
|
|
180
181
|
font-family: Inter;
|
|
181
182
|
color: ${e=>e.color||i.text.primary};
|
|
182
183
|
font-weight: ${t.buttonLarge.fontWeight};
|
|
@@ -222,7 +223,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
222
223
|
overflow: hidden;
|
|
223
224
|
display: -webkit-box;
|
|
224
225
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
225
|
-
`,
|
|
226
|
+
`,S=e.div`
|
|
226
227
|
font-family: Inter;
|
|
227
228
|
color: ${e=>e.color||i.text.primary};
|
|
228
229
|
font-weight: ${t.bodyRegular.fontWeight};
|
|
@@ -232,7 +233,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
232
233
|
overflow: hidden;
|
|
233
234
|
display: -webkit-box;
|
|
234
235
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
235
|
-
`,
|
|
236
|
+
`,L=e.div`
|
|
236
237
|
font-family: Inter;
|
|
237
238
|
color: ${i.text.primary};
|
|
238
239
|
font-weight: ${t.caption.fontWeight};
|
|
@@ -252,7 +253,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
252
253
|
overflow: hidden;
|
|
253
254
|
display: -webkit-box;
|
|
254
255
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
255
|
-
`,
|
|
256
|
+
`,W=e.div`
|
|
256
257
|
font-family: Inter;
|
|
257
258
|
color: ${i.text.primary};
|
|
258
259
|
font-weight: ${t.title4.fontWeight};
|
|
@@ -262,7 +263,7 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
262
263
|
overflow: hidden;
|
|
263
264
|
display: -webkit-box;
|
|
264
265
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
265
|
-
`,
|
|
266
|
+
`,O=e.div`
|
|
266
267
|
font-family: Inter;
|
|
267
268
|
color: ${i.text.primary};
|
|
268
269
|
font-weight: ${t.bodySmall.fontWeight};
|
|
@@ -292,4 +293,4 @@ import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants
|
|
|
292
293
|
overflow: hidden;
|
|
293
294
|
display: -webkit-box;
|
|
294
295
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
295
|
-
`;export{
|
|
296
|
+
`;export{p as AiBodyCaption,s as AiBodyTiny,y as BodyCaption,c as BodyLarge,h as BodyPrimary,$ as BodyPrimaryLink,S as BodyRegular,g as BodySecondary,m as BodySecondaryLink,O as BodySmall,x as BodyTiny,k as ButtonLarge,v as ButtonLargeAI,u as ButtonRegular,w as ButtonRegularAI,L as Caption,I as CaptionBold,d as Display,a as SmallRegular,z as SubHeading,H as TextPlaceholder,R as Tiny,W as TitleFour,l as TitleLarge,r as TitleMedium,f as TitleRegular,b as TitleSmall,n as TitleXlarge};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"react";import l from"react-slick";import{Container as t,CarouselSlickContainer as s}from"./CarouselPreview.style.js";import
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"react";import l from"react-slick";import{Container as t,CarouselSlickContainer as s}from"./CarouselPreview.style.js";import i from"./CarouselPreviewCard.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as n,isRCSChannel as d}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as c}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as u,CustomCarouselLeftArrow as m}from"./CustomCarouselArrows.js";const p=o.forwardRef((o=>{let{channel:l,template:s,isPreview:u,removeBottomBorder:m,borderRadius:p,showArrows:w,hideBorder:h,showSampleValues:C}=o;var f,x;const{sliderRef:P,selectedCarouselIndex:b,cardCount:j,setIsCarouselHovered:g,cardIndex:I,showVariablePicker:R}=a(),S=-1==I?n(l):I,V=null===(x=null===(f=null==s?void 0:s.components)||void 0===f?void 0:f[S])||void 0===x?void 0:x.cards,A=(null==V?void 0:V.length)?e(v,{cards:V,cardCount:null!=j?j:0,selectedCarouselIndex:null!=b?b:-1,sliderRef:P,isPreview:u,showArrows:w,channel:l,template:s,setIsCarouselHovered:g,showSampleValues:!!C,showVariablePicker:R}):null;return d(l)?e(c,Object.assign({borderRadius:p},{children:A})):r(t,Object.assign({removeBottomBorder:m,borderRadius:p,hideBorder:h},{children:[e(i,{channel:l,currentTemplate:s,carouselCardIndex:-1,isPreview:u,width:"77%"}),A]}))})),v=r=>{let{cards:o,cardCount:t,selectedCarouselIndex:a,sliderRef:n,isPreview:d,showArrows:c,channel:p,template:v,setIsCarouselHovered:w,showSampleValues:h,showVariablePicker:C}=r;return e(s,Object.assign({cardCount:t,selectedCarouselIndex:a,onMouseEnter:()=>!C&&(null==w?void 0:w(!0)),onMouseLeave:()=>!C&&(null==w?void 0:w(!1))},{children:e(l,Object.assign({ref:n,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e(u,{isPreview:null!=d&&d}),prevArrow:e(m,{isPreview:null!=d&&d})},{children:null==o?void 0:o.map(((r,o)=>{var l,t;const s={components:r.components,mapping:null===(t=null===(l=null==v?void 0:v.mapping)||void 0===l?void 0:l.cards)||void 0===t?void 0:t[o],content:null==v?void 0:v.content,templateType:null==v?void 0:v.templateType};return e(i,{channel:p,currentTemplate:s,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{p as CarouselPreview};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useCallback as s,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as l}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:a,isMultiSelect:d,showDescription:p,onSelect:f,version:m,onInfiniteScroll:g,onDropdownItemClick:h,useDefaultCursor:b,focusedIndex:I=-1}=r;const
|
|
1
|
+
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useCallback as s,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as l}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:a,isMultiSelect:d,showDescription:p,onSelect:f,version:m,onInfiniteScroll:g,onDropdownItemClick:h,useDefaultCursor:b,focusedIndex:I=-1}=r;const v=o(null),D=o(null),j=s((()=>{v.current&&v.current.disconnect(),v.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==g||g())})),D.current&&v.current.observe(D.current)}),[g]);i((()=>(j(),()=>{v.current&&v.current.disconnect()})),[j,a]);const w=new Map;let S=-1;return a.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(S++,w.set(e,S))}));else{const n=e;n.disabled||(S++,w.set(n,S))}})),e(n,{children:a.map(((n,r)=>{const o=r===a.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===m?2:0}},{children:[t(l,Object.assign({version:m},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=w.get(n),i=o===I&&!n.disabled;return e(c,{version:m,last:t===s.options.length-1,onSelect:f,showDescription:p,onDropdownItemClick:h,isMultiSelect:d,option:n,useDefaultCursor:b,isFocused:i,dataIndex:o,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:D}):null]}),r)}const s=n,i=w.get(s),g=i===I&&!s.disabled;return t("div",{children:[e(c,{version:m,last:o,onSelect:f,showDescription:p,onDropdownItemClick:h,isMultiSelect:d,option:s,useDefaultCursor:b,isFocused:g,dataIndex:i,ref:e=>{u&&"object"==typeof u&&u.current&&e&&(u.current[r]=e)}},s.value),o?e("span",{ref:D}):null]},r)}))})}));export{u as MenuList};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { Variant } from './ListItem';
|
|
2
2
|
export declare function getColor(variant: Variant): string;
|
|
3
|
-
export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import("@emotion/
|
|
3
|
+
export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import("@emotion/react").SerializedStyles;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import i from"../../../assets/icons/arrow_back.svg.js";import n from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import a from"../../../assets/icons/PlusIcon.js";import{cloneDeep as d}from"lodash";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as b}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as j}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{isRCSChannel as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import i from"../../../assets/icons/arrow_back.svg.js";import n from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import a from"../../../assets/icons/PlusIcon.js";import{cloneDeep as d}from"lodash";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as b}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as j}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{isRCSChannel as x}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleMedium as C,TitleRegular as I,BodySecondary as k,BodyCaption as w}from"../../TypographyStyle.js";const O=O=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}=O;var A,M,V,D,F,R,W,$;const{selectedCarouselIndex:q,setTemplate:N,pickerConf:_,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:te,sliderRef:le}=g(),[oe,ie]=s(x(null==P?void 0:P.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(M=null===(A=null==P?void 0:P.mapping)||void 0===A?void 0:A.body)||void 0===M?void 0:M.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[ne,re]=s(!1),[ae,de]=s(!1),se=q===(null!=H?H:-1)-1,ce=(null!=q?q:-1)<1;c((()=>{var e,t,l,o;ie(x(null==P?void 0:P.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(l=null==P?void 0:P.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[q]),c((()=>{te(!1)}),[q]);const ue=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return c((()=>{-1===q&&x(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[q,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!x(null==P?void 0:P.channel)&&null!=q&&q>=0&&!!(null===(R=null===(F=null==P?void 0:P.mapping)||void 0===F?void 0:F.body)||void 0===R?void 0:R.length)&&t(p,{Icon:i,onClick:()=>{null==Z||Z(-1)}}),t(C,Object.assign({style:{marginLeft:10}},{children:oe}))]})),z&&(null!==(W=null==K?void 0:K.length)&&void 0!==W?W:0)>0&&null!=q&&q>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(y,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>ue)),te(!0)):re(!ne)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const t=d(Object.assign({},P));t&&(U&&U.length>0?null==U||U.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=U[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==N||N(t)),null==J||J([]),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&t(u,{disabled:(null!==($=null==K?void 0:K.length)&&void 0!==$?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{de(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=q&&q>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(I,{children:"Product(s)"}),t(k,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${b.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(a,{width:18,height:18,color:b.content.secondary})})),onClick:e=>{re(!0)}}),G===j.CHATBOT&&e(l,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8,flex:1}}),t(w,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8,flex:1}})]})),t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${b.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(a,{width:18,height:18,color:b.content.secondary})})),onClick:e=>{ee((()=>ue)),te(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(h,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=q?q:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:b.surface.hovered,alignItems:"center"}},{children:[t(p,{Icon:n,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:b.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickPrev(),(null!=q?q:-1)<1||null==Z||Z((e=>e-1))}}),t(I,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:b.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${H}`})),t(p,{Icon:r,width:8,height:14,disabled:se,svgStyle:se?{}:{color:b.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickNext(),(null!=q?q:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(f,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==N||N(e)},showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}),ne&&_&&t(m,{zIndex:200,startupScreen:ae?v.RearrangeProducts:v.Collections,rearrangeEnabled:!0,storeId:_.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=K?K:[]),collectionFetcher:_.fetchCollections,productFetcher:_.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,a;de(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const d=e[t].products;if(void 0!==d&&Object.keys(d).length)for(const e of Object.keys(d)){const c=d[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=d[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=d[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(a=null===(r=d[e])||void 0===r?void 0:r.image)&&void 0!==a?a:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=s.map((e=>e.image)),p=d(Object.assign({},P));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==N||N(p)),null==J||J(c),re(!1)},searchInCollectionFetcher:_.searchInCollection,searchFetcher:_.searchProducts,visible:ne,onClose:()=>{re(!1)},exactLimit:null!=H?H:1,appType:_.appType||o.BIK})]}))};export{O as default};
|
|
@@ -11,6 +11,8 @@ export type ToasterProps = {
|
|
|
11
11
|
subText?: string;
|
|
12
12
|
position?: ToastPosition;
|
|
13
13
|
type?: 'info' | 'success' | 'error' | 'default' | 'warning';
|
|
14
|
+
duration?: number;
|
|
15
|
+
blocking?: boolean;
|
|
14
16
|
closeOnClick?: boolean;
|
|
15
17
|
hideProgressBar?: boolean;
|
|
16
18
|
autoClose?: number | false | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/alert_triangle.svg.js";import s from"../../assets/icons/check.svg.js";import i from"../../assets/icons/cross.svg.js";import
|
|
1
|
+
import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/alert_triangle.svg.js";import s from"../../assets/icons/check.svg.js";import i from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/errorInfo.svg.js";import l from"../../assets/icons/info.svg.js";import c,{useRef as d,useState as a,useEffect as u,useContext as p}from"react";import h from"react-dom";import{cssTransition as g,toast as y,ToastContainer as v}from"react-toastify";import{Button as x}from"../button/Button.js";import{ToasterStyled as b}from"./Toaster.styled.js";import{TitleSmall as f,BodySecondary as T,BodyCaption as B}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const w=t=>e(T,Object.assign({color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25}},{children:[t.duration,"s"]})),C=o=>{const e="default"===o.type?m.content.primary:"success"===o.type?m.content.positive:"error"===o.type?m.content.negative:"warning"===o.type?m.content.warning:m.content.brand,{timerValue:n}=p(k),s=(!o.blocking||-1!==n)&&(o.blocking&&n>0);return t("div",Object.assign({tabIndex:s?-1:0,role:"button",style:{width:n>0?25:20,display:"flex",cursor:s?"not-allowed":"pointer",alignSelf:""+(o.alignTop?"flex-start":"center"),opacity:s?.5:1},onClick:()=>{!s&&o.closeToast&&o.closeToast()},onKeyDown:t=>{"Enter"===t.key&&!s&&o.closeToast&&o.closeToast()}},{children:n>0?t(w,{duration:n}):t(i,{height:20,width:20,color:e})}))},I=n=>{var s,i;const r=m.content.placeholder,{toasterText:l}=p(k);return t(o,{children:e("div",Object.assign({style:{display:"flex",flexGrow:1}},{children:[t("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center"}},{children:e("div",{children:[n.subText?t(f,Object.assign({color:"inherit"},{children:null!==(s=n.toastText)&&void 0!==s?s:l})):t(T,Object.assign({color:"inherit"},{children:null!==(i=n.toastText)&&void 0!==i?i:l})),n.subText&&t("div",Object.assign({style:{marginTop:2}},{children:t(B,Object.assign({color:m.content.secondary},{children:n.subText}))}))]})})),n.showButton&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[n.showSecondButton?"showSecondButton":"showButton"]}},{children:t(x,{buttonText:n.buttonText,buttonType:"tertiaryGray",color:m.content.secondary,onClick:n.onButtonClick})})),n.showSecondButton&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t(x,{buttonText:n.secondButtonText,buttonType:"tertiaryGray",color:m.content.secondary,onClick:n.onSecondButtonClick})})),n.showButton||n.showSecondButton?t("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${r}`,borderRadius:1}}):null]}))})},j=o=>{const e=d(o.toastId||"default-toast"),[i,c]=a(o.text),[p,x]=a(o.duration||-1),f=g({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),T="default"===o.type?null:"success"===o.type?t(s,{width:20,height:20,color:m.content.positive}):"error"===o.type?t(r,{width:20,height:20,color:m.content.negative}):"warning"===o.type?t(n,{width:20,height:20,color:m.content.warning}):t(l,{width:20,height:20,color:m.content.brand});u((()=>{e.current&&e.current===o.toastId?(c(o.text),y.update(e.current,{autoClose:o.autoClose})):e.current&&e.current!==o.toastId&&B(o.text)}),[o.toastId,o.text]),u((()=>{if(!o.duration)return;x(o.duration);const t=setInterval((()=>{x((o=>{const e=o-1;return e<=0?(clearInterval(t),-1):e}))}),1e3);return()=>clearInterval(t)}),[o.duration,o.toastId]);const B=n=>{var s,i,r,l,c,d,a,u,p,h,g,v,x,b,B,m;void 0!==o.hideLeftIcon||o.leftIcon?y(t(I,{toastText:n,type:o.type||"info",buttonText:null===(s=o.buttonProps)||void 0===s?void 0:s.buttonText,secondButtonText:null===(i=o.secondButtonProps)||void 0===i?void 0:i.buttonText,showButton:null===(r=o.buttonProps)||void 0===r?void 0:r.showButton,showSecondButton:null===(l=o.secondButtonProps)||void 0===l?void 0:l.showButton,onButtonClick:null===(c=o.buttonProps)||void 0===c?void 0:c.onButtonClick,onSecondButtonClick:null===(d=o.secondButtonProps)||void 0===d?void 0:d.onButtonClick,subText:o.subText}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:!0!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:"default"!==o.type&&t("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:T}))),type:o.type,closeButton:t(C,{type:o.type||"default",alignTop:!(!o.subText||(null===(a=o.buttonProps)||void 0===a?void 0:a.showButton)||(null===(u=o.secondButtonProps)||void 0===u?void 0:u.showButton)),blocking:o.blocking}),toastId:o.toastId||"default-toast",transition:f}):e.current=y(t(I,{toastText:n,type:o.type||"info",buttonText:null===(p=o.buttonProps)||void 0===p?void 0:p.buttonText,secondButtonText:null===(h=o.secondButtonProps)||void 0===h?void 0:h.buttonText,showButton:null===(g=o.buttonProps)||void 0===g?void 0:g.showButton,showSecondButton:null===(v=o.secondButtonProps)||void 0===v?void 0:v.showButton,onButtonClick:null===(x=o.buttonProps)||void 0===x?void 0:x.onButtonClick,onSecondButtonClick:null===(b=o.secondButtonProps)||void 0===b?void 0:b.onButtonClick,subText:o.subText}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,icon:"default"!==o.type&&t("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:T})),closeButton:t(C,{type:o.type||"default",alignTop:!(!o.subText||(null===(B=o.buttonProps)||void 0===B?void 0:B.showButton)||(null===(m=o.secondButtonProps)||void 0===m?void 0:m.showButton)),blocking:o.blocking}),toastId:o.toastId||"default-toast",transition:f})};return u((()=>{B()}),[]),h.createPortal(t(b,Object.assign({width:o.width,height:o.height,zIndex:o.zIndex,isSubTextIncluded:!!o.subText,type:o.type},{children:t(k.Provider,Object.assign({value:{toasterText:i,timerValue:p}},{children:t(v,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})}))})),document.body)},k=c.createContext({toasterText:"",timerValue:-1});export{j as Toaster};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import c from"@emotion/styled/base";import{COLORS as t}from"../../constants/Theme.js";import{ComponentZindex as
|
|
1
|
+
import c from"@emotion/styled/base";import{COLORS as t}from"../../constants/Theme.js";import{ComponentZindex as d}from"../../constants/zindex.js";const b=c("div","production"===process.env.NODE_ENV?{target:"e1tdeuzc0"}:{target:"e1tdeuzc0",label:"ToasterStyled"})("--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-text-color-success:",t.content.primary,";--toastify-text-color-error:",t.content.primary,";--toastify-text-color-warning:",t.content.primary,";--toastify-text-color-info:",t.content.primary,";--toastify-color-info:",t.background.brandLight,";--toastify-color-success:",t.background.positive.light,";--toastify-color-error:",t.background.negative.light,";--toastify-color-warning:",t.background.warning.light,";--toastify-text-color-light:",t.content.primary,";--toastify-toast-width:fit-content;--toastify-toast-min-height:",(c=>c.height||(c.isSubTextIncluded?"70px":"56px")),";--toastify-toast-max-height:",(c=>c.height||"fit-content"),";font-family:inherit;z-index:",(c=>c.zIndex||d.TOASTER),";.custom-position{position:relative;}.Toastify__toast-container{padding:0;}.Toastify__toast--success{border:1px solid ",t.stroke.positive.lightAlt,";}.Toastify__toast--info{border:1px solid ",t.stroke.brandLightAlt,";}.Toastify__toast--default{border:1px solid ",t.stroke.primary,";}.Toastify__toast--error{border:1px solid ",t.stroke.negative.lightAlt,";}.Toastify__toast--warning{border:1px solid ",t.stroke.warning.lightAlt,";}.Toastify__toast{padding:",(c=>c.isSubTextIncluded?"16px":"12px"),";max-width:",(c=>c.width),";border-radius:8px;}.Toastify__progress-bar{height:4px;}.Toastify__close-button{display:block;margin:auto;}.Toastify__toast-icon{align-self:center;margin-inline-end:12px;height:",(c=>c.isSubTextIncluded?"38px":"20px"),";}.Toastify__toast-body{padding:0;}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default{background:",t.content.brand,";}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info{background:",t.content.brand,";}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning{background:",t.content.warning,";}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success{background:",t.content.positive,";}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error{background:",t.content.negative,";}.Toastify__toast-body>div:last-child{display:flex;}.Toastify__slide-enter{animation:slideIn 1s ease forwards,bounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;}.Toastify__slide-exit{animation:slideOut 0.5s ease-in-out forwards;}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateX(-20px);}60%{transform:translateX(20px);}}@keyframes slideIn{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes slideOut{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvYXN0ZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0MiLCJmaWxlIjoiVG9hc3Rlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmltcG9ydCB7IENvbXBvbmVudFppbmRleCB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvemluZGV4XCI7XHJcbmV4cG9ydCBjb25zdCBUb2FzdGVyU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdC0tdG9hc3RpZnktY29sb3ItbGlnaHQ6ICNmZmY7XG5cdC0tdG9hc3RpZnktY29sb3ItZGFyazogIzEyMTIxMjtcblx0LS10b2FzdGlmeS10ZXh0LWNvbG9yLXN1Y2Nlc3M6ICR7Q09MT1JTLmNvbnRlbnQucHJpbWFyeX07XG5cdC0tdG9hc3RpZnktdGV4dC1jb2xvci1lcnJvcjogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblx0LS10b2FzdGlmeS10ZXh0LWNvbG9yLXdhcm5pbmc6ICR7Q09MT1JTLmNvbnRlbnQucHJpbWFyeX07XG5cdC0tdG9hc3RpZnktdGV4dC1jb2xvci1pbmZvOiAke0NPTE9SUy5jb250ZW50LnByaW1hcnl9O1xuXHQtLXRvYXN0aWZ5LWNvbG9yLWluZm86ICR7Q09MT1JTLmJhY2tncm91bmQuYnJhbmRMaWdodH07XG5cdC0tdG9hc3RpZnktY29sb3Itc3VjY2VzczogJHtDT0xPUlMuYmFja2dyb3VuZC5wb3NpdGl2ZS5saWdodH07XG5cdC0tdG9hc3RpZnktY29sb3ItZXJyb3I6ICR7Q09MT1JTLmJhY2tncm91bmQubmVnYXRpdmUubGlnaHR9O1xuXHQtLXRvYXN0aWZ5LWNvbG9yLXdhcm5pbmc6ICR7Q09MT1JTLmJhY2tncm91bmQud2FybmluZy5saWdodH07XG5cdC0tdG9hc3RpZnktdGV4dC1jb2xvci1saWdodDogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblx0LS10b2FzdGlmeS10b2FzdC13aWR0aDogZml0LWNvbnRlbnQ7XG5cdC0tdG9hc3RpZnktdG9hc3QtbWluLWhlaWdodDogJHsocHJvcHMpID0+IHByb3BzLmhlaWdodCB8fCAocHJvcHMuaXNTdWJUZXh0SW5jbHVkZWQgPyAnNzBweCcgOiAnNTZweCcpfTtcblx0LS10b2FzdGlmeS10b2FzdC1tYXgtaGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVpZ2h0IHx8ICdmaXQtY29udGVudCd9O1xuXHRmb250LWZhbWlseTogaW5oZXJpdDtcblx0ei1pbmRleDogJHsocHJvcHMpID0+IHByb3BzLnpJbmRleCB8fCBDb21wb25lbnRaaW5kZXguVE9BU1RFUn07XG5cblx0LmN1c3RvbS1wb3NpdGlvbiB7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR9XG5cdC5Ub2FzdGlmeV9fdG9hc3QtY29udGFpbmVyIHtcblx0XHRwYWRkaW5nOiAwO1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC0tc3VjY2VzcyB7XG5cdFx0Ym9yZGVyOiAxcHggc29saWQgJHtDT0xPUlMuc3Ryb2tlLnBvc2l0aXZlLmxpZ2h0QWx0fTtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fdG9hc3QtLWluZm8ge1xuXHRcdGJvcmRlcjogMXB4IHNvbGlkICR7Q09MT1JTLnN0cm9rZS5icmFuZExpZ2h0QWx0fTtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fdG9hc3QtLWRlZmF1bHQge1xuXHRcdGJvcmRlcjogMXB4IHNvbGlkICR7Q09MT1JTLnN0cm9rZS5wcmltYXJ5fTtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fdG9hc3QtLWVycm9yIHtcblx0XHRib3JkZXI6IDFweCBzb2xpZCAke0NPTE9SUy5zdHJva2UubmVnYXRpdmUubGlnaHRBbHR9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC0td2FybmluZyB7XG5cdFx0Ym9yZGVyOiAxcHggc29saWQgJHtDT0xPUlMuc3Ryb2tlLndhcm5pbmcubGlnaHRBbHR9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdCB7XG5cdFx0cGFkZGluZzogJHsocHJvcHMpID0+IChwcm9wcy5pc1N1YlRleHRJbmNsdWRlZCA/ICcxNnB4JyA6ICcxMnB4Jyl9O1xuXHRcdG1heC13aWR0aDogJHsocHJvcHMpID0+IHByb3BzLndpZHRofTtcblx0XHRib3JkZXItcmFkaXVzOiA4cHg7XG5cdH1cblxuXHQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhciB7XG5cdFx0aGVpZ2h0OiA0cHg7XG5cdH1cblxuXHQuVG9hc3RpZnlfX2Nsb3NlLWJ1dHRvbiB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiBhdXRvO1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1pY29uIHtcblx0XHRhbGlnbi1zZWxmOiBjZW50ZXI7XG5cdFx0bWFyZ2luLWlubGluZS1lbmQ6IDEycHg7XG5cdFx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLmlzU3ViVGV4dEluY2x1ZGVkID8gJzM4cHgnIDogJzIwcHgnKX07XG5cdH1cblxuXHQuVG9hc3RpZnlfX3RvYXN0LWJvZHkge1xuXHRcdHBhZGRpbmc6IDA7XG5cdH1cblxuXHQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhci10aGVtZS0tY29sb3JlZC5Ub2FzdGlmeV9fcHJvZ3Jlc3MtYmFyLS1kZWZhdWx0IHtcblx0XHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5jb250ZW50LmJyYW5kfTtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fcHJvZ3Jlc3MtYmFyLXRoZW1lLS1jb2xvcmVkLlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItLWluZm8ge1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItdGhlbWUtLWNvbG9yZWQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhci0td2FybmluZyB7XG5cdFx0YmFja2dyb3VuZDogJHtDT0xPUlMuY29udGVudC53YXJuaW5nfTtcblx0fVxuXG5cdC5Ub2FzdGlmeV9fcHJvZ3Jlc3MtYmFyLXRoZW1lLS1jb2xvcmVkLlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItLXN1Y2Nlc3Mge1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmNvbnRlbnQucG9zaXRpdmV9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X19wcm9ncmVzcy1iYXItdGhlbWUtLWNvbG9yZWQuVG9hc3RpZnlfX3Byb2dyZXNzLWJhci0tZXJyb3Ige1xuXHRcdGJhY2tncm91bmQ6ICR7Q09MT1JTLmNvbnRlbnQubmVnYXRpdmV9O1xuXHR9XG5cblx0LlRvYXN0aWZ5X190b2FzdC1ib2R5ID4gZGl2Omxhc3QtY2hpbGQge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdH1cblxuXHQuVG9hc3RpZnlfX3NsaWRlLWVudGVyIHtcblx0XHRhbmltYXRpb246IHNsaWRlSW4gMXMgZWFzZSBmb3J3YXJkcyxcblx0XHRcdGJvdW5jZSBjdWJpYy1iZXppZXIoMC42OCwgLTAuNTUsIDAuMjcsIDEuNTUpIDAuNXMgYm90aDtcblx0fVxuXHQuVG9hc3RpZnlfX3NsaWRlLWV4aXQge1xuXHRcdGFuaW1hdGlvbjogc2xpZGVPdXQgMC41cyBlYXNlLWluLW91dCBmb3J3YXJkcztcblx0fVxuXHRAa2V5ZnJhbWVzIGJvdW5jZSB7XG5cdFx0MCUsXG5cdFx0MjAlLFxuXHRcdDUwJSxcblx0XHQ4MCUsXG5cdFx0MTAwJSB7XG5cdFx0XHR0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7IC8qIFN0YXJ0IGFuZCBlbmQgYXQgdGhlIG9yaWdpbmFsIHBvc2l0aW9uICovXG5cdFx0fVxuXHRcdDQwJSB7XG5cdFx0XHR0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTIwcHgpOyAvKiBCb3VuY2luZyB1cCAqL1xuXHRcdH1cblx0XHQ2MCUge1xuXHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKDIwcHgpOyAvKiBTbWFsbCBib3VuY2UgYmVmb3JlIHNldHRsaW5nICovXG5cdFx0fVxuXHR9XG5cdEBrZXlmcmFtZXMgc2xpZGVJbiB7XG5cdFx0MCUge1xuXHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0xMDAlKTsgLyogU3RhcnQgb2ZmLXNjcmVlbiB0byB0aGUgbGVmdCAqL1xuXHRcdFx0b3BhY2l0eTogMDtcblx0XHR9XG5cdFx0MTAwJSB7XG5cdFx0XHR0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7IC8qIEVuZCBhdCB0aGUgb3JpZ2luYWwgcG9zaXRpb24gKi9cblx0XHRcdG9wYWNpdHk6IDE7XG5cdFx0fVxuXHR9XG5cdEBrZXlmcmFtZXMgc2xpZGVPdXQge1xuXHRcdDAlIHtcblx0XHRcdHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsgLyogU3RhcnQgZnJvbSB0aGUgb3JpZ2luYWwgcG9zaXRpb24gKi9cblx0XHRcdG9wYWNpdHk6IDE7XG5cdFx0fVxuXHRcdDEwMCUge1xuXHRcdFx0dHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpOyAvKiBTbGlkZSBvdXQgdG8gdGhlIHJpZ2h0ICovXG5cdFx0XHRvcGFjaXR5OiAwO1xuXHRcdH1cblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VG9hc3Rlci5zdHlsZWQuanMubWFwIl19 */"));export{b as ToasterStyled};
|
|
@@ -3,6 +3,7 @@ export declare const BASE_COLORS: {
|
|
|
3
3
|
900: string;
|
|
4
4
|
800: string;
|
|
5
5
|
500: string;
|
|
6
|
+
100: string;
|
|
6
7
|
50: string;
|
|
7
8
|
10: string;
|
|
8
9
|
};
|
|
@@ -51,6 +52,8 @@ export declare const COLORS: {
|
|
|
51
52
|
brand: string;
|
|
52
53
|
brandLight: string;
|
|
53
54
|
brandVeryLight: string;
|
|
55
|
+
pureWhite: string;
|
|
56
|
+
brandTint: string;
|
|
54
57
|
negative: {
|
|
55
58
|
vibrant: string;
|
|
56
59
|
light: string;
|
|
@@ -342,6 +345,8 @@ export declare const DEFAULT_THEME: {
|
|
|
342
345
|
brand: string;
|
|
343
346
|
brandLight: string;
|
|
344
347
|
brandVeryLight: string;
|
|
348
|
+
pureWhite: string;
|
|
349
|
+
brandTint: string;
|
|
345
350
|
negative: {
|
|
346
351
|
vibrant: string;
|
|
347
352
|
light: string;
|