@purple/phoenix-components - npm Package Compare versions

Comparing version 0.0.27 to 0.0.28

dist/bundle.cjs.js

@@ -207,5 +207,5 @@ 'use strict';
     };
-    var onBlur = function () {
+    var onBlur = function (event) {
         var onBlur = props.onBlur;
-        onBlur && onBlur();
+        onBlur && onBlur(event);
     };
@@ -270,3 +270,3 @@ var mobileOnChange = function (e) {
 var SelectPicker = function (_a) {
-    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
+    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error, onMouseOver = _a.onMouseOver, onMouseLeave = _a.onMouseLeave;
     var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
@@ -309,3 +309,3 @@ React.useEffect(function () {
         typeof label === 'string' ? (React__default.createElement(PickerLabel, null, label)) : (React__default.createElement(React__default.Fragment, null, label)),
-        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length, onMouseOver: function (event) { return onMouseOver(event); }, onMouseLeave: function (event) { return onMouseLeave(event); } }, getRadioButtons(options)),
         error && React__default.createElement(Error$2, null, error)));
@@ -507,40 +507,53 @@ };
     var monthOptions = months || DEFAULT_MONTHS;
-    var day = null;
-    var month = null;
-    var year = null;
-    if (value) {
-        if (value.day) {
-            day = value.day;
+    var _b = React.useState({
+        day: value ? value.day : null,
+        month: value ? value.month : null,
+        year: value ? value.year : null
+    }), date = _b[0], setDate = _b[1];
+    var _c = React.useState(value ? value.day : null), day = _c[0], setDay = _c[1];
+    var _d = React.useState(value
+        ? { value: value.month, label: getMonthLabel(monthOptions, value.month) }
+        : null), month = _d[0], setMonth = _d[1];
+    var _e = React.useState(value ? value.year : null), year = _e[0], setYear = _e[1];
+    var _f = React.useState(null), internalError = _f[0], setInternalError = _f[1];
+    React.useEffect(function () {
+        if (month && year) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-        if (value.month) {
-            var monthLabel = monthOptions.find(function (item) { return item.value.toString() === value.month.toString(); });
-            month = {
-                value: value.month,
-                label: monthLabel ? monthLabel : null
-            };
+    }, [day]);
+    React.useEffect(function () {
+        if (day && year) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-        if (value.year) {
-            year = value.year;
+    }, [month]);
+    React.useEffect(function () {
+        if (day && month) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-    }
-    var _b = React.useState({ day: day, month: month, year: year }), date = _b[0], setDate = _b[1];
-    var _c = React.useState(null), internalError = _c[0], setInternalError = _c[1];
+    }, [year]);
     React.useEffect(function () {
-        var monthObj = date.month;
-        var result = {
-            day: date.day ? parseInt(date.day) : null,
-            month: monthObj ? monthObj.value : null,
-            year: date.year ? parseInt(date.year) : null
-        };
-        var allFilled = result.day && result.month && result.year;
-        if (!isValidDate(result.day, result.month, result.year) && allFilled) {
-            onChange(null);
-            return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+        if (date.day && date.month && date.year) {
+            if (!isValidDate(date.day, date.month, date.year)) {
+                onChange(null);
+                return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+            }
         }
-        if (isValidDate(result.day, result.month, result.year) && allFilled) {
+        if (isValidDate(date.day, date.month, date.year)) {
             setInternalError(null);
-            return onChange(result);
+            onChange(date);
         }
         else {
-            return onChange(null);
+            onChange(null);
         }
@@ -557,8 +570,15 @@ }, [date]);
         React__default.createElement(GridInput, null,
-            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: date.day, onChange: function (e) { return setDate(__assign(__assign({}, date), { day: e.target.value })); } }),
-            React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: date.month, onChange: function (option) { return setDate(__assign(__assign({}, date), { month: option })); }, options: monthOptions }),
-            React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: date.year, onChange: function (e) { return setDate(__assign(__assign({}, date), { year: e.target.value })); } })),
+            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: day, onChange: function (e) { return setDay(e.target.value); } }),
+            React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: month, onChange: function (option) { return setMonth(option); }, options: monthOptions }),
+            React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: year, onChange: function (e) { return setYear(e.target.value); } })),
         internalError && !error && React__default.createElement(Error$5, null, internalError),
         error && React__default.createElement(Error$5, null, error)));
 };
