@tecsinapse/react-web-kit 2.1.1 → 2.1.2
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/README.md +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.d.ts +2 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +12 -6
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.d.ts +2 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +12 -6
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ In addition, the design system and component library should be easy to use for d
|
|
|
13
13
|
|
|
14
14
|
## Quick start
|
|
15
15
|
|
|
16
|
-
Here are a few helpful links for getting started
|
|
16
|
+
Here are a few helpful links for getting started:
|
|
17
17
|
|
|
18
18
|
- [Documentation](https://tecsinapse.github.io/design-system) - Learn how to use and view the components in Storybook.
|
|
19
19
|
- [Getting started](https://tecsinapse.github.io/design-system/?path=/docs/introduction-getting-started--page) - Set up a new app with our DS or add it to an existing project.
|
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
|
|
3
3
|
export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'> & {
|
|
4
4
|
callbackAfterValidated?: (valid: boolean, message?: string) => void;
|
|
5
|
+
invalidDateLabel?: string;
|
|
5
6
|
};
|
|
6
|
-
export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, ...rest }: WebDatePickerProps<T>) => JSX.Element;
|
|
7
|
+
export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, placeholder, label, invalidDateLabel, ...rest }: WebDatePickerProps<T>) => JSX.Element;
|
|
@@ -12,6 +12,9 @@ const DatePicker = ({
|
|
|
12
12
|
locale,
|
|
13
13
|
onChange,
|
|
14
14
|
callbackAfterValidated,
|
|
15
|
+
placeholder,
|
|
16
|
+
label,
|
|
17
|
+
invalidDateLabel = "Invalid date",
|
|
15
18
|
...rest
|
|
16
19
|
}) => {
|
|
17
20
|
const [visible, setVisible] = React.useState(false);
|
|
@@ -52,14 +55,14 @@ const DatePicker = ({
|
|
|
52
55
|
onBlur: () => {
|
|
53
56
|
if ((controlledInput ?? []).length < 8 && (controlledInput ?? []).length > 0) {
|
|
54
57
|
setError(true);
|
|
55
|
-
callbackAfterValidated?.(false,
|
|
58
|
+
callbackAfterValidated?.(false, invalidDateLabel);
|
|
56
59
|
}
|
|
57
60
|
if (controlledInput?.length === 8) {
|
|
58
61
|
const auxData = dateFns.parse(controlledInput, "ddMMyyyy", /* @__PURE__ */ new Date(), {
|
|
59
62
|
locale
|
|
60
63
|
});
|
|
61
64
|
const isValidDate = dateFns.isValid(auxData);
|
|
62
|
-
callbackAfterValidated?.(isValidDate,
|
|
65
|
+
callbackAfterValidated?.(isValidDate, invalidDateLabel);
|
|
63
66
|
if (isValidDate && auxData !== value) {
|
|
64
67
|
setError(false);
|
|
65
68
|
onChange?.(auxData);
|
|
@@ -67,12 +70,12 @@ const DatePicker = ({
|
|
|
67
70
|
}
|
|
68
71
|
if (controlledInput?.length === 0) {
|
|
69
72
|
setError(true);
|
|
70
|
-
callbackAfterValidated?.(false,
|
|
73
|
+
callbackAfterValidated?.(false, invalidDateLabel);
|
|
71
74
|
}
|
|
72
75
|
},
|
|
73
76
|
mask: reactCore.Masks.DATE,
|
|
74
|
-
value: displayValue,
|
|
75
|
-
hint: error ?
|
|
77
|
+
value: displayValue ?? "",
|
|
78
|
+
hint: error ? invalidDateLabel : void 0,
|
|
76
79
|
variant: error ? "error" : "default",
|
|
77
80
|
onChange: (input) => {
|
|
78
81
|
setControlledInput(input);
|
|
@@ -81,7 +84,8 @@ const DatePicker = ({
|
|
|
81
84
|
setError(false);
|
|
82
85
|
}
|
|
83
86
|
},
|
|
84
|
-
placeholder
|
|
87
|
+
placeholder,
|
|
88
|
+
label,
|
|
85
89
|
rightComponent: /* @__PURE__ */ React.createElement(
|
|
86
90
|
reactCore.Button,
|
|
87
91
|
{
|
|
@@ -129,6 +133,8 @@ const DatePicker = ({
|
|
|
129
133
|
month: getMonth,
|
|
130
134
|
requestShowCalendar: show,
|
|
131
135
|
requestCloseCalendar: close,
|
|
136
|
+
placeholder,
|
|
137
|
+
label,
|
|
132
138
|
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
|
|
133
139
|
index.Dropdown,
|
|
134
140
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const checksFullRange = useCallback(() => {\n if(type === 'range' && !(value as DateRange)?.highest)\n onChange?.(undefined)
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n invalidDateLabel?: string;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n placeholder,\n label,\n invalidDateLabel = 'Invalid date',\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const checksFullRange = useCallback(() => {\n if (type === 'range' && !(value as DateRange)?.highest)\n onChange?.(undefined);\n }, [value]);\n\n const controlComponent = (onPress, displayValue) => {\n return (\n <InputMask\n onBlur={() => {\n if (\n (controlledInput ?? []).length < 8 &&\n (controlledInput ?? []).length > 0\n ) {\n setError(true);\n callbackAfterValidated?.(false, invalidDateLabel);\n }\n if (controlledInput?.length === 8) {\n const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n locale,\n });\n const isValidDate = isValid(auxData);\n callbackAfterValidated?.(isValidDate, invalidDateLabel);\n\n if (isValidDate && auxData !== value) {\n setError(false);\n onChange?.(auxData as typeof value);\n }\n }\n if (controlledInput?.length === 0) {\n setError(true);\n callbackAfterValidated?.(false, invalidDateLabel);\n }\n }}\n mask={Masks.DATE}\n value={displayValue ?? ''}\n hint={error ? invalidDateLabel : undefined}\n variant={error ? 'error' : 'default'}\n onChange={input => {\n setControlledInput(input);\n if ((error && input.length < 8) || isValid(value)) {\n callbackAfterValidated?.(true);\n setError(false);\n }\n }}\n placeholder={placeholder}\n label={label}\n rightComponent={\n <Button\n effect={'none'}\n variant={'text'}\n style={{ padding: 0 }}\n onPress={onPress}\n >\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n </Button>\n }\n />\n );\n };\n\n if (type === 'day') {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n controlComponent={controlComponent}\n />\n );\n } else {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n placeholder={placeholder}\n label={label}\n renderCalendar={(calendar, handleBlur) => (\n <Dropdown\n visible={visible}\n setVisible={setVisible}\n onClickAway={() => {\n handleBlur?.();\n checksFullRange();\n }}\n >\n {calendar}\n </Dropdown>\n )}\n />\n );\n }\n};\n"],"names":["useState","useCallback","useMemo","parse","isValid","Masks","Button","CalendarIcon","DatePickerCore","Calendar","Dropdown"],"mappings":"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"}
|
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
|
|
3
3
|
export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'> & {
|
|
4
4
|
callbackAfterValidated?: (valid: boolean, message?: string) => void;
|
|
5
|
+
invalidDateLabel?: string;
|
|
5
6
|
};
|
|
6
|
-
export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, ...rest }: WebDatePickerProps<T>) => JSX.Element;
|
|
7
|
+
export declare const DatePicker: <T extends SelectionType>({ value, type, locale, onChange, callbackAfterValidated, placeholder, label, invalidDateLabel, ...rest }: WebDatePickerProps<T>) => JSX.Element;
|
|
@@ -10,6 +10,9 @@ const DatePicker = ({
|
|
|
10
10
|
locale,
|
|
11
11
|
onChange,
|
|
12
12
|
callbackAfterValidated,
|
|
13
|
+
placeholder,
|
|
14
|
+
label,
|
|
15
|
+
invalidDateLabel = "Invalid date",
|
|
13
16
|
...rest
|
|
14
17
|
}) => {
|
|
15
18
|
const [visible, setVisible] = useState(false);
|
|
@@ -50,14 +53,14 @@ const DatePicker = ({
|
|
|
50
53
|
onBlur: () => {
|
|
51
54
|
if ((controlledInput ?? []).length < 8 && (controlledInput ?? []).length > 0) {
|
|
52
55
|
setError(true);
|
|
53
|
-
callbackAfterValidated?.(false,
|
|
56
|
+
callbackAfterValidated?.(false, invalidDateLabel);
|
|
54
57
|
}
|
|
55
58
|
if (controlledInput?.length === 8) {
|
|
56
59
|
const auxData = parse(controlledInput, "ddMMyyyy", /* @__PURE__ */ new Date(), {
|
|
57
60
|
locale
|
|
58
61
|
});
|
|
59
62
|
const isValidDate = isValid(auxData);
|
|
60
|
-
callbackAfterValidated?.(isValidDate,
|
|
63
|
+
callbackAfterValidated?.(isValidDate, invalidDateLabel);
|
|
61
64
|
if (isValidDate && auxData !== value) {
|
|
62
65
|
setError(false);
|
|
63
66
|
onChange?.(auxData);
|
|
@@ -65,12 +68,12 @@ const DatePicker = ({
|
|
|
65
68
|
}
|
|
66
69
|
if (controlledInput?.length === 0) {
|
|
67
70
|
setError(true);
|
|
68
|
-
callbackAfterValidated?.(false,
|
|
71
|
+
callbackAfterValidated?.(false, invalidDateLabel);
|
|
69
72
|
}
|
|
70
73
|
},
|
|
71
74
|
mask: Masks.DATE,
|
|
72
|
-
value: displayValue,
|
|
73
|
-
hint: error ?
|
|
75
|
+
value: displayValue ?? "",
|
|
76
|
+
hint: error ? invalidDateLabel : void 0,
|
|
74
77
|
variant: error ? "error" : "default",
|
|
75
78
|
onChange: (input) => {
|
|
76
79
|
setControlledInput(input);
|
|
@@ -79,7 +82,8 @@ const DatePicker = ({
|
|
|
79
82
|
setError(false);
|
|
80
83
|
}
|
|
81
84
|
},
|
|
82
|
-
placeholder
|
|
85
|
+
placeholder,
|
|
86
|
+
label,
|
|
83
87
|
rightComponent: /* @__PURE__ */ React.createElement(
|
|
84
88
|
Button,
|
|
85
89
|
{
|
|
@@ -127,6 +131,8 @@ const DatePicker = ({
|
|
|
127
131
|
month: getMonth,
|
|
128
132
|
requestShowCalendar: show,
|
|
129
133
|
requestCloseCalendar: close,
|
|
134
|
+
placeholder,
|
|
135
|
+
label,
|
|
130
136
|
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
|
|
131
137
|
Dropdown,
|
|
132
138
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const checksFullRange = useCallback(() => {\n if(type === 'range' && !(value as DateRange)?.highest)\n onChange?.(undefined)
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n invalidDateLabel?: string;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n placeholder,\n label,\n invalidDateLabel = 'Invalid date',\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const checksFullRange = useCallback(() => {\n if (type === 'range' && !(value as DateRange)?.highest)\n onChange?.(undefined);\n }, [value]);\n\n const controlComponent = (onPress, displayValue) => {\n return (\n <InputMask\n onBlur={() => {\n if (\n (controlledInput ?? []).length < 8 &&\n (controlledInput ?? []).length > 0\n ) {\n setError(true);\n callbackAfterValidated?.(false, invalidDateLabel);\n }\n if (controlledInput?.length === 8) {\n const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n locale,\n });\n const isValidDate = isValid(auxData);\n callbackAfterValidated?.(isValidDate, invalidDateLabel);\n\n if (isValidDate && auxData !== value) {\n setError(false);\n onChange?.(auxData as typeof value);\n }\n }\n if (controlledInput?.length === 0) {\n setError(true);\n callbackAfterValidated?.(false, invalidDateLabel);\n }\n }}\n mask={Masks.DATE}\n value={displayValue ?? ''}\n hint={error ? invalidDateLabel : undefined}\n variant={error ? 'error' : 'default'}\n onChange={input => {\n setControlledInput(input);\n if ((error && input.length < 8) || isValid(value)) {\n callbackAfterValidated?.(true);\n setError(false);\n }\n }}\n placeholder={placeholder}\n label={label}\n rightComponent={\n <Button\n effect={'none'}\n variant={'text'}\n style={{ padding: 0 }}\n onPress={onPress}\n >\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n </Button>\n }\n />\n );\n };\n\n if (type === 'day') {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n controlComponent={controlComponent}\n />\n );\n } else {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n placeholder={placeholder}\n label={label}\n renderCalendar={(calendar, handleBlur) => (\n <Dropdown\n visible={visible}\n setVisible={setVisible}\n onClickAway={() => {\n handleBlur?.();\n checksFullRange();\n }}\n >\n {calendar}\n </Dropdown>\n )}\n />\n );\n }\n};\n"],"names":["DatePickerCore"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@emotion/native": "~11.10.0",
|
|
24
24
|
"@emotion/react": "~11.10.0",
|
|
25
25
|
"@emotion/styled": "~11.10.0",
|
|
26
|
-
"@tecsinapse/react-core": "2.0.
|
|
26
|
+
"@tecsinapse/react-core": "2.0.4",
|
|
27
27
|
"@types/react-native": "^0.71.0",
|
|
28
28
|
"date-fns": "~2.29.3",
|
|
29
29
|
"react-native-vector-icons": "~9.2.0",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react-dom": "^18.0.0",
|
|
44
44
|
"react-native-web": ">=0.18.0 <1"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "490ebda1a93d15a4d55e651eb3f4091241f30f3c"
|
|
47
47
|
}
|