react-native-molecules 0.5.0-beta.20 → 0.5.0-beta.22

package/components/DatePickerInline/types.ts

@@ -1,11 +1,12 @@
 import type { MemoExoticComponent } from 'react';
 import type { ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { CalendarHeaderProps } from './DatePickerInlineHeader';
 import type { DisableWeekDaysType } from './dateUtils';
 
 export interface BaseMonthProps {
-    locale: undefined | string;
+    locale: DatePickerLocale | undefined;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     mode: ModeType;
@@ -47,13 +48,13 @@ export type ValidRangeType = {
 };
 
 export type BaseDatePickerProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     disableWeekDays?: DisableWeekDaysType;
     validRange?: ValidRangeType;
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
-    headerLayout?: 'inline' | 'docked';
+    headerLayout?: 'default' | 'docked';
     monthStyle?: Record<string, any>;
     showOutsideDays?: boolean;
 

package/components/Divider/Divider.tsx

@@ -0,0 +1,192 @@
+import { memo } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+export type DividerProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Line orientation. Defaults to horizontal.
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * Left inset when `mode` is `"horizontal"`.
+     */
+    leftInset?: number;
+    /**
+     * Right inset when `mode` is `"horizontal"`.
+     */
+    rightInset?: number;
+    /**
+     * Top inset when `mode` is `"vertical"`.
+     */
+    topInset?: number;
+    /**
+     * Bottom inset when `mode` is `"vertical"`.
+     */
+    bottomInset?: number;
+    /**
+     * Whether the divider stroke should use the bold thickness.
+     */
+    bold?: boolean;
+    /**
+     * Margin added perpendicular to the divider line (`marginVertical` for horizontal,
+     * `marginHorizontal` for vertical).
+     */
+    spacing?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+export type Props = DividerProps;
+
+const DividerHorizontalImpl = memo(function DividerHorizontalImpl({
+    leftInset = 0,
+    rightInset = 0,
+    style,
+    bold = false,
+    spacing = 8,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'topInset' | 'bottomInset'>) {
+    horizontalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    horizontalDividerStyles.root,
+                    leftInset ? { marginLeft: leftInset } : undefined,
+                    rightInset ? { marginRight: rightInset } : undefined,
+                    spacing ? { marginVertical: spacing } : undefined,
+                    style,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+const DividerVerticalImpl = memo(function DividerVerticalImpl({
+    topInset = 0,
+    bottomInset = 0,
+    spacing = 0,
+    style,
+    bold = false,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'leftInset' | 'rightInset'>) {
+    verticalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    verticalDividerStyles.root,
+                    style,
+                    topInset ? { marginTop: topInset } : undefined,
+                    bottomInset ? { marginBottom: bottomInset } : undefined,
+                    spacing ? { marginHorizontal: spacing } : undefined,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+function DividerRoot(props: DividerProps) {
+    const mode = props.mode ?? 'horizontal';
+
+    if (mode === 'vertical') {
+        const {
+            mode: _m,
+            leftInset: _l,
+            rightInset: _r,
+            topInset,
+            bottomInset,
+            bold,
+            spacing,
+            style,
+            ...viewRest
+        } = props;
+
+        return (
+            <DividerVerticalImpl
+                {...viewRest}
+                topInset={topInset}
+                bottomInset={bottomInset}
+                bold={bold}
+                spacing={spacing}
+                style={style}
+            />
+        );
+    }
+
+    const {
+        mode: _m,
+        topInset: _t,
+        bottomInset: _b,
+        leftInset,
+        rightInset,
+        bold,
+        spacing,
+        style,
+        ...viewRest
+    } = props;
+
+    return (
+        <DividerHorizontalImpl
+            {...viewRest}
+            leftInset={leftInset}
+            rightInset={rightInset}
+            bold={bold}
+            spacing={spacing}
+            style={style}
+        />
+    );
+}
+
+export const Divider = memo(DividerRoot);
+
+export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        height: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    height: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        width: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    width: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'HorizontalDivider',
+    horizontalDividerStylesDefault,
+);
+
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
+
+export default Divider;

package/components/Divider/index.tsx

@@ -0,0 +1,11 @@
+export {
+    Divider,
+    horizontalDividerStyles,
+    horizontalDividerStylesDefault,
+    verticalDividerStyles,
+    verticalDividerStylesDefault,
+    type DividerProps,
+    type Props,
+} from './Divider';
+
+export { default } from './Divider';

package/components/Drawer/DrawerItemGroup.tsx

@@ -3,13 +3,13 @@ import { type TextProps, View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import { Divider, type DividerProps } from '../Divider';
 import { Text } from '../Text';
 
 export type Props = ViewProps & {
     title?: ReactNode;
     showDivider?: boolean;
-    dividerProps?: HorizontalDividerProps;
+    dividerProps?: Omit<DividerProps, 'mode'>;
     titleProps?: TextProps;
 };
 
@@ -45,11 +45,7 @@ const DrawerItemGroup = memo(
                     )}
                 </>
                 {children}
-                <>
-                    {showDivider && (
-                        <HorizontalDivider style={dividerStyle} {...dividerRestProps} />
-                    )}
-                </>
+                <>{showDivider && <Divider style={dividerStyle} {...dividerRestProps} />}</>
             </View>
         );
     },

package/components/IconButton/IconButton.tsx

@@ -1,4 +1,3 @@
-import color from 'color';
 import { forwardRef, memo, useMemo } from 'react';
 import {
     type GestureResponderEvent,
@@ -112,13 +111,13 @@ const IconButton = (
         variant: variant as any,
         // @ts-ignore // TODO - fix this
         state,
+        // @ts-ignore // TODO - fix this
         size: typeof size === 'string' && size ? size : undefined,
     });
 
     const {
         iconColor,
         iconSize,
-        rippleColor,
         containerStyle,
         accessibilityState,
         // accessibilityTraits,
@@ -129,18 +128,9 @@ const IconButton = (
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
             (typeof size === 'number' && size ? (size as number) : undefined);
 
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = color(_iconColor).alpha(0.12).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
-            rippleColor: _rippleColor,
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -164,7 +154,7 @@ const IconButton = (
             borderless
             centered
             onPress={onPress}
-            rippleColor={rippleColor}
+            rippleAlpha={0.12}
             accessibilityLabel={accessibilityLabel}
             style={containerStyle}
             // accessibilityTraits={accessibilityTraits}