@tecsinapse/react-core 1.12.5 → 1.12.9

package/dist/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { CalendarProps, SelectionType } from '../Calendar';
-import { DatePickerModalProps } from './Modal';
-export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, DatePickerModalProps<T>, Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
     controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
     TextComponent?: React.FC<TextProps>;
-    animationType?: ModalBaseProps['animationType'];
+    CalendarComponent: React.FC<CalendarProps<T>>;
     placeholder?: string;
     onFocus?: () => void | never;
     onBlur?: () => void | never;
     format?: string;
     closeOnPick?: boolean;
+    renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element | null;
+    requestShowCalendar: () => void;
+    requestCloseCalendar: () => void;
 }
-declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, bottomOffset, rightComponent, animationType, style, locale, closeOnPick, ...rest }: DatePickerProps<T>): JSX.Element;
+declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, rightComponent, style, locale, closeOnPick, renderCalendar, requestShowCalendar, requestCloseCalendar, ...rest }: DatePickerProps<T>): JSX.Element;
 export default DatePicker;

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

@@ -13,12 +13,10 @@ var _Input = require("../../atoms/Input");
 
 var _Text = require("../../atoms/Text");
 
-var _Modal = require("./Modal");
+var _HintInputContainer = require("../HintInputContainer");
 
 var _styled = require("./styled");
 
-var _HintInputContainer = require("../HintInputContainer");
-
 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; }
@@ -42,12 +40,13 @@ function DatePicker({
   variant,
   TextComponent = _Text.Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }) {
   const {
@@ -55,15 +54,10 @@ function DatePicker({
     handleBlur,
     handleFocus
   } = (0, _Input.useInputFocus)(onFocus, onBlur, !disabled);
-  const [modalVisible, setModalVisible] = React.useState(false);
-  const handlePressInput = React.useCallback(() => {
-    setModalVisible(true);
+  const handleShowCalendar = React.useCallback(() => {
+    requestShowCalendar();
     handleFocus();
-  }, [handleFocus, setModalVisible]);
-  const handleCloseModal = React.useCallback(() => {
-    setModalVisible(false);
-    handleBlur();
-  }, [handleBlur, setModalVisible]);
+  }, [handleFocus, requestShowCalendar]);
 
   const getDisplayValue = () => {
     if (!value) return placeholder;
@@ -90,7 +84,7 @@ function DatePicker({
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   (0, React.useEffect)(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
 
     if (closeOnPick && value && type === 'range') {
@@ -98,13 +92,22 @@ function DatePicker({
         lowest,
         highest
       } = value;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+  const calendar = React.createElement(CalendarComponent, {
+    pointerEvents: 'box-none',
+    type: type,
+    value: value,
+    month: month,
+    year: year,
+    onChange: onChange,
+    locale: locale
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
     focused: focused,
     viewStyle: style,
-    onPress: handlePressInput,
+    onPress: handleShowCalendar,
     disabled: disabled,
     hintComponent: hintComponent,
     LabelComponent: TextComponent,
@@ -118,20 +121,7 @@ function DatePicker({
   }, rest), React.createElement(StyledText, {
     fontWeight: "bold",
     disabled: disabled
-  }, getDisplayValue() || ' ')), React.createElement(_Modal.Modal, {
-    CalendarComponent: CalendarComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    month: month,
-    year: year,
-    onChange: onChange,
-    value: value,
-    type: type,
-    locale: locale
-  }));
+  }, getDisplayValue() || ' ')), renderCalendar(calendar, handleBlur));
 }
 
 var _default = DatePicker;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","bottomOffset","rightComponent","animationType","style","locale","closeOnPick","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","useCallback","handleCloseModal","getDisplayValue","lowest","highest","StyledText","setTimeout"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { DatePickerModalProps, Modal } from './Modal';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { useEffect } from 'react';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    DatePickerModalProps<T>,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  locale,\n  closeOnPick = false,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = React.useCallback(() => {\n    setModalVisible(true);\n    handleFocus();\n  }, [handleFocus, setModalVisible]);\n\n  const handleCloseModal = React.useCallback(() => {\n    setModalVisible(false);\n    handleBlur();\n  }, [handleBlur, setModalVisible]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(handleCloseModal, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(handleCloseModal, 200);\n    }\n  }, [value, closeOnPick, type, handleCloseModal]);\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        CalendarComponent={CalendarComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        month={month}\n        year={year}\n        onChange={onChange}\n        value={value}\n        type={type}\n        locale={locale}\n      />\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","rightComponent","style","locale","closeOnPick","renderCalendar","requestShowCalendar","requestCloseCalendar","rest","focused","handleBlur","handleFocus","handleShowCalendar","React","useCallback","getDisplayValue","lowest","highest","StyledText","setTimeout","calendar"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  CalendarComponent: React.FC<CalendarProps<T>>\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowCalendar: () => void\n  requestCloseCalendar: () => void\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  rightComponent,\n  style,\n  locale,\n  closeOnPick = false,\n  renderCalendar,\n  requestShowCalendar,\n  requestCloseCalendar,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowCalendar = React.useCallback(() => {\n    requestShowCalendar()\n    handleFocus();\n  }, [handleFocus, requestShowCalendar]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(requestCloseCalendar, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(requestCloseCalendar, 200);\n    }\n  }, [value, closeOnPick, type, requestCloseCalendar]);\n\n  const calendar = (\n    <CalendarComponent\n      pointerEvents={'box-none'}\n      type={type}\n      value={value}\n      month={month}\n      year={year}\n      onChange={onChange}\n      locale={locale}\n    />\n  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowCalendar, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowCalendar}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderCalendar(calendar, handleBlur)}\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}

package/dist/components/molecules/DatePicker/styled.d.ts

@@ -1,20 +1,6 @@
 import { FC } from 'react';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
-export declare const Backdrop: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    offset: number;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
-    ref?: import("react").Ref<import("react-native").View> | undefined;
-}>;
 export declare const getStyledTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,63 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarIcon = exports.getStyledTextComponent = exports.ModalContent = exports.Backdrop = void 0;
