@tecsinapse/react-native-kit 2.2.1 → 3.3.0

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

@@ -0,0 +1,143 @@
+'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');
+
+const ScrollableSelector = ({
+  value,
+  onChange,
+  height,
+  width,
+  fontSize,
+  textColor,
+  startYear,
+  endYear,
+  markColor,
+  markHeight,
+  markWidth,
+  format,
+  monthLabel,
+  yearLabel,
+  hourLabel,
+  minuteLabel,
+  TextComponent = Text
+}) => {
+  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
+        }
+      );
+    })
+  ));
+};
+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,99 @@
+'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 }).slice(
+      0,
+      3
+    )
+  );
+  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
+            }
+          },
+          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/Modal.js

@@ -222,4 +222,3 @@ const MemoizedOption = ({
 const Modal = Component;
 
 exports.Modal = Modal;
-//# sourceMappingURL=Modal.js.map

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

@@ -214,4 +214,3 @@ function Select({
 }
 
 module.exports = Select;
-//# sourceMappingURL=Select.js.map

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%;
@@ -85,4 +70,3 @@ exports.StyledSelectionText = StyledSelectionText;
 exports.StyledTextItemSelect = StyledTextItemSelect;
 exports.TextTitleModal = TextTitleModal;
 exports.getStyledModal = getStyledModal;
-//# sourceMappingURL=styled.js.map

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

@@ -13,4 +13,3 @@ const Snackbar = ({
 };
 
 module.exports = Snackbar;
-//# sourceMappingURL=Snackbar.js.map

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

@@ -9,4 +9,3 @@ const SnackbarStyled = styled(reactCore.Snackbar)`
 `;
 
 exports.SnackbarStyled = SnackbarStyled;
-//# sourceMappingURL=styled.js.map

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;
@@ -76,4 +76,3 @@ Object.keys(reactCore).forEach(function (k) {
     get: function () { return reactCore[k]; }
   });
 });
-//# sourceMappingURL=index.js.map

package/dist/cjs/utils/date.js

@@ -34,4 +34,3 @@ const getLocale = () => {
 };
 
 exports.getLocale = getLocale;
-//# sourceMappingURL=date.js.map

package/dist/esm/components/atoms/Avatar/Avatar.js

@@ -7,4 +7,3 @@ const Avatar = (props) => {
 };
 
 export { Avatar as default };
-//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/atoms/Badge/Badge.js

@@ -19,4 +19,3 @@ const Badge = ({
 };
 
 export { Badge as default };
-//# sourceMappingURL=Badge.js.map

package/dist/esm/components/atoms/BottomNavigator/BottomNavigator.js

@@ -28,4 +28,3 @@ function BottomNavigator({
 BottomNavigator.Item = Item;
 
 export { BottomNavigator as default };
-//# sourceMappingURL=BottomNavigator.js.map

package/dist/esm/components/atoms/BottomNavigator/Item.js

@@ -18,4 +18,3 @@ function Item({
 }
 
 export { Item as default };
-//# sourceMappingURL=Item.js.map

package/dist/esm/components/atoms/BottomNavigator/styled.js

@@ -28,4 +28,3 @@ const TabContent = styled.View`
 const CustomTabContent = styled.View``;
 
 export { CustomTabContent, StyledView, TabContainer, TabContent };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Button/Button.js

@@ -18,4 +18,3 @@ const Button = ({
 };
 
 export { Button };
-//# sourceMappingURL=Button.js.map

package/dist/esm/components/atoms/Button/States/Error.js

@@ -7,4 +7,3 @@ const Error = (props) => {
 };
 
 export { Error as default };
-//# sourceMappingURL=Error.js.map

package/dist/esm/components/atoms/Button/States/Loading.js

@@ -7,4 +7,3 @@ const Loading = (props) => {
 };
 
 export { Loading as default };
-//# sourceMappingURL=Loading.js.map

package/dist/esm/components/atoms/Button/States/Success.js

@@ -7,4 +7,3 @@ const Success = (props) => {
 };
 
 export { Success as default };
-//# sourceMappingURL=Success.js.map

package/dist/esm/components/atoms/GroupButton/GroupButtonOption.js

@@ -7,4 +7,3 @@ const GroupButtonOption = (props) => {
 };
 
 export { GroupButtonOption as default };
-//# sourceMappingURL=GroupButtonOption.js.map

package/dist/esm/components/atoms/Header/Header.js

@@ -23,4 +23,3 @@ const Header = ({
 };
 
 export { Header as default };
-//# sourceMappingURL=Header.js.map

package/dist/esm/components/atoms/Header/styled.js

@@ -17,4 +17,3 @@ const Dummy = styled(FloatingButton)`
 `;
 
 export { Dummy, FloatingButton, StyledView };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Input/Input.js

@@ -81,4 +81,3 @@ const Input = React__default.forwardRef(
 Input.displayName = "Input";
 
 export { Input as default };
-//# sourceMappingURL=Input.js.map

package/dist/esm/components/atoms/Input/styled.js

@@ -10,4 +10,3 @@ const StyledNativeInputBase = styled(InputElement)`
 const StyledNativeInput = styled(StyledNativeInputBase)(fontStyles);
 
 export { StyledNativeInput };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/InputMask/InputMask.js

@@ -78,4 +78,3 @@ const InputMask = React__default.forwardRef(
 InputMask.displayName = "InputMask";
 
 export { InputMask as default };
-//# sourceMappingURL=InputMask.js.map

package/dist/esm/components/atoms/InputMask/styled.js

@@ -13,4 +13,3 @@ const StyledNativeInputMaskBase = styled(InputMaskElement)`
 const StyledNativeInputMask = styled(StyledNativeInputMaskBase)(fontStyles);
 
 export { StyledInputContainer, StyledNativeInputMask };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Modal/ModalGroupManager.js

@@ -21,4 +21,3 @@ const ModalGroupManager = ({ children, ...others }) => {
 };
 
 export { ModalGroupManager, modalLifecycle };
-//# sourceMappingURL=ModalGroupManager.js.map

package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js

@@ -125,4 +125,3 @@ const createModalLifecycleHandler = () => {
 };
 
 export { ModalLifecycleHandler, createModalLifecycleHandler };
-//# sourceMappingURL=ModalLifecycleHandler.js.map

package/dist/esm/components/atoms/Modal/ui/BaseModalView.js

@@ -145,4 +145,3 @@ const ModalView = ({
 };
 
 export { ModalView };
-//# sourceMappingURL=BaseModalView.js.map

package/dist/esm/components/atoms/Modal/ui/styled.js

@@ -21,4 +21,3 @@ const CloseBar = styled.View`
 `;
 
 export { BackDropView, CloseBar, StyledPressableBackDrop };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Modal/useLazyModalManager.js

@@ -30,4 +30,3 @@ const useLazyModalManager = (modalId) => {
 };
 
 export { useLazyModalManager };
-//# sourceMappingURL=useLazyModalManager.js.map

package/dist/esm/components/atoms/Modal/useModalManager.js

@@ -21,4 +21,3 @@ const useModalManager = (modal, modalId) => {
 };
 
 export { useModalManager };
-//# sourceMappingURL=useModalManager.js.map

package/dist/esm/components/atoms/Modal/useModalRemoteControl.js

@@ -15,4 +15,3 @@ const useModalRemoteControl = (modalId) => {
 };
 
 export { useModalRemoteControl };
-//# sourceMappingURL=useModalRemoteControl.js.map

package/dist/esm/components/atoms/Skeleton/Pulse.js

@@ -31,4 +31,3 @@ const Pulse = ({
 };
 
 export { Pulse };
-//# sourceMappingURL=Pulse.js.map

package/dist/esm/components/atoms/Skeleton/Skeleton.js

@@ -55,4 +55,3 @@ const Skeleton = ({
 };
 
 export { Skeleton as default };
-//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/atoms/Skeleton/Wave.js

@@ -51,4 +51,3 @@ const Wave = ({
 };
 
 export { Wave };
-//# sourceMappingURL=Wave.js.map

package/dist/esm/components/atoms/Skeleton/animation.js

@@ -42,4 +42,3 @@ const pulseAnimation = (active, animatedValue) => {
 };
 
 export { pulseAnimation, waveAnimation };
-//# sourceMappingURL=animation.js.map

package/dist/esm/components/atoms/Skeleton/styled.js

@@ -10,4 +10,3 @@ const Wrapper = styled.View`
 `;
 
 export { Wrapper };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/SnappingSlider/SnappingSlider.js

@@ -52,4 +52,3 @@ const SnappingSlider = ({
 };
 
 export { SnappingSlider as default };
-//# sourceMappingURL=SnappingSlider.js.map

package/dist/esm/components/atoms/Tag/Tag.js

@@ -23,4 +23,3 @@ const Tag = ({ value, ...rest }) => {
 };
 
 export { Tag as default };
-//# sourceMappingURL=Tag.js.map

package/dist/esm/components/atoms/Text/Text.js

@@ -6,4 +6,3 @@ const Text = ({ children, ...rest }) => {
 };
 
 export { Text as default };
-//# sourceMappingURL=Text.js.map

package/dist/esm/components/atoms/Text/styled.js

@@ -17,4 +17,3 @@ const fontStyles = ({
 const StyledNativeText = styled(Text)(fontStyles);
 
 export { StyledNativeText, fontStyles };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/TextArea/TextArea.js

@@ -79,4 +79,3 @@ const TextArea = ({
 };
 
 export { TextArea as default };
-//# sourceMappingURL=TextArea.js.map

package/dist/esm/components/atoms/TextArea/styled.js

@@ -5,4 +5,3 @@ import { fontStyles } from '../Text/styled.js';
 const StyledNativeInput = styled(TextAreaInputBase)(fontStyles);
 
 export { StyledNativeInput };
-//# sourceMappingURL=styled.js.map

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

@@ -18,4 +18,3 @@ const Calendar = ({
 };
 
 export { Calendar };
-//# sourceMappingURL=Calendar.js.map