@tecsinapse/react-native-kit 1.22.7 → 1.22.8
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/Avatar/Avatar.js +3 -21
- package/dist/cjs/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/atoms/Badge/Badge.js +9 -43
- package/dist/cjs/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/atoms/BottomNavigator/BottomNavigator.js +14 -43
- package/dist/cjs/components/atoms/BottomNavigator/BottomNavigator.js.map +1 -1
- package/dist/cjs/components/atoms/BottomNavigator/Item.js +13 -43
- package/dist/cjs/components/atoms/BottomNavigator/Item.js.map +1 -1
- package/dist/cjs/components/atoms/Button/Button.js +9 -42
- package/dist/cjs/components/atoms/Button/Button.js.map +1 -1
- package/dist/cjs/components/atoms/Button/States/Error.js +5 -23
- package/dist/cjs/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/cjs/components/atoms/Button/States/Loading.js +3 -21
- package/dist/cjs/components/atoms/Button/States/Loading.js.map +1 -1
- package/dist/cjs/components/atoms/Button/States/Success.js +3 -21
- package/dist/cjs/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/cjs/components/atoms/GroupButton/GroupButtonOption.js +3 -21
- package/dist/cjs/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/cjs/components/atoms/Header/Header.js +18 -48
- package/dist/cjs/components/atoms/Header/Header.js.map +1 -1
- package/dist/cjs/components/atoms/Input/Input.js +32 -84
- package/dist/cjs/components/atoms/Input/Input.js.map +1 -1
- package/dist/cjs/components/atoms/InputMask/InputMask.js +29 -83
- package/dist/cjs/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/ModalGroupManager.js +5 -33
- package/dist/cjs/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/ModalLifecycleHandler.js +67 -86
- package/dist/cjs/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/useLazyModalManager.js +1 -1
- package/dist/cjs/components/atoms/Modal/useLazyModalManager.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/useModalManager.js +1 -1
- package/dist/cjs/components/atoms/Modal/useModalManager.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Pulse.js +4 -5
- package/dist/cjs/components/atoms/Skeleton/Pulse.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Wave.js +5 -6
- package/dist/cjs/components/atoms/Skeleton/Wave.js.map +1 -1
- package/dist/cjs/components/atoms/SnappingSlider/SnappingSlider.js +11 -43
- package/dist/cjs/components/atoms/SnappingSlider/SnappingSlider.js.map +1 -1
- package/dist/cjs/components/atoms/Tag/Tag.js +5 -33
- package/dist/cjs/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/atoms/Text/Text.js +4 -31
- package/dist/cjs/components/atoms/Text/Text.js.map +1 -1
- package/dist/cjs/components/atoms/Text/styled.js +3 -3
- package/dist/cjs/components/atoms/Text/styled.js.map +1 -1
- package/dist/cjs/components/atoms/TextArea/TextArea.js +29 -83
- package/dist/cjs/components/atoms/TextArea/TextArea.js.map +1 -1
- package/dist/cjs/components/molecules/Calendar/Calendar.js +8 -40
- package/dist/cjs/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +15 -48
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js +12 -43
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js +8 -40
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Grid.js +20 -55
- package/dist/cjs/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Item/Item.js +28 -75
- package/dist/cjs/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js +7 -23
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/styled.js +3 -3
- package/dist/cjs/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Modal.js +25 -71
- package/dist/cjs/components/molecules/Select/Modal.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Select.js +37 -91
- package/dist/cjs/components/molecules/Select/Select.js.map +1 -1
- package/dist/cjs/components/molecules/Select/styled.js +3 -6
- package/dist/cjs/components/molecules/Select/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/atoms/Avatar/Avatar.js +3 -21
- package/dist/esm/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/atoms/Badge/Badge.js +9 -43
- package/dist/esm/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/esm/components/atoms/BottomNavigator/BottomNavigator.js +14 -43
- package/dist/esm/components/atoms/BottomNavigator/BottomNavigator.js.map +1 -1
- package/dist/esm/components/atoms/BottomNavigator/Item.js +13 -43
- package/dist/esm/components/atoms/BottomNavigator/Item.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.js +9 -42
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Error.js +6 -24
- package/dist/esm/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Loading.js +3 -21
- package/dist/esm/components/atoms/Button/States/Loading.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Success.js +3 -21
- package/dist/esm/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/esm/components/atoms/GroupButton/GroupButtonOption.js +3 -21
- package/dist/esm/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/esm/components/atoms/Header/Header.js +18 -48
- package/dist/esm/components/atoms/Header/Header.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +32 -84
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputMask/InputMask.js +29 -83
- package/dist/esm/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/esm/components/atoms/Modal/ModalGroupManager.js +5 -33
- package/dist/esm/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js +67 -86
- package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/esm/components/atoms/Modal/useLazyModalManager.js +1 -1
- package/dist/esm/components/atoms/Modal/useLazyModalManager.js.map +1 -1
- package/dist/esm/components/atoms/Modal/useModalManager.js +1 -1
- package/dist/esm/components/atoms/Modal/useModalManager.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Pulse.js +4 -5
- package/dist/esm/components/atoms/Skeleton/Pulse.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/esm/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Wave.js +5 -6
- package/dist/esm/components/atoms/Skeleton/Wave.js.map +1 -1
- package/dist/esm/components/atoms/SnappingSlider/SnappingSlider.js +11 -43
- package/dist/esm/components/atoms/SnappingSlider/SnappingSlider.js.map +1 -1
- package/dist/esm/components/atoms/Tag/Tag.js +5 -33
- package/dist/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/esm/components/atoms/Text/Text.js +4 -31
- package/dist/esm/components/atoms/Text/Text.js.map +1 -1
- package/dist/esm/components/atoms/Text/styled.js +3 -3
- package/dist/esm/components/atoms/Text/styled.js.map +1 -1
- package/dist/esm/components/atoms/TextArea/TextArea.js +29 -83
- package/dist/esm/components/atoms/TextArea/TextArea.js.map +1 -1
- package/dist/esm/components/molecules/Calendar/Calendar.js +8 -40
- package/dist/esm/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +15 -48
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js +12 -43
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js +8 -40
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Grid.js +20 -55
- package/dist/esm/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Item/Item.js +28 -75
- package/dist/esm/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js +7 -23
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/styled.js +3 -3
- package/dist/esm/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/esm/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/esm/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/esm/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/esm/components/molecules/Select/Modal.js +25 -71
- package/dist/esm/components/molecules/Select/Modal.js.map +1 -1
- package/dist/esm/components/molecules/Select/Select.js +38 -92
- package/dist/esm/components/molecules/Select/Select.js.map +1 -1
- package/dist/esm/components/molecules/Select/styled.js +3 -6
- package/dist/esm/components/molecules/Select/styled.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/package.json +3 -3
|
@@ -2,42 +2,11 @@ import { InputPasswordIcon } from '@tecsinapse/react-core';
|
|
|
2
2
|
import React__default, { useState } from 'react';
|
|
3
3
|
import Input from '../../atoms/Input/Input.js';
|
|
4
4
|
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __defProps = Object.defineProperties;
|
|
7
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
5
|
const InputPassword = React__default.forwardRef(
|
|
37
|
-
(
|
|
38
|
-
var _b = _a, { rightComponent } = _b, rest = __objRest(_b, ["rightComponent"]);
|
|
6
|
+
({ rightComponent, ...rest }, ref) => {
|
|
39
7
|
const [revealed, setRevealed] = useState(false);
|
|
40
|
-
return /* @__PURE__ */ React__default.createElement(Input,
|
|
8
|
+
return /* @__PURE__ */ React__default.createElement(Input, {
|
|
9
|
+
...rest,
|
|
41
10
|
ref,
|
|
42
11
|
secureTextEntry: !revealed,
|
|
43
12
|
rightComponent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(InputPasswordIcon, {
|
|
@@ -45,7 +14,7 @@ const InputPassword = React__default.forwardRef(
|
|
|
45
14
|
revealed,
|
|
46
15
|
effect: "none"
|
|
47
16
|
}), rightComponent)
|
|
48
|
-
})
|
|
17
|
+
});
|
|
49
18
|
}
|
|
50
19
|
);
|
|
51
20
|
InputPassword.displayName = "InputPassword";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPassword.js","sources":["../../../../../src/components/molecules/InputPassword/InputPassword.tsx"],"sourcesContent":["import { InputPasswordIcon } from '@tecsinapse/react-core';\nimport React, { useState } from 'react';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { TextInput } from 'react-native';\n\nexport type InputPasswordNativeProps = InputNativeProps;\n\nconst InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(\n ({ rightComponent, ...rest }, ref) => {\n const [revealed, setRevealed] = useState(false);\n return (\n <Input\n {...rest}\n ref={ref}\n secureTextEntry={!revealed}\n rightComponent={\n <>\n <InputPasswordIcon\n onChangeState={setRevealed}\n revealed={revealed}\n effect=\"none\"\n />\n {rightComponent}\n </>\n }\n />\n );\n }\n);\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputPassword.js","sources":["../../../../../src/components/molecules/InputPassword/InputPassword.tsx"],"sourcesContent":["import { InputPasswordIcon } from '@tecsinapse/react-core';\nimport React, { useState } from 'react';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { TextInput } from 'react-native';\n\nexport type InputPasswordNativeProps = InputNativeProps;\n\nconst InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(\n ({ rightComponent, ...rest }, ref) => {\n const [revealed, setRevealed] = useState(false);\n return (\n <Input\n {...rest}\n ref={ref}\n secureTextEntry={!revealed}\n rightComponent={\n <>\n <InputPasswordIcon\n onChangeState={setRevealed}\n revealed={revealed}\n effect=\"none\"\n />\n {rightComponent}\n </>\n }\n />\n );\n }\n);\n\nInputPassword.displayName = 'InputPassword';\n\nexport default InputPassword;\n"],"names":["React"],"mappings":";;;;AAOA,MAAM,gBAAgBA,cAAM,CAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,cAAmB,EAAA,GAAA,IAAA,IAAQ,GAAQ,KAAA;AACpC,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,iBAAiB,CAAC,QAAA;AAAA,MAClB,cAAA,8FAEKA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,QACC,aAAe,EAAA,WAAA;AAAA,QACf,QAAA;AAAA,QACA,MAAO,EAAA,MAAA;AAAA,OACT,GACC,cACH,CAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
|
|
@@ -2,56 +2,24 @@ import React__default from 'react';
|
|
|
2
2
|
import { Pressable } from 'react-native';
|
|
3
3
|
import { StyledLabel } from './styled.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
|
-
const LabelComponent = (_a) => {
|
|
34
|
-
var _b = _a, {
|
|
35
|
-
label,
|
|
36
|
-
labelPosition,
|
|
37
|
-
labelProps,
|
|
38
|
-
active,
|
|
39
|
-
switchDisabled = false
|
|
40
|
-
} = _b, rest = __objRest(_b, [
|
|
41
|
-
"label",
|
|
42
|
-
"labelPosition",
|
|
43
|
-
"labelProps",
|
|
44
|
-
"active",
|
|
45
|
-
"switchDisabled"
|
|
46
|
-
]);
|
|
47
|
-
var _a2, _b2;
|
|
5
|
+
const LabelComponent = ({
|
|
6
|
+
label,
|
|
7
|
+
labelPosition,
|
|
8
|
+
labelProps,
|
|
9
|
+
active,
|
|
10
|
+
switchDisabled = false,
|
|
11
|
+
...rest
|
|
12
|
+
}) => {
|
|
48
13
|
const defaultFontColor = active && !switchDisabled ? "dark" : "medium";
|
|
49
14
|
const defaultFontWeight = active && !switchDisabled ? "bold" : "regular";
|
|
50
|
-
return /* @__PURE__ */ React__default.createElement(Pressable,
|
|
15
|
+
return /* @__PURE__ */ React__default.createElement(Pressable, {
|
|
16
|
+
...rest
|
|
17
|
+
}, /* @__PURE__ */ React__default.createElement(StyledLabel, {
|
|
51
18
|
labelPosition,
|
|
52
|
-
fontColor:
|
|
53
|
-
fontWeight:
|
|
54
|
-
|
|
19
|
+
fontColor: labelProps?.fontColor ?? defaultFontColor,
|
|
20
|
+
fontWeight: labelProps?.fontWeight ?? defaultFontWeight,
|
|
21
|
+
...labelProps
|
|
22
|
+
}, label));
|
|
55
23
|
};
|
|
56
24
|
var LabelComponent$1 = React__default.memo(LabelComponent);
|
|
57
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelComponent.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabelComponent.tsx"],"sourcesContent":["import {\n FontColor,\n FontWeight,\n LabelPositionOptions,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Pressable, PressableProps } from 'react-native';\nimport { TextNativeProps } from '../../atoms/Text';\nimport { StyledLabel } from './styled';\n\nexport interface LabelComponentProps extends PressableProps {\n label: string;\n labelPosition: LabelPositionOptions;\n labelProps?: TextNativeProps;\n active: boolean;\n switchDisabled?: boolean;\n}\n\nconst LabelComponent: FC<LabelComponentProps> = ({\n label,\n labelPosition,\n labelProps,\n active,\n switchDisabled = false,\n ...rest\n}) => {\n const defaultFontColor: keyof FontColor =\n active && !switchDisabled ? 'dark' : 'medium';\n const defaultFontWeight: keyof FontWeight =\n active && !switchDisabled ? 'bold' : 'regular';\n\n return (\n <Pressable {...rest}>\n <StyledLabel\n labelPosition={labelPosition}\n fontColor={labelProps?.fontColor ?? defaultFontColor}\n fontWeight={labelProps?.fontWeight ?? defaultFontWeight}\n {...labelProps}\n >\n {label}\n </StyledLabel>\n </Pressable>\n );\n};\n\nexport default React.memo(LabelComponent);\n"],"names":["
|
|
1
|
+
{"version":3,"file":"LabelComponent.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabelComponent.tsx"],"sourcesContent":["import {\n FontColor,\n FontWeight,\n LabelPositionOptions,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Pressable, PressableProps } from 'react-native';\nimport { TextNativeProps } from '../../atoms/Text';\nimport { StyledLabel } from './styled';\n\nexport interface LabelComponentProps extends PressableProps {\n label: string;\n labelPosition: LabelPositionOptions;\n labelProps?: TextNativeProps;\n active: boolean;\n switchDisabled?: boolean;\n}\n\nconst LabelComponent: FC<LabelComponentProps> = ({\n label,\n labelPosition,\n labelProps,\n active,\n switchDisabled = false,\n ...rest\n}) => {\n const defaultFontColor: keyof FontColor =\n active && !switchDisabled ? 'dark' : 'medium';\n const defaultFontWeight: keyof FontWeight =\n active && !switchDisabled ? 'bold' : 'regular';\n\n return (\n <Pressable {...rest}>\n <StyledLabel\n labelPosition={labelPosition}\n fontColor={labelProps?.fontColor ?? defaultFontColor}\n fontWeight={labelProps?.fontWeight ?? defaultFontWeight}\n {...labelProps}\n >\n {label}\n </StyledLabel>\n </Pressable>\n );\n};\n\nexport default React.memo(LabelComponent);\n"],"names":["React"],"mappings":";;;;AAkBA,MAAM,iBAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAiB,GAAA,KAAA;AAAA,EACd,GAAA,IAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,gBACJ,GAAA,MAAA,IAAU,CAAC,cAAA,GAAiB,MAAS,GAAA,QAAA,CAAA;AACvC,EAAA,MAAM,iBACJ,GAAA,MAAA,IAAU,CAAC,cAAA,GAAiB,MAAS,GAAA,SAAA,CAAA;AAEvC,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAW,GAAG,IAAA;AAAA,GAAA,kBACZA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACC,aAAA;AAAA,IACA,SAAA,EAAW,YAAY,SAAa,IAAA,gBAAA;AAAA,IACpC,UAAA,EAAY,YAAY,UAAc,IAAA,iBAAA;AAAA,IACrC,GAAG,UAAA;AAAA,GAAA,EAEH,KACH,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,uBAAeA,cAAA,CAAM,KAAK,cAAc,CAAA;;;;"}
|
|
@@ -3,52 +3,16 @@ import React__default from 'react';
|
|
|
3
3
|
import LabelComponent from './LabelComponent.js';
|
|
4
4
|
import { StyledView } from './styled.js';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __objRest = (source, exclude) => {
|
|
23
|
-
var target = {};
|
|
24
|
-
for (var prop in source)
|
|
25
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
if (source != null && __getOwnPropSymbols)
|
|
28
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
}
|
|
32
|
-
return target;
|
|
33
|
-
};
|
|
34
|
-
const LabeledSwitch = (_a) => {
|
|
35
|
-
var _b = _a, {
|
|
36
|
-
label,
|
|
37
|
-
labelPosition = "right",
|
|
38
|
-
labelProps,
|
|
39
|
-
pressableLabel = false,
|
|
40
|
-
active,
|
|
41
|
-
disabled,
|
|
42
|
-
onChange
|
|
43
|
-
} = _b, rest = __objRest(_b, [
|
|
44
|
-
"label",
|
|
45
|
-
"labelPosition",
|
|
46
|
-
"labelProps",
|
|
47
|
-
"pressableLabel",
|
|
48
|
-
"active",
|
|
49
|
-
"disabled",
|
|
50
|
-
"onChange"
|
|
51
|
-
]);
|
|
6
|
+
const LabeledSwitch = ({
|
|
7
|
+
label,
|
|
8
|
+
labelPosition = "right",
|
|
9
|
+
labelProps,
|
|
10
|
+
pressableLabel = false,
|
|
11
|
+
active,
|
|
12
|
+
disabled,
|
|
13
|
+
onChange,
|
|
14
|
+
...rest
|
|
15
|
+
}) => {
|
|
52
16
|
return /* @__PURE__ */ React__default.createElement(StyledView, null, labelPosition === "left" ? /* @__PURE__ */ React__default.createElement(LabelComponent, {
|
|
53
17
|
active,
|
|
54
18
|
label,
|
|
@@ -57,11 +21,12 @@ const LabeledSwitch = (_a) => {
|
|
|
57
21
|
disabled: !pressableLabel || disabled,
|
|
58
22
|
switchDisabled: disabled,
|
|
59
23
|
onPress: () => onChange(!active)
|
|
60
|
-
}) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(Switch,
|
|
24
|
+
}) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(Switch, {
|
|
61
25
|
active,
|
|
62
26
|
onChange,
|
|
63
|
-
disabled
|
|
64
|
-
|
|
27
|
+
disabled,
|
|
28
|
+
...rest
|
|
29
|
+
}), labelPosition === "right" ? /* @__PURE__ */ React__default.createElement(LabelComponent, {
|
|
65
30
|
active,
|
|
66
31
|
label,
|
|
67
32
|
labelPosition: "right",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps, Switch } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextNativeProps } from '../../atoms/Text';\nimport LabelComponent from './LabelComponent';\nimport { StyledView } from './styled';\n\nexport type LabeledSwitchNativeProps = LabeledSwitchProps & {\n labelProps?: TextNativeProps;\n};\n\nconst LabeledSwitch: FC<LabeledSwitchNativeProps> = ({\n label,\n labelPosition = 'right',\n labelProps,\n pressableLabel = false,\n active,\n disabled,\n onChange,\n ...rest\n}) => {\n return (\n <StyledView>\n {labelPosition === 'left' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'left'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n <Switch\n active={active}\n onChange={onChange}\n disabled={disabled}\n {...rest}\n />\n {labelPosition === 'right' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'right'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n </StyledView>\n );\n};\n\nexport default LabeledSwitch;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps, Switch } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextNativeProps } from '../../atoms/Text';\nimport LabelComponent from './LabelComponent';\nimport { StyledView } from './styled';\n\nexport type LabeledSwitchNativeProps = LabeledSwitchProps & {\n labelProps?: TextNativeProps;\n};\n\nconst LabeledSwitch: FC<LabeledSwitchNativeProps> = ({\n label,\n labelPosition = 'right',\n labelProps,\n pressableLabel = false,\n active,\n disabled,\n onChange,\n ...rest\n}) => {\n return (\n <StyledView>\n {labelPosition === 'left' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'left'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n <Switch\n active={active}\n onChange={onChange}\n disabled={disabled}\n {...rest}\n />\n {labelPosition === 'right' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'right'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n </StyledView>\n );\n};\n\nexport default LabeledSwitch;\n"],"names":["React"],"mappings":";;;;;AAUA,MAAM,gBAA8C,CAAC;AAAA,EACnD,KAAA;AAAA,EACA,aAAgB,GAAA,OAAA;AAAA,EAChB,UAAA;AAAA,EACA,cAAiB,GAAA,KAAA;AAAA,EACjB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAM,KAAA;AACJ,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,mBAChBA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,MAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,mBAEEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,CAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACC,GAAG,IAAA;AAAA,GACN,CAAA,EACC,aAAkB,KAAA,OAAA,mBAChBA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,OAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,6EAEE,CAEN,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -11,11 +11,11 @@ const StyledLabel = styled(Text)`
|
|
|
11
11
|
${({ theme, labelPosition }) => {
|
|
12
12
|
if (labelPosition === "right")
|
|
13
13
|
return css`
|
|
14
|
-
margin-left: ${theme
|
|
14
|
+
margin-left: ${theme?.spacing.centi};
|
|
15
15
|
`;
|
|
16
16
|
else if (labelPosition === "left")
|
|
17
17
|
return css`
|
|
18
|
-
margin-right: ${theme
|
|
18
|
+
margin-right: ${theme?.spacing.centi};
|
|
19
19
|
`;
|
|
20
20
|
}}
|
|
21
21
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/LabeledSwitch/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { Text } from '../../atoms/Text';\n\nexport const StyledView = styled(View)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledLabel = styled(Text)<\n Partial<StyleProps> & {\n labelPosition: LabelPositionOptions;\n }\n>`\n ${({ theme, labelPosition }) => {\n if (labelPosition === 'right')\n return css`\n margin-left: ${theme?.spacing.centi};\n `;\n else if (labelPosition === 'left')\n return css`\n margin-right: ${theme?.spacing.centi};\n `;\n }}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMxB,MAAA,WAAA,GAAc,OAAO,IAAI,CAAA,CAAA;AAAA,EAAA,EAKlC,CAAC,EAAE,KAAO,EAAA,aAAA,EAAoB,KAAA;AAC9B,EAAA,IAAI,aAAkB,KAAA,OAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,qBAAA,EACU
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/LabeledSwitch/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { LabelPositionOptions, StyleProps } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { Text } from '../../atoms/Text';\n\nexport const StyledView = styled(View)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledLabel = styled(Text)<\n Partial<StyleProps> & {\n labelPosition: LabelPositionOptions;\n }\n>`\n ${({ theme, labelPosition }) => {\n if (labelPosition === 'right')\n return css`\n margin-left: ${theme?.spacing.centi};\n `;\n else if (labelPosition === 'left')\n return css`\n margin-right: ${theme?.spacing.centi};\n `;\n }}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMxB,MAAA,WAAA,GAAc,OAAO,IAAI,CAAA,CAAA;AAAA,EAAA,EAKlC,CAAC,EAAE,KAAO,EAAA,aAAA,EAAoB,KAAA;AAC9B,EAAA,IAAI,aAAkB,KAAA,OAAA;AACpB,IAAO,OAAA,GAAA,CAAA;AAAA,qBAAA,EACU,OAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA,OAAA,IAEzB,aAAkB,KAAA,MAAA;AACzB,IAAO,OAAA,GAAA,CAAA;AAAA,sBAAA,EACW,OAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAErC,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -10,73 +10,25 @@ import { ModalView } from '../../atoms/Modal/ui/BaseModalView.js';
|
|
|
10
10
|
import 'uuid';
|
|
11
11
|
import { getStyledModal, TextTitleModal, SearchBarContainer, SelectIcon, FetchIndicator, ModalFooter, ListItem } from './styled.js';
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
var __objRest = (source, exclude) => {
|
|
33
|
-
var target = {};
|
|
34
|
-
for (var prop in source)
|
|
35
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
36
|
-
target[prop] = source[prop];
|
|
37
|
-
if (source != null && __getOwnPropSymbols)
|
|
38
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
39
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
40
|
-
target[prop] = source[prop];
|
|
41
|
-
}
|
|
42
|
-
return target;
|
|
43
|
-
};
|
|
44
|
-
const Component = (_a) => {
|
|
45
|
-
var _b = _a, {
|
|
46
|
-
options,
|
|
47
|
-
keyExtractor,
|
|
48
|
-
labelExtractor,
|
|
49
|
-
hideSearchBar,
|
|
50
|
-
searchBarPlaceholder,
|
|
51
|
-
focused,
|
|
52
|
-
type,
|
|
53
|
-
value,
|
|
54
|
-
onSelect,
|
|
55
|
-
onSearch,
|
|
56
|
-
selectModalTitle,
|
|
57
|
-
selectModalTitleComponent,
|
|
58
|
-
confirmButtonText,
|
|
59
|
-
loading,
|
|
60
|
-
close,
|
|
61
|
-
closeOnPick
|
|
62
|
-
} = _b, others = __objRest(_b, [
|
|
63
|
-
"options",
|
|
64
|
-
"keyExtractor",
|
|
65
|
-
"labelExtractor",
|
|
66
|
-
"hideSearchBar",
|
|
67
|
-
"searchBarPlaceholder",
|
|
68
|
-
"focused",
|
|
69
|
-
"type",
|
|
70
|
-
"value",
|
|
71
|
-
"onSelect",
|
|
72
|
-
"onSearch",
|
|
73
|
-
"selectModalTitle",
|
|
74
|
-
"selectModalTitleComponent",
|
|
75
|
-
"confirmButtonText",
|
|
76
|
-
"loading",
|
|
77
|
-
"close",
|
|
78
|
-
"closeOnPick"
|
|
79
|
-
]);
|
|
13
|
+
const Component = ({
|
|
14
|
+
options,
|
|
15
|
+
keyExtractor,
|
|
16
|
+
labelExtractor,
|
|
17
|
+
hideSearchBar,
|
|
18
|
+
searchBarPlaceholder,
|
|
19
|
+
focused,
|
|
20
|
+
type,
|
|
21
|
+
value,
|
|
22
|
+
onSelect,
|
|
23
|
+
onSearch,
|
|
24
|
+
selectModalTitle,
|
|
25
|
+
selectModalTitleComponent,
|
|
26
|
+
confirmButtonText,
|
|
27
|
+
loading,
|
|
28
|
+
close,
|
|
29
|
+
closeOnPick,
|
|
30
|
+
...others
|
|
31
|
+
}) => {
|
|
80
32
|
const [selectedValues, setSelectedValues] = React.useState([]);
|
|
81
33
|
const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
|
|
82
34
|
const ModalComponent = React.useMemo(
|
|
@@ -91,7 +43,8 @@ const Component = (_a) => {
|
|
|
91
43
|
}, [value, focused, setSelectedValues]);
|
|
92
44
|
const getData = React.useCallback(
|
|
93
45
|
(options2) => {
|
|
94
|
-
return options2
|
|
46
|
+
return options2?.map((option, index) => ({
|
|
47
|
+
...option,
|
|
95
48
|
_checked: type === "multi" ? !!selectedValues.find(
|
|
96
49
|
(value2) => keyExtractor(option, index) == keyExtractor(value2, index)
|
|
97
50
|
) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
|
|
@@ -133,7 +86,7 @@ const Component = (_a) => {
|
|
|
133
86
|
onSelect(
|
|
134
87
|
type === "single" ? selectedValues[0] : selectedValues
|
|
135
88
|
);
|
|
136
|
-
close
|
|
89
|
+
close?.();
|
|
137
90
|
}, [selectedValues]);
|
|
138
91
|
const optionBuilder = React.useCallback(
|
|
139
92
|
({ item }) => /* @__PURE__ */ React.createElement(MemoizedOption, {
|
|
@@ -162,10 +115,11 @@ const Component = (_a) => {
|
|
|
162
115
|
style: { maxWidth: RFValue(250) }
|
|
163
116
|
}, selectModalTitle) : null;
|
|
164
117
|
const headerContent = selectModalTitleComponent ? selectModalTitleComponent : titleTextModal;
|
|
165
|
-
return /* @__PURE__ */ React.createElement(ModalView,
|
|
118
|
+
return /* @__PURE__ */ React.createElement(ModalView, {
|
|
119
|
+
...others,
|
|
166
120
|
BoxComponent: ModalComponent,
|
|
167
121
|
showCloseBar: false
|
|
168
|
-
}
|
|
122
|
+
}, /* @__PURE__ */ React.createElement(Header, {
|
|
169
123
|
rightButton: {
|
|
170
124
|
onPress: close,
|
|
171
125
|
icon: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../../src/components/molecules/Select/Modal.tsx"],"sourcesContent":["import {\n Checkbox,\n getStatusBarHeight,\n RadioButton,\n RFValue,\n useDebouncedState,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, ListRenderItemInfo, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n FetchIndicator,\n getStyledModal,\n ListItem,\n ModalFooter,\n SearchBarContainer,\n SelectIcon,\n TextTitleModal,\n} from './styled';\n\ninterface LoadingProps {\n loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n options,\n keyExtractor,\n labelExtractor,\n hideSearchBar,\n searchBarPlaceholder,\n focused,\n type,\n value,\n onSelect,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n confirmButtonText,\n loading,\n close,\n closeOnPick,\n ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n const ModalComponent = React.useMemo(\n () => getStyledModal(getStatusBarHeight(true)),\n []\n );\n const _closeOnPick = closeOnPick && type === 'single';\n\n // Resets the temporary state to the initial state whenever the\n // modal is reopened or the value changes\n React.useEffect(() => {\n setSelectedValues(\n (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n );\n }, [value, focused, setSelectedValues]);\n\n const getData = React.useCallback(\n (options: Data[]) => {\n return options?.map((option, index) => ({\n ...option,\n _checked:\n type === 'multi'\n ? !!selectedValues.find(\n value =>\n keyExtractor(option, index) == keyExtractor(value, index)\n )\n : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n keyExtractor(option, index),\n }));\n },\n [keyExtractor, selectedValues, type]\n );\n\n const data = React.useMemo(\n () => (typeof options !== 'function' ? getData(options) : []),\n [options, getData]\n );\n\n const handlePressItem = React.useCallback(\n (option: Data) => {\n setSelectedValues(selectedValues => {\n if (type === 'multi') {\n const newArr: Data[] = [];\n let found = false;\n for (const value of selectedValues) {\n if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n else found = true;\n }\n if (!found) newArr.push(option);\n return newArr;\n }\n return keyExtractor((selectedValues[0] || {}) as Data) ===\n keyExtractor(option)\n ? []\n : [option];\n });\n },\n [selectedValues, setSelectedValues, keyExtractor, type]\n );\n\n React.useEffect(() => {\n if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {\n handleConfirm();\n }\n }, [selectedValues[0], value, closeOnPick]);\n\n const handleConfirm = React.useCallback(() => {\n // TS Workaround since TS won't infer the ternary operator's result type correctly\n type OnSelectArg = Parameters<typeof onSelect>[0];\n onSelect(\n (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n );\n close?.();\n }, [selectedValues]);\n\n const optionBuilder = React.useCallback(\n ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (\n <MemoizedOption\n item={item}\n type={type}\n handlePressItem={handlePressItem}\n labelExtractor={labelExtractor}\n />\n ),\n []\n );\n\n const anyChecked = data.filter(item => item._checked).length;\n const dataLengthChanged = data.length;\n\n const memoizedFlatlist = React.useMemo(\n () => (\n <FlatList\n data={data}\n keyExtractor={keyExtractor}\n fadingEdgeLength={200}\n renderItem={optionBuilder}\n />\n ),\n [selectedValues, anyChecked, dataLengthChanged]\n );\n\n const titleTextModal = selectModalTitle ? (\n <TextTitleModal\n typography=\"h4\"\n fontWeight=\"bold\"\n numberOfLines={3}\n style={{ maxWidth: RFValue(250) }}\n >\n {selectModalTitle}\n </TextTitleModal>\n ) : null;\n\n const headerContent = selectModalTitleComponent\n ? selectModalTitleComponent\n : titleTextModal;\n\n return (\n <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n <Header\n rightButton={{\n onPress: close,\n icon: {\n name: 'close',\n type: 'material-community',\n fontColor: 'light',\n },\n }}\n >\n {headerContent}\n </Header>\n\n {!hideSearchBar && (\n <SearchBarContainer>\n <Input\n placeholder={searchBarPlaceholder}\n value={searchArg}\n onChange={setSearchArg}\n leftComponent={\n <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n }\n />\n </SearchBarContainer>\n )}\n\n {loading && (\n <FetchIndicator animating={true} color={'grey'} size={'large'} />\n )}\n\n {memoizedFlatlist}\n\n {!_closeOnPick && (\n <ModalFooter>\n <Button\n variant={'filled'}\n color={'primary'}\n onPress={handleConfirm}\n disabled={loading}\n >\n <Text fontColor={'light'} fontWeight=\"bold\">\n {confirmButtonText}\n </Text>\n </Button>\n </ModalFooter>\n )}\n </ModalView>\n );\n};\n\ninterface IOption<T> {\n item: T & { _checked: boolean };\n type: 'single' | 'multi';\n labelExtractor: (option: T) => string;\n handlePressItem: (option: T) => void;\n}\n\nconst MemoizedOption = <T,>({\n handlePressItem,\n labelExtractor,\n item,\n type,\n}: IOption<T>): JSX.Element => {\n return React.useMemo(() => {\n const label = labelExtractor(item);\n return (\n <ListItem onPress={() => handlePressItem(item)}>\n <View pointerEvents={'none'}>\n {type === 'multi' ? (\n <Checkbox\n color={'primary'}\n labelPosition={'right'}\n checked={item._checked}\n >\n <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n {label}\n </Text>\n </Checkbox>\n ) : (\n <RadioButton\n color={'primary'}\n labelPosition={'right'}\n checked={item._checked}\n >\n <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n {label}\n </Text>\n </RadioButton>\n )}\n </View>\n </ListItem>\n );\n }, [item._checked]);\n};\n\nexport const Modal = Component;\n"],"names":["options","value","selectedValues"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../../src/components/molecules/Select/Modal.tsx"],"sourcesContent":["import {\n Checkbox,\n getStatusBarHeight,\n RadioButton,\n RFValue,\n useDebouncedState,\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, ListRenderItemInfo, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n FetchIndicator,\n getStyledModal,\n ListItem,\n ModalFooter,\n SearchBarContainer,\n SelectIcon,\n TextTitleModal,\n} from './styled';\n\ninterface LoadingProps {\n loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n options,\n keyExtractor,\n labelExtractor,\n hideSearchBar,\n searchBarPlaceholder,\n focused,\n type,\n value,\n onSelect,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n confirmButtonText,\n loading,\n close,\n closeOnPick,\n ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n const ModalComponent = React.useMemo(\n () => getStyledModal(getStatusBarHeight(true)),\n []\n );\n const _closeOnPick = closeOnPick && type === 'single';\n\n // Resets the temporary state to the initial state whenever the\n // modal is reopened or the value changes\n React.useEffect(() => {\n setSelectedValues(\n (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n );\n }, [value, focused, setSelectedValues]);\n\n const getData = React.useCallback(\n (options: Data[]) => {\n return options?.map((option, index) => ({\n ...option,\n _checked:\n type === 'multi'\n ? !!selectedValues.find(\n value =>\n keyExtractor(option, index) == keyExtractor(value, index)\n )\n : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n keyExtractor(option, index),\n }));\n },\n [keyExtractor, selectedValues, type]\n );\n\n const data = React.useMemo(\n () => (typeof options !== 'function' ? getData(options) : []),\n [options, getData]\n );\n\n const handlePressItem = React.useCallback(\n (option: Data) => {\n setSelectedValues(selectedValues => {\n if (type === 'multi') {\n const newArr: Data[] = [];\n let found = false;\n for (const value of selectedValues) {\n if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n else found = true;\n }\n if (!found) newArr.push(option);\n return newArr;\n }\n return keyExtractor((selectedValues[0] || {}) as Data) ===\n keyExtractor(option)\n ? []\n : [option];\n });\n },\n [selectedValues, setSelectedValues, keyExtractor, type]\n );\n\n React.useEffect(() => {\n if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {\n handleConfirm();\n }\n }, [selectedValues[0], value, closeOnPick]);\n\n const handleConfirm = React.useCallback(() => {\n // TS Workaround since TS won't infer the ternary operator's result type correctly\n type OnSelectArg = Parameters<typeof onSelect>[0];\n onSelect(\n (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n );\n close?.();\n }, [selectedValues]);\n\n const optionBuilder = React.useCallback(\n ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (\n <MemoizedOption\n item={item}\n type={type}\n handlePressItem={handlePressItem}\n labelExtractor={labelExtractor}\n />\n ),\n []\n );\n\n const anyChecked = data.filter(item => item._checked).length;\n const dataLengthChanged = data.length;\n\n const memoizedFlatlist = React.useMemo(\n () => (\n <FlatList\n data={data}\n keyExtractor={keyExtractor}\n fadingEdgeLength={200}\n renderItem={optionBuilder}\n />\n ),\n [selectedValues, anyChecked, dataLengthChanged]\n );\n\n const titleTextModal = selectModalTitle ? (\n <TextTitleModal\n typography=\"h4\"\n fontWeight=\"bold\"\n numberOfLines={3}\n style={{ maxWidth: RFValue(250) }}\n >\n {selectModalTitle}\n </TextTitleModal>\n ) : null;\n\n const headerContent = selectModalTitleComponent\n ? selectModalTitleComponent\n : titleTextModal;\n\n return (\n <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n <Header\n rightButton={{\n onPress: close,\n icon: {\n name: 'close',\n type: 'material-community',\n fontColor: 'light',\n },\n }}\n >\n {headerContent}\n </Header>\n\n {!hideSearchBar && (\n <SearchBarContainer>\n <Input\n placeholder={searchBarPlaceholder}\n value={searchArg}\n onChange={setSearchArg}\n leftComponent={\n <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n }\n />\n </SearchBarContainer>\n )}\n\n {loading && (\n <FetchIndicator animating={true} color={'grey'} size={'large'} />\n )}\n\n {memoizedFlatlist}\n\n {!_closeOnPick && (\n <ModalFooter>\n <Button\n variant={'filled'}\n color={'primary'}\n onPress={handleConfirm}\n disabled={loading}\n >\n <Text fontColor={'light'} fontWeight=\"bold\">\n {confirmButtonText}\n </Text>\n </Button>\n </ModalFooter>\n )}\n </ModalView>\n );\n};\n\ninterface IOption<T> {\n item: T & { _checked: boolean };\n type: 'single' | 'multi';\n labelExtractor: (option: T) => string;\n handlePressItem: (option: T) => void;\n}\n\nconst MemoizedOption = <T,>({\n handlePressItem,\n labelExtractor,\n item,\n type,\n}: IOption<T>): JSX.Element => {\n return React.useMemo(() => {\n const label = labelExtractor(item);\n return (\n <ListItem onPress={() => handlePressItem(item)}>\n <View pointerEvents={'none'}>\n {type === 'multi' ? (\n <Checkbox\n color={'primary'}\n labelPosition={'right'}\n checked={item._checked}\n >\n <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n {label}\n </Text>\n </Checkbox>\n ) : (\n <RadioButton\n color={'primary'}\n labelPosition={'right'}\n checked={item._checked}\n >\n <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n {label}\n </Text>\n </RadioButton>\n )}\n </View>\n </ListItem>\n );\n }, [item._checked]);\n};\n\nexport const Modal = Component;\n"],"names":["options","value","selectedValues"],"mappings":"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"}
|
|
@@ -9,92 +9,37 @@ import 'uuid';
|
|
|
9
9
|
import { useLazyModalManager } from '../../atoms/Modal/useLazyModalManager.js';
|
|
10
10
|
import Text from '../../atoms/Text/Text.js';
|
|
11
11
|
import { Modal } from './Modal.js';
|
|
12
|
-
import {
|
|
12
|
+
import { SelectIcon, StyledSelectionText } from './styled.js';
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var _b = _a, {
|
|
44
|
-
value,
|
|
45
|
-
options,
|
|
46
|
-
keyExtractor,
|
|
47
|
-
groupKeyExtractor,
|
|
48
|
-
onSelect,
|
|
49
|
-
type,
|
|
50
|
-
labelExtractor,
|
|
51
|
-
placeholder,
|
|
52
|
-
onFocus,
|
|
53
|
-
onBlur,
|
|
54
|
-
disabled,
|
|
55
|
-
onSearch,
|
|
56
|
-
selectModalTitle,
|
|
57
|
-
selectModalTitleComponent,
|
|
58
|
-
searchBarPlaceholder,
|
|
59
|
-
hideSearchBar,
|
|
60
|
-
confirmButtonText,
|
|
61
|
-
rightComponent,
|
|
62
|
-
variant = "default",
|
|
63
|
-
hintComponent,
|
|
64
|
-
hint,
|
|
65
|
-
style,
|
|
66
|
-
controlComponent,
|
|
67
|
-
closeOnPick = type === "single",
|
|
68
|
-
label,
|
|
69
|
-
numberOfLines
|
|
70
|
-
} = _b, rest = __objRest(_b, [
|
|
71
|
-
"value",
|
|
72
|
-
"options",
|
|
73
|
-
"keyExtractor",
|
|
74
|
-
"groupKeyExtractor",
|
|
75
|
-
"onSelect",
|
|
76
|
-
"type",
|
|
77
|
-
"labelExtractor",
|
|
78
|
-
"placeholder",
|
|
79
|
-
"onFocus",
|
|
80
|
-
"onBlur",
|
|
81
|
-
"disabled",
|
|
82
|
-
"onSearch",
|
|
83
|
-
"selectModalTitle",
|
|
84
|
-
"selectModalTitleComponent",
|
|
85
|
-
"searchBarPlaceholder",
|
|
86
|
-
"hideSearchBar",
|
|
87
|
-
"confirmButtonText",
|
|
88
|
-
"rightComponent",
|
|
89
|
-
"variant",
|
|
90
|
-
"hintComponent",
|
|
91
|
-
"hint",
|
|
92
|
-
"style",
|
|
93
|
-
"controlComponent",
|
|
94
|
-
"closeOnPick",
|
|
95
|
-
"label",
|
|
96
|
-
"numberOfLines"
|
|
97
|
-
]);
|
|
14
|
+
function Select({
|
|
15
|
+
value,
|
|
16
|
+
options,
|
|
17
|
+
keyExtractor,
|
|
18
|
+
groupKeyExtractor,
|
|
19
|
+
onSelect,
|
|
20
|
+
type,
|
|
21
|
+
labelExtractor,
|
|
22
|
+
placeholder,
|
|
23
|
+
onFocus,
|
|
24
|
+
onBlur,
|
|
25
|
+
disabled,
|
|
26
|
+
onSearch,
|
|
27
|
+
selectModalTitle,
|
|
28
|
+
selectModalTitleComponent,
|
|
29
|
+
searchBarPlaceholder,
|
|
30
|
+
hideSearchBar,
|
|
31
|
+
confirmButtonText,
|
|
32
|
+
rightComponent,
|
|
33
|
+
variant = "default",
|
|
34
|
+
hintComponent,
|
|
35
|
+
hint,
|
|
36
|
+
style,
|
|
37
|
+
controlComponent,
|
|
38
|
+
closeOnPick = type === "single",
|
|
39
|
+
label,
|
|
40
|
+
numberOfLines,
|
|
41
|
+
...rest
|
|
42
|
+
}) {
|
|
98
43
|
const { focused, handleBlur, handleFocus } = useInputFocus(
|
|
99
44
|
onFocus,
|
|
100
45
|
onBlur,
|
|
@@ -145,7 +90,7 @@ function Select(_a) {
|
|
|
145
90
|
} else
|
|
146
91
|
setSelectOptions(result);
|
|
147
92
|
} else {
|
|
148
|
-
if (value
|
|
93
|
+
if (value?.length) {
|
|
149
94
|
const selectedValues = value.filter(
|
|
150
95
|
(v) => !result.find(
|
|
151
96
|
(current) => keyExtractor(v) === keyExtractor(current)
|
|
@@ -172,7 +117,7 @@ function Select(_a) {
|
|
|
172
117
|
return _placeholder;
|
|
173
118
|
else {
|
|
174
119
|
const options2 = selectOptions.length > 0 ? selectOptions : value;
|
|
175
|
-
return options2
|
|
120
|
+
return options2?.reduce(
|
|
176
121
|
(acc, option, index) => value.find(
|
|
177
122
|
(key) => keyExtractor(option, index) == keyExtractor(key, index)
|
|
178
123
|
) ? acc + labelExtractor(option) + ", " : acc,
|
|
@@ -182,10 +127,10 @@ function Select(_a) {
|
|
|
182
127
|
} else {
|
|
183
128
|
if (!value)
|
|
184
129
|
return _placeholder;
|
|
185
|
-
const selectedOption = selectOptions
|
|
130
|
+
const selectedOption = selectOptions?.find(
|
|
186
131
|
(option, index) => keyExtractor(option, index) == keyExtractor(value, index)
|
|
187
132
|
);
|
|
188
|
-
return labelExtractor(selectedOption
|
|
133
|
+
return labelExtractor(selectedOption ?? value);
|
|
189
134
|
}
|
|
190
135
|
}, [_placeholder, value, selectOptions]);
|
|
191
136
|
modal.sync(
|
|
@@ -214,7 +159,7 @@ function Select(_a) {
|
|
|
214
159
|
handleFocus();
|
|
215
160
|
await handleLazyFocus();
|
|
216
161
|
};
|
|
217
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React.createElement(HintInputContainer,
|
|
162
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || "") : /* @__PURE__ */ React.createElement(HintInputContainer, {
|
|
218
163
|
viewStyle: style,
|
|
219
164
|
onPress: handlePressInput,
|
|
220
165
|
focused,
|
|
@@ -228,8 +173,9 @@ function Select(_a) {
|
|
|
228
173
|
name: "chevron-down",
|
|
229
174
|
type: "ionicon",
|
|
230
175
|
size: "centi"
|
|
231
|
-
}), rightComponent)
|
|
232
|
-
|
|
176
|
+
}), rightComponent),
|
|
177
|
+
...rest
|
|
178
|
+
}, /* @__PURE__ */ React.createElement(StyledSelectionText, {
|
|
233
179
|
numberOfLines,
|
|
234
180
|
fontWeight: "bold",
|
|
235
181
|
disabled
|