+exports.CalendarIcon = exports.getStyledTextComponent = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _definitions = require("../../../styles/definitions");
-
-var _utils = require("../../../utils");
-
 var _Icon = require("../../atoms/Icon");
 
 var _Input = require("../../atoms/Input");
 
-var _PressableSurface = require("../../atoms/PressableSurface");
-
 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; }
 
-const isWeb = _reactNative.Platform.OS === 'web';
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${({
-  theme
-}) => isWeb ? (0, _native.css)`
-          justify-content: center;
-          align-items: center;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        ` : (0, _native.css)`
-          justify-content: flex-end;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
-
 const getStyledTextComponent = component => {
   return (0, _native.default)(component)(props => {
     var _props$theme;

package/dist/components/molecules/DatePicker/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","offset","borderRadius","micro","deca","getStyledTextComponent","component","props","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,kCAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,2BAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,2BAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEN,EAAAA,KAAK,EAAE;AAAEO,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMZ,KAAK,GACF;AACT,uBAAuBY,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAhBO;;;AAkBA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACZ,KAD2C,iDACjD,aAAaa,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBH,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMI,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACkB,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { hex2rgba } from '../../../styles/definitions';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["getStyledTextComponent","component","props","theme","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAGO,MAAMA,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACC,KAD2C,iDACjD,aAAaC,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBJ,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMK,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACQ,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}

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

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps } from './Modal';
-export interface DateTimePickerProps extends InputContainerProps, DateTimePickerModalProps, Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
     controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
     TextComponent?: React.FC<TextProps>;
-    animationType?: ModalBaseProps['animationType'];
+    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;
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

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

@@ -15,10 +15,12 @@ var _Text = require("../../atoms/Text");
 
 var _styled = require("../DatePicker/styled");
 
-var _Modal = require("./Modal");
+var _DateTimeSelector = require("../DateTimeSelector");
 
 var _HintInputContainer = require("../HintInputContainer");
 
+var _styled2 = 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; }
@@ -54,11 +56,12 @@ const DateTimePicker = ({
   hint,
   variant = 'default',
   TextComponent = _Text.Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = _DateTimeSelector.DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
   const {
@@ -66,47 +69,23 @@ const DateTimePicker = ({
     handleBlur,
     handleFocus
   } = (0, _Input.useInputFocus)(onFocus, onBlur, !disabled);
-  const [modalVisible, setModalVisible] = React.useState(false);
 
-  const handlePressInput = () => {
-    setModalVisible(true);
+  const handleShowSelector = () => {
+    requestShowSelector();
     handleFocus();
   };
 
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
+  const handleChoosing = value => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    requestCloseSelector();
   };
 
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   const displayValue = (value ? (0, _dateFns.format)(value, format, {
     locale: locale
   }) : placeholder) || ' ';
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
-    focused: focused,
-    viewStyle: style,
-    onPress: handlePressInput,
-    disabled: disabled,
-    LabelComponent: TextComponent,
-    variant: variant,
-    hint: hint,
-    hintComponent: hintComponent,
-    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
-      name: "calendar-sharp",
-      type: "ionicon",
-      size: "centi"
-    }), rightComponent)
-  }, rest), React.createElement(StyledText, {
-    fontWeight: "bold",
-    disabled: disabled
-  }, displayValue)), React.createElement(_Modal.Modal, {
-    DateTimeSelectorComponent: DateTimeSelectorComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    onChange: onChange,
+  const StyledDateTimeSelector = (0, _styled2.getStyledDateTimeSelector)(DateTimeSelectorComponent);
+  const dateTimeSelector = React.createElement(StyledDateTimeSelector, {
     value: value,
     mode: mode,
     format: format,
@@ -124,8 +103,27 @@ const DateTimePicker = ({
     monthLabel: monthLabel,
     yearLabel: yearLabel,
     hourLabel: hourLabel,
-    minuteLabel: minuteLabel
-  }));
+    minuteLabel: minuteLabel,
+    onChange: handleChoosing
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowSelector, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+    focused: focused,
+    viewStyle: style,
+    onPress: handleShowSelector,
+    disabled: disabled,
+    LabelComponent: TextComponent,
+    variant: variant,
+    hint: hint,
+    hintComponent: hintComponent,
+    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
+      name: "calendar-sharp",
+      type: "ionicon",
+      size: "centi"
+    }), rightComponent)
+  }, rest), React.createElement(StyledText, {
+    fontWeight: "bold",
+    disabled: disabled
+  }, displayValue)), renderSelector(dateTimeSelector, handleBlur));
 };
 
 var _default = DateTimePicker;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","bottomOffset","rightComponent","animationType","style","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","handleCloseModal","StyledText","displayValue"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\nimport { DateTimePickerModalProps, Modal } from './Modal';\nimport { HintInputContainer } from '../HintInputContainer';\n\nexport interface DateTimePickerProps\n  extends InputContainerProps,\n    DateTimePickerModalProps,\n    Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue =\n    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||\n    ' ';\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        DateTimeSelectorComponent={DateTimeSelectorComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        onChange={onChange}\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      />\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","DateTimeSelector","rightComponent","style","renderSelector","requestShowSelector","requestCloseSelector","rest","focused","handleBlur","handleFocus","handleShowSelector","handleChoosing","StyledText","displayValue","StyledDateTimeSelector","dateTimeSelector"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { getStyledDateTimeSelector } from './styled';\n\nexport interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowSelector: () => void\n  requestCloseSelector: () => void\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\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  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent = DateTimeSelector,\n  rightComponent,\n  style,\n  renderSelector,\n  requestShowSelector,\n  requestCloseSelector,\n  ...rest\n}) => {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowSelector = () => {\n    requestShowSelector()\n    handleFocus();\n  };\n\n  const handleChoosing = (value: Date) => {\n    onChange?.(value)\n    requestCloseSelector()\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';\n  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)\n\n  const dateTimeSelector = (\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={handleChoosing}\n    />\n  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowSelector, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowSelector}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderSelector(dateTimeSelector, handleBlur)}\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}

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

@@ -1,26 +1,5 @@
 import { FC } from 'react';
-import { PressableSurfaceProps } from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
-export declare const StyledPressableSurface: import("@emotion/native").StyledComponent<PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export declare const Backdrop: import("@emotion/native").StyledComponent<PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    offset: number;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
-    ref?: import("react").Ref<import("react-native").View> | undefined;
-}>;
 export declare const getStyledDateTimeSelector: (component: FC<DateTimeSelectorProps>) => import("@emotion/native").StyledComponent<DateTimeSelectorProps & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,59 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyledDateTimeSelector = exports.ModalContent = exports.Backdrop = exports.StyledPressableSurface = void 0;
+exports.getStyledDateTimeSelector = void 0;
 
-var _native = _interopRequireWildcard(require("@emotion/native"));
+var _native = _interopRequireDefault(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _utils = require("../../../utils");
-
-var _PressableSurface = require("../../atoms/PressableSurface");
-
-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; }
-
-const isWeb = _reactNative.Platform.OS === 'web';
-const StyledPressableSurface = (0, _native.default)(_PressableSurface.PressableSurface)`
-  width: 100%;
-`;
-exports.StyledPressableSurface = StyledPressableSurface;
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${isWeb ? (0, _native.css)`
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100vh;
-      ` : (0, _native.css)`
-        justify-content: flex-end;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100%;
-      `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      width: ${(0, _utils.RFValueStr)('375px')};
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const getStyledDateTimeSelector = component => {
   return (0, _native.default)(component)`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["isWeb","Platform","OS","StyledPressableSurface","PressableSurface","Backdrop","ModalContent","styled","View","offset","theme","borderRadius","micro","deca","getStyledDateTimeSelector","component","spacing"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;;;;;AAMA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,sBAAsB,GAAG,qBACpCC,kCADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,QAAQ,GAAG,qBAAOD,kCAAP,CAA8C;AACtE,IAAIJ,KAAK,GACH,gBAAI;AACV;AACA;AACA;AACA;AACA,OANS,GAOH,gBAAI;AACV;AACA;AACA;AACA,OAAQ;AACR,CAbO;;AAeA,MAAMM,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEC,EAAAA,KAAK,EAAE;AAAEC,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMX,KAAK,GACF;AACT,eAAe,uBAAW,OAAX,CAAoB;AACnC,uBAAuBW,YAAY,CAACC,KAAM;AAC1C,KAJW,GAKF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAjBO;;;AAmBA,MAAMC,yBAAyB,GACpCC,SADuC,IAEpC;AACH,SAAO,qBAAOA,SAAP,CAAuC;AAChD,eAAe,CAAC;AAAEL,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACM,OAAN,CAAcH,IAAK;AACjD,GAFE;AAGD,CANM","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue, RFValueStr } from '../../../utils';\nimport {\n  PressableSurface,\n  PressableSurfaceProps\n} from '../../atoms/PressableSurface';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${isWeb\n    ? css`\n        justify-content: center;\n        align-items: center;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100vh;\n      `\n    : css`\n        justify-content: flex-end;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100%;\n      `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      width: ${RFValueStr('375px')};\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledDateTimeSelector = (\n  component: FC<DateTimeSelectorProps>\n) => {\n  return styled(component)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.deca};\n  `;\n};\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["getStyledDateTimeSelector","component","theme","spacing","deca"],"mappings":";;;;;;;AAAA;;;;AAKO,MAAMA,yBAAyB,GACpCC,SADuC,IAEpC;AACH,SAAO,qBAAOA,SAAP,CAAuC;AAChD,eAAe,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACjD,GAFE;AAGD,CANM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\n\nexport const getStyledDateTimeSelector = (\n  component: FC<DateTimeSelectorProps>\n) => {\n  return styled(component)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.deca};\n  `;\n};\n"],"file":"styled.js"}

package/dist/components/molecules/Grid/Item/Item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
+import { SpacingType } from '../../../../types/defaults';
 declare type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
 declare type FlexAlignBase = FlexPositioning | 'stretch';
 declare type FlexAlignType = FlexAlignBase | 'baseline';

package/dist/components/molecules/Grid/Item/Item.js

@@ -7,10 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactCore = require("@tecsinapse/react-core");
-
 var _reactNative = require("react-native");
 
+var _hooks = require("../../../../hooks");
+
+var _utils = require("../../../../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const GridItem = ({
@@ -25,7 +27,7 @@ const GridItem = ({
 }) => {
   const {
     spacing
-  } = (0, _reactCore.useTheme)();
+  } = (0, _hooks.useTheme)();
 
   if (!_react.default.Children.only(children)) {
     throw new Error('The number of children in GridItem should be one');
@@ -37,8 +39,8 @@ const GridItem = ({
 
   const getPadding = pos => {
     if (_spacing) {
-      if (typeof _spacing === 'string') return (0, _reactCore.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return (0, _reactCore.extractNumbersFromString)(spacing[_spacing[pos]]);
+      if (typeof _spacing === 'string') return (0, _utils.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
+        return (0, _utils.extractNumbersFromString)(spacing[_spacing[pos]]);
       } else return undefined;
     } else return undefined;
   };