@tecsinapse/react-core 1.21.1-beta.1 → 1.21.1-beta.3

package/src/components/molecules/Calendar/components/MonthWeek.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { compareAsc as compare, isSameDay } from 'date-fns';
-import { Cell, Selected, Week } from '../styled';
-import { Value, DateRange, SelectionType } from '../Calendar';
-import { TextProps } from '@tecsinapse/react-core';
-
-interface IMonthWeek<T extends SelectionType> {
-  TextComponent: React.FC<TextProps>;
-  /** any as workaround for TS type mismatching */
-  onChange?: (value?: any) => void | never;
-  type?: T;
-  value?: Value<T>;
-  week: Date[];
-  referenceDate: Date;
-}
-
-const MonthWeek = <T extends SelectionType>({
-  week,
-  referenceDate,
-  type,
-  value,
-  TextComponent,
-  onChange,
-}: IMonthWeek<T>) => {
-  const checkIfIsBetween = React.useCallback(
-    (date: Date, _value?: Value<T>) => {
-      if (type !== 'range' || !_value) return false;
-      else {
-        const { lowest, highest } = _value as DateRange;
-        if (!highest) return false;
-        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;
-      }
-    },
-    [type]
-  );
-
-  const checkIfIsSelected = React.useCallback(
-    (date: Date, _value?: Value<T>) => {
-      if (!_value) return false;
-      else if (type === 'range' && _value) {
-        const { lowest, highest } = _value as DateRange;
-        return (
-          isSameDay(lowest, date) ||
-          (highest ? isSameDay(highest, date) : false)
-        );
-      } else {
-        return isSameDay(_value as Date, date);
-      }
-    },
-    [type]
-  );
-
-  const handlePressCell = React.useCallback(
-    (date: Date, _value?: Value<T>) => () => {
-      if (type === 'day') {
-        onChange?.(date as never);
-      } else if (!_value) {
-        onChange?.({ lowest: date } as never);
-      } else {
-        let newValue;
-        const { lowest, highest } = _value as DateRange;
-
-        if (!highest) {
-          if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: undefined };
-          } else if (compare(date, lowest) === 0) {
-            newValue = undefined;
-          } else {
-            newValue = { lowest: lowest, highest: date };
-          }
-        } else {
-          if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: undefined };
-          } else if (compare(date, lowest) === 0) {
-            newValue = undefined;
-          } else {
-            if (compare(date, highest) === -1) {
-              newValue = { lowest: lowest, highest: date };
-            } else if (compare(date, highest) === 0) {
-              newValue = { lowest: lowest, highest: undefined };
-            } else {
-              newValue = { lowest: lowest, highest: date };
-            }
-          }
-        }
-
-        onChange?.(newValue as never);
-      }
-    },
-    [onChange, type]
-  );
-
-  return (
-    <Week>
-      {week.map((date, index) => {
-        const isSelected = checkIfIsSelected(date, value);
-        const isBetween = checkIfIsBetween(date, value);
-
-        let isRangeStart, isRangeEnd;
-
-        if (type === 'range' && value) {
-          const { lowest, highest } = value as DateRange;
-          isRangeStart = highest && isSameDay(lowest, date);
-          isRangeEnd = !!highest && isSameDay(highest, date);
-        } else {
-          isRangeStart = false;
-          isRangeEnd = false;
-        }
-
-        const colorTone = isSelected
-          ? 'xlight'
-          : date.getMonth() === referenceDate.getMonth()
-          ? 'xdark'
-          : 'light';
-
-        return (
-          <Cell
-            key={date.getDate()}
-            selected={isSelected}
-            highlighted={isBetween}
-            isLineEnd={index === 6}
-            isLineStart={index === 0}
-            isRangeStart={isRangeStart}
-            isRangeEnd={isRangeEnd}
-            onPress={handlePressCell(date, value)}
-          >
-            <Selected selected={isSelected} pointerEvents={'none'}>
-              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>
-                {date.getDate()}
-              </TextComponent>
-            </Selected>
-          </Cell>
-        );
-      })}
-    </Week>
-  );
-};
-
-export default React.memo(MonthWeek);

