1- import  {  FC  }  from  'react' ; 
2- import  {  Badge , Card  }  from  'react-bootstrap' ; 
1+ import  {  Organization  }  from  '@open-source-bazaar/china-ngo-database' ; 
2+ import  {  Icon  }  from  'idea-react' ; 
3+ import  {  observable  }  from  'mobx' ; 
4+ import  {  observer  }  from  'mobx-react' ; 
5+ import  {  ObservedComponent  }  from  'mobx-react-helper' ; 
6+ import  {  BadgeBar  }  from  'mobx-restful-table' ; 
7+ import  {  HTMLAttributes  }  from  'react' ; 
8+ import  {  Button ,  Card ,  CardProps ,  Image  }  from  'react-bootstrap' ; 
39
4- import  {  Organization   }  from  '../../models/Organization ' ; 
10+ import  {  i18n ,   I18nContext   }  from  '../../models/Translation ' ; 
511
6- export  interface  OrganizationCardProps  extends  Partial < Organization >  { 
7-   onSwitch ?: ( filter : {  type ?: string ;  tags ?: string ;  city ?: string  } )  =>  void ; 
12+ export  interface  OrganizationCardProps 
13+   extends  Pick < HTMLAttributes < HTMLDivElement > ,  'className'  |  'style' > , 
14+     Omit < Organization ,  'id' > , 
15+     CardProps  { 
16+   onSwitch ?: ( filter : Partial < Pick < Organization ,  'entityType'  |  'coverageArea' > > )  =>  any ; 
817} 
918
10- export  const  OrganizationCard : FC < OrganizationCardProps >  =  ( { 
11-   name, 
12-   description, 
13-   type, 
14-   city, 
15-   website, 
16-   tags
17- } )  =>  ( 
18-   < Card  className = "h-100" > 
19-     < Card . Body > 
20-       < Card . Title  className = "h6" > { name } </ Card . Title > 
21-       { description  &&  ( 
22-         < Card . Text  className = "small text-muted" > 
23-           { description . length  >  100 
24-             ? `${ description . substring ( 0 ,  100 ) }  
25-             : description } 
26-         </ Card . Text > 
27-       ) } 
28-       < div  className = "mt-2" > 
29-         { city  &&  ( 
30-           < Badge  bg = "secondary"  className = "me-1" > 
31-             { city } 
32-           </ Badge > 
19+ @observer 
20+ export  class  OrganizationCard  extends  ObservedComponent < OrganizationCardProps ,  typeof  i18n >  { 
21+   static  contextType  =  I18nContext ; 
22+ 
23+   @observable 
24+   accessor showQRC  =  false ; 
25+ 
26+   renderIcon ( )  { 
27+     const  {  website,  wechatPublic }  =  this . observedProps . internetContact  ||  { } ; 
28+ 
29+     return  ( 
30+       < div  className = "d-flex justify-content-around" > 
31+         { /* {email && ( 
32+           <Button title="E-mail" size="sm" variant="warning" href={`mailto:${email}` }> 
33+             <Icon name="mailbox2" /> 
34+           </Button> 
35+         )} */ } 
36+         { website  &&  ( 
37+           < Button  title = "WWW"  size = "sm"  target = "_blank"  href = { website } > 
38+             < Icon  name = "globe2"  /> 
39+           </ Button > 
3340        ) } 
34-         { type  &&  ( 
35-           < Badge  bg = "info"  className = "me-1" > 
36-             { type } 
37-           </ Badge > 
41+         { wechatPublic  &&  ( 
42+           < Button 
43+             title = "WeChat" 
44+             size = "sm" 
45+             variant = "success" 
46+             onClick = { ( )  =>  ( this . showQRC  =  ! this . showQRC ) } 
47+           > 
48+             < Icon  name = "chat-fill"  /> 
49+           </ Button > 
3850        ) } 
39-         { tags ?. map ( tag  =>  ( 
40-           < Badge  key = { tag }  bg = "light"  text = "dark"  className = "me-1" > 
41-             { tag } 
42-           </ Badge > 
43-         ) ) } 
4451      </ div > 
45-       { website  &&  ( 
46-         < Card . Link 
47-           href = { website } 
48-           target = "_blank" 
49-           className = "small" 
50-         > 
51-           Visit Website
52-         </ Card . Link > 
53-       ) } 
54-     </ Card . Body > 
55-   </ Card > 
56- ) ; 
52+     ) ; 
53+   } 
54+ 
55+   render ( )  { 
56+     const  {  t }  =  this . observedContext , 
57+       {  name,  entityType,  services,  description,  internetContact,  onSwitch,  ...props  }  =  this . props ; 
58+     const  {  wechatPublic }  =  internetContact  ||  { } ; 
59+ 
60+     return  ( 
61+       < Card 
62+         { ...props } 
63+         style = { { 
64+           ...props . style , 
65+           contentVisibility : 'auto' , 
66+           containIntrinsicHeight : '36rem' , 
67+         } } 
68+       > 
69+         { /* <Card.Img 
70+           variant="top" 
71+           className="object-fit-contain" 
72+           style={{ height: '30vh' }} 
73+           src={logos} 
74+         /> */ } 
75+         < Card . Body > 
76+           < Card . Title > 
77+             { name } 
78+             < BadgeBar  className = "ms-2"  list = { [ {  text : entityType !  } ] }  /> 
79+           </ Card . Title > 
80+ 
81+           { services  &&  ( 
82+             < BadgeBar 
83+               className = "justify-content-end" 
84+               list = { services . map ( ( {  serviceCategory } )  =>  ( {  text : serviceCategory !  } ) ) } 
85+             /> 
86+           ) } 
87+           < Card . Text 
88+             className = "d-none d-sm-block text-wrap overflow-auto" 
89+             style = { {  minHeight : '5rem' ,  maxHeight : '10rem'  } } 
90+           > 
91+             { description } 
92+           </ Card . Text > 
93+         </ Card . Body > 
94+ 
95+         < Card . Footer > 
96+           { this . renderIcon ( ) } 
97+ 
98+           { this . showQRC  &&  ( 
99+             < Image 
100+               className = "mt-2" 
101+               src = { `https://open.weixin.qq.com/qr/code?username=${ wechatPublic }  } 
102+               alt = { wechatPublic } 
103+               fluid 
104+             /> 
105+           ) } 
106+         </ Card . Footer > 
107+       </ Card > 
108+     ) ; 
109+   } 
110+ } 
0 commit comments