@tecsinapse/react-core 1.12.8 → 1.14.0

package/dist/components/molecules/DateTimePicker/Modal.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-export interface DateTimePickerModalProps {
-    DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;
-    bottomOffset?: number;
-}
-export declare const Modal: React.FC<DateTimeSelectorProps & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & DateTimePickerModalProps>;

package/dist/components/molecules/DateTimePicker/Modal.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modal = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _DateTimeSelector = require("../DateTimeSelector");
-
-var _styled = require("./styled");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const Component = ({
-  onRequestClose,
-  onChange,
-  value,
-  mode,
-  format,
-  locale,
-  upperDateThreshold,
-  lowerDateThreshold,
-  offsetThreshold,
-  upperOffsetThreshold,
-  lowerOffsetThreshold,
-  dateModalTitle,
-  timeModalTitle,
-  dateConfirmButtonText,
-  timeConfirmButtonText,
-  dayLabel,
-  monthLabel,
-  yearLabel,
-  hourLabel,
-  minuteLabel,
-  DateTimeSelectorComponent = _DateTimeSelector.DateTimeSelector,
-  bottomOffset = 0,
-  ...modalProps
-}) => {
-  const handleDateTimeSelectorChange = date => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(date);
-    onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
-  };
-
-  const StyledDateTimeSelector = (0, _styled.getStyledDateTimeSelector)(DateTimeSelectorComponent);
-  return React.createElement(_reactNative.Modal, _extends({
-    transparent: true,
-    hardwareAccelerated: true,
-    statusBarTranslucent: true
-  }, modalProps, {
-    onRequestClose: onRequestClose
-  }), React.createElement(_styled.Backdrop, {
-    onPress: onRequestClose,
-    effect: "none"
-  }, React.createElement(_styled.ModalContent, {
-    offset: bottomOffset
-  }, React.createElement(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: handleDateTimeSelectorChange
-  }))));
-};
-
-const Modal = Component;
-exports.Modal = Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DateTimePicker/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/Modal.tsx"],"names":["Component","onRequestClose","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","DateTimeSelectorComponent","DateTimeSelector","bottomOffset","modalProps","handleDateTimeSelectorChange","date","StyledDateTimeSelector","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAEL,GAAG,CAAC;AACHC,EAAAA,cADG;AAEHC,EAAAA,QAFG;AAGHC,EAAAA,KAHG;AAIHC,EAAAA,IAJG;AAKHC,EAAAA,MALG;AAMHC,EAAAA,MANG;AAOHC,EAAAA,kBAPG;AAQHC,EAAAA,kBARG;AASHC,EAAAA,eATG;AAUHC,EAAAA,oBAVG;AAWHC,EAAAA,oBAXG;AAYHC,EAAAA,cAZG;AAaHC,EAAAA,cAbG;AAcHC,EAAAA,qBAdG;AAeHC,EAAAA,qBAfG;AAgBHC,EAAAA,QAhBG;AAiBHC,EAAAA,UAjBG;AAkBHC,EAAAA,SAlBG;AAmBHC,EAAAA,SAnBG;AAoBHC,EAAAA,WApBG;AAqBHC,EAAAA,yBAAyB,GAAGC,kCArBzB;AAsBHC,EAAAA,YAAY,GAAG,CAtBZ;AAuBH,KAAGC;AAvBA,CAAD,KAwBE;AACJ,QAAMC,4BAA4B,GAAIC,IAAD,IAAgB;AACnDxB,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGwB,IAAH,CAAR;AACAzB,IAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc;AACf,GAHD;;AAKA,QAAM0B,sBAAsB,GAAG,uCAC7BN,yBAD6B,CAA/B;AAIA,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMG,UAJN;AAKE,IAAA,cAAc,EAAEvB;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEsB;AAAtB,KACE,oBAAC,sBAAD;AACE,IAAA,KAAK,EAAEpB,KADT;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,kBAAkB,EAAEC,kBALtB;AAME,IAAA,kBAAkB,EAAEC,kBANtB;AAOE,IAAA,eAAe,EAAEC,eAPnB;AAQE,IAAA,oBAAoB,EAAEC,oBARxB;AASE,IAAA,oBAAoB,EAAEC,oBATxB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,cAAc,EAAEC,cAXlB;AAYE,IAAA,qBAAqB,EAAEC,qBAZzB;AAaE,IAAA,qBAAqB,EAAEC,qBAbzB;AAcE,IAAA,QAAQ,EAAEC,QAdZ;AAeE,IAAA,UAAU,EAAEC,UAfd;AAgBE,IAAA,SAAS,EAAEC,SAhBb;AAiBE,IAAA,SAAS,EAAEC,SAjBb;AAkBE,IAAA,WAAW,EAAEC,WAlBf;AAmBE,IAAA,QAAQ,EAAEK;AAnBZ,IADF,CADF,CAPF,CADF;AAmCD,CAvED;;AAyEO,MAAMG,KAAK,GAAG5B,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';\nimport { Backdrop, getStyledDateTimeSelector, ModalContent } from './styled';\n\nexport interface DateTimePickerModalProps {\n  DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;\n  bottomOffset?: number;\n}\n\nconst Component: React.FC<\n  DateTimeSelectorProps & ModalProps & DateTimePickerModalProps\n> = ({\n  onRequestClose,\n  onChange,\n  value,\n  mode,\n  format,\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n  DateTimeSelectorComponent = DateTimeSelector,\n  bottomOffset = 0,\n  ...modalProps\n}) => {\n  const handleDateTimeSelectorChange = (date: Date) => {\n    onChange?.(date);\n    onRequestClose?.();\n  };\n\n  const StyledDateTimeSelector = getStyledDateTimeSelector(\n    DateTimeSelectorComponent\n  );\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <ModalContent offset={bottomOffset}>\n          <StyledDateTimeSelector\n            value={value}\n            mode={mode}\n            format={format}\n            locale={locale}\n            upperDateThreshold={upperDateThreshold}\n            lowerDateThreshold={lowerDateThreshold}\n            offsetThreshold={offsetThreshold}\n            upperOffsetThreshold={upperOffsetThreshold}\n            lowerOffsetThreshold={lowerOffsetThreshold}\n            dateModalTitle={dateModalTitle}\n            timeModalTitle={timeModalTitle}\n            dateConfirmButtonText={dateConfirmButtonText}\n            timeConfirmButtonText={timeConfirmButtonText}\n            dayLabel={dayLabel}\n            monthLabel={monthLabel}\n            yearLabel={yearLabel}\n            hourLabel={hourLabel}\n            minuteLabel={minuteLabel}\n            onChange={handleDateTimeSelectorChange}\n          />\n        </ModalContent>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/src/components/atoms/Input/hooks/useCurrencyMask.ts

