@tecsinapse/react-web-kit 1.23.8 → 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/components/molecules/Select/Select.js +0 -2
- package/dist/cjs/components/molecules/Select/Select.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/components/molecules/Select/Select.js +0 -2
- package/dist/esm/components/molecules/Select/Select.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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"}
|
|
@@ -114,8 +114,6 @@ const Select = ({
|
|
|
114
114
|
rightComponent: styled.RightComponent
|
|
115
115
|
}, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
|
|
116
116
|
...displayTextProps,
|
|
117
|
-
ellipsizeMode: "tail",
|
|
118
|
-
numberOfLines: 1,
|
|
119
117
|
fontWeight: "bold"
|
|
120
118
|
}, displayValue))), /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
|
|
121
119
|
in: dropDownVisible,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nconst Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text\n {...displayTextProps}\n ellipsizeMode=\"tail\"\n numberOfLines={1}\n fontWeight={'bold'}\n >\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"names":["React","useState","useClickAwayListener","useEffect","getDisplayValue","StyledContainer","StyledInputContainer","PressableInputContainer","RightComponent","Text","Transition","defaultStyles","transition"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nconst Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n //TODO: when component is wrapper by GridITem and Text of label has prop \"numberOfLines={1}\", this component incresing witht based on options selects, breaking layout of Grid, we must fix this problem.\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text {...displayTextProps} fontWeight={'bold'}>\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"names":["React","useState","useClickAwayListener","useEffect","getDisplayValue","StyledContainer","StyledInputContainer","PressableInputContainer","RightComponent","Text","Transition","defaultStyles","transition"],"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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"}
|
|
@@ -108,8 +108,6 @@ const Select = ({
|
|
|
108
108
|
rightComponent: RightComponent
|
|
109
109
|
}, /* @__PURE__ */ React.createElement(Text, {
|
|
110
110
|
...displayTextProps,
|
|
111
|
-
ellipsizeMode: "tail",
|
|
112
|
-
numberOfLines: 1,
|
|
113
111
|
fontWeight: "bold"
|
|
114
112
|
}, displayValue))), /* @__PURE__ */ React.createElement(Transition, {
|
|
115
113
|
in: dropDownVisible,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nconst Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nconst Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n //TODO: when component is wrapper by GridITem and Text of label has prop \"numberOfLines={1}\", this component incresing witht based on options selects, breaking layout of Grid, we must fix this problem.\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text {...displayTextProps} fontWeight={'bold'}>\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"names":[],"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
|
}
|