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

package/src/Tooltip/LegacyTooltip.tsx

@@ -1,167 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { rgb } from '@fountain-ui/utils';
-import ButtonBase from '../ButtonBase';
-import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
-import type TooltipProps from './LegacyTooltipProps';
-import UpArrow from './UpArrow';
-
-const DEFAULT_OPACITY = 0.8;
-const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
-
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
-
-export default function Tooltip(props: TooltipProps) {
-    const {
-        arrowLayout,
-        children,
-        initialLayout = INITIAL_LAYOUT,
-        left,
-        onClose,
-        placement = 'top',
-        right,
-        numberOfTitleLines = 1,
-        style,
-        title,
-        tooltipStyle,
-        verticalOffset = 4,
-        visible = false,
-    } = props;
-
-    const theme = useTheme();
-
-    const [layout, setLayout] = useState(initialLayout);
-
-    const scale = useSharedValue(0);
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: scale.value }],
-    }), []);
-
-    const [r, g, b] = rgb(theme.palette.primary.main);
-
-    const totalVerticalOffset = -(layout.height + verticalOffset);
-    const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: arrowLayout?.placement === 'left'
-            ? 'flex-start'
-            : arrowLayout?.placement === 'right'
-                ? 'flex-end'
-                : 'center',
-        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
-        left,
-        position: 'absolute',
-        right,
-        top: placement === 'top' ? totalVerticalOffset : undefined,
-        zIndex: theme.zIndex.tooltip,
-        height: visible ? undefined : 0,
-        overflow: visible ? undefined : 'hidden',
-        ...Platform.select({
-            web: {
-                display: visible ? 'flex' : 'none',
-            },
-            default: {},
-        }),
-    };
-
-    useEffect(() => {
-        const nextScaleValue = visible ? 1 : 0;
-
-        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
-    }, [visible]);
-
-    const touchableStyle: ViewProps['style'] = {
-        alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-        borderRadius: theme.shape.roundness,
-        flexDirection: 'row',
-        padding: theme.spacing(2),
-        width: '100%',
-    };
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
-        color: theme.palette.primary.contrastTextColor,
-    });
-
-    const textStyle = css([
-        fontStyle,
-        {
-            marginRight: theme.spacing(2),
-            flexShrink: 1,
-        },
-    ]);
-
-    const arrowStyle = css({
-        ...(arrowLayout && {
-            [arrowLayout.placement]: arrowLayout.offset,
-        }),
-    });
-
-    const buttonElem = (
-        <ButtonBase
-            pressEffect={'none'}
-            onPress={onClose}
-        >
-            <View style={css(touchableStyle)}>
-                <Text
-                    // TODO: Should we provide text prop customization?
-                    numberOfLines={numberOfTitleLines}
-                    style={textStyle}
-                >
-                    {title}
-                </Text>
-                <CloseIcon
-                    fill={theme.palette.primary.contrastTextColor}
-                    width={20}
-                    height={20}
-                />
-            </View>
-        </ButtonBase>
-    );
-
-    const arrowElem = (
-        <View style={arrowStyle}>
-            <UpArrow
-                upsideDown={placement === 'top'}
-                fill={theme.palette.primary.main}
-                opacity={DEFAULT_OPACITY}
-            />
-        </View>
-    );
-
-    return (
-        <View style={style}>
-            {children}
-
-            <Animated.View
-                onLayout={(event) => {
-                    if (event.nativeEvent.layout.height === 0) {
-                        return;
-                    }
-
-                    setLayout(event.nativeEvent.layout);
-                }}
-                style={[
-                    animatedStyle,
-                    tooltipLayoutStyle,
-                    tooltipStyle,
-                ]}
-            >
-                {placement === 'top' ? (
-                    <React.Fragment>
-                        {buttonElem}
-                        {arrowElem}
-                    </React.Fragment>
-                ) : (
-                    <React.Fragment>
-                        {arrowElem}
-                        {buttonElem}
-                    </React.Fragment>
-                )}
-            </Animated.View>
-        </View>
-    );
-};

package/src/Tooltip/LegacyTooltipProps.ts

