@tecsinapse/react-web-kit 2.0.1 → 2.0.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/dist/cjs/components/atoms/Dropdown/index.d.ts +1 -0
- package/dist/cjs/components/atoms/Dropdown/index.js +2 -1
- package/dist/cjs/components/atoms/Dropdown/index.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +16 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/hooks/useClickAwayListener.d.ts +1 -1
- package/dist/cjs/hooks/useClickAwayListener.js +3 -2
- package/dist/cjs/hooks/useClickAwayListener.js.map +1 -1
- package/dist/esm/components/atoms/Dropdown/index.d.ts +1 -0
- package/dist/esm/components/atoms/Dropdown/index.js +2 -1
- package/dist/esm/components/atoms/Dropdown/index.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +16 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/hooks/useClickAwayListener.d.ts +1 -1
- package/dist/esm/hooks/useClickAwayListener.js +3 -2
- package/dist/esm/hooks/useClickAwayListener.js.map +1 -1
- package/package.json +3 -3
|
@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
|
|
|
2
2
|
export interface DropdownProps {
|
|
3
3
|
visible: boolean;
|
|
4
4
|
setVisible: Dispatch<SetStateAction<boolean>>;
|
|
5
|
+
onClickAway?: () => void;
|
|
5
6
|
}
|
|
6
7
|
export declare const Dropdown: React.FC<DropdownProps & {
|
|
7
8
|
children: JSX.Element;
|
|
@@ -10,10 +10,11 @@ var useClickAwayListener = require('../../../hooks/useClickAwayListener.js');
|
|
|
10
10
|
const Component = ({
|
|
11
11
|
visible,
|
|
12
12
|
setVisible,
|
|
13
|
+
onClickAway,
|
|
13
14
|
children
|
|
14
15
|
}) => {
|
|
15
16
|
const refDropDown = React.useRef(null);
|
|
16
|
-
useClickAwayListener.useClickAwayListener(refDropDown, setVisible);
|
|
17
|
+
useClickAwayListener.useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
|
|
17
18
|
return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: visible, timeout: 300 }, (state) => /* @__PURE__ */ React.createElement(
|
|
18
19
|
styled.StyledContainerDropdown,
|
|
19
20
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n visible: boolean;\n setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n visible,\n setVisible,\n children,\n}): JSX.Element => {\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setVisible);\n\n return (\n <Transition in={visible} timeout={300}>\n {state => (\n <StyledContainerDropdown\n style={{ ...defaultStyles, ...transition['bottom'][state] }}\n ref={refDropDown}\n >\n {children}\n </StyledContainerDropdown>\n )}\n </Transition>\n );\n};\n\nexport const Dropdown = Component;\n"],"names":["useClickAwayListener","Transition","StyledContainerDropdown","defaultStyles","transition"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n visible: boolean;\n setVisible: Dispatch<SetStateAction<boolean>>;\n onClickAway?: () => void;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n visible,\n setVisible,\n onClickAway,\n children,\n}): JSX.Element => {\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setVisible, 'mousedown', onClickAway);\n\n return (\n <Transition in={visible} timeout={300}>\n {state => (\n <StyledContainerDropdown\n style={{ ...defaultStyles, ...transition['bottom'][state] }}\n ref={refDropDown}\n >\n {children}\n </StyledContainerDropdown>\n )}\n </Transition>\n );\n};\n\nexport const Dropdown = Component;\n"],"names":["useClickAwayListener","Transition","StyledContainerDropdown","defaultStyles","transition"],"mappings":";;;;;;;;;AAYA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAqBA,yCAAA,CAAA,WAAA,EAAa,UAAY,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AAEtE,EAAA,2CACGC,+BAAW,EAAA,EAAA,EAAA,EAAI,OAAS,EAAA,OAAA,EAAS,OAC/B,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAGC,wBAAA,EAAe,GAAGC,qBAAW,CAAA,QAAQ,CAAE,CAAA,KAAK,CAAE,EAAA;AAAA,MAC1D,GAAK,EAAA,WAAA;AAAA,KAAA;AAAA,IAEJ,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}
|
|
@@ -41,6 +41,10 @@ const DatePicker = ({
|
|
|
41
41
|
}
|
|
42
42
|
return void 0;
|
|
43
43
|
}, [value]);
|
|
44
|
+
const checksFullRange = React.useCallback(() => {
|
|
45
|
+
if (type === "range" && !value?.highest)
|
|
46
|
+
onChange?.(void 0);
|
|
47
|
+
}, [value]);
|
|
44
48
|
const controlComponent = (onPress, displayValue) => {
|
|
45
49
|
return /* @__PURE__ */ React.createElement(
|
|
46
50
|
InputMask,
|
|
@@ -125,7 +129,18 @@ const DatePicker = ({
|
|
|
125
129
|
month: getMonth,
|
|
126
130
|
requestShowCalendar: show,
|
|
127
131
|
requestCloseCalendar: close,
|
|
128
|
-
renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(
|
|
132
|
+
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
|
|
133
|
+
index.Dropdown,
|
|
134
|
+
{
|
|
135
|
+
visible,
|
|
136
|
+
setVisible,
|
|
137
|
+
onClickAway: () => {
|
|
138
|
+
handleBlur?.();
|
|
139
|
+
checksFullRange();
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
calendar
|
|
143
|
+
)
|
|
129
144
|
}
|
|
130
145
|
);
|
|
131
146
|
}
|
|
@@ -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 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, 'Data inválida');\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, 'Data inválida');\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, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : 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={'Não informada'}\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 renderCalendar={calendar
|
|
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)\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, 'Data inválida');\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, 'Data inválida');\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, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : 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={'Não informada'}\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 renderCalendar={(calendar, handleBlur) =>\n <Dropdown visible={visible} 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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const useClickAwayListener: (ref: React.MutableRefObject<any>, setVisible: React.Dispatch<React.SetStateAction<boolean>>, event?: 'mouseup' | 'mousedown' | undefined) => void;
|
|
2
|
+
export declare const useClickAwayListener: (ref: React.MutableRefObject<any>, setVisible: React.Dispatch<React.SetStateAction<boolean>>, event?: 'mouseup' | 'mousedown' | undefined, onClickAway?: () => void) => void;
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
|
|
5
|
-
const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
5
|
+
const useClickAwayListener = (ref, setVisible, event = "mousedown", onClickAway) => {
|
|
6
6
|
React.useEffect(() => {
|
|
7
7
|
const handleClickOutside = (event2) => {
|
|
8
8
|
if (ref.current && !ref.current.contains(event2.target)) {
|
|
9
|
+
onClickAway?.();
|
|
9
10
|
setVisible(false);
|
|
10
11
|
}
|
|
11
12
|
};
|
|
@@ -13,7 +14,7 @@ const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
|
13
14
|
return () => {
|
|
14
15
|
document.removeEventListener(event, handleClickOutside);
|
|
15
16
|
};
|
|
16
|
-
}, [ref]);
|
|
17
|
+
}, [ref, onClickAway]);
|
|
17
18
|
};
|
|
18
19
|
|
|
19
20
|
exports.useClickAwayListener = useClickAwayListener;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickAwayListener.js","sources":["../../../src/hooks/useClickAwayListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n ref: React.MutableRefObject<any>,\n setVisible: React.Dispatch<React.SetStateAction<boolean>>,\n event: 'mouseup' | 'mousedown' | undefined = 'mousedown'\n): void => {\n React.useEffect(() => {\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n setVisible(false);\n }\n };\n document.addEventListener(event, handleClickOutside);\n return () => {\n document.removeEventListener(event, handleClickOutside);\n };\n }, [ref]);\n};\n"],"names":["event"],"mappings":";;;;AAEO,MAAM,
|
|
1
|
+
{"version":3,"file":"useClickAwayListener.js","sources":["../../../src/hooks/useClickAwayListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n ref: React.MutableRefObject<any>,\n setVisible: React.Dispatch<React.SetStateAction<boolean>>,\n event: 'mouseup' | 'mousedown' | undefined = 'mousedown',\n onClickAway?: () => void\n): void => {\n React.useEffect(() => {\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n onClickAway?.()\n setVisible(false);\n }\n };\n document.addEventListener(event, handleClickOutside);\n return () => {\n document.removeEventListener(event, handleClickOutside);\n };\n }, [ref, onClickAway]);\n};\n"],"names":["event"],"mappings":";;;;AAEO,MAAM,uBAAuB,CAClC,GAAA,EACA,UACA,EAAA,KAAA,GAA6C,aAC7C,WACS,KAAA;AACT,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,kBAAA,GAAqB,CAAAA,MAAS,KAAA;AAClC,MAAI,IAAA,GAAA,CAAI,WAAW,CAAC,GAAA,CAAI,QAAQ,QAASA,CAAAA,MAAAA,CAAM,MAAM,CAAG,EAAA;AACtD,QAAc,WAAA,IAAA,CAAA;AACd,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AACA,IAAS,QAAA,CAAA,gBAAA,CAAiB,OAAO,kBAAkB,CAAA,CAAA;AACnD,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,OAAO,kBAAkB,CAAA,CAAA;AAAA,KACxD,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,WAAW,CAAC,CAAA,CAAA;AACvB;;;;"}
|
|
@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
|
|
|
2
2
|
export interface DropdownProps {
|
|
3
3
|
visible: boolean;
|
|
4
4
|
setVisible: Dispatch<SetStateAction<boolean>>;
|
|
5
|
+
onClickAway?: () => void;
|
|
5
6
|
}
|
|
6
7
|
export declare const Dropdown: React.FC<DropdownProps & {
|
|
7
8
|
children: JSX.Element;
|
|
@@ -8,10 +8,11 @@ import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
|
|
|
8
8
|
const Component = ({
|
|
9
9
|
visible,
|
|
10
10
|
setVisible,
|
|
11
|
+
onClickAway,
|
|
11
12
|
children
|
|
12
13
|
}) => {
|
|
13
14
|
const refDropDown = React.useRef(null);
|
|
14
|
-
useClickAwayListener(refDropDown, setVisible);
|
|
15
|
+
useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
|
|
15
16
|
return /* @__PURE__ */ React.createElement(Transition, { in: visible, timeout: 300 }, (state) => /* @__PURE__ */ React.createElement(
|
|
16
17
|
StyledContainerDropdown,
|
|
17
18
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n visible: boolean;\n setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n visible,\n setVisible,\n children,\n}): JSX.Element => {\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setVisible);\n\n return (\n <Transition in={visible} timeout={300}>\n {state => (\n <StyledContainerDropdown\n style={{ ...defaultStyles, ...transition['bottom'][state] }}\n ref={refDropDown}\n >\n {children}\n </StyledContainerDropdown>\n )}\n </Transition>\n );\n};\n\nexport const Dropdown = Component;\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface DropdownProps {\n visible: boolean;\n setVisible: Dispatch<SetStateAction<boolean>>;\n onClickAway?: () => void;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n visible,\n setVisible,\n onClickAway,\n children,\n}): JSX.Element => {\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setVisible, 'mousedown', onClickAway);\n\n return (\n <Transition in={visible} timeout={300}>\n {state => (\n <StyledContainerDropdown\n style={{ ...defaultStyles, ...transition['bottom'][state] }}\n ref={refDropDown}\n >\n {children}\n </StyledContainerDropdown>\n )}\n </Transition>\n );\n};\n\nexport const Dropdown = Component;\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,YAAiE,CAAC;AAAA,EACtE,OAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AACF,CAAmB,KAAA;AACjB,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAqB,oBAAA,CAAA,WAAA,EAAa,UAAY,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AAEtE,EAAA,2CACG,UAAW,EAAA,EAAA,EAAA,EAAI,OAAS,EAAA,OAAA,EAAS,OAC/B,CACC,KAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,GAAG,aAAA,EAAe,GAAG,UAAW,CAAA,QAAQ,CAAE,CAAA,KAAK,CAAE,EAAA;AAAA,MAC1D,GAAK,EAAA,WAAA;AAAA,KAAA;AAAA,IAEJ,QAAA;AAAA,GAGP,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}
|
|
@@ -39,6 +39,10 @@ const DatePicker = ({
|
|
|
39
39
|
}
|
|
40
40
|
return void 0;
|
|
41
41
|
}, [value]);
|
|
42
|
+
const checksFullRange = useCallback(() => {
|
|
43
|
+
if (type === "range" && !value?.highest)
|
|
44
|
+
onChange?.(void 0);
|
|
45
|
+
}, [value]);
|
|
42
46
|
const controlComponent = (onPress, displayValue) => {
|
|
43
47
|
return /* @__PURE__ */ React.createElement(
|
|
44
48
|
InputMask,
|
|
@@ -123,7 +127,18 @@ const DatePicker = ({
|
|
|
123
127
|
month: getMonth,
|
|
124
128
|
requestShowCalendar: show,
|
|
125
129
|
requestCloseCalendar: close,
|
|
126
|
-
renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(
|
|
130
|
+
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
|
|
131
|
+
Dropdown,
|
|
132
|
+
{
|
|
133
|
+
visible,
|
|
134
|
+
setVisible,
|
|
135
|
+
onClickAway: () => {
|
|
136
|
+
handleBlur?.();
|
|
137
|
+
checksFullRange();
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
calendar
|
|
141
|
+
)
|
|
127
142
|
}
|
|
128
143
|
);
|
|
129
144
|
}
|
|
@@ -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 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, 'Data inválida');\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, 'Data inválida');\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, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : 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={'Não informada'}\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 renderCalendar={calendar
|
|
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)\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, 'Data inválida');\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, 'Data inválida');\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, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : 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={'Não informada'}\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 renderCalendar={(calendar, handleBlur) =>\n <Dropdown visible={visible} 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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const useClickAwayListener: (ref: React.MutableRefObject<any>, setVisible: React.Dispatch<React.SetStateAction<boolean>>, event?: 'mouseup' | 'mousedown' | undefined) => void;
|
|
2
|
+
export declare const useClickAwayListener: (ref: React.MutableRefObject<any>, setVisible: React.Dispatch<React.SetStateAction<boolean>>, event?: 'mouseup' | 'mousedown' | undefined, onClickAway?: () => void) => void;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
3
|
+
const useClickAwayListener = (ref, setVisible, event = "mousedown", onClickAway) => {
|
|
4
4
|
React.useEffect(() => {
|
|
5
5
|
const handleClickOutside = (event2) => {
|
|
6
6
|
if (ref.current && !ref.current.contains(event2.target)) {
|
|
7
|
+
onClickAway?.();
|
|
7
8
|
setVisible(false);
|
|
8
9
|
}
|
|
9
10
|
};
|
|
@@ -11,7 +12,7 @@ const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
|
11
12
|
return () => {
|
|
12
13
|
document.removeEventListener(event, handleClickOutside);
|
|
13
14
|
};
|
|
14
|
-
}, [ref]);
|
|
15
|
+
}, [ref, onClickAway]);
|
|
15
16
|
};
|
|
16
17
|
|
|
17
18
|
export { useClickAwayListener };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickAwayListener.js","sources":["../../../src/hooks/useClickAwayListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n ref: React.MutableRefObject<any>,\n setVisible: React.Dispatch<React.SetStateAction<boolean>>,\n event: 'mouseup' | 'mousedown' | undefined = 'mousedown'\n): void => {\n React.useEffect(() => {\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n setVisible(false);\n }\n };\n document.addEventListener(event, handleClickOutside);\n return () => {\n document.removeEventListener(event, handleClickOutside);\n };\n }, [ref]);\n};\n"],"names":["event"],"mappings":";;AAEO,MAAM,
|
|
1
|
+
{"version":3,"file":"useClickAwayListener.js","sources":["../../../src/hooks/useClickAwayListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n ref: React.MutableRefObject<any>,\n setVisible: React.Dispatch<React.SetStateAction<boolean>>,\n event: 'mouseup' | 'mousedown' | undefined = 'mousedown',\n onClickAway?: () => void\n): void => {\n React.useEffect(() => {\n const handleClickOutside = event => {\n if (ref.current && !ref.current.contains(event.target)) {\n onClickAway?.()\n setVisible(false);\n }\n };\n document.addEventListener(event, handleClickOutside);\n return () => {\n document.removeEventListener(event, handleClickOutside);\n };\n }, [ref, onClickAway]);\n};\n"],"names":["event"],"mappings":";;AAEO,MAAM,uBAAuB,CAClC,GAAA,EACA,UACA,EAAA,KAAA,GAA6C,aAC7C,WACS,KAAA;AACT,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,kBAAA,GAAqB,CAAAA,MAAS,KAAA;AAClC,MAAI,IAAA,GAAA,CAAI,WAAW,CAAC,GAAA,CAAI,QAAQ,QAASA,CAAAA,MAAAA,CAAM,MAAM,CAAG,EAAA;AACtD,QAAc,WAAA,IAAA,CAAA;AACd,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AACA,IAAS,QAAA,CAAA,gBAAA,CAAiB,OAAO,kBAAkB,CAAA,CAAA;AACnD,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,OAAO,kBAAkB,CAAA,CAAA;AAAA,KACxD,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,WAAW,CAAC,CAAA,CAAA;AACvB;;;;"}
|
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.0.
|
|
4
|
+
"version": "2.0.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.2",
|
|
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"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "edb7a753623b7e1d7c55c89e1bd0b27e9c7834e0"
|
|
47
47
|
}
|