package/src/components/molecules/Calendar/components/Weekdays.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Cell, Week } from '../styled';
-import { format } from 'date-fns';
-
-interface IWeekdays {
-  calendar: Date[][];
-  locale?: Locale;
-  Capitalized: React.ElementType;
-}
-
-const Weekdays = ({ calendar, locale, Capitalized }: IWeekdays) => {
-  return (
-    <Week>
-      {calendar[0].map(date => (
-        <Cell
-          key={date.getDate()}
-          selected={false}
-          highlighted={false}
-          isLineEnd={false}
-          isLineStart={false}
-          isRangeStart={false}
-          isRangeEnd={false}
-          pointerEvents={'none'}
-        >
-          <Capitalized colorVariant={'secondary'} colorTone={'medium'}>
-            {format(date, 'EEE', { locale }).slice(0, 3)}
-          </Capitalized>
-        </Cell>
-      ))}
-    </Week>
-  );
-};
-
-export default React.memo(Weekdays);

package/src/components/molecules/Calendar/components/index.ts

@@ -1,2 +0,0 @@
-export { default as Weekdays } from './Weekdays';
-export { default as MonthWeek } from './MonthWeek';

package/src/components/molecules/Calendar/index.ts

@@ -1,7 +0,0 @@
-export { default as Calendar } from './Calendar';
-export type {
-  CalendarProps,
-  SelectionType,
-  DateRange,
-  Value,
-} from './Calendar';

package/src/components/molecules/Calendar/styled.ts

