@lmb-it/kitsconcerto-native 0.1.257 → 0.1.259
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/apps/mobile/src/Core/Dropdown/index.cjs +96 -76
- package/apps/mobile/src/Core/Dropdown/index.cjs.map +1 -1
- package/apps/mobile/src/Core/Dropdown/index.js +98 -78
- package/apps/mobile/src/Core/Dropdown/index.js.map +1 -1
- package/apps/mobile/src/Core/Dropdown/panelGeometry.cjs +43 -0
- package/apps/mobile/src/Core/Dropdown/panelGeometry.cjs.map +1 -0
- package/apps/mobile/src/Core/Dropdown/panelGeometry.js +38 -0
- package/apps/mobile/src/Core/Dropdown/panelGeometry.js.map +1 -0
- package/apps/mobile/src/Core/MultiSelect/index.cjs +34 -5
- package/apps/mobile/src/Core/MultiSelect/index.cjs.map +1 -1
- package/apps/mobile/src/Core/MultiSelect/index.js +34 -5
- package/apps/mobile/src/Core/MultiSelect/index.js.map +1 -1
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs +24 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs.map +1 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js +22 -0
- package/apps/mobile/src/Factory/helpers/useKeyboardHeight.js.map +1 -0
- package/form/selects/Dropdown/index.cjs +11 -2
- package/form/selects/Dropdown/index.cjs.map +1 -1
- package/form/selects/Dropdown/index.js +11 -2
- package/form/selects/Dropdown/index.js.map +1 -1
- package/form/selects/ListBox/index.cjs +6 -2
- package/form/selects/ListBox/index.cjs.map +1 -1
- package/form/selects/ListBox/index.js +6 -2
- package/form/selects/ListBox/index.js.map +1 -1
- package/form/selects/MultiSelect/index.cjs +11 -2
- package/form/selects/MultiSelect/index.cjs.map +1 -1
- package/form/selects/MultiSelect/index.js +11 -2
- package/form/selects/MultiSelect/index.js.map +1 -1
- package/form/selects/helpers/SelectPopupOverlay.cjs +200 -0
- package/form/selects/helpers/SelectPopupOverlay.cjs.map +1 -0
- package/form/selects/helpers/SelectPopupOverlay.js +196 -0
- package/form/selects/helpers/SelectPopupOverlay.js.map +1 -0
- package/form-renderer/components/fields/Select/index.cjs +2 -0
- package/form-renderer/components/fields/Select/index.cjs.map +1 -1
- package/form-renderer/components/fields/Select/index.js +2 -0
- package/form-renderer/components/fields/Select/index.js.map +1 -1
- package/index.d.ts +15 -0
- package/locale/ar.json.cjs +3 -0
- package/locale/ar.json.cjs.map +1 -1
- package/locale/ar.json.js +3 -1
- package/locale/ar.json.js.map +1 -1
- package/locale/en.json.cjs +3 -0
- package/locale/en.json.cjs.map +1 -1
- package/locale/en.json.js +3 -1
- package/locale/en.json.js.map +1 -1
- package/package.json +1 -1
|
@@ -82,9 +82,11 @@ import '../../../apps/mobile/src/Core/Input/Field.js';
|
|
|
82
82
|
import '../../../apps/mobile/src/Core/Input/Slot.js';
|
|
83
83
|
import { ClHelper } from '../../helpers/Functions.js';
|
|
84
84
|
import { useSelectBase } from '../hooks/useSelectBase.js';
|
|
85
|
+
import { useLanguage } from '../../../hooks/locale.js';
|
|
85
86
|
import '../../../contexts/DialogContext.js';
|
|
86
87
|
import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
|
|
87
88
|
import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
|
|
89
|
+
import SelectPopupOverlay from '../helpers/SelectPopupOverlay.js';
|
|
88
90
|
import KitsContainer from '../../helpers/FormContainer/index.js';
|
|
89
91
|
import 'axios';
|
|
90
92
|
import '../SelectContext.js';
|
|
@@ -115,9 +117,11 @@ const KitsDropdown = ({ className, ref, ...rawProps }) => {
|
|
|
115
117
|
filterBy,
|
|
116
118
|
loading,
|
|
117
119
|
showClear,
|
|
118
|
-
containerStyle
|
|
120
|
+
containerStyle,
|
|
121
|
+
popup
|
|
119
122
|
} = props;
|
|
120
123
|
const { list, keys, onChange, selectedValue } = useSelectBase();
|
|
124
|
+
const { t, isRTL } = useLanguage();
|
|
121
125
|
const ClState = ClHelper({
|
|
122
126
|
inputSize: inputSize ?? "",
|
|
123
127
|
isChecked: false,
|
|
@@ -128,7 +132,12 @@ const KitsDropdown = ({ className, ref, ...rawProps }) => {
|
|
|
128
132
|
const Element = /* @__PURE__ */ jsx(
|
|
129
133
|
Dropdown,
|
|
130
134
|
{
|
|
131
|
-
emptyFilterMessage,
|
|
135
|
+
emptyFilterMessage: emptyFilterMessage ?? t("emptyFilterMessage"),
|
|
136
|
+
filterPlaceholder: t("searchPlaceholder"),
|
|
137
|
+
isRTL,
|
|
138
|
+
popup,
|
|
139
|
+
popupTitle: label ?? placeholder,
|
|
140
|
+
renderPopup: ({ visible, onClose, title, children }) => /* @__PURE__ */ jsx(SelectPopupOverlay, { visible, onClose, title, children }),
|
|
132
141
|
value: dropdownValue,
|
|
133
142
|
placeholder,
|
|
134
143
|
options: Array.isArray(list) ? list : [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/Dropdown/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dropdown } from \"@lmb-it/kitsconcertomobile\";\nimport type { IDropdownSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { KitsContainer } from \"../../../_compat\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useResolvedStyle} from \"../../../hooks\";\n\nconst KitsDropdown = ({ className, ref, ...rawProps }: IDropdownSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('DropdownSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n rightAddon,\n leftAddon,\n errors,\n invalid,\n disabled,\n required,\n label,\n localProps,\n helperText,\n isFloatedLabel,\n withFilter,\n attached,\n inputSize,\n placeholder,\n hideError,\n virtualScroll,\n emptyFilterMessage,\n filterBy,\n loading,\n showClear,\n containerStyle
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/Dropdown/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dropdown } from \"@lmb-it/kitsconcertomobile\";\nimport type { IDropdownSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { KitsContainer } from \"../../../_compat\";\nimport { ClHelper } from \"../../helpers/Functions\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"../../../hooks\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\n\nconst KitsDropdown = ({ className, ref, ...rawProps }: IDropdownSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('DropdownSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n rightAddon,\n leftAddon,\n errors,\n invalid,\n disabled,\n required,\n label,\n localProps,\n helperText,\n isFloatedLabel,\n withFilter,\n attached,\n inputSize,\n placeholder,\n hideError,\n virtualScroll,\n emptyFilterMessage,\n filterBy,\n loading,\n showClear,\n containerStyle,\n popup,\n } = props;\n\n const { list, keys, onChange, selectedValue } = useSelectBase();\n\n /* The panel's own copy. The native Dropdown lives in `apps/mobile`, which\n this package imports, so it cannot reach LocaleContext itself without a\n cycle between the two workspaces — the sentence is resolved here, where\n `useLanguage()` already is, and passed down as a prop.\n\n ⛔ `isRTL` is the READER's language, never `I18nManager.isRTL`. A\n consumer that forces RTL at boot keeps that process direction after the\n reader switches to English, and the filter field must follow the reader. */\n const { t, isRTL } = useLanguage();\n\n const ClState = ClHelper({\n inputSize: inputSize ?? \"\",\n isChecked: false,\n isInvalid: !!invalid,\n isDisabled: !!disabled,\n });\n\n const dropdownValue = selectedValue != null && typeof selectedValue !== 'object'\n ? selectedValue.toString()\n : selectedValue;\n\n const Element = (\n <Dropdown\n emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n filterPlaceholder={t('searchPlaceholder')}\n isRTL={isRTL}\n popup={popup}\n popupTitle={label ?? placeholder}\n /* The container is this library's own Dialog. It is injected rather\n than imported by the native Dropdown because that component lives\n in `apps/mobile`, which this package imports — the reverse import\n would be a cycle between the two workspaces. */\n renderPopup={({visible, onClose, title, children}: {\n visible: boolean;\n onClose: () => void;\n title?: React.ReactNode;\n children: React.ReactNode;\n }) => (\n <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n {children}\n </SelectPopupOverlay>\n )}\n value={dropdownValue}\n placeholder={placeholder}\n options={Array.isArray(list) ? list : []}\n disabled={disabled}\n loading={loading}\n showClear={showClear ?? (!required && selectedValue != null)}\n style={{ width: '100%', height: attached ? '100%' : undefined, borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n onChange={onChange}\n {...keys}\n invalid={hideError && !!invalid}\n filter={!!withFilter}\n filterBy={filterBy ?? 'label'}\n virtualScrollerOptions={virtualScroll}\n className={`w-full ${className ?? ''} ${ClState}`}\n {...(localProps ? localProps : {})}\n />\n );\n\n if (attached) {\n return Element;\n }\n\n return (\n <KitsContainer\n id={id}\n inputSize={inputSize}\n isFloatedLabel={isFloatedLabel}\n rightAddon={rightAddon}\n leftAddon={leftAddon}\n required={required}\n hideError={hideError}\n errors={errors}\n helperText={helperText}\n invalid={invalid}\n label={label}\n containerStyle={containerStyle}\n elementStyles={elementStyles}\n >\n {Element}\n </KitsContainer>\n );\n}\nexport default KitsDropdown;\n"],"names":[],"mappings":"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"}
|
|
@@ -87,6 +87,7 @@ require('../../../apps/mobile/src/Core/RadioButton/index.cjs');
|
|
|
87
87
|
require('../../../apps/mobile/src/Core/Input/index.cjs');
|
|
88
88
|
require('../../../apps/mobile/src/Core/Input/Field.cjs');
|
|
89
89
|
require('../../../apps/mobile/src/Core/Input/Slot.cjs');
|
|
90
|
+
var locale = require('../../../hooks/locale.cjs');
|
|
90
91
|
require('../../../contexts/DialogContext.cjs');
|
|
91
92
|
var useComponentDefaults = require('../../../hooks/useComponentDefaults.cjs');
|
|
92
93
|
var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
|
|
@@ -113,6 +114,7 @@ const KitsListBox = (rawProps) => {
|
|
|
113
114
|
} = props;
|
|
114
115
|
const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase.useSelectBase();
|
|
115
116
|
const [filterText, setFilterText] = React.useState("");
|
|
117
|
+
const { t: translate, isRTL } = locale.useLanguage();
|
|
116
118
|
const t = style.resolveThemeTokenForNative;
|
|
117
119
|
const primaryBg = t("highlight-bg") || t("primary.100") || "#E8EAF6";
|
|
118
120
|
const primaryText = t("primary.700") || "#303F9F";
|
|
@@ -217,7 +219,7 @@ const KitsListBox = (rawProps) => {
|
|
|
217
219
|
{
|
|
218
220
|
value: filterText,
|
|
219
221
|
onChangeText: setFilterText,
|
|
220
|
-
placeholder: "
|
|
222
|
+
placeholder: translate("searchPlaceholder"),
|
|
221
223
|
placeholderTextColor: placeholderColor,
|
|
222
224
|
style: {
|
|
223
225
|
borderBottomWidth: 1,
|
|
@@ -225,7 +227,9 @@ const KitsListBox = (rawProps) => {
|
|
|
225
227
|
paddingHorizontal: 12,
|
|
226
228
|
paddingVertical: 8,
|
|
227
229
|
fontSize: 14,
|
|
228
|
-
color: textColor
|
|
230
|
+
color: textColor,
|
|
231
|
+
textAlign: isRTL ? "right" : "left",
|
|
232
|
+
writingDirection: isRTL ? "rtl" : "ltr"
|
|
229
233
|
}
|
|
230
234
|
}
|
|
231
235
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n label,\n disabled,\n invalid,\n errors,\n helperText,\n inputSize = \"md\",\n isMultiple,\n withFilter,\n filterBy,\n hideError,\n } = props;\n\n const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n const [filterText, setFilterText] = useState(\"\");\n\n const t = resolveThemeTokenForNative;\n const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n const primaryText = t('primary.700') || '#303F9F';\n const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n const textColor = t('text') || '#1F2937';\n const placeholderColor = t('text-secondary') || '#9CA3AF';\n const groupBg = t('surface-ground') || '#F9FAFB';\n\n const isSelected = useCallback((val: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n return selectedValue.includes(val);\n }\n return selectedValue === val;\n }, [isMultiple, selectedValue]);\n\n const onSelect = useCallback((val: any, item: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n const newVals = selectedValue.includes(val)\n ? selectedValue.filter((v: any) => v !== val)\n : [...selectedValue, val];\n onChange({ target: { value: newVals } }, newVals);\n } else {\n onChange({ target: { value: val } }, item);\n }\n }, [isMultiple, selectedValue, onChange]);\n\n const filteredList = useMemo(() => {\n if (!withFilter || !filterText.trim()) return list;\n const query = filterText.toLowerCase();\n const searchKey = filterBy || labelKey;\n\n if (childrenKey) {\n return list.reduce((acc: any[], group: any) => {\n const children = group[childrenKey];\n if (Array.isArray(children)) {\n const matched = children.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n if (matched.length > 0) {\n acc.push({ ...group, [childrenKey]: matched });\n }\n }\n return acc;\n }, []);\n }\n\n return list.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n const renderItem = (item: any, index: number) => {\n const val = item[valueKey];\n const selected = isSelected(val);\n return (\n <Pressable\n key={`${val}-${index}`}\n style={{\n padding: 10,\n backgroundColor: selected ? primaryBg : 'transparent',\n }}\n onPress={() => !disabled && onSelect(val, item)}\n >\n <Text\n color={selected ? primaryText : textColor}\n fontWeight={selected ? \"bold\" : \"normal\"}\n size={inputSize}\n >\n {item[labelKey]}\n </Text>\n </Pressable>\n );\n };\n\n const renderGroupedItems = () => {\n return filteredList.map((group: any, gi: number) => {\n const children = group[childrenKey!];\n if (!Array.isArray(children)) {\n return renderItem(group, gi);\n }\n return (\n <Box key={`group-${gi}`}>\n <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n {group[labelKey]}\n </Text>\n </Box>\n {children.map((item: any, ci: number) => renderItem(item, ci))}\n </Box>\n );\n });\n };\n\n return (\n <KitsContainer\n id={id}\n label={label}\n invalid={!!invalid}\n hideError={hideError}\n helperText={helperText}\n errors={errors}\n elementStyles={elementStyles}\n >\n <Box\n borderWidth={1}\n borderColor={borderClr}\n borderRadius=\"$sm\"\n height={250}\n opacity={disabled ? 0.5 : 1}\n style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n >\n {withFilter && (\n <TextInput\n value={filterText}\n onChangeText={setFilterText}\n placeholder=\"Search...\"\n placeholderTextColor={placeholderColor}\n style={{\n borderBottomWidth: 1,\n borderBottomColor: borderClr,\n paddingHorizontal: 12,\n paddingVertical: 8,\n fontSize: 14,\n color: textColor,\n }}\n />\n )}\n <ScrollView>\n <VStack>\n {childrenKey\n ? renderGroupedItems()\n : filteredList.map((item: any, i: number) => renderItem(item, i))\n }\n </VStack>\n </ScrollView>\n </Box>\n </KitsContainer>\n );\n};\n\nexport default KitsListBox;\n"],"names":["useComponentDefaults","useResolvedStyle","useSelectBase","useState","resolveThemeTokenForNative","useCallback","useMemo","jsx","Pressable","Text","Box","KitsContainer","jsxs","TextInput","ScrollView","VStack"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useLanguage, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n label,\n disabled,\n invalid,\n errors,\n helperText,\n inputSize = \"md\",\n isMultiple,\n withFilter,\n filterBy,\n hideError,\n } = props;\n\n const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n const [filterText, setFilterText] = useState(\"\");\n\n /* Same rule as the Dropdown's panel: the filter's copy and its edge come\n from the reader's language, not from the platform's layout direction. */\n const { t: translate, isRTL } = useLanguage();\n\n const t = resolveThemeTokenForNative;\n const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n const primaryText = t('primary.700') || '#303F9F';\n const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n const textColor = t('text') || '#1F2937';\n const placeholderColor = t('text-secondary') || '#9CA3AF';\n const groupBg = t('surface-ground') || '#F9FAFB';\n\n const isSelected = useCallback((val: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n return selectedValue.includes(val);\n }\n return selectedValue === val;\n }, [isMultiple, selectedValue]);\n\n const onSelect = useCallback((val: any, item: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n const newVals = selectedValue.includes(val)\n ? selectedValue.filter((v: any) => v !== val)\n : [...selectedValue, val];\n onChange({ target: { value: newVals } }, newVals);\n } else {\n onChange({ target: { value: val } }, item);\n }\n }, [isMultiple, selectedValue, onChange]);\n\n const filteredList = useMemo(() => {\n if (!withFilter || !filterText.trim()) return list;\n const query = filterText.toLowerCase();\n const searchKey = filterBy || labelKey;\n\n if (childrenKey) {\n return list.reduce((acc: any[], group: any) => {\n const children = group[childrenKey];\n if (Array.isArray(children)) {\n const matched = children.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n if (matched.length > 0) {\n acc.push({ ...group, [childrenKey]: matched });\n }\n }\n return acc;\n }, []);\n }\n\n return list.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n const renderItem = (item: any, index: number) => {\n const val = item[valueKey];\n const selected = isSelected(val);\n return (\n <Pressable\n key={`${val}-${index}`}\n style={{\n padding: 10,\n backgroundColor: selected ? primaryBg : 'transparent',\n }}\n onPress={() => !disabled && onSelect(val, item)}\n >\n <Text\n color={selected ? primaryText : textColor}\n fontWeight={selected ? \"bold\" : \"normal\"}\n size={inputSize}\n >\n {item[labelKey]}\n </Text>\n </Pressable>\n );\n };\n\n const renderGroupedItems = () => {\n return filteredList.map((group: any, gi: number) => {\n const children = group[childrenKey!];\n if (!Array.isArray(children)) {\n return renderItem(group, gi);\n }\n return (\n <Box key={`group-${gi}`}>\n <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n {group[labelKey]}\n </Text>\n </Box>\n {children.map((item: any, ci: number) => renderItem(item, ci))}\n </Box>\n );\n });\n };\n\n return (\n <KitsContainer\n id={id}\n label={label}\n invalid={!!invalid}\n hideError={hideError}\n helperText={helperText}\n errors={errors}\n elementStyles={elementStyles}\n >\n <Box\n borderWidth={1}\n borderColor={borderClr}\n borderRadius=\"$sm\"\n height={250}\n opacity={disabled ? 0.5 : 1}\n style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n >\n {withFilter && (\n <TextInput\n value={filterText}\n onChangeText={setFilterText}\n placeholder={translate('searchPlaceholder')}\n placeholderTextColor={placeholderColor}\n style={{\n borderBottomWidth: 1,\n borderBottomColor: borderClr,\n paddingHorizontal: 12,\n paddingVertical: 8,\n fontSize: 14,\n color: textColor,\n textAlign: isRTL ? 'right' : 'left',\n writingDirection: isRTL ? 'rtl' : 'ltr',\n }}\n />\n )}\n <ScrollView>\n <VStack>\n {childrenKey\n ? renderGroupedItems()\n : filteredList.map((item: any, i: number) => renderItem(item, i))\n }\n </VStack>\n </ScrollView>\n </Box>\n </KitsContainer>\n );\n};\n\nexport default KitsListBox;\n"],"names":["useComponentDefaults","useResolvedStyle","useSelectBase","useState","useLanguage","resolveThemeTokenForNative","useCallback","useMemo","jsx","Pressable","Text","Box","KitsContainer","jsxs","TextInput","ScrollView","VStack"],"mappings":"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"}
|
|
@@ -83,6 +83,7 @@ import '../../../apps/mobile/src/Core/RadioButton/index.js';
|
|
|
83
83
|
import '../../../apps/mobile/src/Core/Input/index.js';
|
|
84
84
|
import '../../../apps/mobile/src/Core/Input/Field.js';
|
|
85
85
|
import '../../../apps/mobile/src/Core/Input/Slot.js';
|
|
86
|
+
import { useLanguage } from '../../../hooks/locale.js';
|
|
86
87
|
import '../../../contexts/DialogContext.js';
|
|
87
88
|
import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
|
|
88
89
|
import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
|
|
@@ -109,6 +110,7 @@ const KitsListBox = (rawProps) => {
|
|
|
109
110
|
} = props;
|
|
110
111
|
const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();
|
|
111
112
|
const [filterText, setFilterText] = useState("");
|
|
113
|
+
const { t: translate, isRTL } = useLanguage();
|
|
112
114
|
const t = resolveThemeTokenForNative;
|
|
113
115
|
const primaryBg = t("highlight-bg") || t("primary.100") || "#E8EAF6";
|
|
114
116
|
const primaryText = t("primary.700") || "#303F9F";
|
|
@@ -213,7 +215,7 @@ const KitsListBox = (rawProps) => {
|
|
|
213
215
|
{
|
|
214
216
|
value: filterText,
|
|
215
217
|
onChangeText: setFilterText,
|
|
216
|
-
placeholder: "
|
|
218
|
+
placeholder: translate("searchPlaceholder"),
|
|
217
219
|
placeholderTextColor: placeholderColor,
|
|
218
220
|
style: {
|
|
219
221
|
borderBottomWidth: 1,
|
|
@@ -221,7 +223,9 @@ const KitsListBox = (rawProps) => {
|
|
|
221
223
|
paddingHorizontal: 12,
|
|
222
224
|
paddingVertical: 8,
|
|
223
225
|
fontSize: 14,
|
|
224
|
-
color: textColor
|
|
226
|
+
color: textColor,
|
|
227
|
+
textAlign: isRTL ? "right" : "left",
|
|
228
|
+
writingDirection: isRTL ? "rtl" : "ltr"
|
|
225
229
|
}
|
|
226
230
|
}
|
|
227
231
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n label,\n disabled,\n invalid,\n errors,\n helperText,\n inputSize = \"md\",\n isMultiple,\n withFilter,\n filterBy,\n hideError,\n } = props;\n\n const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n const [filterText, setFilterText] = useState(\"\");\n\n const t = resolveThemeTokenForNative;\n const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n const primaryText = t('primary.700') || '#303F9F';\n const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n const textColor = t('text') || '#1F2937';\n const placeholderColor = t('text-secondary') || '#9CA3AF';\n const groupBg = t('surface-ground') || '#F9FAFB';\n\n const isSelected = useCallback((val: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n return selectedValue.includes(val);\n }\n return selectedValue === val;\n }, [isMultiple, selectedValue]);\n\n const onSelect = useCallback((val: any, item: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n const newVals = selectedValue.includes(val)\n ? selectedValue.filter((v: any) => v !== val)\n : [...selectedValue, val];\n onChange({ target: { value: newVals } }, newVals);\n } else {\n onChange({ target: { value: val } }, item);\n }\n }, [isMultiple, selectedValue, onChange]);\n\n const filteredList = useMemo(() => {\n if (!withFilter || !filterText.trim()) return list;\n const query = filterText.toLowerCase();\n const searchKey = filterBy || labelKey;\n\n if (childrenKey) {\n return list.reduce((acc: any[], group: any) => {\n const children = group[childrenKey];\n if (Array.isArray(children)) {\n const matched = children.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n if (matched.length > 0) {\n acc.push({ ...group, [childrenKey]: matched });\n }\n }\n return acc;\n }, []);\n }\n\n return list.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n const renderItem = (item: any, index: number) => {\n const val = item[valueKey];\n const selected = isSelected(val);\n return (\n <Pressable\n key={`${val}-${index}`}\n style={{\n padding: 10,\n backgroundColor: selected ? primaryBg : 'transparent',\n }}\n onPress={() => !disabled && onSelect(val, item)}\n >\n <Text\n color={selected ? primaryText : textColor}\n fontWeight={selected ? \"bold\" : \"normal\"}\n size={inputSize}\n >\n {item[labelKey]}\n </Text>\n </Pressable>\n );\n };\n\n const renderGroupedItems = () => {\n return filteredList.map((group: any, gi: number) => {\n const children = group[childrenKey!];\n if (!Array.isArray(children)) {\n return renderItem(group, gi);\n }\n return (\n <Box key={`group-${gi}`}>\n <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n {group[labelKey]}\n </Text>\n </Box>\n {children.map((item: any, ci: number) => renderItem(item, ci))}\n </Box>\n );\n });\n };\n\n return (\n <KitsContainer\n id={id}\n label={label}\n invalid={!!invalid}\n hideError={hideError}\n helperText={helperText}\n errors={errors}\n elementStyles={elementStyles}\n >\n <Box\n borderWidth={1}\n borderColor={borderClr}\n borderRadius=\"$sm\"\n height={250}\n opacity={disabled ? 0.5 : 1}\n style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n >\n {withFilter && (\n <TextInput\n value={filterText}\n onChangeText={setFilterText}\n placeholder=\"Search...\"\n placeholderTextColor={placeholderColor}\n style={{\n borderBottomWidth: 1,\n borderBottomColor: borderClr,\n paddingHorizontal: 12,\n paddingVertical: 8,\n fontSize: 14,\n color: textColor,\n }}\n />\n )}\n <ScrollView>\n <VStack>\n {childrenKey\n ? renderGroupedItems()\n : filteredList.map((item: any, i: number) => renderItem(item, i))\n }\n </VStack>\n </ScrollView>\n </Box>\n </KitsContainer>\n );\n};\n\nexport default KitsListBox;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/ListBox/index.native.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { ScrollView, Pressable, TextInput } from \"react-native\";\nimport { VStack, Box, Text } from '../../../_compat';\nimport type { IListBoxSelect } from \"@lmb-it/kitsconcerto-types\";\nimport { useSelectBase } from \"../hooks/useSelectBase\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport { resolveThemeTokenForNative } from \"@lmb-it/kitsconcertomobile\";\nimport { useComponentDefaults, useLanguage, useResolvedStyle } from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsListBox = (rawProps: IListBoxSelect) => {\n const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('ListBox', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n label,\n disabled,\n invalid,\n errors,\n helperText,\n inputSize = \"md\",\n isMultiple,\n withFilter,\n filterBy,\n hideError,\n } = props;\n\n const { list, labelKey, valueKey, childrenKey, onChange, selectedValue } = useSelectBase();\n\n const [filterText, setFilterText] = useState(\"\");\n\n /* Same rule as the Dropdown's panel: the filter's copy and its edge come\n from the reader's language, not from the platform's layout direction. */\n const { t: translate, isRTL } = useLanguage();\n\n const t = resolveThemeTokenForNative;\n const primaryBg = t('highlight-bg') || t('primary.100') || '#E8EAF6';\n const primaryText = t('primary.700') || '#303F9F';\n const borderClr = invalid ? (t('danger') || '#EF4444') : (t('border') || '#D1D5DB');\n const textColor = t('text') || '#1F2937';\n const placeholderColor = t('text-secondary') || '#9CA3AF';\n const groupBg = t('surface-ground') || '#F9FAFB';\n\n const isSelected = useCallback((val: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n return selectedValue.includes(val);\n }\n return selectedValue === val;\n }, [isMultiple, selectedValue]);\n\n const onSelect = useCallback((val: any, item: any) => {\n if (isMultiple && Array.isArray(selectedValue)) {\n const newVals = selectedValue.includes(val)\n ? selectedValue.filter((v: any) => v !== val)\n : [...selectedValue, val];\n onChange({ target: { value: newVals } }, newVals);\n } else {\n onChange({ target: { value: val } }, item);\n }\n }, [isMultiple, selectedValue, onChange]);\n\n const filteredList = useMemo(() => {\n if (!withFilter || !filterText.trim()) return list;\n const query = filterText.toLowerCase();\n const searchKey = filterBy || labelKey;\n\n if (childrenKey) {\n return list.reduce((acc: any[], group: any) => {\n const children = group[childrenKey];\n if (Array.isArray(children)) {\n const matched = children.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n if (matched.length > 0) {\n acc.push({ ...group, [childrenKey]: matched });\n }\n }\n return acc;\n }, []);\n }\n\n return list.filter((item: any) =>\n String(item[searchKey] ?? \"\").toLowerCase().includes(query)\n );\n }, [list, filterText, withFilter, filterBy, labelKey, childrenKey]);\n\n const renderItem = (item: any, index: number) => {\n const val = item[valueKey];\n const selected = isSelected(val);\n return (\n <Pressable\n key={`${val}-${index}`}\n style={{\n padding: 10,\n backgroundColor: selected ? primaryBg : 'transparent',\n }}\n onPress={() => !disabled && onSelect(val, item)}\n >\n <Text\n color={selected ? primaryText : textColor}\n fontWeight={selected ? \"bold\" : \"normal\"}\n size={inputSize}\n >\n {item[labelKey]}\n </Text>\n </Pressable>\n );\n };\n\n const renderGroupedItems = () => {\n return filteredList.map((group: any, gi: number) => {\n const children = group[childrenKey!];\n if (!Array.isArray(children)) {\n return renderItem(group, gi);\n }\n return (\n <Box key={`group-${gi}`}>\n <Box style={{ backgroundColor: groupBg, paddingHorizontal: 12, paddingVertical: 8 }}>\n <Text fontWeight=\"600\" color={textColor} size={inputSize}>\n {group[labelKey]}\n </Text>\n </Box>\n {children.map((item: any, ci: number) => renderItem(item, ci))}\n </Box>\n );\n });\n };\n\n return (\n <KitsContainer\n id={id}\n label={label}\n invalid={!!invalid}\n hideError={hideError}\n helperText={helperText}\n errors={errors}\n elementStyles={elementStyles}\n >\n <Box\n borderWidth={1}\n borderColor={borderClr}\n borderRadius=\"$sm\"\n height={250}\n opacity={disabled ? 0.5 : 1}\n style={resolvedRootStyle && Object.keys(resolvedRootStyle).length ? resolvedRootStyle : (Object.keys(resolvedThemeStyle).length ? resolvedThemeStyle : undefined)}\n >\n {withFilter && (\n <TextInput\n value={filterText}\n onChangeText={setFilterText}\n placeholder={translate('searchPlaceholder')}\n placeholderTextColor={placeholderColor}\n style={{\n borderBottomWidth: 1,\n borderBottomColor: borderClr,\n paddingHorizontal: 12,\n paddingVertical: 8,\n fontSize: 14,\n color: textColor,\n textAlign: isRTL ? 'right' : 'left',\n writingDirection: isRTL ? 'rtl' : 'ltr',\n }}\n />\n )}\n <ScrollView>\n <VStack>\n {childrenKey\n ? renderGroupedItems()\n : filteredList.map((item: any, i: number) => renderItem(item, i))\n }\n </VStack>\n </ScrollView>\n </Box>\n </KitsContainer>\n );\n};\n\nexport default KitsListBox;\n"],"names":[],"mappings":"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"}
|
|
@@ -88,9 +88,11 @@ var index_native = require('../../helpers/FormContainer/index.cjs');
|
|
|
88
88
|
var Functions = require('../../helpers/Functions.cjs');
|
|
89
89
|
var helper = require('../helper.cjs');
|
|
90
90
|
var useSelectBase = require('../hooks/useSelectBase.cjs');
|
|
91
|
+
var locale = require('../../../hooks/locale.cjs');
|
|
91
92
|
require('../../../contexts/DialogContext.cjs');
|
|
92
93
|
var useComponentDefaults = require('../../../hooks/useComponentDefaults.cjs');
|
|
93
94
|
var useResolvedStyle = require('../../../hooks/useResolvedStyle.cjs');
|
|
95
|
+
var SelectPopupOverlay_native = require('../helpers/SelectPopupOverlay.cjs');
|
|
94
96
|
|
|
95
97
|
const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
96
98
|
const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults.default("MultiSelect", rawProps, "Select");
|
|
@@ -117,9 +119,11 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
|
117
119
|
withFilter,
|
|
118
120
|
loading,
|
|
119
121
|
showClear,
|
|
120
|
-
valueMode
|
|
122
|
+
valueMode,
|
|
123
|
+
popup
|
|
121
124
|
} = props;
|
|
122
125
|
const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase.useSelectBase();
|
|
126
|
+
const { t, isRTL } = locale.useLanguage();
|
|
123
127
|
React.useEffect(() => {
|
|
124
128
|
helper.checkKeys(list, labelKey, !childrenKey ? valueKey : void 0);
|
|
125
129
|
}, [list]);
|
|
@@ -138,7 +142,12 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
|
138
142
|
const Element = /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
143
|
index.default,
|
|
140
144
|
{
|
|
141
|
-
emptyFilterMessage,
|
|
145
|
+
emptyFilterMessage: emptyFilterMessage ?? t("emptyFilterMessage"),
|
|
146
|
+
filterPlaceholder: t("searchPlaceholder"),
|
|
147
|
+
isRTL,
|
|
148
|
+
popup,
|
|
149
|
+
popupTitle: label ?? placeholder,
|
|
150
|
+
renderPopup: ({ visible, onClose, title, children }) => /* @__PURE__ */ jsxRuntime.jsx(SelectPopupOverlay_native.default, { visible, onClose, title, children }),
|
|
142
151
|
value: selectedValue,
|
|
143
152
|
onChange: handleChange,
|
|
144
153
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n disabled,\n isFloatedLabel,\n rightAddon,\n leftAddon,\n required,\n errors,\n invalid,\n placeholder,\n virtualScroll,\n label,\n inputSize,\n helperText,\n emptyFilterMessage,\n selectionLimit,\n localProps,\n hideError,\n withFilter,\n loading,\n showClear,\n valueMode,\n } = props;\n\n const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n useEffect(() => {\n checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n }, [list]);\n\n const ClState = ClHelper({\n inputSize: inputSize ?? \"\",\n isChecked: false,\n isInvalid: !!invalid,\n isDisabled: !!disabled,\n });\n\n const handleChange = useCallback((e: any, items: any) => {\n if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n return;\n }\n onChange && onChange(e, items);\n }, [selectionLimit, onChange]);\n\n const Element = <MultiSelect\n emptyFilterMessage={emptyFilterMessage}\n value={selectedValue}\n onChange={handleChange}\n disabled={disabled}\n loading={loading}\n showClear={showClear}\n options={typeof list !== \"function\" ? list : []}\n placeholder={placeholder}\n {...keys}\n filter={withFilter !== false}\n selectionLimit={selectionLimit}\n display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n className={`w-full ${ClState}`}\n style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n {...(localProps ? localProps : {})}\n />\n\n return (\n <KitsContainer\n id={id}\n inputSize={inputSize}\n isFloatedLabel={isFloatedLabel}\n rightAddon={rightAddon}\n leftAddon={leftAddon}\n required={required}\n hideError={hideError}\n errors={errors}\n helperText={helperText}\n invalid={invalid}\n label={label}\n elementStyles={elementStyles}\n >\n {Element}\n </KitsContainer>\n );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","useSelectBase","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","KitsContainer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n disabled,\n isFloatedLabel,\n rightAddon,\n leftAddon,\n required,\n errors,\n invalid,\n placeholder,\n virtualScroll,\n label,\n inputSize,\n helperText,\n emptyFilterMessage,\n selectionLimit,\n localProps,\n hideError,\n withFilter,\n loading,\n showClear,\n valueMode,\n popup,\n } = props;\n\n const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n /* Same rule as the Dropdown's panel — see that file. The sentence and the\n edge are resolved here, where LocaleContext is, and passed down. */\n const { t, isRTL } = useLanguage();\n\n useEffect(() => {\n checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n }, [list]);\n\n const ClState = ClHelper({\n inputSize: inputSize ?? \"\",\n isChecked: false,\n isInvalid: !!invalid,\n isDisabled: !!disabled,\n });\n\n const handleChange = useCallback((e: any, items: any) => {\n if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n return;\n }\n onChange && onChange(e, items);\n }, [selectionLimit, onChange]);\n\n const Element = <MultiSelect\n emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n filterPlaceholder={t('searchPlaceholder')}\n isRTL={isRTL}\n popup={popup}\n popupTitle={label ?? placeholder}\n renderPopup={({visible, onClose, title, children}: {\n visible: boolean;\n onClose: () => void;\n title?: React.ReactNode;\n children: React.ReactNode;\n }) => (\n <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n {children}\n </SelectPopupOverlay>\n )}\n value={selectedValue}\n onChange={handleChange}\n disabled={disabled}\n loading={loading}\n showClear={showClear}\n options={typeof list !== \"function\" ? list : []}\n placeholder={placeholder}\n {...keys}\n filter={withFilter !== false}\n selectionLimit={selectionLimit}\n display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n className={`w-full ${ClState}`}\n style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n {...(localProps ? localProps : {})}\n />\n\n return (\n <KitsContainer\n id={id}\n inputSize={inputSize}\n isFloatedLabel={isFloatedLabel}\n rightAddon={rightAddon}\n leftAddon={leftAddon}\n required={required}\n hideError={hideError}\n errors={errors}\n helperText={helperText}\n invalid={invalid}\n label={label}\n elementStyles={elementStyles}\n >\n {Element}\n </KitsContainer>\n );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","useSelectBase","useLanguage","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","SelectPopupOverlay","KitsContainer"],"mappings":"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"}
|
|
@@ -84,9 +84,11 @@ import KitsContainer from '../../helpers/FormContainer/index.js';
|
|
|
84
84
|
import { ClHelper } from '../../helpers/Functions.js';
|
|
85
85
|
import { checkKeys } from '../helper.js';
|
|
86
86
|
import { useSelectBase } from '../hooks/useSelectBase.js';
|
|
87
|
+
import { useLanguage } from '../../../hooks/locale.js';
|
|
87
88
|
import '../../../contexts/DialogContext.js';
|
|
88
89
|
import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
|
|
89
90
|
import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
|
|
91
|
+
import SelectPopupOverlay from '../helpers/SelectPopupOverlay.js';
|
|
90
92
|
|
|
91
93
|
const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
92
94
|
const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults("MultiSelect", rawProps, "Select");
|
|
@@ -113,9 +115,11 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
|
113
115
|
withFilter,
|
|
114
116
|
loading,
|
|
115
117
|
showClear,
|
|
116
|
-
valueMode
|
|
118
|
+
valueMode,
|
|
119
|
+
popup
|
|
117
120
|
} = props;
|
|
118
121
|
const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();
|
|
122
|
+
const { t, isRTL } = useLanguage();
|
|
119
123
|
useEffect(() => {
|
|
120
124
|
checkKeys(list, labelKey, !childrenKey ? valueKey : void 0);
|
|
121
125
|
}, [list]);
|
|
@@ -134,7 +138,12 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
|
|
|
134
138
|
const Element = /* @__PURE__ */ jsx(
|
|
135
139
|
MultiSelect,
|
|
136
140
|
{
|
|
137
|
-
emptyFilterMessage,
|
|
141
|
+
emptyFilterMessage: emptyFilterMessage ?? t("emptyFilterMessage"),
|
|
142
|
+
filterPlaceholder: t("searchPlaceholder"),
|
|
143
|
+
isRTL,
|
|
144
|
+
popup,
|
|
145
|
+
popupTitle: label ?? placeholder,
|
|
146
|
+
renderPopup: ({ visible, onClose, title, children }) => /* @__PURE__ */ jsx(SelectPopupOverlay, { visible, onClose, title, children }),
|
|
138
147
|
value: selectedValue,
|
|
139
148
|
onChange: handleChange,
|
|
140
149
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n disabled,\n isFloatedLabel,\n rightAddon,\n leftAddon,\n required,\n errors,\n invalid,\n placeholder,\n virtualScroll,\n label,\n inputSize,\n helperText,\n emptyFilterMessage,\n selectionLimit,\n localProps,\n hideError,\n withFilter,\n loading,\n showClear,\n valueMode,\n } = props;\n\n const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n useEffect(() => {\n checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n }, [list]);\n\n const ClState = ClHelper({\n inputSize: inputSize ?? \"\",\n isChecked: false,\n isInvalid: !!invalid,\n isDisabled: !!disabled,\n });\n\n const handleChange = useCallback((e: any, items: any) => {\n if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n return;\n }\n onChange && onChange(e, items);\n }, [selectionLimit, onChange]);\n\n const Element = <MultiSelect\n emptyFilterMessage={emptyFilterMessage}\n value={selectedValue}\n onChange={handleChange}\n disabled={disabled}\n loading={loading}\n showClear={showClear}\n options={typeof list !== \"function\" ? list : []}\n placeholder={placeholder}\n {...keys}\n filter={withFilter !== false}\n selectionLimit={selectionLimit}\n display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n className={`w-full ${ClState}`}\n style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n {...(localProps ? localProps : {})}\n />\n\n return (\n <KitsContainer\n id={id}\n inputSize={inputSize}\n isFloatedLabel={isFloatedLabel}\n rightAddon={rightAddon}\n leftAddon={leftAddon}\n required={required}\n hideError={hideError}\n errors={errors}\n helperText={helperText}\n invalid={invalid}\n label={label}\n elementStyles={elementStyles}\n >\n {Element}\n </KitsContainer>\n );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n const resolvedThemeStyle = useResolvedStyle(themeStyle);\n const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n const {\n id,\n disabled,\n isFloatedLabel,\n rightAddon,\n leftAddon,\n required,\n errors,\n invalid,\n placeholder,\n virtualScroll,\n label,\n inputSize,\n helperText,\n emptyFilterMessage,\n selectionLimit,\n localProps,\n hideError,\n withFilter,\n loading,\n showClear,\n valueMode,\n popup,\n } = props;\n\n const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n /* Same rule as the Dropdown's panel — see that file. The sentence and the\n edge are resolved here, where LocaleContext is, and passed down. */\n const { t, isRTL } = useLanguage();\n\n useEffect(() => {\n checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n }, [list]);\n\n const ClState = ClHelper({\n inputSize: inputSize ?? \"\",\n isChecked: false,\n isInvalid: !!invalid,\n isDisabled: !!disabled,\n });\n\n const handleChange = useCallback((e: any, items: any) => {\n if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n return;\n }\n onChange && onChange(e, items);\n }, [selectionLimit, onChange]);\n\n const Element = <MultiSelect\n emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n filterPlaceholder={t('searchPlaceholder')}\n isRTL={isRTL}\n popup={popup}\n popupTitle={label ?? placeholder}\n renderPopup={({visible, onClose, title, children}: {\n visible: boolean;\n onClose: () => void;\n title?: React.ReactNode;\n children: React.ReactNode;\n }) => (\n <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n {children}\n </SelectPopupOverlay>\n )}\n value={selectedValue}\n onChange={handleChange}\n disabled={disabled}\n loading={loading}\n showClear={showClear}\n options={typeof list !== \"function\" ? list : []}\n placeholder={placeholder}\n {...keys}\n filter={withFilter !== false}\n selectionLimit={selectionLimit}\n display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n className={`w-full ${ClState}`}\n style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n {...(localProps ? localProps : {})}\n />\n\n return (\n <KitsContainer\n id={id}\n inputSize={inputSize}\n isFloatedLabel={isFloatedLabel}\n rightAddon={rightAddon}\n leftAddon={leftAddon}\n required={required}\n hideError={hideError}\n errors={errors}\n helperText={helperText}\n invalid={invalid}\n label={label}\n elementStyles={elementStyles}\n >\n {Element}\n </KitsContainer>\n );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var reactNative = require('react-native');
|
|
7
|
+
var reactNativeSafeAreaContext = require('react-native-safe-area-context');
|
|
8
|
+
require('../../../apps/mobile/src/ui/accordion/index.cjs');
|
|
9
|
+
require('../../../apps/mobile/src/ui/actionsheet/index.cjs');
|
|
10
|
+
require('../../../apps/mobile/src/ui/alert/index.cjs');
|
|
11
|
+
require('../../../apps/mobile/src/ui/alert-dialog/index.cjs');
|
|
12
|
+
require('../../../apps/mobile/src/ui/avatar/index.cjs');
|
|
13
|
+
require('../../../apps/mobile/src/ui/badge/index.cjs');
|
|
14
|
+
require('../../../apps/mobile/src/ui/bottomsheet/index.cjs');
|
|
15
|
+
require('../../../apps/mobile/src/ui/box/index.cjs');
|
|
16
|
+
require('../../../apps/mobile/src/ui/button/index.cjs');
|
|
17
|
+
require('../../../apps/mobile/src/ui/card/index.cjs');
|
|
18
|
+
require('../../../apps/mobile/src/ui/center/index.cjs');
|
|
19
|
+
require('../../../apps/mobile/src/ui/checkbox/index.cjs');
|
|
20
|
+
require('../../../apps/mobile/src/ui/divider/index.cjs');
|
|
21
|
+
require('../../../apps/mobile/src/ui/drawer/index.cjs');
|
|
22
|
+
require('../../../apps/mobile/src/ui/fab/index.cjs');
|
|
23
|
+
require('../../../apps/mobile/src/ui/form-control/index.cjs');
|
|
24
|
+
require('react');
|
|
25
|
+
require('../../../apps/mobile/src/ui/gluestack-ui-provider/config.cjs');
|
|
26
|
+
require('@gluestack-ui/core/overlay/creator');
|
|
27
|
+
require('@gluestack-ui/core/toast/creator');
|
|
28
|
+
require('nativewind');
|
|
29
|
+
require('../../../apps/mobile/src/ui/grid/index.cjs');
|
|
30
|
+
require('../../../apps/mobile/src/ui/heading/index.cjs');
|
|
31
|
+
require('../../../apps/mobile/src/ui/hstack/index.cjs');
|
|
32
|
+
require('../../../apps/mobile/src/ui/icon/index.cjs');
|
|
33
|
+
require('../../../apps/mobile/src/ui/image/index.cjs');
|
|
34
|
+
require('../../../apps/mobile/src/ui/image-background/index.cjs');
|
|
35
|
+
require('../../../apps/mobile/src/ui/input/index.cjs');
|
|
36
|
+
require('../../../apps/mobile/src/ui/link/index.cjs');
|
|
37
|
+
require('../../../apps/mobile/src/ui/menu/index.cjs');
|
|
38
|
+
require('../../../apps/mobile/src/ui/modal/index.cjs');
|
|
39
|
+
require('../../../apps/mobile/src/ui/popover/index.cjs');
|
|
40
|
+
require('../../../apps/mobile/src/ui/portal/index.cjs');
|
|
41
|
+
require('../../../apps/mobile/src/ui/pressable/index.cjs');
|
|
42
|
+
require('../../../apps/mobile/src/ui/progress/index.cjs');
|
|
43
|
+
require('../../../apps/mobile/src/ui/radio/index.cjs');
|
|
44
|
+
require('../../../apps/mobile/src/ui/select/index.cjs');
|
|
45
|
+
require('../../../apps/mobile/src/ui/skeleton/index.cjs');
|
|
46
|
+
require('../../../apps/mobile/src/ui/slider/index.cjs');
|
|
47
|
+
require('../../../apps/mobile/src/ui/spinner/index.cjs');
|
|
48
|
+
require('../../../apps/mobile/src/ui/switch/index.cjs');
|
|
49
|
+
require('../../../apps/mobile/src/ui/table/index.cjs');
|
|
50
|
+
require('../../../apps/mobile/src/ui/text/index.cjs');
|
|
51
|
+
require('../../../apps/mobile/src/ui/textarea/index.cjs');
|
|
52
|
+
require('../../../apps/mobile/src/ui/toast/index.cjs');
|
|
53
|
+
require('../../../apps/mobile/src/ui/tooltip/index.cjs');
|
|
54
|
+
require('../../../apps/mobile/src/ui/vstack/index.cjs');
|
|
55
|
+
require('react-native-reanimated');
|
|
56
|
+
require('react-icons/fa');
|
|
57
|
+
require('react-icons/ai');
|
|
58
|
+
require('react-icons/io');
|
|
59
|
+
require('../../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.cjs');
|
|
60
|
+
require('yup');
|
|
61
|
+
require('../../../packages/types/src/Css/map/index.cjs');
|
|
62
|
+
require('../../../packages/types/src/Theme/shadows.cjs');
|
|
63
|
+
require('../../../packages/types/src/Theme/defaultTheme.cjs');
|
|
64
|
+
require('../../../packages/types/src/Theme/alphaColors.cjs');
|
|
65
|
+
require('../../../apps/mobile/src/Factory/helpers/cssVarMap.cjs');
|
|
66
|
+
require('../../../apps/mobile/src/Factory/DimensionsContext.cjs');
|
|
67
|
+
var useKeyboardHeight = require('../../../apps/mobile/src/Factory/helpers/useKeyboardHeight.cjs');
|
|
68
|
+
require('i18next');
|
|
69
|
+
require('react-i18next');
|
|
70
|
+
require('../../../apps/mobile/src/Core/AutoComplete/index.cjs');
|
|
71
|
+
require('../../../apps/mobile/src/Core/Dropdown/index.cjs');
|
|
72
|
+
require('../../../apps/mobile/src/Core/MultiSelect/index.cjs');
|
|
73
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreTree.cjs');
|
|
74
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.cjs');
|
|
75
|
+
require('../../../apps/mobile/src/Core/Trees/components/CoreToolbar.cjs');
|
|
76
|
+
require('../../../apps/mobile/src/Core/Paginator/index.cjs');
|
|
77
|
+
require('lucide-react-native');
|
|
78
|
+
require('../../../apps/mobile/src/Core/SelectButton/index.cjs');
|
|
79
|
+
require('../../../apps/mobile/src/Core/DataTable/DataTable.cjs');
|
|
80
|
+
require('../../../apps/mobile/src/Core/Tag/index.cjs');
|
|
81
|
+
require('../../../apps/mobile/src/Core/Badge/index.cjs');
|
|
82
|
+
require('../../../apps/mobile/src/Core/ProgressBar/index.cjs');
|
|
83
|
+
require('../../../apps/mobile/src/Core/Checkbox/index.cjs');
|
|
84
|
+
require('../../../apps/mobile/src/Core/RadioButton/index.cjs');
|
|
85
|
+
require('../../../apps/mobile/src/Core/Input/index.cjs');
|
|
86
|
+
require('../../../apps/mobile/src/Core/Input/Field.cjs');
|
|
87
|
+
require('../../../apps/mobile/src/Core/Input/Slot.cjs');
|
|
88
|
+
var index_native = require('../../../components/overlay/Dialog/index.cjs');
|
|
89
|
+
var locale = require('../../../hooks/locale.cjs');
|
|
90
|
+
require('../../../contexts/DialogContext.cjs');
|
|
91
|
+
var useThemedFont = require('../../../hooks/useThemedFont.cjs');
|
|
92
|
+
var KitsThemeProvider_native = require('../../../contexts/Theme/KitsThemeProvider.cjs');
|
|
93
|
+
|
|
94
|
+
const SHEET_HEIGHT_RATIO = 0.75;
|
|
95
|
+
const SHEET_MIN_HEIGHT = 240;
|
|
96
|
+
const SelectPopupOverlay = ({ visible, onClose, title, children }) => {
|
|
97
|
+
const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
|
|
98
|
+
const { isRTL } = locale.useLanguage();
|
|
99
|
+
const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
|
|
100
|
+
const { height: windowHeight } = reactNative.useWindowDimensions();
|
|
101
|
+
const headingFont = useThemedFont.default("heading");
|
|
102
|
+
const keyboardHeight = useKeyboardHeight.useKeyboardHeight();
|
|
103
|
+
const visibleHeight = windowHeight - Math.max(insets.bottom, keyboardHeight) - insets.top;
|
|
104
|
+
const sheetHeight = Math.max(
|
|
105
|
+
Math.min(SHEET_MIN_HEIGHT, visibleHeight),
|
|
106
|
+
Math.min(Math.round(windowHeight * SHEET_HEIGHT_RATIO), visibleHeight)
|
|
107
|
+
);
|
|
108
|
+
const textColor = resolveToken("text");
|
|
109
|
+
const borderColor = resolveToken("border");
|
|
110
|
+
const grabberColor = resolveToken("gray.300");
|
|
111
|
+
const subtextColor = resolveToken("gray.500");
|
|
112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
index_native.default,
|
|
114
|
+
{
|
|
115
|
+
onHide: onClose,
|
|
116
|
+
state: {
|
|
117
|
+
visible,
|
|
118
|
+
position: "bottom",
|
|
119
|
+
// Tap-outside dismiss. `onRequestClose` inside the Dialog gives
|
|
120
|
+
// Android's back button the same route.
|
|
121
|
+
dismissableMask: true,
|
|
122
|
+
onClose,
|
|
123
|
+
style: {
|
|
124
|
+
height: sheetHeight,
|
|
125
|
+
// The keyboard already clears the home indicator, so the
|
|
126
|
+
// inset is only owed when the keyboard is down.
|
|
127
|
+
paddingBottom: keyboardHeight > 0 ? 0 : insets.bottom,
|
|
128
|
+
marginBottom: keyboardHeight
|
|
129
|
+
},
|
|
130
|
+
content: ({ hide }) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.root, children: [
|
|
131
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.grabber, { backgroundColor: grabberColor }] }),
|
|
132
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
133
|
+
reactNative.View,
|
|
134
|
+
{
|
|
135
|
+
style: [
|
|
136
|
+
styles.header,
|
|
137
|
+
{ borderBottomColor: borderColor },
|
|
138
|
+
// The header mirrors with the reader, like every
|
|
139
|
+
// other row this library draws.
|
|
140
|
+
isRTL ? styles.headerRtl : styles.headerLtr
|
|
141
|
+
],
|
|
142
|
+
children: [
|
|
143
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
144
|
+
reactNative.Text,
|
|
145
|
+
{
|
|
146
|
+
numberOfLines: 1,
|
|
147
|
+
style: [
|
|
148
|
+
styles.title,
|
|
149
|
+
{ color: textColor, fontFamily: headingFont },
|
|
150
|
+
isRTL ? styles.titleRtl : styles.titleLtr
|
|
151
|
+
],
|
|
152
|
+
children: title
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: hide, hitSlop: 12, accessibilityRole: "button", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.close, { color: subtextColor }], children: "\u2715" }) })
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
children
|
|
160
|
+
] })
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
const styles = reactNative.StyleSheet.create({
|
|
166
|
+
root: {
|
|
167
|
+
flex: 1,
|
|
168
|
+
minHeight: 0
|
|
169
|
+
},
|
|
170
|
+
grabber: {
|
|
171
|
+
width: 40,
|
|
172
|
+
height: 4,
|
|
173
|
+
borderRadius: 2,
|
|
174
|
+
alignSelf: "center",
|
|
175
|
+
marginTop: 8,
|
|
176
|
+
marginBottom: 4
|
|
177
|
+
},
|
|
178
|
+
header: {
|
|
179
|
+
alignItems: "center",
|
|
180
|
+
paddingHorizontal: 16,
|
|
181
|
+
paddingVertical: 12,
|
|
182
|
+
borderBottomWidth: 1,
|
|
183
|
+
gap: 12
|
|
184
|
+
},
|
|
185
|
+
headerLtr: { flexDirection: "row" },
|
|
186
|
+
headerRtl: { flexDirection: "row-reverse" },
|
|
187
|
+
title: {
|
|
188
|
+
flex: 1,
|
|
189
|
+
fontSize: 17,
|
|
190
|
+
fontWeight: "700"
|
|
191
|
+
},
|
|
192
|
+
titleLtr: { textAlign: "left", writingDirection: "ltr" },
|
|
193
|
+
titleRtl: { textAlign: "right", writingDirection: "rtl" },
|
|
194
|
+
close: {
|
|
195
|
+
fontSize: 18
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
exports.default = SelectPopupOverlay;
|
|
200
|
+
//# sourceMappingURL=SelectPopupOverlay.cjs.map
|