@@ -1,86 +0,0 @@
-import React from 'react';
-import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
-import type { ButtonProps } from '../Button';
-
-export type TooltipPlacement = 'top' | 'bottom';
-
-export type TooltipArrowPlacement = 'left' | 'right';
-
-export type TooltipInitialLayout = {
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-};
-
-export default interface TooltipProps extends ComponentProps<{
-    /**
-     * Tooltip reference element.
-     */
-    children: React.ReactNode;
-
-    /**
-     * Left position relative to reference element.
-     */
-    left?: number;
-
-    /**
-     * Callback fired when the component requests to be closed.
-     */
-    onClose?: () => void;
-
-    /**
-     * Tooltip placement.
-     * @default 'top'
-     */
-    placement?: TooltipPlacement;
-
-    /**
-     * Right position relative to reference element.
-     */
-    right?: number;
-
-    /**
-     * Tooltip title.
-     */
-    title: ButtonProps['children'];
-
-    /**
-     * Additional style for tooltip wrapper.
-     */
-    tooltipStyle?: ViewProps['style'];
-
-    /**
-     * The additional amount to vertically shift.
-     * @default 4
-     */
-    verticalOffset?: number;
-
-    /**
-     * If `true`, the tooltip is shown.
-     * @default false
-     */
-    visible?: boolean;
-
-    /**
-     * Tooltip arrow layout.
-     * If 'undefined', the arrow will be centered on tooltip.
-     */
-    arrowLayout?: {
-        placement: TooltipArrowPlacement;
-        offset: number;
-    }
-
-    /**
-     * number of tooltip's title lines
-     * @default 1
-     */
-    numberOfTitleLines?: TextProps['numberOfLines'];
-
-    /**
-     * position of tooltip before onLayout call
-     * @default  { height: 0, width: 0 , x: 0, y: 0}
-     */
-    initialLayout?: TooltipInitialLayout;
-}> {}

package/src/Tooltip/UpArrow.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Polygon, Svg } from 'react-native-svg';
-import type UpArrowProps from './UpArrowProps';
-
-function UpArrow({ upsideDown, fill, opacity }: UpArrowProps) {
-    return (
-        <Svg
-            width={12}
-            height={10}
-            viewBox={'0 0 12 10'}
-            fillOpacity={opacity}
-        >
-            <Polygon
-                points={upsideDown ? '6,10 12,0 0,0' : '6,0 12,10 0,10'}
-                fill={fill}
-            />
-        </Svg>
-    );
-}
-
-export default React.memo(UpArrow);

package/src/Tooltip/UpArrowProps.ts

@@ -1,19 +0,0 @@
-import type { ComponentProps } from '../types';
-
-export default interface UpArrowProps extends ComponentProps<{
-    /**
-     * If `true`, arrow is rotating 180.
-     * @default false
-     */
-    upsideDown?: boolean;
-
-    /**
-     * Fill color for arrow icon.
-     */
-    fill?: string;
-
-    /**
-     * opacity for arrow icon
-     */
-    opacity?: number;
-}> {}

