@hoddy-ui/core 1.1.0 → 1.1.1

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.
@@ -146,7 +146,8 @@ function colors(theme) {
146
146
 
147
147
  // ../src/config/KeyManager.ts
148
148
  var config = {
149
- GOOGLE_MAP_API_KEY: ""
149
+ GOOGLE_MAP_API_KEY: "",
150
+ EDGE_TO_EDGE: false
150
151
  };
151
152
  function setConfig(key) {
152
153
  config = key;
@@ -160,7 +161,8 @@ function initialize(config2) {
160
161
  try {
161
162
  setConfig({
162
163
  GOOGLE_MAP_API_KEY: config2.googleMapApiKey,
163
- DEFAULT_FONT_FAMILY: config2.fontFamily
164
+ DEFAULT_FONT_FAMILY: config2.fontFamily,
165
+ EDGE_TO_EDGE: config2.edgeToEdge ?? false
164
166
  });
165
167
  if (config2.colors)
166
168
  setExtraColors(config2.colors);
@@ -210,7 +212,6 @@ var Typography = forwardRef(
210
212
  variant = "body1",
211
213
  align = "left",
212
214
  gutterBottom = 0,
213
- numberOfLines,
214
215
  adjustsFontSizeToFit,
215
216
  fontWeight = 400,
216
217
  fontFamily,
@@ -246,7 +247,6 @@ var Typography = forwardRef(
246
247
  Text,
247
248
  {
248
249
  ref,
249
- numberOfLines,
250
250
  adjustsFontSizeToFit,
251
251
  style: [styles2.text, style],
252
252
  ...props
@@ -338,9 +338,10 @@ var ConfigureSystemUI = () => {
338
338
  const theme = useTheme();
339
339
  const colors2 = useColors();
340
340
  useEffect2(() => {
341
+ const config2 = getConfig();
341
342
  if (colors2) {
342
343
  SystemUI.setBackgroundColorAsync(colors2.white[1]);
343
- if (Platform.OS === "android") {
344
+ if (Platform.OS === "android" && !config2.EDGE_TO_EDGE) {
344
345
  NavigationBar.setBackgroundColorAsync(colors2.white[1]);
345
346
  if (theme === "dark") {
346
347
  NavigationBar.setButtonStyleAsync("light");
@@ -876,15 +877,18 @@ var Popup = ({
876
877
  ...style
877
878
  },
878
879
  content: {
879
- paddingHorizontal: bare ? void 0 : "10@ms"
880
+ paddingHorizontal: bare ? void 0 : "15@ms"
880
881
  // flex: 1,
881
882
  },
882
883
  title: {
883
884
  flexDirection: "row",
884
885
  alignItems: "center",
885
- paddingVertical: "5@ms",
886
- paddingHorizontal: "10@ms",
887
- marginBottom: "10@ms"
886
+ justifyContent: "center",
887
+ height: "50@ms"
888
+ },
889
+ titleIcon: {
890
+ position: "absolute",
891
+ left: "15@ms"
888
892
  },
889
893
  backdrop: {
890
894
  position: "absolute",
@@ -943,14 +947,14 @@ var Popup = ({
943
947
  keyboardVerticalOffset,
944
948
  behavior: Platform5.OS === "ios" ? "position" : "padding"
945
949
  },
946
- /* @__PURE__ */ React11.createElement(View5, { style: styles2.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles2.title }, /* @__PURE__ */ React11.createElement(
950
+ /* @__PURE__ */ React11.createElement(View5, { style: styles2.container }, !bare && /* @__PURE__ */ React11.createElement(View5, { style: styles2.title }, /* @__PURE__ */ React11.createElement(View5, { style: styles2.titleIcon }, /* @__PURE__ */ React11.createElement(
947
951
  IconButton,
948
952
  {
949
953
  size: 20,
950
954
  icon: "close",
951
955
  onPress: closeAction
952
956
  }
953
- ), /* @__PURE__ */ React11.createElement(View5, { style: { flex: 1 } }, /* @__PURE__ */ React11.createElement(Typography_default, { color: "textSecondary", align: "center" }, title))), /* @__PURE__ */ React11.createElement(View5, { style: styles2.content }, children))
957
+ )), /* @__PURE__ */ React11.createElement(Typography_default, { align: "center", fontWeight: 500 }, title)), /* @__PURE__ */ React11.createElement(View5, { style: styles2.content }, children))
954
958
  )))
955
959
  ))
956
960
  ));
@@ -1535,191 +1539,198 @@ var TextField = ({
1535
1539
  }
1536
1540
  ));
1537
1541
  };
1538
- var TextField2 = ({
1539
- label,
1540
- keyboardType,
1541
- color = "primary",
1542
- value,
1543
- type,
1544
- helperText,
1545
- onChangeText,
1546
- onSubmitEditing = () => {
1547
- },
1548
- onFocus = () => {
1549
- },
1550
- onBlur = () => {
1551
- },
1552
- error,
1553
- start,
1554
- rounded,
1555
- disabled = false,
1556
- style = {},
1557
- inputStyles = {},
1558
- gutterBottom = 8,
1559
- placeholder,
1560
- end,
1561
- options,
1562
- ...props
1563
- }) => {
1564
- const colors2 = useColors();
1565
- const [focused, _setFocused] = useState6(false);
1566
- const [showPassword, setShowPassword] = useState6(false);
1567
- const height = moderateScale3(
1568
- props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
1569
- );
1570
- const setFocused = (value2) => {
1571
- _setFocused(value2);
1572
- };
1573
- const styles2 = ScaledSheet12.create({
1574
- root: {
1575
- marginBottom: gutterBottom + "@vs",
1576
- ...style
1577
- },
1578
- container: {
1579
- height,
1580
- overflow: "hidden",
1581
- flexDirection: "row",
1582
- borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[5],
1583
- borderWidth: error ? 1 : focused ? 2 : 1,
1584
- width: "100%",
1585
- borderRadius: rounded ? 30 : 10,
1586
- alignItems: "center",
1587
- ...inputStyles
1588
- },
1589
- input: {
1590
- fontSize: "14@s",
1591
- flex: 1,
1592
- alignSelf: "stretch",
1593
- paddingLeft: moderateScale3(10),
1594
- paddingRight: moderateScale3(10),
1595
- color: colors2.dark.main,
1596
- zIndex: 10
1597
- // backgroundColor: "#284",
1598
- },
1599
- inputText: {
1600
- fontSize: "14@ms",
1601
- color: colors2.dark.main,
1602
- paddingLeft: moderateScale3(10)
1603
- },
1604
- placeholder: {
1605
- fontSize: "14@ms",
1606
- color: colors2.textSecondary.main,
1607
- paddingLeft: moderateScale3(10)
1608
- },
1609
- label: {},
1610
- helperText: {
1611
- paddingHorizontal: "15@s",
1612
- color: focused ? colors2[color].dark : "#fffa",
1613
- paddingTop: "4@ms"
1542
+ var TextField2 = React15.forwardRef(
1543
+ ({
1544
+ label,
1545
+ keyboardType,
1546
+ color = "primary",
1547
+ value,
1548
+ type,
1549
+ helperText,
1550
+ onChangeText,
1551
+ onSubmitEditing = () => {
1614
1552
  },
1615
- error: {
1616
- paddingLeft: 10,
1617
- paddingRight: 10,
1618
- paddingTop: 5,
1619
- flexDirection: "row",
1620
- alignItems: "center"
1553
+ onFocus = () => {
1621
1554
  },
1622
- errorText: {
1623
- fontSize: 12,
1624
- marginLeft: 10
1625
- }
1626
- });
1627
- const formProps = type === "email" ? {
1628
- textContentType: "emailAddress",
1629
- keyboardType: "email-address",
1630
- autoCapitalize: "none",
1631
- autoCompleteType: "email"
1632
- } : type === "number" ? {
1633
- keyboardType: "numeric"
1634
- } : type === "tel" ? {
1635
- textContentType: "telephoneNumber",
1636
- keyboardType: "phone-pad"
1637
- } : type === "search" ? {
1638
- keyboardType: "web-search",
1639
- returnKeyType: "search",
1640
- autoCapitalize: "none"
1641
- } : type === "password" ? {
1642
- secureTextEntry: !showPassword,
1643
- autoCompleteType: "password",
1644
- autoCapitalize: "none",
1645
- textContentType: "password"
1646
- } : {};
1647
- return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, label && /* @__PURE__ */ React15.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ React15.createElement(
1648
- TouchableOpacity7,
1649
- {
1650
- onPress: () => setFocused(true),
1651
- style: styles2.container
1555
+ onBlur = () => {
1652
1556
  },
1557
+ error,
1653
1558
  start,
1654
- options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
1655
- Ionicons3,
1656
- {
1657
- name: "chevron-down",
1658
- size: 24,
1659
- style: { marginLeft: "auto", marginRight: 15 },
1660
- color: colors2.dark.light
1661
- }
1662
- )) : /* @__PURE__ */ React15.createElement(
1663
- TextInput2,
1664
- {
1665
- onFocus: () => {
1666
- onFocus();
1667
- setFocused(true);
1668
- },
1669
- onBlur: () => {
1670
- onBlur();
1671
- setFocused(false);
1672
- },
1673
- value,
1674
- onChangeText,
1675
- key: showPassword ? "show" : "hide",
1676
- keyboardType,
1677
- placeholderTextColor: colors2.textSecondary.main,
1678
- editable: !disabled,
1679
- placeholder,
1680
- selectTextOnFocus: !disabled,
1681
- onSubmitEditing,
1682
- ...formProps,
1683
- ...props,
1684
- style: styles2.input
1559
+ rounded,
1560
+ disabled = false,
1561
+ style = {},
1562
+ inputStyles = {},
1563
+ gutterBottom = 8,
1564
+ placeholder,
1565
+ end,
1566
+ options,
1567
+ multiline,
1568
+ ...props
1569
+ }, ref) => {
1570
+ const colors2 = useColors();
1571
+ const [focused, _setFocused] = useState6(false);
1572
+ const [showPassword, setShowPassword] = useState6(false);
1573
+ const height = moderateScale3(
1574
+ multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
1575
+ );
1576
+ const setFocused = (value2) => {
1577
+ _setFocused(value2);
1578
+ };
1579
+ const styles2 = ScaledSheet12.create({
1580
+ root: {
1581
+ marginBottom: gutterBottom + "@vs",
1582
+ ...style
1583
+ },
1584
+ container: {
1585
+ height,
1586
+ overflow: "hidden",
1587
+ flexDirection: "row",
1588
+ borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[4],
1589
+ borderWidth: error ? 1 : focused ? 2 : 1,
1590
+ width: "100%",
1591
+ borderRadius: rounded ? 30 : 10,
1592
+ alignItems: multiline ? "flex-start" : "center",
1593
+ paddingVertical: multiline ? 10 : 0,
1594
+ ...inputStyles
1595
+ },
1596
+ input: {
1597
+ fontSize: "14@s",
1598
+ flex: 1,
1599
+ alignSelf: "stretch",
1600
+ paddingLeft: moderateScale3(10),
1601
+ paddingRight: moderateScale3(10),
1602
+ color: colors2.dark.main,
1603
+ zIndex: 10
1604
+ // backgroundColor: "#284",
1605
+ },
1606
+ inputText: {
1607
+ fontSize: "14@ms",
1608
+ color: colors2.dark.main,
1609
+ paddingLeft: moderateScale3(10)
1610
+ },
1611
+ placeholder: {
1612
+ fontSize: "14@ms",
1613
+ color: colors2.textSecondary.light,
1614
+ paddingLeft: moderateScale3(10)
1615
+ },
1616
+ label: {},
1617
+ helperText: {
1618
+ paddingHorizontal: "15@s",
1619
+ color: focused ? colors2[color].dark : "#fffa",
1620
+ paddingTop: "4@ms"
1621
+ },
1622
+ error: {
1623
+ paddingLeft: 10,
1624
+ paddingRight: 10,
1625
+ paddingTop: 5,
1626
+ flexDirection: "row",
1627
+ alignItems: "center"
1628
+ },
1629
+ errorText: {
1630
+ fontSize: 12,
1631
+ marginLeft: 10
1685
1632
  }
1686
- ),
1687
- end ? /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ React15.createElement(
1633
+ });
1634
+ const formProps = type === "email" ? {
1635
+ textContentType: "emailAddress",
1636
+ keyboardType: "email-address",
1637
+ autoCapitalize: "none",
1638
+ autoCompleteType: "email"
1639
+ } : type === "number" ? {
1640
+ keyboardType: "numeric"
1641
+ } : type === "tel" ? {
1642
+ textContentType: "telephoneNumber",
1643
+ keyboardType: "phone-pad"
1644
+ } : type === "search" ? {
1645
+ keyboardType: "web-search",
1646
+ returnKeyType: "search",
1647
+ autoCapitalize: "none"
1648
+ } : type === "password" ? {
1649
+ secureTextEntry: !showPassword,
1650
+ autoCompleteType: "password",
1651
+ autoCapitalize: "none",
1652
+ textContentType: "password"
1653
+ } : {};
1654
+ return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(View10, { style: styles2.root }, label && /* @__PURE__ */ React15.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ React15.createElement(
1688
1655
  TouchableOpacity7,
1689
1656
  {
1690
- style: { marginRight: 20 },
1691
- onPress: () => setShowPassword(!showPassword)
1657
+ onPress: () => setFocused(true),
1658
+ style: styles2.container
1692
1659
  },
1693
- /* @__PURE__ */ React15.createElement(
1660
+ /* @__PURE__ */ React15.createElement(View10, { style: { marginTop: multiline ? 5 : 0 } }, start),
1661
+ options ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, value ? /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ React15.createElement(
1694
1662
  Ionicons3,
1695
1663
  {
1696
- name: showPassword ? "eye-outline" : "eye-off-outline",
1664
+ name: "chevron-down",
1697
1665
  size: 24,
1698
- color: colors2.textSecondary.main
1666
+ style: { marginLeft: "auto", marginRight: 15 },
1667
+ color: colors2.dark.light
1699
1668
  }
1669
+ )) : /* @__PURE__ */ React15.createElement(
1670
+ TextInput2,
1671
+ {
1672
+ ref,
1673
+ onFocus: () => {
1674
+ onFocus();
1675
+ setFocused(true);
1676
+ },
1677
+ onBlur: () => {
1678
+ onBlur();
1679
+ setFocused(false);
1680
+ },
1681
+ value,
1682
+ onChangeText,
1683
+ key: showPassword ? "show" : "hide",
1684
+ keyboardType,
1685
+ placeholderTextColor: colors2.textSecondary.light,
1686
+ editable: !disabled,
1687
+ placeholder,
1688
+ selectTextOnFocus: !disabled,
1689
+ onSubmitEditing,
1690
+ multiline,
1691
+ textAlignVertical: multiline ? "top" : "center",
1692
+ ...formProps,
1693
+ ...props,
1694
+ style: styles2.input
1695
+ }
1696
+ ),
1697
+ end ? /* @__PURE__ */ React15.createElement(View10, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ React15.createElement(
1698
+ TouchableOpacity7,
1699
+ {
1700
+ style: { marginRight: 20 },
1701
+ onPress: () => setShowPassword(!showPassword)
1702
+ },
1703
+ /* @__PURE__ */ React15.createElement(
1704
+ Ionicons3,
1705
+ {
1706
+ name: showPassword ? "eye-outline" : "eye-off-outline",
1707
+ size: 24,
1708
+ color: colors2.textSecondary.main
1709
+ }
1710
+ )
1700
1711
  )
1701
- )
1702
- ), helperText && /* @__PURE__ */ React15.createElement(
1703
- Typography_default,
1704
- {
1705
- color: "textSecondary",
1706
- style: styles2.helperText,
1707
- variant: "caption"
1708
- },
1709
- helperText
1710
- ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
1711
- SelectMenu_default,
1712
- {
1713
- options,
1714
- value,
1715
- open: focused,
1716
- onClose: () => setFocused(false),
1717
- label,
1718
- helperText,
1719
- onChange: onChangeText
1720
- }
1721
- ));
1722
- };
1712
+ ), helperText && /* @__PURE__ */ React15.createElement(
1713
+ Typography_default,
1714
+ {
1715
+ color: "textSecondary",
1716
+ style: styles2.helperText,
1717
+ variant: "caption"
1718
+ },
1719
+ helperText
1720
+ ), error && /* @__PURE__ */ React15.createElement(View10, { style: styles2.error }, /* @__PURE__ */ React15.createElement(MaterialIcons5, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ React15.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ React15.createElement(
1721
+ SelectMenu_default,
1722
+ {
1723
+ options,
1724
+ value,
1725
+ open: focused,
1726
+ onClose: () => setFocused(false),
1727
+ label,
1728
+ helperText,
1729
+ onChange: onChangeText
1730
+ }
1731
+ ));
1732
+ }
1733
+ );
1723
1734
  var TextField_default = TextField;
1724
1735
 
1725
1736
  // ../src/Components/Locator.tsx
@@ -1747,6 +1758,27 @@ var getPredictionsFromCoords = async (coords) => {
1747
1758
  }
1748
1759
  return p;
1749
1760
  };
1761
+ var getPredictionsFromQuery = async (query, country) => {
1762
+ const { GOOGLE_MAP_API_KEY } = getConfig();
1763
+ const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
1764
+ const res = await (await fetch(endpoint)).json();
1765
+ const p = [];
1766
+ for (let key in res.predictions) {
1767
+ const { description, place_id } = res.predictions[key];
1768
+ p.push({
1769
+ description,
1770
+ id: place_id
1771
+ });
1772
+ }
1773
+ return p;
1774
+ };
1775
+ var getLocationFromPlaceId = async (place_id) => {
1776
+ const { GOOGLE_MAP_API_KEY } = getConfig();
1777
+ const res = await (await fetch(
1778
+ `https://maps.googleapis.com/maps/api/place/details/json?place_id=${place_id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
1779
+ )).json();
1780
+ return res.result;
1781
+ };
1750
1782
  var Locator = ({
1751
1783
  variant = "contained",
1752
1784
  onLocationSelected,
@@ -1786,17 +1818,8 @@ var Locator = ({
1786
1818
  }
1787
1819
  });
1788
1820
  const search = async (query) => {
1789
- const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
1790
- const res = await (await fetch(endpoint)).json();
1791
- const p = [];
1792
- for (let key in res.predictions) {
1793
- const { description, place_id } = res.predictions[key];
1794
- p.push({
1795
- description,
1796
- id: place_id
1797
- });
1798
- }
1799
- setPrediction(p);
1821
+ const predictions = await getPredictionsFromQuery(query, country);
1822
+ setPrediction(predictions);
1800
1823
  };
1801
1824
  const locateMe = () => {
1802
1825
  const getLoc = async () => {
@@ -1830,16 +1853,14 @@ var Locator = ({
1830
1853
  };
1831
1854
  const locationPressed = async (loc) => {
1832
1855
  setValue(loc.description);
1833
- const res = await (await fetch(
1834
- `https://maps.googleapis.com/maps/api/place/details/json?place_id=${loc.id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
1835
- )).json();
1856
+ const res = await getLocationFromPlaceId(loc.id);
1836
1857
  onLocationSelected(
1837
1858
  {
1838
- latitude: res.result?.geometry.location.lat,
1839
- longitude: res.result?.geometry.location.lng,
1859
+ latitude: res.geometry.location.lat,
1860
+ longitude: res.geometry.location.lng,
1840
1861
  description: loc.description
1841
1862
  },
1842
- res.result?.formatted_address
1863
+ res?.formatted_address
1843
1864
  );
1844
1865
  setChanged(false);
1845
1866
  setPrediction([]);
@@ -2107,7 +2128,9 @@ export {
2107
2128
  UIThemeContext,
2108
2129
  UIThemeProvider,
2109
2130
  next_default as default,
2131
+ getLocationFromPlaceId,
2110
2132
  getPredictionsFromCoords,
2133
+ getPredictionsFromQuery,
2111
2134
  showFlashMessage,
2112
2135
  useColors,
2113
2136
  useNavScreenOptions,