@pushwoosh/dumb-components 1.1.81 → 1.1.83

package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DatePickerFieldProps } from './types';
-export declare function DatePickerField({ value, error, allowedPlacements, zIndex, closeOnSelect, onChange, }: DatePickerFieldProps): ReactElement;
+export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -4,14 +4,17 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { format, monthName, get } from '../../helpers';
 import { InputFrame } from '../../styles';
 import { DatePicker } from '../DatePicker';
-export function DatePickerField({
-  value,
-  error,
-  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-  zIndex = 1000,
-  closeOnSelect = false,
-  onChange
-}) {
+export function DatePickerField(props) {
+  const {
+    value,
+    minDate,
+    maxDate,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    closeOnSelect = false,
+    onChange
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,
@@ -61,6 +64,8 @@ export function DatePickerField({
     }
   }, React.createElement(DatePicker, {
     value: value,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: onSelect
   })));
 }

package/DateTimePicker/components/DatePickerField/types.d.ts

@@ -1,6 +1,8 @@
 import type { Placement } from '@floating-ui/react-dom';
 export interface DatePickerFieldProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     error?: boolean;
     allowedPlacements?: Placement[];
     zIndex?: number;

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -6,6 +6,8 @@ import { NumberPicker } from '../NumberPicker';
 export function DateTimePicker(props) {
   const {
     value,
+    minDate,
+    maxDate,
     userInputDay,
     onChange
   } = props;
@@ -30,6 +32,8 @@ export function DateTimePicker(props) {
   return React.createElement(DatePicker, {
     value: format(date, 'year-month-dayThour:minute:second'),
     userInputDay: userInputDay,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: handleChange,
     slotAfterMonth: () => React.createElement(Collapse, {
       expanded: !!value

package/DateTimePicker/components/DateTimePicker/types.d.ts

@@ -1,5 +1,7 @@
 export interface DateTimePickerProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     userInputDay?: string;
     onChange: (day: string) => void;
 }

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DateTimePickerFieldProps } from './types';
-export declare function DateTimePickerField({ value, error, allowedPlacements, zIndex, closeOnSelect, onChange, }: DateTimePickerFieldProps): ReactElement;
+export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -4,14 +4,17 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { useUTCDate } from './helpers';
 import { InputFrame } from '../../styles';
 import { DateTimePicker } from '../DateTimePicker';
-export function DateTimePickerField({
-  value,
-  error,
-  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-  zIndex = 1000,
-  closeOnSelect = false,
-  onChange
-}) {
+export function DateTimePickerField(props) {
+  const {
+    value,
+    minDate,
+    maxDate,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    closeOnSelect = false,
+    onChange
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,
@@ -68,6 +71,8 @@ export function DateTimePickerField({
     }
   }, React.createElement(DateTimePicker, {
     value: value,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: onSelect
   })));
 }

package/DateTimePicker/components/DateTimePickerField/types.d.ts

@@ -1,6 +1,8 @@
 import type { Placement } from '@floating-ui/react-dom';
 export interface DateTimePickerFieldProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     error?: boolean;
     allowedPlacements?: Placement[];
     zIndex?: number;

package/ExternalImagePreview/ExternalImagePreview.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { ExternalImagePreviewProps } from './types';
+export declare function ExternalImagePreview(props: ExternalImagePreviewProps): ReactElement;

package/ExternalImagePreview/ExternalImagePreview.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Spinner } from '../Spinner';
+import { RootBox, ImgPreview, PlaceholderWrapper } from './styles';
+export function ExternalImagePreview(props) {
+  const {
+    src,
+    alt = 'External image preview',
+    width,
+    height,
+    placeholder,
+    onError
+  } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  useEffect(() => {
+    if (src) {
+      setIsLoading(true);
+      setIsError(false);
+    }
+  }, [src]);
+  const handleOnError = error => {
+    setIsLoading(false);
+    setIsError(true);
+    if (onError) {
+      onError(error);
+    }
+  };
+  return React.createElement(RootBox, {
+    width: width,
+    height: height
+  }, (!src || isError) && React.createElement(PlaceholderWrapper, {
+    width: width,
+    height: height
+  }, placeholder), isLoading && React.createElement(PlaceholderWrapper, {
+    width: width,
+    height: height
+  }, React.createElement(Spinner, {
+    size: "small",
+    color: Color.CLEAR
+  })), React.createElement(ImgPreview, {
+    width: width,
+    height: height,
+    isHide: !src || isLoading || isError,
+    alt: alt,
+    src: src,
+    onError: handleOnError,
+    onLoad: () => setIsLoading(false)
+  }));
+}

package/ExternalImagePreview/index.d.ts

@@ -0,0 +1 @@
+export { ExternalImagePreview } from './ExternalImagePreview';

package/ExternalImagePreview/index.js

@@ -0,0 +1 @@
+export { ExternalImagePreview } from './ExternalImagePreview';

package/ExternalImagePreview/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const RootBox: import("styled-components").StyledComponent<"div", any, {
+    width: string | number;
+    height: string | number;
+}, never>;
+export declare const ImgPreview: import("styled-components").StyledComponent<"img", any, {
+    width: string | number;
+    height: string | number;
+    isHide: boolean;
+}, never>;
+export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string | number;
+    height: string | number;
+}, never>;

package/ExternalImagePreview/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { toCssValue } from '@pushwoosh/kit-helpers';
+export const RootBox = styled.div.withConfig({
+  displayName: "RootBox",
+  componentId: "sc-irvho3-0"
+})(["position:relative;width:", ";height:", ";"], ({
+  width
+}) => toCssValue(width), ({
+  height
+}) => toCssValue(height));
+export const ImgPreview = styled.img.withConfig({
+  displayName: "ImgPreview",
+  componentId: "sc-irvho3-1"
+})(["width:", ";height:", ";border-radius:", ";opacity:", ";z-index:1;"], ({
+  width
+}) => toCssValue(width), ({
+  height
+}) => toCssValue(height), ShapeRadius.CONTROL, ({
+  isHide
+}) => isHide ? 0 : 1);
+export const PlaceholderWrapper = styled.div.withConfig({
+  displayName: "PlaceholderWrapper",
+  componentId: "sc-irvho3-2"
+})(["width:", ";height:", ";display:flex;align-items:center;justify-content:center;border-radius:", ";position:absolute;top:0;left:0;z-index:2;background:", ";"], ({
+  width
+}) => toCssValue(width), ({
+  height
+}) => toCssValue(height), ShapeRadius.CONTROL, Color.MAIN);

package/ExternalImagePreview/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement, ReactEventHandler } from 'react';
+export interface ExternalImagePreviewProps {
+    src: string;
+    alt?: string;
+    width: string | number;
+    height: string | number;
+    placeholder: ReactElement;
+    onError?: (error: ReactEventHandler<HTMLImageElement>) => void;
+}

package/ExternalImagePreview/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.81",
+  "version": "1.1.83",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",