venice-ui 2.0.24 → 2.0.26

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

@@ -80,12 +80,9 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
     const setToday = () => {
         setSellectedDate(new Date());
     };
+    console.log(top);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper
-        // top={top}
-        , { 
-            // top={top}
-            top: 225, left: left, size: size },
+        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { top: top, left: left, size: size },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
                 react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
                 react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),

package/dist/cjs/components/DatePicker/DatePiocker.styles.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Month = exports.MonthWrapper = exports.DayLabel = exports.Day = exports.DayLabelWrapper = exports.DayWrapper = exports.DaysContent = exports.DaysHeader = exports.CalendarContentWrapper = exports.CalendarHeaderTexts = exports.CalendarHeaderWrapper = exports.CalendarWrapper = exports.DatePiockerElement = exports.CalendarOverlay = void 0;
-const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
 exports.CalendarOverlay = styled_components_1.default.div `
@@ -33,10 +32,9 @@ exports.CalendarWrapper = styled_components_1.default.div `
   height: auto;
   width: 326px;
   position: absolute;
-  z-index: ${Theme_1.Theme.zIndex.dropdown};
-
-  // top: ${(p) => (0, common_1.setPanelTop)(p.size)};
-  top: 225px;
+  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown)};
+  left: ${(p) => p.left}px;
+  top: ${(p) => p.top}px;
   border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;

package/dist/cjs/components/Form/Form.js

@@ -9,10 +9,14 @@ const Input_1 = require("../Input");
 const File_1 = require("../File");
 const FormElements_1 = require("./FormElements");
 const Dropdown_1 = require("../Dropdown");
+const DatePicker_1 = require("../DatePicker");
 const Form = ({ formData, size = 'medium', read }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
     };
+    const onDateChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
     const onIntChangeHandler = (name, value) => {
         let valueString = value;
         if (valueString.length > 0) {
@@ -48,6 +52,8 @@ const Form = ({ formData, size = 'medium', read }) => {
                 return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read }));
             case 'file':
                 return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+            case 'date':
+                return (react_1.default.createElement(DatePicker_1.DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler }));
         }
     };
     return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {

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

@@ -54,12 +54,9 @@ export const Calendar = ({ value, top, left, size, handleClose, handleSelect, })
     const setToday = () => {
         setSellectedDate(new Date());
     };
+    console.log(top);
     return (React.createElement(React.Fragment, null,
-        React.createElement(CalendarWrapper
-        // top={top}
-        , { 
-            // top={top}
-            top: 225, left: left, size: size },
+        React.createElement(CalendarWrapper, { top: top, left: left, size: size },
             React.createElement(Aligment, { direction: "row" },
                 React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
                 React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),

package/dist/esm/components/DatePicker/DatePiocker.styles.js

@@ -1,4 +1,3 @@
-import { setPanelTop } from '../common';
 import styled from 'styled-components';
 import { Theme } from '../../Theme';
 export const CalendarOverlay = styled.div `
@@ -27,10 +26,9 @@ export const CalendarWrapper = styled.div `
   height: auto;
   width: 326px;
   position: absolute;
-  z-index: ${Theme.zIndex.dropdown};
-
-  // top: ${(p) => setPanelTop(p.size)};
-  top: 225px;
+  z-index: ${(p) => (p.zIndex ? p.zIndex : Theme.zIndex.dropdown)};
+  left: ${(p) => p.left}px;
+  top: ${(p) => p.top}px;
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;

package/dist/esm/components/Form/Form.js

@@ -3,10 +3,14 @@ import { Input } from '../Input';
 import { File } from '../File';
 import { FormRow, FormSubRow, FormWrapper } from './FormElements';
 import { Dropdown } from '../Dropdown';
+import { DatePicker } from '../DatePicker';
 export const Form = ({ formData, size = 'medium', read }) => {
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
     };
+    const onDateChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
     const onIntChangeHandler = (name, value) => {
         let valueString = value;
         if (valueString.length > 0) {
@@ -42,6 +46,8 @@ export const Form = ({ formData, size = 'medium', read }) => {
                 return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read }));
             case 'file':
                 return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+            case 'date':
+                return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler }));
         }
     };
     return (React.createElement(FormWrapper, null, formData.data.map((item) => {

package/dist/types/components/DatePicker/DatePiocker.styles.d.ts

@@ -5,6 +5,7 @@ interface ICalendarStyle {
     size: InputSize;
     top: number;
     left: number;
+    zIndex?: number;
 }
 export declare const CalendarWrapper: import("styled-components").StyledComponent<"div", any, ICalendarStyle, never>;
 export declare const CalendarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.0.24",
+  "version": "2.0.26",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",