@@ -1,117 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { FC } from 'react';
-import { Platform, PressableProps, ViewProps } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { PressableSurface } from '../../atoms/PressableSurface';
-import { TextProps } from '../../atoms/Text';
-
-const isWeb = Platform.OS === 'web';
-
-interface ButtonBorders {
-  isLeft?: boolean;
-  isRright?: boolean;
-}
-
-export const TitleContainer = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${({ theme }) => theme.color.secondary.xlight};
-`;
-
-export const Control = styled(PressableSurface)(
-  (
-    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }
-  ) => css`
-    align-items: flex-${props.align};
-    padding: ${props.theme?.spacing.centi};
-    border-radius: ${props.theme?.borderRadius.mili};
-    margin: ${props.theme?.spacing.mili};
-  `
-);
-
-export const getCapitalizedTextComponent = (component: FC<TextProps>) => {
-  return styled(component)`
-    text-transform: capitalize;
-  `;
-};
-
-export const Content = styled.View<ViewProps & Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.deca};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const Week = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-`;
-
-export const Selected = styled.View<
-  Partial<StyleProps> & { selected: boolean }
->`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({ theme, selected }) =>
-    selected ? theme.color.primary.medium : 'transparent'};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  width: 100%;
-  height: 100%;
-`;
-
-export const Cell = styled(PressableSurface)<
-  PressableProps &
-    Partial<StyleProps> & {
-      selected: boolean;
-      highlighted: boolean;
-      isLineEnd: boolean;
-      isLineStart: boolean;
-      isRangeStart: boolean;
-      isRangeEnd: boolean;
-    }
->(
-  ({
-    theme,
-    selected,
-    highlighted,
-    isLineEnd,
-    isLineStart,
-    isRangeStart,
-    isRangeEnd,
-  }) => {
-    const borderRadiusSize = theme.borderRadius.mili;
-
-    const { rightBorderRadius, leftBorderRadius } = {
-      rightBorderRadius:
-        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,
-      leftBorderRadius:
-        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,
-    };
-
-    const borderEffect = highlighted ? 0 : borderRadiusSize;
-
-    const backgroundColor = highlighted
-      ? theme.color.primary.light
-      : 'transparent';
-
-    return css`
-      ${isWeb
-        ? css`
-            width: 32px;
-            height: 32px;
-          `
-        : css`
-            aspect-ratio: 1;
-            flex: 1;
-          `}
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${borderEffect};
-      border-top-left-radius: ${leftBorderRadius};
-      border-bottom-left-radius: ${leftBorderRadius};
-      border-top-right-radius: ${rightBorderRadius};
-      border-bottom-right-radius: ${rightBorderRadius};
-      background-color: ${backgroundColor};
-    `;
-  }
-);

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,140 +0,0 @@
-import { format as formatDate } from 'date-fns';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { InputContainerProps, useInputFocus } from '../../atoms/Input';
-import { Text, TextProps } from '../../atoms/Text';
-import { CalendarProps, DateRange, SelectionType } from '../Calendar';
-import { HintInputContainer } from '../HintInputContainer';
-import { CalendarIcon, getStyledTextComponent } from './styled';
-
-export interface DatePickerProps<T extends SelectionType>
-  extends InputContainerProps,
-    Omit<CalendarProps<T>, 'style'> {
-  controlComponent?: (
-    onPress: () => void,
-    displayValue?: string
-  ) => JSX.Element;
-  TextComponent?: React.FC<TextProps>;
-  CalendarComponent: React.FC<CalendarProps<T>>;
-  placeholder?: string;
-  onFocus?: () => void | never;
-  onBlur?: () => void | never;
-  format?: string;
-  closeOnPick?: boolean;
-  renderCalendar: (
-    calendar: React.ReactElement,
-    blur?: () => void
-  ) => JSX.Element | null;
-  requestShowCalendar: () => void;
-  requestCloseCalendar: () => void;
-}
-
-function DatePicker<T extends SelectionType>({
-  /** DatePicker props */
-  month,
-  year,
-  onChange,
-  value,
-  type,
-  format = 'yyyy-MM-dd',
-  placeholder,
-  onFocus,
-  onBlur,
-  disabled,
-  controlComponent,
-  hintComponent,
-  hint,
-  variant,
-  TextComponent = Text,
-  CalendarComponent,
-  rightComponent,
-  style,
-  locale,
-  closeOnPick = false,
-  renderCalendar,
-  requestShowCalendar,
-  requestCloseCalendar,
-  ...rest
-}: DatePickerProps<T>): JSX.Element {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  const handleShowCalendar = React.useCallback(() => {
-    requestShowCalendar();
-    handleFocus();
-  }, [handleFocus, requestShowCalendar]);
-
-  const getDisplayValue = () => {
-    if (!value) return placeholder;
-    if (type === 'day') {
-      return formatDate(value as Date, format, { locale: locale });
-    } else {
-      const { lowest, highest } = value as DateRange;
-      if (highest)
-        return `${formatDate(lowest, format, {
-          locale: locale,
-        })} - ${formatDate(highest, format, { locale: locale })}`;
-      else return formatDate(lowest, format, { locale: locale });
-    }
-  };
-
-  const StyledText = getStyledTextComponent(TextComponent);
-
-  useEffect(() => {
-    if (closeOnPick && value && type === 'day') {
-      setTimeout(requestCloseCalendar, 200);
-    }
-    if (closeOnPick && value && type === 'range') {
-      const { lowest, highest } = value as DateRange;
-      lowest && highest && setTimeout(requestCloseCalendar, 200);
-    }
-  }, [value, closeOnPick, type, requestCloseCalendar]);
-
-  const calendar = (
-    <CalendarComponent
-      pointerEvents={'box-none'}
-      type={type}
-      value={value}
-      month={month}
-      year={year}
-      onChange={onChange}
-      locale={locale}
-    />
-  );
-
-  return (
-    <>
-      {controlComponent ? (
-        controlComponent(handleShowCalendar, getDisplayValue())
-      ) : (
-        <HintInputContainer
-          focused={focused}
-          viewStyle={style}
-          onPress={handleShowCalendar}
-          disabled={disabled}
-          hintComponent={hintComponent}
-          LabelComponent={TextComponent}
-          variant={variant}
-          hint={hint}
-          rightComponent={
-            <>
-              <CalendarIcon name="calendar-sharp" type="ionicon" size="centi" />
-              {rightComponent}
-            </>
-          }
-          {...rest}
-        >
-          <StyledText fontWeight="bold" disabled={disabled}>
-            {getDisplayValue() || ' '}
-          </StyledText>
-        </HintInputContainer>
-      )}
-      {renderCalendar(calendar, handleBlur)}
-    </>
-  );
-}
-
-export default DatePicker;

package/src/components/molecules/DatePicker/index.ts

