@tecsinapse/react-web-kit 1.23.9 → 1.23.10
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 +10 -2
- 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 +10 -2
- 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;
|
|
@@ -16,10 +16,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
16
16
|
const Component = ({
|
|
17
17
|
visible,
|
|
18
18
|
setVisible,
|
|
19
|
+
onClickAway,
|
|
19
20
|
children
|
|
20
21
|
}) => {
|
|
21
22
|
const refDropDown = React__default["default"].useRef(null);
|
|
22
|
-
useClickAwayListener.useClickAwayListener(refDropDown, setVisible);
|
|
23
|
+
useClickAwayListener.useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
|
|
23
24
|
return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
|
|
24
25
|
in: visible,
|
|
25
26
|
timeout: 300
|
|
@@ -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":["React","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":["React","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,GAAcA,yBAAM,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACrC,EAAqBC,yCAAA,CAAA,WAAA,EAAa,UAAY,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AAEtE,EAAA,uBACGD,yBAAA,CAAA,aAAA,CAAAE,+BAAA,EAAA;AAAA,IAAW,EAAI,EAAA,OAAA;AAAA,IAAS,OAAS,EAAA,GAAA;AAAA,GAAA,EAC/B,2BACEF,yBAAA,CAAA,aAAA,CAAAG,8BAAA,EAAA;AAAA,IACC,OAAO,EAAE,GAAGC,0BAAe,GAAGC,qBAAA,CAAW,UAAU,KAAO,CAAA,EAAA;AAAA,IAC1D,GAAK,EAAA,WAAA;AAAA,GAAA,EAEJ,QACH,CAEJ,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,QAAW,GAAA;;;;"}
|
|
@@ -47,6 +47,10 @@ const DatePicker = ({
|
|
|
47
47
|
}
|
|
48
48
|
return void 0;
|
|
49
49
|
}, [value]);
|
|
50
|
+
const checksFullRange = React.useCallback(() => {
|
|
51
|
+
if (type === "range" && !value?.highest)
|
|
52
|
+
onChange?.(void 0);
|
|
53
|
+
}, [value]);
|
|
50
54
|
const controlComponent = (onPress, displayValue) => {
|
|
51
55
|
return /* @__PURE__ */ React__default["default"].createElement(InputMask, {
|
|
52
56
|
onBlur: () => {
|
|
@@ -126,9 +130,13 @@ const DatePicker = ({
|
|
|
126
130
|
month: getMonth,
|
|
127
131
|
requestShowCalendar: show,
|
|
128
132
|
requestCloseCalendar: close,
|
|
129
|
-
renderCalendar: (calendar) => /* @__PURE__ */ React__default["default"].createElement(index.Dropdown, {
|
|
133
|
+
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React__default["default"].createElement(index.Dropdown, {
|
|
130
134
|
visible,
|
|
131
|
-
setVisible
|
|
135
|
+
setVisible,
|
|
136
|
+
onClickAway: () => {
|
|
137
|
+
handleBlur?.();
|
|
138
|
+
checksFullRange();
|
|
139
|
+
}
|
|
132
140
|
}, calendar)
|
|
133
141
|
});
|
|
134
142
|
}
|
|
@@ -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","React","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;
|
|
@@ -8,10 +8,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
10
|
|
|
11
|
-
const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
11
|
+
const useClickAwayListener = (ref, setVisible, event = "mousedown", onClickAway) => {
|
|
12
12
|
React__default["default"].useEffect(() => {
|
|
13
13
|
const handleClickOutside = (event2) => {
|
|
14
14
|
if (ref.current && !ref.current.contains(event2.target)) {
|
|
15
|
+
onClickAway?.();
|
|
15
16
|
setVisible(false);
|
|
16
17
|
}
|
|
17
18
|
};
|
|
@@ -19,7 +20,7 @@ const useClickAwayListener = (ref, setVisible, event = "mousedown") => {
|
|
|
19
20
|
return () => {
|
|
20
21
|
document.removeEventListener(event, handleClickOutside);
|
|
21
22
|
};
|
|
22
|
-
}, [ref]);
|
|
23
|
+
}, [ref, onClickAway]);
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
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":["React","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":["React","event"],"mappings":";;;;;;;;;;AAEO,MAAM,uBAAuB,CAClC,GAAA,EACA,UACA,EAAA,KAAA,GAA6C,aAC7C,WACS,KAAA;AACT,EAAAA,yBAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,kBAAA,GAAqB,CAAAC,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, {
|
|
16
17
|
in: visible,
|
|
17
18
|
timeout: 300
|
|
@@ -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,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,EAAI,EAAA,OAAA;AAAA,IAAS,OAAS,EAAA,GAAA;AAAA,GAAA,EAC/B,2BACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AAAA,IACC,OAAO,EAAE,GAAG,eAAe,GAAG,UAAA,CAAW,UAAU,KAAO,CAAA,EAAA;AAAA,IAC1D,GAAK,EAAA,WAAA;AAAA,GAAA,EAEJ,QACH,CAEJ,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(InputMask, {
|
|
44
48
|
onBlur: () => {
|
|
@@ -118,9 +122,13 @@ const DatePicker = ({
|
|
|
118
122
|
month: getMonth,
|
|
119
123
|
requestShowCalendar: show,
|
|
120
124
|
requestCloseCalendar: close,
|
|
121
|
-
renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(Dropdown, {
|
|
125
|
+
renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(Dropdown, {
|
|
122
126
|
visible,
|
|
123
|
-
setVisible
|
|
127
|
+
setVisible,
|
|
128
|
+
onClickAway: () => {
|
|
129
|
+
handleBlur?.();
|
|
130
|
+
checksFullRange();
|
|
131
|
+
}
|
|
124
132
|
}, calendar)
|
|
125
133
|
});
|
|
126
134
|
}
|
|
@@ -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": "1.23.
|
|
4
|
+
"version": "1.23.10",
|
|
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": "1.22.
|
|
26
|
+
"@tecsinapse/react-core": "1.22.9",
|
|
27
27
|
"@types/react-native": "^0.64.4",
|
|
28
28
|
"date-fns": "~2.29.1",
|
|
29
29
|
"react-native-vector-icons": "~9.2.0",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
44
44
|
"react-native-web": "^0.17.1 || ^0.18.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "a576483807e3f8848e6f7c87ea2f3ef75c0d1743"
|
|
47
47
|
}
|