orn-ui 0.2.1 → 0.2.3
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/README.md +5 -5
- package/lib/commonjs/organisms/NavigationBar.js +4 -1
- package/lib/commonjs/organisms/NavigationBar.js.map +1 -1
- package/lib/module/organisms/NavigationBar.js +4 -1
- package/lib/module/organisms/NavigationBar.js.map +1 -1
- package/lib/typescript/organisms/NavigationBar.d.ts.map +1 -1
- package/package.json +1 -1
- package/registry/index.json +1 -1
- package/registry/navigation-bar.json +1 -1
- package/src/organisms/NavigationBar.tsx +4 -1
package/README.md
CHANGED
|
@@ -95,11 +95,11 @@ const insets = useSafeAreaInsets();
|
|
|
95
95
|
Every component's full prop table lives on [orn-ui-docs.vercel.app](https://orn-ui-docs.vercel.app/).
|
|
96
96
|
|
|
97
97
|
### SearchList & List Features
|
|
98
|
-
- **Search &
|
|
99
|
-
- **
|
|
100
|
-
- **Pull-to-
|
|
101
|
-
- **
|
|
102
|
-
- **
|
|
98
|
+
- **Search & scan**: built-in search bar with an optional scan action and an extra slot for your own controls.
|
|
99
|
+
- **Skeleton first load**: `skeletonCount` and `renderSkeletonItem` draw placeholders shaped like the real rows.
|
|
100
|
+
- **Pull-to-refresh**: native, through `onRefresh` and `isRefreshing`.
|
|
101
|
+
- **Pagination & headers/footers**: `ListHeaderComponent` and `ListFooterComponent` coexist with the `isLoadingMore` indicator and `noMoreText`.
|
|
102
|
+
- **Non-destructive empty state**: `ListEmptyComponent` keeps the header, the footer and the scroll/refresh gestures.
|
|
103
103
|
|
|
104
104
|
### Worth knowing
|
|
105
105
|
|
|
@@ -29,7 +29,10 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
29
29
|
position: 'absolute',
|
|
30
30
|
top: theme.tokens.spacing.xs,
|
|
31
31
|
bottom: theme.tokens.spacing.xs,
|
|
32
|
-
|
|
32
|
+
// El indicador se posiciona contra el borde de la barra, no contra su caja
|
|
33
|
+
// interna: al `left` hay que sumarle el padding horizontal para que quede
|
|
34
|
+
// centrado sobre la pestaña y no corrido hacia la izquierda.
|
|
35
|
+
left: theme.tokens.spacing.xs + theme.tokens.spacing.sm,
|
|
33
36
|
borderRadius: theme.tokens.radius.lg,
|
|
34
37
|
backgroundColor: theme.colors.primarySoft
|
|
35
38
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","bar","flexDirection","backgroundColor","colors","surface","borderColor","border","paddingHorizontal","tokens","spacing","xs","paddingVertical","sm","barBottom","borderTopWidth","StyleSheet","hairlineWidth","barTop","borderBottomWidth","indicator","position","top","bottom","left","borderRadius","radius","lg","primarySoft","item","flex","itemContent","alignItems","justifyContent","gap","label","fontSize","fontWeight","medium","badge","marginLeft","minWidth","height","full","error","badgeDot","badgeText","bold","color","onError","ICON_SIZE","NavigationBar","exports","memo","items","activeKey","onChange","showLabels","safeArea","style","testID","useTheme","useColors","styles","insets","useInsets","allowFontScaling","useAllowFontScaling","barWidth","setBarWidth","useState","slide","useRef","Animated","Value","current","placed","activeIndex","Math","max","findIndex","key","itemWidth","length","useEffect","to","setValue","spring","toValue","useNativeDriver","friction","tension","start","onLayout","next","nativeEvent","layout","width","renderContent","jsxs","Fragment","children","iconName","jsx","Icon","name","size","Text","numberOfLines","View","accessibilityRole","paddingBottom","paddingTop","pointerEvents","transform","translateX","map","index","active","range","scale","interpolate","inputRange","outputRange","extrapolate","activeOpacity","TouchableOpacity","onPress","accessibilityLabel","accessibilityState","selected","textLight","accessibilityElementsHidden","importantForAccessibility","absoluteFill","opacity","primaryText","undefined","displayName"],"sourceRoot":"../../../src","sources":["organisms/NavigationBar.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAAqC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAyBrC,MAAMkB,SAAS,GAAG,IAAAC,0BAAY,EAAEC,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACC,OAAO;IACrCC,WAAW,EAAEN,KAAK,CAACI,MAAM,CAACG,MAAM;IAChCC,iBAAiB,EAAER,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC1CC,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG;EACxC,CAAC;EACDC,SAAS,EAAE;IAAEC,cAAc,EAAEC,uBAAU,CAACC;EAAc,CAAC;EACvDC,MAAM,EAAE;IAAEC,iBAAiB,EAAEH,uBAAU,CAACC;EAAc,CAAC;EACvDG,SAAS,EAAE;IACTC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC5BY,MAAM,EAAEvB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC/
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","bar","flexDirection","backgroundColor","colors","surface","borderColor","border","paddingHorizontal","tokens","spacing","xs","paddingVertical","sm","barBottom","borderTopWidth","StyleSheet","hairlineWidth","barTop","borderBottomWidth","indicator","position","top","bottom","left","borderRadius","radius","lg","primarySoft","item","flex","itemContent","alignItems","justifyContent","gap","label","fontSize","fontWeight","medium","badge","marginLeft","minWidth","height","full","error","badgeDot","badgeText","bold","color","onError","ICON_SIZE","NavigationBar","exports","memo","items","activeKey","onChange","showLabels","safeArea","style","testID","useTheme","useColors","styles","insets","useInsets","allowFontScaling","useAllowFontScaling","barWidth","setBarWidth","useState","slide","useRef","Animated","Value","current","placed","activeIndex","Math","max","findIndex","key","itemWidth","length","useEffect","to","setValue","spring","toValue","useNativeDriver","friction","tension","start","onLayout","next","nativeEvent","layout","width","renderContent","jsxs","Fragment","children","iconName","jsx","Icon","name","size","Text","numberOfLines","View","accessibilityRole","paddingBottom","paddingTop","pointerEvents","transform","translateX","map","index","active","range","scale","interpolate","inputRange","outputRange","extrapolate","activeOpacity","TouchableOpacity","onPress","accessibilityLabel","accessibilityState","selected","textLight","accessibilityElementsHidden","importantForAccessibility","absoluteFill","opacity","primaryText","undefined","displayName"],"sourceRoot":"../../../src","sources":["organisms/NavigationBar.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAAqC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAyBrC,MAAMkB,SAAS,GAAG,IAAAC,0BAAY,EAAEC,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACC,OAAO;IACrCC,WAAW,EAAEN,KAAK,CAACI,MAAM,CAACG,MAAM;IAChCC,iBAAiB,EAAER,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC1CC,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG;EACxC,CAAC;EACDC,SAAS,EAAE;IAAEC,cAAc,EAAEC,uBAAU,CAACC;EAAc,CAAC;EACvDC,MAAM,EAAE;IAAEC,iBAAiB,EAAEH,uBAAU,CAACC;EAAc,CAAC;EACvDG,SAAS,EAAE;IACTC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC5BY,MAAM,EAAEvB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC/B;IACA;IACA;IACAa,IAAI,EAAExB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGX,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE;IACvDY,YAAY,EAAEzB,KAAK,CAACS,MAAM,CAACiB,MAAM,CAACC,EAAE;IACpCxB,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACwB;EAChC,CAAC;EACDC,IAAI,EAAE;IAAEC,IAAI,EAAE,CAAC;IAAElB,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC;EAAG,CAAC;EAC3DoB,WAAW,EAAE;IAAEC,UAAU,EAAE,QAAQ;IAAEC,cAAc,EAAE,QAAQ;IAAEC,GAAG,EAAE;EAAE,CAAC;EACvEC,KAAK,EAAE;IAAEC,QAAQ,EAAEpC,KAAK,CAACS,MAAM,CAAC2B,QAAQ,CAACzB,EAAE;IAAE0B,UAAU,EAAErC,KAAK,CAACS,MAAM,CAAC4B,UAAU,CAACC;EAAO,CAAC;EACzFC,KAAK,EAAE;IACLlB,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC,CAAC;IACPE,IAAI,EAAE,KAAK;IACXgB,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,EAAE;IACZC,MAAM,EAAE,EAAE;IACVlC,iBAAiB,EAAE,CAAC;IACpBiB,YAAY,EAAEzB,KAAK,CAACS,MAAM,CAACiB,MAAM,CAACiB,IAAI;IACtCxC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACwC,KAAK;IACnCZ,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDY,QAAQ,EAAE;IAAEJ,QAAQ,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEpB,GAAG,EAAE,CAAC,CAAC;IAAEd,iBAAiB,EAAE;EAAE,CAAC;EACrEsC,SAAS,EAAE;IACTV,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAErC,KAAK,CAACS,MAAM,CAAC4B,UAAU,CAACU,IAAI;IACxCC,KAAK,EAAEhD,KAAK,CAACI,MAAM,CAAC6C;EACtB;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,SAAS,GAAG,EAAE;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,WAAI,EAC/B,CAAC;EACCC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRnC,QAAQ,GAAG,QAAQ;EACnBoC,UAAU,GAAG,IAAI;EACjBC,QAAQ,GAAG,IAAI;EACfC,KAAK;EACLC;AACkB,CAAC,KAAK;EACxB,MAAM5D,KAAK,GAAG,IAAA6D,oBAAQ,EAAC,CAAC;EACxB,MAAMzD,MAAM,GAAG,IAAA0D,qBAAS,EAAC,CAAC;EAC1B,MAAMC,MAAM,GAAGjE,SAAS,CAAC,CAAC;EAC1B,MAAMkE,MAAM,GAAG,IAAAC,qBAAS,EAAC,CAAC;EAC1B,MAAMC,gBAAgB,GAAG,IAAAC,+BAAmB,EAAC,CAAC;EAE9C,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAC3C,MAAMC,KAAK,GAAG,IAAAC,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EACnD,MAAMC,MAAM,GAAG,IAAAJ,aAAM,EAAC,KAAK,CAAC;EAE5B,MAAMK,WAAW,GAAGC,IAAI,CAACC,GAAG,CAC1B,CAAC,EACDzB,KAAK,CAAC0B,SAAS,CAAEnD,IAAI,IAAKA,IAAI,CAACoD,GAAG,KAAK1B,SAAS,CAClD,CAAC;EACD,MAAM2B,SAAS,GAAG5B,KAAK,CAAC6B,MAAM,GAAG,CAAC,GAAGf,QAAQ,GAAGd,KAAK,CAAC6B,MAAM,GAAG,CAAC;EAEhE,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIF,SAAS,IAAI,CAAC,EAAE;IACpB,MAAMG,EAAE,GAAGR,WAAW,GAAGK,SAAS;IAClC;IACA;IACA,IAAI,CAACN,MAAM,CAACD,OAAO,EAAE;MACnBC,MAAM,CAACD,OAAO,GAAG,IAAI;MACrBJ,KAAK,CAACe,QAAQ,CAACD,EAAE,CAAC;MAClB;IACF;IACAZ,qBAAQ,CAACc,MAAM,CAAChB,KAAK,EAAE;MAAEiB,OAAO,EAAEH,EAAE;MAAEI,eAAe,EAAE,IAAI;MAAEC,QAAQ,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAG,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EAClG,CAAC,EAAE,CAACf,WAAW,EAAEK,SAAS,EAAEX,KAAK,CAAC,CAAC;EAEnC,MAAMsB,QAAQ,GAAIlH,CAAoB,IAAK;IACzC,MAAMmH,IAAI,GAAGnH,CAAC,CAACoH,WAAW,CAACC,MAAM,CAACC,KAAK,GAAGjG,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAG,CAAC;IACrE,IAAImF,IAAI,KAAK1B,QAAQ,EAAEC,WAAW,CAACyB,IAAI,CAAC;EAC1C,CAAC;EAED,MAAMI,aAAa,GAAGA,CAACrE,IAAuB,EAAEmB,KAAa,kBAC3D,IAAAtE,WAAA,CAAAyH,IAAA,EAAAzH,WAAA,CAAA0H,QAAA;IAAAC,QAAA,GACG,CAAC,CAACxE,IAAI,CAACyE,QAAQ,iBAAI,IAAA5H,WAAA,CAAA6H,GAAA,EAAC9H,KAAA,CAAA+H,IAAI;MAACC,IAAI,EAAE5E,IAAI,CAACyE,QAAS;MAACI,IAAI,EAAExD,SAAU;MAACF,KAAK,EAAEA;IAAM,CAAE,CAAC,EAC/ES,UAAU,iBACT,IAAA/E,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAqI,IAAI;MAACzC,gBAAgB,EAAEA,gBAAiB;MAAC0C,aAAa,EAAE,CAAE;MAACjD,KAAK,EAAE,CAACI,MAAM,CAAC5B,KAAK,EAAE;QAAEa;MAAM,CAAC,CAAE;MAAAqD,QAAA,EAC1FxE,IAAI,CAACM;IAAK,CACP,CACP;EAAA,CACD,CACH;EAED,oBACE,IAAAzD,WAAA,CAAAyH,IAAA,EAAC7H,YAAA,CAAAuI,IAAI;IACHjD,MAAM,EAAEA,MAAO;IACfiC,QAAQ,EAAEA,QAAS;IACnBiB,iBAAiB,EAAC,SAAS;IAC3BnD,KAAK,EAAE,CACLI,MAAM,CAAC9D,GAAG,EACVoB,QAAQ,KAAK,QAAQ,GAAG0C,MAAM,CAACjD,SAAS,GAAGiD,MAAM,CAAC7C,MAAM,EACxDwC,QAAQ,IAAIrC,QAAQ,KAAK,QAAQ,IAAI;MAAE0F,aAAa,EAAE/G,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAGmD,MAAM,CAACzC;IAAO,CAAC,EAC/FmC,QAAQ,IAAIrC,QAAQ,KAAK,KAAK,IAAI;MAAE2F,UAAU,EAAEhH,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAGmD,MAAM,CAAC1C;IAAI,CAAC,EACtFqC,KAAK,CACL;IAAA0C,QAAA,GAEDnB,SAAS,GAAG,CAAC,iBACZ,IAAAxG,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAmG,QAAQ,CAACoC,IAAI;MACZjD,MAAM,EAAC,0BAA0B;MACjCqD,aAAa,EAAC,MAAM;MACpBtD,KAAK,EAAE,CACLI,MAAM,CAAC3C,SAAS,EAChBsC,QAAQ,IAAIrC,QAAQ,KAAK,QAAQ,IAAI;QAAEE,MAAM,EAAEvB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGqD,MAAM,CAACzC;MAAO,CAAC,EACxFmC,QAAQ,IAAIrC,QAAQ,KAAK,KAAK,IAAI;QAAEC,GAAG,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGqD,MAAM,CAAC1C;MAAI,CAAC,EAC/E;QACE2E,KAAK,EAAEf,SAAS,GAAGlF,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAG,CAAC;QAC9CqG,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAE5C;QAAM,CAAC;MACnC,CAAC;IACD,CACH,CACF,EAEAjB,KAAK,CAAC8D,GAAG,CAAC,CAACvF,IAAI,EAAEwF,KAAK,KAAK;MAC1B,MAAMC,MAAM,GAAGD,KAAK,KAAKxC,WAAW;MACpC,MAAM0C,KAAK,GAAG,CAAC,CAACF,KAAK,GAAG,CAAC,IAAInC,SAAS,EAAEmC,KAAK,GAAGnC,SAAS,EAAE,CAACmC,KAAK,GAAG,CAAC,IAAInC,SAAS,CAAC;MACnF,MAAMsC,KAAK,GACTtC,SAAS,GAAG,CAAC,GACTX,KAAK,CAACkD,WAAW,CAAC;QAAEC,UAAU,EAAEH,KAAK;QAAEI,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;QAAEC,WAAW,EAAE;MAAQ,CAAC,CAAC,GACzF,CAAC;MACP,MAAMC,aAAa,GACjB3C,SAAS,GAAG,CAAC,GACTX,KAAK,CAACkD,WAAW,CAAC;QAAEC,UAAU,EAAEH,KAAK;QAAEI,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAAEC,WAAW,EAAE;MAAQ,CAAC,CAAC,GACtF,CAAC;MAEP,oBACE,IAAAlJ,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAwJ,gBAAgB;QAEfnE,KAAK,EAAEI,MAAM,CAAClC,IAAK;QACnBgG,aAAa,EAAE,GAAI;QACnBE,OAAO,EAAEA,CAAA,KAAMvE,QAAQ,CAAC3B,IAAI,CAACoD,GAAG,CAAE;QAClC6B,iBAAiB,EAAC,KAAK;QACvBkB,kBAAkB,EAAEnG,IAAI,CAACM,KAAM;QAC/B8F,kBAAkB,EAAE;UAAEC,QAAQ,EAAEZ;QAAO,CAAE;QAAAjB,QAAA,eAEzC,IAAA3H,WAAA,CAAAyH,IAAA,EAAC7H,YAAA,CAAAmG,QAAQ,CAACoC,IAAI;UAAClD,KAAK,EAAE,CAACI,MAAM,CAAChC,WAAW,EAAE;YAAEmF,SAAS,EAAE,CAAC;cAAEM;YAAM,CAAC;UAAE,CAAC,CAAE;UAAAnB,QAAA,GACpEH,aAAa,CAACrE,IAAI,EAAEzB,MAAM,CAAC+H,SAAS,CAAC,eAEtC,IAAAzJ,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAmG,QAAQ,CAACoC,IAAI;YACZI,aAAa,EAAC,MAAM;YACpBmB,2BAA2B;YAC3BC,yBAAyB,EAAC,qBAAqB;YAC/C1E,KAAK,EAAE,CAAC3C,uBAAU,CAACsH,YAAY,EAAEvE,MAAM,CAAChC,WAAW,EAAE;cAAEwG,OAAO,EAAEV;YAAc,CAAC,CAAE;YAAAxB,QAAA,EAEhFH,aAAa,CAACrE,IAAI,EAAEzB,MAAM,CAACoI,WAAW;UAAC,CAC3B,CAAC,EAEf3G,IAAI,CAACU,KAAK,KAAKkG,SAAS,iBACvB,IAAA/J,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAuI,IAAI;YAAClD,KAAK,EAAE,CAACI,MAAM,CAACxB,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAK,IAAI,IAAIwB,MAAM,CAAClB,QAAQ,CAAE;YAAAwD,QAAA,EACjExE,IAAI,CAACU,KAAK,KAAK,IAAI,iBAClB,IAAA7D,WAAA,CAAA6H,GAAA,EAACjI,YAAA,CAAAqI,IAAI;cAACzC,gBAAgB,EAAE,KAAM;cAACP,KAAK,EAAEI,MAAM,CAACjB,SAAU;cAAAuD,QAAA,EACpDxE,IAAI,CAACU;YAAK,CACP;UACP,CACG,CACP;QAAA,CACY;MAAC,GA7BXV,IAAI,CAACoD,GA8BM,CAAC;IAEvB,CAAC,CAAC;EAAA,CACE,CAAC;AAEX,CACF,CAAC;AACD9B,aAAa,CAACuF,WAAW,GAAG,eAAe","ignoreList":[]}
|
|
@@ -24,7 +24,10 @@ const useStyles = createStyles(theme => ({
|
|
|
24
24
|
position: 'absolute',
|
|
25
25
|
top: theme.tokens.spacing.xs,
|
|
26
26
|
bottom: theme.tokens.spacing.xs,
|
|
27
|
-
|
|
27
|
+
// El indicador se posiciona contra el borde de la barra, no contra su caja
|
|
28
|
+
// interna: al `left` hay que sumarle el padding horizontal para que quede
|
|
29
|
+
// centrado sobre la pestaña y no corrido hacia la izquierda.
|
|
30
|
+
left: theme.tokens.spacing.xs + theme.tokens.spacing.sm,
|
|
28
31
|
borderRadius: theme.tokens.radius.lg,
|
|
29
32
|
backgroundColor: theme.colors.primarySoft
|
|
30
33
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useEffect","useRef","useState","Animated","StyleSheet","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","useInsets","useTheme","Icon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useStyles","theme","bar","flexDirection","backgroundColor","colors","surface","borderColor","border","paddingHorizontal","tokens","spacing","xs","paddingVertical","sm","barBottom","borderTopWidth","hairlineWidth","barTop","borderBottomWidth","indicator","position","top","bottom","left","borderRadius","radius","lg","primarySoft","item","flex","itemContent","alignItems","justifyContent","gap","label","fontSize","fontWeight","medium","badge","marginLeft","minWidth","height","full","error","badgeDot","badgeText","bold","color","onError","ICON_SIZE","NavigationBar","items","activeKey","onChange","showLabels","safeArea","style","testID","styles","insets","allowFontScaling","barWidth","setBarWidth","slide","Value","current","placed","activeIndex","Math","max","findIndex","key","itemWidth","length","to","setValue","spring","toValue","useNativeDriver","friction","tension","start","onLayout","e","next","nativeEvent","layout","width","renderContent","children","iconName","name","size","numberOfLines","accessibilityRole","paddingBottom","paddingTop","pointerEvents","transform","translateX","map","index","active","range","scale","interpolate","inputRange","outputRange","extrapolate","activeOpacity","onPress","accessibilityLabel","accessibilityState","selected","textLight","accessibilityElementsHidden","importantForAccessibility","absoluteFill","opacity","primaryText","undefined","displayName"],"sourceRoot":"../../../src","sources":["organisms/NavigationBar.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAChE,SACEC,QAAQ,EACRC,UAAU,EACVC,IAAI,EACJC,gBAAgB,EAChBC,IAAI,QAIC,cAAc;AACrB,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,qBAAqB;AACzF,SAASC,IAAI,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAyBrC,MAAMC,SAAS,GAAGZ,YAAY,CAAEa,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACC,OAAO;IACrCC,WAAW,EAAEN,KAAK,CAACI,MAAM,CAACG,MAAM;IAChCC,iBAAiB,EAAER,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC1CC,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG;EACxC,CAAC;EACDC,SAAS,EAAE;IAAEC,cAAc,EAAEhC,UAAU,CAACiC;EAAc,CAAC;EACvDC,MAAM,EAAE;IAAEC,iBAAiB,EAAEnC,UAAU,CAACiC;EAAc,CAAC;EACvDG,SAAS,EAAE;IACTC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAErB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC5BW,MAAM,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC/
|
|
1
|
+
{"version":3,"names":["React","memo","useEffect","useRef","useState","Animated","StyleSheet","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","useInsets","useTheme","Icon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useStyles","theme","bar","flexDirection","backgroundColor","colors","surface","borderColor","border","paddingHorizontal","tokens","spacing","xs","paddingVertical","sm","barBottom","borderTopWidth","hairlineWidth","barTop","borderBottomWidth","indicator","position","top","bottom","left","borderRadius","radius","lg","primarySoft","item","flex","itemContent","alignItems","justifyContent","gap","label","fontSize","fontWeight","medium","badge","marginLeft","minWidth","height","full","error","badgeDot","badgeText","bold","color","onError","ICON_SIZE","NavigationBar","items","activeKey","onChange","showLabels","safeArea","style","testID","styles","insets","allowFontScaling","barWidth","setBarWidth","slide","Value","current","placed","activeIndex","Math","max","findIndex","key","itemWidth","length","to","setValue","spring","toValue","useNativeDriver","friction","tension","start","onLayout","e","next","nativeEvent","layout","width","renderContent","children","iconName","name","size","numberOfLines","accessibilityRole","paddingBottom","paddingTop","pointerEvents","transform","translateX","map","index","active","range","scale","interpolate","inputRange","outputRange","extrapolate","activeOpacity","onPress","accessibilityLabel","accessibilityState","selected","textLight","accessibilityElementsHidden","importantForAccessibility","absoluteFill","opacity","primaryText","undefined","displayName"],"sourceRoot":"../../../src","sources":["organisms/NavigationBar.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAChE,SACEC,QAAQ,EACRC,UAAU,EACVC,IAAI,EACJC,gBAAgB,EAChBC,IAAI,QAIC,cAAc;AACrB,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,qBAAqB;AACzF,SAASC,IAAI,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAyBrC,MAAMC,SAAS,GAAGZ,YAAY,CAAEa,KAAK,KAAM;EACzCC,GAAG,EAAE;IACHC,aAAa,EAAE,KAAK;IACpBC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACC,OAAO;IACrCC,WAAW,EAAEN,KAAK,CAACI,MAAM,CAACG,MAAM;IAChCC,iBAAiB,EAAER,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC1CC,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG;EACxC,CAAC;EACDC,SAAS,EAAE;IAAEC,cAAc,EAAEhC,UAAU,CAACiC;EAAc,CAAC;EACvDC,MAAM,EAAE;IAAEC,iBAAiB,EAAEnC,UAAU,CAACiC;EAAc,CAAC;EACvDG,SAAS,EAAE;IACTC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAErB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC5BW,MAAM,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE;IAC/B;IACA;IACA;IACAY,IAAI,EAAEvB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGX,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE;IACvDW,YAAY,EAAExB,KAAK,CAACS,MAAM,CAACgB,MAAM,CAACC,EAAE;IACpCvB,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACuB;EAChC,CAAC;EACDC,IAAI,EAAE;IAAEC,IAAI,EAAE,CAAC;IAAEjB,eAAe,EAAEZ,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC;EAAG,CAAC;EAC3DmB,WAAW,EAAE;IAAEC,UAAU,EAAE,QAAQ;IAAEC,cAAc,EAAE,QAAQ;IAAEC,GAAG,EAAE;EAAE,CAAC;EACvEC,KAAK,EAAE;IAAEC,QAAQ,EAAEnC,KAAK,CAACS,MAAM,CAAC0B,QAAQ,CAACxB,EAAE;IAAEyB,UAAU,EAAEpC,KAAK,CAACS,MAAM,CAAC2B,UAAU,CAACC;EAAO,CAAC;EACzFC,KAAK,EAAE;IACLlB,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC,CAAC;IACPE,IAAI,EAAE,KAAK;IACXgB,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,EAAE;IACZC,MAAM,EAAE,EAAE;IACVjC,iBAAiB,EAAE,CAAC;IACpBgB,YAAY,EAAExB,KAAK,CAACS,MAAM,CAACgB,MAAM,CAACiB,IAAI;IACtCvC,eAAe,EAAEH,KAAK,CAACI,MAAM,CAACuC,KAAK;IACnCZ,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDY,QAAQ,EAAE;IAAEJ,QAAQ,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEpB,GAAG,EAAE,CAAC,CAAC;IAAEb,iBAAiB,EAAE;EAAE,CAAC;EACrEqC,SAAS,EAAE;IACTV,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAEpC,KAAK,CAACS,MAAM,CAAC2B,UAAU,CAACU,IAAI;IACxCC,KAAK,EAAE/C,KAAK,CAACI,MAAM,CAAC4C;EACtB;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,SAAS,GAAG,EAAE;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGxE,IAAI,CAC/B,CAAC;EACCyE,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRjC,QAAQ,GAAG,QAAQ;EACnBkC,UAAU,GAAG,IAAI;EACjBC,QAAQ,GAAG,IAAI;EACfC,KAAK;EACLC;AACkB,CAAC,KAAK;EACxB,MAAMzD,KAAK,GAAGT,QAAQ,CAAC,CAAC;EACxB,MAAMa,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMqE,MAAM,GAAG3D,SAAS,CAAC,CAAC;EAC1B,MAAM4D,MAAM,GAAGrE,SAAS,CAAC,CAAC;EAC1B,MAAMsE,gBAAgB,GAAGxE,mBAAmB,CAAC,CAAC;EAE9C,MAAM,CAACyE,QAAQ,EAAEC,WAAW,CAAC,GAAGjF,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAMkF,KAAK,GAAGnF,MAAM,CAAC,IAAIE,QAAQ,CAACkF,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EACnD,MAAMC,MAAM,GAAGtF,MAAM,CAAC,KAAK,CAAC;EAE5B,MAAMuF,WAAW,GAAGC,IAAI,CAACC,GAAG,CAC1B,CAAC,EACDlB,KAAK,CAACmB,SAAS,CAAE1C,IAAI,IAAKA,IAAI,CAAC2C,GAAG,KAAKnB,SAAS,CAClD,CAAC;EACD,MAAMoB,SAAS,GAAGrB,KAAK,CAACsB,MAAM,GAAG,CAAC,GAAGZ,QAAQ,GAAGV,KAAK,CAACsB,MAAM,GAAG,CAAC;EAEhE9F,SAAS,CAAC,MAAM;IACd,IAAI6F,SAAS,IAAI,CAAC,EAAE;IACpB,MAAME,EAAE,GAAGP,WAAW,GAAGK,SAAS;IAClC;IACA;IACA,IAAI,CAACN,MAAM,CAACD,OAAO,EAAE;MACnBC,MAAM,CAACD,OAAO,GAAG,IAAI;MACrBF,KAAK,CAACY,QAAQ,CAACD,EAAE,CAAC;MAClB;IACF;IACA5F,QAAQ,CAAC8F,MAAM,CAACb,KAAK,EAAE;MAAEc,OAAO,EAAEH,EAAE;MAAEI,eAAe,EAAE,IAAI;MAAEC,QAAQ,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAG,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EAClG,CAAC,EAAE,CAACd,WAAW,EAAEK,SAAS,EAAET,KAAK,CAAC,CAAC;EAEnC,MAAMmB,QAAQ,GAAIC,CAAoB,IAAK;IACzC,MAAMC,IAAI,GAAGD,CAAC,CAACE,WAAW,CAACC,MAAM,CAACC,KAAK,GAAGvF,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAG,CAAC;IACrE,IAAIyE,IAAI,KAAKvB,QAAQ,EAAEC,WAAW,CAACsB,IAAI,CAAC;EAC1C,CAAC;EAED,MAAMI,aAAa,GAAGA,CAAC5D,IAAuB,EAAEmB,KAAa,kBAC3DjD,KAAA,CAAAF,SAAA;IAAA6F,QAAA,GACG,CAAC,CAAC7D,IAAI,CAAC8D,QAAQ,iBAAIhG,IAAA,CAACF,IAAI;MAACmG,IAAI,EAAE/D,IAAI,CAAC8D,QAAS;MAACE,IAAI,EAAE3C,SAAU;MAACF,KAAK,EAAEA;IAAM,CAAE,CAAC,EAC/EO,UAAU,iBACT5D,IAAA,CAACV,IAAI;MAAC4E,gBAAgB,EAAEA,gBAAiB;MAACiC,aAAa,EAAE,CAAE;MAACrC,KAAK,EAAE,CAACE,MAAM,CAACxB,KAAK,EAAE;QAAEa;MAAM,CAAC,CAAE;MAAA0C,QAAA,EAC1F7D,IAAI,CAACM;IAAK,CACP,CACP;EAAA,CACD,CACH;EAED,oBACEpC,KAAA,CAACZ,IAAI;IACHuE,MAAM,EAAEA,MAAO;IACfyB,QAAQ,EAAEA,QAAS;IACnBY,iBAAiB,EAAC,SAAS;IAC3BtC,KAAK,EAAE,CACLE,MAAM,CAACzD,GAAG,EACVmB,QAAQ,KAAK,QAAQ,GAAGsC,MAAM,CAAC5C,SAAS,GAAG4C,MAAM,CAACzC,MAAM,EACxDsC,QAAQ,IAAInC,QAAQ,KAAK,QAAQ,IAAI;MAAE2E,aAAa,EAAE/F,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAG8C,MAAM,CAACrC;IAAO,CAAC,EAC/FiC,QAAQ,IAAInC,QAAQ,KAAK,KAAK,IAAI;MAAE4E,UAAU,EAAEhG,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAG8C,MAAM,CAACtC;IAAI,CAAC,EACtFmC,KAAK,CACL;IAAAiC,QAAA,GAEDjB,SAAS,GAAG,CAAC,iBACZ9E,IAAA,CAACZ,QAAQ,CAACI,IAAI;MACZuE,MAAM,EAAC,0BAA0B;MACjCwC,aAAa,EAAC,MAAM;MACpBzC,KAAK,EAAE,CACLE,MAAM,CAACvC,SAAS,EAChBoC,QAAQ,IAAInC,QAAQ,KAAK,QAAQ,IAAI;QAAEE,MAAM,EAAEtB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGgD,MAAM,CAACrC;MAAO,CAAC,EACxFiC,QAAQ,IAAInC,QAAQ,KAAK,KAAK,IAAI;QAAEC,GAAG,EAAErB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,EAAE,GAAGgD,MAAM,CAACtC;MAAI,CAAC,EAC/E;QACEkE,KAAK,EAAEf,SAAS,GAAGxE,KAAK,CAACS,MAAM,CAACC,OAAO,CAACG,EAAE,GAAG,CAAC;QAC9CqF,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEpC;QAAM,CAAC;MACnC,CAAC;IACD,CACH,CACF,EAEAZ,KAAK,CAACiD,GAAG,CAAC,CAACxE,IAAI,EAAEyE,KAAK,KAAK;MAC1B,MAAMC,MAAM,GAAGD,KAAK,KAAKlC,WAAW;MACpC,MAAMoC,KAAK,GAAG,CAAC,CAACF,KAAK,GAAG,CAAC,IAAI7B,SAAS,EAAE6B,KAAK,GAAG7B,SAAS,EAAE,CAAC6B,KAAK,GAAG,CAAC,IAAI7B,SAAS,CAAC;MACnF,MAAMgC,KAAK,GACThC,SAAS,GAAG,CAAC,GACTT,KAAK,CAAC0C,WAAW,CAAC;QAAEC,UAAU,EAAEH,KAAK;QAAEI,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;QAAEC,WAAW,EAAE;MAAQ,CAAC,CAAC,GACzF,CAAC;MACP,MAAMC,aAAa,GACjBrC,SAAS,GAAG,CAAC,GACTT,KAAK,CAAC0C,WAAW,CAAC;QAAEC,UAAU,EAAEH,KAAK;QAAEI,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAAEC,WAAW,EAAE;MAAQ,CAAC,CAAC,GACtF,CAAC;MAEP,oBACElH,IAAA,CAACT,gBAAgB;QAEfuE,KAAK,EAAEE,MAAM,CAAC9B,IAAK;QACnBiF,aAAa,EAAE,GAAI;QACnBC,OAAO,EAAEA,CAAA,KAAMzD,QAAQ,CAACzB,IAAI,CAAC2C,GAAG,CAAE;QAClCuB,iBAAiB,EAAC,KAAK;QACvBiB,kBAAkB,EAAEnF,IAAI,CAACM,KAAM;QAC/B8E,kBAAkB,EAAE;UAAEC,QAAQ,EAAEX;QAAO,CAAE;QAAAb,QAAA,eAEzC3F,KAAA,CAAChB,QAAQ,CAACI,IAAI;UAACsE,KAAK,EAAE,CAACE,MAAM,CAAC5B,WAAW,EAAE;YAAEoE,SAAS,EAAE,CAAC;cAAEM;YAAM,CAAC;UAAE,CAAC,CAAE;UAAAf,QAAA,GACpED,aAAa,CAAC5D,IAAI,EAAExB,MAAM,CAAC8G,SAAS,CAAC,eAEtCxH,IAAA,CAACZ,QAAQ,CAACI,IAAI;YACZ+G,aAAa,EAAC,MAAM;YACpBkB,2BAA2B;YAC3BC,yBAAyB,EAAC,qBAAqB;YAC/C5D,KAAK,EAAE,CAACzE,UAAU,CAACsI,YAAY,EAAE3D,MAAM,CAAC5B,WAAW,EAAE;cAAEwF,OAAO,EAAET;YAAc,CAAC,CAAE;YAAApB,QAAA,EAEhFD,aAAa,CAAC5D,IAAI,EAAExB,MAAM,CAACmH,WAAW;UAAC,CAC3B,CAAC,EAEf3F,IAAI,CAACU,KAAK,KAAKkF,SAAS,iBACvB9H,IAAA,CAACR,IAAI;YAACsE,KAAK,EAAE,CAACE,MAAM,CAACpB,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAK,IAAI,IAAIoB,MAAM,CAACd,QAAQ,CAAE;YAAA6C,QAAA,EACjE7D,IAAI,CAACU,KAAK,KAAK,IAAI,iBAClB5C,IAAA,CAACV,IAAI;cAAC4E,gBAAgB,EAAE,KAAM;cAACJ,KAAK,EAAEE,MAAM,CAACb,SAAU;cAAA4C,QAAA,EACpD7D,IAAI,CAACU;YAAK,CACP;UACP,CACG,CACP;QAAA,CACY;MAAC,GA7BXV,IAAI,CAAC2C,GA8BM,CAAC;IAEvB,CAAC,CAAC;EAAA,CACE,CAAC;AAEX,CACF,CAAC;AACDrB,aAAa,CAACuE,WAAW,GAAG,eAAe","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/organisms/NavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/organisms/NavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AACjE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiDD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,6GAUrB,kBAAkB,uBA6HtB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "orn-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Fast, tree-shakeable, atomic-design component library for React Native. Zero runtime dependencies.",
|
|
5
5
|
"author": "David Trujillo <davot098@gmail.com>",
|
|
6
6
|
"main": "lib/commonjs/index.js",
|
package/registry/index.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"path": "organisms/NavigationBar.tsx",
|
|
12
|
-
"content": "import React, { memo, useEffect, useRef, useState } from 'react';\nimport {\n Animated,\n StyleSheet,\n Text,\n TouchableOpacity,\n View,\n type LayoutChangeEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useInsets, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface NavigationBarItem {\n key: string;\n label: string;\n iconName?: IconName;\n /** Contador sobre el ícono. `true` pinta sólo el punto. */\n badge?: number | string | true;\n}\n\nexport interface NavigationBarProps {\n items: NavigationBarItem[];\n activeKey: string;\n onChange: (key: string) => void;\n /** Borde de la pantalla donde vive la barra. @default 'bottom' */\n position?: 'bottom' | 'top';\n /** @default true */\n showLabels?: boolean;\n /** Suma el inset de safe area del borde donde vive la barra. @default true */\n safeArea?: boolean;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n bar: {\n flexDirection: 'row',\n backgroundColor: theme.colors.surface,\n borderColor: theme.colors.border,\n paddingHorizontal: theme.tokens.spacing.xs,\n paddingVertical: theme.tokens.spacing.sm,\n },\n barBottom: { borderTopWidth: StyleSheet.hairlineWidth },\n barTop: { borderBottomWidth: StyleSheet.hairlineWidth },\n indicator: {\n position: 'absolute',\n top: theme.tokens.spacing.xs,\n bottom: theme.tokens.spacing.xs,\n left: theme.tokens.spacing.sm,\n borderRadius: theme.tokens.radius.lg,\n backgroundColor: theme.colors.primarySoft,\n },\n item: { flex: 1, paddingVertical: theme.tokens.spacing.xs },\n itemContent: { alignItems: 'center', justifyContent: 'center', gap: 2 },\n label: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.medium },\n badge: {\n position: 'absolute',\n top: -4,\n left: '50%',\n marginLeft: 4,\n minWidth: 16,\n height: 16,\n paddingHorizontal: 4,\n borderRadius: theme.tokens.radius.full,\n backgroundColor: theme.colors.error,\n alignItems: 'center',\n justifyContent: 'center',\n },\n badgeDot: { minWidth: 10, height: 10, top: -2, paddingHorizontal: 0 },\n badgeText: {\n fontSize: 10,\n fontWeight: theme.tokens.fontWeight.bold,\n color: theme.colors.onError,\n },\n}));\n\nconst ICON_SIZE = 22;\n\n/**\n * NavigationBar\n * Barra de navegación por pestañas con la misma apariencia y las mismas\n * transiciones en iOS y Android: el indicador se desliza hasta la pestaña\n * activa y su contenido crece y toma el color de acento con un cross-fade.\n * No navega por su cuenta — reporta la pestaña tocada y el consumidor decide.\n */\nexport const NavigationBar = memo(\n ({\n items,\n activeKey,\n onChange,\n position = 'bottom',\n showLabels = true,\n safeArea = true,\n style,\n testID,\n }: NavigationBarProps) => {\n const theme = useTheme();\n const colors = useColors();\n const styles = useStyles();\n const insets = useInsets();\n const allowFontScaling = useAllowFontScaling();\n\n const [barWidth, setBarWidth] = useState(0);\n const slide = useRef(new Animated.Value(0)).current;\n const placed = useRef(false);\n\n const activeIndex = Math.max(\n 0,\n items.findIndex((item) => item.key === activeKey)\n );\n const itemWidth = items.length > 0 ? barWidth / items.length : 0;\n\n useEffect(() => {\n if (itemWidth <= 0) return;\n const to = activeIndex * itemWidth;\n // En el primer layout el indicador aparece en su lugar; animarlo desde 0\n // sería un deslizamiento que el usuario no pidió.\n if (!placed.current) {\n placed.current = true;\n slide.setValue(to);\n return;\n }\n Animated.spring(slide, { toValue: to, useNativeDriver: true, friction: 9, tension: 90 }).start();\n }, [activeIndex, itemWidth, slide]);\n\n const onLayout = (e: LayoutChangeEvent) => {\n const next = e.nativeEvent.layout.width - theme.tokens.spacing.xs * 2;\n if (next !== barWidth) setBarWidth(next);\n };\n\n const renderContent = (item: NavigationBarItem, color: string) => (\n <>\n {!!item.iconName && <Icon name={item.iconName} size={ICON_SIZE} color={color} />}\n {showLabels && (\n <Text allowFontScaling={allowFontScaling} numberOfLines={1} style={[styles.label, { color }]}>\n {item.label}\n </Text>\n )}\n </>\n );\n\n return (\n <View\n testID={testID}\n onLayout={onLayout}\n accessibilityRole=\"tablist\"\n style={[\n styles.bar,\n position === 'bottom' ? styles.barBottom : styles.barTop,\n safeArea && position === 'bottom' && { paddingBottom: theme.tokens.spacing.sm + insets.bottom },\n safeArea && position === 'top' && { paddingTop: theme.tokens.spacing.sm + insets.top },\n style,\n ]}\n >\n {itemWidth > 0 && (\n <Animated.View\n testID=\"navigation-bar-indicator\"\n pointerEvents=\"none\"\n style={[\n styles.indicator,\n safeArea && position === 'bottom' && { bottom: theme.tokens.spacing.xs + insets.bottom },\n safeArea && position === 'top' && { top: theme.tokens.spacing.xs + insets.top },\n {\n width: itemWidth - theme.tokens.spacing.sm * 2,\n transform: [{ translateX: slide }],\n },\n ]}\n />\n )}\n\n {items.map((item, index) => {\n const active = index === activeIndex;\n const range = [(index - 1) * itemWidth, index * itemWidth, (index + 1) * itemWidth];\n const scale =\n itemWidth > 0\n ? slide.interpolate({ inputRange: range, outputRange: [1, 1.08, 1], extrapolate: 'clamp' })\n : 1;\n const activeOpacity =\n itemWidth > 0\n ? slide.interpolate({ inputRange: range, outputRange: [0, 1, 0], extrapolate: 'clamp' })\n : 0;\n\n return (\n <TouchableOpacity\n key={item.key}\n style={styles.item}\n activeOpacity={0.7}\n onPress={() => onChange(item.key)}\n accessibilityRole=\"tab\"\n accessibilityLabel={item.label}\n accessibilityState={{ selected: active }}\n >\n <Animated.View style={[styles.itemContent, { transform: [{ scale }] }]}>\n {renderContent(item, colors.textLight)}\n {/* Copia decorativa: sin ocultarla, el lector lee el label dos veces. */}\n <Animated.View\n pointerEvents=\"none\"\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n style={[StyleSheet.absoluteFill, styles.itemContent, { opacity: activeOpacity }]}\n >\n {renderContent(item, colors.primaryText)}\n </Animated.View>\n\n {item.badge !== undefined && (\n <View style={[styles.badge, item.badge === true && styles.badgeDot]}>\n {item.badge !== true && (\n <Text allowFontScaling={false} style={styles.badgeText}>\n {item.badge}\n </Text>\n )}\n </View>\n )}\n </Animated.View>\n </TouchableOpacity>\n );\n })}\n </View>\n );\n }\n);\nNavigationBar.displayName = 'NavigationBar';\n"
|
|
12
|
+
"content": "import React, { memo, useEffect, useRef, useState } from 'react';\nimport {\n Animated,\n StyleSheet,\n Text,\n TouchableOpacity,\n View,\n type LayoutChangeEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useInsets, useTheme } from '../theme/UIProvider';\nimport { Icon } from '../icons/Icon';\nimport type { IconName } from '../icons/types';\n\nexport interface NavigationBarItem {\n key: string;\n label: string;\n iconName?: IconName;\n /** Contador sobre el ícono. `true` pinta sólo el punto. */\n badge?: number | string | true;\n}\n\nexport interface NavigationBarProps {\n items: NavigationBarItem[];\n activeKey: string;\n onChange: (key: string) => void;\n /** Borde de la pantalla donde vive la barra. @default 'bottom' */\n position?: 'bottom' | 'top';\n /** @default true */\n showLabels?: boolean;\n /** Suma el inset de safe area del borde donde vive la barra. @default true */\n safeArea?: boolean;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\nconst useStyles = createStyles((theme) => ({\n bar: {\n flexDirection: 'row',\n backgroundColor: theme.colors.surface,\n borderColor: theme.colors.border,\n paddingHorizontal: theme.tokens.spacing.xs,\n paddingVertical: theme.tokens.spacing.sm,\n },\n barBottom: { borderTopWidth: StyleSheet.hairlineWidth },\n barTop: { borderBottomWidth: StyleSheet.hairlineWidth },\n indicator: {\n position: 'absolute',\n top: theme.tokens.spacing.xs,\n bottom: theme.tokens.spacing.xs,\n // El indicador se posiciona contra el borde de la barra, no contra su caja\n // interna: al `left` hay que sumarle el padding horizontal para que quede\n // centrado sobre la pestaña y no corrido hacia la izquierda.\n left: theme.tokens.spacing.xs + theme.tokens.spacing.sm,\n borderRadius: theme.tokens.radius.lg,\n backgroundColor: theme.colors.primarySoft,\n },\n item: { flex: 1, paddingVertical: theme.tokens.spacing.xs },\n itemContent: { alignItems: 'center', justifyContent: 'center', gap: 2 },\n label: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.medium },\n badge: {\n position: 'absolute',\n top: -4,\n left: '50%',\n marginLeft: 4,\n minWidth: 16,\n height: 16,\n paddingHorizontal: 4,\n borderRadius: theme.tokens.radius.full,\n backgroundColor: theme.colors.error,\n alignItems: 'center',\n justifyContent: 'center',\n },\n badgeDot: { minWidth: 10, height: 10, top: -2, paddingHorizontal: 0 },\n badgeText: {\n fontSize: 10,\n fontWeight: theme.tokens.fontWeight.bold,\n color: theme.colors.onError,\n },\n}));\n\nconst ICON_SIZE = 22;\n\n/**\n * NavigationBar\n * Barra de navegación por pestañas con la misma apariencia y las mismas\n * transiciones en iOS y Android: el indicador se desliza hasta la pestaña\n * activa y su contenido crece y toma el color de acento con un cross-fade.\n * No navega por su cuenta — reporta la pestaña tocada y el consumidor decide.\n */\nexport const NavigationBar = memo(\n ({\n items,\n activeKey,\n onChange,\n position = 'bottom',\n showLabels = true,\n safeArea = true,\n style,\n testID,\n }: NavigationBarProps) => {\n const theme = useTheme();\n const colors = useColors();\n const styles = useStyles();\n const insets = useInsets();\n const allowFontScaling = useAllowFontScaling();\n\n const [barWidth, setBarWidth] = useState(0);\n const slide = useRef(new Animated.Value(0)).current;\n const placed = useRef(false);\n\n const activeIndex = Math.max(\n 0,\n items.findIndex((item) => item.key === activeKey)\n );\n const itemWidth = items.length > 0 ? barWidth / items.length : 0;\n\n useEffect(() => {\n if (itemWidth <= 0) return;\n const to = activeIndex * itemWidth;\n // En el primer layout el indicador aparece en su lugar; animarlo desde 0\n // sería un deslizamiento que el usuario no pidió.\n if (!placed.current) {\n placed.current = true;\n slide.setValue(to);\n return;\n }\n Animated.spring(slide, { toValue: to, useNativeDriver: true, friction: 9, tension: 90 }).start();\n }, [activeIndex, itemWidth, slide]);\n\n const onLayout = (e: LayoutChangeEvent) => {\n const next = e.nativeEvent.layout.width - theme.tokens.spacing.xs * 2;\n if (next !== barWidth) setBarWidth(next);\n };\n\n const renderContent = (item: NavigationBarItem, color: string) => (\n <>\n {!!item.iconName && <Icon name={item.iconName} size={ICON_SIZE} color={color} />}\n {showLabels && (\n <Text allowFontScaling={allowFontScaling} numberOfLines={1} style={[styles.label, { color }]}>\n {item.label}\n </Text>\n )}\n </>\n );\n\n return (\n <View\n testID={testID}\n onLayout={onLayout}\n accessibilityRole=\"tablist\"\n style={[\n styles.bar,\n position === 'bottom' ? styles.barBottom : styles.barTop,\n safeArea && position === 'bottom' && { paddingBottom: theme.tokens.spacing.sm + insets.bottom },\n safeArea && position === 'top' && { paddingTop: theme.tokens.spacing.sm + insets.top },\n style,\n ]}\n >\n {itemWidth > 0 && (\n <Animated.View\n testID=\"navigation-bar-indicator\"\n pointerEvents=\"none\"\n style={[\n styles.indicator,\n safeArea && position === 'bottom' && { bottom: theme.tokens.spacing.xs + insets.bottom },\n safeArea && position === 'top' && { top: theme.tokens.spacing.xs + insets.top },\n {\n width: itemWidth - theme.tokens.spacing.sm * 2,\n transform: [{ translateX: slide }],\n },\n ]}\n />\n )}\n\n {items.map((item, index) => {\n const active = index === activeIndex;\n const range = [(index - 1) * itemWidth, index * itemWidth, (index + 1) * itemWidth];\n const scale =\n itemWidth > 0\n ? slide.interpolate({ inputRange: range, outputRange: [1, 1.08, 1], extrapolate: 'clamp' })\n : 1;\n const activeOpacity =\n itemWidth > 0\n ? slide.interpolate({ inputRange: range, outputRange: [0, 1, 0], extrapolate: 'clamp' })\n : 0;\n\n return (\n <TouchableOpacity\n key={item.key}\n style={styles.item}\n activeOpacity={0.7}\n onPress={() => onChange(item.key)}\n accessibilityRole=\"tab\"\n accessibilityLabel={item.label}\n accessibilityState={{ selected: active }}\n >\n <Animated.View style={[styles.itemContent, { transform: [{ scale }] }]}>\n {renderContent(item, colors.textLight)}\n {/* Copia decorativa: sin ocultarla, el lector lee el label dos veces. */}\n <Animated.View\n pointerEvents=\"none\"\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n style={[StyleSheet.absoluteFill, styles.itemContent, { opacity: activeOpacity }]}\n >\n {renderContent(item, colors.primaryText)}\n </Animated.View>\n\n {item.badge !== undefined && (\n <View style={[styles.badge, item.badge === true && styles.badgeDot]}>\n {item.badge !== true && (\n <Text allowFontScaling={false} style={styles.badgeText}>\n {item.badge}\n </Text>\n )}\n </View>\n )}\n </Animated.View>\n </TouchableOpacity>\n );\n })}\n </View>\n );\n }\n);\nNavigationBar.displayName = 'NavigationBar';\n"
|
|
13
13
|
}
|
|
14
14
|
],
|
|
15
15
|
"registryDependencies": [
|
|
@@ -50,7 +50,10 @@ const useStyles = createStyles((theme) => ({
|
|
|
50
50
|
position: 'absolute',
|
|
51
51
|
top: theme.tokens.spacing.xs,
|
|
52
52
|
bottom: theme.tokens.spacing.xs,
|
|
53
|
-
|
|
53
|
+
// El indicador se posiciona contra el borde de la barra, no contra su caja
|
|
54
|
+
// interna: al `left` hay que sumarle el padding horizontal para que quede
|
|
55
|
+
// centrado sobre la pestaña y no corrido hacia la izquierda.
|
|
56
|
+
left: theme.tokens.spacing.xs + theme.tokens.spacing.sm,
|
|
54
57
|
borderRadius: theme.tokens.radius.lg,
|
|
55
58
|
backgroundColor: theme.colors.primarySoft,
|
|
56
59
|
},
|