@beppla/tapas-ui 1.5.0 → 1.5.6
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/commonjs/Alert/Alert.js +1 -1
- package/commonjs/Alert/README.md +75 -0
- package/commonjs/BarChart/BarChart.js +49 -86
- package/commonjs/BarChart/BarChart.js.map +1 -1
- package/commonjs/BarChart/README.md +172 -0
- package/commonjs/Button/README.md +108 -0
- package/commonjs/Calendar/Calendar.base.js +1 -1
- package/commonjs/Calendar/Calendar.base.js.map +1 -1
- package/commonjs/Calendar/ConcreteTimeSelector.js +0 -6
- package/commonjs/Calendar/ConcreteTimeSelector.js.map +1 -1
- package/commonjs/Calendar/README.md +410 -0
- package/commonjs/Calendar/TimeSelector.js +0 -7
- package/commonjs/Calendar/TimeSelector.js.map +1 -1
- package/commonjs/Card/Card.js +1 -1
- package/commonjs/Card/Card.js.map +1 -1
- package/commonjs/Card/README.md +126 -0
- package/commonjs/CheckBox/CheckBox.js +3 -1
- package/commonjs/CheckBox/CheckBox.js.map +1 -1
- package/commonjs/CheckBox/CheckBoxItem.js +3 -1
- package/commonjs/CheckBox/CheckBoxItem.js.map +1 -1
- package/commonjs/CheckBox/README.md +147 -0
- package/commonjs/CircularProgress/CircularProgress.js +1 -1
- package/commonjs/CircularProgress/CircularProgress.js.map +1 -1
- package/commonjs/CircularProgress/README.md +70 -0
- package/commonjs/Collapsible/Collapsible.js +1 -1
- package/commonjs/Collapsible/Collapsible.js.map +1 -1
- package/commonjs/Collapsible/README.md +140 -0
- package/commonjs/ComboChart/ComboChart.js +3 -2
- package/commonjs/ComboChart/ComboChart.js.map +1 -1
- package/commonjs/ComboChart/README.md +124 -0
- package/commonjs/DashboardCard/DashboardCard.js +5 -1
- package/commonjs/DashboardCard/DashboardCard.js.map +1 -1
- package/commonjs/DashboardCard/README.md +120 -0
- package/commonjs/DataCell/DataCell.js +41 -56
- package/commonjs/DataCell/DataCell.js.map +1 -1
- package/commonjs/DataTable/DataTable.js.map +1 -1
- package/commonjs/DataTable/README.md +159 -0
- package/commonjs/DeviceSelectionModal/README.md +124 -0
- package/commonjs/DraggableFlatList/README.md +35 -0
- package/commonjs/Drawer/README.md +175 -0
- package/commonjs/Dropdown/CustomDropdown.js +0 -4
- package/commonjs/Dropdown/CustomDropdown.js.map +1 -1
- package/commonjs/Dropdown/Dropdown.js +1 -1
- package/commonjs/Dropdown/InputDropdown.js +4 -8
- package/commonjs/Dropdown/InputDropdown.js.map +1 -1
- package/commonjs/Dropdown/README.md +230 -0
- package/commonjs/ExternalLink/README.md +81 -0
- package/commonjs/Gantt/Gantt.js +82 -55
- package/commonjs/Gantt/Gantt.js.map +1 -1
- package/commonjs/Gantt/README.md +155 -0
- package/commonjs/Gantt/helper.js +13 -9
- package/commonjs/Gantt/helper.js.map +1 -1
- package/commonjs/Grid/FixedSizeGrid.js +2 -3
- package/commonjs/Grid/FixedSizeGrid.js.map +1 -1
- package/commonjs/Grid/Grid.base.js +0 -3
- package/commonjs/Grid/Grid.base.js.map +1 -1
- package/commonjs/Grid/README.md +197 -0
- package/commonjs/Grid/StaticFixedSizeGrid.js +22 -28
- package/commonjs/Grid/StaticFixedSizeGrid.js.map +1 -1
- package/commonjs/Grid/VariableSizeGrid.js +13 -18
- package/commonjs/Grid/VariableSizeGrid.js.map +1 -1
- package/commonjs/Header/README.md +109 -0
- package/commonjs/HelloWave/README.md +28 -0
- package/commonjs/Hoverable/Hoverable.js.map +1 -1
- package/commonjs/IconText/IconText.js +1 -1
- package/commonjs/IconText/IconText.js.map +1 -1
- package/commonjs/IconText/README.md +99 -0
- package/commonjs/Icons/TapasIcon.js +30 -2
- package/commonjs/Icons/TapasIcon.js.map +1 -1
- package/commonjs/Icons/TapasIconExpo.js +4 -4
- package/commonjs/Icons/TapasIconExpo.js.map +1 -1
- package/commonjs/Icons/expoFontLoader.js +7 -195
- package/commonjs/Icons/expoFontLoader.js.map +1 -1
- package/commonjs/Icons/fontLoader.js +9 -230
- package/commonjs/Icons/fontLoader.js.map +1 -1
- package/commonjs/Icons/smartFontLoader.js +3 -0
- package/commonjs/Icons/smartFontLoader.js.map +1 -1
- package/commonjs/Image/PreviewImg/README.md +100 -0
- package/commonjs/Image/PreviewImg.js +16 -14
- package/commonjs/Image/PreviewImg.js.map +1 -1
- package/commonjs/Image/README.md +88 -0
- package/commonjs/Input/Input.js +60 -4
- package/commonjs/Input/Input.js.map +1 -1
- package/commonjs/Layout/README.md +174 -0
- package/commonjs/LineChart/LineChart.js +25 -17
- package/commonjs/LineChart/LineChart.js.map +1 -1
- package/commonjs/LineChart/README.md +181 -0
- package/commonjs/ListItem/ListItem.js +1 -1
- package/commonjs/ListItem/ListItem.js.map +1 -1
- package/commonjs/ListItem/README.md +122 -0
- package/commonjs/MessageBox/MessageBox.js +7 -1
- package/commonjs/MessageBox/MessageBox.js.map +1 -1
- package/commonjs/MessageBox/README.md +120 -0
- package/commonjs/Navigation/Navigation.js.map +1 -1
- package/commonjs/Navigation/README.md +197 -0
- package/commonjs/NumericInput/README.md +95 -0
- package/commonjs/Overlay/README.md +84 -0
- package/commonjs/Pagination/Pagination.js +11 -9
- package/commonjs/Pagination/Pagination.js.map +1 -1
- package/commonjs/Pagination/README.md +106 -0
- package/commonjs/PieChart/PieChart.js +16 -13
- package/commonjs/PieChart/PieChart.js.map +1 -1
- package/commonjs/PieChart/README.md +212 -0
- package/commonjs/Popover/README.md +82 -0
- package/commonjs/Progress/Progress.js +1 -1
- package/commonjs/Progress/Progress.js.map +1 -1
- package/commonjs/Progress/README.md +106 -0
- package/commonjs/RadioButton/README.md +85 -0
- package/commonjs/RadioButton/RadioButton.js +1 -1
- package/commonjs/RadioButton/RadioButton.js.map +1 -1
- package/commonjs/ScanButton/README.md +72 -0
- package/commonjs/SearchInput/SearchInput.js +5 -1
- package/commonjs/SearchInput/SearchInput.js.map +1 -1
- package/commonjs/SheetTitle/README.md +89 -0
- package/commonjs/SheetTitle/SheetTitle.js +1 -1
- package/commonjs/SheetTitle/SheetTitle.js.map +1 -1
- package/commonjs/Shell/README.md +152 -0
- package/commonjs/Shell/Shell.js.map +1 -1
- package/commonjs/StatisticCard/README.md +129 -0
- package/commonjs/StatisticCard/StatisticCard.js +2 -2
- package/commonjs/StatisticCard/StatisticCard.js.map +1 -1
- package/commonjs/StatisticsTable/StatisticsTable.js.map +1 -1
- package/commonjs/Status/README.md +75 -0
- package/commonjs/Status/Status.js +1 -1
- package/commonjs/Status/Status.js.map +1 -1
- package/commonjs/Steps/README.md +76 -0
- package/commonjs/Steps/Steps.js +1 -1
- package/commonjs/Steps/Steps.js.map +1 -1
- package/commonjs/Switch/Switch.js +101 -0
- package/commonjs/Switch/Switch.js.map +1 -0
- package/commonjs/Tab/README.md +161 -0
- package/commonjs/Tag/README.md +93 -0
- package/commonjs/Tag/Tag.js +4 -2
- package/commonjs/Tag/Tag.js.map +1 -1
- package/commonjs/Task/README.md +110 -0
- package/commonjs/Text/README.md +97 -0
- package/commonjs/TextArea/README.md +127 -0
- package/commonjs/TextArea/TextArea.js +4 -2
- package/commonjs/TextArea/TextArea.js.map +1 -1
- package/commonjs/Theme/README.md +161 -0
- package/commonjs/Theme/ThemeProvider.js +4 -1
- package/commonjs/Theme/ThemeProvider.js.map +1 -1
- package/commonjs/Theme/defaultTheme.js +1 -0
- package/commonjs/Theme/defaultTheme.js.map +1 -1
- package/commonjs/Theme/makeStyles.js +30 -0
- package/commonjs/Theme/makeStyles.js.map +1 -0
- package/commonjs/Theme/withTheme.js +91 -0
- package/commonjs/Theme/withTheme.js.map +1 -0
- package/commonjs/Timeline/README.md +111 -0
- package/commonjs/Timeline/Timeline.js +4 -4
- package/commonjs/Timeline/Timeline.js.map +1 -1
- package/commonjs/Toast/README.md +96 -0
- package/commonjs/Upload/Upload.js +126 -0
- package/commonjs/Upload/Upload.js.map +1 -0
- package/commonjs/WebViewBridge/WebViewBridge.js +2 -0
- package/commonjs/WebViewBridge/WebViewBridge.js.map +1 -1
- package/commonjs/common/bridgelessUtils.js +2 -2
- package/commonjs/common/bridgelessUtils.js.map +1 -1
- package/commonjs/index.js +39 -5
- package/commonjs/index.js.map +1 -1
- package/module/Alert/Alert.js +1 -1
- package/module/Alert/README.md +75 -0
- package/module/BarChart/BarChart.js +48 -86
- package/module/BarChart/BarChart.js.map +1 -1
- package/module/BarChart/README.md +172 -0
- package/module/Button/README.md +108 -0
- package/module/Calendar/Calendar.base.js +1 -1
- package/module/Calendar/Calendar.base.js.map +1 -1
- package/module/Calendar/ConcreteTimeSelector.js +0 -6
- package/module/Calendar/ConcreteTimeSelector.js.map +1 -1
- package/module/Calendar/README.md +410 -0
- package/module/Calendar/TimeSelector.js +0 -7
- package/module/Calendar/TimeSelector.js.map +1 -1
- package/module/Card/Card.js +1 -1
- package/module/Card/Card.js.map +1 -1
- package/module/Card/README.md +126 -0
- package/module/CheckBox/CheckBox.js +3 -1
- package/module/CheckBox/CheckBox.js.map +1 -1
- package/module/CheckBox/CheckBoxItem.js +3 -1
- package/module/CheckBox/CheckBoxItem.js.map +1 -1
- package/module/CheckBox/README.md +147 -0
- package/module/CircularProgress/CircularProgress.js +1 -1
- package/module/CircularProgress/CircularProgress.js.map +1 -1
- package/module/CircularProgress/README.md +70 -0
- package/module/Collapsible/Collapsible.js +1 -1
- package/module/Collapsible/Collapsible.js.map +1 -1
- package/module/Collapsible/README.md +140 -0
- package/module/ComboChart/ComboChart.js +3 -2
- package/module/ComboChart/ComboChart.js.map +1 -1
- package/module/ComboChart/README.md +124 -0
- package/module/DashboardCard/DashboardCard.js +5 -1
- package/module/DashboardCard/DashboardCard.js.map +1 -1
- package/module/DashboardCard/README.md +120 -0
- package/module/DataCell/DataCell.js +41 -56
- package/module/DataCell/DataCell.js.map +1 -1
- package/module/DataTable/DataTable.js.map +1 -1
- package/module/DataTable/README.md +159 -0
- package/module/DeviceSelectionModal/README.md +124 -0
- package/module/DraggableFlatList/README.md +35 -0
- package/module/Drawer/README.md +175 -0
- package/module/Dropdown/CustomDropdown.js +0 -3
- package/module/Dropdown/CustomDropdown.js.map +1 -1
- package/module/Dropdown/Dropdown.js +1 -1
- package/module/Dropdown/InputDropdown.js +4 -8
- package/module/Dropdown/InputDropdown.js.map +1 -1
- package/module/Dropdown/README.md +230 -0
- package/module/ExternalLink/README.md +81 -0
- package/module/Gantt/Gantt.js +82 -55
- package/module/Gantt/Gantt.js.map +1 -1
- package/module/Gantt/README.md +155 -0
- package/module/Gantt/helper.js +13 -9
- package/module/Gantt/helper.js.map +1 -1
- package/module/Grid/FixedSizeGrid.js +2 -3
- package/module/Grid/FixedSizeGrid.js.map +1 -1
- package/module/Grid/Grid.base.js +0 -3
- package/module/Grid/Grid.base.js.map +1 -1
- package/module/Grid/README.md +197 -0
- package/module/Grid/StaticFixedSizeGrid.js +22 -28
- package/module/Grid/StaticFixedSizeGrid.js.map +1 -1
- package/module/Grid/VariableSizeGrid.js +13 -18
- package/module/Grid/VariableSizeGrid.js.map +1 -1
- package/module/Header/README.md +109 -0
- package/module/HelloWave/README.md +28 -0
- package/module/Hoverable/Hoverable.js.map +1 -1
- package/module/IconText/IconText.js +1 -1
- package/module/IconText/IconText.js.map +1 -1
- package/module/IconText/README.md +99 -0
- package/module/Icons/TapasIcon.js +28 -1
- package/module/Icons/TapasIcon.js.map +1 -1
- package/module/Icons/TapasIconExpo.js +4 -4
- package/module/Icons/TapasIconExpo.js.map +1 -1
- package/module/Icons/expoFontLoader.js +6 -193
- package/module/Icons/expoFontLoader.js.map +1 -1
- package/module/Icons/fontLoader.js +8 -228
- package/module/Icons/fontLoader.js.map +1 -1
- package/module/Icons/smartFontLoader.js +3 -0
- package/module/Icons/smartFontLoader.js.map +1 -1
- package/module/Image/PreviewImg/README.md +100 -0
- package/module/Image/PreviewImg.js +16 -14
- package/module/Image/PreviewImg.js.map +1 -1
- package/module/Image/README.md +88 -0
- package/module/Input/Input.js +60 -4
- package/module/Input/Input.js.map +1 -1
- package/module/Layout/README.md +174 -0
- package/module/LineChart/LineChart.js +24 -17
- package/module/LineChart/LineChart.js.map +1 -1
- package/module/LineChart/README.md +181 -0
- package/module/ListItem/ListItem.js +1 -1
- package/module/ListItem/ListItem.js.map +1 -1
- package/module/ListItem/README.md +122 -0
- package/module/MessageBox/MessageBox.js +8 -2
- package/module/MessageBox/MessageBox.js.map +1 -1
- package/module/MessageBox/README.md +120 -0
- package/module/Navigation/Navigation.js.map +1 -1
- package/module/Navigation/README.md +197 -0
- package/module/NumericInput/README.md +95 -0
- package/module/Overlay/README.md +84 -0
- package/module/Pagination/Pagination.js +11 -9
- package/module/Pagination/Pagination.js.map +1 -1
- package/module/Pagination/README.md +106 -0
- package/module/PieChart/PieChart.js +15 -13
- package/module/PieChart/PieChart.js.map +1 -1
- package/module/PieChart/README.md +212 -0
- package/module/Popover/README.md +82 -0
- package/module/Progress/Progress.js +1 -1
- package/module/Progress/Progress.js.map +1 -1
- package/module/Progress/README.md +106 -0
- package/module/RadioButton/README.md +85 -0
- package/module/RadioButton/RadioButton.js +1 -1
- package/module/RadioButton/RadioButton.js.map +1 -1
- package/module/ScanButton/README.md +72 -0
- package/module/SearchInput/SearchInput.js +5 -1
- package/module/SearchInput/SearchInput.js.map +1 -1
- package/module/SheetTitle/README.md +89 -0
- package/module/SheetTitle/SheetTitle.js +1 -1
- package/module/SheetTitle/SheetTitle.js.map +1 -1
- package/module/Shell/README.md +152 -0
- package/module/Shell/Shell.js.map +1 -1
- package/module/StatisticCard/README.md +129 -0
- package/module/StatisticCard/StatisticCard.js +2 -1
- package/module/StatisticCard/StatisticCard.js.map +1 -1
- package/module/StatisticsTable/StatisticsTable.js.map +1 -1
- package/module/Status/README.md +75 -0
- package/module/Status/Status.js +1 -1
- package/module/Status/Status.js.map +1 -1
- package/module/Steps/README.md +76 -0
- package/module/Steps/Steps.js +1 -1
- package/module/Steps/Steps.js.map +1 -1
- package/module/Switch/Switch.js +96 -0
- package/module/Switch/Switch.js.map +1 -0
- package/module/Tab/README.md +161 -0
- package/module/Tag/README.md +93 -0
- package/module/Tag/Tag.js +4 -2
- package/module/Tag/Tag.js.map +1 -1
- package/module/Task/README.md +110 -0
- package/module/Text/README.md +97 -0
- package/module/TextArea/README.md +127 -0
- package/module/TextArea/TextArea.js +4 -2
- package/module/TextArea/TextArea.js.map +1 -1
- package/module/Theme/README.md +161 -0
- package/module/Theme/ThemeProvider.js +4 -1
- package/module/Theme/ThemeProvider.js.map +1 -1
- package/module/Theme/defaultTheme.js +1 -0
- package/module/Theme/defaultTheme.js.map +1 -1
- package/module/Theme/makeStyles.js +24 -0
- package/module/Theme/makeStyles.js.map +1 -0
- package/module/Theme/withTheme.js +82 -0
- package/module/Theme/withTheme.js.map +1 -0
- package/module/Timeline/README.md +111 -0
- package/module/Timeline/Timeline.js +4 -4
- package/module/Timeline/Timeline.js.map +1 -1
- package/module/Toast/README.md +96 -0
- package/module/Upload/Upload.js +121 -0
- package/module/Upload/Upload.js.map +1 -0
- package/module/WebViewBridge/WebViewBridge.js +2 -0
- package/module/WebViewBridge/WebViewBridge.js.map +1 -1
- package/module/common/bridgelessUtils.js +2 -2
- package/module/common/bridgelessUtils.js.map +1 -1
- package/module/index.js +12 -4
- package/module/index.js.map +1 -1
- package/package.json +1 -1
- package/typescript/BarChart/BarChart.d.ts.map +1 -1
- package/typescript/Calendar/ConcreteTimeSelector.d.ts.map +1 -1
- package/typescript/Calendar/TimeSelector.d.ts.map +1 -1
- package/typescript/Card/Card.d.ts.map +1 -1
- package/typescript/CheckBox/CheckBox.d.ts.map +1 -1
- package/typescript/CheckBox/CheckBoxItem.d.ts.map +1 -1
- package/typescript/CircularProgress/CircularProgress.d.ts.map +1 -1
- package/typescript/Collapsible/Collapsible.d.ts.map +1 -1
- package/typescript/ComboChart/ComboChart.d.ts.map +1 -1
- package/typescript/DashboardCard/DashboardCard.d.ts +2 -2
- package/typescript/DashboardCard/DashboardCard.d.ts.map +1 -1
- package/typescript/DataCell/DataCell.d.ts.map +1 -1
- package/typescript/Dropdown/CustomDropdown.d.ts.map +1 -1
- package/typescript/Dropdown/InputDropdown.d.ts.map +1 -1
- package/typescript/Gantt/Gantt.d.ts.map +1 -1
- package/typescript/Gantt/helper.d.ts +1 -1
- package/typescript/Gantt/helper.d.ts.map +1 -1
- package/typescript/Grid/FixedSizeGrid.d.ts +1 -3
- package/typescript/Grid/FixedSizeGrid.d.ts.map +1 -1
- package/typescript/Grid/Grid.base.d.ts +1 -3
- package/typescript/Grid/Grid.base.d.ts.map +1 -1
- package/typescript/Grid/StaticFixedSizeGrid.d.ts.map +1 -1
- package/typescript/Grid/VariableSizeGrid.d.ts +1 -3
- package/typescript/Grid/VariableSizeGrid.d.ts.map +1 -1
- package/typescript/IconText/IconText.d.ts.map +1 -1
- package/typescript/Icons/TapasIcon.d.ts +13 -0
- package/typescript/Icons/TapasIcon.d.ts.map +1 -1
- package/typescript/Icons/TapasIconExpo.d.ts.map +1 -1
- package/typescript/Icons/expoFontLoader.d.ts +7 -49
- package/typescript/Icons/expoFontLoader.d.ts.map +1 -1
- package/typescript/Icons/fontLoader.d.ts +9 -52
- package/typescript/Icons/fontLoader.d.ts.map +1 -1
- package/typescript/Icons/smartFontLoader.d.ts +4 -59
- package/typescript/Icons/smartFontLoader.d.ts.map +1 -1
- package/typescript/Image/PreviewImg.d.ts.map +1 -1
- package/typescript/Input/Input.d.ts +5 -0
- package/typescript/Input/Input.d.ts.map +1 -1
- package/typescript/LineChart/LineChart.d.ts.map +1 -1
- package/typescript/ListItem/ListItem.d.ts.map +1 -1
- package/typescript/MessageBox/MessageBox.d.ts.map +1 -1
- package/typescript/Pagination/Pagination.d.ts +3 -3
- package/typescript/Pagination/Pagination.d.ts.map +1 -1
- package/typescript/PieChart/PieChart.d.ts.map +1 -1
- package/typescript/Progress/Progress.d.ts.map +1 -1
- package/typescript/RadioButton/RadioButton.d.ts.map +1 -1
- package/typescript/SearchInput/SearchInput.d.ts +4 -0
- package/typescript/SearchInput/SearchInput.d.ts.map +1 -1
- package/typescript/SheetTitle/SheetTitle.d.ts.map +1 -1
- package/typescript/StatisticCard/StatisticCard.d.ts +1 -1
- package/typescript/StatisticCard/StatisticCard.d.ts.map +1 -1
- package/typescript/Status/Status.d.ts.map +1 -1
- package/typescript/Steps/Steps.d.ts.map +1 -1
- package/typescript/Switch/Switch.d.ts +15 -0
- package/typescript/Switch/Switch.d.ts.map +1 -0
- package/typescript/Tag/Tag.d.ts.map +1 -1
- package/typescript/TextArea/TextArea.d.ts +2 -0
- package/typescript/TextArea/TextArea.d.ts.map +1 -1
- package/typescript/Theme/ThemeProvider.d.ts +1 -1
- package/typescript/Theme/ThemeProvider.d.ts.map +1 -1
- package/typescript/Theme/defaultTheme.d.ts +288 -1
- package/typescript/Theme/defaultTheme.d.ts.map +1 -1
- package/typescript/Theme/makeStyles.d.ts +11 -0
- package/typescript/Theme/makeStyles.d.ts.map +1 -0
- package/typescript/Theme/types.d.ts +3 -0
- package/typescript/Theme/types.d.ts.map +1 -1
- package/typescript/Theme/withTheme.d.ts +12 -0
- package/typescript/Theme/withTheme.d.ts.map +1 -0
- package/typescript/Timeline/Timeline.d.ts.map +1 -1
- package/typescript/Upload/Upload.d.ts +25 -0
- package/typescript/Upload/Upload.d.ts.map +1 -0
- package/typescript/WebViewBridge/WebViewBridge.d.ts.map +1 -1
- package/typescript/WebViewBridge/useWebViewBridge.d.ts +1 -1
- package/typescript/WebViewBridge/useWebViewBridge.d.ts.map +1 -1
- package/typescript/common/hooks/useBridgelessFix.d.ts +1 -1
- package/typescript/index.d.ts +580 -4
- package/typescript/index.d.ts.map +1 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# ListItem
|
|
2
|
+
|
|
3
|
+
列表项组件,基于 @rneui/themed ListItem 封装,支持选中状态、搜索高亮、描述文本、数量角标等功能,适合构建可交互的选择列表。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- ✅ 选中状态指示(背景色变化 + 勾选图标)
|
|
8
|
+
- ✅ 搜索关键字高亮显示(name 和 desc 同时高亮)
|
|
9
|
+
- ✅ 支持主标题和描述文本
|
|
10
|
+
- ✅ 数量角标(number 属性,圆形背景主题色)
|
|
11
|
+
- ✅ 鼠标悬停效果(Web 端 Hoverable)
|
|
12
|
+
- ✅ 禁用状态,颜色置灰且不可点击
|
|
13
|
+
- ✅ 首末项圆角支持(isFirst / isLast,12px 圆角)
|
|
14
|
+
- ✅ 高度自定义样式:容器、标题、描述、搜索高亮
|
|
15
|
+
- ✅ 文本自适应宽度,自动单行截断
|
|
16
|
+
|
|
17
|
+
## 安装使用
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import ListItem from '@beppla/tapas-ui/components/ListItem/ListItem';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
26
|
+
|------|------|--------|------|
|
|
27
|
+
| item | `ItemProps` | (必填) | 列表项数据 |
|
|
28
|
+
| selected | `ItemProps` | (必填) | 当前选中项(通过 value 比较) |
|
|
29
|
+
| key | `number \| string` | (必填) | 唯一标识 |
|
|
30
|
+
| onItemPress | `(item: ItemProps) => void` | (必填) | 点击回调 |
|
|
31
|
+
| disabled | `boolean` | - | 是否禁用 |
|
|
32
|
+
| isFirst | `boolean` | - | 是否为第一项(添加顶部圆角) |
|
|
33
|
+
| isLast | `boolean` | - | 是否为最后一项(添加底部圆角) |
|
|
34
|
+
| search | `string` | - | 搜索关键字,匹配部分高亮 |
|
|
35
|
+
| containerStyle | `StyleProp<ViewStyle>` | - | 外层容器样式 |
|
|
36
|
+
| itemContainerStyle | `StyleProp<ViewStyle>` | - | 项容器样式 |
|
|
37
|
+
| titleContainerStyle | `StyleProp<ViewStyle>` | - | 标题容器样式 |
|
|
38
|
+
| searchHighlightStyle | `StyleProp<TextStyle>` | - | 搜索高亮文本样式 |
|
|
39
|
+
| titleStyle | `StyleProp<TextStyle>` | - | 标题文本样式 |
|
|
40
|
+
| descStyle | `StyleProp<TextStyle>` | - | 描述文本样式 |
|
|
41
|
+
| testID | `string` | - | 测试标识 |
|
|
42
|
+
|
|
43
|
+
### ItemProps 接口
|
|
44
|
+
|
|
45
|
+
| 属性 | 类型 | 说明 |
|
|
46
|
+
|------|------|------|
|
|
47
|
+
| name | `string` | 显示名称(必填) |
|
|
48
|
+
| value | `string \| number` | 值(必填),用于比较选中状态 |
|
|
49
|
+
| id | `string \| number` | 唯一标识 |
|
|
50
|
+
| hide | `boolean` | 是否隐藏 |
|
|
51
|
+
| desc | `string` | 描述文本 |
|
|
52
|
+
| number | `number` | 数量角标 |
|
|
53
|
+
|
|
54
|
+
## 使用示例
|
|
55
|
+
|
|
56
|
+
### 基础用法
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
const data = [
|
|
60
|
+
{ name: 'Apple', value: 'apple' },
|
|
61
|
+
{ name: 'Banana', value: 'banana' },
|
|
62
|
+
{ name: 'Cherry', value: 'cherry' },
|
|
63
|
+
];
|
|
64
|
+
|
|
65
|
+
const [selected, setSelected] = useState(data[0]);
|
|
66
|
+
|
|
67
|
+
{data.map((item, index) => (
|
|
68
|
+
<ListItem
|
|
69
|
+
key={index}
|
|
70
|
+
item={item}
|
|
71
|
+
selected={selected}
|
|
72
|
+
onItemPress={(value) => setSelected(value)}
|
|
73
|
+
isFirst={index === 0}
|
|
74
|
+
isLast={index === data.length - 1}
|
|
75
|
+
/>
|
|
76
|
+
))}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 带描述和搜索高亮
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
<ListItem
|
|
83
|
+
key={0}
|
|
84
|
+
item={{ name: 'John', value: 'john', desc: 'Manager' }}
|
|
85
|
+
selected={selected}
|
|
86
|
+
onItemPress={setSelected}
|
|
87
|
+
search="jo"
|
|
88
|
+
searchHighlightStyle={{ color: 'red' }}
|
|
89
|
+
/>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 带数量角标
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
<ListItem
|
|
96
|
+
key={0}
|
|
97
|
+
item={{ name: 'Orders', value: 'orders', number: 5 }}
|
|
98
|
+
selected={selected}
|
|
99
|
+
onItemPress={setSelected}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### 禁用状态
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<ListItem
|
|
107
|
+
key={0}
|
|
108
|
+
item={{ name: 'Unavailable', value: 'unavailable' }}
|
|
109
|
+
selected={selected}
|
|
110
|
+
onItemPress={setSelected}
|
|
111
|
+
disabled
|
|
112
|
+
/>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## 注意事项
|
|
116
|
+
|
|
117
|
+
- 选中状态通过比较 `selected.value === item.value` 判断
|
|
118
|
+
- 当 `item.number` 存在时显示数量角标(白字主题色背景),否则选中时显示勾选图标
|
|
119
|
+
- 禁用状态下点击不会触发 `onItemPress`
|
|
120
|
+
- `isFirst` / `isLast` 用于列表首末项圆角(12px),需手动传入
|
|
121
|
+
- 搜索高亮使用正则分割文本,大小写不敏感,同时作用于 name 和 desc 字段
|
|
122
|
+
- 列表项固定高度 48px
|
|
@@ -28,6 +28,10 @@ const MessageBox = ({
|
|
|
28
28
|
onConfirm
|
|
29
29
|
}) => {
|
|
30
30
|
const theme = (0, _themed.useTheme)();
|
|
31
|
+
const {
|
|
32
|
+
width: windowWidth
|
|
33
|
+
} = (0, _reactNative.useWindowDimensions)();
|
|
34
|
+
const isPhone = windowWidth <= 430;
|
|
31
35
|
const styles = useStyles();
|
|
32
36
|
const [modalVisible, setModalVisible] = (0, _react.useState)(false);
|
|
33
37
|
(0, _react.useEffect)(() => {
|
|
@@ -69,7 +73,9 @@ const MessageBox = ({
|
|
|
69
73
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
70
74
|
style: styles.modalContainer,
|
|
71
75
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
72
|
-
style: styles.modalContent,
|
|
76
|
+
style: [styles.modalContent, isPhone && {
|
|
77
|
+
width: windowWidth - 32
|
|
78
|
+
}],
|
|
73
79
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
74
80
|
style: styles.messagebox_header,
|
|
75
81
|
children: [stateIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","useTheme","styles","useStyles","modalVisible","setModalVisible","useState","useEffect","Boolean","stateIcon","useMemo","handleClose","useCallback","handleConfirm","handleRequestClose","jsx","Modal","animationType","transparent","onRequestClose","children","View","style","modalContainer","jsxs","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","Text","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","Pressable","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","makeStyles","flex","justifyContent","alignItems","zIndex","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MessageBox","state","title","text","icon","visible","confirmBtnText","closeBtnText","hideFooter","hideCloseBtn","hideConfirmBtn","descNumberOfLines","onVisibilityChange","onClose","onConfirm","theme","useTheme","width","windowWidth","useWindowDimensions","isPhone","styles","useStyles","modalVisible","setModalVisible","useState","useEffect","Boolean","stateIcon","useMemo","handleClose","useCallback","handleConfirm","handleRequestClose","jsx","Modal","animationType","transparent","onRequestClose","children","View","style","modalContainer","jsxs","modalContent","messagebox_header","messagebox_header_icon","name","size","color","colors","primary","messagebox_header_txt_con","Text","messagebox_header_txt","numberOfLines","ellipsizeMode","messagebox_main","messagebox_main_txt","messagebox_footer","Pressable","messagebox_btn","onPress","messagebox_btn_txt","backgroundColor","white","makeStyles","flex","justifyContent","alignItems","zIndex","borderRadius","display","flexDirection","padding","gap","height","alignContent","overflow","fontSize","fontWeight","secondary","paddingLeft","paddingRight","_default","exports","withTheme"],"sourceRoot":"../../../components","sources":["MessageBox/MessageBox.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# MessageBox
|
|
2
|
+
|
|
3
|
+
模态对话框组件,用于显示重要信息和获取用户确认。支持 success、warning、error 三种状态,提供灵活的按钮配置(隐藏确认/取消按钮、隐藏整个底部栏),适合操作确认、错误提示、成功反馈等场景。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- ✅ 支持 success、warning、error 三种状态
|
|
8
|
+
- ✅ 状态自动匹配图标(check_circle / warning / error)
|
|
9
|
+
- ✅ 可自定义图标名称覆盖默认状态图标
|
|
10
|
+
- ✅ 灵活的按钮配置:隐藏确认按钮、隐藏取消按钮、隐藏整个底部栏
|
|
11
|
+
- ✅ 自定义确认和取消按钮文本
|
|
12
|
+
- ✅ 描述文本行数限制(descNumberOfLines)
|
|
13
|
+
- ✅ 淡入淡出动画(animationType="fade")
|
|
14
|
+
- ✅ 透明遮罩背景
|
|
15
|
+
- ✅ 支持 onVisibilityChange 双向绑定控制
|
|
16
|
+
|
|
17
|
+
## 安装使用
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { MessageBox } from '@beppla/tapas-ui';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
26
|
+
|------|------|--------|------|
|
|
27
|
+
| visible | `boolean` | - | 是否显示对话框 |
|
|
28
|
+
| state | `'success' \| 'warning' \| 'error'` | - | 状态类型 |
|
|
29
|
+
| icon | `string` | 根据 state 自动选择 | 自定义图标名称 |
|
|
30
|
+
| title | `string` | - | 标题文本 |
|
|
31
|
+
| text | `string` | - | 描述内容 |
|
|
32
|
+
| hideFooter | `boolean` | `false` | 是否隐藏整个底部按钮栏 |
|
|
33
|
+
| hideCloseBtn | `boolean` | `false` | 是否隐藏取消按钮 |
|
|
34
|
+
| hideConfirmBtn | `boolean` | `false` | 是否隐藏确认按钮 |
|
|
35
|
+
| confirmBtnText | `string` | `'Confirm'` | 确认按钮文本 |
|
|
36
|
+
| closeBtnText | `string` | `'Close'` | 取消按钮文本 |
|
|
37
|
+
| descNumberOfLines | `number` | `3` | 描述文本最大行数 |
|
|
38
|
+
| onVisibilityChange | `(val: boolean) => void` | - | 可见状态变化回调 |
|
|
39
|
+
| onConfirm | `() => void` | - | 确认按钮点击回调 |
|
|
40
|
+
| onClose | `() => void` | - | 取消按钮点击回调 |
|
|
41
|
+
|
|
42
|
+
## 使用示例
|
|
43
|
+
|
|
44
|
+
### 基础用法
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
const [visible, setVisible] = useState(false);
|
|
48
|
+
|
|
49
|
+
<MessageBox
|
|
50
|
+
visible={visible}
|
|
51
|
+
title="Confirm"
|
|
52
|
+
text="Are you sure you want to proceed?"
|
|
53
|
+
confirmBtnText="OK"
|
|
54
|
+
closeBtnText="Cancel"
|
|
55
|
+
onVisibilityChange={setVisible}
|
|
56
|
+
onConfirm={() => {
|
|
57
|
+
handleConfirm();
|
|
58
|
+
setVisible(false);
|
|
59
|
+
}}
|
|
60
|
+
onClose={() => setVisible(false)}
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 不同状态
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<MessageBox
|
|
68
|
+
visible={visible}
|
|
69
|
+
state="success"
|
|
70
|
+
title="Success"
|
|
71
|
+
text="Operation completed!"
|
|
72
|
+
hideCloseBtn
|
|
73
|
+
confirmBtnText="OK"
|
|
74
|
+
onConfirm={() => setVisible(false)}
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
<MessageBox
|
|
78
|
+
visible={visible}
|
|
79
|
+
state="error"
|
|
80
|
+
title="Error"
|
|
81
|
+
text="Operation failed, please retry."
|
|
82
|
+
confirmBtnText="Retry"
|
|
83
|
+
closeBtnText="Close"
|
|
84
|
+
onConfirm={() => handleRetry()}
|
|
85
|
+
onClose={() => setVisible(false)}
|
|
86
|
+
/>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 仅确认按钮
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<MessageBox
|
|
93
|
+
visible={visible}
|
|
94
|
+
title="Notice"
|
|
95
|
+
text="This is a notification."
|
|
96
|
+
hideCloseBtn={true}
|
|
97
|
+
confirmBtnText="Got it"
|
|
98
|
+
onConfirm={() => setVisible(false)}
|
|
99
|
+
/>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### 无按钮(点击遮罩关闭)
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
<MessageBox
|
|
106
|
+
visible={visible}
|
|
107
|
+
title="Info"
|
|
108
|
+
text="Click backdrop to close."
|
|
109
|
+
hideFooter={true}
|
|
110
|
+
onVisibilityChange={setVisible}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## 注意事项
|
|
115
|
+
|
|
116
|
+
- 组件内部维护 `modalVisible` 状态,与外部 `visible` 同步
|
|
117
|
+
- 关闭优先级:`onClose` > `onVisibilityChange` > 内部 `setModalVisible(false)`
|
|
118
|
+
- 对话框固定宽度 392px,居中显示
|
|
119
|
+
- 需在 `ThemeProvider` 内使用
|
|
120
|
+
- 确认按钮使用主题 `primary` 色,取消按钮无背景色
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NavItemType","exports","useStyles","makeStyles","theme","menuContainer","backgroundColor","colors","bg1","display","height","overflow","navItem","flexDirection","alignItems","marginBottom","spacing","tpSm","borderRadius","radius","full","minWidth","minHeight","maxHeight","width","selectedNavItem","secondary","iconContainer","padding","selectedIconContainer","navItemText","fontFamily","fonts","color","white","fontSize","sizeM","fontWeight","weightM","logoContainer","justifyContent","black","navItemsContainer","marginTop","tpXs","bottomContainer","position","bottom","left","right","borderTopWidth","borderTopColor","grey3","mask","top","defaultProps","expanded","Navigation","onLogoPress","navItems","systemItems","logoImg","onItemPress","defaultSelectedItem","selectedIndex","onMaskPress","visible","navigation","props","isExpanded","setIsExpanded","useState","selectedItem","setSelectedItem","themeStyles","handleToggle","useCallback","prev","useEffect","type","Nav","selectedItemIndex","undefined","handleItemPress","item","name","navigate","params","jsxs","View","style","styles","container","children","jsx","TouchableOpacity","onPress","Platform","OS","smallContainer","expendedContainer","accessibilityRole","Image","source","map","index","smallMenusItemContainer","iconName","size","Text","selectedItemText","System","StyleSheet","create","marginLeft","_default","withTheme"],"sourceRoot":"../../../components","sources":["Navigation/Navigation.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_TapasIcon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NavItemType","exports","useStyles","makeStyles","theme","menuContainer","backgroundColor","colors","bg1","display","height","overflow","navItem","flexDirection","alignItems","marginBottom","spacing","tpSm","borderRadius","radius","full","minWidth","minHeight","maxHeight","width","selectedNavItem","secondary","iconContainer","padding","selectedIconContainer","navItemText","fontFamily","fonts","color","white","fontSize","sizeM","fontWeight","weightM","logoContainer","justifyContent","black","navItemsContainer","marginTop","tpXs","bottomContainer","position","bottom","left","right","borderTopWidth","borderTopColor","grey3","mask","top","defaultProps","expanded","Navigation","onLogoPress","navItems","systemItems","logoImg","onItemPress","defaultSelectedItem","selectedIndex","onMaskPress","visible","navigation","props","isExpanded","setIsExpanded","useState","selectedItem","setSelectedItem","themeStyles","handleToggle","useCallback","prev","useEffect","type","Nav","selectedItemIndex","undefined","handleItemPress","item","name","navigate","params","jsxs","View","style","styles","container","children","jsx","TouchableOpacity","onPress","Platform","OS","smallContainer","expendedContainer","accessibilityRole","Image","source","map","index","smallMenusItemContainer","iconName","size","Text","selectedItemText","System","StyleSheet","create","marginLeft","_default","withTheme"],"sourceRoot":"../../../components","sources":["Navigation/Navigation.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAQA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAsC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAI,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,IAiC1BgB,WAAW,GAAAC,OAAA,CAAAD,WAAA,0BAAXA,WAAW;EAAXA,WAAW;EAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AASvB,MAAME,SAAS,GAAG,IAAAC,kBAAU,EAAEC,KAAK,IAAK;EACtC,OAAO;IACLC,aAAa,EAAE;MACbC,eAAe,EAAEF,KAAK,EAAEG,MAAM,EAAEC,GAAG;MACnCC,OAAO,EAAE,MAAM;MACfC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACZ,CAAC;IACDC,OAAO,EAAE;MACPC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBJ,MAAM,EAAE,EAAE;MACVK,YAAY,EAAEX,KAAK,EAAEY,OAAO,EAAEC,IAAI;MAClCC,YAAY,EAAEd,KAAK,EAAEe,MAAM,EAAEC,IAAI;MACjCC,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,EAAE;MACbC,SAAS,EAAE,EAAE;MACbC,KAAK,EAAE;IACT,CAAC;IACDC,eAAe,EAAE;MACfnB,eAAe,EAAEF,KAAK,EAAEG,MAAM,EAAEmB;IAClC,CAAC;IACDC,aAAa,EAAE;MACbT,YAAY,EAAEd,KAAK,EAAEe,MAAM,EAAEC,IAAI;MACjCQ,OAAO,EAAE;IACX,CAAC;IACDC,qBAAqB,EAAE;MACrBvB,eAAe,EAAEF,KAAK,EAAEG,MAAM,EAAEmB;IAClC,CAAC;IACDI,WAAW,EAAE;MACXC,UAAU,EAAE3B,KAAK,EAAE4B,KAAK,EAAED,UAAU;MACpCE,KAAK,EAAE7B,KAAK,EAAEG,MAAM,EAAE2B,KAAK;MAC3BC,QAAQ,EAAE/B,KAAK,CAAC4B,KAAK,CAACI,KAAK;MAC3BC,UAAU,EAAEjC,KAAK,CAAC4B,KAAK,CAACM;IAC1B,CAAC;IACDC,aAAa,EAAE;MACb9B,OAAO,EAAE,MAAM;MACf+B,cAAc,EAAE,QAAQ;MACxB1B,UAAU,EAAE,QAAQ;MACpBJ,MAAM,EAAE,EAAE;MACVJ,eAAe,EAAEF,KAAK,EAAEG,MAAM,EAAEkC;IAClC,CAAC;IACDC,iBAAiB,EAAE;MACjBC,SAAS,EAAE,EAAE;MACbf,OAAO,EAAExB,KAAK,EAAEY,OAAO,EAAE4B;IAC3B,CAAC;IACDC,eAAe,EAAE;MACfC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,cAAc,EAAE,CAAC;MACjBC,cAAc,EAAE/C,KAAK,EAAEG,MAAM,EAAE6C,KAAK;MACpCxB,OAAO,EAAExB,KAAK,EAAEY,OAAO,EAAE4B;IAC3B,CAAC;IACDS,IAAI,EAAE;MACJP,QAAQ,EAAE,UAAU;MACpBQ,GAAG,EAAE,CAAC;MACNP,MAAM,EAAE,CAAC;MACTC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRzB,KAAK,EAAE,MAAM;MACblB,eAAe,EAAE;IACnB;EACF,CAAC;AACH,CAAC,CAAC;AAEF,MAAMiD,YAAY,GAAG;EACnBC,QAAQ,EAAE,KAAK,CAAE;AACnB,CAAC;AAED,MAAMC,UAAqC,GAAGA,CAAC;EAC7CC,WAAW;EACXC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPL,QAAQ;EACRM,WAAW;EACXC,mBAAmB;EACnBC,aAAa;EACbC,WAAW;EACX7D,KAAK;EACL8D,OAAO,GAAG,IAAI;EACdC,UAAU;EACV,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAC1Cf,QAAQ,IAAID,YAAY,CAACC,QAC3B,CAAC;EACD,MAAM,CAACgB,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAF,eAAQ,EAC9CR,mBACF,CAAC;EACD,MAAMW,WAAW,GAAGxE,SAAS,CAACkE,KAAK,CAAC;EAEpC,MAAMO,YAAY,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACrCN,aAAa,CAACO,IAAI,IAAI,CAACA,IAAI,CAAC;IAC5BnB,WAAW,GAAG,CAAC;EACjB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,IAAAoB,gBAAS,EAAC,MAAM;IACd,IACE,OAAOd,aAAa,KAAK,QAAQ,IACjCL,QAAQ,IACRA,QAAQ,CAACK,aAAa,CAAC,EACvB;MACAS,eAAe,CAAC;QACdM,IAAI,EAAE/E,WAAW,CAACgF,GAAG;QACrBC,iBAAiB,EAAEjB;MACrB,CAAC,CAAC;IACJ,CAAC,MAAM;MACLS,eAAe,CAACS,SAAS,CAAC;IAC5B;EACF,CAAC,EAAE,CAAClB,aAAa,EAAEL,QAAQ,CAAC,CAAC;EAE7B,MAAMwB,eAAe,GAAG,IAAAP,kBAAW,EAAC,CAACK,iBAAyB,EAAEF,IAAiB,KAAK;IACpFN,eAAe,CAAC;MACdM,IAAI;MACJE;IACF,CAAC,CAAC;IAEF,MAAMG,IAAI,GAAGL,IAAI,KAAK/E,WAAW,CAACgF,GAAG,GACjCrB,QAAQ,GAAGsB,iBAAiB,CAAC,GAC7BrB,WAAW,GAAGqB,iBAAiB,CAAC;IAEpC,IAAIG,IAAI,EAAE;MACRtB,WAAW,GAAGsB,IAAI,CAAC;MAEnB,IAAIjB,UAAU,IAAIiB,IAAI,CAACC,IAAI,EAAE;QAC3BlB,UAAU,CAACmB,QAAQ,CAACF,IAAI,CAACC,IAAI,EAAGD,IAAI,CAAwCG,MAAM,CAAC;MACrF;IACF;EACF,CAAC,EAAE,CAAC5B,QAAQ,EAAEC,WAAW,EAAEE,WAAW,EAAEK,UAAU,CAAC,CAAC;EAEpD,OACED,OAAO,iBACL,IAAAtF,WAAA,CAAA4G,IAAA,EAAChH,YAAA,CAAAiH,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAuH,gBAAgB;MACfC,OAAO,EAAEC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAGvB,YAAY,GAAGV,WAAY;MAC5DyB,KAAK,EAAErB,UAAU,IAAIK,WAAW,CAACrB,IAAK;MAAAwC,QAAA,eAEtC,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI,IAAE;IAAC,CACQ,CAAC,eACnB,IAAA7G,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;MACHC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB,CAACvB,UAAU,GAAGsB,MAAM,CAACQ,cAAc,GAAGR,MAAM,CAACS,iBAAiB,CAC9D;MAAAP,QAAA,eAEF,IAAAjH,WAAA,CAAA4G,IAAA,EAAChH,YAAA,CAAAiH,IAAI;QAACC,KAAK,EAAEhB,WAAW,CAACrE,aAAc;QAAAwF,QAAA,gBACrC,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAuH,gBAAgB;UACfC,OAAO,EAAErB,YAAa;UACtB0B,iBAAiB,EAAC,QAAQ;UAAAR,QAAA,eAE1B,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;YAACC,KAAK,EAAEhB,WAAW,CAACnC,aAAc;YAAAsD,QAAA,eACrC,IAAAjH,WAAA,CAAAkH,GAAA,EAACrH,OAAA,CAAA6H,KAAK;cAACC,MAAM,EAAE1C,OAAQ;cAAC6B,KAAK,EAAE;gBAAElE,KAAK,EAAE,EAAE;gBAAEd,MAAM,EAAE;cAAG;YAAE,CAAE;UAAC,CACxD;QAAC,CACS,CAAC,eACnB,IAAA9B,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;UAACC,KAAK,EAAE,CAAChB,WAAW,CAAChC,iBAAiB,CAAE;UAAAmD,QAAA,EAC1ClC,QAAQ,EAAE6C,GAAG,CAAC,CAACpB,IAAI,EAAEqB,KAAK,kBACzB,IAAA7H,WAAA,CAAA4G,IAAA,EAAChH,YAAA,CAAAuH,gBAAgB;YAEfC,OAAO,EAAEA,CAAA,KAAMb,eAAe,CAACsB,KAAK,EAAEzG,WAAW,CAACgF,GAAG,CAAE;YACvDU,KAAK,EAAE,CACLhB,WAAW,CAAC9D,OAAO,EACnB,CAACyD,UAAU,IAAIsB,MAAM,CAACe,uBAAuB,EAC7ClC,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACvCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAACgF,GAAG,IACtCX,UAAU,IACVK,WAAW,CAACjD,eAAe,CAC7B;YAAAoE,QAAA,gBAGF,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;cACHC,KAAK,EAAE,CACLhB,WAAW,CAAC/C,aAAa,EACzB,CAAC0C,UAAU,IACTG,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACzCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAACgF,GAAG,IACtCN,WAAW,CAAC7C,qBAAqB,CACnC;cAAAgE,QAAA,eAEF,IAAAjH,WAAA,CAAAkH,GAAA,EAACpH,UAAA,CAAAK,OAAI;gBACHsG,IAAI,EAAED,IAAI,CAACuB,QAAS;gBACpBC,IAAI,EAAE,EAAG;gBACT3E,KAAK,EAAG7B,KAAK,EAAwDG,MAAM,EAAE2B;cAAM,CACpF;YAAC,CACE,CAAC,EACNmC,UAAU,iBACT,IAAAzF,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAqI,IAAI;cACHnB,KAAK,EAAE,CACLhB,WAAW,CAAC5C,WAAW,EACvB0C,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACvCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAACgF,GAAG,IACtCW,MAAM,CAACmB,gBAAgB,CACzB;cAAAjB,QAAA,EAEDT,IAAI,CAACC;YAAI,CACN,CACP;UAAA,GAtCID,IAAI,CAACC,IAwCM,CACnB;QAAC,CACE,CAAC,eACP,IAAAzG,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;UAACC,KAAK,EAAEhB,WAAW,CAAC7B,eAAgB;UAAAgD,QAAA,EACtCjC,WAAW,EAAE4C,GAAG,CAAC,CAACpB,IAAI,EAAEqB,KAAK,kBAC5B,IAAA7H,WAAA,CAAA4G,IAAA,EAAChH,YAAA,CAAAuH,gBAAgB;YAEfC,OAAO,EAAEA,CAAA,KAAMb,eAAe,CAACsB,KAAK,EAAEzG,WAAW,CAAC+G,MAAM,CAAE;YAC1DrB,KAAK,EAAE,CACLhB,WAAW,CAAC9D,OAAO,EACnB,CAACyD,UAAU,IAAIsB,MAAM,CAACe,uBAAuB,EAC7ClC,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACvCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAAC+G,MAAM,IACzC1C,UAAU,IACVK,WAAW,CAACjD,eAAe,CAC7B;YAAAoE,QAAA,gBAGF,IAAAjH,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAiH,IAAI;cACHC,KAAK,EAAE,CACLhB,WAAW,CAAC/C,aAAa,EACzB6C,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACvCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAAC+G,MAAM,IACzC,CAAC1C,UAAU,IACXK,WAAW,CAAC7C,qBAAqB,CACnC;cAAAgE,QAAA,eAEF,IAAAjH,WAAA,CAAAkH,GAAA,EAACpH,UAAA,CAAAK,OAAI;gBACHsG,IAAI,EAAED,IAAI,CAACuB,QAAS;gBACpBC,IAAI,EAAE,EAAG;gBACT3E,KAAK,EAAG7B,KAAK,EAAwDG,MAAM,EAAE2B;cAAM,CACpF;YAAC,CACE,CAAC,EACNmC,UAAU,iBACT,IAAAzF,WAAA,CAAAkH,GAAA,EAACtH,YAAA,CAAAqI,IAAI;cACHnB,KAAK,EAAE,CACLhB,WAAW,CAAC5C,WAAW,EACvB0C,YAAY,EAAES,iBAAiB,KAAKwB,KAAK,IACvCjC,YAAY,EAAEO,IAAI,KAAK/E,WAAW,CAAC+G,MAAM,IACzCpB,MAAM,CAACmB,gBAAgB,CACzB;cAAAjB,QAAA,EAEDT,IAAI,CAACC;YAAI,CACN,CACP;UAAA,GAtCID,IAAI,CAACC,IAwCM,CACnB;QAAC,CACE,CAAC;MAAA,CACH;IAAC,CACH,CAAC;EAAA,CACH,CACP;AAEL,CAAC;AAED,MAAMM,MAAM,GAAGqB,uBAAU,CAACC,MAAM,CAAC;EAC/BrB,SAAS,EAAE;IACTlF,MAAM,EAAE;EACV,CAAC;EACDgG,uBAAuB,EAAE;IACvBQ,UAAU,EAAE;EACd,CAAC;EACDf,cAAc,EAAE;IACd3E,KAAK,EAAE;EACT,CAAC;EACD4E,iBAAiB,EAAE;IACjB5E,KAAK,EAAE;EACT,CAAC;EACDsF,gBAAgB,EAAE;IAChBzE,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAAC,IAAA8E,QAAA,GAAAlH,OAAA,CAAAlB,OAAA,GAEY,IAAAqI,iBAAS,EAAC3D,UAA6B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# Navigation
|
|
2
|
+
|
|
3
|
+
侧边导航栏组件,提供可展开/折叠的垂直导航菜单。支持导航项(navItems)和系统项(systemItems)两层分组,收起时仅显示图标,展开时显示图标和文本。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- 可展开/折叠的侧边导航(收起 56px,展开 336px)
|
|
8
|
+
- 导航项和系统项两层分组(系统项固定在底部)
|
|
9
|
+
- 点击 Logo 切换展开/折叠状态
|
|
10
|
+
- 选中项高亮显示(展开时背景高亮,收起时图标高亮)
|
|
11
|
+
- 移动端支持背景遮罩层(点击遮罩关闭导航)
|
|
12
|
+
- 可配置权限信息(`permissions` 字段)
|
|
13
|
+
- 支持 `selectedIndex` 受控选中
|
|
14
|
+
- 可选集成 React Navigation 自动路由导航
|
|
15
|
+
- 自定义 Logo 图片
|
|
16
|
+
|
|
17
|
+
## 安装使用
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Navigation, NavItem, NavItemType, SelectedItem } from '@beppla/tapas-ui';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
26
|
+
|------|------|--------|------|
|
|
27
|
+
| navItems | `NavItem[]` | - | 导航项数组 |
|
|
28
|
+
| systemItems | `NavItem[]` | - | 系统项数组(显示在底部) |
|
|
29
|
+
| logoImg | `ImageSourcePropType` | - | Logo 图片资源 |
|
|
30
|
+
| expanded | `boolean` | `false` | 是否展开导航菜单 |
|
|
31
|
+
| onItemPress | `(item: NavItem) => void` | - | 导航项点击回调 |
|
|
32
|
+
| onLogoPress | `() => void` | - | Logo 点击回调 |
|
|
33
|
+
| defaultSelectedItem | `SelectedItem` | - | 默认选中项 |
|
|
34
|
+
| selectedIndex | `number` | - | 选中项索引(受控模式,仅匹配 navItems) |
|
|
35
|
+
| visible | `boolean` | `true` | 导航栏是否可见 |
|
|
36
|
+
| onMaskPress | `() => void` | - | 背景遮罩点击回调(移动端) |
|
|
37
|
+
| navigation | `{ navigate: (routeName: string, params?: any) => void }` | - | React Navigation 对象(可选) |
|
|
38
|
+
|
|
39
|
+
## 类型定义
|
|
40
|
+
|
|
41
|
+
### NavItem
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
interface NavItem {
|
|
45
|
+
name: string; // 项目名称(展开时显示)
|
|
46
|
+
iconName: string; // TapasIcon 图标名称
|
|
47
|
+
url?: string; // 链接 URL(可选)
|
|
48
|
+
permissions?: Permissions[]; // 权限要求(可选)
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Permissions
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
interface Permissions {
|
|
56
|
+
resource: string; // 资源名
|
|
57
|
+
action: string; // 操作名
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### NavItemType / SelectedItem
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
enum NavItemType {
|
|
65
|
+
Nav = 'nav', // 导航项
|
|
66
|
+
System = 'system', // 系统项
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
interface SelectedItem {
|
|
70
|
+
type: NavItemType; // 项目类型
|
|
71
|
+
selectedItemIndex: number; // 项目索引
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 使用示例
|
|
76
|
+
|
|
77
|
+
### 基础导航
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { Navigation, NavItem, NavItemType } from '@beppla/tapas-ui';
|
|
81
|
+
|
|
82
|
+
const navItems: NavItem[] = [
|
|
83
|
+
{ name: 'Dashboard', iconName: 'home' },
|
|
84
|
+
{ name: 'Analytics', iconName: 'vector' },
|
|
85
|
+
{ name: 'Products', iconName: 'product_items' },
|
|
86
|
+
{ name: 'Messages', iconName: 'chat' },
|
|
87
|
+
];
|
|
88
|
+
|
|
89
|
+
const systemItems: NavItem[] = [
|
|
90
|
+
{ name: 'Settings', iconName: 'settings' },
|
|
91
|
+
{ name: 'Refresh', iconName: 'refresh' },
|
|
92
|
+
];
|
|
93
|
+
|
|
94
|
+
export default function App() {
|
|
95
|
+
return (
|
|
96
|
+
<Navigation
|
|
97
|
+
navItems={navItems}
|
|
98
|
+
systemItems={systemItems}
|
|
99
|
+
logoImg={require('./logo.png')}
|
|
100
|
+
defaultSelectedItem={{
|
|
101
|
+
type: NavItemType.Nav,
|
|
102
|
+
selectedItemIndex: 0,
|
|
103
|
+
}}
|
|
104
|
+
/>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### 带点击回调
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
<Navigation
|
|
113
|
+
navItems={navItems}
|
|
114
|
+
systemItems={systemItems}
|
|
115
|
+
logoImg={require('./logo.png')}
|
|
116
|
+
onItemPress={(item) => {
|
|
117
|
+
console.log('Selected:', item.name);
|
|
118
|
+
setCurrentPage(item.name);
|
|
119
|
+
}}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 受控选中索引
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
const [selectedIdx, setSelectedIdx] = useState(0);
|
|
127
|
+
|
|
128
|
+
<Navigation
|
|
129
|
+
navItems={navItems}
|
|
130
|
+
systemItems={systemItems}
|
|
131
|
+
logoImg={require('./logo.png')}
|
|
132
|
+
selectedIndex={selectedIdx}
|
|
133
|
+
onItemPress={(item) => {
|
|
134
|
+
const idx = navItems.findIndex(n => n.name === item.name);
|
|
135
|
+
if (idx >= 0) setSelectedIdx(idx);
|
|
136
|
+
}}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### 与 React Navigation 集成
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { useNavigation } from '@react-navigation/native';
|
|
144
|
+
|
|
145
|
+
const navigation = useNavigation();
|
|
146
|
+
|
|
147
|
+
<Navigation
|
|
148
|
+
navItems={[
|
|
149
|
+
{ name: 'Home', iconName: 'home' },
|
|
150
|
+
{ name: 'Details', iconName: 'info' },
|
|
151
|
+
]}
|
|
152
|
+
logoImg={require('./logo.png')}
|
|
153
|
+
navigation={navigation}
|
|
154
|
+
/>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### 完整布局示例
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
import { View, Text } from 'react-native';
|
|
161
|
+
import { Navigation, NavItem } from '@beppla/tapas-ui';
|
|
162
|
+
import { useState } from 'react';
|
|
163
|
+
|
|
164
|
+
const navItems: NavItem[] = [
|
|
165
|
+
{ name: 'Dashboard', iconName: 'home' },
|
|
166
|
+
{ name: 'Products', iconName: 'product_items' },
|
|
167
|
+
{ name: 'Orders', iconName: 'manufacturing' },
|
|
168
|
+
];
|
|
169
|
+
|
|
170
|
+
export default function App() {
|
|
171
|
+
const [page, setPage] = useState('Dashboard');
|
|
172
|
+
|
|
173
|
+
return (
|
|
174
|
+
<View style={{ flexDirection: 'row', height: '100%' }}>
|
|
175
|
+
<Navigation
|
|
176
|
+
navItems={navItems}
|
|
177
|
+
logoImg={require('./logo.png')}
|
|
178
|
+
onItemPress={(item) => setPage(item.name)}
|
|
179
|
+
/>
|
|
180
|
+
<View style={{ flex: 1, padding: 16 }}>
|
|
181
|
+
<Text>{page} Content</Text>
|
|
182
|
+
</View>
|
|
183
|
+
</View>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## 注意事项
|
|
189
|
+
|
|
190
|
+
- 导航栏默认收起状态(宽度 56px),点击 Logo 切换展开(336px)/折叠
|
|
191
|
+
- 桌面端点击 Logo 触发 `onLogoPress` 并切换展开状态;移动端点击 Logo 触发 `onMaskPress`
|
|
192
|
+
- 展开时会在导航栏外显示半透明遮罩层(`rgba(0,0,0,0.5)`),点击遮罩可关闭
|
|
193
|
+
- `selectedIndex` 仅匹配 `navItems` 数组,不支持直接选中 `systemItems`
|
|
194
|
+
- 设置 `navigation` 属性后,点击导航项会自动调用 `navigation.navigate(item.name)`
|
|
195
|
+
- 导航项图标大小固定 20px,颜色为主题 `white`
|
|
196
|
+
- 选中状态:展开时背景高亮(`secondary` 色),收起时图标容器高亮
|
|
197
|
+
- `visible=false` 时整个导航栏不渲染
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# NumericInput
|
|
2
|
+
|
|
3
|
+
数字输入组件,包含加减按钮和文本输入框,适用于数量选择场景。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- ✅ 加减按钮控制数值增减
|
|
8
|
+
- ✅ 支持手动键盘输入数字
|
|
9
|
+
- ✅ 可设置最大值和最小值限制
|
|
10
|
+
- ✅ 到达边界时自动禁用对应按钮
|
|
11
|
+
- ✅ 支持整体禁用状态
|
|
12
|
+
- ✅ 加号按钮使用主题色填充背景
|
|
13
|
+
- ✅ 支持 onReduce 和 onAdd 额外回调
|
|
14
|
+
- ✅ 兼容 RN 0.77 Bridgeless 模式(Android 焦点管理修复)
|
|
15
|
+
- ✅ 支持自定义输入框样式
|
|
16
|
+
- ✅ 支持 testID 属性用于测试
|
|
17
|
+
|
|
18
|
+
## 安装使用
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import NumericInput from '@beppla/tapas-ui/components/NumericInput/NumericInput';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
27
|
+
|------|------|--------|------|
|
|
28
|
+
| value | `number` | - | 当前数值 |
|
|
29
|
+
| max | `number` | - | 最大值 |
|
|
30
|
+
| min | `number` | - | 最小值 |
|
|
31
|
+
| onChange | `(value: number) => void` | - | 数值变化回调 |
|
|
32
|
+
| onReduce | `() => void` | - | 减少按钮点击回调(在数值变化前触发) |
|
|
33
|
+
| onAdd | `() => void` | - | 增加按钮点击回调(在数值变化前触发) |
|
|
34
|
+
| disabled | `boolean` | - | 是否禁用整个组件 |
|
|
35
|
+
| inputStyle | `StyleProp<ViewStyle>` | - | 输入框自定义样式 |
|
|
36
|
+
| testID | `string` | - | 测试标识 |
|
|
37
|
+
| enableBridgelessFix | `boolean` | `true` | 是否启用 RN 0.77 Bridgeless 模式兼容修复 |
|
|
38
|
+
|
|
39
|
+
## 使用示例
|
|
40
|
+
|
|
41
|
+
### 基础用法
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<NumericInput
|
|
45
|
+
value={0}
|
|
46
|
+
min={0}
|
|
47
|
+
max={99}
|
|
48
|
+
onChange={(value) => console.log('数量:', value)}
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 设置范围
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<NumericInput
|
|
56
|
+
value={5}
|
|
57
|
+
min={1}
|
|
58
|
+
max={10}
|
|
59
|
+
onChange={(value) => setQuantity(value)}
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 禁用状态
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
<NumericInput
|
|
67
|
+
value={3}
|
|
68
|
+
min={0}
|
|
69
|
+
max={99}
|
|
70
|
+
disabled
|
|
71
|
+
onChange={() => {}}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 带额外回调
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<NumericInput
|
|
79
|
+
value={count}
|
|
80
|
+
min={0}
|
|
81
|
+
max={99}
|
|
82
|
+
onChange={(value) => setCount(value)}
|
|
83
|
+
onAdd={() => console.log('点击了增加')}
|
|
84
|
+
onReduce={() => console.log('点击了减少')}
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 注意事项
|
|
89
|
+
|
|
90
|
+
- `onReduce` 和 `onAdd` 在按钮点击时立即触发,即使数值已到边界也会触发
|
|
91
|
+
- `onChange` 只在数值实际变化时触发(边界处不触发)
|
|
92
|
+
- 手动输入时,超过 `max` 的值会被忽略
|
|
93
|
+
- 失焦时会触发 `onChange` 回调,Android 上有延迟处理以兼容 Bridgeless 模式
|
|
94
|
+
- 组件最小宽度 136px,高度 40px
|
|
95
|
+
- 如果 Android 上遇到焦点问题,可设置 `enableBridgelessFix={false}` 尝试
|