@hoddy-ui/core 2.5.47 → 2.5.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/next/dist/index.d.mts +2 -2
- package/next/dist/index.d.ts +2 -2
- package/next/dist/index.js +163 -9
- package/next/dist/index.js.map +1 -1
- package/next/dist/index.mjs +163 -9
- package/next/dist/index.mjs.map +1 -1
- package/next/package.json +4 -2
- package/package.json +4 -3
- package/src/Components/FlashMessage.tsx +5 -5
- package/src/Components/MutliSelectTextfield.tsx +0 -0
- package/src/Components/TextField.tsx +226 -57
- package/src/types.ts +45 -38
package/next/dist/index.d.mts
CHANGED
|
@@ -89,7 +89,7 @@ interface FlashMessageProps {
|
|
|
89
89
|
onPress?: () => void;
|
|
90
90
|
}>;
|
|
91
91
|
duration?: number;
|
|
92
|
-
type?: "success" | "warning" | "error";
|
|
92
|
+
type?: "success" | "warning" | "error" | "info" | "default";
|
|
93
93
|
}
|
|
94
94
|
interface LinkButtonProps {
|
|
95
95
|
title: string;
|
|
@@ -206,7 +206,7 @@ interface TextFieldProps extends TextInputProps {
|
|
|
206
206
|
variant?: "outlined" | "text" | "contained";
|
|
207
207
|
color?: colorTypes;
|
|
208
208
|
size?: "small" | "normal" | "large";
|
|
209
|
-
type?: "email" | "tel" | "password" | "text" | "number" | "search";
|
|
209
|
+
type?: "email" | "tel" | "password" | "text" | "number" | "search" | "date";
|
|
210
210
|
helperText?: string;
|
|
211
211
|
value: any;
|
|
212
212
|
start?: ReactNode;
|
package/next/dist/index.d.ts
CHANGED
|
@@ -89,7 +89,7 @@ interface FlashMessageProps {
|
|
|
89
89
|
onPress?: () => void;
|
|
90
90
|
}>;
|
|
91
91
|
duration?: number;
|
|
92
|
-
type?: "success" | "warning" | "error";
|
|
92
|
+
type?: "success" | "warning" | "error" | "info" | "default";
|
|
93
93
|
}
|
|
94
94
|
interface LinkButtonProps {
|
|
95
95
|
title: string;
|
|
@@ -206,7 +206,7 @@ interface TextFieldProps extends TextInputProps {
|
|
|
206
206
|
variant?: "outlined" | "text" | "contained";
|
|
207
207
|
color?: colorTypes;
|
|
208
208
|
size?: "small" | "normal" | "large";
|
|
209
|
-
type?: "email" | "tel" | "password" | "text" | "number" | "search";
|
|
209
|
+
type?: "email" | "tel" | "password" | "text" | "number" | "search" | "date";
|
|
210
210
|
helperText?: string;
|
|
211
211
|
value: any;
|
|
212
212
|
start?: ReactNode;
|
package/next/dist/index.js
CHANGED
|
@@ -315,7 +315,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
315
315
|
const config2 = getConfig();
|
|
316
316
|
const customFontSizes = config2.TYPOGRAPHY?.fontSizes;
|
|
317
317
|
const baseFontSize = customFontSizes?.[variant] ?? DEFAULT_FONT_SIZES[variant];
|
|
318
|
-
const f = fontSize || baseFontSize;
|
|
318
|
+
const f = fontSize || style?.fontSize || baseFontSize;
|
|
319
319
|
const lh = lineHeight || f * 1.2;
|
|
320
320
|
const styles = import_react_native.StyleSheet.create({
|
|
321
321
|
text: {
|
|
@@ -411,6 +411,7 @@ var FlashMessage = () => {
|
|
|
411
411
|
opacity: opacity.value
|
|
412
412
|
};
|
|
413
413
|
});
|
|
414
|
+
const textColor = type === "default" ? "#fff" : colors2[type].text;
|
|
414
415
|
const styles = import_react_native_size_matters2.ScaledSheet.create({
|
|
415
416
|
root: {
|
|
416
417
|
position: "absolute",
|
|
@@ -419,7 +420,7 @@ var FlashMessage = () => {
|
|
|
419
420
|
left: 0,
|
|
420
421
|
paddingTop: top + 10,
|
|
421
422
|
paddingHorizontal: "15@ms",
|
|
422
|
-
backgroundColor: colors2[type].main,
|
|
423
|
+
backgroundColor: type === "default" ? "#333" : colors2[type].main,
|
|
423
424
|
width: "100%",
|
|
424
425
|
borderBottomLeftRadius: 10,
|
|
425
426
|
borderBottomRightRadius: 10,
|
|
@@ -443,10 +444,10 @@ var FlashMessage = () => {
|
|
|
443
444
|
variant: "h6",
|
|
444
445
|
fontWeight: 600,
|
|
445
446
|
gutterBottom: 3,
|
|
446
|
-
|
|
447
|
+
color: textColor
|
|
447
448
|
},
|
|
448
449
|
message?.title
|
|
449
|
-
), /* @__PURE__ */ import_react2.default.createElement(Typography_default, {
|
|
450
|
+
), /* @__PURE__ */ import_react2.default.createElement(Typography_default, { color: textColor }, message?.message)))), message?.actions?.map((cur, i) => /* @__PURE__ */ import_react2.default.createElement(
|
|
450
451
|
import_react_native2.TouchableOpacity,
|
|
451
452
|
{
|
|
452
453
|
key: i,
|
|
@@ -1402,6 +1403,7 @@ var import_vector_icons8 = require("@expo/vector-icons");
|
|
|
1402
1403
|
var import_react16 = __toESM(require("react"));
|
|
1403
1404
|
var import_react_native16 = require("react-native");
|
|
1404
1405
|
var import_react_native_size_matters13 = require("react-native-size-matters");
|
|
1406
|
+
var import_react_native_modal_datetime_picker = __toESM(require("react-native-modal-datetime-picker"));
|
|
1405
1407
|
|
|
1406
1408
|
// ../src/Components/SelectMenu.tsx
|
|
1407
1409
|
var import_vector_icons7 = require("@expo/vector-icons");
|
|
@@ -1536,6 +1538,7 @@ var TextField = ({
|
|
|
1536
1538
|
color = "primary",
|
|
1537
1539
|
value,
|
|
1538
1540
|
type,
|
|
1541
|
+
placeholder = "",
|
|
1539
1542
|
helperText,
|
|
1540
1543
|
onChangeText,
|
|
1541
1544
|
onSubmitEditing = () => {
|
|
@@ -1559,6 +1562,8 @@ var TextField = ({
|
|
|
1559
1562
|
}) => {
|
|
1560
1563
|
const colors2 = useColors();
|
|
1561
1564
|
const [focused, setFocused] = (0, import_react16.useState)(false);
|
|
1565
|
+
const [datePickerVisible, setDatePickerVisible] = (0, import_react16.useState)(false);
|
|
1566
|
+
const isDate = type === "date";
|
|
1562
1567
|
const height2 = (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
|
|
1563
1568
|
const labelAnim = (0, import_react16.useRef)(
|
|
1564
1569
|
new import_react_native16.Animated.Value(height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2))
|
|
@@ -1615,6 +1620,21 @@ var TextField = ({
|
|
|
1615
1620
|
paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
|
|
1616
1621
|
paddingTop: "13@ms"
|
|
1617
1622
|
},
|
|
1623
|
+
dateContent: {
|
|
1624
|
+
flexDirection: "row",
|
|
1625
|
+
alignItems: "center",
|
|
1626
|
+
flex: 1,
|
|
1627
|
+
paddingLeft: variant === "text" ? 0 : (0, import_react_native_size_matters13.moderateScale)(15),
|
|
1628
|
+
paddingRight: (0, import_react_native_size_matters13.moderateScale)(10),
|
|
1629
|
+
paddingTop: variant === "text" ? (0, import_react_native_size_matters13.ms)(13) : (0, import_react_native_size_matters13.ms)(12)
|
|
1630
|
+
},
|
|
1631
|
+
dateText: {
|
|
1632
|
+
fontSize: "14@ms",
|
|
1633
|
+
flex: 1
|
|
1634
|
+
},
|
|
1635
|
+
datePlaceholder: {
|
|
1636
|
+
color: colors2.textSecondary.main
|
|
1637
|
+
},
|
|
1618
1638
|
label: {
|
|
1619
1639
|
fontFamily: getFontFamily(400),
|
|
1620
1640
|
position: "absolute",
|
|
@@ -1660,10 +1680,46 @@ var TextField = ({
|
|
|
1660
1680
|
autoCapitalize: "none",
|
|
1661
1681
|
textContentType: "password"
|
|
1662
1682
|
} : {};
|
|
1683
|
+
const parseDateValue = () => {
|
|
1684
|
+
if (!value)
|
|
1685
|
+
return /* @__PURE__ */ new Date();
|
|
1686
|
+
if (value instanceof Date)
|
|
1687
|
+
return value;
|
|
1688
|
+
const parts = `${value}`.split("/");
|
|
1689
|
+
if (parts.length === 3) {
|
|
1690
|
+
const [day, month, year] = parts;
|
|
1691
|
+
const parsed = new Date(
|
|
1692
|
+
parseInt(year, 10),
|
|
1693
|
+
parseInt(month, 10) - 1,
|
|
1694
|
+
parseInt(day, 10)
|
|
1695
|
+
);
|
|
1696
|
+
if (!isNaN(parsed.getTime()))
|
|
1697
|
+
return parsed;
|
|
1698
|
+
}
|
|
1699
|
+
const fallback = new Date(value);
|
|
1700
|
+
return isNaN(fallback.getTime()) ? /* @__PURE__ */ new Date() : fallback;
|
|
1701
|
+
};
|
|
1702
|
+
const handleDateConfirm = (date) => {
|
|
1703
|
+
const day = date.getDate();
|
|
1704
|
+
const month = date.getMonth() + 1;
|
|
1705
|
+
const year = date.getFullYear();
|
|
1706
|
+
const dateString = `${day}/${month}/${year}`;
|
|
1707
|
+
onChangeText?.(dateString);
|
|
1708
|
+
setDatePickerVisible(false);
|
|
1709
|
+
};
|
|
1710
|
+
const handleContainerPress = () => {
|
|
1711
|
+
if (disabled)
|
|
1712
|
+
return;
|
|
1713
|
+
setFocused(true);
|
|
1714
|
+
if (isDate) {
|
|
1715
|
+
onFocus();
|
|
1716
|
+
setDatePickerVisible(true);
|
|
1717
|
+
}
|
|
1718
|
+
};
|
|
1663
1719
|
return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.root }, /* @__PURE__ */ import_react16.default.createElement(
|
|
1664
1720
|
import_react_native16.TouchableOpacity,
|
|
1665
1721
|
{
|
|
1666
|
-
onPress:
|
|
1722
|
+
onPress: handleContainerPress,
|
|
1667
1723
|
style: styles.container
|
|
1668
1724
|
},
|
|
1669
1725
|
/* @__PURE__ */ import_react16.default.createElement(import_react_native16.Animated.Text, { style: { ...styles.label, top: labelAnim } }, label),
|
|
@@ -1684,7 +1740,24 @@ var TextField = ({
|
|
|
1684
1740
|
options.find((cur) => cur.value === value)?.start
|
|
1685
1741
|
),
|
|
1686
1742
|
/* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles.inputText }, options.find((cur) => cur.value === value)?.label)
|
|
1687
|
-
) : /* @__PURE__ */ import_react16.default.createElement(
|
|
1743
|
+
) : isDate ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.dateContent }, /* @__PURE__ */ import_react16.default.createElement(
|
|
1744
|
+
Typography_default,
|
|
1745
|
+
{
|
|
1746
|
+
style: [
|
|
1747
|
+
styles.dateText,
|
|
1748
|
+
!value ? styles.datePlaceholder : void 0
|
|
1749
|
+
],
|
|
1750
|
+
color: value ? "dark" : "textSecondary"
|
|
1751
|
+
},
|
|
1752
|
+
value || placeholder
|
|
1753
|
+
), /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginLeft: 8 } }, end ?? /* @__PURE__ */ import_react16.default.createElement(
|
|
1754
|
+
import_vector_icons8.Ionicons,
|
|
1755
|
+
{
|
|
1756
|
+
name: "calendar-outline",
|
|
1757
|
+
size: 22,
|
|
1758
|
+
color: colors2.textSecondary.main
|
|
1759
|
+
}
|
|
1760
|
+
))) : /* @__PURE__ */ import_react16.default.createElement(
|
|
1688
1761
|
import_react_native16.TextInput,
|
|
1689
1762
|
{
|
|
1690
1763
|
onFocus: () => {
|
|
@@ -1754,6 +1827,18 @@ var TextField = ({
|
|
|
1754
1827
|
onChange: onChangeText,
|
|
1755
1828
|
...selectMenuProps
|
|
1756
1829
|
}
|
|
1830
|
+
), isDate && /* @__PURE__ */ import_react16.default.createElement(
|
|
1831
|
+
import_react_native_modal_datetime_picker.default,
|
|
1832
|
+
{
|
|
1833
|
+
isVisible: datePickerVisible,
|
|
1834
|
+
mode: "date",
|
|
1835
|
+
date: parseDateValue(),
|
|
1836
|
+
onConfirm: handleDateConfirm,
|
|
1837
|
+
onCancel: () => {
|
|
1838
|
+
setDatePickerVisible(false);
|
|
1839
|
+
setFocused(false);
|
|
1840
|
+
}
|
|
1841
|
+
}
|
|
1757
1842
|
));
|
|
1758
1843
|
};
|
|
1759
1844
|
var TextField2 = import_react16.default.forwardRef(
|
|
@@ -1764,6 +1849,7 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1764
1849
|
color = "primary",
|
|
1765
1850
|
value,
|
|
1766
1851
|
type,
|
|
1852
|
+
placeholder,
|
|
1767
1853
|
helperText,
|
|
1768
1854
|
onChangeText,
|
|
1769
1855
|
onSubmitEditing = () => {
|
|
@@ -1779,7 +1865,6 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1779
1865
|
style = {},
|
|
1780
1866
|
inputStyles = {},
|
|
1781
1867
|
gutterBottom = 8,
|
|
1782
|
-
placeholder,
|
|
1783
1868
|
end,
|
|
1784
1869
|
options,
|
|
1785
1870
|
multiline,
|
|
@@ -1789,6 +1874,8 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1789
1874
|
const colors2 = useColors();
|
|
1790
1875
|
const [focused, _setFocused] = (0, import_react16.useState)(false);
|
|
1791
1876
|
const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
|
|
1877
|
+
const [datePickerVisible, setDatePickerVisible] = (0, import_react16.useState)(false);
|
|
1878
|
+
const isDate = type === "date";
|
|
1792
1879
|
const height2 = (0, import_react_native_size_matters13.moderateScale)(
|
|
1793
1880
|
multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
|
|
1794
1881
|
);
|
|
@@ -1839,6 +1926,20 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1839
1926
|
color: colors2.textSecondary.light,
|
|
1840
1927
|
paddingLeft: (0, import_react_native_size_matters13.moderateScale)(10)
|
|
1841
1928
|
},
|
|
1929
|
+
dateContent: {
|
|
1930
|
+
flexDirection: "row",
|
|
1931
|
+
alignItems: "center",
|
|
1932
|
+
flex: 1,
|
|
1933
|
+
paddingHorizontal: (0, import_react_native_size_matters13.moderateScale)(10),
|
|
1934
|
+
paddingTop: multiline ? 4 : 0
|
|
1935
|
+
},
|
|
1936
|
+
dateText: {
|
|
1937
|
+
fontSize: "14@ms",
|
|
1938
|
+
flex: 1
|
|
1939
|
+
},
|
|
1940
|
+
datePlaceholder: {
|
|
1941
|
+
color: colors2.textSecondary.light
|
|
1942
|
+
},
|
|
1842
1943
|
label: {},
|
|
1843
1944
|
helperText: {
|
|
1844
1945
|
paddingHorizontal: "15@s",
|
|
@@ -1877,6 +1978,42 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1877
1978
|
autoCapitalize: "none",
|
|
1878
1979
|
textContentType: "password"
|
|
1879
1980
|
} : {};
|
|
1981
|
+
const parseDateValue = () => {
|
|
1982
|
+
if (!value)
|
|
1983
|
+
return /* @__PURE__ */ new Date();
|
|
1984
|
+
if (value instanceof Date)
|
|
1985
|
+
return value;
|
|
1986
|
+
const parts = `${value}`.split("/");
|
|
1987
|
+
if (parts.length === 3) {
|
|
1988
|
+
const [day, month, year] = parts;
|
|
1989
|
+
const parsed = new Date(
|
|
1990
|
+
parseInt(year, 10),
|
|
1991
|
+
parseInt(month, 10) - 1,
|
|
1992
|
+
parseInt(day, 10)
|
|
1993
|
+
);
|
|
1994
|
+
if (!isNaN(parsed.getTime()))
|
|
1995
|
+
return parsed;
|
|
1996
|
+
}
|
|
1997
|
+
const fallback = new Date(value);
|
|
1998
|
+
return isNaN(fallback.getTime()) ? /* @__PURE__ */ new Date() : fallback;
|
|
1999
|
+
};
|
|
2000
|
+
const handleDateConfirm = (date) => {
|
|
2001
|
+
const day = date.getDate();
|
|
2002
|
+
const month = date.getMonth() + 1;
|
|
2003
|
+
const year = date.getFullYear();
|
|
2004
|
+
const dateString = `${day}/${month}/${year}`;
|
|
2005
|
+
onChangeText?.(dateString);
|
|
2006
|
+
setDatePickerVisible(false);
|
|
2007
|
+
};
|
|
2008
|
+
const handleContainerPress = () => {
|
|
2009
|
+
if (disabled)
|
|
2010
|
+
return;
|
|
2011
|
+
setFocused(true);
|
|
2012
|
+
if (isDate) {
|
|
2013
|
+
onFocus();
|
|
2014
|
+
setDatePickerVisible(true);
|
|
2015
|
+
}
|
|
2016
|
+
};
|
|
1880
2017
|
return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.root }, label && /* @__PURE__ */ import_react16.default.createElement(
|
|
1881
2018
|
Typography_default,
|
|
1882
2019
|
{
|
|
@@ -1889,7 +2026,7 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1889
2026
|
), /* @__PURE__ */ import_react16.default.createElement(
|
|
1890
2027
|
import_react_native16.TouchableOpacity,
|
|
1891
2028
|
{
|
|
1892
|
-
onPress:
|
|
2029
|
+
onPress: handleContainerPress,
|
|
1893
2030
|
style: styles.container
|
|
1894
2031
|
},
|
|
1895
2032
|
/* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginTop: multiline ? 5 : 0 } }, start),
|
|
@@ -1901,7 +2038,24 @@ var TextField2 = import_react16.default.forwardRef(
|
|
|
1901
2038
|
style: { marginLeft: "auto", marginRight: 15 },
|
|
1902
2039
|
color: colors2.dark.light
|
|
1903
2040
|
}
|
|
1904
|
-
)) : /* @__PURE__ */ import_react16.default.createElement(
|
|
2041
|
+
)) : isDate ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles.dateContent }, /* @__PURE__ */ import_react16.default.createElement(
|
|
2042
|
+
Typography_default,
|
|
2043
|
+
{
|
|
2044
|
+
style: [
|
|
2045
|
+
styles.dateText,
|
|
2046
|
+
!value ? styles.datePlaceholder : void 0
|
|
2047
|
+
],
|
|
2048
|
+
color: value ? "dark" : "textSecondary"
|
|
2049
|
+
},
|
|
2050
|
+
value || placeholder
|
|
2051
|
+
), /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginLeft: 8 } }, end ?? /* @__PURE__ */ import_react16.default.createElement(
|
|
2052
|
+
import_vector_icons8.Ionicons,
|
|
2053
|
+
{
|
|
2054
|
+
name: "calendar-outline",
|
|
2055
|
+
size: 22,
|
|
2056
|
+
color: colors2.textSecondary.main
|
|
2057
|
+
}
|
|
2058
|
+
))) : /* @__PURE__ */ import_react16.default.createElement(
|
|
1905
2059
|
import_react_native16.TextInput,
|
|
1906
2060
|
{
|
|
1907
2061
|
ref,
|