@tecsinapse/react-core 1.21.1-beta.8 → 1.21.2

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

@@ -0,0 +1,147 @@
+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

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

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

@@ -0,0 +1,12 @@
+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};
+  `;
+};

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -0,0 +1,319 @@
+import {
+  add,
+  compareAsc,
+  format as formatDate,
+  getDaysInMonth,
+  isSameDay,
+  isSameMonth,
+  isSameYear,
+  set,
+  sub,
+} from 'date-fns';
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import { Button } from '../../atoms/Button';
+import { Icon } from '../../atoms/Icon';
+import { Text, TextProps } from '../../atoms/Text';
+import { Granularity, Selector } from './Selector';
+import { BackButton, Content, Header, Root, SelectorContainer } from './styled';
+
+export type DateTimeSelectorMode = 'date' | 'time' | 'datetime' | 'month';
+
+export interface DateTimeSelectorProps extends ViewProps {
+  TextComponent?: React.FC<TextProps>;
+  value?: Date;
+  onChange?: (value: Date) => void | never;
+
+  /**
+   * Defines the Picker behavior
+   * Must be one of ['date', 'time', 'datetime', 'month']
+   */
+  mode?: DateTimeSelectorMode;
+  format?: string;
+  locale?: Locale;
+
+  /**
+   * Maximum date from today
+   */
+  upperDateThreshold?: Date;
+
+  /**
+   * Minimum date from today
+   */
+  lowerDateThreshold?: Date;
+
+  /**
+   * Minimum and maximum date in distance units from today.
+   * The distance unit used depends on the picker mode
+   * If mode is date, the unit is day
+   * If mode is time, the unit is hour
+   * If mode is datetime, the unit is day
+   * If mode is month, the unit is month
+   */
+  offsetThreshold?: number;
+
+  /**
+   * Maximum date in distance units from today.
+   * The distance unit used depends on the picker mode
+   * If mode is date, the unit is day
+   * If mode is time, the unit is hour
+   * If mode is datetime, the unit is day
+   * If mode is month, the unit is month
+   */
+  upperOffsetThreshold?: number;
+
+  /**
+   * Minimum date in distance units from today.
+   * The distance unit used depends on the picker mode
+   * If mode is date, the unit is day
+   * If mode is time, the unit is hour
+   * If mode is datetime, the unit is day
+   * If mode is month, the unit is month
+   */
+  lowerOffsetThreshold?: number;
+
+  dateModalTitle?: string;
+  timeModalTitle?: string;
+  dateConfirmButtonText?: string;
+  timeConfirmButtonText?: string;
+  dayLabel?: string;
+  monthLabel?: string;
+  yearLabel?: string;
+  hourLabel?: string;
+  minuteLabel?: string;
+}
+
+function getThresholdUnit(mode: DateTimeSelectorMode, threshold?: number) {
+  if (!threshold) return {};
+  if (mode === 'month') {
+    return { months: threshold };
+  } else if (['date', 'datetime'].includes(mode)) {
+    return { days: threshold };
+  } else {
+    return { hours: threshold };
+  }
+}
+
+const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
+  TextComponent = Text,
+  value,
+  onChange,
+  mode = 'date',
+  locale,
+  upperDateThreshold: _upperDateThreshold,
+  lowerDateThreshold: _lowerDateThreshold,
+  offsetThreshold,
+  upperOffsetThreshold,
+  lowerOffsetThreshold,
+  dateModalTitle,
+  timeModalTitle,
+  dateConfirmButtonText,
+  timeConfirmButtonText,
+  dayLabel,
+  monthLabel,
+  yearLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  const lowerDateThreshold =
+    _lowerDateThreshold ||
+    ((offsetThreshold || lowerOffsetThreshold) &&
+      sub(
+        new Date(),
+        getThresholdUnit(mode, offsetThreshold || lowerOffsetThreshold)
+      ));
+
+  const upperDateThreshold =
+    _upperDateThreshold ||
+    ((offsetThreshold || upperOffsetThreshold) &&
+      add(
+        new Date(),
+        getThresholdUnit(mode, offsetThreshold || upperOffsetThreshold)
+      ));
+
+  const [date, setDate] = React.useState<Date>(value || new Date());
+  const [currentMode, setCurrentMode] = React.useState<0 | 1>(0);
+
+  const isDate =
+    ['date', 'month'].includes(mode) ||
+    (mode === 'datetime' && currentMode === 0);
+
+  const modalTitle = isDate ? dateModalTitle : timeModalTitle;
+  const confirmButtonText = isDate
+    ? dateConfirmButtonText
+    : timeConfirmButtonText;
+
+  const handleChange = (granularity: Granularity) => (newValue: number) => {
+    setDate(date => {
+      let newState: Date;
+      // Months and years must have a different handling for being
+      // the only date units that may interfere another unit.
+      if (['month', 'year'].includes(granularity)) {
+        let newDate = set(date, { [granularity]: newValue });
+        const daysInMonth = getDaysInMonth(newDate);
+        if (granularity === 'year' && date.getMonth() != newDate.getMonth()) {
+          newDate = set(newDate, { month: date.getMonth() });
+          newState = set(newDate, { date: getDaysInMonth(newDate) });
+        }
+        newState =
+          daysInMonth < date.getDate()
+            ? set(newDate, { date: daysInMonth })
+            : newDate;
+      } else {
+        newState = set(date, { [granularity]: newValue });
+      }
+
+      if (upperDateThreshold && compareAsc(newState, upperDateThreshold) > 0) {
+        return upperDateThreshold;
+      } else if (
+        lowerDateThreshold &&
+        compareAsc(newState, lowerDateThreshold) < 0
+      ) {
+        return lowerDateThreshold;
+      } else {
+        return newState;
+      }
+    });
+  };
+
+  const getDisplayedValue = (granularity: Granularity) => (value: number) => {
+    return granularity === 'month'
+      ? formatDate(date, 'MMM', { locale: locale }).slice(0, 3)
+      : value.toString().padStart(2, '0');
+  };
+
+  const handlePressConfirm = () => {
+    if (mode === 'datetime' && currentMode === 0) {
+      setCurrentMode(1);
+    } else {
+      onChange?.(date);
+    }
+  };
+
+  const handlePressBack = () => {
+    setCurrentMode(0);
+  };
+
+  return (
+    <Root {...rest}>
+      <Header>
+        {currentMode === 1 && (
+          <BackButton onPress={handlePressBack}>
+            <Icon
+              type={'material-community'}
+              name={'chevron-left'}
+              size={'mega'}
+              colorVariant={'secondary'}
+            />
+          </BackButton>
+        )}
+        <TextComponent typography={'base'} colorVariant={'secondary'}>
+          {modalTitle}
+        </TextComponent>
+      </Header>
+
+      {isDate ? (
+        <Content>
+          {mode !== 'month' && (
+            <SelectorContainer isFirst>
+              <Selector
+                TextComponent={TextComponent}
+                onChange={handleChange('date')}
+                referenceDate={date}
+                value={date.getDate()}
+                label={dayLabel || 'Day'}
+                granularity={'date'}
+                getDisplayValue={getDisplayedValue('date')}
+                preventUpper={
+                  upperDateThreshold
+                    ? isSameDay(upperDateThreshold, date)
+                    : false
+                }
+                preventLower={
+                  lowerDateThreshold
+                    ? isSameDay(lowerDateThreshold, date)
+                    : false
+                }
+              />
+            </SelectorContainer>
+          )}
+          <SelectorContainer>
+            <Selector
+              TextComponent={TextComponent}
+              onChange={handleChange('month')}
+              referenceDate={date}
+              value={date.getMonth()}
+              label={monthLabel || 'Month'}
+              granularity={'month'}
+              getDisplayValue={getDisplayedValue('month')}
+              preventUpper={
+                upperDateThreshold
+                  ? isSameMonth(upperDateThreshold, date)
+                  : false
+              }
+              preventLower={
+                lowerDateThreshold
+                  ? isSameMonth(lowerDateThreshold, date)
+                  : false
+              }
+            />
+          </SelectorContainer>
+          <SelectorContainer isLast>
+            <Selector
+              TextComponent={TextComponent}
+              onChange={handleChange('year')}
+              referenceDate={date}
+              value={date.getFullYear()}
+              label={yearLabel || 'Year'}
+              granularity={'year'}
+              getDisplayValue={getDisplayedValue('year')}
+              preventUpper={
+                upperDateThreshold
+                  ? isSameYear(upperDateThreshold, date)
+                  : false
+              }
+              preventLower={
+                lowerDateThreshold
+                  ? isSameYear(lowerDateThreshold, date)
+                  : false
+              }
+            />
+          </SelectorContainer>
+        </Content>
+      ) : (
+        <Content>
+          <SelectorContainer isFirst>
+            <Selector
+              TextComponent={TextComponent}
+              onChange={handleChange('hours')}
+              referenceDate={date}
+              value={date.getHours()}
+              label={hourLabel || 'Hour'}
+              granularity={'hours'}
+              getDisplayValue={getDisplayedValue('hours')}
+            />
+          </SelectorContainer>
+          <SelectorContainer isLast>
+            <Selector
+              TextComponent={TextComponent}
+              onChange={handleChange('minutes')}
+              referenceDate={date}
+              value={date.getMinutes()}
+              label={minuteLabel || 'Minute'}
+              granularity={'minutes'}
+              getDisplayValue={getDisplayedValue('minutes')}
+            />
+          </SelectorContainer>
+        </Content>
+      )}
+      <Button color={'primary'} onPress={handlePressConfirm}>
+        <TextComponent fontWeight="bold" fontColor="light">
+          {confirmButtonText || 'OK'}
+        </TextComponent>
+      </Button>
+    </Root>
+  );
+};
+
+export default DateTimeSelector;

package/src/components/molecules/DateTimeSelector/Selector.tsx

@@ -0,0 +1,122 @@
+import { getDaysInMonth } from 'date-fns';
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+import { Icon } from '../../atoms/Icon';
+import { TextProps } from '../../atoms/Text';
+import { Control, SelectorRoot, SelectorValue } from './styled';
+
+export type Granularity = 'date' | 'month' | 'year' | 'hours' | 'minutes';
+
+interface SelectorProps extends ViewProps {
+  TextComponent: React.FC<TextProps>;
+  granularity: Granularity;
+  referenceDate: Date;
+  label: string;
+  value: number;
+  getDisplayValue: (value: number) => string;
+  onChange: (value: number) => void | never;
+  preventUpper?: boolean;
+  preventLower?: boolean;
+}
+
+function getPrevAndNext(
+  value: number,
+  granularity: Granularity,
+  daysInMonth: number,
+  multiplier = 1
+): [number, number] {
+  let next = value + multiplier,
+    prev = value - multiplier;
+
+  if (granularity === 'date') {
+    next = next > daysInMonth ? 1 : next;
+    prev = prev < 1 ? daysInMonth : prev;
+  } else if (granularity === 'month') {
+    next = next > 11 ? 0 : next;
+    prev = prev < 0 ? 11 : prev;
+  } else if (granularity === 'hours') {
+    next = next > 23 ? 0 : next;
+    prev = prev < 0 ? 23 : prev;
+  } else if (granularity === 'minutes') {
+    next = next > 59 ? 0 : next;
+    prev = prev < 0 ? 59 : prev;
+  }
+
+  return [prev, next];
+}
+export const Selector: React.FC<SelectorProps> = ({
+  granularity,
+  label,
+  value,
+  onChange,
+  getDisplayValue,
+  referenceDate,
+  preventUpper,
+  preventLower,
+  TextComponent,
+  ...rest
+}) => {
+  const pressInTimeoutRef = React.useRef<number>();
+
+  const handlePressInNext = (_next?: number) => {
+    const daysInMonth = getDaysInMonth(referenceDate);
+    const next = _next || getPrevAndNext(value, granularity, daysInMonth)[1];
+    clearTimeout(pressInTimeoutRef.current);
+    pressInTimeoutRef.current = setTimeout(() => {
+      handlePressInNext(getPrevAndNext(next, granularity, daysInMonth, 3)[1]);
+    }, 500);
+    onChange(next);
+  };
+
+  const handlePressInPrev = (_prev?: number) => {
+    const daysInMonth = getDaysInMonth(referenceDate);
+    const prev = _prev || getPrevAndNext(value, granularity, daysInMonth)[0];
+    clearTimeout(pressInTimeoutRef.current);
+    pressInTimeoutRef.current = setTimeout(() => {
+      handlePressInPrev(getPrevAndNext(prev, granularity, daysInMonth, 3)[0]);
+    }, 500);
+    onChange(prev);
+  };
+
+  const handlePressOut = () => {
+    pressInTimeoutRef.current && clearTimeout(pressInTimeoutRef.current);
+  };
+
+  return (
+    <SelectorRoot {...rest}>
+      <Control
+        onPressIn={() => requestAnimationFrame(() => handlePressInNext())}
+        onPressOut={handlePressOut}
+        disabled={preventUpper}
+      >
+        <Icon
+          name={'chevron-up'}
+          type={'material-community'}
+          size={'mega'}
+          colorVariant={'primary'}
+        />
+      </Control>
+      <SelectorValue>
+        <TextComponent colorVariant={'secondary'} typography={'sub'}>
+          {label}
+        </TextComponent>
+        <TextComponent fontWeight={'bold'} typography={'h5'}>
+          {getDisplayValue(value)}
+        </TextComponent>
+      </SelectorValue>
+      <Control
+        onPressIn={() => requestAnimationFrame(() => handlePressInPrev())}
+        onPressOut={handlePressOut}
+        disabled={preventLower}
+        style={{ opacity: preventLower ? 0 : 1 }}
+      >
+        <Icon
+          name={'chevron-down'}
+          type={'material-community'}
+          size={'mega'}
+          colorVariant={'primary'}
+        />
+      </Control>
+    </SelectorRoot>
+  );
+};

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

@@ -0,0 +1,5 @@
+export { default as DateTimeSelector } from './DateTimeSelector';
+export type {
+  DateTimeSelectorProps,
+  DateTimeSelectorMode,
+} from './DateTimeSelector';

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

@@ -0,0 +1,55 @@
+import styled from '@emotion/native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
+import { PressableSurface } from '../../atoms/PressableSurface';
+
+export const Root = styled.View<Partial<StyleProps>>`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+
+export const Content = styled.View<Partial<StyleProps>>`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-vertical: ${({ theme }) => theme.spacing.deca};
+`;
+
+export const SelectorRoot = styled.View<Partial<StyleProps>>`
+  border-width: ${RFValueStr('1px')};
+  border-color: ${({ theme }) => theme.color.secondary.xlight};
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+`;
+
+export const SelectorValue = styled.View`
+  align-items: center;
+`;
+
+export const SelectorContainer = styled.View<
+  Partial<StyleProps> & { isFirst?: boolean; isLast?: boolean }
+>`
+  margin-right: ${({ theme, isFirst }) => (isFirst ? theme.spacing.deca : 0)};
+  margin-left: ${({ theme, isLast }) => (isLast ? theme.spacing.deca : 0)};
+  flex: 1;
+`;
+
+export const Control = styled(PressableSurface)<Partial<StyleProps>>`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-vertical: ${({ theme }) => theme.spacing.mili};
+  margin-horizontal: ${({ theme }) => theme.spacing.mili};
+`;
+
+export const Header = styled.View`
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const BackButton = styled(PressableSurface)<Partial<StyleProps>>`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  position: absolute;
+  aspect-ratio: 1;
+  left: 0;
+`;

package/src/components/molecules/Grid/functions.ts

@@ -0,0 +1,25 @@
+import { GridSpacing, PaddingPosition, Spacing } from '@tecsinapse/react-core';
+import { extractNumbersFromString } from '../../../utils';
+
+export const getGridItemPadding = (
+  pos: PaddingPosition,
+  _spacing: GridSpacing | undefined,
+  themeSpacing: Spacing
+): number | undefined => {
+  if (_spacing) {
+    if (typeof _spacing === 'string')
+      return extractNumbersFromString(themeSpacing[_spacing]);
+    else if (typeof _spacing === 'object' && _spacing[pos]) {
+      return extractNumbersFromString(themeSpacing[_spacing[pos] ?? '0']);
+    } else return undefined;
+  } else return undefined;
+};
+
+/**
+ * Calc the basis width percentage for a given item
+ * @param columns - number of grid columns
+ * @param span - number of columns to merge
+ * @returns {number} - value in %
+ */
+export const getGridItemColumSpan = (columns: number, span: number): number =>
+  100 / (columns / span);