package/src/Typography/LegacyTypography.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Platform, Text, TextStyle } from 'react-native';
-import type { Theme } from '@fountain-ui/styles';
-import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
-import TypographyProps, { AccessibilityMap, TypographyColor } from './LegacyTypographyProps';
-
-const accessibilityMap: AccessibilityMap = {
-    h1: { accessibilityRole: 'header', 'area-level': 1 },
-    h2: { accessibilityRole: 'header', 'area-level': 2 },
-    h3: { accessibilityRole: 'header', 'area-level': 3 },
-    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },
-    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },
-    body1: { accessibilityRole: 'text' },
-    body2: { accessibilityRole: 'text' },
-    caption1: { accessibilityRole: 'text' },
-    caption2: { accessibilityRole: 'text' },
-    flag: { accessibilityRole: 'text' },
-};
-
-function selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {
-    const palette = theme.palette.text;
-
-    switch (colorProp) {
-        case 'inherit':
-            return Platform.OS === 'web' ? 'inherit' : undefined;
-        case 'textPrimary':
-            return palette.primary;
-        case 'textSecondary':
-            return palette.secondary;
-        case 'textAccent':
-            return palette.accent;
-        case 'textHint':
-            return palette.hint;
-    }
-
-    return theme.palette[colorProp]?.main;
-}
-
-const styles = StyleSheet.create({
-    root: {
-        flexShrink: 1,
-        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),
-    },
-});
-
-const Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {
-    const {
-        accessibilityRole,
-        align = 'inherit',
-        ariaLevel,
-        disableFontScaling = false,
-        children,
-        color: colorProp = 'inherit',
-        ellipsizeMode = 'tail',
-        href,
-        numberOfLines,
-        onPress,
-        selectable,
-        style,
-        variant = 'body1',
-        onLayout,
-        onTextLayout,
-    } = props;
-
-    const theme = useTheme();
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typography) => typography[variant],
-        color: selectColor(theme, colorProp),
-    });
-
-    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
-    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};
-
-    const textStyle = css([
-        styles.root,
-        { textAlign: align === 'inherit' ? 'auto' : align },
-        textWrapStyle as TextStyle,
-        fontStyle,
-        style,
-    ]);
-
-    const accessibility = accessibilityMap[variant];
-    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;
-    const variantLevel = accessibility?.['area-level'];
-
-    return (
-        <Text
-            ref={ref}
-            accessibilityRole={accessibilityRole || variantRole}
-            allowFontScaling={!disableFontScaling}
-            aria-level={ariaLevel || variantLevel}
-            children={children}
-            ellipsizeMode={ellipsizeMode}
-            // @ts-ignore
-            href={href}
-            numberOfLines={numberOfLines}
-            onPress={onPress}
-            selectable={selectable}
-            style={textStyle}
-            onLayout={onLayout}
-            onTextLayout={onTextLayout}
-        />
-    );
-});
-
-export default React.memo(Typography);

package/src/Typography/LegacyTypographyProps.ts

@@ -1,122 +0,0 @@
-import React from 'react';
-import type { AccessibilityProps, TextProps } from 'react-native';
-import type { ComponentProps } from '../types';
-
-export type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
-
-export type TypographyColor =
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'error'
-    | 'accent'
-    | 'textPrimary'
-    | 'textSecondary'
-    | 'textAccent'
-    | 'textHint';
-
-export type TypographyVariant =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'caption1'
-    | 'caption2'
-    | 'flag'
-    | 'button1'
-    | 'button2';
-
-export interface Accessibility {
-    accessibilityRole: AccessibilityProps['accessibilityRole'];
-    'area-level'?: number;
-}
-
-export interface AccessibilityMap extends Partial<{
-    [key: string]: Accessibility;
-}> {}
-
-export default interface TypographyProps extends ComponentProps<{
-    /**
-     * Applies HTML tag at web and communicates purpose of component at app
-     */
-    accessibilityRole?: AccessibilityProps['accessibilityRole'];
-
-    /**
-     * Set the text-align on the component.
-     * The value 'justify' is not supported on Android and fallbacks to left.
-     * @default 'inherit'
-     */
-    align?: TypographyAlign;
-
-    /**
-     * Applies HTML heading level
-     */
-    ariaLevel?: number;
-
-    /**
-     * Specifies whether fonts should scale to respect Text Size accessibility settings.
-     * @default false
-     */
-    disableFontScaling?: boolean;
-
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'inherit'
-     */
-    color?: TypographyColor;
-
-    /**
-     * The text ellipsis mode.
-     * @default 'tail'
-     */
-    ellipsizeMode?: TextProps['ellipsizeMode'];
-
-    /**
-     * Internal use only. The hyperlink of the text.
-     */
-    href?: string;
-
-    /**
-     * Used to truncate the text with an ellipsis after computing the text
-     * layout, including line wrapping, such that the total number of lines
-     * does not exceed this number.
-     */
-    numberOfLines?: TextProps['numberOfLines'];
-
-    /**
-     * Lets the user select text, to use the native copy and paste functionality.
-     */
-    onPress?: TextProps['onPress'];
-
-    /**
-     * Lets the user select text, to use the native copy and paste functionality.
-     */
-    selectable?: boolean;
-
-    /**
-     * Applies the theme typography styles.
-     * @default 'body1'
-     */
-    variant?: TypographyVariant;
-
-
-    /**
-     * Callback that is called when the text layout has been calculated.
-     */
-    onTextLayout?: TextProps['onTextLayout'];
-
-    /**
-     * Callback that is called when the layout of the Text component changes.
-     */
-    onLayout?: TextProps['onLayout'];
-}> {}