@mobilestock-native/list 0.0.1

package/index.d.ts

@@ -0,0 +1,98 @@
+import React, { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { GestureResponderEvent, ViewProps } from 'react-native';
+import { DefaultTheme } from 'styled-components/native';
+import { ViewBaseProps, Container } from '@mobilestock-native/container';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypographyProps } from '@mobilestock-native/typography';
+import { FlashListProps } from '@shopify/flash-list';
+
+type SelectedColor = Uppercase<keyof DefaultTheme['colors']['listItem'] & string>;
+type BorderType = 'FULL' | 'BOTTOM';
+interface ItemContainerProps extends ViewBaseProps {
+    children: ReactNode;
+    isSelected?: boolean;
+    selectedColor?: SelectedColor;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    border?: BorderType;
+    onPress?(event: GestureResponderEvent): void;
+    MainContentWrapper: typeof Container.Vertical | typeof Container.Horizontal;
+}
+
+type ItemVerticalProps = Omit<ItemContainerProps, 'MainContentWrapper'>;
+
+type ItemHorizontalProps = Omit<ItemContainerProps, 'MainContentWrapper'>;
+
+declare function Title({ children, color, ...rest }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+declare function Text({ children, color, ...rest }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+declare function Subtitle({ children, color, ...rest }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+
+interface GraphicProps extends ViewProps {
+    children: ReactNode;
+}
+declare function Graphic({ children, ...rest }: GraphicProps): react_jsx_runtime.JSX.Element;
+
+interface FooterSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+    isExpansible?: boolean;
+}
+
+interface ContentSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+
+interface ActionsSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+
+interface InfinityProps {
+    fetchNextPage(): void;
+    hasNextPage?: boolean;
+    isFetching?: boolean;
+    loadMoreText?: string;
+}
+type ListProps<TItem> = Omit<FlashListProps<TItem>, 'renderItem' | 'onEndReached'> & {
+    data: TItem[];
+    renderItem(item: TItem): React.ReactElement;
+    itemKey: keyof TItem | ((item: TItem, index: number) => string | number);
+    isLoading?: boolean;
+    whenEmptyList?: React.ReactNode | string;
+    loadingComponent?: React.ReactNode;
+    infinity?: InfinityProps;
+};
+declare function ListRoot<TItem>({ data, renderItem, itemKey, isLoading, loadingComponent, whenEmptyList, infinity, onLoad, ...rest }: ListProps<TItem>): react_jsx_runtime.JSX.Element;
+declare const List: typeof ListRoot & {
+    Item: (() => never) & {
+        Actions: (() => never) & {
+            Vertical: React.ForwardRefExoticComponent<ActionsSubComponentProps & React.RefAttributes<react_native.View>>;
+            Horizontal: React.ForwardRefExoticComponent<ActionsSubComponentProps & React.RefAttributes<react_native.View>>;
+        };
+        Content: (() => never) & {
+            Vertical: React.ForwardRefExoticComponent<ContentSubComponentProps & React.RefAttributes<react_native.View>>;
+            Horizontal: React.ForwardRefExoticComponent<ContentSubComponentProps & React.RefAttributes<react_native.View>>;
+        };
+        Footer: (() => never) & {
+            Vertical: React.ForwardRefExoticComponent<FooterSubComponentProps & React.RefAttributes<react_native.View>>;
+            Horizontal: React.ForwardRefExoticComponent<FooterSubComponentProps & React.RefAttributes<react_native.View>>;
+        };
+        Graphic: typeof Graphic;
+        Header: (() => never) & {
+            Vertical: React.ForwardRefExoticComponent<HeaderSubComponentProps & React.RefAttributes<react_native.View>>;
+            Horizontal: React.ForwardRefExoticComponent<HeaderSubComponentProps & React.RefAttributes<react_native.View>>;
+        };
+        Subtitle: typeof Subtitle;
+        Text: typeof Text;
+        Title: typeof Title;
+        Horizontal: React.ForwardRefExoticComponent<ItemHorizontalProps & React.RefAttributes<react_native.View>>;
+        Vertical: React.ForwardRefExoticComponent<ItemVerticalProps & React.RefAttributes<react_native.View>>;
+    };
+};
+
+export { List, type ListProps, ListRoot };

package/index.js

@@ -0,0 +1,45 @@
+"use strict";var Ee=Object.create;var E=Object.defineProperty,He=Object.defineProperties,Ne=Object.getOwnPropertyDescriptor,ze=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertyNames,F=Object.getOwnPropertySymbols,Ae=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty,to=Object.prototype.propertyIsEnumerable;var eo=(o,e,t)=>e in o?E(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,a=(o,e)=>{for(var t in e||(e={}))U.call(e,t)&&eo(o,t,e[t]);if(F)for(var t of F(e))to.call(e,t)&&eo(o,t,e[t]);return o},p=(o,e)=>He(o,ze(e));var s=(o,e)=>{var t={};for(var r in o)U.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&F)for(var r of F(o))e.indexOf(r)<0&&to.call(o,r)&&(t[r]=o[r]);return t};var Fe=(o,e)=>{for(var t in e)E(o,t,{get:e[t],enumerable:!0})},ro=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of ve(e))!U.call(o,n)&&n!==t&&E(o,n,{get:()=>e[n],enumerable:!(r=Ne(e,n))||r.enumerable});return o};var b=(o,e,t)=>(t=o!=null?Ee(Ae(o)):{},ro(e||!o||!o.__esModule?E(t,"default",{value:o,enumerable:!0}):t,o)),Le=o=>ro(E({},"__esModule",{value:!0}),o);var Qe={};Fe(Qe,{List:()=>Je,ListRoot:()=>Re});module.exports=Le(Qe);var Te=require("@shopify/flash-list"),I=require("react");var no=require("react"),io=require("@mobilestock-native/typography"),po=require("react/jsx-runtime");function ao({whenEmptyList:o}){return(0,no.isValidElement)(o)?o:(0,po.jsx)(io.Typography,{weight:"BOLD",align:"CENTER",children:o!=null?o:"Nenhum item encontrado"})}var fo=require("react"),uo=require("@mobilestock-native/button"),Co=require("@mobilestock-native/container"),ho=b(require("@mobilestock-native/tools"));var B=b(require("styled-components/native"));var L=require("react"),lo=require("react/jsx-runtime"),so=(0,L.createContext)(void 0);function f(){let o=(0,L.useContext)(so);if(!o)throw new Error("useItem must be used within a ItemRoot");return o}function mo({children:o,isClickable:e,isDisabled:t,isSelected:r}){function n(i){switch(!0){case i!==void 0:return i;case r:return"CONTRAST";default:return"DEFAULT"}}return(0,lo.jsx)(so.Provider,{value:{isSelected:r,isDisabled:t,isClickable:e,getTypographyFinalColor:n},children:o})}var co=require("react/jsx-runtime");function $(t){var r=t,{children:o}=r,e=s(r,["children"]);let n=f();if(n.isClickable)throw new Error("ActionsContainer should not be used inside a clickable List.Item");return(0,co.jsx)(Be,p(a({},e),{$isDisabled:n.isDisabled,children:o}))}var Be=B.default.View`
+  flex-shrink: 0;
+
+  ${({$isDisabled:o})=>o&&B.css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+`;var X=require("react/jsx-runtime"),bo=(0,fo.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);if(!ho.default.validateSpecificChildren(e,[uo.Button]))throw new Error("Invalid content for Actions. Expected a Button component inside the container.");return(0,X.jsx)($,{children:(0,X.jsx)(Co.Container.Horizontal,p(a({ref:r,align:"CENTER_END",gap:"XS"},t),{children:e}))})});var go=require("react"),Io=require("@mobilestock-native/button"),Po=require("@mobilestock-native/container"),wo=b(require("@mobilestock-native/tools"));var G=require("react/jsx-runtime"),yo=(0,go.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);if(!wo.default.validateSpecificChildren(e,[Io.Button]))throw new Error("Invalid content for Actions. Expected a Button component inside the container.");return(0,G.jsx)($,{children:(0,G.jsx)(Po.Container.Vertical,p(a({ref:r,align:"CENTER_CENTER",gap:"XS"},t),{children:e}))})});function $e(){throw new Error("The Actions component should not be used directly. Use Actions.Vertical or Actions.Horizontal.")}var Vo=Object.assign($e,{Vertical:yo,Horizontal:bo});var To=require("react"),Ro=require("@mobilestock-native/container");var xo=require("react/jsx-runtime"),So=(0,To.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);return(0,xo.jsx)(Ro.Container.Horizontal,p(a({ref:r,full:!0},t),{children:e}))});var Eo=require("react"),Ho=require("@mobilestock-native/container");var zo=require("react/jsx-runtime"),No=(0,Eo.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);return(0,zo.jsx)(Ho.Container.Vertical,p(a({ref:r,full:!0},t),{children:e}))});function ke(){throw new Error("The Content component should not be used directly. Use Content.Vertical or Content.Horizontal.")}var vo=Object.assign(ke,{Vertical:No,Horizontal:So});var Lo=require("react"),Bo=require("@mobilestock-native/container");var Ao=require("react"),l=b(require("react-native-reanimated")),k=b(require("styled-components/native")),Fo=require("@mobilestock-native/button");var V=require("react/jsx-runtime");function D({children:o}){let e=f(),[t,r]=(0,Ao.useState)(!1),n=(0,l.useSharedValue)(0),i=(0,l.useSharedValue)(0),m=(0,l.useAnimatedRef)(),c=(0,l.useAnimatedStyle)(()=>({height:(0,l.withTiming)(n.value,{duration:300}),overflow:"hidden"})),T=(0,l.useAnimatedStyle)(()=>({transform:[{rotate:(0,l.withTiming)(`${i.value}deg`,{duration:300})}]}));function v(){if(!(e!=null&&e.isDisabled)){if(i.value=i.value===0?180:0,r(y=>!y),n.value!==0){n.value=0;return}(0,l.runOnUI)(()=>{"worklet";n.value=(0,l.measure)(m).height})()}}return(0,V.jsxs)(We,{children:[(0,V.jsx)(l.default.View,{style:c,children:(0,V.jsx)(Oe,{ref:m,style:{position:"absolute",top:0,left:0},children:o})}),(0,V.jsx)(De,{onPress:v,accessibilityRole:"button",accessibilityState:{expanded:t,disabled:e==null?void 0:e.isDisabled},icon:"ChevronDown",size:"XS",disabled:e==null?void 0:e.isDisabled,variant:"TRANSPARENT",style:T})]})}var De=l.default.createAnimatedComponent((0,k.default)(Fo.Button)``),Oe=(0,k.default)(l.default.View)`
+  width: 100%;
+`,We=k.default.View`
+  width: 100%;
+  margin-top: 4px;
+`;var _=require("react/jsx-runtime"),Y=(0,Lo.forwardRef)(function(i,n){var m=i,{children:e,isExpansible:t=!1}=m,r=s(m,["children","isExpansible"]);let c=(0,_.jsx)(Bo.Container.Horizontal,p(a({ref:n,full:!0},r),{children:e}));return t?(0,_.jsx)(D,{children:c}):c});Y.displayName="List.Item.Footer.Horizontal";var $o=require("react"),ko=require("@mobilestock-native/container");var q=require("react/jsx-runtime"),J=(0,$o.forwardRef)(function(i,n){var m=i,{children:e,isExpansible:t=!1}=m,r=s(m,["children","isExpansible"]);let c=(0,q.jsx)(ko.Container.Vertical,p(a({ref:n,full:!0},r),{children:e}));return t?(0,q.jsx)(D,{children:c}):c});J.displayName="List.Item.Footer.Vertical";function Me(){throw new Error("The Footer component should not be used directly. Use Footer.Vertical or Footer.Horizontal.")}var H=Object.assign(Me,{Vertical:J,Horizontal:Y});var O=b(require("styled-components/native")),Oo=require("@mobilestock-native/container"),Wo=require("@mobilestock-native/icons"),Mo=require("@mobilestock-native/image"),Uo=b(require("@mobilestock-native/tools"));var Go=require("react/jsx-runtime"),Do=[{name:"Img",component:Mo.Img},{name:"Icon",component:Wo.Icon}];function Xo(t){var r=t,{children:o}=r,e=s(r,["children"]);let n=f();if(!Uo.default.validateSpecificChildren(o,Do.map(i=>i.component)))throw new Error(`Invalid child component. Expected one of ${Do.map(i=>i.name).join(", ")}, but received an invalid child`);return(0,Go.jsx)(Ue,p(a({align:"CENTER",padding:"NONE"},e),{$isDisabled:(n==null?void 0:n.isDisabled)||!1,children:o}))}var Ue=(0,O.default)(Oo.Container.Horizontal)`
+  ${({$isDisabled:o})=>o&&O.css`
+      opacity: 0.5;
+    `}
+`;var _o=require("react"),Yo=require("@mobilestock-native/container");var qo=require("react/jsx-runtime"),Q=(0,_o.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);return(0,qo.jsx)(Yo.Container.Horizontal,p(a({ref:r,full:!0,gap:"XS"},t),{children:e}))});Q.displayName="List.Item.Header.Horizontal";var Jo=require("react"),Qo=require("@mobilestock-native/container");var Zo=require("react/jsx-runtime"),Z=(0,Jo.forwardRef)(function(n,r){var i=n,{children:e}=i,t=s(i,["children"]);return(0,Zo.jsx)(Qo.Container.Vertical,p(a({ref:r,full:!0},t),{children:e}))});Z.displayName="List.Item.Header.Vertical";function Xe(){throw new Error("The Header component should not be used directly. Use Header.Vertical or Header.Horizontal.")}var N=Object.assign(Xe,{Vertical:Z,Horizontal:Q});var re=require("react"),ne=require("@mobilestock-native/container");var h=require("react"),Ko=require("react-native"),g=b(require("styled-components/native")),jo=require("@mobilestock-native/clickable"),oe=require("@mobilestock-native/container"),ee=require("@mobilestock-native/icons"),te=b(require("@mobilestock-native/tools"));var C=require("react/jsx-runtime"),W=(0,h.forwardRef)(function(j,y){var R=j,{children:e,selectedColor:t,isSelected:r=!1,isDisabled:n=!1,isLoading:i=!1,border:m,onPress:c,MainContentWrapper:T}=R,v=s(R,["children","selectedColor","isSelected","isDisabled","isLoading","border","onPress","MainContentWrapper"]);let S=!!c,M={isSelected:r,isDisabled:n,isClickable:S},A=[],u=[],P=[],x=(0,h.useCallback)(d=>(0,h.isValidElement)(d)&&d.type===h.Fragment?x(d.props.children):d,[]),Se=x(e);h.Children.toArray(Se).forEach(d=>{if((0,h.isValidElement)(d)&&te.default.isComponentWithDisplayName(d.type))switch(d.type.displayName){case N.Vertical.displayName:case N.Horizontal.displayName:A.push(d);break;case H.Vertical.displayName:case H.Horizontal.displayName:u.push(d);break;default:P.push(d);break}else P.push(d)});let oo=(0,C.jsxs)(C.Fragment,{children:[A,P.length>0&&(0,C.jsx)(T,p(a({full:!0},v),{children:P})),u]}),xe={$isClickable:S,$border:m,$isDisabled:n,$isSelected:r,$selectedColor:t||"SELECTED"};return(0,C.jsx)(mo,p(a({},M),{children:(0,C.jsx)(Ko.View,{ref:y,accessibilityState:{selected:r,disabled:n},children:(0,C.jsx)(Ge,p(a({},xe),{children:S?(0,C.jsxs)(_e,{onPress:c,disabled:n||i,testID:"inner-clickable",children:[oo,!n&&(0,C.jsx)(Ye,{name:"ChevronRight"})]}):oo}))})}))}),Ge=(0,g.default)(oe.Container.Vertical)`
+  position: relative;
+  border-radius: 8px;
+  background-color: ${({theme:o})=>o.colors.listItem.default};
+
+  ${({theme:o,$isSelected:e,$selectedColor:t})=>e&&g.css`
+      background-color: ${o.colors.listItem[t.toLowerCase()]};
+    `}
+
+  ${({$isDisabled:o})=>o&&g.css`
+      opacity: 0.5;
+    `}
+
+  ${({$border:o,theme:e})=>{switch(o){case"FULL":return g.css`
+          border: 1px solid ${e.colors.border.default};
+        `;case"BOTTOM":return(0,g.css)({borderBottomWidth:1,borderBottomColor:e.colors.border.default});default:return""}}}
+`,_e=(0,g.default)(jo.Clickable)`
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+`,Ye=(0,g.default)(ee.Icon)`
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-12px);
+  background-color: ${({theme:o})=>o.colors.listItem.hover};
+  padding: 4px;
+  border-radius: 50px;
+`;var ae=require("react/jsx-runtime"),ie=(0,re.forwardRef)(function(e,t){return(0,ae.jsx)(W,a({ref:t,gap:"XS",MainContentWrapper:ne.Container.Horizontal},e))});var pe=require("react"),se=require("@mobilestock-native/container");var le=require("react/jsx-runtime"),me=(0,pe.forwardRef)(function(e,t){return(0,le.jsx)(W,a({ref:t,gap:"XS",MainContentWrapper:se.Container.Vertical},e))});var ce={Horizontal:ie,Vertical:me};var de=require("@mobilestock-native/spacer"),fe=require("@mobilestock-native/typography");var w=require("react/jsx-runtime");function ue(r){var n=r,{children:o,color:e}=n,t=s(n,["children","color"]);let i=f();return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(fe.Typography,p(a({size:"SM",weight:"SEMIBOLD",withEllipsis:!0,color:i.getTypographyFinalColor(e)},t),{children:o})),(0,w.jsx)(de.Spacer,{size:"XS"})]})}var Ce=require("@mobilestock-native/typography");var be=require("react/jsx-runtime");function he(r){var n=r,{children:o,color:e}=n,t=s(n,["children","color"]);let i=f();return(0,be.jsx)(Ce.Typography,p(a({size:"XS",color:i.getTypographyFinalColor(e)},t),{children:o}))}var ge=require("@mobilestock-native/typography");var Pe=require("react/jsx-runtime");function Ie(r){var n=r,{children:o,color:e}=n,t=s(n,["children","color"]);let i=f();return(0,Pe.jsx)(ge.Typography,p(a({size:"MD",weight:"BOLD",transform:"UPPERCASE",color:i.getTypographyFinalColor(e)},t),{children:o}))}function qe(){throw new Error("The List.Item component should not be used directly. Use List.Item.Vertical, List.Item.Horizontal instead.")}var we=Object.assign(qe,p(a({},ce),{Actions:Vo,Content:vo,Footer:H,Graphic:Xo,Header:N,Subtitle:ue,Text:he,Title:Ie}));var ye=require("@mobilestock-native/loading-spinner"),Ve=require("react/jsx-runtime");function K({LoadingComponent:o,text:e}){return o!=null?o:(0,Ve.jsx)(ye.LoadingSpinner,{title:e!=null?e:"Carregando..."})}var z=require("react/jsx-runtime");function Re(v){var y=v,{data:o,renderItem:e,itemKey:t,isLoading:r=!1,loadingComponent:n,whenEmptyList:i,infinity:m,onLoad:c}=y,T=s(y,["data","renderItem","itemKey","isLoading","loadingComponent","whenEmptyList","infinity","onLoad"]);let[j,R]=(0,I.useState)(r);(0,I.useEffect)(()=>{R(r)},[r]);let S=(0,I.useCallback)(({item:u})=>e(u),[e]),M=(0,I.useCallback)((u,P)=>{if(typeof t=="function")return String(t(u,P));let x=u==null?void 0:u[t];return x!==void 0?String(x):`item-${P}`},[t]),A=(0,I.useCallback)(()=>{m!=null&&m.hasNextPage&&!m.isFetching&&m.fetchNextPage()},[m]);return j&&o.length===0?(0,z.jsx)(K,{LoadingComponent:n,text:m==null?void 0:m.loadMoreText}):(0,z.jsx)(Te.FlashList,p(a({data:o,renderItem:S,keyExtractor:M,estimatedItemSize:50},T),{ListEmptyComponent:(0,z.jsx)(ao,{whenEmptyList:i}),ListFooterComponent:m!=null&&m.isFetching?(0,z.jsx)(K,{LoadingComponent:n,text:m==null?void 0:m.loadMoreText}):null,onEndReached:m?A:void 0,onEndReachedThreshold:m?.5:void 0,onLoad:u=>{R(!1),c==null||c(u)}}))}var Je=Object.assign(Re,{Item:we});0&&(module.exports={List,ListRoot});

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@mobilestock-native/list",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@shopify/flash-list": "1.6.4",
+    "@mobilestock-native/button": "^1.0.8",
+    "@mobilestock-native/clickable": "^1.0.5",
+    "@mobilestock-native/icons": "^0.0.6",
+    "@mobilestock-native/container": "^0.0.4",
+    "@mobilestock-native/image": "^0.0.7",
+    "@mobilestock-native/loading-spinner": "^0.0.9",
+    "@mobilestock-native/typography": "^0.0.8",
+    "@mobilestock-native/spacer": "^0.0.6",
+    "@mobilestock-native/tools": "^0.0.9"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-reanimated": "^3.10.1",
+    "styled-components": "^6.1.8",
+    "@mobilestock-native/theme": "^0.0.2"
+  }
+}