@adoptaunabuelo/react-components 0.1.22 → 0.1.23
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/cjs/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]=React.useState(void 0);React.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?jsxRuntime.jsx(ChipsContainerBig,Object.assign({role:"chip"},e,{children:jsxRuntime.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?jsxRuntime.jsx(ChipSelector,Object.assign({role:"chip"},e,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"p2",weight:"medium"},{children:e.text}))})):jsxRuntime.jsx(ChipsContainerSmall,Object.assign({role:"chip",style:Object.assign(Object.assign({},e.style),{background:e.disabled?Color.background.soft:Color.background.primaryLow})},{children:jsxRuntime.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)}))})):jsxRuntime.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:jsxRuntime.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;
|