react native WeekdaysSelector

WeekdaysSelector.tsx

import { TouchableOpacity, View } from 'react-native';

import { withLightHapticFeedback } from '_utils';

import { C_Text } from './C_Text';

const weekdays = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];

export const WeekdaysSelector = ({
  selectedDays,
  onChangeValue,
  fieldWithError,
}: {
  selectedDays: string;
  onChangeValue: (text: string) => void;
  fieldWithError?: boolean;
}) => {
  // L-M-X -> ['L', 'M', 'X']
  const parsedSelectedDays = selectedDays.replaceAll('-', '').split('');

  const toggleWeekdaySelection = (weekdayLabel) => {
    let newSelectedDays;

    if (parsedSelectedDays.includes(weekdayLabel)) {
      newSelectedDays = parsedSelectedDays.filter((day) => day !== weekdayLabel);
    } else {
      newSelectedDays = [...parsedSelectedDays, weekdayLabel];
    }

    onChangeValue(newSelectedDays.join('-'));
  };

  return (
    <View
      className={`flex items-center justify-center space-x-2 flex-row py-2 ${
        fieldWithError ? 'border border-color-error' : ''
      }`}>
      {weekdays.map((weekDay) => (
        <TouchableOpacity
          key={weekDay}
          onPress={() => withLightHapticFeedback(() => toggleWeekdaySelection(weekDay))}>
          <View
            className={`flex items-center justify-center w-8 h-8 rounded-full cursor-pointer ${
              parsedSelectedDays.includes(weekDay) ? 'bg-color-primary' : 'bg-gray-800'
            }`}>
            <C_Text
              className={`${!parsedSelectedDays.includes(weekDay) ? 'text-color-text2' : ''}`}>
              {weekDay}
            </C_Text>
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default WeekdaysSelector;

a.MP4