@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.1

package/src/Tabs/Tabs.tsx

@@ -4,8 +4,9 @@ import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import { useSyncAnimatedValue } from '../hooks';
-import type { TabVariant } from '../Tab/TabProps';
+import type { TabVariant } from '../Tab';
 import type TabsProps from './TabsProps';
+import type { TabsColor } from './TabsProps';
 import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
 import ScrollableTabsView from './ScrollableTabsView';
@@ -41,7 +42,7 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
         },
         bottomDivider: {
             borderBottomColor: theme.palette.border.base,
-            borderBottomWidth: 1,
+            borderBottomWidth: 0.5,
         },
     };
 };
@@ -49,6 +50,7 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
 const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const {
         children,
+        color = 'default',
         initialIndex = 0,
         disableIndicator = false,
         indicatorSize = 'fit-content',
@@ -87,6 +89,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const styles = useStyles();
 
+    const theme = useTheme();
+
     const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
     const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
 
@@ -97,6 +101,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const indexStore = useIndexStore(sharedIndex);
 
     const coordinates = useMemo(() => {
+        if (outerCoordinates.length === 0) {
+            return [];
+        }
+
         if (indicatorSize !== 'fit-content') {
             return outerCoordinates;
         }
@@ -113,7 +121,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                 x2: indicatorStartCoordinate + innerContentWidth,
             };
         });
