@adoptaunabuelo/react-components 0.1.22 → 0.2.1
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/Dropdown/Dropdown.d.ts +22 -0
- package/dist/cjs/components/Label/Label.d.ts +4 -1
- package/dist/cjs/index.js +32 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.d.ts +22 -0
- package/dist/esm/components/Label/Label.d.ts +4 -1
- package/dist/esm/index.js +32 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CSSProperties } from 'styled-components';
|
|
3
|
+
declare const Dropdown: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default Dropdown;
|
|
5
|
+
export interface Props {
|
|
6
|
+
id: string;
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
menuStyle?: CSSProperties;
|
|
9
|
+
optionStyle?: CSSProperties;
|
|
10
|
+
options: Array<OptionProps>;
|
|
11
|
+
placeholder: string;
|
|
12
|
+
selectedOptions?: Array<OptionProps>;
|
|
13
|
+
type?: 'single' | 'multiple';
|
|
14
|
+
menuPosition?: 'bottom' | 'top';
|
|
15
|
+
onChange?: (a: Array<OptionProps>) => void;
|
|
16
|
+
onSearchChange?: (text: string) => void;
|
|
17
|
+
}
|
|
18
|
+
export interface OptionProps {
|
|
19
|
+
id: string;
|
|
20
|
+
title?: string;
|
|
21
|
+
icon?: JSX.Element;
|
|
22
|
+
}
|
|
@@ -2,7 +2,10 @@ import { ComponentPropsWithoutRef } from 'react';
|
|
|
2
2
|
declare const Label: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Label;
|
|
4
4
|
export interface Props extends ComponentPropsWithoutRef<"div"> {
|
|
5
|
-
text
|
|
5
|
+
text: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
type?: 'label' | 'chip';
|
|
8
|
+
size?: 'big' | 'small' | 'selector';
|
|
6
9
|
backgroundColor?: string;
|
|
7
10
|
color?: string;
|
|
8
11
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -700,7 +700,38 @@ var r="none",n="contents",a=/input|select|textarea|button|object|iframe/;functio
|
|
|
700
700
|
width: fit-content;
|
|
701
701
|
height: 28px;
|
|
702
702
|
border-radius: 3px;
|
|
703
|
-
`,
|
|
703
|
+
`,ChipsContainerSmall=Ye.div`
|
|
704
|
+
display: flex;
|
|
705
|
+
flex-direction: column;
|
|
706
|
+
justify-content: center;
|
|
707
|
+
align-items: center;
|
|
708
|
+
height: 32px;
|
|
709
|
+
width: 30px;
|
|
710
|
+
border-radius: 50%;
|
|
711
|
+
background-color: ${e=>e.disabled?Color.background.soft:Color.background.primaryLow};
|
|
712
|
+
`,ChipsContainerBig=Ye.div`
|
|
713
|
+
display: flex;
|
|
714
|
+
flex-direction: row;
|
|
715
|
+
justify-content: center;
|
|
716
|
+
align-items: center;
|
|
717
|
+
padding: 0px 12px;
|
|
718
|
+
height: 32px;
|
|
719
|
+
left: 118px;
|
|
720
|
+
top: 1082px;
|
|
721
|
+
border-radius: 555px;
|
|
722
|
+
background-color: ${e=>e.disabled?Color.background.soft:Color.background.primaryLow};
|
|
723
|
+
`,ChipSelector=Ye.div`
|
|
724
|
+
display: flex;
|
|
725
|
+
flex-direction: row;
|
|
726
|
+
justify-content: center;
|
|
727
|
+
align-items: center;
|
|
728
|
+
padding: 0px 12px;
|
|
729
|
+
height: 32px;
|
|
730
|
+
border: 1px solid ${e=>e.disabled?Color.line.low:Color.line.full};
|
|
731
|
+
opacity: ${e=>e.disabled?.6:1};
|
|
732
|
+
box-sizing: border-box;
|
|
733
|
+
border-radius: 555px;
|
|
734
|
+
`,Label=e=>{var t;const[r,n]=useState(void 0);useEffect((()=>{n(a())}),[e.text]);const a=()=>{switch(e.text){case"inRegister":return{color:"#2D7FD9",backgroundColor:"#E5F1FC",text:"En registro"};case"registered":return{color:"#2D7FD9",backgroundColor:"#E5F1FC",text:"Registrado"};case"waiting":return{color:"#2D7FD9",backgroundColor:"#E5F1FC",text:"Pendiente de match"};case"training":return{color:"#2D7FD9",backgroundColor:"#E5F1FC",text:"Formación en proceso"};case"match":return{color:"#59C183",backgroundColor:"#E7F6ED",text:"Match"};case"shutdown":return{color:"#FF5A5A",backgroundColor:"#FCEDF1",text:"Baja"};case"banned":return{color:"#FF5A5A",backgroundColor:"#FCEDF1",text:"Bloqueado"};case"exVolunteer":return{color:"#FF5A5A",backgroundColor:"#FCEDF1",text:"Ex-voluntario"};case"paused":return{color:"#828282",backgroundColor:"#F2F2F2",text:"Pausa"};case"inProgress":case"En proceso":return{color:"#FF8854",backgroundColor:"#FFF6E5",text:"En proceso"};case"pending":case"Pendiente":return{color:"#0000008F",backgroundColor:"#F2F2F2",text:"Pendiente"};case"canceled":return{color:Color.text.red,backgroundColor:Color.background.redLow,text:"Cancelado"};case"No resuelto":return{color:Color.text.red,backgroundColor:Color.background.redLow,text:"No resuelto"};case"done":case"Resuelto":return{color:"#448B6D",backgroundColor:"#E4F8EE",text:"Resuelto"}}};return"chip"===e.type?"big"===e.size?jsx(ChipsContainerBig,Object.assign({role:"chip"},e,{children:jsx(Text$1,Object.assign({type:"p2",weight:"medium",style:{color:e.disabled?Color.text.high:Color.text.primary}},{children:e.text.slice(0,1).toLocaleUpperCase()+e.text.slice(1,e.text.length).toLocaleLowerCase()}))})):"selector"===e.size?jsx(ChipSelector,Object.assign({role:"chip"},e,{children:jsx(Text$1,Object.assign({type:"p2",weight:"medium"},{children:e.text}))})):jsx(ChipsContainerSmall,Object.assign({role:"chip",style:Object.assign(Object.assign({},e.style),{background:e.disabled?Color.background.soft:Color.background.primaryLow})},{children:jsx(Text$1,Object.assign({type:"p2",weight:"medium",style:{color:e.disabled?Color.text.high:Color.text.primary}},{children:e.text.slice(0,1).toLocaleUpperCase()+e.text.slice(1,2)}))})):jsx(LabelStyled,Object.assign({role:"label",id:"Label"},e,{style:Object.assign({background:e.backgroundColor?e.backgroundColor:r?r.backgroundColor:Color.background.soft},e.style)},{children:jsx(Text$1,Object.assign({type:"p",style:{fontSize:(null===(t=e.style)||void 0===t?void 0:t.fontSize)?e.style.fontSize:14,fontWeight:500,color:e.color?e.color:r?r.color:Color.text.full}},{children:(null==r?void 0:r.text)?r.text:e.text}))}))},AvatarContainer=Ye.div`
|
|
704
735
|
width: 50px;
|
|
705
736
|
height: 50px;
|
|
706
737
|
display: flex;
|