@@ -1,2 +0,0 @@
-export { default as DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';

package/src/components/molecules/DatePicker/styled.ts

@@ -1,20 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { FC } from 'react';
-import { StyleProps } from '../../../types/defaults';
-import { Icon } from '../../atoms/Icon';
-import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
-import { TextProps } from '../../atoms/Text';
-
-export const getStyledTextComponent = (component: FC<TextProps>) => {
-  return styled(component)(
-    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`
-      line-height: ${props.theme?.typography.h5.lineHeight};
-      ${disabledInputStyles(props)}
-    `
-  );
-};
-
-export const CalendarIcon = styled(Icon)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi};
-  color: ${({ theme }) => theme.color.secondary.medium};
-`;

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,147 +0,0 @@
-import { format as formatDate } from 'date-fns';
-import * as React from 'react';
-import { InputContainerProps, useInputFocus } from '../../atoms/Input';
-import { Text, TextProps } from '../../atoms/Text';
-import { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';
-import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
-import { HintInputContainer } from '../HintInputContainer';
-import { getStyledDateTimeSelector } from './styled';
-
-export interface DateTimePickerProps
-  extends InputContainerProps,
-    Omit<DateTimeSelectorProps, 'style'> {
-  controlComponent?: (
-    onPress: () => void,
-    displayValue?: string
-  ) => JSX.Element;
-  TextComponent?: React.FC<TextProps>;
-  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
-  placeholder?: string;
-  onFocus?: () => void | never;
-  onBlur?: () => void | never;
-  renderSelector: (
-    selector: React.ReactElement,
-    blur?: () => void
-  ) => JSX.Element | null;
-  requestShowSelector: () => void;
-  requestCloseSelector: () => void;
-}
-
-const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  onChange,
-  value,
-  mode = 'date',
-  format = 'yyyy-MM-dd hh:mm:ss',
-  locale,
-  upperDateThreshold,
-  lowerDateThreshold,
-  offsetThreshold,
-  upperOffsetThreshold,
-  lowerOffsetThreshold,
-  dateModalTitle,
-  timeModalTitle,
-  dateConfirmButtonText,
-  timeConfirmButtonText,
-  dayLabel,
-  monthLabel,
-  yearLabel,
-  hourLabel,
-  minuteLabel,
-  placeholder,
-  onFocus,
-  onBlur,
-  disabled,
-  controlComponent,
-  hintComponent,
-  hint,
-  variant = 'default',
-  TextComponent = Text,
-  DateTimeSelectorComponent = DateTimeSelector,
-  rightComponent,
-  style,
-  renderSelector,
-  requestShowSelector,
-  requestCloseSelector,
-  ...rest
-}) => {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  const handleShowSelector = () => {
-    requestShowSelector();
-    handleFocus();
-  };
-
-  const handleChoosing = (value: Date) => {
-    onChange?.(value);
-    requestCloseSelector();
-  };
-
-  const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue =
-    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
-    ' ';
-  const StyledDateTimeSelector = getStyledDateTimeSelector(
-    DateTimeSelectorComponent
-  );
-
-  const dateTimeSelector = (
-    <StyledDateTimeSelector
-      value={value}
-      mode={mode}
-      format={format}
-      locale={locale}
-      upperDateThreshold={upperDateThreshold}
-      lowerDateThreshold={lowerDateThreshold}
-      offsetThreshold={offsetThreshold}
-      upperOffsetThreshold={upperOffsetThreshold}
-      lowerOffsetThreshold={lowerOffsetThreshold}
-      dateModalTitle={dateModalTitle}
-      timeModalTitle={timeModalTitle}
-      dateConfirmButtonText={dateConfirmButtonText}
-      timeConfirmButtonText={timeConfirmButtonText}
-      dayLabel={dayLabel}
-      monthLabel={monthLabel}
-      yearLabel={yearLabel}
-      hourLabel={hourLabel}
-      minuteLabel={minuteLabel}
-      onChange={handleChoosing}
-    />
-  );
-
-  return (
-    <>
-      {controlComponent ? (
-        controlComponent(handleShowSelector, displayValue)
-      ) : (
-        <HintInputContainer
-          focused={focused}
-          viewStyle={style}
-          onPress={handleShowSelector}
-          disabled={disabled}
-          LabelComponent={TextComponent}
-          variant={variant}
-          hint={hint}
-          hintComponent={hintComponent}
-          rightComponent={
-            <>
-              <CalendarIcon name="calendar-sharp" type="ionicon" size="centi" />
-              {rightComponent}
-            </>
-          }
-          {...rest}
-        >
-          <StyledText fontWeight="bold" disabled={disabled}>
-            {displayValue}
-          </StyledText>
-        </HintInputContainer>
-      )}
-      {renderSelector(dateTimeSelector, handleBlur)}
-    </>
-  );
-};
-
-export default DateTimePicker;

package/src/components/molecules/DateTimePicker/index.ts

@@ -1,2 +0,0 @@
-export { default as DateTimePicker } from './DateTimePicker';
-export type { DateTimePickerProps } from './DateTimePicker';

package/src/components/molecules/DateTimePicker/styled.ts

@@ -1,12 +0,0 @@
-import styled from '@emotion/native';
-import { FC } from 'react';
-import { StyleProps } from '../../../types/defaults';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-
-export const getStyledDateTimeSelector = (
-  component: FC<DateTimeSelectorProps>
-) => {
-  return styled(component)<Partial<StyleProps>>`
-    padding: ${({ theme }) => theme.spacing.deca};
-  `;
-};