-    }, [outerCoordinates, innerContentsWidthList, indicatorSize]);
+    }, [outerCoordinates, innerContentsWidthList]);
 
     useEffect(() => {
         return indexStore.subscribe(newIndex => {
@@ -184,11 +192,17 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         />
     ) : null;
 
+    const backgroundColorMap: Record<TabsColor, string> = {
+        default: theme.palette.background.base,
+        alt: theme.palette.background.alt,
+    };
+
     return (
         <InternalContext.Provider value={{ indexStore }}>
             <View
                 style={css([
                     styles.root,
+                    { backgroundColor: backgroundColorMap[color] },
                     showDivider ? styles.bottomDivider : undefined,
                     scrollable ? undefined : styles.fixedRoot,
                     style,

package/src/Tabs/TabsProps.ts

@@ -1,9 +1,12 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import type { TabVariant } from '../Tab/TabProps';
+import type { TabVariant } from '../Tab';
 import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
 import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
+export const tabsColors = ['default', 'alt'] as const;
+export type TabsColor = typeof tabsColors[number];
+
 export const tabIndicatorSizes = ['fit-content', 'full'] as const;
 export type TabIndicatorSize = typeof tabIndicatorSizes[number];
 
@@ -15,6 +18,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     children: ReactNode;
 
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'default'
+     */
+    color?: TabsColor;
+
     /**
      * If `true`, the indicator is disabled.
      * @default false

package/src/Tabs/index.ts

@@ -1,3 +1,3 @@
-export { default } from './LegacyTabs';
-export type { default as TabsProps } from './LegacyTabsProps';
+export { default } from './Tabs';
+export type { default as TabsProps } from './TabsProps';
 export type { TabsInstance } from './types';

package/src/TextField/TextField.tsx

@@ -118,7 +118,6 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                     ) : (
                         <Search
                             color={'base'}
-                            enableV2={true}
                             height={18}
                             width={18}
                         />

package/src/TextField/index.tsx

@@ -1,2 +1,2 @@
-export { default } from './LegacyTextField';
-export type { default as TextFieldProps } from './LegacyTextFieldProps';
+export { default } from './TextField';
+export type { default as TextFieldProps } from './TextFieldProps';

package/src/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { Animated } from 'react-native';
 import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import ButtonBase from '../ButtonBase';
+import ButtonBase from '../ButtonBase/ButtonBase';
 import ShadowView from '../ShadowView';
 import { css, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
@@ -18,7 +18,6 @@ const useStyles: UseStyles<ToggleStyles> = function (): ToggleStyles {
             justifyContent: 'center',
         },
         toggle: {
-            backgroundColor: commonColors.static.strongInverse,
             borderRadius: theme.shape.radius.full,
         },
     };
@@ -36,6 +35,7 @@ const sizeMap = {
 export default function Toggle(props: ToggleProps) {
     const {
         checked = false,
+        disabled = false,
         onChange,
         style: styleProp,
         ...otherProps
@@ -70,9 +70,7 @@ export default function Toggle(props: ToggleProps) {
     const containerStyle = css([
         styles.root,
         {
-            backgroundColor: checked
-                ? theme.palette.fill.accent
-                : theme.palette.fill.weak,
+            backgroundColor: disabled || !checked ? theme.palette.fill.weak : theme.palette.fill.accent,
             height: containerHeight,
             width: containerWidth,
         },
@@ -82,6 +80,9 @@ export default function Toggle(props: ToggleProps) {
     const toggleStyle = css([
         styles.toggle,
         {
+            backgroundColor: disabled
+                ? theme.palette.status.disabledLabel
+                : commonColors.static.strongInverse,
             height: toggleSize,
             width: toggleSize,
         },
@@ -98,6 +99,7 @@ export default function Toggle(props: ToggleProps) {
     return (
         <ButtonBase
             {...otherProps}
+            disabled={disabled}
             pressEffect={'none'}
             onPress={handlePress}
             style={containerStyle}

package/src/Toolbar/Toolbar.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import type ToolbarProps from './ToolbarProps';
+import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Row from '../Row';
 import { css, useTheme } from '../styles';
+import type ToolbarProps from './ToolbarProps';
+import type { ToolbarSize } from './ToolbarProps';
 
 type ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;
 
@@ -12,9 +13,7 @@ const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
     return {
         root: {
             alignItems: 'center',
-            flexDirection: 'row',
             flexWrap: 'nowrap',
-            minHeight: 56,
         },
         gutters: {
             paddingHorizontal: theme.spacing(4),
@@ -22,9 +21,16 @@ const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
     };
 };
 
+const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
+    small: { height: 48 },
+    medium: { height: 50 },
+    large: { height: 56 },
+};
+
 export default function Toolbar(props: ToolbarProps) {
     const {
         disableGutters = false,
+        size = 'medium',
         style,
         ...otherProps
     } = props;
@@ -32,10 +38,11 @@ export default function Toolbar(props: ToolbarProps) {
     const styles = useStyles();
 
     return (
-        <View
+        <Row
             style={css([
                 styles.root,
                 !disableGutters ? styles.gutters : undefined,
+                sizeMap[size],
                 style,
             ])}
             {...otherProps}

package/src/Toolbar/ToolbarProps.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-import type { ViewProps } from 'react-native';
+import type { RowProps } from '../Row';
 import type { OverridableComponentProps } from '../types';
 
-export default interface ToolbarProps extends OverridableComponentProps<ViewProps, {
+export const toolbarSizes = ['small', 'medium', 'large'] as const;
+export type ToolbarSize = typeof toolbarSizes[number];
+
+export default interface ToolbarProps extends OverridableComponentProps<RowProps, {
     /**
      * The content of the component.
      */
@@ -13,4 +16,10 @@ export default interface ToolbarProps extends OverridableComponentProps<ViewProp
      * @default false
      */
     disableGutters?: boolean,
+
+    /**
+     * Determines the height of the toolbar.
+     * @default 'medium'
+     */
+    size?: ToolbarSize;
 }> {}

package/src/Toolbar/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Toolbar';
-export type { default as ToolbarProps } from './ToolbarProps';
+export type { default as ToolbarProps } from './ToolbarProps';

package/src/Tooltip/Tooltip.tsx

@@ -147,7 +147,12 @@ export default function Tooltip(props: TooltipProps) {
                 letterSpacing: 0,
             })
             // TODO: change caption2.
-            : typo.caption3.regular,
+            : typographyOf({
+                fontSize: 11,
+                lineHeight: 15.4,
+                fontFamily: 'Pretendard-Regular',
+                letterSpacing: 0,
+            }),
         color: theme.palette.text.strongInverse,
     });
 

package/src/Tooltip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTooltip';
-export type { default as TooltipProps } from './LegacyTooltipProps';
+export { default } from './Tooltip';
+export type { default as TooltipProps } from './TooltipProps';

package/src/Typography/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyTypography';
-export type { default as TypographyProps } from './LegacyTypographyProps';
+export { default } from './Typography';
+export type { default as TypographyProps } from './TypographyProps';

package/src/index.ts

@@ -23,6 +23,15 @@ export * from './Avatar';
 export { default as Badge } from './Badge';
 export * from './Badge';
 
+export { default as BottomSheetActions } from './BottomSheetActions';
+export * from './BottomSheetActions';
+
+export { default as BottomSheetContent } from './BottomSheetContent';
+export * from './BottomSheetContent';
+
+export { default as BottomSheetTitle } from './BottomSheetTitle';
+export * from './BottomSheetTitle';
+
 export { default as Button } from './Button';
 export * from './Button';
 
@@ -47,9 +56,6 @@ export * from './CardMedia';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 
-export { default as CheckboxGroup } from './CheckboxGroup';
-export * from './CheckboxGroup';
-
 export { default as Chip } from './Chip';
 export * from './Chip';
 

package/src/internal/icons/LoadingSpinner/index.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import LottieView from 'lottie-react-native';
-import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css } from '../../../styles';
 import type LoadingSpinnerProps from './LoadingSpinnerProps';
 import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
 
@@ -9,22 +9,32 @@ export default function LoadingSpinner(props: LoadingSpinnerProps) {
     const {
         color = 'gray',
         size = 'medium',
+        style: styleProp,
         ...otherProps
     } = props;
 
-    const style: FountainUiStyle = {
-        height: loadingSpinnerSizeMap[size],
-        width: loadingSpinnerSizeMap[size],
-    };
+    const rootStyle = css([
+        {
+            height: loadingSpinnerSizeMap[size],
+            width: loadingSpinnerSizeMap[size],
+        },
+        styleProp,
+    ]);
 
     return (
-        <View {...otherProps}>
+        <View
+            {...otherProps}
+            style={rootStyle}
+        >
             <LottieView
                 autoPlay={true}
                 key={color}
                 loop={true}
                 source={loadingSpinnerMap[color]}
-                style={style}
+                style={{
+                    height: '100%',
+                    width: '100%',
+                }}
             />
         </View>
     );

package/src/internal/icons/LoadingSpinner/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import LottieView from 'react-lottie-player';
-import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css } from '../../../styles';
 import type LoadingSpinnerProps from './LoadingSpinnerProps';
 import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
 
@@ -9,21 +9,31 @@ export default function LoadingSpinner(props: LoadingSpinnerProps) {
     const {
         color = 'gray',
         size = 'medium',
+        style: styleProp,
         ...otherProps
     } = props;
 
-    const style: FountainUiStyle = {
-        height: loadingSpinnerSizeMap[size],
-        width: loadingSpinnerSizeMap[size],
-    };
+    const rootStyle = css([
+        {
+            height: loadingSpinnerSizeMap[size],
+            width: loadingSpinnerSizeMap[size],
+        },
+        styleProp,
+    ]);
 
     return (
-        <View {...otherProps}>
+        <View
+            {...otherProps}
+            style={rootStyle}
+        >
             <LottieView
                 animationData={loadingSpinnerMap[color]}
                 key={color}
                 loop={true}
-                style={style}
+                style={{
+                    height: '100%',
+                    width: '100%',
+                }}
                 play={true}
             />
         </View>

package/src/utils/createSvgIcon.tsx

@@ -1,38 +1,20 @@
 import React from 'react';
 import SvgIcon from '../SvgIcon/SvgIcon';
 import type SvgIconProps from '../SvgIcon/SvgIconProps';
-import LegacySvgIcon from '../SvgIcon/LegacySvgIcon';
-import type LegacySvgIconProps from '../SvgIcon/LegacySvgIconProps';
 
 type Path = React.ReactElement | React.ReactFragment;
 
-type SvgIconPropsWithoutChildren = Omit<SvgIconProps, 'children'> | Omit<LegacySvgIconProps, 'children'>;
-
-type SvgIconBaseProps = SvgIconPropsWithoutChildren & {
-    enableV2?: boolean;
-};
+type SvgIconBaseProps = Omit<SvgIconProps, 'children'>;
 
 const createSvgIcon = (path: Path, displayName: string, viewBox?: string) => {
     function Component(props: SvgIconBaseProps) {
-        const {
-            enableV2 = false,
-            ...otherProps
-        } = props;
-
-        return enableV2 ? (
+        return (
             <SvgIcon
                 viewBox={viewBox}
-                {...otherProps as SvgIconProps}
+                {...props}
             >
                 {path}
             </SvgIcon>
-        ) : (
-            <LegacySvgIcon
-                viewBox={viewBox}
-                {...otherProps as LegacySvgIconProps}
-            >
-                {path}
-            </LegacySvgIcon>
         );
     }
 

package/build/commonjs/Accordion/LegacyAccordion.js

@@ -1,171 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Accordion;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
-var _styles = require("../styles");
-
-var _icons = require("../internal/icons");
-
-var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
-
-var _Column = _interopRequireDefault(require("../Column"));
-
-var _Row = _interopRequireDefault(require("../Row"));
-
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-
-var _Typography = _interopRequireDefault(require("../Typography"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const ROTATE_HIDE_DEGREE = 0;
-const ROTATE_SHOW_DEGREE = 180;
-const ANIMATION_CONFIG = {
-  duration: 200
-};
-const INITIAL_EXPANDED_DELAY_MILLIS = 100;
-const CONTENT_OPACITY_DELAY_MILLIS = 200;
-
-const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
-  return {
-    root: {
-      marginBottom: theme.spacing(2)
-    },
-    title: {
-      borderRadius: theme.spacing(4),
-      backgroundColor: theme.palette.paper.grey,
-      paddingHorizontal: theme.spacing(4),
-      paddingVertical: theme.spacing(3.5),
-      alignItems: 'center',
-      height: 64
-    },
-    titleColumn: {
-      flexShrink: 1
-    },
-    subtitle: {
-      fontSize: 11,
-      lineHeight: 12,
-      fontFamily: 'Inter-Regular'
-    },
-    contentView: {
-      position: 'absolute',
-      width: '100%',
-      borderRadius: theme.spacing(4),
-      backgroundColor: theme.palette.paper.grey,
-      paddingHorizontal: theme.spacing(4),
-      paddingVertical: theme.spacing(6),
-      marginTop: theme.spacing(1)
-    }
-  };
-};
-
-function Accordion(props) {
-  const {
-    title,
-    subTitle,
-    content,
-    RightIcon,
-    LeftComponent,
-    isInitialExpanded = false
-  } = props;
-  const styles = useStyles();
-  const theme = (0, _styles.useTheme)();
-  const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
-  const shouldInitialExpandedRef = (0, _react.useRef)(isInitialExpanded);
-  const rotate = (0, _reactNativeReanimated.useSharedValue)(ROTATE_HIDE_DEGREE);
-  const animatedOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
-  const animatedHeight = (0, _reactNativeReanimated.useSharedValue)(0);
-  const [contentHeight, setContentHeight] = (0, _react.useState)(0);
-  const animatedChevronDownStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      rotate: `${rotate.value}deg`
-    }]
-  }), []);
-  const animatedContentBackgroundStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    height: animatedHeight.value,
-    overflow: 'hidden'
-  }), []);
-  const animatedContentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: animatedOpacity.value
-  }), []);
-
-  const onPress = () => {
-    setIsExpanded(prev => !prev);
-  };
-
-  const onLayout = event => {
-    const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;
-    setContentHeight(height);
-
-    if (shouldInitialExpandedRef.current) {
-      shouldInitialExpandedRef.current = false;
-      setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
-    }
-  };
-
-  (0, _react.useEffect)(() => {
-    rotate.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
-    animatedHeight.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
-    animatedOpacity.value = isExpanded ? (0, _reactNativeReanimated.withDelay)(CONTENT_OPACITY_DELAY_MILLIS, (0, _reactNativeReanimated.withTiming)(1, ANIMATION_CONFIG)) : (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
-  }, [isExpanded, contentHeight]);
-  return /*#__PURE__*/_react.default.createElement(_Column.default, {
-    style: styles.root
-  }, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
-    onPress: onPress
-  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
-    style: styles.title
-  }, LeftComponent ? LeftComponent : null, /*#__PURE__*/_react.default.createElement(_Column.default, {
-    style: styles.titleColumn
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: 'subtitle2',
-    children: title,
-    color: 'textPrimary',
-    numberOfLines: 1,
-    disableFontScaling: true
-  }), subTitle ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 0.5
-  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    style: styles.subtitle,
-    color: 'tertiary',
-    children: subTitle,
-    numberOfLines: 1,
-    disableFontScaling: true
-  })) : null), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    flex: 1
-  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
-    size: 3
-  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: animatedChevronDownStyles
-  }, RightIcon ? RightIcon : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
-    width: 20,
-    height: 20,
-    color: 'tertiary'
-  })))), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: animatedContentBackgroundStyles
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    onLayout: onLayout,
-    style: styles.contentView
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: animatedContentStyle
-  }, typeof content === 'string' ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: 'subtitle2',
-    color: 'tertiary',
-    children: content
-  }) : content))));
-}
-//# sourceMappingURL=LegacyAccordion.js.map

