react-native-system-ui 1.0.4 → 1.0.5
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 +2 -2
- package/dist/cjs/components/action-sheet/ActionSheet.js +1 -1
- package/dist/cjs/components/action-sheet/types.js +1 -0
- package/dist/cjs/components/area/types.js +1 -0
- package/dist/cjs/components/avatar/types.js +1 -0
- package/dist/cjs/components/badge/types.js +1 -0
- package/dist/cjs/components/button/types.js +1 -0
- package/dist/cjs/components/calendar/types.js +1 -0
- package/dist/cjs/components/cascader/types.js +1 -0
- package/dist/cjs/components/cell/types.js +1 -0
- package/dist/cjs/components/checkbox/Checkbox.js +1 -1
- package/dist/cjs/components/checkbox/types.js +1 -0
- package/dist/cjs/components/circle/types.js +1 -0
- package/dist/cjs/components/collapse/Collapse.js +1 -1
- package/dist/cjs/components/collapse/types.js +1 -0
- package/dist/cjs/components/config-provider/locale/types.js +1 -0
- package/dist/cjs/components/config-provider/types.js +1 -0
- package/dist/cjs/components/count-down/types.js +1 -0
- package/dist/cjs/components/datetime-picker/types.js +1 -0
- package/dist/cjs/components/dialog/Dialog.js +1 -1
- package/dist/cjs/components/dialog/types.js +1 -0
- package/dist/cjs/components/divider/types.js +1 -0
- package/dist/cjs/components/empty/types.js +1 -0
- package/dist/cjs/components/error-boundary/types.js +1 -0
- package/dist/cjs/components/field/types.js +1 -0
- package/dist/cjs/components/flex/types.js +1 -0
- package/dist/cjs/components/form/Form.js +1 -1
- package/dist/cjs/components/form/FormItem.js +1 -1
- package/dist/cjs/components/form/FormList.js +1 -1
- package/dist/cjs/components/form/types.js +1 -0
- package/dist/cjs/components/grid/types.js +1 -0
- package/dist/cjs/components/image/types.js +1 -0
- package/dist/cjs/components/image-preview/ImagePreview.js +1 -1
- package/dist/cjs/components/image-preview/types.js +1 -0
- package/dist/cjs/components/input/types.js +1 -0
- package/dist/cjs/components/loading/types.js +1 -0
- package/dist/cjs/components/nav-bar/NavBar.js +1 -1
- package/dist/cjs/components/nav-bar/types.js +1 -0
- package/dist/cjs/components/notice-bar/NoticeBar.js +1 -1
- package/dist/cjs/components/notice-bar/types.js +1 -0
- package/dist/cjs/components/notify/types.js +1 -0
- package/dist/cjs/components/number-keyboard/types.js +1 -0
- package/dist/cjs/components/overlay/types.js +1 -0
- package/dist/cjs/components/password-input/types.js +1 -0
- package/dist/cjs/components/picker/Picker.js +1 -1
- package/dist/cjs/components/picker/types.js +1 -0
- package/dist/cjs/components/popup/Popup.js +1 -1
- package/dist/cjs/components/popup/types.js +1 -0
- package/dist/cjs/components/portal/types.js +1 -0
- package/dist/cjs/components/progress/types.js +1 -0
- package/dist/cjs/components/radio/types.js +1 -0
- package/dist/cjs/components/safe-area-view/types.js +1 -0
- package/dist/cjs/components/search/types.js +1 -0
- package/dist/cjs/components/selector/types.js +1 -0
- package/dist/cjs/components/share-sheet/ShareSheet.js +1 -1
- package/dist/cjs/components/share-sheet/types.js +1 -0
- package/dist/cjs/components/sidebar/types.js +1 -0
- package/dist/cjs/components/skeleton/types.js +1 -0
- package/dist/cjs/components/slider/Slider.js +1 -1
- package/dist/cjs/components/slider/types.js +1 -0
- package/dist/cjs/components/space/types.js +1 -0
- package/dist/cjs/components/stepper/types.js +1 -0
- package/dist/cjs/components/swiper/types.js +1 -0
- package/dist/cjs/components/switch/types.js +1 -0
- package/dist/cjs/components/tabbar/types.js +1 -0
- package/dist/cjs/components/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/types.js +1 -0
- package/dist/cjs/components/tag/types.js +1 -0
- package/dist/cjs/components/theme.js +1 -0
- package/dist/cjs/components/toast/Toast.js +1 -1
- package/dist/cjs/components/toast/types.js +1 -0
- package/dist/cjs/components/typography/types.js +1 -0
- package/dist/cjs/components/water-mark/types.js +1 -0
- package/dist/es/components/action-sheet/ActionSheet.js +1 -1
- package/dist/es/components/action-sheet/types.js +1 -0
- package/dist/es/components/area/types.js +1 -0
- package/dist/es/components/avatar/types.js +1 -0
- package/dist/es/components/badge/types.js +1 -0
- package/dist/es/components/button/types.js +1 -0
- package/dist/es/components/calendar/types.js +1 -0
- package/dist/es/components/cascader/types.js +1 -0
- package/dist/es/components/cell/types.js +1 -0
- package/dist/es/components/checkbox/Checkbox.js +1 -1
- package/dist/es/components/checkbox/types.js +1 -0
- package/dist/es/components/circle/types.js +1 -0
- package/dist/es/components/collapse/Collapse.js +1 -1
- package/dist/es/components/collapse/types.js +1 -0
- package/dist/es/components/config-provider/locale/types.js +1 -0
- package/dist/es/components/config-provider/types.js +1 -0
- package/dist/es/components/count-down/types.js +1 -0
- package/dist/es/components/datetime-picker/types.js +1 -0
- package/dist/es/components/dialog/Dialog.js +1 -1
- package/dist/es/components/dialog/types.js +1 -0
- package/dist/es/components/divider/types.js +1 -0
- package/dist/es/components/empty/types.js +1 -0
- package/dist/es/components/error-boundary/types.js +1 -0
- package/dist/es/components/field/types.js +1 -0
- package/dist/es/components/flex/types.js +1 -0
- package/dist/es/components/form/Form.js +1 -1
- package/dist/es/components/form/FormItem.js +1 -1
- package/dist/es/components/form/FormList.js +1 -1
- package/dist/es/components/form/types.js +1 -0
- package/dist/es/components/grid/types.js +1 -0
- package/dist/es/components/image/types.js +1 -0
- package/dist/es/components/image-preview/ImagePreview.js +1 -1
- package/dist/es/components/image-preview/types.js +1 -0
- package/dist/es/components/input/types.js +1 -0
- package/dist/es/components/loading/types.js +1 -0
- package/dist/es/components/nav-bar/NavBar.js +1 -1
- package/dist/es/components/nav-bar/types.js +1 -0
- package/dist/es/components/notice-bar/NoticeBar.js +1 -1
- package/dist/es/components/notice-bar/types.js +1 -0
- package/dist/es/components/notify/types.js +1 -0
- package/dist/es/components/number-keyboard/types.js +1 -0
- package/dist/es/components/overlay/types.js +1 -0
- package/dist/es/components/password-input/types.js +1 -0
- package/dist/es/components/picker/Picker.js +1 -1
- package/dist/es/components/picker/types.js +1 -0
- package/dist/es/components/popup/Popup.js +1 -1
- package/dist/es/components/popup/types.js +1 -0
- package/dist/es/components/portal/types.js +1 -0
- package/dist/es/components/progress/types.js +1 -0
- package/dist/es/components/radio/types.js +1 -0
- package/dist/es/components/safe-area-view/types.js +1 -0
- package/dist/es/components/search/types.js +1 -0
- package/dist/es/components/selector/types.js +1 -0
- package/dist/es/components/share-sheet/ShareSheet.js +1 -1
- package/dist/es/components/share-sheet/types.js +1 -0
- package/dist/es/components/sidebar/types.js +1 -0
- package/dist/es/components/skeleton/types.js +1 -0
- package/dist/es/components/slider/Slider.js +1 -1
- package/dist/es/components/slider/types.js +1 -0
- package/dist/es/components/space/types.js +1 -0
- package/dist/es/components/stepper/types.js +1 -0
- package/dist/es/components/swiper/types.js +1 -0
- package/dist/es/components/switch/types.js +1 -0
- package/dist/es/components/tabbar/types.js +1 -0
- package/dist/es/components/tabs/Tabs.js +1 -1
- package/dist/es/components/tabs/types.js +1 -0
- package/dist/es/components/tag/types.js +1 -0
- package/dist/es/components/theme.js +1 -0
- package/dist/es/components/toast/Toast.js +1 -1
- package/dist/es/components/toast/types.js +1 -0
- package/dist/es/components/typography/types.js +1 -0
- package/dist/es/components/water-mark/types.js +1 -0
- package/dist/types/components/action-sheet/types.d.ts +87 -0
- package/dist/types/components/area/types.d.ts +20 -0
- package/dist/types/components/avatar/types.d.ts +62 -0
- package/dist/types/components/badge/types.d.ts +57 -0
- package/dist/types/components/button/types.d.ts +109 -0
- package/dist/types/components/calendar/types.d.ts +111 -0
- package/dist/types/components/cascader/types.d.ts +142 -0
- package/dist/types/components/cell/types.d.ts +112 -0
- package/dist/types/components/checkbox/types.d.ts +99 -0
- package/dist/types/components/circle/types.d.ts +51 -0
- package/dist/types/components/collapse/types.d.ts +45 -0
- package/dist/types/components/config-provider/locale/types.d.ts +130 -0
- package/dist/types/components/config-provider/types.d.ts +10 -0
- package/dist/types/components/count-down/types.d.ts +29 -0
- package/dist/types/components/datetime-picker/types.d.ts +38 -0
- package/dist/types/components/dialog/types.d.ts +70 -0
- package/dist/types/components/divider/types.d.ts +48 -0
- package/dist/types/components/empty/types.d.ts +44 -0
- package/dist/types/components/error-boundary/types.d.ts +18 -0
- package/dist/types/components/field/types.d.ts +86 -0
- package/dist/types/components/flex/types.d.ts +37 -0
- package/dist/types/components/form/Form.d.ts +6 -0
- package/dist/types/components/form/types.d.ts +68 -0
- package/dist/types/components/grid/types.d.ts +77 -0
- package/dist/types/components/image/types.d.ts +53 -0
- package/dist/types/components/image-preview/types.d.ts +55 -0
- package/dist/types/components/input/types.d.ts +42 -0
- package/dist/types/components/loading/types.d.ts +32 -0
- package/dist/types/components/nav-bar/types.d.ts +67 -0
- package/dist/types/components/notice-bar/types.d.ts +26 -0
- package/dist/types/components/notify/types.d.ts +64 -0
- package/dist/types/components/number-keyboard/types.d.ts +35 -0
- package/dist/types/components/overlay/types.d.ts +13 -0
- package/dist/types/components/password-input/types.d.ts +35 -0
- package/dist/types/components/picker/types.d.ts +73 -0
- package/dist/types/components/popup/types.d.ts +41 -0
- package/dist/types/components/portal/types.d.ts +1 -0
- package/dist/types/components/progress/types.d.ts +51 -0
- package/dist/types/components/radio/types.d.ts +95 -0
- package/dist/types/components/safe-area-view/types.d.ts +1 -0
- package/dist/types/components/search/types.d.ts +28 -0
- package/dist/types/components/selector/types.d.ts +74 -0
- package/dist/types/components/share-sheet/types.d.ts +26 -0
- package/dist/types/components/sidebar/types.d.ts +64 -0
- package/dist/types/components/skeleton/types.d.ts +45 -0
- package/dist/types/components/slider/types.d.ts +38 -0
- package/dist/types/components/space/types.d.ts +39 -0
- package/dist/types/components/stepper/types.d.ts +46 -0
- package/dist/types/components/swiper/types.d.ts +29 -0
- package/dist/types/components/switch/types.d.ts +33 -0
- package/dist/types/components/tabbar/types.d.ts +39 -0
- package/dist/types/components/tabs/types.d.ts +64 -0
- package/dist/types/components/tag/types.d.ts +69 -0
- package/dist/types/components/theme.d.ts +112 -0
- package/dist/types/components/toast/types.d.ts +1 -0
- package/dist/types/components/typography/types.d.ts +66 -0
- package/dist/types/components/water-mark/types.d.ts +58 -0
- package/package.json +3 -3
- package/dist/cjs/components/form/FormContext.js +0 -1
- package/dist/cjs/components/form/utils.js +0 -1
- package/dist/es/components/form/FormContext.js +0 -1
- package/dist/es/components/form/utils.js +0 -1
- package/dist/types/components/form/FormContext.d.ts +0 -2
- package/dist/types/components/form/utils.d.ts +0 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}import{useSlider,useSliderThumb}from"@react-native-aria/slider";import{isRTL}from"@react-native-aria/utils";import{useSliderState}from"@react-stately/slider";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,View}from"react-native";import{useSliderTokens}from"./tokens";import{parseNumber}from"../../utils/number";import{createHairlineView}from"../../utils/hairline";import{clamp,renderTextOrNode}from"../../utils";import{isFunction,isFiniteNumber,isText}from"../../utils/validate";import{useAriaPress}from"../../hooks";const isSameLayout=(e,t)=>e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y,normalizeValue=(e,t,r,n)=>{if(t){const t=Array.isArray(e)?e:isFiniteNumber(e)?[r,e]:[r,r],i=isFiniteNumber(t[0])?clamp(t[0],r,n):r,a=isFiniteNumber(t[1]??t[0])?clamp(t[1]??t[0],r,n):r;return i<=a?[i,a]:[a,i]}const i=Array.isArray(e)?e[0]:e;return[isFiniteNumber(i)?clamp(i,r,n):r]},toSliderValue=(e,t,r)=>{if(t){const t=e[0]??r;return[t,e[1]??t]}return e[0]??r},createAccessibilityProps=e=>{if(!e)return{};const{role:t,"aria-value":r,accessibilityActions:n,onAccessibilityAction:i,disabled:a}=e;return{accessible:!0,accessibilityRole:t??"adjustable",accessibilityValue:r,accessibilityActions:n,onAccessibilityAction:i,accessibilityState:{disabled:a}}},defaultNumberFormatter="undefined"!=typeof Intl&&isFunction(Intl.NumberFormat)?new Intl.NumberFormat:{format:e=>String(e)},START_KEYS=["onResponderGrant","onPanResponderGrant"],MOVE_KEYS=["onResponderMove","onPanResponderMove"],END_KEYS=["onResponderRelease","onResponderTerminate","onPanResponderRelease","onPanResponderTerminate"],useTrackLayout=()=>{const e=useRef(null),t=useRef(null),[r,n]=useState({width:0,height:0,x:0,y:0}),i=useCallback(r=>{const{layout:i}=r.nativeEvent,a={width:Math.max(i.width,1),height:Math.max(i.height,1),x:i.x??0,y:i.y??0};n(e=>isSameLayout(e,a)?e:a),"web"===Platform.OS&&"undefined"!=typeof requestAnimationFrame&&null==t.current&&(t.current=requestAnimationFrame(()=>{t.current=null;const r=e.current;r?.measureInWindow&&r.measureInWindow((e,t,r,i)=>{const a={width:Math.max(r,1),height:Math.max(i,1),x:e,y:t};n(e=>isSameLayout(e,a)?e:a)})}))},[]);return useEffect(()=>()=>{null!=t.current&&"function"==typeof cancelAnimationFrame&&cancelAnimationFrame(t.current),t.current=null},[]),{trackRef:e,trackLayout:r,handleTrackLayout:i}},ThumbNode=React.memo(({index:e,orientation:t,ariaReverse:r,trackLayout:n,isDisabled:i,state:a,size:o,activeColor:s,content:u,visualPercent:c,thumbBackgroundColor:l,thumbElevation:m,indicatorSize:d,indicatorColor:h,webGestureStyle:b,enhanceHandlers:f})=>{const p=useRef(null),{thumbProps:v,inputProps:y}=useSliderThumb({index:e,trackLayout:n,inputRef:p,isDisabled:i,orientation:t},a,r),g=v,R=f(g,e)??g??{},w=-o/2,x={width:o,height:o,borderRadius:o/2,borderColor:s,transform:[{translateX:w},{translateY:w}],..."vertical"===t?{top:`${c}%`,left:"50%"}:{left:`${c}%`,top:"50%"},...u?{}:{backgroundColor:l,elevation:m}},k={width:d,height:d,borderRadius:d/2,backgroundColor:h},E=createAccessibilityProps(y);return React.createElement(View,_extends({},R,E,{pointerEvents:i?"none":"auto",style:[u?S.thw:S.t,b,x]}),null!=u?isText(u)?renderTextOrNode(u,[]):u:React.createElement(View,{style:k}),!u&&React.createElement(View,{style:createHairlineView({position:"all",color:s,borderRadius:o/2})}))});ThumbNode.displayName="ThumbNode";const SliderImpl=e=>{const{value:t,min:r=0,max:n=100,step:i=1,range:a=!1,vertical:o=!1,reverse:s=!1,disabled:u=!1,readOnly:c=!1,activeColor:l,inactiveColor:m,barHeight:d,trackHeight:h,buttonSize:b,thumbSize:f,tokensOverride:p,button:v,leftButton:y,rightButton:g,thumb:R,leftThumb:w,rightThumb:x,ariaLabel:k,onChange:E,onChangeAfter:F,onDragStart:M,onDragEnd:C,style:T,onLayout:A,...N}=e,V=useSliderTokens(p),P=o?"vertical":"horizontal",{trackRef:z,trackLayout:L,handleTrackLayout:_}=useTrackLayout(),D=parseNumber(r,0),O=parseNumber(n,100),I=parseNumber(i,1),Y=I>0?I:1,K=Math.max(0,parseNumber(d??h,V.track.height)),j=Math.max(0,parseNumber(b??f,V.thumb.size)),H=u||c,$=l??V.colors.active,B=m??V.colors.inactive,q=Math.max(O-D,1e-5),G=normalizeValue(t,a,D,O),W=void 0!==t,X=useRef(E),J=useRef(F),Q=useRef(M),U=useRef(C);X.current=E,J.current=F,Q.current=M,U.current=C;const Z=useCallback(e=>toSliderValue(e,a,D),[a,D]),ee=useCallback(e=>{X.current?.(Z(e))},[Z]),te=useCallback(e=>{J.current?.(Z(e))},[Z]),re=useMemo(()=>({minValue:D,maxValue:O,step:Y,isDisabled:H,numberFormatter:defaultNumberFormatter,orientation:P,value:W?G:void 0,defaultValue:W?void 0:G,onChange:ee,onChangeEnd:te}),[H,ee,te,W,G,P,O,D,Y]),ne=useSliderState(re),ie="horizontal"===P?s||isRTL():s,ae="horizontal"===P?ie:s,{trackProps:oe}=useSlider({orientation:P,isDisabled:H,"aria-label":k??"Slider"},ne,L,ae),se=oe,{style:ue,onLayout:ce,...le}=se,me=useCallback(e=>{_(e),ce?.(e)},[_,ce]),de=useCallback(e=>{if(H)return;if(!ne.values.every((e,t)=>!ne.isThumbDragging(t)))return;const{locationX:t,locationY:r,pageX:n,pageY:i}=e.nativeEvent,a=isFiniteNumber(t)?t:isFiniteNumber(n)?n-(L.x??0):0,o=isFiniteNumber(r)?r:isFiniteNumber(i)?i-(L.y??0):0,u="vertical"===P?L.height:L.width,c=("vertical"===P?o:a)/Math.max(u,1),l="vertical"===P?s?c:1-c:ie?1-c:c,m=ne.getPercentValue(Math.min(1,Math.max(0,l))),d=ne.values.reduce((e,t,r)=>Math.abs(t-m)<Math.abs(ne.values[e]-m)?r:e,0);d>=0&&ne.isThumbEditable(d)&&(e.preventDefault?.(),ne.setFocusedThumb(d),ne.setThumbDragging(d,!0),ne.setThumbValue(d,m),ne.setThumbDragging(d,!1))},[H,P,s,ie,ne,L.height,L.width,L.x,L.y]),{interactionProps:he}=useAriaPress({disabled:H,onPress:de,extraProps:le}),be=Z(ne.values),fe=useRef(be),pe=useRef([]),ve=useRef([]),ye=useRef([]),ge=useRef([]),Se=useRef(new WeakMap);fe.current=be,useEffect(()=>()=>{const e="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;if(e){for(const t of ye.current)null!=t&&e(t);ye.current=[],ge.current=[]}},[]);const Re=useCallback((e,t)=>{if(!e)return e;if(!Q.current&&!U.current)return e;const r=Se.current.get(e),n=r?.get(t);if(n)return n;if(!(START_KEYS.some(t=>isFunction(e[t]))||MOVE_KEYS.some(t=>isFunction(e[t]))||END_KEYS.some(t=>isFunction(e[t]))))return e;const i={...e},a="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,o="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;for(const e of MOVE_KEYS){const r=i[e];if(!isFunction(r))continue;const n=r;i[e]=(...e)=>{a?(ge.current[t]=e,null==ye.current[t]&&(ye.current[t]=a(()=>{ye.current[t]=null;const e=ge.current[t];e&&(ge.current[t]=null,n(...e))}))):n(...e)}}const s=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{isFunction(r)&&r(...e),t(e[0])}},u=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{t(e[0]),isFunction(r)&&r(...e)}};for(const e of START_KEYS)s(e,()=>{pe.current[t]=!1,ve.current[t]=fe.current});for(const e of MOVE_KEYS)u(e,e=>{pe.current[t]||(pe.current[t]=!0,Q.current?.(e,ve.current[t]??fe.current))});const c=e=>{pe.current[t]&&(pe.current[t]=!1,ve.current[t]=void 0,U.current?.(e,fe.current));const r=ye.current[t];null!=r&&o&&(o(r),ye.current[t]=null),ge.current[t]=null};for(const e of END_KEYS)s(e,c);const l=r??new Map;return l.set(t,i),r||Se.current.set(e,l),i},[]),we=ne.values,xe=useMemo(()=>we.map(e=>((e??D)-D)/q*100),[D,q,we]),ke=useMemo(()=>xe.map(e=>"vertical"===P?s?e:100-e:ie?100-e:e),[P,s,ie,xe]),Ee=useMemo(()=>{const e=ke[0]??0,t=ke[1]??e;return a&&ke.length>1?{offset:Math.min(e,t),size:Math.max(e,t)-Math.min(e,t)}:("horizontal"===P?!ie:s)?{offset:0,size:e}:{offset:e,size:100-e}},[P,a,s,ie,ke]),{track:{radius:Fe}}=V,Me=useMemo(()=>({backgroundColor:$,borderRadius:Fe,..."vertical"===P?{left:0,width:"100%",height:`${Math.max(Ee.size,0)}%`,top:`${Math.max(Ee.offset,0)}%`}:{top:0,height:"100%",width:`${Math.max(Ee.size,0)}%`,left:`${Math.max(Ee.offset,0)}%`}}),[Ee.offset,Ee.size,P,$,Fe]),Ce=useMemo(()=>"vertical"===P?[S.tv,{width:K,backgroundColor:B,alignSelf:"center"}]:[S.th,{height:K,backgroundColor:B}],[P,B,K]),Te=isFunction(v)?v({value:be}):v??R,Ae=y??w??Te,Ne=g??x??Te,Ve=useCallback((e,t)=>t>1?0===e?Ae:Ne:Te,[Ae,Ne,Te]),Pe="web"===Platform.OS?{touchAction:"horizontal"===P?"pan-y":"pan-x",userSelect:"none"}:void 0,ze=[S.tp,"vertical"===P?S.tpv:null,Pe],Le=useCallback(e=>[ze,ue(e)],[ze,ue]),_e=ue&&isFunction(ue)?Le:[ze,ue],{spacing:{containerPaddingVertical:De},layout:{verticalMinHeight:Oe,verticalWidth:Ie},states:{disabledOpacity:Ye}}=V,Ke=[S.c,{paddingVertical:De},"vertical"===P&&[S.vc,{minHeight:Oe,width:Ie}],u&&{opacity:Ye},T];return React.createElement(View,_extends({style:Ke,onLayout:A},N),React.createElement(View,{style:[S.tw,"vertical"===P&&S.twv]},React.createElement(Pressable,_extends({ref:z},he,{disabled:H,onLayout:me,style:_e}),React.createElement(View,{style:[S.tb,{borderRadius:Fe},...Ce]},React.createElement(View,{style:[S.a,Me]}))),we.map((e,t)=>React.createElement(ThumbNode,{key:`thumb-${t}`,index:t,orientation:P,ariaReverse:ae,trackLayout:L,isDisabled:H,state:ne,size:j,activeColor:$,content:Ve(t,we.length),visualPercent:ke[t]??0,thumbBackgroundColor:V.colors.thumbBackground,thumbElevation:V.thumb.elevation,indicatorSize:V.thumb.indicatorSize,indicatorColor:V.colors.thumbIndicator,webGestureStyle:Pe,enhanceHandlers:Re}))))},S=StyleSheet.create({c:{position:"relative",justifyContent:"center",width:"100%"},vc:{height:"100%",alignItems:"center",paddingVertical:0},tw:{width:"100%",justifyContent:"center",position:"relative"},twv:{flex:1,justifyContent:"center",alignItems:"center",width:"100%"},tp:{width:"100%",justifyContent:"center"},tpv:{flex:1,alignItems:"center"},tb:{overflow:"hidden",position:"relative"},th:{width:"100%"},tv:{height:"100%"},a:{position:"absolute"},t:{position:"absolute",alignItems:"center",justifyContent:"center"},thw:{position:"absolute",alignItems:"center",justifyContent:"center"}});export const Slider=React.memo(SliderImpl);export default Slider;
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}import{useSlider,useSliderThumb}from"@react-native-aria/slider";import{isRTL}from"@react-native-aria/utils";import{useSliderState}from"@react-stately/slider";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,View}from"react-native";import{useSliderTokens}from"./tokens";import{parseNumber}from"../../utils/number";import{createHairlineView}from"../../utils/hairline";import{clamp,renderTextOrNode}from"../../utils";import{isFunction,isFiniteNumber,isText}from"../../utils/validate";import{useAriaPress}from"../../hooks";const isSameLayout=(e,t)=>e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y,normalizeValue=(e,t,r,n)=>t?(()=>{const t=Array.isArray(e)?e:isFiniteNumber(e)?[r,e]:[r,r],i=isFiniteNumber(t[0])?clamp(t[0],r,n):r,a=isFiniteNumber(t[1]??t[0])?clamp(t[1]??t[0],r,n):r;return i<=a?[i,a]:[a,i]})():(()=>{const t=Array.isArray(e)?e[0]:e;return[isFiniteNumber(t)?clamp(t,r,n):r]})(),toSliderValue=(e,t,r)=>t?[e[0]??r,e[1]??e[0]??r]:e[0]??r,createAccessibilityProps=e=>e?(()=>{const{role:t,"aria-value":r,accessibilityActions:n,onAccessibilityAction:i,disabled:a}=e;return{accessible:!0,accessibilityRole:t??"adjustable",accessibilityValue:r,accessibilityActions:n,onAccessibilityAction:i,accessibilityState:{disabled:a}}})():{},defaultNumberFormatter="undefined"!=typeof Intl&&isFunction(Intl.NumberFormat)?new Intl.NumberFormat:{format:e=>String(e)},START_KEYS=["onResponderGrant","onPanResponderGrant"],MOVE_KEYS=["onResponderMove","onPanResponderMove"],END_KEYS=["onResponderRelease","onResponderTerminate","onPanResponderRelease","onPanResponderTerminate"],useTrackLayout=()=>{const e=useRef(null),t=useRef(null),[r,n]=useState({width:0,height:0,x:0,y:0}),i=useCallback(r=>{const{layout:i}=r.nativeEvent,a={width:Math.max(i.width,1),height:Math.max(i.height,1),x:i.x??0,y:i.y??0};n(e=>isSameLayout(e,a)?e:a),"web"===Platform.OS&&"undefined"!=typeof requestAnimationFrame&&null==t.current&&(t.current=requestAnimationFrame(()=>{t.current=null;const r=e.current;r?.measureInWindow&&r.measureInWindow((e,t,r,i)=>{const a={width:Math.max(r,1),height:Math.max(i,1),x:e,y:t};n(e=>isSameLayout(e,a)?e:a)})}))},[]);return useEffect(()=>()=>{null!=t.current&&"function"==typeof cancelAnimationFrame&&cancelAnimationFrame(t.current),t.current=null},[]),{trackRef:e,trackLayout:r,handleTrackLayout:i}},ThumbNode=React.memo(({index:e,orientation:t,ariaReverse:r,trackLayout:n,isDisabled:i,state:a,size:o,activeColor:s,content:u,visualPercent:c,thumbBackgroundColor:l,thumbElevation:m,indicatorSize:d,indicatorColor:h,webGestureStyle:b,enhanceHandlers:f})=>{const p=useRef(null),{thumbProps:v,inputProps:y}=useSliderThumb({index:e,trackLayout:n,inputRef:p,isDisabled:i,orientation:t},a,r),g=v,R=f(g,e)??g??{},w=-o/2,x={width:o,height:o,borderRadius:o/2,borderColor:s,transform:[{translateX:w},{translateY:w}],..."vertical"===t?{top:`${c}%`,left:"50%"}:{left:`${c}%`,top:"50%"},...u?{}:{backgroundColor:l,elevation:m}},k={width:d,height:d,borderRadius:d/2,backgroundColor:h},E=createAccessibilityProps(y);return React.createElement(View,_extends({},R,E,{pointerEvents:i?"none":"auto",style:[u?S.thw:S.t,b,x]}),null!=u?isText(u)?renderTextOrNode(u,[]):u:React.createElement(View,{style:k}),!u&&React.createElement(View,{style:createHairlineView({position:"all",color:s,borderRadius:o/2})}))});ThumbNode.displayName="ThumbNode";const SliderImpl=e=>{const{value:t,min:r=0,max:n=100,step:i=1,range:a=!1,vertical:o=!1,reverse:s=!1,disabled:u=!1,readOnly:c=!1,activeColor:l,inactiveColor:m,barHeight:d,trackHeight:h,buttonSize:b,thumbSize:f,tokensOverride:p,button:v,leftButton:y,rightButton:g,thumb:R,leftThumb:w,rightThumb:x,ariaLabel:k,onChange:E,onChangeAfter:F,onDragStart:M,onDragEnd:C,style:T,onLayout:A,...N}=e,V=useSliderTokens(p),P=o?"vertical":"horizontal",{trackRef:z,trackLayout:L,handleTrackLayout:_}=useTrackLayout(),D=parseNumber(r,0),O=parseNumber(n,100),I=parseNumber(i,1),Y=I>0?I:1,K=Math.max(0,parseNumber(d??h,V.track.height)),j=Math.max(0,parseNumber(b??f,V.thumb.size)),H=u||c,$=l??V.colors.active,B=m??V.colors.inactive,q=Math.max(O-D,1e-5),G=normalizeValue(t,a,D,O),W=void 0!==t,X=useRef(E),J=useRef(F),Q=useRef(M),U=useRef(C);X.current=E,J.current=F,Q.current=M,U.current=C;const Z=useCallback(e=>toSliderValue(e,a,D),[a,D]),ee=useCallback(e=>{X.current?.(Z(e))},[Z]),te=useCallback(e=>{J.current?.(Z(e))},[Z]),re=useMemo(()=>({minValue:D,maxValue:O,step:Y,isDisabled:H,numberFormatter:defaultNumberFormatter,orientation:P,value:W?G:void 0,defaultValue:W?void 0:G,onChange:ee,onChangeEnd:te}),[H,ee,te,W,G,P,O,D,Y]),ne=useSliderState(re),ie="horizontal"===P?s||isRTL():s,ae="horizontal"===P?ie:s,{trackProps:oe}=useSlider({orientation:P,isDisabled:H,"aria-label":k??"Slider"},ne,L,ae),se=oe,{style:ue,onLayout:ce,...le}=se,me=useCallback(e=>{_(e),ce?.(e)},[_,ce]),de=useCallback(e=>{if(H)return;if(!ne.values.every((e,t)=>!ne.isThumbDragging(t)))return;const{locationX:t,locationY:r,pageX:n,pageY:i}=e.nativeEvent,a=isFiniteNumber(t)?t:isFiniteNumber(n)?n-(L.x??0):0,o=isFiniteNumber(r)?r:isFiniteNumber(i)?i-(L.y??0):0,u="vertical"===P?L.height:L.width,c=("vertical"===P?o:a)/Math.max(u,1),l="vertical"===P?s?c:1-c:ie?1-c:c,m=ne.getPercentValue(Math.min(1,Math.max(0,l))),d=ne.values.reduce((e,t,r)=>Math.abs(t-m)<Math.abs(ne.values[e]-m)?r:e,0);d>=0&&ne.isThumbEditable(d)&&(e.preventDefault?.(),ne.setFocusedThumb(d),ne.setThumbDragging(d,!0),ne.setThumbValue(d,m),ne.setThumbDragging(d,!1))},[H,P,s,ie,ne,L.height,L.width,L.x,L.y]),{interactionProps:he}=useAriaPress({disabled:H,onPress:de,extraProps:le}),be=Z(ne.values),fe=useRef(be),pe=useRef([]),ve=useRef([]),ye=useRef([]),ge=useRef([]),Se=useRef(new WeakMap);fe.current=be,useEffect(()=>()=>{const e="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;if(e){for(const t of ye.current)null!=t&&e(t);ye.current=[],ge.current=[]}},[]);const Re=useCallback((e,t)=>{if(!e)return e;if(!Q.current&&!U.current)return e;const r=Se.current.get(e),n=r?.get(t);if(n)return n;if(!(START_KEYS.some(t=>isFunction(e[t]))||MOVE_KEYS.some(t=>isFunction(e[t]))||END_KEYS.some(t=>isFunction(e[t]))))return e;const i={...e},a="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,o="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;for(const e of MOVE_KEYS){const r=i[e];if(!isFunction(r))continue;const n=r;i[e]=(...e)=>{a?(ge.current[t]=e,null==ye.current[t]&&(ye.current[t]=a(()=>{ye.current[t]=null;const e=ge.current[t];e&&(ge.current[t]=null,n(...e))}))):n(...e)}}const s=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{isFunction(r)&&r(...e),t(e[0])}},u=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{t(e[0]),isFunction(r)&&r(...e)}};for(const e of START_KEYS)s(e,()=>{pe.current[t]=!1,ve.current[t]=fe.current});for(const e of MOVE_KEYS)u(e,e=>{pe.current[t]||(pe.current[t]=!0,Q.current?.(e,ve.current[t]??fe.current))});const c=e=>{pe.current[t]&&(pe.current[t]=!1,ve.current[t]=void 0,U.current?.(e,fe.current));const r=ye.current[t];null!=r&&o&&(o(r),ye.current[t]=null),ge.current[t]=null};for(const e of END_KEYS)s(e,c);const l=r??new Map;return l.set(t,i),r||Se.current.set(e,l),i},[]),we=ne.values,xe=useMemo(()=>we.map(e=>((e??D)-D)/q*100),[D,q,we]),ke=useMemo(()=>xe.map(e=>"vertical"===P?s?e:100-e:ie?100-e:e),[P,s,ie,xe]),Ee=useMemo(()=>{const e=ke[0]??0,t=ke[1]??e;return a&&ke.length>1?{offset:Math.min(e,t),size:Math.max(e,t)-Math.min(e,t)}:("horizontal"===P?!ie:s)?{offset:0,size:e}:{offset:e,size:100-e}},[P,a,s,ie,ke]),{track:{radius:Fe}}=V,Me=useMemo(()=>({backgroundColor:$,borderRadius:Fe,..."vertical"===P?{left:0,width:"100%",height:`${Math.max(Ee.size,0)}%`,top:`${Math.max(Ee.offset,0)}%`}:{top:0,height:"100%",width:`${Math.max(Ee.size,0)}%`,left:`${Math.max(Ee.offset,0)}%`}}),[Ee.offset,Ee.size,P,$,Fe]),Ce=useMemo(()=>"vertical"===P?[S.tv,{width:K,backgroundColor:B,alignSelf:"center"}]:[S.th,{height:K,backgroundColor:B}],[P,B,K]),Te=isFunction(v)?v({value:be}):v??R,Ae=y??w??Te,Ne=g??x??Te,Ve=useCallback((e,t)=>t>1?0===e?Ae:Ne:Te,[Ae,Ne,Te]),Pe="web"===Platform.OS?{touchAction:"horizontal"===P?"pan-y":"pan-x",userSelect:"none"}:void 0,ze=[S.tp,"vertical"===P?S.tpv:null,Pe],Le=useCallback(e=>[ze,ue(e)],[ze,ue]),_e=ue&&isFunction(ue)?Le:[ze,ue],{spacing:{containerPaddingVertical:De},layout:{verticalMinHeight:Oe,verticalWidth:Ie},states:{disabledOpacity:Ye}}=V,Ke=[S.c,{paddingVertical:De},"vertical"===P&&[S.vc,{minHeight:Oe,width:Ie}],u&&{opacity:Ye},T];return React.createElement(View,_extends({style:Ke,onLayout:A},N),React.createElement(View,{style:[S.tw,"vertical"===P&&S.twv]},React.createElement(Pressable,_extends({ref:z},he,{disabled:H,onLayout:me,style:_e}),React.createElement(View,{style:[S.tb,{borderRadius:Fe},...Ce]},React.createElement(View,{style:[S.a,Me]}))),we.map((e,t)=>React.createElement(ThumbNode,{key:`thumb-${t}`,index:t,orientation:P,ariaReverse:ae,trackLayout:L,isDisabled:H,state:ne,size:j,activeColor:$,content:Ve(t,we.length),visualPercent:ke[t]??0,thumbBackgroundColor:V.colors.thumbBackground,thumbElevation:V.thumb.elevation,indicatorSize:V.thumb.indicatorSize,indicatorColor:V.colors.thumbIndicator,webGestureStyle:Pe,enhanceHandlers:Re}))))},S=StyleSheet.create({c:{position:"relative",justifyContent:"center",width:"100%"},vc:{height:"100%",alignItems:"center",paddingVertical:0},tw:{width:"100%",justifyContent:"center",position:"relative"},twv:{flex:1,justifyContent:"center",alignItems:"center",width:"100%"},tp:{width:"100%",justifyContent:"center"},tpv:{flex:1,alignItems:"center"},tb:{overflow:"hidden",position:"relative"},th:{width:"100%"},tv:{height:"100%"},a:{position:"absolute"},t:{position:"absolute",alignItems:"center",justifyContent:"center"},thw:{position:"absolute",alignItems:"center",justifyContent:"center"}});export const Slider=React.memo(SliderImpl);export default Slider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}import React,{memo,useCallback,useEffect,useImperativeHandle,useRef,useState,useMemo,Children,isValidElement}from"react";import{Animated,Pressable,StyleSheet,Text,ScrollView,View,Platform}from"react-native";import{useAriaPress,useControllableValue}from"../../hooks";import{useReducedMotion}from"../../hooks/animation";import{createHairlineView}from"../../utils/hairline";import{parseNumberLike}from"../../utils/number";import{isBoolean,isFunction,isObject,isRenderable,isText}from"../../utils/validate";import{useTabsTokens}from"./tokens";const TabPane=()=>null;TabPane.displayName="Tabs.TabPane";const hasRaf="function"==typeof requestAnimationFrame&&"function"==typeof cancelAnimationFrame,requestFrame=hasRaf?requestAnimationFrame:e=>setTimeout(e,16),cancelFrame=e=>{null!=e&&(hasRaf?cancelAnimationFrame:clearTimeout)(e)},isTabPaneElement=e=>!!React.isValidElement(e)&&(e.type===TabPane||"Tabs.TabPane"===e.type.displayName),useTabsAnimation=({type:e,animated:t,scrollable:n,align:r,panes:a,nameIndexMap:i,resolvedLineWidth:l,resolvedDuration:o,currentName:c,layoutMap:s,navContainerWidthRef:u})=>{const d=useRef(new Animated.Value(0)).current,m=useRef(new Animated.Value(0)).current,f=useRef(!1),p=useRef(null),g=useCallback((c,f)=>{if(null==c||"line"!==e)return!1;const g=!n&&"start"!==r&&u.current>0&&a.length>0,b=i.get(c)??-1,h=g?u.current/a.length:0,y=g?{x:Math.max(b,0)*h,width:h}:s.current.get(c);if(!y||b<0)return!1;p.current?.stop();const v=(e,n)=>Animated.timing(e,{toValue:n,duration:f||!t?0:o,useNativeDriver:!1,isInteraction:!1}),R=l??y.width,S=l?y.x+(y.width-R)/2:y.x,x=Animated.parallel([v(d,S),v(m,R)]);return p.current=x,x.start(({finished:e})=>{e&&(p.current=null)}),!0},[r,t,m,d,i,a.length,o,l,n,e,s,u]);return useEffect(()=>{if(null==c)return;const e=f.current;g(c,!e)&&!f.current&&(f.current=!0)},[g,c]),useEffect(()=>()=>{p.current?.stop(),p.current=null},[]),{indicatorX:d,indicatorWidth:m,indicatorInitializedRef:f,animateIndicator:g}},useTabsScroll=({scrollable:e,animated:t,currentName:n,resolvedDuration:r,layoutMap:a,navContainerWidthRef:i,navContentWidthRef:l})=>{const o=useRef(null),c=useRef(new Animated.Value(0)).current,s=useRef(null),u=useRef(!1),d=useRef(0),m=useRef(null),f=useCallback(o=>{if(!e||null==n)return;const f=a.current.get(n),p=i.current;if(!f||!p)return;const g=l.current,b=f.x-(p-f.width)/2,h=Math.max(g-p,0),y=Math.max(0,Math.min(b,h));if(!(h<=0||Math.abs(y-d.current)<1)){if(s.current?.stop(),s.current=null,cancelFrame(m.current),m.current=null,o||!t)return u.current=!0,c.setValue(y),void(m.current=requestFrame(()=>{m.current=null,u.current=!1}));c.setValue(d.current),u.current=!0,s.current=Animated.timing(c,{toValue:y,duration:r,useNativeDriver:!1,isInteraction:!1}),s.current.start(({finished:e})=>{s.current=null,u.current=!1,e&&(d.current=y)})}},[t,n,c,r,e,a,i,l]);useEffect(()=>{if(!e)return;const t=c.addListener(({value:e})=>{const t=d.current;d.current=e,Math.abs(e-t)>=.5&&o.current?.scrollTo({x:e,y:0,animated:!1})});return()=>c.removeListener(t)},[c,e]),useEffect(()=>()=>{cancelFrame(m.current),m.current=null},[]);const p=useCallback(e=>{u.current=!1,s.current?.stop(),s.current=null,d.current=e.nativeEvent.contentOffset.x},[]),g=useCallback(e=>{u.current||(d.current=e.nativeEvent.contentOffset.x)},[]);return{navScrollRef:o,navScrollX:c,scrollIntoView:f,handleNavScrollBeginDrag:p,handleNavScroll:g}},TabBarItemInner=({pane:e,isActive:t,align:n,scrollable:r,type:a,ellipsis:i,tokens:l,color:o,titleActiveColor:c,titleInactiveColor:s,tabStyle:u,titleStyle:d,descriptionStyle:m,onSelect:f,onLayout:p,isLast:g})=>{const b=!!e.disabled,h=useAriaPress({onPress:t=>f(e,e.index,t),extraProps:{accessibilityRole:"tab",accessibilityState:{selected:t,disabled:b},testID:`rv-tabs-item-${e.name}`}}),y="capsule"===a,v="jumbo"===a,R="card"===a,x=isFunction(e.title)?e.title(t):e.title??e.name,w=isFunction(e.description)?e.description(t):e.description,T=c??(R?l.colors.cardActiveText:y?l.colors.capsuleActiveText:o??l.colors.textActive),E=s??(R?o??l.colors.cardBorder:y?l.colors.capsuleText:l.colors.text),k=e.disabled?l.colors.textDisabled:t?T:E,C=b?l.colors.textDisabled:v?t?l.colors.jumboDescriptionActive:l.colors.jumboDescription:t?l.colors.descriptionActive:l.colors.description,V=!r&&("start"!==n||R),I=R||v||y,H=I?0:l.tabList.paddingHorizontal,P=I?0:l.tabList.paddingVertical,A=[S.lblW,v&&S.lblWJ,R&&S.cardLbl,R&&{paddingHorizontal:l.card.paddingHorizontal,paddingVertical:l.card.paddingVertical},y&&{flex:1,alignSelf:"stretch",paddingHorizontal:l.capsule.paddingHorizontal,paddingVertical:l.capsule.paddingVertical},v&&{paddingHorizontal:l.jumbo.paddingHorizontal,paddingVertical:l.jumbo.paddingVertical,alignItems:"center"}].filter(Boolean),z=y?[{flex:1,alignSelf:"stretch",justifyContent:"center",alignItems:"center",borderRadius:l.capsule.radius,backgroundColor:t?o??l.colors.capsuleActiveBackground:l.colors.capsuleBackground}]:null,M=[S.title,{color:k,fontFamily:l.typography.fontFamily,fontSize:v?l.typography.jumboTitleSize:l.typography.titleSize,fontWeight:t?l.typography.titleActiveWeight:l.typography.titleWeight,lineHeight:v?l.typography.jumboLineHeight:void 0,textAlign:"center"},i&&!v?S.ellipsis:null,d],L=v?l.spacing.jumboDescriptionMarginTop:l.spacing.descriptionMarginTop,B=v?{backgroundColor:t?l.colors.jumboDescriptionActiveBackground:l.colors.jumboDescriptionBackground,paddingHorizontal:l.jumbo.descriptionPaddingHorizontal,paddingVertical:l.jumbo.descriptionPaddingVertical,borderRadius:l.jumbo.descriptionRadius}:null,D=useCallback(t=>p(e.name,t),[p,e.name]);return React.createElement(Pressable,_extends({},h.interactionProps,{onLayout:D,style:[S.tabI,V?S.flexI:null,{paddingHorizontal:H,paddingVertical:P},R?{backgroundColor:t?o??l.colors.cardActiveBackground:l.colors.cardBackground}:null,u]}),React.createElement(View,{style:A},z?React.createElement(View,{style:z},React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x)):React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x),isRenderable(w)&&(isText(w)?React.createElement(Text,{style:[S.descTxt,{color:C,fontFamily:l.typography.fontFamily,fontSize:l.typography.descriptionSize,marginTop:L,textAlign:"center"},B,m]},w):React.createElement(View,{style:[{marginTop:L,alignItems:"center"},B]},w)),isRenderable(e.badge)&&React.createElement(View,{style:{marginTop:l.spacing.badgeMarginTop}},isText(e.badge)?React.createElement(Text,{style:{color:l.colors.badgeText,fontFamily:l.typography.fontFamily,fontSize:l.typography.badgeTextSize}},e.badge):e.badge)),R&&!g&&React.createElement(View,{style:createHairlineView({position:"right",color:o??l.colors.cardBorder,top:0,bottom:0})}))},TabBarItem=memo(TabBarItemInner),TabsBaseInner=(e,t)=>{const{tokensOverride:n,children:r,type:a,align:i,ellipsis:l,swipeThreshold:o,animated:c,duration:s,lazyRender:u,lazyRenderPlaceholder:d,scrollable:m,swipeable:f,color:p,background:g,border:b,navLeft:h,navRight:y,navBottom:v,tabBarStyle:R,tabStyle:x,titleStyle:w,descriptionStyle:T,contentStyle:E,lineWidth:k,lineHeight:C,titleActiveColor:V,titleInactiveColor:I,beforeChange:H,onClickTab:P,onChange:A,style:z,...M}=e,L=useTabsTokens(n),B=useReducedMotion(),D=a??L.defaults.type,j=i??L.defaults.align,F=l??L.defaults.ellipsis,W=o??L.defaults.swipeThreshold,N=c??L.defaults.animated,O=s??L.defaults.duration,q=u??L.defaults.lazyRender,_=g??L.tabList.background,X=parseNumberLike(k??L.indicator.width),J=null!=X&&X<0?void 0:X,$=Math.max(0,parseNumberLike(C)??L.indicator.height),G=B?0:Math.max(0,parseNumberLike(O)??L.defaults.duration),K=Math.max(0,parseNumberLike(W)??L.defaults.swipeThreshold),Q=f?isObject(f)?{autoHeight:f.autoHeight??!0,preventScroll:f.preventScroll??!0}:{autoHeight:!0,preventScroll:!0}:void 0,U=!!Q,Y=useMemo(()=>{const e=[];let t=0;const n=r=>{Children.forEach(r,r=>{if(!isValidElement(r))return;const a=r;if(a.type===React.Fragment)return void n(a.props.children);if(!isTabPaneElement(a))return;const i=a.props,l=i.name??t;e.push({...i,key:a.key??l,name:l,index:t}),t+=1})};return n(r),e},[r]),Z=Y[0]?.name,[ee,te]=useControllableValue(e,{defaultValue:Z,valuePropName:"active",defaultValuePropName:"defaultActive",trigger:"onChange"}),ne=null==ee?Z:Y.some(e=>e.name===ee)?ee:Z,re=useRef(ne);useEffect(()=>{re.current=ne},[ne]);const ae=useMemo(()=>{const e=new Map;return Y.forEach(t=>{e.set(t.name,t.index)}),e},[Y]),ie=null==ne?-1:ae.get(ne)??-1,le=useRef(new Set),oe=useRef(new Map),ce=useRef(0),se=useRef(0),ue=useRef(null),de=useRef(new Map),me=useRef(null),fe=useRef(!1),[pe,ge]=useState(0),[be,he]=useState(void 0);useEffect(()=>{null!=ne&&le.current.add(ne)},[ne]),useEffect(()=>{const e=new Set(Y.map(e=>e.name));Array.from(de.current.keys()).forEach(t=>{e.has(t)||de.current.delete(t)}),Array.from(oe.current.keys()).forEach(t=>{e.has(t)||oe.current.delete(t)})},[Y]);const ye=U&&Q?.autoHeight;useEffect(()=>{ye||de.current.clear()},[ye]),useEffect(()=>{if(!U||!Q?.autoHeight)return void he(void 0);const e=null!=ne?de.current.get(ne):void 0;he(e?e.height:void 0)},[ne,U,Q?.autoHeight]),useEffect(()=>()=>{cancelFrame(ue.current),ue.current=null},[]);const ve=isBoolean(m)?m:Y.length>K||!1===F,Re=p??L.colors.indicator,Se=$?$/2:L.indicator.radius,{indicatorX:xe,indicatorWidth:we,indicatorInitializedRef:Te,animateIndicator:Ee}=useTabsAnimation({type:D,animated:N,scrollable:ve,align:j,panes:Y,nameIndexMap:ae,resolvedLineWidth:J,resolvedLineHeight:$,resolvedDuration:G,currentName:ne,layoutMap:oe,navContainerWidthRef:ce}),{navScrollRef:ke,scrollIntoView:Ce,handleNavScrollBeginDrag:Ve,handleNavScroll:Ie}=useTabsScroll({scrollable:ve,animated:N,currentName:ne,resolvedDuration:G,layoutMap:oe,navContainerWidthRef:ce,navContentWidthRef:se}),He=useCallback((e,t)=>{const{x:n,width:r}=t.nativeEvent.layout;if(oe.current.set(e,{x:n,width:r}),e===re.current){const t=Te.current;Ee(e,!t)&&!Te.current&&(Te.current=!0)}},[Ee,Te]),Pe=useCallback(e=>{const{width:t}=e.nativeEvent.layout;if(ce.current=t,!ve&&"start"!==j&&"line"===D&&null!=ne){const e=Te.current;Ee(ne,!e)&&!Te.current&&(Te.current=!0)}},[j,Ee,ne,ve,D,Te]),Ae=useCallback(e=>{const t=e.nativeEvent.layout.width;ge(e=>e===t?e:t)},[]),ze=useRef(H);ze.current=H;const Me=useCallback(e=>{if(!ze.current)return Promise.resolve(!0);try{return Promise.resolve(ze.current(e)).then(e=>!1!==e).catch(()=>!1)}catch(e){return Promise.resolve(!1)}},[]),Le=useRef(0),Be=useCallback((e,t)=>{Le.current+=1;const n=Le.current;Me(e).then(r=>{r&&Le.current===n&&te(e,t)})},[Me,te]),De=useCallback((e,t)=>{if(U&&Q?.autoHeight){const{height:n}=t.nativeEvent.layout;de.current.set(e,{height:n}),e===ne&&he(n)}},[ne,U,Q?.autoHeight]),je=useRef(null);useEffect(()=>{je.current=null},[ne]);const Fe=useCallback(e=>{if(!U||pe<=0)return;const t=Math.round(e/pe);if(je.current===t)return;je.current=t;const n=Y[t];n&&n.name!==re.current&&(fe.current=!0,Be(n.name,n.index))},[pe,U,Y,Be]),We=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]),Ne=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]);useEffect(()=>{if(!U||!me.current||pe<=0)return;if(fe.current)return void(fe.current=!1);if(ie<0)return;const e=me.current?.getNode?.()??me.current;e?.scrollTo&&e.scrollTo({x:pe*ie,y:0,animated:!0})},[ie,pe,U]);const Oe=useRef(P);Oe.current=P;const qe=useCallback((e,t,n)=>{const r={name:e.name,index:t,disabled:!!e.disabled,event:n};Oe.current?.(r),e.disabled||e.name===re.current||Be(e.name,t)},[Be]),_e=useCallback((e,t)=>{const n=Y.find(t=>t.name===e&&!t.disabled);n&&te(n.name,n.index)},[Y,te]);useImperativeHandle(t,()=>({scrollTo:_e}),[_e]);const Xe=useRef(!0);useEffect(()=>{Xe.current&&(Xe.current=!1,Ce(!0))},[Ce]),useEffect(()=>{Xe.current||Ce()},[ne,Ce]);const Je=b??!1,$e="line"===D,Ge="jumbo"===D?L.jumbo.height:"card"===D?L.card.height:L.tabList.height,Ke="web"===Platform.OS&&"line"!==D&&"card"!==D?L.tabList.paddingBottom:0,Qe=$e?"line"===D?0:L.indicator.offset:0;if(0===Y.length)return null;const Ue=$e?React.createElement(Animated.View,{testID:"rv-tabs-indicator",style:[S.ind,{height:$,borderRadius:Se,backgroundColor:Re,width:we,bottom:Qe,transform:[{translateX:xe}]}]}):null,Ye=useMemo(()=>Y.map(e=>React.createElement(TabBarItem,{key:e.key,pane:e,isActive:e.name===ne,align:j,scrollable:ve,type:D,ellipsis:F,tokens:L,color:p,titleActiveColor:V,titleInactiveColor:I,tabStyle:x,titleStyle:w,descriptionStyle:T,onSelect:qe,onLayout:He,isLast:e.index===Y.length-1})),[j,p,ne,T,F,qe,He,Y,ve,x,V,I,w,L,D]),Ze=useCallback(e=>{const t=se.current;se.current=e,0===t||Xe.current?Ce(!0):Math.abs(e-t)>1&&(cancelFrame(ue.current),ue.current=requestFrame(()=>{ue.current=null,Ce()}))},[Ce]),et=ve?React.createElement(ScrollView,{horizontal:!0,ref:ke,accessibilityRole:"tablist",showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onScrollBeginDrag:Ve,onScroll:Ie,onContentSizeChange:Ze,contentContainerStyle:S.navC},Ye,Ue):React.createElement(View,{accessibilityRole:"tablist",style:[S.navC,S.navCSta]},Ye,Ue),tt=React.createElement(View,{style:[S.wrap,{backgroundColor:_},R]},h&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},h),React.createElement(View,{style:[S.nav,{minHeight:Ge+Ke,paddingBottom:Ke},"card"===D?{borderRadius:L.card.radius,marginHorizontal:L.card.marginHorizontal,overflow:"hidden"}:null],onLayout:Pe},et,"card"===D&&React.createElement(View,{style:createHairlineView({position:"all",color:p??L.colors.cardBorder,borderRadius:L.card.radius})})),y&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},y),Je&&"line"===D&&React.createElement(View,{style:createHairlineView({position:"bottom",color:L.colors.border,left:0,right:0})})),nt=useMemo(()=>Y.map(e=>{const t=e.name===ne,n=!q||t||le.current.has(e.name);if(!n&&!U)return null;const r=U&&Q?.autoHeight?t=>De(e.name,t):void 0,a=[S.pane,U?S.swipePane:null,U&&pe>0&&{width:pe},U||t?null:S.hidPane],i=n?e.children:d||null;return React.createElement(View,{key:e.key,testID:`rv-tabs-pane-${e.name}`,onLayout:r,style:a},i)}),[pe,ne,De,U,q,d,Y,Q?.autoHeight]),rt=[S.content,E],at=[S.content,E,Q?.autoHeight&&void 0!==be&&{height:be}],it=U?React.createElement(View,{style:at},React.createElement(Animated.ScrollView,{ref:me,horizontal:!0,pagingEnabled:!0,scrollEventThrottle:16,showsHorizontalScrollIndicator:!1,onMomentumScrollEnd:We,onScrollEndDrag:Ne,nestedScrollEnabled:!1===Q?.preventScroll,directionalLockEnabled:!1!==Q?.preventScroll},nt)):React.createElement(View,{style:rt},nt);return React.createElement(View,_extends({},M,{style:[S.ctr,z],onLayout:Ae}),tt,v&&React.createElement(View,{style:{marginTop:L.spacing.navBottomMarginTop}},v),it)},S=StyleSheet.create({ctr:{width:"100%"},wrap:{flexDirection:"row",alignItems:"center",position:"relative"},nav:{flex:1,position:"relative",alignSelf:"stretch"},navC:{flexDirection:"row",alignItems:"center",height:"100%",position:"relative"},navCSta:{flex:1},lblW:{justifyContent:"center",alignItems:"center",flexDirection:"column"},lblWJ:{alignItems:"center"},cardLbl:{flexDirection:"row",justifyContent:"center",alignItems:"center"},tabI:{flexShrink:0,height:"100%",alignSelf:"stretch",alignItems:"center",justifyContent:"center",flexDirection:"row"},flexI:{flexGrow:1},title:{includeFontPadding:!1},descTxt:{includeFontPadding:!1},ellipsis:{maxWidth:"100%",flexShrink:1},ind:{position:"absolute",bottom:0,left:0},content:{width:"100%"},pane:{width:"100%"},swipePane:{flexShrink:0},hidPane:{display:"none"}}),TabsBaseRef=React.forwardRef(TabsBaseInner),TabsWithPane=Object.assign(React.memo(TabsBaseRef),{TabPane:TabPane});export{TabPane};export default TabsWithPane;
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}import React,{memo,useCallback,useEffect,useImperativeHandle,useRef,useState,useMemo,Children,isValidElement}from"react";import{Animated,Pressable,StyleSheet,Text,ScrollView,View,Platform}from"react-native";import{useAriaPress,useControllableValue}from"../../hooks";import{useReducedMotion}from"../../hooks/animation";import{createHairlineView}from"../../utils/hairline";import{parseNumberLike}from"../../utils/number";import{isBoolean,isFunction,isObject,isRenderable,isText}from"../../utils/validate";import{useTabsTokens}from"./tokens";const TabPane=()=>null;TabPane.displayName="Tabs.TabPane";const hasRaf="function"==typeof requestAnimationFrame&&"function"==typeof cancelAnimationFrame,requestFrame=hasRaf?requestAnimationFrame:e=>setTimeout(e,16),cancelFrame=e=>{null!=e&&(hasRaf?cancelAnimationFrame:clearTimeout)(e)},isTabPaneElement=e=>!!React.isValidElement(e)&&(e.type===TabPane||"Tabs.TabPane"===e.type.displayName),useTabsAnimation=({type:e,animated:t,scrollable:n,align:r,panes:a,nameIndexMap:i,resolvedLineWidth:l,resolvedDuration:o,currentName:c,layoutMap:s,navContainerWidthRef:u})=>{const d=useRef(new Animated.Value(0)).current,m=useRef(new Animated.Value(0)).current,f=useRef(!1),p=useRef(null),g=useCallback((c,f)=>{if(null==c||"line"!==e)return!1;const g=!n&&"start"!==r&&u.current>0&&a.length>0,b=i.get(c)??-1,h=g?u.current/a.length:0,y=g?{x:Math.max(b,0)*h,width:h}:s.current.get(c);if(!y||b<0)return!1;p.current?.stop();const v=(e,n)=>Animated.timing(e,{toValue:n,duration:f||!t?0:o,useNativeDriver:!1,isInteraction:!1}),R=l??y.width,S=l?y.x+(y.width-R)/2:y.x,x=Animated.parallel([v(d,S),v(m,R)]);return p.current=x,x.start(({finished:e})=>{e&&(p.current=null)}),!0},[r,t,m,d,i,a.length,o,l,n,e,s,u]);return useEffect(()=>{if(null==c)return;const e=f.current;g(c,!e)&&!f.current&&(f.current=!0)},[g,c]),useEffect(()=>()=>{p.current?.stop(),p.current=null},[]),{indicatorX:d,indicatorWidth:m,indicatorInitializedRef:f,animateIndicator:g}},useTabsScroll=({scrollable:e,animated:t,currentName:n,resolvedDuration:r,layoutMap:a,navContainerWidthRef:i,navContentWidthRef:l})=>{const o=useRef(null),c=useRef(new Animated.Value(0)).current,s=useRef(null),u=useRef(!1),d=useRef(0),m=useRef(null),f=useCallback(o=>{if(!e||null==n)return;const f=a.current.get(n),p=i.current;if(!f||!p)return;const g=l.current,b=f.x-(p-f.width)/2,h=Math.max(g-p,0),y=Math.max(0,Math.min(b,h));if(!(h<=0||Math.abs(y-d.current)<1)){if(s.current?.stop(),s.current=null,cancelFrame(m.current),m.current=null,o||!t)return u.current=!0,c.setValue(y),void(m.current=requestFrame(()=>{m.current=null,u.current=!1}));c.setValue(d.current),u.current=!0,s.current=Animated.timing(c,{toValue:y,duration:r,useNativeDriver:!1,isInteraction:!1}),s.current.start(({finished:e})=>{s.current=null,u.current=!1,e&&(d.current=y)})}},[t,n,c,r,e,a,i,l]);useEffect(()=>{if(!e)return;const t=c.addListener(({value:e})=>{const t=d.current;d.current=e,Math.abs(e-t)>=.5&&o.current?.scrollTo({x:e,y:0,animated:!1})});return()=>c.removeListener(t)},[c,e]),useEffect(()=>()=>{cancelFrame(m.current),m.current=null},[]);const p=useCallback(e=>{u.current=!1,s.current?.stop(),s.current=null,d.current=e.nativeEvent.contentOffset.x},[]),g=useCallback(e=>{u.current||(d.current=e.nativeEvent.contentOffset.x)},[]);return{navScrollRef:o,navScrollX:c,scrollIntoView:f,handleNavScrollBeginDrag:p,handleNavScroll:g}},TabBarItemInner=({pane:e,isActive:t,align:n,scrollable:r,type:a,ellipsis:i,tokens:l,color:o,titleActiveColor:c,titleInactiveColor:s,tabStyle:u,titleStyle:d,descriptionStyle:m,onSelect:f,onLayout:p,isLast:g})=>{const b=!!e.disabled,h=useAriaPress({onPress:t=>f(e,e.index,t),extraProps:{accessibilityRole:"tab",accessibilityState:{selected:t,disabled:b},testID:`rv-tabs-item-${e.name}`}}),y="capsule"===a,v="jumbo"===a,R="card"===a,x=isFunction(e.title)?e.title(t):e.title??e.name,w=isFunction(e.description)?e.description(t):e.description,T=c??(R?l.colors.cardActiveText:y?l.colors.capsuleActiveText:o??l.colors.textActive),E=s??(R?o??l.colors.cardBorder:y?l.colors.capsuleText:l.colors.text),k=e.disabled?l.colors.textDisabled:t?T:E,C=b?l.colors.textDisabled:v?t?l.colors.jumboDescriptionActive:l.colors.jumboDescription:t?l.colors.descriptionActive:l.colors.description,V=!r&&("start"!==n||R),I=R||v||y,H=I?0:l.tabList.paddingHorizontal,P=I?0:l.tabList.paddingVertical,A=[S.lblW,v&&S.lblWJ,R&&S.cardLbl,R&&{paddingHorizontal:l.card.paddingHorizontal,paddingVertical:l.card.paddingVertical},y&&{flex:1,alignSelf:"stretch",paddingHorizontal:l.capsule.paddingHorizontal,paddingVertical:l.capsule.paddingVertical},v&&{paddingHorizontal:l.jumbo.paddingHorizontal,paddingVertical:l.jumbo.paddingVertical,alignItems:"center"}].filter(Boolean),z=y?[{flex:1,alignSelf:"stretch",justifyContent:"center",alignItems:"center",borderRadius:l.capsule.radius,backgroundColor:t?o??l.colors.capsuleActiveBackground:l.colors.capsuleBackground}]:null,M=[S.title,{color:k,fontFamily:l.typography.fontFamily,fontSize:v?l.typography.jumboTitleSize:l.typography.titleSize,fontWeight:t?l.typography.titleActiveWeight:l.typography.titleWeight,lineHeight:v?l.typography.jumboLineHeight:void 0,textAlign:"center"},i&&!v?S.ellipsis:null,d],L=v?l.spacing.jumboDescriptionMarginTop:l.spacing.descriptionMarginTop,B=v?{backgroundColor:t?l.colors.jumboDescriptionActiveBackground:l.colors.jumboDescriptionBackground,paddingHorizontal:l.jumbo.descriptionPaddingHorizontal,paddingVertical:l.jumbo.descriptionPaddingVertical,borderRadius:l.jumbo.descriptionRadius}:null,D=useCallback(t=>p(e.name,t),[p,e.name]);return React.createElement(Pressable,_extends({},h.interactionProps,{onLayout:D,style:[S.tabI,V?S.flexI:null,{paddingHorizontal:H,paddingVertical:P},R?{backgroundColor:t?o??l.colors.cardActiveBackground:l.colors.cardBackground}:null,u]}),React.createElement(View,{style:A},z?React.createElement(View,{style:z},React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x)):React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x),isRenderable(w)&&(isText(w)?React.createElement(Text,{style:[S.descTxt,{color:C,fontFamily:l.typography.fontFamily,fontSize:l.typography.descriptionSize,marginTop:L,textAlign:"center"},B,m]},w):React.createElement(View,{style:[{marginTop:L,alignItems:"center"},B]},w)),isRenderable(e.badge)&&React.createElement(View,{style:{marginTop:l.spacing.badgeMarginTop}},isText(e.badge)?React.createElement(Text,{style:{color:l.colors.badgeText,fontFamily:l.typography.fontFamily,fontSize:l.typography.badgeTextSize}},e.badge):e.badge)),R&&!g&&React.createElement(View,{style:createHairlineView({position:"right",color:o??l.colors.cardBorder,top:0,bottom:0})}))},TabBarItem=memo(TabBarItemInner),TabsBaseInner=(e,t)=>{const{tokensOverride:n,children:r,type:a,align:i,ellipsis:l,swipeThreshold:o,animated:c,duration:s,lazyRender:u,lazyRenderPlaceholder:d,scrollable:m,swipeable:f,color:p,background:g,border:b,navLeft:h,navRight:y,navBottom:v,tabBarStyle:R,tabStyle:x,titleStyle:w,descriptionStyle:T,contentStyle:E,lineWidth:k,lineHeight:C,titleActiveColor:V,titleInactiveColor:I,beforeChange:H,onClickTab:P,onChange:A,style:z,...M}=e,L=useTabsTokens(n),B=useReducedMotion(),D=a??L.defaults.type,j=i??L.defaults.align,F=l??L.defaults.ellipsis,W=o??L.defaults.swipeThreshold,N=c??L.defaults.animated,O=s??L.defaults.duration,q=u??L.defaults.lazyRender,_=g??L.tabList.background,X=parseNumberLike(k??L.indicator.width),J=null!=X&&X<0?void 0:X,$=Math.max(0,parseNumberLike(C)??L.indicator.height),G=B?0:Math.max(0,parseNumberLike(O)??L.defaults.duration),K=Math.max(0,parseNumberLike(W)??L.defaults.swipeThreshold),Q=f?isObject(f)?{autoHeight:f.autoHeight??!0,preventScroll:f.preventScroll??!0}:{autoHeight:!0,preventScroll:!0}:void 0,U=!!Q,Y=useMemo(()=>{const e=[];let t=0;const n=r=>{Children.forEach(r,r=>{if(!isValidElement(r))return;const a=r;if(a.type===React.Fragment)return void n(a.props.children);if(!isTabPaneElement(a))return;const i=a.props,l=i.name??t;e.push({...i,key:a.key??l,name:l,index:t}),t+=1})};return n(r),e},[r]),Z=Y[0]?.name,[ee,te]=useControllableValue(e,{defaultValue:Z,valuePropName:"active",defaultValuePropName:"defaultActive",trigger:"onChange"}),ne=null==ee?Z:Y.some(e=>e.name===ee)?ee:Z,re=useRef(ne);useEffect(()=>{re.current=ne},[ne]);const ae=useMemo(()=>{const e=new Map;return Y.forEach(t=>{e.set(t.name,t.index)}),e},[Y]),ie=null==ne?-1:ae.get(ne)??-1,le=useRef(new Set),oe=useRef(new Map),ce=useRef(0),se=useRef(0),ue=useRef(null),de=useRef(new Map),me=useRef(null),fe=useRef(!1),[pe,ge]=useState(0),[be,he]=useState(void 0);useEffect(()=>{null!=ne&&le.current.add(ne)},[ne]),useEffect(()=>{const e=new Set(Y.map(e=>e.name));Array.from(de.current.keys()).forEach(t=>{e.has(t)||de.current.delete(t)}),Array.from(oe.current.keys()).forEach(t=>{e.has(t)||oe.current.delete(t)})},[Y]);const ye=U&&Q?.autoHeight;useEffect(()=>{ye||de.current.clear()},[ye]),useEffect(()=>{if(!U||!Q?.autoHeight)return void he(void 0);const e=null!=ne?de.current.get(ne):void 0;he(e?e.height:void 0)},[ne,U,Q?.autoHeight]),useEffect(()=>()=>{cancelFrame(ue.current),ue.current=null},[]);const ve=isBoolean(m)?m:Y.length>K||!1===F,Re=p??L.colors.indicator,Se=$?$/2:L.indicator.radius,{indicatorX:xe,indicatorWidth:we,indicatorInitializedRef:Te,animateIndicator:Ee}=useTabsAnimation({type:D,animated:N,scrollable:ve,align:j,panes:Y,nameIndexMap:ae,resolvedLineWidth:J,resolvedLineHeight:$,resolvedDuration:G,currentName:ne,layoutMap:oe,navContainerWidthRef:ce}),{navScrollRef:ke,scrollIntoView:Ce,handleNavScrollBeginDrag:Ve,handleNavScroll:Ie}=useTabsScroll({scrollable:ve,animated:N,currentName:ne,resolvedDuration:G,layoutMap:oe,navContainerWidthRef:ce,navContentWidthRef:se}),He=useCallback((e,t)=>{const{x:n,width:r}=t.nativeEvent.layout;if(oe.current.set(e,{x:n,width:r}),e===re.current){const t=Te.current;Ee(e,!t)&&!Te.current&&(Te.current=!0)}},[Ee,Te]),Pe=useCallback(e=>{const{width:t}=e.nativeEvent.layout;if(ce.current=t,!ve&&"start"!==j&&"line"===D&&null!=ne){const e=Te.current;Ee(ne,!e)&&!Te.current&&(Te.current=!0)}},[j,Ee,ne,ve,D,Te]),Ae=useCallback(e=>{const t=e.nativeEvent.layout.width;ge(e=>e===t?e:t)},[]),ze=useRef(H);ze.current=H;const Me=useCallback(e=>{if(!ze.current)return Promise.resolve(!0);try{return Promise.resolve(ze.current(e)).then(e=>!1!==e).catch(()=>!1)}catch{return Promise.resolve(!1)}},[]),Le=useRef(0),Be=useCallback((e,t)=>{Le.current+=1;const n=Le.current;Me(e).then(r=>{r&&Le.current===n&&te(e,t)})},[Me,te]),De=useCallback((e,t)=>{if(U&&Q?.autoHeight){const{height:n}=t.nativeEvent.layout;de.current.set(e,{height:n}),e===ne&&he(n)}},[ne,U,Q?.autoHeight]),je=useRef(null);useEffect(()=>{je.current=null},[ne]);const Fe=useCallback(e=>{if(!U||pe<=0)return;const t=Math.round(e/pe);if(je.current===t)return;je.current=t;const n=Y[t];n&&n.name!==re.current&&(fe.current=!0,Be(n.name,n.index))},[pe,U,Y,Be]),We=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]),Ne=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]);useEffect(()=>{if(!U||!me.current||pe<=0)return;if(fe.current)return void(fe.current=!1);if(ie<0)return;const e=me.current?.getNode?.()??me.current;e?.scrollTo&&e.scrollTo({x:pe*ie,y:0,animated:!0})},[ie,pe,U]);const Oe=useRef(P);Oe.current=P;const qe=useCallback((e,t,n)=>{const r={name:e.name,index:t,disabled:!!e.disabled,event:n};Oe.current?.(r),e.disabled||e.name===re.current||Be(e.name,t)},[Be]),_e=useCallback((e,t)=>{const n=Y.find(t=>t.name===e&&!t.disabled);n&&te(n.name,n.index)},[Y,te]);useImperativeHandle(t,()=>({scrollTo:_e}),[_e]);const Xe=useRef(!0);useEffect(()=>{Xe.current&&(Xe.current=!1,Ce(!0))},[Ce]),useEffect(()=>{Xe.current||Ce()},[ne,Ce]);const Je=b??!1,$e="line"===D,Ge="jumbo"===D?L.jumbo.height:"card"===D?L.card.height:L.tabList.height,Ke="web"===Platform.OS&&"line"!==D&&"card"!==D?L.tabList.paddingBottom:0,Qe=$e?"line"===D?0:L.indicator.offset:0;if(0===Y.length)return null;const Ue=$e?React.createElement(Animated.View,{testID:"rv-tabs-indicator",style:[S.ind,{height:$,borderRadius:Se,backgroundColor:Re,width:we,bottom:Qe,transform:[{translateX:xe}]}]}):null,Ye=useMemo(()=>Y.map(e=>React.createElement(TabBarItem,{key:e.key,pane:e,isActive:e.name===ne,align:j,scrollable:ve,type:D,ellipsis:F,tokens:L,color:p,titleActiveColor:V,titleInactiveColor:I,tabStyle:x,titleStyle:w,descriptionStyle:T,onSelect:qe,onLayout:He,isLast:e.index===Y.length-1})),[j,p,ne,T,F,qe,He,Y,ve,x,V,I,w,L,D]),Ze=useCallback(e=>{const t=se.current;se.current=e,0===t||Xe.current?Ce(!0):Math.abs(e-t)>1&&(cancelFrame(ue.current),ue.current=requestFrame(()=>{ue.current=null,Ce()}))},[Ce]),et=ve?React.createElement(ScrollView,{horizontal:!0,ref:ke,accessibilityRole:"tablist",showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onScrollBeginDrag:Ve,onScroll:Ie,onContentSizeChange:Ze,contentContainerStyle:S.navC},Ye,Ue):React.createElement(View,{accessibilityRole:"tablist",style:[S.navC,S.navCSta]},Ye,Ue),tt=React.createElement(View,{style:[S.wrap,{backgroundColor:_},R]},h&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},h),React.createElement(View,{style:[S.nav,{minHeight:Ge+Ke,paddingBottom:Ke},"card"===D?{borderRadius:L.card.radius,marginHorizontal:L.card.marginHorizontal,overflow:"hidden"}:null],onLayout:Pe},et,"card"===D&&React.createElement(View,{style:createHairlineView({position:"all",color:p??L.colors.cardBorder,borderRadius:L.card.radius})})),y&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},y),Je&&"line"===D&&React.createElement(View,{style:createHairlineView({position:"bottom",color:L.colors.border,left:0,right:0})})),nt=useMemo(()=>Y.map(e=>{const t=e.name===ne,n=!q||t||le.current.has(e.name);if(!n&&!U)return null;const r=U&&Q?.autoHeight?t=>De(e.name,t):void 0,a=[S.pane,U?S.swipePane:null,U&&pe>0&&{width:pe},U||t?null:S.hidPane],i=n?e.children:d||null;return React.createElement(View,{key:e.key,testID:`rv-tabs-pane-${e.name}`,onLayout:r,style:a},i)}),[pe,ne,De,U,q,d,Y,Q?.autoHeight]),rt=[S.content,E],at=[S.content,E,Q?.autoHeight&&void 0!==be&&{height:be}],it=U?React.createElement(View,{style:at},React.createElement(Animated.ScrollView,{ref:me,horizontal:!0,pagingEnabled:!0,scrollEventThrottle:16,showsHorizontalScrollIndicator:!1,onMomentumScrollEnd:We,onScrollEndDrag:Ne,nestedScrollEnabled:!1===Q?.preventScroll,directionalLockEnabled:!1!==Q?.preventScroll},nt)):React.createElement(View,{style:rt},nt);return React.createElement(View,_extends({},M,{style:[S.ctr,z],onLayout:Ae}),tt,v&&React.createElement(View,{style:{marginTop:L.spacing.navBottomMarginTop}},v),it)},S=StyleSheet.create({ctr:{width:"100%"},wrap:{flexDirection:"row",alignItems:"center",position:"relative"},nav:{flex:1,position:"relative",alignSelf:"stretch"},navC:{flexDirection:"row",alignItems:"center",height:"100%",position:"relative"},navCSta:{flex:1},lblW:{justifyContent:"center",alignItems:"center",flexDirection:"column"},lblWJ:{alignItems:"center"},cardLbl:{flexDirection:"row",justifyContent:"center",alignItems:"center"},tabI:{flexShrink:0,height:"100%",alignSelf:"stretch",alignItems:"center",justifyContent:"center",flexDirection:"row"},flexI:{flexGrow:1},title:{includeFontPadding:!1},descTxt:{includeFontPadding:!1},ellipsis:{maxWidth:"100%",flexShrink:1},ind:{position:"absolute",bottom:0,left:0},content:{width:"100%"},pane:{width:"100%"},swipePane:{flexShrink:0},hidPane:{display:"none"}}),TabsBaseRef=React.forwardRef(TabsBaseInner),TabsWithPane=Object.assign(React.memo(TabsBaseRef),{TabPane:TabPane});export{TabPane};export default TabsWithPane;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import React,{useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,StyleSheet,View,useWindowDimensions}from"react-native";import Portal from"../portal/Portal";import{SafeAreaView}from"../safe-area-view";import{useAriaPress,useOverlayStack}from"../../hooks";import Loading from"../loading";import{Checked,Close}from"react-native-system-icon";import{isFiniteNumber,isText,isRenderable}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{useLocale}from"../config-provider/useLocale";import{useToastTokens}from"./tokens";const RT=()=>!0,ToastContentImpl=e=>{const{visible:t,message:n,icon:o,type:r="info",iconSize:i,duration:s=2e3,position:a="middle",forbidClick:c=!1,overlay:l=!1,overlayStyle:u,closeOnClickOverlay:d=!1,closeOnClick:m=!1,loadingIndicator:f,safeAreaInsetTop:p,safeAreaInsetBottom:g,tokensOverride:v,style:x,textStyle:b,onClose:R,onOpen:y,onOpened:h,onClosed:E}=e,T=useLocale(),C=useToastTokens(v),O=useReducedMotion(),{colors:P}=C,{height:k}=useWindowDimensions(),I=isFiniteNumber(s)?Math.max(0,s):0,[w,z]=useState(t),A=useRef(new Animated.Value(t?1:0)).current,M=useRef(null),V=useRef(0),H=useRef(R);H.current=R;const D=useRef(y);D.current=y;const W=useRef(h);W.current=h;const j=useRef(E);j.current=E;const{zIndex:F}=useOverlayStack({visible:w,type:"toast"}),N=useRef(t),L=useRef(!1),_=k>0?Math.round(k*C.positionOffsetRatio):C.positionOffsetMin,B=void 0!==p?p:"top"===a,q=void 0!==g?g:"bottom"===a,G=useMemo(()=>"top"===a?{justifyContent:"flex-start",paddingTop:_}:"bottom"===a?{justifyContent:"flex-end",paddingBottom:_}:{justifyContent:"center"},[a,_]);useEffect(()=>{V.current+=1;const e=V.current;M.current?.stop();const n=O?0:C.animationDuration;t?(z(!0),M.current=Animated.timing(A,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start()):(M.current=Animated.timing(A,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start(({finished:t})=>{t&&e===V.current&&z(!1)}))},[A,O,C.animationDuration,t]),useEffect(()=>()=>{M.current?.stop()},[]),useEffect(()=>{if(!t||I<=0)return;const e=setTimeout(()=>{H.current?.()},I);return()=>clearTimeout(e)},[I,t]),useEffect(()=>{if(!t||!isText(n))return;const e=String(n);e&&AccessibilityInfo.announceForAccessibility?.(e)},[n,t]);const J=O?0:C.animationDuration;useEffect(()=>{let e=null;
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import React,{useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,StyleSheet,View,useWindowDimensions}from"react-native";import Portal from"../portal/Portal";import{SafeAreaView}from"../safe-area-view";import{useAriaPress,useOverlayStack}from"../../hooks";import Loading from"../loading";import{Checked,Close}from"react-native-system-icon";import{isFiniteNumber,isText,isRenderable}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{useLocale}from"../config-provider/useLocale";import{useToastTokens}from"./tokens";const RT=()=>!0,ToastContentImpl=e=>{const{visible:t,message:n,icon:o,type:r="info",iconSize:i,duration:s=2e3,position:a="middle",forbidClick:c=!1,overlay:l=!1,overlayStyle:u,closeOnClickOverlay:d=!1,closeOnClick:m=!1,loadingIndicator:f,safeAreaInsetTop:p,safeAreaInsetBottom:g,tokensOverride:v,style:x,textStyle:b,onClose:R,onOpen:y,onOpened:h,onClosed:E}=e,T=useLocale(),C=useToastTokens(v),O=useReducedMotion(),{colors:P}=C,{height:k}=useWindowDimensions(),I=isFiniteNumber(s)?Math.max(0,s):0,[w,z]=useState(t),A=useRef(new Animated.Value(t?1:0)).current,M=useRef(null),V=useRef(0),H=useRef(R);H.current=R;const D=useRef(y);D.current=y;const W=useRef(h);W.current=h;const j=useRef(E);j.current=E;const{zIndex:F}=useOverlayStack({visible:w,type:"toast"}),N=useRef(t),L=useRef(!1),_=k>0?Math.round(k*C.positionOffsetRatio):C.positionOffsetMin,B=void 0!==p?p:"top"===a,q=void 0!==g?g:"bottom"===a,G=useMemo(()=>"top"===a?{justifyContent:"flex-start",paddingTop:_}:"bottom"===a?{justifyContent:"flex-end",paddingBottom:_}:{justifyContent:"center"},[a,_]);useEffect(()=>{V.current+=1;const e=V.current;M.current?.stop();const n=O?0:C.animationDuration;t?(z(!0),M.current=Animated.timing(A,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start()):(M.current=Animated.timing(A,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),M.current.start(({finished:t})=>{t&&e===V.current&&z(!1)}))},[A,O,C.animationDuration,t]),useEffect(()=>()=>{M.current?.stop()},[]),useEffect(()=>{if(!t||I<=0)return;const e=setTimeout(()=>{H.current?.()},I);return()=>clearTimeout(e)},[I,t]),useEffect(()=>{if(!t||!isText(n))return;const e=String(n);e&&AccessibilityInfo.announceForAccessibility?.(e)},[n,t]);const J=O?0:C.animationDuration;useEffect(()=>{let e=null;return t?(L.current=!1,!N.current&&(D.current?.(),W.current&&(e=setTimeout(W.current,J)))):N.current&&(L.current=!0),N.current=t,()=>{e&&clearTimeout(e)}},[J,t]),useEffect(()=>{!w&&L.current&&(L.current=!1,j.current?.())},[w]);const K=useRef(()=>H.current?.()).current,Q=useAriaPress({disabled:!m,onPress:K,extraProps:{accessibilityRole:m?"button":"alert",accessibilityHint:m?T?.vanToast?.closeHint??"Double-tap to dismiss":void 0,accessibilityLiveRegion:"assertive"}}),U=useMemo(()=>{if(o)return o;const e=i??C.iconSize;switch(r){case"success":return React.createElement(Checked,{size:e,fill:P.text,color:P.text});case"fail":return React.createElement(Close,{size:e,fill:P.text,color:P.text});case"loading":return f??React.createElement(Loading,{color:P.text,size:e});default:return null}},[P.text,o,i,f,C.iconSize,r]),X=useMemo(()=>({marginBottom:C.gap}),[C.gap]),Y=useMemo(()=>({color:P.text,fontSize:C.fontSize,lineHeight:C.lineHeight,fontFamily:C.fontFamily}),[P.text,C.fontSize,C.fontFamily,C.lineHeight]),Z="info"===r&&!U,$=useMemo(()=>Z?{minWidth:C.textMinWidth,minHeight:0,paddingVertical:C.textPaddingVertical,paddingHorizontal:C.textPaddingHorizontal}:{minWidth:C.defaultWidth,minHeight:C.defaultMinHeight,padding:C.defaultPadding},[Z,C.defaultMinHeight,C.defaultPadding,C.defaultWidth,C.textMinWidth,C.textPaddingHorizontal,C.textPaddingVertical]),ee=useMemo(()=>({borderRadius:C.radius,opacity:m&&Q.states.pressed?C.pressedOpacity:A,backgroundColor:C.colors.variants[r],maxWidth:C.maxWidth,...$}),[A,$,m,Q.states.pressed,C.colors.variants,C.maxWidth,C.pressedOpacity,C.radius,r]);if(!w)return null;const te=isRenderable(n)&&("string"!=typeof n||""!==n);return React.createElement(View,{style:[S.b,{backgroundColor:C.colors.transparent},G,F?{zIndex:F}:void 0],pointerEvents:c||l||m?"auto":"none"},(l||c)&&React.createElement(Pressable,{testID:"rv-toast-overlay",style:[S.o,{backgroundColor:C.colors.transparent},l&&{backgroundColor:P.backdrop},u],pointerEvents:"auto",onPress:l&&d?K:void 0,onStartShouldSetResponder:RT,onMoveShouldSetResponder:RT}),B&&React.createElement(SafeAreaView,{edge:"top",pointerEvents:"none"}),React.createElement(Pressable,_extends({disabled:!m},Q.interactionProps),React.createElement(Animated.View,{renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.t,ee,x]},U&&React.createElement(View,{style:X},isText(U)?renderTextOrNode(U,[{color:P.text,fontSize:C.iconSize}]):U),te&&(isText(n)?renderTextOrNode(n,[S.m,Y,b]):React.createElement(View,{style:S.mw},n)))),q&&React.createElement(SafeAreaView,{edge:"bottom",pointerEvents:"none"}))};export const ToastContent=React.memo(ToastContentImpl);const ToastImpl=e=>React.createElement(Portal,null,React.createElement(ToastContent,e));export const Toast=React.memo(ToastImpl);const S=StyleSheet.create({b:{flex:1,alignItems:"center"},o:{...StyleSheet.absoluteFillObject},t:{alignItems:"center",justifyContent:"center"},m:{textAlign:"center"},mw:{alignItems:"center"}});export default Toast;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import type { DeepPartial } from '../../types';
|
|
4
|
+
import type { PopupProps } from '../popup/Popup';
|
|
5
|
+
export type ActionSheetCloseAction = 'action' | 'cancel' | 'close' | 'close-icon' | 'overlay';
|
|
6
|
+
export interface ActionSheetAction {
|
|
7
|
+
key?: React.Key;
|
|
8
|
+
name?: React.ReactNode;
|
|
9
|
+
subname?: React.ReactNode;
|
|
10
|
+
color?: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
icon?: React.ReactNode;
|
|
14
|
+
style?: StyleProp<ViewStyle>;
|
|
15
|
+
onPress?: (action: ActionSheetAction) => void;
|
|
16
|
+
callback?: (action: ActionSheetAction) => void;
|
|
17
|
+
}
|
|
18
|
+
export interface ActionSheetTokens {
|
|
19
|
+
defaults: {
|
|
20
|
+
closeOnClickAction: boolean;
|
|
21
|
+
closeable: boolean;
|
|
22
|
+
round: boolean;
|
|
23
|
+
safeAreaInsetBottom: boolean;
|
|
24
|
+
overlay: boolean;
|
|
25
|
+
lockScroll: boolean;
|
|
26
|
+
};
|
|
27
|
+
layout: {
|
|
28
|
+
popup: ViewStyle;
|
|
29
|
+
panel: ViewStyle;
|
|
30
|
+
header: ViewStyle;
|
|
31
|
+
titleContainer: ViewStyle;
|
|
32
|
+
title: TextStyle;
|
|
33
|
+
titleNode: ViewStyle;
|
|
34
|
+
closeButton: ViewStyle;
|
|
35
|
+
descriptionContainer: ViewStyle;
|
|
36
|
+
description: TextStyle;
|
|
37
|
+
descriptionNode: ViewStyle;
|
|
38
|
+
actions: ViewStyle;
|
|
39
|
+
item: ViewStyle;
|
|
40
|
+
itemWithIcon: ViewStyle;
|
|
41
|
+
itemTextWrapper: ViewStyle;
|
|
42
|
+
itemText: TextStyle;
|
|
43
|
+
subname: TextStyle;
|
|
44
|
+
subnameNode: ViewStyle;
|
|
45
|
+
icon: ViewStyle;
|
|
46
|
+
cancelGap: ViewStyle;
|
|
47
|
+
cancel: ViewStyle;
|
|
48
|
+
cancelText: TextStyle;
|
|
49
|
+
};
|
|
50
|
+
colors: {
|
|
51
|
+
background: string;
|
|
52
|
+
title: string;
|
|
53
|
+
description: string;
|
|
54
|
+
item: string;
|
|
55
|
+
subitem: string;
|
|
56
|
+
cancel: string;
|
|
57
|
+
disabled: string;
|
|
58
|
+
border: string;
|
|
59
|
+
itemBackground: string;
|
|
60
|
+
itemPressedBackground: string;
|
|
61
|
+
cancelBackground: string;
|
|
62
|
+
cancelGapBackground: string;
|
|
63
|
+
};
|
|
64
|
+
typography: {
|
|
65
|
+
title: number;
|
|
66
|
+
item: number;
|
|
67
|
+
description: number;
|
|
68
|
+
};
|
|
69
|
+
spacing: {
|
|
70
|
+
horizontal: number;
|
|
71
|
+
vertical: number;
|
|
72
|
+
cancelGap: number;
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'tokensOverride'> {
|
|
76
|
+
title?: React.ReactNode;
|
|
77
|
+
description?: React.ReactNode;
|
|
78
|
+
cancelText?: React.ReactNode;
|
|
79
|
+
actions?: ActionSheetAction[];
|
|
80
|
+
closeOnClickAction?: boolean;
|
|
81
|
+
closeOnSelect?: boolean;
|
|
82
|
+
children?: React.ReactNode;
|
|
83
|
+
onSelect?: (action: ActionSheetAction, index: number) => void;
|
|
84
|
+
onCancel?: () => void;
|
|
85
|
+
beforeClose?: (action: ActionSheetCloseAction) => boolean | Promise<boolean>;
|
|
86
|
+
tokensOverride?: DeepPartial<ActionSheetTokens>;
|
|
87
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import type { PickerProps, PickerOption } from '../picker/types';
|
|
3
|
+
export interface AreaList {
|
|
4
|
+
province_list?: Record<string, string>;
|
|
5
|
+
city_list?: Record<string, string>;
|
|
6
|
+
county_list?: Record<string, string>;
|
|
7
|
+
}
|
|
8
|
+
export interface AreaOption extends PickerOption {
|
|
9
|
+
label: React.ReactNode;
|
|
10
|
+
value: string;
|
|
11
|
+
children?: AreaOption[];
|
|
12
|
+
}
|
|
13
|
+
export interface AreaProps extends Omit<PickerProps, 'columns' | 'onChange' | 'value' | 'defaultValue' | 'onConfirm'> {
|
|
14
|
+
areaList: AreaList;
|
|
15
|
+
columnsNum?: 1 | 2 | 3;
|
|
16
|
+
value?: string[];
|
|
17
|
+
defaultValue?: string[];
|
|
18
|
+
onChange?: (values: string[], options: (AreaOption | undefined)[]) => void;
|
|
19
|
+
onConfirm?: (values: string[], options: (AreaOption | undefined)[]) => void;
|
|
20
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { PressableProps, StyleProp, TextStyle, ViewStyle, ImageSourcePropType, ImageStyle } from 'react-native';
|
|
3
|
+
import type { DeepPartial } from '../../types';
|
|
4
|
+
export type AvatarShape = 'circle' | 'square';
|
|
5
|
+
export type AvatarSize = 'small' | 'medium' | 'large';
|
|
6
|
+
export interface AvatarTokens {
|
|
7
|
+
defaults: {
|
|
8
|
+
size: AvatarSize;
|
|
9
|
+
shape: AvatarShape;
|
|
10
|
+
};
|
|
11
|
+
layout: {
|
|
12
|
+
container: ViewStyle;
|
|
13
|
+
text: TextStyle;
|
|
14
|
+
image: ImageStyle;
|
|
15
|
+
iconWrapper: ViewStyle;
|
|
16
|
+
};
|
|
17
|
+
colors: {
|
|
18
|
+
background: string;
|
|
19
|
+
text: string;
|
|
20
|
+
transparent: string;
|
|
21
|
+
};
|
|
22
|
+
typography: {
|
|
23
|
+
fontWeight: TextStyle['fontWeight'];
|
|
24
|
+
fallbackTextScale: number;
|
|
25
|
+
};
|
|
26
|
+
sizing: {
|
|
27
|
+
sizes: Record<AvatarSize, number>;
|
|
28
|
+
iconMaxSize: number;
|
|
29
|
+
loadingSize: number;
|
|
30
|
+
};
|
|
31
|
+
radii: {
|
|
32
|
+
squareMin: number;
|
|
33
|
+
squareDivisor: number;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
import type { ImageFit, ImageProps } from '../image/types';
|
|
37
|
+
export interface AvatarProps extends Omit<PressableProps, 'style'> {
|
|
38
|
+
src?: string;
|
|
39
|
+
source?: ImageSourcePropType;
|
|
40
|
+
fit?: ImageFit;
|
|
41
|
+
icon?: React.ReactNode;
|
|
42
|
+
text?: string;
|
|
43
|
+
size?: AvatarSize | number;
|
|
44
|
+
width?: number;
|
|
45
|
+
height?: number;
|
|
46
|
+
shape?: AvatarShape;
|
|
47
|
+
color?: string;
|
|
48
|
+
backgroundColor?: string;
|
|
49
|
+
textStyle?: StyleProp<TextStyle>;
|
|
50
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
51
|
+
style?: StyleProp<ViewStyle>;
|
|
52
|
+
tokensOverride?: DeepPartial<AvatarTokens>;
|
|
53
|
+
children?: React.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
export interface AvatarImageProps extends ImageProps {
|
|
56
|
+
style?: StyleProp<ImageStyle>;
|
|
57
|
+
}
|
|
58
|
+
export interface AvatarFallbackTextProps {
|
|
59
|
+
children?: React.ReactNode;
|
|
60
|
+
color?: string;
|
|
61
|
+
style?: StyleProp<TextStyle>;
|
|
62
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { PressableProps, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
|
|
2
|
+
import type { DeepPartial } from '../../types';
|
|
3
|
+
export interface BadgeTokens {
|
|
4
|
+
defaults: {
|
|
5
|
+
dot: boolean;
|
|
6
|
+
showZero: boolean;
|
|
7
|
+
pressedOpacity: number;
|
|
8
|
+
};
|
|
9
|
+
layout: {
|
|
10
|
+
wrapper: ViewStyle;
|
|
11
|
+
badgeAbsolute: ViewStyle;
|
|
12
|
+
badgeStandalone: ViewStyle;
|
|
13
|
+
pressableStandalone: ViewStyle;
|
|
14
|
+
text: TextStyle;
|
|
15
|
+
};
|
|
16
|
+
colors: {
|
|
17
|
+
background: string;
|
|
18
|
+
dot: string;
|
|
19
|
+
text: string;
|
|
20
|
+
border: string;
|
|
21
|
+
};
|
|
22
|
+
typography: {
|
|
23
|
+
fontSize: number;
|
|
24
|
+
fontWeight: TextStyle['fontWeight'];
|
|
25
|
+
fontFamily: string;
|
|
26
|
+
lineHeight: number;
|
|
27
|
+
};
|
|
28
|
+
sizing: {
|
|
29
|
+
minWidth: number;
|
|
30
|
+
height: number;
|
|
31
|
+
paddingHorizontal: number;
|
|
32
|
+
paddingVertical: number;
|
|
33
|
+
dotSize: number;
|
|
34
|
+
};
|
|
35
|
+
radii: {
|
|
36
|
+
badge: number;
|
|
37
|
+
dot: number;
|
|
38
|
+
};
|
|
39
|
+
borders: {
|
|
40
|
+
width: number;
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
export type BadgeOffset = [number | string, number | string];
|
|
44
|
+
export interface BadgeProps extends ViewProps {
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
content?: React.ReactNode;
|
|
47
|
+
color?: string;
|
|
48
|
+
textColor?: string;
|
|
49
|
+
dot?: boolean;
|
|
50
|
+
max?: number | string;
|
|
51
|
+
offset?: BadgeOffset;
|
|
52
|
+
showZero?: boolean;
|
|
53
|
+
badgeStyle?: StyleProp<ViewStyle>;
|
|
54
|
+
textStyle?: StyleProp<TextStyle>;
|
|
55
|
+
onPress?: PressableProps['onPress'];
|
|
56
|
+
tokensOverride?: DeepPartial<BadgeTokens>;
|
|
57
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import type { DeepPartial } from '../../types';
|
|
4
|
+
export type ButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
|
|
5
|
+
export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
|
|
6
|
+
export type ButtonIconPosition = 'left' | 'right';
|
|
7
|
+
export type ButtonShadowLevel = 1 | 2 | 3;
|
|
8
|
+
export type ButtonIconRender = (color: string, size: number) => React.ReactNode;
|
|
9
|
+
export type ButtonLoadingSize = number | 'small' | 'large';
|
|
10
|
+
export interface ButtonTokens {
|
|
11
|
+
defaults: {
|
|
12
|
+
type: ButtonType;
|
|
13
|
+
size: ButtonSize;
|
|
14
|
+
plain: boolean;
|
|
15
|
+
block: boolean;
|
|
16
|
+
round: boolean;
|
|
17
|
+
square: boolean;
|
|
18
|
+
hairline: boolean;
|
|
19
|
+
iconPosition: ButtonIconPosition;
|
|
20
|
+
loading: boolean;
|
|
21
|
+
loadingSize: ButtonLoadingSize;
|
|
22
|
+
disabled: boolean;
|
|
23
|
+
allowFontScaling: boolean;
|
|
24
|
+
};
|
|
25
|
+
layout: {
|
|
26
|
+
base: ViewStyle;
|
|
27
|
+
block: ViewStyle;
|
|
28
|
+
content: ViewStyle;
|
|
29
|
+
iconWrapper: ViewStyle;
|
|
30
|
+
text: TextStyle;
|
|
31
|
+
};
|
|
32
|
+
colors: {
|
|
33
|
+
ripple: string;
|
|
34
|
+
backgroundTransparent: string;
|
|
35
|
+
backgroundPlain: string;
|
|
36
|
+
textDark: string;
|
|
37
|
+
textLight: string;
|
|
38
|
+
tones: Record<ButtonType, {
|
|
39
|
+
background: string;
|
|
40
|
+
border: string;
|
|
41
|
+
text: string;
|
|
42
|
+
tonalBackground: string;
|
|
43
|
+
tonalBorder: string;
|
|
44
|
+
tonalText: string;
|
|
45
|
+
}>;
|
|
46
|
+
};
|
|
47
|
+
typography: {
|
|
48
|
+
fontFamily: string;
|
|
49
|
+
lineHeightMultiplier: number;
|
|
50
|
+
fontWeight: TextStyle['fontWeight'];
|
|
51
|
+
};
|
|
52
|
+
sizing: {
|
|
53
|
+
sizes: Record<ButtonSize, {
|
|
54
|
+
height: number;
|
|
55
|
+
fontSize: number;
|
|
56
|
+
paddingHorizontal: number;
|
|
57
|
+
iconSize: number;
|
|
58
|
+
radius: number;
|
|
59
|
+
}>;
|
|
60
|
+
};
|
|
61
|
+
borders: {
|
|
62
|
+
width: number;
|
|
63
|
+
hairlineWidth: number;
|
|
64
|
+
};
|
|
65
|
+
spacing: {
|
|
66
|
+
iconGap: number;
|
|
67
|
+
groupGap: number;
|
|
68
|
+
};
|
|
69
|
+
states: {
|
|
70
|
+
disabledOpacity: number;
|
|
71
|
+
loadingOpacity: number;
|
|
72
|
+
pressedOpacity: number;
|
|
73
|
+
};
|
|
74
|
+
shadows: Record<ButtonShadowLevel, {
|
|
75
|
+
color: string;
|
|
76
|
+
opacity: number;
|
|
77
|
+
radius: number;
|
|
78
|
+
offsetY: number;
|
|
79
|
+
elevation: number;
|
|
80
|
+
}>;
|
|
81
|
+
}
|
|
82
|
+
export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
|
|
83
|
+
text?: React.ReactNode;
|
|
84
|
+
children?: React.ReactNode;
|
|
85
|
+
icon?: React.ReactNode | ButtonIconRender;
|
|
86
|
+
iconPosition?: ButtonIconPosition;
|
|
87
|
+
type?: ButtonType;
|
|
88
|
+
size?: ButtonSize;
|
|
89
|
+
color?: string;
|
|
90
|
+
textColor?: string;
|
|
91
|
+
plain?: boolean;
|
|
92
|
+
block?: boolean;
|
|
93
|
+
round?: boolean;
|
|
94
|
+
square?: boolean;
|
|
95
|
+
hairline?: boolean;
|
|
96
|
+
shadow?: boolean | ButtonShadowLevel;
|
|
97
|
+
loading?: boolean;
|
|
98
|
+
loadingText?: React.ReactNode;
|
|
99
|
+
loadingIndicator?: React.ReactNode;
|
|
100
|
+
loadingSize?: ButtonLoadingSize;
|
|
101
|
+
disabled?: boolean;
|
|
102
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
103
|
+
textStyle?: StyleProp<TextStyle>;
|
|
104
|
+
tokensOverride?: DeepPartial<ButtonTokens>;
|
|
105
|
+
style?: StyleProp<ViewStyle>;
|
|
106
|
+
rippleColor?: string;
|
|
107
|
+
allowFontScaling?: boolean;
|
|
108
|
+
maxFontSizeMultiplier?: number;
|
|
109
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
import type { TextStyle, ViewProps, ViewStyle } from "react-native";
|
|
3
|
+
import type { DeepPartial } from "../../types";
|
|
4
|
+
import type { PopupPlacement, PopupProps } from "../popup";
|
|
5
|
+
export type CalendarType = "single" | "range" | "multiple";
|
|
6
|
+
export interface CalendarTokens {
|
|
7
|
+
defaults: {
|
|
8
|
+
type: CalendarType;
|
|
9
|
+
title: React.ReactNode;
|
|
10
|
+
showSubtitle: boolean;
|
|
11
|
+
showHeader: boolean;
|
|
12
|
+
showConfirm: Record<CalendarType, boolean>;
|
|
13
|
+
confirmText: React.ReactNode;
|
|
14
|
+
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
15
|
+
weekdays: React.ReactNode[];
|
|
16
|
+
allowSameDay: boolean;
|
|
17
|
+
poppable: boolean;
|
|
18
|
+
closeOnClickOverlay: boolean;
|
|
19
|
+
closeOnConfirm: boolean;
|
|
20
|
+
popupPlacement: PopupPlacement;
|
|
21
|
+
popupRound: boolean;
|
|
22
|
+
};
|
|
23
|
+
layout: {
|
|
24
|
+
header: ViewStyle;
|
|
25
|
+
headerCenter: ViewStyle;
|
|
26
|
+
navText: TextStyle;
|
|
27
|
+
headerTitle: TextStyle;
|
|
28
|
+
headerSubtitle: TextStyle;
|
|
29
|
+
weekRow: ViewStyle;
|
|
30
|
+
weekLabelItem: ViewStyle;
|
|
31
|
+
weekLabel: TextStyle;
|
|
32
|
+
days: ViewStyle;
|
|
33
|
+
dayButton: ViewStyle;
|
|
34
|
+
dayText: TextStyle;
|
|
35
|
+
dayPlaceholder: ViewStyle;
|
|
36
|
+
confirmButton: ViewStyle;
|
|
37
|
+
confirmText: TextStyle;
|
|
38
|
+
};
|
|
39
|
+
colors: {
|
|
40
|
+
text: string;
|
|
41
|
+
weekend: string;
|
|
42
|
+
disabled: string;
|
|
43
|
+
background: string;
|
|
44
|
+
selectedBackground: string;
|
|
45
|
+
selectedText: string;
|
|
46
|
+
rangeBackground: string;
|
|
47
|
+
headerSubtitle: string;
|
|
48
|
+
confirmText: string;
|
|
49
|
+
};
|
|
50
|
+
typography: {
|
|
51
|
+
headerTitleSize: number;
|
|
52
|
+
headerTitleWeight: NonNullable<TextStyle['fontWeight']>;
|
|
53
|
+
headerSubtitleSize: number;
|
|
54
|
+
confirmTextWeight: NonNullable<TextStyle['fontWeight']>;
|
|
55
|
+
};
|
|
56
|
+
sizing: {
|
|
57
|
+
dayMinWidth: number;
|
|
58
|
+
navButtonSize: number;
|
|
59
|
+
};
|
|
60
|
+
radii: {
|
|
61
|
+
day: number;
|
|
62
|
+
container: number;
|
|
63
|
+
confirmButton: number;
|
|
64
|
+
};
|
|
65
|
+
spacing: {
|
|
66
|
+
row: number;
|
|
67
|
+
column: number;
|
|
68
|
+
containerPadding: number;
|
|
69
|
+
headerMarginBottom: number;
|
|
70
|
+
weekRowMarginBottom: number;
|
|
71
|
+
navPaddingHorizontal: number;
|
|
72
|
+
dayPaddingVertical: number;
|
|
73
|
+
confirmMarginTop: number;
|
|
74
|
+
confirmPaddingVertical: number;
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
export interface CalendarProps extends ViewProps {
|
|
78
|
+
value?: Date | Date[] | null;
|
|
79
|
+
defaultValue?: Date | Date[] | null;
|
|
80
|
+
minDate?: Date;
|
|
81
|
+
maxDate?: Date;
|
|
82
|
+
type?: CalendarType;
|
|
83
|
+
title?: React.ReactNode;
|
|
84
|
+
showSubtitle?: boolean;
|
|
85
|
+
color?: string;
|
|
86
|
+
showHeader?: boolean;
|
|
87
|
+
showConfirm?: boolean;
|
|
88
|
+
confirmText?: React.ReactNode;
|
|
89
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
90
|
+
weekdays?: React.ReactNode[];
|
|
91
|
+
formatMonthTitle?: (date: Date) => React.ReactNode;
|
|
92
|
+
allowSameDay?: boolean;
|
|
93
|
+
maxRange?: number;
|
|
94
|
+
onOverRange?: (limit: number) => void;
|
|
95
|
+
poppable?: boolean;
|
|
96
|
+
visible?: boolean;
|
|
97
|
+
defaultVisible?: boolean;
|
|
98
|
+
onVisibleChange?: (visible: boolean) => void;
|
|
99
|
+
closeOnClickOverlay?: boolean;
|
|
100
|
+
closeOnConfirm?: boolean;
|
|
101
|
+
popupPlacement?: PopupPlacement;
|
|
102
|
+
popupRound?: boolean;
|
|
103
|
+
popupProps?: Partial<PopupProps>;
|
|
104
|
+
onOpen?: () => void;
|
|
105
|
+
onOpened?: () => void;
|
|
106
|
+
onClose?: () => void;
|
|
107
|
+
onClosed?: () => void;
|
|
108
|
+
onSelect?: (value: Date | Date[]) => void;
|
|
109
|
+
onConfirm?: (value: Date | Date[]) => void;
|
|
110
|
+
tokensOverride?: DeepPartial<CalendarTokens>;
|
|
111
|
+
}
|