@tecsinapse/react-core 3.4.0 → 3.4.1-beta.0
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/LICENSE.md +1 -1
- package/README.md +9 -7
- package/dist/cjs/components/atoms/Input/InputContainer/InputContainer.js +2 -4
- package/dist/cjs/components/atoms/Input/InputMaskElement/InputMaskElement.js +1 -2
- package/dist/cjs/components/atoms/Input/hooks/useNumberMask.js +1 -2
- package/dist/cjs/components/atoms/Input/hooks/useStringMask.js +5 -10
- package/dist/cjs/components/atoms/Switch/animation.js +1 -2
- package/dist/cjs/components/molecules/Calendar/Calendar.js +1 -2
- package/dist/cjs/components/molecules/Calendar/components/MonthWeek.js +3 -6
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +2 -4
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js +1 -2
- package/dist/cjs/components/molecules/Grid/functions.js +2 -4
- package/dist/cjs/hooks/useDebouncedState.js +1 -2
- package/dist/cjs/styles/definitions.js +1 -2
- package/dist/cjs/utils/ResponsiveFontSize.js +2 -4
- package/dist/cjs/utils/lightenDarkenColor.js +6 -12
- package/dist/esm/components/atoms/Input/InputContainer/InputContainer.js +2 -4
- package/dist/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js +1 -2
- package/dist/esm/components/atoms/Input/hooks/useNumberMask.js +1 -2
- package/dist/esm/components/atoms/Input/hooks/useStringMask.js +5 -10
- package/dist/esm/components/atoms/Switch/animation.js +1 -2
- package/dist/esm/components/molecules/Calendar/Calendar.js +1 -2
- package/dist/esm/components/molecules/Calendar/components/MonthWeek.js +3 -6
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +2 -4
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js +1 -2
- package/dist/esm/components/molecules/Grid/functions.js +2 -4
- package/dist/esm/hooks/useDebouncedState.js +1 -2
- package/dist/esm/styles/definitions.js +1 -2
- package/dist/esm/utils/ResponsiveFontSize.js +2 -4
- package/dist/esm/utils/lightenDarkenColor.js +6 -12
- package/dist/types/components/atoms/shared/PaperAndCard.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/formatWithMask.d.ts +1 -2
- package/package.json +5 -5
package/LICENSE.md
CHANGED
package/README.md
CHANGED
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
[](https://github.com/tecsinapse/design-system/) [](./LICENSE.md) [](CODE_OF_CONDUCT.md)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System.
|
|
7
|
+
[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System.
|
|
9
8
|
Our primary goal is to create a system that can be used to build a wide variety of TecSinapase websites and apps, while providing a consistent and inclusive user experience to our end users.
|
|
10
9
|
In addition, the design system and component library should be easy to use for developers and designers.
|
|
11
10
|
|
|
@@ -24,11 +23,12 @@ Here are a few helpful links for getting started:
|
|
|
24
23
|
## Packages
|
|
25
24
|
|
|
26
25
|
| Package | Content | Version |
|
|
27
|
-
|
|
26
|
+
| --------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
28
27
|
| **[@tecsinapse/react-core](./packages/react-core)** | the core hybrid React component library | [](https://badge.fury.io/js/%40tecsinapse%2Freact-core) |
|
|
29
28
|
| **[@tecsinapse/react-web-kit](./packages/react-web-kit)** | the React component library focused on web | [](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit) |
|
|
30
29
|
| **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
|
|
31
30
|
| **[@tecsinapse/react-charts](./packages/react-charts)** | Charts for React based on SVG | [](https://badge.fury.io/js/%40tecsinapse%2Freact-charts) |
|
|
31
|
+
| **[@tecsinapse/cortex-core](./packages/cortex-core)** | The core library for tailwindcss based design | [](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core) |
|
|
32
32
|
|
|
33
33
|
## Code of conduct
|
|
34
34
|
|
|
@@ -41,27 +41,29 @@ If you feel another member of the community violated our code or you are experie
|
|
|
41
41
|
At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
|
|
42
42
|
|
|
43
43
|
3 terminal tabs should open:
|
|
44
|
+
|
|
44
45
|
- In one run the JS code watch:
|
|
46
|
+
|
|
45
47
|
```
|
|
46
48
|
yarn build:watch
|
|
47
49
|
```
|
|
50
|
+
|
|
48
51
|
- In another run the watch of the TS code watch
|
|
52
|
+
|
|
49
53
|
```
|
|
50
54
|
yarn build:declarations:watch
|
|
51
55
|
```
|
|
56
|
+
|
|
52
57
|
- On another run yalc push (this script updates linked local projects)
|
|
58
|
+
|
|
53
59
|
```
|
|
54
60
|
yarn yalc:push
|
|
55
61
|
```
|
|
56
62
|
|
|
57
63
|
With that, all changes will be in yalc locally.
|
|
58
64
|
|
|
59
|
-
To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
|
|
60
|
-
|
|
61
|
-
|
|
62
65
|
### Maintainers
|
|
63
66
|
|
|
64
|
-
- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
|
|
65
67
|
- [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
|
|
66
68
|
- [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
|
|
67
69
|
- [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)
|
|
@@ -23,10 +23,8 @@ const InputContainer = ({
|
|
|
23
23
|
...rest
|
|
24
24
|
}) => {
|
|
25
25
|
let _defaultLabelColor = labelColorVariant;
|
|
26
|
-
if (variant === "error")
|
|
27
|
-
|
|
28
|
-
if (variant === "success")
|
|
29
|
-
_defaultLabelColor = "success";
|
|
26
|
+
if (variant === "error") _defaultLabelColor = "error";
|
|
27
|
+
if (variant === "success") _defaultLabelColor = "success";
|
|
30
28
|
const _labelColorVariant = disabled ? "secondary" : _defaultLabelColor;
|
|
31
29
|
const _labelColorTone = disabled ? "light" : labelColorTone;
|
|
32
30
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -22,8 +22,7 @@ const getInternalNumberAndMask = (value, options) => {
|
|
|
22
22
|
const currentPrecision = decimalIndex + precision;
|
|
23
23
|
if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
|
|
24
24
|
const zeros = stringValue.length + 1 - currentPrecision;
|
|
25
|
-
for (let i = 0; i < zeros; i++)
|
|
26
|
-
stringValue = stringValue + `0`;
|
|
25
|
+
for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
|
|
27
26
|
}
|
|
28
27
|
internalNumber = Number(stringValue);
|
|
29
28
|
} else {
|
|
@@ -43,22 +43,17 @@ const getMask = (mask, newValue) => {
|
|
|
43
43
|
}
|
|
44
44
|
maskArray.forEach((exp) => {
|
|
45
45
|
if (typeof exp !== "string") {
|
|
46
|
-
if (Array.isArray(exp))
|
|
47
|
-
|
|
48
|
-
else
|
|
49
|
-
regexArray.push(exp);
|
|
46
|
+
if (Array.isArray(exp)) regexArray.push(exp);
|
|
47
|
+
else regexArray.push(exp);
|
|
50
48
|
} else {
|
|
51
49
|
for (let i = 0; i < exp.length; i++) {
|
|
52
50
|
if (exp[i] === "\\") {
|
|
53
51
|
regexArray.push(exp[i + 1]);
|
|
54
52
|
i++;
|
|
55
53
|
} else {
|
|
56
|
-
if (exp[i] === "9")
|
|
57
|
-
|
|
58
|
-
else
|
|
59
|
-
regexArray.push(/[a-zA-Z]/);
|
|
60
|
-
else
|
|
61
|
-
regexArray.push(exp[i]);
|
|
54
|
+
if (exp[i] === "9") regexArray.push(/\d/);
|
|
55
|
+
else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
|
|
56
|
+
else regexArray.push(exp[i]);
|
|
62
57
|
}
|
|
63
58
|
}
|
|
64
59
|
}
|
|
@@ -4,8 +4,7 @@ var reactNative = require('react-native');
|
|
|
4
4
|
|
|
5
5
|
const ANIMATION_SPEED = 140;
|
|
6
6
|
const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
|
|
7
|
-
if (translate <= 0)
|
|
8
|
-
return;
|
|
7
|
+
if (translate <= 0) return;
|
|
9
8
|
if (active) {
|
|
10
9
|
reactNative.Animated.timing(transitionValue, {
|
|
11
10
|
toValue: translate,
|
|
@@ -78,8 +78,7 @@ function Calendar({
|
|
|
78
78
|
() => [...Array(6).keys()].map(
|
|
79
79
|
(week) => [...Array(7).keys()].map((weekDayIndex) => {
|
|
80
80
|
let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
|
|
81
|
-
if (weeksInMonth == 5 && startingWeekDay == 0)
|
|
82
|
-
addDays -= 7;
|
|
81
|
+
if (weeksInMonth == 5 && startingWeekDay == 0) addDays -= 7;
|
|
83
82
|
return dateFns.add(referenceDate, {
|
|
84
83
|
days: addDays
|
|
85
84
|
});
|
|
@@ -14,12 +14,10 @@ const MonthWeek = ({
|
|
|
14
14
|
}) => {
|
|
15
15
|
const checkIfIsBetween = React.useCallback(
|
|
16
16
|
(date, _value) => {
|
|
17
|
-
if (type !== "range" || !_value)
|
|
18
|
-
return false;
|
|
17
|
+
if (type !== "range" || !_value) return false;
|
|
19
18
|
else {
|
|
20
19
|
const { lowest, highest } = _value;
|
|
21
|
-
if (!highest)
|
|
22
|
-
return false;
|
|
20
|
+
if (!highest) return false;
|
|
23
21
|
return dateFns.compareAsc(lowest, date) <= 0 && dateFns.compareAsc(highest, date) >= 0;
|
|
24
22
|
}
|
|
25
23
|
},
|
|
@@ -27,8 +25,7 @@ const MonthWeek = ({
|
|
|
27
25
|
);
|
|
28
26
|
const checkIfIsSelected = React.useCallback(
|
|
29
27
|
(date, _value) => {
|
|
30
|
-
if (!_value)
|
|
31
|
-
return false;
|
|
28
|
+
if (!_value) return false;
|
|
32
29
|
else if (type === "range" && _value) {
|
|
33
30
|
const { lowest, highest } = _value;
|
|
34
31
|
return dateFns.isSameDay(lowest, date) || (highest ? dateFns.isSameDay(highest, date) : false);
|
|
@@ -68,8 +68,7 @@ function DatePicker({
|
|
|
68
68
|
handleFocus();
|
|
69
69
|
}, [handleFocus, requestShowCalendar]);
|
|
70
70
|
const getDisplayValue = () => {
|
|
71
|
-
if (!value)
|
|
72
|
-
return placeholder;
|
|
71
|
+
if (!value) return placeholder;
|
|
73
72
|
if (type === "day") {
|
|
74
73
|
return dateFns.format(value, format, { locale });
|
|
75
74
|
} else {
|
|
@@ -78,8 +77,7 @@ function DatePicker({
|
|
|
78
77
|
return `${dateFns.format(lowest, format, {
|
|
79
78
|
locale
|
|
80
79
|
})} - ${dateFns.format(highest, format, { locale })}`;
|
|
81
|
-
else
|
|
82
|
-
return placeholder;
|
|
80
|
+
else return placeholder;
|
|
83
81
|
}
|
|
84
82
|
};
|
|
85
83
|
const StyledText = styled.getStyledTextComponent(TextComponent);
|
|
@@ -30,8 +30,7 @@ function _interopNamespaceDefault(e) {
|
|
|
30
30
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
31
31
|
|
|
32
32
|
function getThresholdUnit(mode, threshold) {
|
|
33
|
-
if (!threshold)
|
|
34
|
-
return {};
|
|
33
|
+
if (!threshold) return {};
|
|
35
34
|
if (mode === "month") {
|
|
36
35
|
return { months: threshold };
|
|
37
36
|
} else if (["date", "datetime"].includes(mode)) {
|
|
@@ -16,10 +16,8 @@ const getGridItemPadding = (pos, _spacing, themeSpacing) => {
|
|
|
16
16
|
return extractNumbersFromString.extractNumbersFromString(themeSpacing[_spacing]);
|
|
17
17
|
else if (typeof _spacing === "object" && _spacing[pos]) {
|
|
18
18
|
return extractNumbersFromString.extractNumbersFromString(themeSpacing[_spacing[pos] ?? "0"]);
|
|
19
|
-
} else
|
|
20
|
-
|
|
21
|
-
} else
|
|
22
|
-
return void 0;
|
|
19
|
+
} else return void 0;
|
|
20
|
+
} else return void 0;
|
|
23
21
|
};
|
|
24
22
|
const getGridItemColumSpan = (columns, span) => 100 / (columns / span);
|
|
25
23
|
|
|
@@ -6,8 +6,7 @@ function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
|
|
|
6
6
|
const timeoutId = React.useRef();
|
|
7
7
|
const [state, setState] = React.useState(initialState);
|
|
8
8
|
React.useEffect(() => {
|
|
9
|
-
if (timeoutId.current)
|
|
10
|
-
clearTimeout(timeoutId.current);
|
|
9
|
+
if (timeoutId.current) clearTimeout(timeoutId.current);
|
|
11
10
|
if (timeoutCallback)
|
|
12
11
|
timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
|
|
13
12
|
}, [state]);
|
|
@@ -42,8 +42,7 @@ const statusColor = {
|
|
|
42
42
|
};
|
|
43
43
|
const hex2rgba = (hex, alpha = 1) => {
|
|
44
44
|
const rgb = ((hex ?? "").match(/\w\w/g) ?? []).map((x) => parseInt(x, 16));
|
|
45
|
-
if (!rgb || (rgb ?? []).length === 0)
|
|
46
|
-
return "";
|
|
45
|
+
if (!rgb || (rgb ?? []).length === 0) return "";
|
|
47
46
|
const [r, g, b] = rgb;
|
|
48
47
|
return `rgba(${r},${g},${b},${alpha})`;
|
|
49
48
|
};
|
|
@@ -6,8 +6,7 @@ var IPhoneXHelper = require('./IPhoneXHelper.js');
|
|
|
6
6
|
|
|
7
7
|
const STANDARD_SCREEN_HEIGHT = 680;
|
|
8
8
|
const RFPercentage = (percent) => {
|
|
9
|
-
if (reactNative.Platform.OS === "web")
|
|
10
|
-
return percent;
|
|
9
|
+
if (reactNative.Platform.OS === "web") return percent;
|
|
11
10
|
const { height, width } = reactNative.Dimensions.get("window");
|
|
12
11
|
const standardLength = width > height ? width : height;
|
|
13
12
|
const offset = width > height ? 0 : reactNative.Platform.OS === "ios" ? 78 : reactNative.StatusBar.currentHeight || 0;
|
|
@@ -16,8 +15,7 @@ const RFPercentage = (percent) => {
|
|
|
16
15
|
return Math.round(heightPercent);
|
|
17
16
|
};
|
|
18
17
|
const RFValue = (fontSize, standardScreenHeight = STANDARD_SCREEN_HEIGHT) => {
|
|
19
|
-
if (reactNative.Platform.OS === "web")
|
|
20
|
-
return fontSize;
|
|
18
|
+
if (reactNative.Platform.OS === "web") return fontSize;
|
|
21
19
|
const { height, width } = reactNative.Dimensions.get("window");
|
|
22
20
|
const standardLength = width > height ? width : height;
|
|
23
21
|
const offset = width > height ? 0 : reactNative.Platform.OS === "ios" ? 78 : reactNative.StatusBar.currentHeight || 0;
|
|
@@ -8,20 +8,14 @@ const lightenDarkenColor = (color, variation) => {
|
|
|
8
8
|
}
|
|
9
9
|
const num = parseInt(color, 16);
|
|
10
10
|
let r = (num >> 16) + variation;
|
|
11
|
-
if (r > 255)
|
|
12
|
-
|
|
13
|
-
else if (r < 0)
|
|
14
|
-
r = 0;
|
|
11
|
+
if (r > 255) r = 255;
|
|
12
|
+
else if (r < 0) r = 0;
|
|
15
13
|
let b = (num >> 8 & 255) + variation;
|
|
16
|
-
if (b > 255)
|
|
17
|
-
|
|
18
|
-
else if (b < 0)
|
|
19
|
-
b = 0;
|
|
14
|
+
if (b > 255) b = 255;
|
|
15
|
+
else if (b < 0) b = 0;
|
|
20
16
|
let g = (num & 255) + variation;
|
|
21
|
-
if (g > 255)
|
|
22
|
-
|
|
23
|
-
else if (g < 0)
|
|
24
|
-
g = 0;
|
|
17
|
+
if (g > 255) g = 255;
|
|
18
|
+
else if (g < 0) g = 0;
|
|
25
19
|
return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
|
|
26
20
|
};
|
|
27
21
|
|
|
@@ -21,10 +21,8 @@ const InputContainer = ({
|
|
|
21
21
|
...rest
|
|
22
22
|
}) => {
|
|
23
23
|
let _defaultLabelColor = labelColorVariant;
|
|
24
|
-
if (variant === "error")
|
|
25
|
-
|
|
26
|
-
if (variant === "success")
|
|
27
|
-
_defaultLabelColor = "success";
|
|
24
|
+
if (variant === "error") _defaultLabelColor = "error";
|
|
25
|
+
if (variant === "success") _defaultLabelColor = "success";
|
|
28
26
|
const _labelColorVariant = disabled ? "secondary" : _defaultLabelColor;
|
|
29
27
|
const _labelColorTone = disabled ? "light" : labelColorTone;
|
|
30
28
|
return /* @__PURE__ */ React__default.createElement(
|
|
@@ -20,8 +20,7 @@ const getInternalNumberAndMask = (value, options) => {
|
|
|
20
20
|
const currentPrecision = decimalIndex + precision;
|
|
21
21
|
if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
|
|
22
22
|
const zeros = stringValue.length + 1 - currentPrecision;
|
|
23
|
-
for (let i = 0; i < zeros; i++)
|
|
24
|
-
stringValue = stringValue + `0`;
|
|
23
|
+
for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
|
|
25
24
|
}
|
|
26
25
|
internalNumber = Number(stringValue);
|
|
27
26
|
} else {
|
|
@@ -41,22 +41,17 @@ const getMask = (mask, newValue) => {
|
|
|
41
41
|
}
|
|
42
42
|
maskArray.forEach((exp) => {
|
|
43
43
|
if (typeof exp !== "string") {
|
|
44
|
-
if (Array.isArray(exp))
|
|
45
|
-
|
|
46
|
-
else
|
|
47
|
-
regexArray.push(exp);
|
|
44
|
+
if (Array.isArray(exp)) regexArray.push(exp);
|
|
45
|
+
else regexArray.push(exp);
|
|
48
46
|
} else {
|
|
49
47
|
for (let i = 0; i < exp.length; i++) {
|
|
50
48
|
if (exp[i] === "\\") {
|
|
51
49
|
regexArray.push(exp[i + 1]);
|
|
52
50
|
i++;
|
|
53
51
|
} else {
|
|
54
|
-
if (exp[i] === "9")
|
|
55
|
-
|
|
56
|
-
else
|
|
57
|
-
regexArray.push(/[a-zA-Z]/);
|
|
58
|
-
else
|
|
59
|
-
regexArray.push(exp[i]);
|
|
52
|
+
if (exp[i] === "9") regexArray.push(/\d/);
|
|
53
|
+
else if (exp[i] === "a") regexArray.push(/[a-zA-Z]/);
|
|
54
|
+
else regexArray.push(exp[i]);
|
|
60
55
|
}
|
|
61
56
|
}
|
|
62
57
|
}
|
|
@@ -2,8 +2,7 @@ import { Animated, Easing } from 'react-native';
|
|
|
2
2
|
|
|
3
3
|
const ANIMATION_SPEED = 140;
|
|
4
4
|
const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
|
|
5
|
-
if (translate <= 0)
|
|
6
|
-
return;
|
|
5
|
+
if (translate <= 0) return;
|
|
7
6
|
if (active) {
|
|
8
7
|
Animated.timing(transitionValue, {
|
|
9
8
|
toValue: translate,
|
|
@@ -58,8 +58,7 @@ function Calendar({
|
|
|
58
58
|
() => [...Array(6).keys()].map(
|
|
59
59
|
(week) => [...Array(7).keys()].map((weekDayIndex) => {
|
|
60
60
|
let addDays = 6 * week + week + weekDayIndex - startingWeekDay;
|
|
61
|
-
if (weeksInMonth == 5 && startingWeekDay == 0)
|
|
62
|
-
addDays -= 7;
|
|
61
|
+
if (weeksInMonth == 5 && startingWeekDay == 0) addDays -= 7;
|
|
63
62
|
return add(referenceDate, {
|
|
64
63
|
days: addDays
|
|
65
64
|
});
|
|
@@ -12,12 +12,10 @@ const MonthWeek = ({
|
|
|
12
12
|
}) => {
|
|
13
13
|
const checkIfIsBetween = React__default.useCallback(
|
|
14
14
|
(date, _value) => {
|
|
15
|
-
if (type !== "range" || !_value)
|
|
16
|
-
return false;
|
|
15
|
+
if (type !== "range" || !_value) return false;
|
|
17
16
|
else {
|
|
18
17
|
const { lowest, highest } = _value;
|
|
19
|
-
if (!highest)
|
|
20
|
-
return false;
|
|
18
|
+
if (!highest) return false;
|
|
21
19
|
return compareAsc(lowest, date) <= 0 && compareAsc(highest, date) >= 0;
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -25,8 +23,7 @@ const MonthWeek = ({
|
|
|
25
23
|
);
|
|
26
24
|
const checkIfIsSelected = React__default.useCallback(
|
|
27
25
|
(date, _value) => {
|
|
28
|
-
if (!_value)
|
|
29
|
-
return false;
|
|
26
|
+
if (!_value) return false;
|
|
30
27
|
else if (type === "range" && _value) {
|
|
31
28
|
const { lowest, highest } = _value;
|
|
32
29
|
return isSameDay(lowest, date) || (highest ? isSameDay(highest, date) : false);
|
|
@@ -48,8 +48,7 @@ function DatePicker({
|
|
|
48
48
|
handleFocus();
|
|
49
49
|
}, [handleFocus, requestShowCalendar]);
|
|
50
50
|
const getDisplayValue = () => {
|
|
51
|
-
if (!value)
|
|
52
|
-
return placeholder;
|
|
51
|
+
if (!value) return placeholder;
|
|
53
52
|
if (type === "day") {
|
|
54
53
|
return format(value, format$1, { locale });
|
|
55
54
|
} else {
|
|
@@ -58,8 +57,7 @@ function DatePicker({
|
|
|
58
57
|
return `${format(lowest, format$1, {
|
|
59
58
|
locale
|
|
60
59
|
})} - ${format(highest, format$1, { locale })}`;
|
|
61
|
-
else
|
|
62
|
-
return placeholder;
|
|
60
|
+
else return placeholder;
|
|
63
61
|
}
|
|
64
62
|
};
|
|
65
63
|
const StyledText = getStyledTextComponent(TextComponent);
|
|
@@ -9,8 +9,7 @@ import { Selector } from './Selector.js';
|
|
|
9
9
|
import { Root, Header, BackButton, Content, SelectorContainer } from './styled.js';
|
|
10
10
|
|
|
11
11
|
function getThresholdUnit(mode, threshold) {
|
|
12
|
-
if (!threshold)
|
|
13
|
-
return {};
|
|
12
|
+
if (!threshold) return {};
|
|
14
13
|
if (mode === "month") {
|
|
15
14
|
return { months: threshold };
|
|
16
15
|
} else if (["date", "datetime"].includes(mode)) {
|
|
@@ -14,10 +14,8 @@ const getGridItemPadding = (pos, _spacing, themeSpacing) => {
|
|
|
14
14
|
return extractNumbersFromString(themeSpacing[_spacing]);
|
|
15
15
|
else if (typeof _spacing === "object" && _spacing[pos]) {
|
|
16
16
|
return extractNumbersFromString(themeSpacing[_spacing[pos] ?? "0"]);
|
|
17
|
-
} else
|
|
18
|
-
|
|
19
|
-
} else
|
|
20
|
-
return void 0;
|
|
17
|
+
} else return void 0;
|
|
18
|
+
} else return void 0;
|
|
21
19
|
};
|
|
22
20
|
const getGridItemColumSpan = (columns, span) => 100 / (columns / span);
|
|
23
21
|
|
|
@@ -4,8 +4,7 @@ function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
|
|
|
4
4
|
const timeoutId = useRef();
|
|
5
5
|
const [state, setState] = useState(initialState);
|
|
6
6
|
useEffect(() => {
|
|
7
|
-
if (timeoutId.current)
|
|
8
|
-
clearTimeout(timeoutId.current);
|
|
7
|
+
if (timeoutId.current) clearTimeout(timeoutId.current);
|
|
9
8
|
if (timeoutCallback)
|
|
10
9
|
timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
|
|
11
10
|
}, [state]);
|
|
@@ -40,8 +40,7 @@ const statusColor = {
|
|
|
40
40
|
};
|
|
41
41
|
const hex2rgba = (hex, alpha = 1) => {
|
|
42
42
|
const rgb = ((hex ?? "").match(/\w\w/g) ?? []).map((x) => parseInt(x, 16));
|
|
43
|
-
if (!rgb || (rgb ?? []).length === 0)
|
|
44
|
-
return "";
|
|
43
|
+
if (!rgb || (rgb ?? []).length === 0) return "";
|
|
45
44
|
const [r, g, b] = rgb;
|
|
46
45
|
return `rgba(${r},${g},${b},${alpha})`;
|
|
47
46
|
};
|
|
@@ -4,8 +4,7 @@ import { isIphoneX } from './IPhoneXHelper.js';
|
|
|
4
4
|
|
|
5
5
|
const STANDARD_SCREEN_HEIGHT = 680;
|
|
6
6
|
const RFPercentage = (percent) => {
|
|
7
|
-
if (Platform.OS === "web")
|
|
8
|
-
return percent;
|
|
7
|
+
if (Platform.OS === "web") return percent;
|
|
9
8
|
const { height, width } = Dimensions.get("window");
|
|
10
9
|
const standardLength = width > height ? width : height;
|
|
11
10
|
const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0;
|
|
@@ -14,8 +13,7 @@ const RFPercentage = (percent) => {
|
|
|
14
13
|
return Math.round(heightPercent);
|
|
15
14
|
};
|
|
16
15
|
const RFValue = (fontSize, standardScreenHeight = STANDARD_SCREEN_HEIGHT) => {
|
|
17
|
-
if (Platform.OS === "web")
|
|
18
|
-
return fontSize;
|
|
16
|
+
if (Platform.OS === "web") return fontSize;
|
|
19
17
|
const { height, width } = Dimensions.get("window");
|
|
20
18
|
const standardLength = width > height ? width : height;
|
|
21
19
|
const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0;
|
|
@@ -6,20 +6,14 @@ const lightenDarkenColor = (color, variation) => {
|
|
|
6
6
|
}
|
|
7
7
|
const num = parseInt(color, 16);
|
|
8
8
|
let r = (num >> 16) + variation;
|
|
9
|
-
if (r > 255)
|
|
10
|
-
|
|
11
|
-
else if (r < 0)
|
|
12
|
-
r = 0;
|
|
9
|
+
if (r > 255) r = 255;
|
|
10
|
+
else if (r < 0) r = 0;
|
|
13
11
|
let b = (num >> 8 & 255) + variation;
|
|
14
|
-
if (b > 255)
|
|
15
|
-
|
|
16
|
-
else if (b < 0)
|
|
17
|
-
b = 0;
|
|
12
|
+
if (b > 255) b = 255;
|
|
13
|
+
else if (b < 0) b = 0;
|
|
18
14
|
let g = (num & 255) + variation;
|
|
19
|
-
if (g > 255)
|
|
20
|
-
|
|
21
|
-
else if (g < 0)
|
|
22
|
-
g = 0;
|
|
15
|
+
if (g > 255) g = 255;
|
|
16
|
+
else if (g < 0) g = 0;
|
|
23
17
|
return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
|
|
24
18
|
};
|
|
25
19
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StyleProps } from '../../../types/defaults';
|
|
2
2
|
export declare const baseStyles: ({ theme }: StyleProps) => any;
|
|
3
3
|
export declare const elevatedStyles: ({ theme, elevated, }: {
|
|
4
|
-
elevated?: boolean
|
|
5
|
-
} &
|
|
4
|
+
elevated?: boolean;
|
|
5
|
+
} & StyleProps) => any;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export type { GroupButtonOptionProps, GroupButtonProps, GroupButtonValue, } from
|
|
|
21
21
|
export { Icon } from './components/atoms/Icon';
|
|
22
22
|
export type { IconProps } from './components/atoms/Icon';
|
|
23
23
|
export { disabledInputStyles, Hint, InputContainer, InputElement, InputMaskElement, PressableInputContainer, StyledBorderKeeper, useInputFocus, useNumberMask, useStringMask, } from './components/atoms/Input';
|
|
24
|
-
export type { InputContainerProps, InputElementProps, InputMaskElementProps, InputVariantType, PressableInputContainerProps, } from './components/atoms/Input';
|
|
24
|
+
export type { InputContainerProps, InputElementProps, InputMaskElementProps, InputVariantType, PressableInputContainerProps, CurrencyOptions, } from './components/atoms/Input';
|
|
25
25
|
export { Paper } from './components/atoms/Paper';
|
|
26
26
|
export type { PaperProps } from './components/atoms/Paper';
|
|
27
27
|
export { PressableSurface } from './components/atoms/PressableSurface';
|
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import { MaskType, CurrencyOptions } from '../components/atoms/Input';
|
|
2
|
-
|
|
3
|
-
export declare const formatWithMask: (mask: MaskType[] | currency.Options | ((value: string) => MaskType[]), value: string | number) => string | number;
|
|
2
|
+
export declare const formatWithMask: (mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions, value: string | number) => string | number;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "3.4.0",
|
|
3
|
+
"description": "Core hybrid React components library",
|
|
4
|
+
"version": "3.4.1-beta.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"homepage": "https://tecsinapse.github.io/design-system/",
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"react": "
|
|
37
|
-
"react-native": "
|
|
36
|
+
"react": ">=18.0.0",
|
|
37
|
+
"react-native": ">=0.72.0",
|
|
38
38
|
"react-native-vector-icons": "^9.2.0"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "1218e25f944ce08275fdb79e411883667a0a3e45"
|
|
41
41
|
}
|