+var getMonthLabel = function (options, monthNumber) {
+    var monthOption = options.find(function (option) { return option.value === monthNumber; });
+    if (!monthOption) {
+        return null;
+    }
+    return monthOption.label;
+};
 
@@ -565,0 +585,0 @@ exports.Checkbox = CheckBox;

dist/bundle.esm.js

@@ -199,5 +199,5 @@ import React__default, { useState, createElement, useEffect, useCallback } from 'react';
     };
-    var onBlur = function () {
+    var onBlur = function (event) {
         var onBlur = props.onBlur;
-        onBlur && onBlur();
+        onBlur && onBlur(event);
     };
@@ -262,3 +262,3 @@ var mobileOnChange = function (e) {
 var SelectPicker = function (_a) {
-    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
+    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error, onMouseOver = _a.onMouseOver, onMouseLeave = _a.onMouseLeave;
     var _b = useState([]), selected = _b[0], setSelected = _b[1];
@@ -301,3 +301,3 @@ useEffect(function () {
         typeof label === 'string' ? (React__default.createElement(PickerLabel, null, label)) : (React__default.createElement(React__default.Fragment, null, label)),
-        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length, onMouseOver: function (event) { return onMouseOver(event); }, onMouseLeave: function (event) { return onMouseLeave(event); } }, getRadioButtons(options)),
         error && React__default.createElement(Error$2, null, error)));
@@ -499,40 +499,53 @@ };
     var monthOptions = months || DEFAULT_MONTHS;
-    var day = null;
-    var month = null;
-    var year = null;
-    if (value) {
-        if (value.day) {
-            day = value.day;
+    var _b = useState({
+        day: value ? value.day : null,
+        month: value ? value.month : null,
+        year: value ? value.year : null
+    }), date = _b[0], setDate = _b[1];
+    var _c = useState(value ? value.day : null), day = _c[0], setDay = _c[1];
+    var _d = useState(value
+        ? { value: value.month, label: getMonthLabel(monthOptions, value.month) }
+        : null), month = _d[0], setMonth = _d[1];
+    var _e = useState(value ? value.year : null), year = _e[0], setYear = _e[1];
+    var _f = useState(null), internalError = _f[0], setInternalError = _f[1];
+    useEffect(function () {
+        if (month && year) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-        if (value.month) {
-            var monthLabel = monthOptions.find(function (item) { return item.value.toString() === value.month.toString(); });
-            month = {
-                value: value.month,
-                label: monthLabel ? monthLabel : null
-            };
+    }, [day]);
+    useEffect(function () {
+        if (day && year) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-        if (value.year) {
-            year = value.year;
+    }, [month]);
+    useEffect(function () {
+        if (day && month) {
+            setDate({
+                day: day,
+                month: month ? month.value : null,
+                year: year
+            });
         }
-    }
-    var _b = useState({ day: day, month: month, year: year }), date = _b[0], setDate = _b[1];
-    var _c = useState(null), internalError = _c[0], setInternalError = _c[1];
+    }, [year]);
     useEffect(function () {
-        var monthObj = date.month;
-        var result = {
-            day: date.day ? parseInt(date.day) : null,
-            month: monthObj ? monthObj.value : null,
-            year: date.year ? parseInt(date.year) : null
-        };
-        var allFilled = result.day && result.month && result.year;
-        if (!isValidDate(result.day, result.month, result.year) && allFilled) {
-            onChange(null);
-            return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+        if (date.day && date.month && date.year) {
+            if (!isValidDate(date.day, date.month, date.year)) {
+                onChange(null);
+                return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+            }
         }
-        if (isValidDate(result.day, result.month, result.year) && allFilled) {
+        if (isValidDate(date.day, date.month, date.year)) {
             setInternalError(null);
-            return onChange(result);
+            onChange(date);
         }
         else {
-            return onChange(null);
+            onChange(null);
         }
@@ -549,9 +562,16 @@ }, [date]);
         React__default.createElement(GridInput, null,
-            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: date.day, onChange: function (e) { return setDate(__assign(__assign({}, date), { day: e.target.value })); } }),
-            React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: date.month, onChange: function (option) { return setDate(__assign(__assign({}, date), { month: option })); }, options: monthOptions }),
-            React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: date.year, onChange: function (e) { return setDate(__assign(__assign({}, date), { year: e.target.value })); } })),
+            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: day, onChange: function (e) { return setDay(e.target.value); } }),
+            React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: month, onChange: function (option) { return setMonth(option); }, options: monthOptions }),
+            React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: year, onChange: function (e) { return setYear(e.target.value); } })),
         internalError && !error && React__default.createElement(Error$5, null, internalError),
         error && React__default.createElement(Error$5, null, error)));
 };
