@tecsinapse/react-native-kit 3.0.0 → 3.3.1

package/dist/cjs/components/molecules/DatePicker/DatePicker.js

@@ -13,17 +13,45 @@ var styled = require('./styled.js');
 const DatePicker = ({
   locale,
   onChange,
+  value,
+  type,
   ...rest
 }) => {
   const modal = useLazyModalManager.useLazyModalManager();
-  const handleChange = (value) => {
-    onChange?.(value);
+  const handleChange = (value2) => {
+    onChange?.(value2);
     modal.requestUpdate();
   };
+  const getYear = React.useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getFullYear();
+      } else {
+        return new Date(value).getFullYear();
+      }
+    }
+    return void 0;
+  }, [value]);
+  const getMonth = React.useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getMonth();
+      } else {
+        return new Date(value).getMonth();
+      }
+    }
+    return void 0;
+  }, [value]);
   return /* @__PURE__ */ React.createElement(
     reactCore.DatePicker,
     {
       ...rest,
+      value,
+      month: getMonth,
+      year: getYear,
+      type,
       TextComponent: Text,
       CalendarComponent: Calendar.Calendar,
       locale: locale ?? date.getLocale(),

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

@@ -7,7 +7,7 @@ require('react-native');
 var BaseModalView = require('../../atoms/Modal/ui/BaseModalView.js');
 var useLazyModalManager = require('../../atoms/Modal/useLazyModalManager.js');
 var Text = require('../../atoms/Text/Text.js');
-var DateTimeSelector = require('../DateTimeSelector/DateTimeSelector.js');
+var DateTimePickerSelector = require('../DateTimePickerSelector/DateTimePickerSelector.js');
 
 const DateTimePicker = ({
   locale,
@@ -19,10 +19,16 @@ const DateTimePicker = ({
     {
       ...rest,
       TextComponent: Text,
-      DateTimeSelectorComponent: DateTimeSelector.DateTimeSelector,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React.createElement(
+        reactCore.ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       locale: locale ?? date.getLocale(),
-      requestShowSelector: () => modal.show(),
-      requestCloseSelector: () => modal.close(),
+      requestShowSelector: modal.show,
+      requestCloseSelector: modal.close,
       renderSelector: (selector, blur) => modal.sync(/* @__PURE__ */ React.createElement(NativeModal, { onClose: blur }, selector))
     }
   );

package/dist/cjs/components/molecules/DateTimePickerSelector/DateTimePickerSelector.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../atoms/Button/Button.js');
+var reactCore = require('@tecsinapse/react-core');
+var Text = require('../../atoms/Text/Text.js');
+var ScrollableSelector = require('../ScrollableSelector/ScrollableSelector.js');
+var Calendar = require('../Calendar/Calendar.js');
+var styled = require('./styled.js');
+var date = require('../../../utils/date.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DateTimePickerSelector = ({
+  TextComponent = Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date: date$1,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__namespace.createElement(styled.Root, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.Header, null, currentMode === 1 && /* @__PURE__ */ React__namespace.createElement(styled.BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React__namespace.createElement(
+    Calendar.Calendar,
+    {
+      type: "day",
+      value: date$1,
+      onChange: handleCalendarChange,
+      year: date$1.getFullYear(),
+      month: date$1.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React__namespace.createElement(styled.Content, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date$1,
+      yearLabel,
+      monthLabel,
+      format: "MM-yyyy",
+      locale: locale ?? date.getLocale()
+    }
+  )) : /* @__PURE__ */ React__namespace.createElement(styled.Content, null, /* @__PURE__ */ React__namespace.createElement(
+    ScrollableSelector,
+    {
+      onChange: setDate,
+      value: date$1,
+      hourLabel,
+      minuteLabel,
+      format: "HH-mm",
+      locale: locale ?? date.getLocale()
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(Button.Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React__namespace.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+module.exports = DateTimePickerSelector;

package/dist/cjs/components/molecules/DateTimePickerSelector/styled.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactCore = require('@tecsinapse/react-core');
+
+const Root = styled.View`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const Content = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: ${({ theme }) => theme.spacing.deca};
+  margin-bottom: ${({ theme }) => theme.spacing.deca};
+`;
+const BackButton = styled(reactCore.PressableSurface)`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+  aspect-ratio: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+exports.BackButton = BackButton;
+exports.Content = Content;
+exports.Header = Header;
+exports.Root = Root;

package/dist/cjs/components/molecules/ScrollableSelector/ScrollableSelector.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var Text = require('../../atoms/Text/Text.js');
+var styled = require('./styled.js');
+var DateBlock = require('./components/DateBlock.js');
+var date = require('../../../utils/date.js');
+
+const ScrollableSelector = ({
+  value,
+  onChange,
+  height,
+  width,
+  fontSize,
+  textColor,
+  startYear,
+  endYear,
+  markColor,
+  markHeight,
+  markWidth,
+  format,
+  monthLabel,
+  yearLabel,
+  hourLabel,
+  minuteLabel,
+  TextComponent = Text,
+  locale = date.getLocale()
+}) => {
+  const date = React.useMemo(() => value ?? /* @__PURE__ */ new Date(), [value]);
+  const [months, setMonths] = React.useState([]);
+  const [years, setYears] = React.useState([]);
+  const [hour, setHour] = React.useState([]);
+  const [minutes, setMinutes] = React.useState([]);
+  React.useEffect(() => {
+    const end = endYear || (/* @__PURE__ */ new Date()).getFullYear();
+    const start = !startYear || startYear > end ? end - 100 : startYear;
+    const _months = [...Array(12)].map((_, index) => index + 1);
+    const _years = [...Array(end - start + 1)].map((_, index) => start + index);
+    const _hour = [...Array(24)].map((_, index) => index);
+    const _minutes = [...Array(60)].map((_, index) => index);
+    setMonths(_months);
+    setYears(_years);
+    setHour(_hour);
+    setMinutes(_minutes);
+  }, []);
+  const pickerHeight = Math.round(
+    height ?? reactNative.Dimensions.get("window").height / 3.5
+  );
+  const pickerWidth = width ?? "100%";
+  const changeHandle = React.useCallback(
+    (type, digit) => {
+      switch (type) {
+        case "month":
+          date.setMonth(digit - 1);
+          break;
+        case "year":
+          date.setFullYear(digit);
+          break;
+        case "hour":
+          date.setHours(digit);
+          break;
+        case "minutes":
+          date.setMinutes(digit);
+      }
+      onChange?.(date);
+    },
+    [date]
+  );
+  const getOrder = React.useCallback(() => {
+    return (format || "dd-MM-yyyy").split("-").map((type, index) => {
+      switch (type) {
+        case "MM":
+          return {
+            name: "month",
+            digits: months,
+            value: date.getMonth() + 1
+          };
+        case "yyyy":
+          return { name: "year", digits: years, value: date.getFullYear() };
+        case "HH":
+          return { name: "hour", digits: hour, value: date.getHours() };
+        case "mm":
+          return {
+            name: "minutes",
+            digits: minutes,
+            value: date.getMinutes()
+          };
+        default:
+          return {
+            name: ["day", "month", "year", "hour", "minutes"][index],
+            digits: [months, years, hour, minutes][index],
+            value: [
+              date.getDate(),
+              date.getMonth() + 1,
+              date.getFullYear(),
+              date.getHours(),
+              date.getMinutes()
+            ][index]
+          };
+      }
+    });
+  }, [format, date, months, years, hour, minutes]);
+  return /* @__PURE__ */ React.createElement(reactNative.View, { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React.createElement(styled.BlockLabels, null, format === "MM-yyyy" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TextComponent, null, monthLabel), /* @__PURE__ */ React.createElement(TextComponent, null, yearLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TextComponent, null, hourLabel), /* @__PURE__ */ React.createElement(TextComponent, null, minuteLabel))), /* @__PURE__ */ React.createElement(
+    reactNative.View,
+    {
+      style: [styles.picker, { height: pickerHeight, width: pickerWidth }]
+    },
+    getOrder().map((el, index) => {
+      return /* @__PURE__ */ React.createElement(
+        DateBlock,
+        {
+          date: value ?? /* @__PURE__ */ new Date(),
+          digits: el.digits,
+          value: el.value,
+          onChange: changeHandle,
+          height: pickerHeight,
+          fontSize: fontSize ?? 22,
+          textColor,
+          markColor,
+          markHeight,
+          markWidth: markWidth ?? 70,
+          type: el.name,
+          key: index,
+          locale
+        }
+      );
+    })
+  ));
+};
+const styles = reactNative.StyleSheet.create({
+  picker: {
+    flexDirection: "row",
+    width: "100%"
+  },
+  digit: {
+    fontSize: 20,
+    textAlign: "center"
+  },
+  gradient: {
+    position: "absolute",
+    width: "100%"
+  }
+});
+
+module.exports = ScrollableSelector;

package/dist/cjs/components/molecules/ScrollableSelector/components/DateBlock.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var styled = require('../styled.js');
+var dateFns = require('date-fns');
+
+const DateBlock = ({
+  value,
+  digits,
+  type,
+  onChange,
+  height = 170,
+  fontSize,
+  textColor,
+  markColor,
+  markHeight,
+  markWidth,
+  TextComponent = reactNative.Text,
+  locale
+}) => {
+  const months = [...Array(12)].map(
+    (_, index) => dateFns.format((/* @__PURE__ */ new Date()).setMonth(index), "MMM", { locale })
+  );
+  const dHeight = Math.round(height / 4);
+  const mHeight = markHeight ?? Math.min(dHeight, 65);
+  const mWidth = markWidth ?? 70;
+  const offsets = digits.map((_, index) => index * dHeight);
+  const scrollRef = React.useRef(null);
+  const snapScrollToIndex = (index) => {
+    scrollRef?.current?.scrollTo({ y: dHeight * index, animated: true });
+  };
+  React.useEffect(() => {
+    snapScrollToIndex(value - digits[0]);
+  }, [scrollRef.current]);
+  const handleMomentumScrollEnd = ({ nativeEvent }) => {
+    const digit = Math.round(nativeEvent.contentOffset.y / dHeight + digits[0]);
+    onChange(type, digit);
+  };
+  const getDisplayedValue = (granularity) => (value2) => {
+    if (granularity === "month") {
+      return months[value2 - 1];
+    } else {
+      return value2.toString().padStart(2, "0");
+    }
+  };
+  return /* @__PURE__ */ React.createElement(styled.Block, null, /* @__PURE__ */ React.createElement(
+    styled.Mark,
+    {
+      markTop: (height - mHeight) / 2,
+      markColor: markColor ?? "rgba(0, 0, 0, 0.05)",
+      markHeight: 24,
+      markWidth: mWidth
+    }
+  ), /* @__PURE__ */ React.createElement(
+    styled.StyledScrollView,
+    {
+      ref: scrollRef,
+      snapToOffsets: offsets,
+      decelerationRate: "fast",
+      showsVerticalScrollIndicator: false,
+      scrollEventThrottle: 0,
+      onMomentumScrollEnd: handleMomentumScrollEnd,
+      fadingEdgeLength: 300
+    },
+    digits.map((value2, index) => {
+      return /* @__PURE__ */ React.createElement(
+        reactNative.TouchableOpacity,
+        {
+          key: index,
+          onPress: () => {
+            onChange(type, digits[index]);
+            snapScrollToIndex(index);
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          TextComponent,
+          {
+            style: {
+              textAlign: "center",
+              fontSize: fontSize || 22,
+              color: textColor || "#000000",
+              marginBottom: index === digits.length - 1 ? height / 2 - dHeight / 2 : 0,
+              marginTop: index === 0 ? height / 2 - dHeight / 2 : 0,
+              lineHeight: dHeight,
+              height: dHeight,
+              textTransform: "capitalize"
+            }
+          },
+          getDisplayedValue(type)(value2)
+        )
+      );
+    })
+  ));
+};
+
+module.exports = DateBlock;

package/dist/cjs/components/molecules/ScrollableSelector/styled.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+
+styled.View`
+  flex-direction: row;
+  width: 100%;
+`;
+const Block = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+`;
+const BlockLabels = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+  margin-bottom: 10px;
+`;
+styled.ScrollView`
+  width: 100%;
+`;
+styled.Text`
+  font-size: ${({ fontSize }) => `${fontSize}px`};
+  text-align: center;
+  color: #000000;
+  margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
+  margin-top: ${({ marginTop }) => `${marginTop}px`};
+  line-height: ${({ lineHeight }) => `${lineHeight}px`};
+  height: ${({ height }) => `${height}px`};
+`;
+const Mark = styled.View`
+  position: absolute;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.color.primary.light};
+  height: ${({ markHeight }) => `${markHeight}px`};
+  width: ${({ markWidth }) => `${markWidth}px`};
+`;
+const StyledScrollView = styled(reactNative.ScrollView)`
+  width: 100%;
+`;
+
+exports.Block = Block;
+exports.BlockLabels = BlockLabels;
+exports.Mark = Mark;
+exports.StyledScrollView = StyledScrollView;

package/dist/cjs/components/molecules/Select/styled.js

@@ -3,7 +3,6 @@
 var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 var reactNative = require('react-native');
-var Input = require('../../atoms/Input/Input.js');
 var Text = require('../../atoms/Text/Text.js');
 
 const getStyledModal = (safeTop = 0) => {
@@ -19,15 +18,6 @@ const StyledSelectionText = styled(Text)(
     ${reactCore.disabledInputStyles(props)};
   `
 );
-styled(reactNative.View)`
-  aspect-ratio: 1;
-  height: 100%;
-`;
-styled(
-  reactCore.PressableSurface
-)`
-  width: 100%;
-`;
 styled(reactNative.View)`
   position: relative;
   width: 100%;
@@ -38,22 +28,17 @@ styled(reactNative.View)`
   padding: ${({ theme }) => theme.spacing.deca};
   height: ${reactCore.RFValueStr("75px")};
 `;
-styled(reactCore.Button)`
-  aspect-ratio: 1;
-  height: 100%;
-`;
 const SearchBarContainer = styled(reactNative.View)`
   padding: ${({ theme }) => theme.spacing.deca};
   position: relative;
 `;
-styled(Input)`
-  margin-bottom: ${({ theme }) => theme.spacing.deca};
-`;
 const ListItem = styled(reactCore.PressableSurface)`
   border-bottom-width: ${reactCore.RFValueStr("1px")};
   border-color: ${({ theme }) => theme.color.secondary.light};
-  padding-vertical: ${({ theme }) => theme.spacing.mili};
-  padding-horizontal: ${({ theme }) => theme.spacing.deca};
+  padding-top: ${({ theme }) => theme.spacing.mili};
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+  padding-left: ${({ theme }) => theme.spacing.deca};
+  padding-right: ${({ theme }) => theme.spacing.deca};
 `;
 const ModalFooter = styled(reactNative.View)`
   width: 100%;

package/dist/cjs/index.js

@@ -26,7 +26,7 @@ var TextArea = require('./components/atoms/TextArea/TextArea.js');
 var Calendar = require('./components/molecules/Calendar/Calendar.js');
 var DatePicker = require('./components/molecules/DatePicker/DatePicker.js');
 var DateTimePicker = require('./components/molecules/DateTimePicker/DateTimePicker.js');
-var DateTimeSelector = require('./components/molecules/DateTimeSelector/DateTimeSelector.js');
+var DateTimePickerSelector = require('./components/molecules/DateTimePickerSelector/DateTimePickerSelector.js');
 var IconTextButton = require('./components/molecules/IconTextButton/IconTextButton.js');
 var InputPassword = require('./components/molecules/InputPassword/InputPassword.js');
 var LabeledSwitch = require('./components/molecules/LabeledSwitch/LabeledSwitch.js');
@@ -62,7 +62,7 @@ exports.TextArea = TextArea;
 exports.Calendar = Calendar.Calendar;
 exports.DatePicker = DatePicker.DatePicker;
 exports.DateTimePicker = DateTimePicker.DateTimePicker;
-exports.DateTimeSelector = DateTimeSelector.DateTimeSelector;
+exports.DateTimePickerSelector = DateTimePickerSelector;
 exports.IconTextButton = IconTextButton;
 exports.InputPassword = InputPassword;
 exports.LabeledSwitch = LabeledSwitch;

package/dist/esm/components/molecules/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { DatePicker as DatePicker$1 } from '@tecsinapse/react-core';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { getLocale } from '../../../utils/date.js';
 import 'react-native';
 import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
@@ -11,17 +11,45 @@ import { CalendarBoxContent } from './styled.js';
 const DatePicker = ({
   locale,
   onChange,
+  value,
+  type,
   ...rest
 }) => {
   const modal = useLazyModalManager();
-  const handleChange = (value) => {
-    onChange?.(value);
+  const handleChange = (value2) => {
+    onChange?.(value2);
     modal.requestUpdate();
   };
+  const getYear = useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getFullYear();
+      } else {
+        return new Date(value).getFullYear();
+      }
+    }
+    return void 0;
+  }, [value]);
+  const getMonth = useMemo(() => {
+    if (value) {
+      if (type === "range") {
+        if (value.lowest !== void 0)
+          return new Date(value.lowest).getMonth();
+      } else {
+        return new Date(value).getMonth();
+      }
+    }
+    return void 0;
+  }, [value]);
   return /* @__PURE__ */ React__default.createElement(
     DatePicker$1,
     {
       ...rest,
+      value,
+      month: getMonth,
+      year: getYear,
+      type,
       TextComponent: Text,
       CalendarComponent: Calendar,
       locale: locale ?? getLocale(),

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

@@ -1,11 +1,11 @@
-import { DateTimePicker as DateTimePicker$1 } from '@tecsinapse/react-core';
+import { DateTimePicker as DateTimePicker$1, ControlledDateTimeSelector } from '@tecsinapse/react-core';
 import React__default from 'react';
 import { getLocale } from '../../../utils/date.js';
 import 'react-native';
 import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
 import { useLazyModalManager } from '../../atoms/Modal/useLazyModalManager.js';
 import Text from '../../atoms/Text/Text.js';
-import { DateTimeSelector } from '../DateTimeSelector/DateTimeSelector.js';
+import DateTimePickerSelector from '../DateTimePickerSelector/DateTimePickerSelector.js';
 
 const DateTimePicker = ({
   locale,
@@ -17,10 +17,16 @@ const DateTimePicker = ({
     {
       ...rest,
       TextComponent: Text,
-      DateTimeSelectorComponent: DateTimeSelector,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React__default.createElement(
+        ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       locale: locale ?? getLocale(),
-      requestShowSelector: () => modal.show(),
-      requestCloseSelector: () => modal.close(),
+      requestShowSelector: modal.show,
+      requestCloseSelector: modal.close,
       renderSelector: (selector, blur) => modal.sync(/* @__PURE__ */ React__default.createElement(NativeModal, { onClose: blur }, selector))
     }
   );