react-native-molecules 0.5.0-beta.0

package/components/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,172 @@
+import { format, parse, set } from 'date-fns';
+import {
+    type ComponentType,
+    forwardRef,
+    memo,
+    type RefObject,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+} from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+
+import { useControlledValue } from '../../hooks';
+import { isValid } from '../../utils/date-fns';
+import { DatePickerInput, type DatePickerInputProps } from '../DatePickerInput';
+import { ElementGroup } from '../ElementGroup';
+import type { TextInputHandles } from '../TextInput/TextInput';
+import { sanitizeTimeString, TimePickerField, type TimePickerFieldProps } from '../TimePickerField';
+
+export type Props = Omit<ViewProps, 'style'> & {
+    is24Hour?: boolean;
+    date?: Date | null;
+    onChange?: (date: Date | null) => void;
+    defaultValue?: Date | null;
+    timePickerFieldProps?: Omit<
+        Partial<TimePickerFieldProps>,
+        'value' | 'onChangeText' | 'date' | 'onTimeChange'
+    >;
+    datePickerInputProps?: Omit<Partial<DatePickerInputProps>, 'value' | 'onChange'>;
+    datePickerInputRef?: RefObject<TextInputHandles | null>;
+    timePickerInputRef?: RefObject<TextInputHandles | null>;
+    Wrapper?: ComponentType<any>;
+    style?: ViewStyle;
+};
+
+const emptyObj = {};
+
+const normalizeDateWithCurrentTime = (specificDate: Date) => {
+    const date = new Date();
+
+    return set(specificDate, {
+        hours: date.getHours(),
+        minutes: date.getHours(),
+        seconds: date.getSeconds(),
+    });
+};
+
+const DateTimePicker = (
+    {
+        is24Hour = false,
+        date: dateProp,
+        onChange: onChangeProp,
+        defaultValue,
+        datePickerInputProps = emptyObj,
+        timePickerFieldProps = emptyObj,
+        style,
+        testID,
+        datePickerInputRef: _datePickerInputRef,
+        timePickerInputRef: _timePickerInputRef,
+        Wrapper: _WrapperProp,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const Wrapper = _WrapperProp ?? ElementGroup;
+
+    const containerRef = useRef(null);
+    const datePickerInputRef = useRef<TextInputHandles>(null);
+    const timePickerInputRef = useRef<TextInputHandles>(null);
+
+    const [date, onChange] = useControlledValue<Date | null>({
+        value: dateProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+
+    const timeString = useMemo(() => (date && isValid(date) ? format(date, 'HH:mm') : ''), [date]);
+
+    const timeStringRef = useRef(timeString);
+
+    const onDateChange = useCallback(
+        (newDate: Date | null) => {
+            if (newDate === date || (!isValid(newDate) && !isValid(date))) return;
+
+            if (!newDate) {
+                onChange(null);
+
+                return;
+            }
+
+            const addTimeString = (_date: Date) =>
+                timeStringRef.current
+                    ? parse(timeStringRef.current ?? '00:00', 'HH:mm', _date)
+                    : _date;
+
+            if (!date) {
+                onChange(addTimeString(normalizeDateWithCurrentTime(newDate)));
+                return;
+            }
+
+            if (!isValid(newDate)) {
+                onChange(date);
+                return;
+            }
+
+            const [day, month, year] = format(newDate, 'dd/MM/yyyy').split('/');
+
+            onChange(addTimeString(set(date, { date: +day, month: +month - 1, year: +year })));
+        },
+        [date, onChange],
+    );
+
+    const onTimeChange = useCallback(
+        (time: string) => {
+            if (!time) return;
+
+            const newTime = sanitizeTimeString(time);
+
+            timeStringRef.current = newTime;
+
+            onChange(date ? parse(newTime, 'HH:mm', date) : null);
+        },
+        [date, onChange],
+    );
+
+    useEffect(() => {
+        if (isValid(date)) return;
+
+        onChange(null);
+    }, [date, onChange]);
+
+    useImperativeHandle(_datePickerInputRef, () => datePickerInputRef.current as TextInputHandles);
+    useImperativeHandle(_timePickerInputRef, () => timePickerInputRef.current as TextInputHandles);
+
+    useImperativeHandle(ref, () =>
+        Object.assign(containerRef.current || {}, {
+            blur: () => {
+                datePickerInputRef.current?.blur?.();
+                timePickerInputRef.current?.blur?.();
+            },
+        }),
+    );
+
+    return (
+        <>
+            <Wrapper style={style} testID={testID} {...rest} ref={containerRef}>
+                <DatePickerInput
+                    ref={datePickerInputRef}
+                    inputMode="start"
+                    variant="outlined"
+                    testID={testID ? `${testID}--datepickerinput` : undefined}
+                    {...datePickerInputProps}
+                    value={date}
+                    onChange={onDateChange}
+                />
+                <TimePickerField
+                    ref={timePickerInputRef}
+                    variant="outlined"
+                    testID={testID ? `${testID}--timepickerinput` : undefined}
+                    is24Hour={is24Hour}
+                    {...timePickerFieldProps}
+                    time={timeString}
+                    onTimeChange={onTimeChange}
+                />
+            </Wrapper>
+        </>
+    );
+};
+
+export default memo(forwardRef(DateTimePicker));

package/components/DateTimePicker/index.tsx

@@ -0,0 +1,14 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import DateTimePickerDefault from './DateTimePicker';
+
+registerMoleculesComponents({
+    DateTimePicker: DateTimePickerDefault,
+});
+
+export const DateTimePicker = getRegisteredComponentWithFallback(
+    'DateTimePicker',
+    DateTimePickerDefault,
+);
+
+export type { Props as DateTimePickerProps } from './DateTimePicker';
+export { dateTimePickerStyles } from './utils';

package/components/DateTimePicker/utils.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const dateTimePickerStylesDefault = StyleSheet.create({
+    container: {},
+});
+
+registerComponentsStyles({
+    DateTimePicker: dateTimePickerStylesDefault,
+});
+
+export const dateTimePickerStyles = getRegisteredMoleculesComponentStyles('DateTimePicker');

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,66 @@
+import { Children, cloneElement, isValidElement, memo, type ReactNode, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { IconProps } from '../Icon';
+import { Modal, type ModalProps } from '../Modal';
+import DialogIcon from './DialogIcon';
+import { dialogStyles } from './utils';
+
+export type Props = ModalProps & {
+    /**
+     * Callback that is called when the user dismisses the dialog.
+     */
+    onClose?: () => void;
+    /**
+     * Determines Whether the dialog is visible.
+     */
+    isOpen: boolean;
+    /**
+     * Content of the `Dialog`.
+     */
+    children: ReactNode;
+    iconProps?: IconProps;
+    style?: StyleProp<ViewStyle>;
+};
+
+const emptyObj = {};
+
+const Dialog = ({ children, onClose, iconProps, style = emptyObj, ...rest }: Props) => {
+    const { containerStyle, childStyle } = useMemo(() => {
+        const { spacing, ...restStyle } = dialogStyles.root;
+
+        return {
+            childStyle: {
+                marginTop: spacing,
+            },
+            containerStyle: [restStyle, style],
+        };
+    }, [style]);
+
+    const dialogChildren = useMemo(
+        () =>
+            Children.toArray(children)
+                .filter(child => child != null && typeof child !== 'boolean')
+                .map((child, i) => {
+                    if (i === 0 && isValidElement(child) && !iconProps) {
+                        return cloneElement(child, {
+                            // @ts-ignore
+                            style: [childStyle, child.props.style],
+                        });
+                    }
+                    return child;
+                }),
+        [childStyle, children, iconProps],
+    );
+
+    return (
+        <Modal elevation={2} {...rest} onClose={onClose} style={containerStyle}>
+            <>
+                {iconProps ? <DialogIcon {...iconProps} /> : null}
+                {dialogChildren}
+            </>
+        </Modal>
+    );
+};
+
+export default memo(Dialog);

package/components/Dialog/DialogActions.tsx

@@ -0,0 +1,89 @@
+import {
+    Children,
+    cloneElement,
+    type ComponentPropsWithRef,
+    type ComponentType,
+    forwardRef,
+    isValidElement,
+    memo,
+    type ReactElement,
+    type ReactNode,
+    useMemo,
+} from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import { dialogActionsStyles } from './utils';
+
+export type Props = ViewProps &
+    ComponentPropsWithRef<ComponentType<ViewProps>> & {
+        /**
+         * Content of the `DialogActions`.
+         */
+        children: ReactNode;
+
+        style?: StyleProp<ViewStyle>;
+    };
+
+/**
+ * A component to show a list of actions in a Dialog.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="small" src="screenshots/dialog-actions.png" />
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Button, Dialog, Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const hideDialog = () => setVisible(false);
+ *
+ *   return (
+ *     <Portal>
+ *       <Dialog visible={visible} onDismiss={hideDialog}>
+ *         <Dialog.Actions>
+ *           <Button onPress={() => console.log('Cancel')}>Cancel</Button>
+ *           <Button onPress={() => console.log('Ok')}>Ok</Button>
+ *         </Dialog.Actions>
+ *       </Dialog>
+ *     </Portal>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const DialogActions = ({ children, style, ...rest }: Props, ref: any) => {
+    const { spacing, containerStyle, childrenProps } = useMemo(() => {
+        return {
+            spacing: dialogActionsStyles.root.spacing,
+            containerStyle: [dialogActionsStyles.container, style],
+            childrenProps: (i: number, child: ReactElement) => ({
+                style: [
+                    {
+                        marginLeft: i === 0 ? 0 : spacing,
+                    },
+                    (child.props as ViewProps)?.style,
+                ],
+            }),
+        };
+    }, [style]);
+
+    return (
+        <View {...rest} style={containerStyle} ref={ref}>
+            {Children.map(children, (child, i) =>
+                isValidElement(child) ? cloneElement(child, childrenProps(i, child)) : child,
+            )}
+        </View>
+    );
+};
+
+DialogActions.displayName = 'Dialog_Actions';
+
+export default memo(forwardRef(DialogActions));

package/components/Dialog/DialogContent.tsx

@@ -0,0 +1,37 @@
+import {
+    type ComponentPropsWithRef,
+    type ComponentType,
+    forwardRef,
+    memo,
+    type ReactNode,
+} from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+
+import { dialogContentStyles } from './utils';
+
+export type Props = ViewProps &
+    ComponentPropsWithRef<ComponentType<ViewProps>> & {
+        /**
+         * ContainerComponent prop allows to replace the default container used in DrawerContent - ScrollView
+         * */
+        ContainerComponent?: ComponentType<any>;
+        /**
+         * Content of the `DialogContent`.
+         */
+        children: ReactNode;
+        style?: StyleProp<ViewStyle>;
+    };
+
+const DialogContent = ({ ContainerComponent, children, style, ...rest }: Props, ref: any) => {
+    const Container = ContainerComponent || View;
+
+    return (
+        <Container {...rest} style={[dialogContentStyles.root, style]} {...{ ref }}>
+            {children}
+        </Container>
+    );
+};
+
+DialogContent.displayName = 'Dialog_Content';
+
+export default memo(forwardRef(DialogContent));

package/components/Dialog/DialogIcon.tsx

@@ -0,0 +1,69 @@
+import { memo, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { Icon, type IconProps } from '../Icon';
+import { dialogIconStyles } from './utils';
+
+export type Props = IconProps & {
+    containerStyle?: ViewStyle;
+};
+
+/**
+ * A component to show an icon in a Dialog.
+ *
+ *  <div class="screenshots">
+ *   <img class="small" src="screenshots/dialog-icon.png" />
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { StyleSheet } from 'react-native';
+ * import { Paragraph, Dialog, Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const hideDialog = () => setVisible(false);
+ *
+ *   return (
+ *     <Portal>
+ *       <Dialog visible={visible} onDismiss={hideDialog}>
+ *         <Dialog.Icon icon="alert" />
+ *         <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
+ *         <Dialog.Content>
+ *           <Paragraph>This is simple dialog</Paragraph>
+ *         </Dialog.Content>
+ *       </Dialog>
+ *     </Portal>
+ *   );
+ * };
+ *
+ * const styles = StyleSheet.create({
+ *   title: {
+ *     textAlign: 'center',
+ *   },
+ * })
+ *
+ * export default MyComponent;
+ * ```
+ */
+const DialogIcon = ({ containerStyle, color: colorProp, style, size = 24, ...rest }: Props) => {
+    const { container, iconColor, iconStyle } = useMemo(() => {
+        return {
+            container: [dialogIconStyles.container, containerStyle],
+            iconColor: colorProp || dialogIconStyles.root.color,
+            iconStyle: [dialogIconStyles.root, style],
+        };
+    }, [colorProp, containerStyle, style]);
+
+    return (
+        <View style={container}>
+            <Icon {...rest} color={iconColor} style={iconStyle} size={size} />
+        </View>
+    );
+};
+
+DialogIcon.displayName = 'Dialog_Icon';
+
+export default memo(DialogIcon);

package/components/Dialog/DialogTitle.tsx

@@ -0,0 +1,68 @@
+import {
+    type ComponentPropsWithRef,
+    type ComponentType,
+    forwardRef,
+    memo,
+    type ReactNode,
+} from 'react';
+import { type StyleProp, Text, type TextProps, type TextStyle } from 'react-native';
+
+import { dialogTitleStyles } from './utils';
+
+export type Props = ComponentPropsWithRef<ComponentType<TextProps>> & {
+    /**
+     * Title text for the `DialogTitle`.
+     */
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+};
+
+/**
+ * A component to show a title in a Dialog.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img class="small" src="screenshots/dialog-title.png" />
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Paragraph, Dialog, Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const hideDialog = () => setVisible(false);
+ *
+ *   return (
+ *     <Portal>
+ *       <Dialog visible={visible} onDismiss={hideDialog}>
+ *         <Dialog.Title>This is a title</Dialog.Title>
+ *         <Dialog.Content>
+ *           <Paragraph>This is simple dialog</Paragraph>
+ *         </Dialog.Content>
+ *       </Dialog>
+ *     </Portal>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const DialogTitle = ({ children, style, ...rest }: Props, ref: any) => {
+    return (
+        <Text
+            {...rest}
+            accessibilityRole="header"
+            style={[dialogTitleStyles.root, style]}
+            ref={ref}>
+            {children}
+        </Text>
+    );
+};
+
+DialogTitle.displayName = 'Dialog_Title';
+
+export default memo(forwardRef(DialogTitle));

package/components/Dialog/index.tsx

@@ -0,0 +1,37 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import DialogComponent from './Dialog';
+import DialogActions from './DialogActions';
+import DialogContent from './DialogContent';
+import DialogTitle from './DialogTitle';
+
+export const DialogDefault = Object.assign(
+    // @component ./Checkbox.tsx
+    DialogComponent,
+    {
+        // @component ./DialogContent.tsx
+        Content: DialogContent,
+        // @component ./DialogActions.tsx
+        Actions: DialogActions,
+        // @component ./DialogTitle.tsx
+        Title: DialogTitle,
+    },
+);
+
+registerMoleculesComponents({
+    Dialog: DialogDefault,
+});
+
+export const Dialog = getRegisteredComponentWithFallback('Dialog', DialogDefault);
+
+export type { Props as DialogProps } from './Dialog';
+export type { Props as DialogActionsProps } from './DialogActions';
+export type { Props as DialogContentProps } from './DialogContent';
+export type { Props as DialogTitleProps } from './DialogTitle';
+export {
+    dialogActionsStyles,
+    dialogContentStyles,
+    dialogIconStyles,
+    dialogScrollAreaStyles,
+    dialogStyles,
+    dialogTitleStyles,
+} from './utils';

package/components/Dialog/utils.ts

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+const dialogStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        spacing: theme.spacings['6'],
+        justifyContent: 'flex-start',
+        borderRadius: theme.shapes.corner.extraLarge,
+        backgroundColor: theme.colors.surface,
+    },
+}));
+
+const dialogTitleStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        marginHorizontal: theme.spacings['6'],
+        marginVertical: theme.spacings['3'],
+        color: theme.colors.onSurface,
+        ...theme.typescale.headlineSmall,
+    },
+}));
+
+const dialogScrollAreaStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        flexGrow: 1,
+        flexShrink: 1,
+        marginBottom: theme.spacings['6'],
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: theme.colors.surfaceVariant,
+    },
+}));
+
+const dialogIconStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        color: theme.colors.secondary,
+        paddingTop: theme.spacings['6'],
+    },
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+
+const dialogContentStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        paddingBottom: theme.spacings['6'],
+        paddingHorizontal: theme.spacings['6'],
+        flex: 1,
+    },
+}));
+
+const dialogActionsStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...({ spacing: theme.spacings['2'] } as any),
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingBottom: theme.spacings['6'],
+        paddingHorizontal: theme.spacings['6'],
+    },
+}));
+
+registerComponentsStyles({
+    Dialog: dialogStylesDefault,
+    Dialog_Title: dialogTitleStylesDefault,
+    Dialog_ScrollArea: dialogScrollAreaStylesDefault,
+    Dialog_Icon: dialogIconStylesDefault,
+    Dialog_Content: dialogContentStylesDefault,
+    Dialog_Actions: dialogActionsStylesDefault,
+});
+
+export const dialogStyles = getRegisteredMoleculesComponentStyles('Dialog');
+export const dialogTitleStyles = getRegisteredMoleculesComponentStyles('Dialog_Title');
+export const dialogScrollAreaStyles = getRegisteredMoleculesComponentStyles('Dialog_ScrollArea');
+export const dialogIconStyles = getRegisteredMoleculesComponentStyles('Dialog_Icon');
+export const dialogContentStyles = getRegisteredMoleculesComponentStyles('Dialog_Content');
+export const dialogActionsStyles = getRegisteredMoleculesComponentStyles('Dialog_Actions');

package/components/Drawer/Collapsible/DrawerCollapsible.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, memo, useMemo } from 'react';
+
+import { Accordion, type AccordionProps } from '../../Accordion';
+import { drawerCollapsibleStyles } from './utils';
+
+export type Props = AccordionProps & {};
+
+const DrawerCollapsible = memo(
+    forwardRef(({ style, ...rest }: Props, ref: any) => {
+        return (
+            <Accordion
+                {...rest}
+                style={useMemo(() => [drawerCollapsibleStyles.root, style], [style])}
+                ref={ref}
+            />
+        );
+    }),
+);
+
+DrawerCollapsible.displayName = 'Drawer_Collapsible';
+
+export default DrawerCollapsible;