+var getMonthLabel = function (options, monthNumber) {
+    var monthOption = options.find(function (option) { return option.value === monthNumber; });
+    if (!monthOption) {
+        return null;
+    }
+    return monthOption.label;
+};
 
 export { CheckBox as Checkbox, DateInput, Upload as FileUpload, Input, SelectBox, SelectPicker, TextArea };

dist/bundle.umd.js

@@ -202,5 +202,5 @@ (function (global, factory) {
         };
-        var onBlur = function () {
+        var onBlur = function (event) {
             var onBlur = props.onBlur;
-            onBlur && onBlur();
+            onBlur && onBlur(event);
         };
@@ -265,3 +265,3 @@ var mobileOnChange = function (e) {
     var SelectPicker = function (_a) {
-        var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
+        var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error, onMouseOver = _a.onMouseOver, onMouseLeave = _a.onMouseLeave;
         var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
@@ -304,3 +304,3 @@ React.useEffect(function () {
             typeof label === 'string' ? (React__default.createElement(PickerLabel, null, label)) : (React__default.createElement(React__default.Fragment, null, label)),
-            React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+            React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length, onMouseOver: function (event) { return onMouseOver(event); }, onMouseLeave: function (event) { return onMouseLeave(event); } }, getRadioButtons(options)),
             error && React__default.createElement(Error$2, null, error)));
@@ -502,40 +502,53 @@ };
         var monthOptions = months || DEFAULT_MONTHS;
-        var day = null;
-        var month = null;
-        var year = null;
-        if (value) {
-            if (value.day) {
-                day = value.day;
+        var _b = React.useState({
+            day: value ? value.day : null,
+            month: value ? value.month : null,
+            year: value ? value.year : null
+        }), date = _b[0], setDate = _b[1];
+        var _c = React.useState(value ? value.day : null), day = _c[0], setDay = _c[1];
+        var _d = React.useState(value
+            ? { value: value.month, label: getMonthLabel(monthOptions, value.month) }
+            : null), month = _d[0], setMonth = _d[1];
+        var _e = React.useState(value ? value.year : null), year = _e[0], setYear = _e[1];
+        var _f = React.useState(null), internalError = _f[0], setInternalError = _f[1];
+        React.useEffect(function () {
+            if (month && year) {
+                setDate({
+                    day: day,
+                    month: month ? month.value : null,
+                    year: year
+                });
             }
-            if (value.month) {
-                var monthLabel = monthOptions.find(function (item) { return item.value.toString() === value.month.toString(); });
-                month = {
-                    value: value.month,
-                    label: monthLabel ? monthLabel : null
-                };
+        }, [day]);
+        React.useEffect(function () {
+            if (day && year) {
+                setDate({
+                    day: day,
+                    month: month ? month.value : null,
+                    year: year
+                });
             }
-            if (value.year) {
-                year = value.year;
+        }, [month]);
+        React.useEffect(function () {
+            if (day && month) {
+                setDate({
+                    day: day,
+                    month: month ? month.value : null,
+                    year: year
+                });
             }
-        }
-        var _b = React.useState({ day: day, month: month, year: year }), date = _b[0], setDate = _b[1];
-        var _c = React.useState(null), internalError = _c[0], setInternalError = _c[1];
+        }, [year]);
         React.useEffect(function () {
-            var monthObj = date.month;
-            var result = {
-                day: date.day ? parseInt(date.day) : null,
-                month: monthObj ? monthObj.value : null,
-                year: date.year ? parseInt(date.year) : null
-            };
-            var allFilled = result.day && result.month && result.year;
-            if (!isValidDate(result.day, result.month, result.year) && allFilled) {
-                onChange(null);
-                return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+            if (date.day && date.month && date.year) {
+                if (!isValidDate(date.day, date.month, date.year)) {
+                    onChange(null);
+                    return setInternalError(dateFormatError || 'Date is wrong. Please fix it');
+                }
             }
-            if (isValidDate(result.day, result.month, result.year) && allFilled) {
+            if (isValidDate(date.day, date.month, date.year)) {
                 setInternalError(null);
-                return onChange(result);
+                onChange(date);
             }
             else {
-                return onChange(null);
+                onChange(null);
             }
@@ -552,8 +565,15 @@ }, [date]);
             React__default.createElement(GridInput, null,
-                React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: date.day, onChange: function (e) { return setDate(__assign(__assign({}, date), { day: e.target.value })); } }),
-                React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: date.month, onChange: function (option) { return setDate(__assign(__assign({}, date), { month: option })); }, options: monthOptions }),
-                React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: date.year, onChange: function (e) { return setDate(__assign(__assign({}, date), { year: e.target.value })); } })),
+                React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", autoComplete: "bday-day", label: labels.day, value: day, onChange: function (e) { return setDay(e.target.value); } }),
+                React__default.createElement(SelectBox, { name: "month", label: labels.month, autoComplete: "bday-month", value: month, onChange: function (option) { return setMonth(option); }, options: monthOptions }),
+                React__default.createElement(Input, { name: "year", min: "1", type: "number", autoComplete: "bday-year", pattern: "[0-9]*", label: labels.year, value: year, onChange: function (e) { return setYear(e.target.value); } })),
             internalError && !error && React__default.createElement(Error$5, null, internalError),
             error && React__default.createElement(Error$5, null, error)));
     };