package/build/commonjs/Accordion/LegacyAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","title","borderRadius","backgroundColor","palette","paper","grey","paddingHorizontal","paddingVertical","alignItems","height","titleColumn","flexShrink","subtitle","fontSize","lineHeight","fontFamily","contentView","position","width","marginTop","Accordion","props","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay"],"sources":["LegacyAccordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\n\nimport AccordionProps from './LegacyAccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'\n    | 'title'\n    | 'titleColumn'\n    | 'subtitle'\n    | 'contentView'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(2) },\n        title: {\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3.5),\n            alignItems: 'center',\n            height: 64,\n        },\n        titleColumn: { flexShrink: 1 },\n        subtitle: {\n            fontSize: 11,\n            lineHeight: 12,\n            fontFamily: 'Inter-Regular',\n        },\n        contentView: {\n            position: 'absolute',\n            width: '100%',\n            borderRadius: theme.spacing(4),\n            backgroundColor: theme.palette.paper.grey,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(6),\n            marginTop: theme.spacing(1),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    }), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    return (\n        <Column style={styles.root}>\n            <ButtonBase onPress={onPress}>\n                <Row style={styles.title}>\n                    {LeftComponent ? LeftComponent : null}\n\n                    <Column style={styles.titleColumn}>\n                        <Typography\n                            variant={'subtitle2'}\n                            children={title}\n                            color={'textPrimary'}\n                            numberOfLines={1}\n                            disableFontScaling={true}\n                        />\n\n                        {subTitle ? (\n                            <React.Fragment>\n                                <Spacer size={0.5}/>\n\n                                <Typography\n                                    style={styles.subtitle}\n                                    color={'tertiary'}\n                                    children={subTitle}\n                                    numberOfLines={1}\n                                    disableFontScaling={true}\n                                />\n                            </React.Fragment>\n                        ) : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            <ChevronDown\n                                width={20}\n                                height={20}\n                                color={'tertiary'}\n                            />\n                        )}\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={styles.contentView}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Typography\n                                variant={'subtitle2'}\n                                color={'tertiary'}\n                                children={content}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Accordion/LegacyAccordionProps.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=LegacyAccordionProps.js.map

package/build/commonjs/Accordion/LegacyAccordionProps.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["LegacyAccordionProps.ts"],"sourcesContent":["import React from 'react';\n\nexport default interface AccordionProps {\n    /**\n     * The title of the component.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The subtitle of the component.\n     */\n    subTitle?: string | React.ReactNode;\n\n    /**\n     * The component to the left of the title.\n     */\n    LeftComponent?: React.ReactNode;\n\n    /**\n     * The icon to the right of the title.\n     */\n    RightIcon?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * The initial state of expanding\n     * @default false\n     */\n    isInitialExpanded?: boolean;\n}\n"],"mappings":""}