@@ -1,74 +0,0 @@
-import currency from 'currency.js';
-import { useCallback, useState } from 'react';
-import { IMaskValue, IMask } from './useMask';
-import { extractNumbersFromString } from '@tecsinapse/react-core';
-
-type CurrencyOptions = currency.Options;
-
-const DEFAULT_OPTIONS: CurrencyOptions = {
-  symbol: 'R$ ',
-  separator: '.',
-  decimal: ',',
-  precision: 2,
-};
-
-/**
- * TODO:
- * @param options
- * @param defaultValue
- * @returns
- */
-export const useCurrencyMask = (
-  options?: CurrencyOptions,
-  defaultValue?: string
-): [IMask, (value: string) => void] => {
-  const getRegex = useCallback(
-    (precision: number) => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g'),
-    [options]
-  );
-
-  const applyMask = useCallback(
-    (value = ''): IMaskValue => {
-      const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
-      const { precision = -1 } = mergedOptions;
-      const onlyNumbers = String(extractNumbersFromString(value));
-      const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
-      let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
-
-      if (internalNumber > Number.MAX_SAFE_INTEGER) {
-        internalNumber = Number.MAX_SAFE_INTEGER;
-      }
-
-      if (internalNumber < Number.MIN_SAFE_INTEGER) {
-        internalNumber = Number.MIN_SAFE_INTEGER;
-      }
-
-      return {
-        raw: internalNumber,
-        formatted: currency(internalNumber).format(mergedOptions),
-      };
-    },
-    [options, getRegex]
-  );
-
-  const [value, setValue] = useState<IMask>({
-    converter: applyMask,
-    maskValue: applyMask(defaultValue),
-  });
-
-  const handleChangeValue = useCallback(
-    (formattedValue: string) => {
-      const { raw, formatted } = applyMask(formattedValue);
-      setValue(oldValue => ({
-        ...oldValue,
-        maskValue: {
-          raw,
-          formatted,
-        },
-      }));
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};

package/src/components/atoms/Input/hooks/useMask.ts

@@ -1,92 +0,0 @@
-import { useCallback, useState } from 'react';
-import { extractDigitsFromString } from '@tecsinapse/react-core';
-
-export interface IMaskValue {
-  formatted?: string;
-  raw?: any;
-}
-
-export interface IMask {
-  converter?: (raw?: string) => IMaskValue;
-  maskValue?: IMaskValue;
-}
-
-/**
- * TODO:
- * @param value
- * @param mask
- * @returns
- */
-const mergeMask = (value = '', mask: string) => {
-  const chars = '' + value;
-  let formattedValue = '';
-
-  for (
-    let iMask = 0, iChars = 0;
-    iMask < mask.length && iChars < chars.length;
-    iMask++
-  ) {
-    formattedValue +=
-      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);
-  }
-  return formattedValue;
-};
-
-/**
- * TODO:
- * @param value
- * @param mask
- * @returns
- */
-const getMask = (value = '', mask: ((raw: any) => string) | string): string => {
-  if (typeof mask === 'function') {
-    return mask(value);
-  }
-  return mask;
-};
-
-/**
- * TODO:
- * @param mask
- * @param defaultValue
- * @returns
- */
-export const useMask = (
-  mask: ((raw: any) => string) | string,
-  defaultValue?: string
-): [IMask, (text: string) => void] => {
-  const applyMask = useCallback(
-    (value = ''): IMaskValue => {
-      const onlyNumbers = value ? extractDigitsFromString(value) : value;
-      const selectedMask = getMask(onlyNumbers, mask);
-      const formattedValue = mergeMask(onlyNumbers, selectedMask);
-
-      return {
-        raw: onlyNumbers,
-        formatted: formattedValue,
-      };
-    },
-    [mask]
-  );
-
-  const [value, setValue] = useState<IMask>({
-    converter: applyMask,
-    maskValue: applyMask(defaultValue),
-  });
-
-  const handleChangeValue = useCallback(
-    (value: string) => {
-      const { raw, formatted } = applyMask(value);
-      setValue(oldValue => ({
-        ...oldValue,
-        maskValue: {
-          raw,
-          formatted,
-        },
-      }));
-    },
-    [applyMask, setValue]
-  );
-
-  return [value, handleChangeValue];
-};

package/src/components/atoms/Input/masks/index.ts

@@ -1,12 +0,0 @@
-// NOTE: Add here all individually masks, then you can use it on input components everywhere.
-export const Masks = {
-  CPF: '999.999.999-99',
-  CNPJ: '99.999.999/9999-99',
-  DATE: '99/99/9999',
-  MONTH_YEAR: '99/9999',
-  CEP: '99999-999',
-  PHONE: '(99) 9999-9999',
-  PHONE_EXTENDED: '(99) 99999-9999',
-  COMBINED_PHONE: (value: string) =>
-    value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
-};

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

@@ -1,44 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { ptBR } from 'date-fns/locale';
-import DatePicker, { DatePickerProps } from './DatePicker';
-import { DateRange } from '../Calendar';
-
-export default {
-  title: 'Hybrid/Date Picker',
-  component: DatePicker,
-};
-
-const Template: Story<DatePickerProps<'range'>> = args => {
-  const [value, setValue] = React.useState<DateRange>();
-
-  return (
-    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Range = Template.bind({});
-
-Range.args = {
-  label: 'Select date',
-  placeholder: 'Select date',
-  type: 'range',
-  closeOnPick: true,
-};
-
-const TemplateDay: Story<DatePickerProps<'day'>> = args => {
-  const [value, setValue] = React.useState<Date>();
-
-  return (
-    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Day = TemplateDay.bind({});
-
-Day.args = {
-  label: 'Select date',
-  placeholder: 'Select date',
-  type: 'day',
-  closeOnPick: true,
-};

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

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { Modal as RNModal, ModalProps } from 'react-native';
-import { Calendar, CalendarProps, SelectionType } from '../Calendar';
-import { Backdrop, ModalContent } from './styled';
-import { PressableSurface } from '@tecsinapse/react-core';
-
-export interface DatePickerModalProps<T extends SelectionType> {
-  CalendarComponent?: React.FC<CalendarProps<T>>;
-  bottomOffset?: number;
-}
-
-const Component = <T extends SelectionType>({
-  type,
-  value,
-  onRequestClose,
-  month,
-  year,
-  onChange,
-  CalendarComponent = Calendar,
-  bottomOffset = 0,
-  locale,
-  ...modalProps
-}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {
-  return (
-    <RNModal
-      transparent
-      hardwareAccelerated
-      statusBarTranslucent
-      {...modalProps}
-      onRequestClose={onRequestClose}
-    >
-      <Backdrop onPress={onRequestClose} effect="none">
-        <PressableSurface>
-          <ModalContent offset={bottomOffset}>
-            <CalendarComponent
-              pointerEvents={'box-none'}
-              type={type}
-              value={value}
-              month={month}
-              year={year}
-              onChange={onChange}
-              locale={locale}
-            />
-          </ModalContent>
-        </PressableSurface>
-      </Backdrop>
-    </RNModal>
-  );
-};
-
-export const Modal = Component;

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

@@ -1,26 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { ptBR } from 'date-fns/locale';
-import { DateTimePicker, DateTimePickerProps } from './index';
-
-export default {
-  title: 'Hybrid/Date Time Picker',
-  component: DateTimePicker,
-};
-
-const Template: Story<DateTimePickerProps> = ({ ...args }) => {
-  const [value, setValue] = React.useState<Date>();
-
-  return (
-    <DateTimePicker
-      label={'Select date and time'}
-      placeholder={'Select date and time'}
-      mode={'datetime'}
-      value={value}
-      onChange={setValue}
-      locale={ptBR}
-    />
-  );
-};
-
-export const Base = Template.bind({});

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

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { Modal as RNModal, ModalProps } from 'react-native';
-import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
-import { Backdrop, getStyledDateTimeSelector, ModalContent } from './styled';
-
-export interface DateTimePickerModalProps {
-  DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;
-  bottomOffset?: number;
-}
-
-const Component: React.FC<
-  DateTimeSelectorProps & ModalProps & DateTimePickerModalProps
-> = ({
-  onRequestClose,
-  onChange,
-  value,
-  mode,
-  format,
-  locale,
-  upperDateThreshold,
-  lowerDateThreshold,
-  offsetThreshold,
-  upperOffsetThreshold,
-  lowerOffsetThreshold,
-  dateModalTitle,
-  timeModalTitle,
-  dateConfirmButtonText,
-  timeConfirmButtonText,
-  dayLabel,
-  monthLabel,
-  yearLabel,
-  hourLabel,
-  minuteLabel,
-  DateTimeSelectorComponent = DateTimeSelector,
-  bottomOffset = 0,
-  ...modalProps
-}) => {
-  const handleDateTimeSelectorChange = (date: Date) => {
-    onChange?.(date);
-    onRequestClose?.();
-  };
-
-  const StyledDateTimeSelector = getStyledDateTimeSelector(
-    DateTimeSelectorComponent
-  );
-
-  return (
-    <RNModal
-      transparent
-      hardwareAccelerated
-      statusBarTranslucent
-      {...modalProps}
-      onRequestClose={onRequestClose}
-    >
-      <Backdrop onPress={onRequestClose} effect="none">
-        <ModalContent offset={bottomOffset}>
-          <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={handleDateTimeSelectorChange}
-          />
-        </ModalContent>
-      </Backdrop>
-    </RNModal>
-  );
-};
-
-export const Modal = Component;