+    var getMonthLabel = function (options, monthNumber) {
+        var monthOption = options.find(function (option) { return option.value === monthNumber; });
+        if (!monthOption) {
+            return null;
+        }
+        return monthOption.label;
+    };
 
@@ -560,0 +580,0 @@ exports.Checkbox = CheckBox;

dist/DateInput/index.d.ts

 /// <reference types="react" />
 interface Month {
-    value: number;
+    value: string | number;
     label: string;
@@ -13,9 +13,5 @@ }
     day: string;
-    month: string;
+    month: string | number;
     year: string;
 }
-interface Month {
-    value: number;
-    label: string;
-}
 interface DateInputProps {
@@ -22,0 +18,0 @@ onChange?: any;

dist/SelectPicker/index.d.ts

@@ -10,2 +10,4 @@ import React from 'react';
     error?: string | boolean;
+    onMouseOver?: any;
+    onMouseLeave?: any;
 }
@@ -18,3 +20,3 @@ interface Option {
 }
-declare const SelectPicker: ({ options, label, name, onChange, value, multiSelect, error }: SelectPickerProps) => JSX.Element;
+declare const SelectPicker: ({ options, label, name, onChange, value, multiSelect, error, onMouseOver, onMouseLeave }: SelectPickerProps) => JSX.Element;
 export default SelectPicker;

package.json

 {
   "name": "@purple/phoenix-components",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166753

increased by1.23%

Lines of code

2046

increased by2.92%

No dependency changes