@fountain-ui/core 1.16.0 → 1.19.0

package/build/typescript/internal/icons/ChevronRight.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (props: {
+        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly viewBox?: string | undefined;
+        preserveAspectRatio?: string | undefined;
+        readonly color?: import("react-native-svg").Color | undefined;
+        title?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
+        readonly fill?: import("react-native-svg").Color | undefined;
+        fillOpacity?: import("react-native-svg").NumberProp | undefined;
+        fillRule?: import("react-native-svg").FillRule | undefined;
+        stroke?: import("react-native-svg").Color | undefined;
+        strokeWidth?: import("react-native-svg").NumberProp | undefined;
+        strokeOpacity?: import("react-native-svg").NumberProp | undefined;
+        strokeDasharray?: import("react-native-svg").NumberProp | readonly import("react-native-svg").NumberProp[] | undefined;
+        strokeDashoffset?: import("react-native-svg").NumberProp | undefined;
+        strokeLinecap?: import("react-native-svg").Linecap | undefined;
+        strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
+        strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
+        clipRule?: import("react-native-svg").FillRule | undefined;
+        clipPath?: string | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        translate?: import("react-native-svg").NumberArray | undefined;
+        translateX?: import("react-native-svg").NumberProp | undefined;
+        translateY?: import("react-native-svg").NumberProp | undefined;
+        origin?: import("react-native-svg").NumberArray | undefined;
+        originX?: import("react-native-svg").NumberProp | undefined;
+        originY?: import("react-native-svg").NumberProp | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        scaleX?: import("react-native-svg").NumberProp | undefined;
+        scaleY?: import("react-native-svg").NumberProp | undefined;
+        skew?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        rotation?: import("react-native-svg").NumberProp | undefined;
+        x?: import("react-native-svg").NumberArray | undefined;
+        y?: import("react-native-svg").NumberArray | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        disabled?: boolean | undefined;
+        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        delayPressIn?: number | undefined;
+        delayPressOut?: number | undefined;
+        delayLongPress?: number | undefined;
+        id?: string | undefined;
+        marker?: string | undefined;
+        markerStart?: string | undefined;
+        markerMid?: string | undefined;
+        markerEnd?: string | undefined;
+        mask?: string | undefined;
+        hitSlop?: import("react-native").Insets | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+}>;
+export default _default;

package/build/typescript/internal/icons/index.d.ts

@@ -1,6 +1,8 @@
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';
 export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronLeft } from './ChevronLeft';
+export { default as ChevronRight } from './ChevronRight';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Close } from './Close';
 export { default as Radio } from './Radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.16.0",
+  "version": "1.19.0",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^1.4.1",
+    "@fountain-ui/styles": "^1.5.0",
     "@fountain-ui/utils": "^1.1.0"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0738cec018c008c9993b8d432ca8aaa44d7c3f77"
+  "gitHead": "471da1539616fd885a946692a80d94533e10ce02"
 }

package/src/Modal/Modal.tsx

@@ -6,6 +6,20 @@ import Slide from '../Slide';
 import SimpleBackdrop from './SimpleBackdrop';
 import type ModalProps from './ModalProps';
 
+export type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';
+
+export interface ModalCloseEvent {
+    metadata: {
+        reason: ModalCloseReasonType
+    };
+}
+
+export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
+    metadata: {
+        reason,
+    },
+});
+
 export default function Modal(props: ModalProps) {
     const {
         animationStyle,
@@ -21,7 +35,7 @@ export default function Modal(props: ModalProps) {
 
     const handleBackdropPress = () => {
         if (onClose) {
-            onClose();
+            onClose(createModalCloseEvent('OUTSIDE_PRESS'));
         }
     };
 

package/src/Modal/ModalProps.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { ComponentProps, OverridableComponentProps } from '../types';
+import { ModalCloseEvent } from './Modal';
 
 export default interface ModalProps extends OverridableComponentProps<ViewProps, {
     /**
@@ -34,7 +35,7 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: () => void,
+    onClose?: (event?: ModalCloseEvent) => void,
 
     /**
      * If `true`, the modal is visible.

package/src/Modal/index.ts

@@ -1,2 +1,3 @@
-export { default } from './Modal';
-export type { default as ModalProps } from './ModalProps';
+export { default, createModalCloseEvent } from './Modal';
+export type { ModalCloseEvent } from './Modal';
+export type { default as ModalProps } from './ModalProps';

package/src/Pagination/Pagination.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
-import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { times } from '@fountain-ui/utils';
+import { ChevronLeft, ChevronRight } from '../internal/icons';
 import { css, useTheme } from '../styles';
 import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeight } from '../internal/hooks';
@@ -22,6 +22,7 @@ export interface ContentInsets {
 }
 
 export interface Options {
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 
@@ -35,6 +36,7 @@ export interface CollapsibleAppBar {
 }
 
 const defaultOptions: Required<Options> = {
+    keyboardDismissMode: 'none',
     translucent: false,
 };
 
@@ -43,7 +45,7 @@ const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent }: Required<Options> = {
+    const { translucent, keyboardDismissMode }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -106,6 +108,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const scrollHandler = Animated.useAnimatedScrollHandler({
         onBeginDrag: () => {
+            if (keyboardDismissMode === 'on-drag') {
+                Animated.runOnJS(Keyboard.dismiss)();
+            }
             lastTranslateY.value = translateY.value;
         },
         onMomentumBegin: () => {

package/src/hooks/useFadeInAppBar.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
@@ -17,6 +17,7 @@ export interface Options {
     fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 
@@ -34,6 +35,7 @@ const defaultOptions: Required<Options> = {
     fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
+    keyboardDismissMode: 'none',
     translucent: false,
 };
 
@@ -45,6 +47,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         fadeInBeginY,
         fadeInEndY,
         floating,
+        keyboardDismissMode,
         translucent,
     }: Required<Options> = {
         ...defaultOptions,
@@ -89,6 +92,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     }));
 
     const scrollHandler = Animated.useAnimatedScrollHandler({
+        onBeginDrag: () => {
+            if (keyboardDismissMode === 'on-drag') {
+                Animated.runOnJS(Keyboard.dismiss)();
+            }
+        },
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 

package/src/index.ts

@@ -105,7 +105,8 @@ export * from './Menu';
 export { default as MenuItem } from './MenuItem';
 export * from './MenuItem';
 
-export { default as Modal } from './Modal';
+export { default as Modal, createModalCloseEvent } from './Modal';
+export type { ModalCloseEvent } from './Modal';
 export * from './Modal';
 
 export { default as Pagination } from './Pagination';

package/src/internal/icons/ChevronLeft.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.76965 9.46973L12.2697 3.96973L13.3303 5.03039L8.36064 10.0001L13.3303 14.9697L12.2697 16.0304L6.76965 10.5304L6.76965 9.46973Z"
+    />
+    , 'ChevronLeft');

package/src/internal/icons/ChevronRight.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.3303 10.5303L7.83032 16.0303L6.76966 14.9697L11.7393 10L6.76966 5.03033L7.83032 3.96968L13.3303 9.46967V10.5303Z"
+    />
+    , 'ChevronRight');

package/src/internal/icons/index.ts

@@ -1,6 +1,8 @@
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';
 export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronLeft } from './ChevronLeft';
+export { default as ChevronRight } from './ChevronRight';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Close } from './Close';
 export { default as Radio } from './Radio';