namirasoft-site-react 1.4.166 → 1.4.167
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/.dockerignore +86 -86
- package/.env.template +10 -10
- package/Dockerfile +18 -18
- package/config-overrides.js +72 -72
- package/dist/App.css +34 -0
- package/dist/App.js +4 -36
- package/dist/App.js.map +1 -1
- package/dist/NSBoxBuilder.d.ts +2 -0
- package/dist/NSBoxBuilder.js +78 -71
- package/dist/NSBoxBuilder.js.map +1 -1
- package/dist/Validator.js +3 -3
- package/dist/Validator.js.map +1 -1
- package/dist/components/NSBarAction.module.css +82 -82
- package/dist/components/NSBarAlert.module.css +79 -79
- package/dist/components/NSBarNotification.module.css +34 -34
- package/dist/components/NSBarTitle.module.css +9 -9
- package/dist/components/NSBox.module.css +50 -50
- package/dist/components/NSBoxBaseCombo.js +11 -13
- package/dist/components/NSBoxBaseCombo.js.map +1 -1
- package/dist/components/NSBoxBaseCombo.module.css +6 -6
- package/dist/components/NSBoxBaseLayout.d.ts +2 -3
- package/dist/components/NSBoxBaseLayout.js +3 -2
- package/dist/components/NSBoxBaseLayout.js.map +1 -1
- package/dist/components/NSBoxBaseLayoutRecursive.d.ts +13 -0
- package/dist/components/NSBoxBaseLayoutRecursive.js +38 -0
- package/dist/components/NSBoxBaseLayoutRecursive.js.map +1 -0
- package/dist/components/NSBoxBoolean.js +6 -8
- package/dist/components/NSBoxBoolean.js.map +1 -1
- package/dist/components/NSBoxBoolean.module.css +67 -67
- package/dist/components/NSBoxBooleans.js +3 -4
- package/dist/components/NSBoxBooleans.js.map +1 -1
- package/dist/components/NSBoxColor.js +5 -6
- package/dist/components/NSBoxColor.js.map +1 -1
- package/dist/components/NSBoxCombo.js +5 -5
- package/dist/components/NSBoxCombo.js.map +1 -1
- package/dist/components/NSBoxDate.js +5 -6
- package/dist/components/NSBoxDate.js.map +1 -1
- package/dist/components/NSBoxDate.module.css +4 -4
- package/dist/components/NSBoxDateTime.js +5 -6
- package/dist/components/NSBoxDateTime.js.map +1 -1
- package/dist/components/NSBoxDateTime.module.css +4 -4
- package/dist/components/NSBoxDouble.js +5 -6
- package/dist/components/NSBoxDouble.js.map +1 -1
- package/dist/components/NSBoxDuration.js +5 -6
- package/dist/components/NSBoxDuration.js.map +1 -1
- package/dist/components/NSBoxDuration.module.css +4 -4
- package/dist/components/NSBoxDynamic.d.ts +0 -1
- package/dist/components/NSBoxDynamic.js.map +1 -1
- package/dist/components/NSBoxEmail.js +6 -5
- package/dist/components/NSBoxEmail.js.map +1 -1
- package/dist/components/NSBoxEntity.js +5 -5
- package/dist/components/NSBoxEntity.js.map +1 -1
- package/dist/components/NSBoxEnum.js +9 -5
- package/dist/components/NSBoxEnum.js.map +1 -1
- package/dist/components/NSBoxFile.js +1 -3
- package/dist/components/NSBoxFile.js.map +1 -1
- package/dist/components/NSBoxFile.module.css +10 -10
- package/dist/components/NSBoxFilePath.js +5 -6
- package/dist/components/NSBoxFilePath.js.map +1 -1
- package/dist/components/NSBoxFont.js +5 -6
- package/dist/components/NSBoxFont.js.map +1 -1
- package/dist/components/NSBoxIPV4.js +5 -6
- package/dist/components/NSBoxIPV4.js.map +1 -1
- package/dist/components/NSBoxIPV4Range.js +5 -6
- package/dist/components/NSBoxIPV4Range.js.map +1 -1
- package/dist/components/NSBoxIPV6.js +5 -6
- package/dist/components/NSBoxIPV6.js.map +1 -1
- package/dist/components/NSBoxIPV6Range.js +5 -6
- package/dist/components/NSBoxIPV6Range.js.map +1 -1
- package/dist/components/NSBoxInteger.js +5 -6
- package/dist/components/NSBoxInteger.js.map +1 -1
- package/dist/components/NSBoxMoney.d.ts +3 -3
- package/dist/components/NSBoxMoney.js +8 -8
- package/dist/components/NSBoxMoney.js.map +1 -1
- package/dist/components/NSBoxPassword.js +4 -7
- package/dist/components/NSBoxPassword.js.map +1 -1
- package/dist/components/NSBoxPhone.js +5 -6
- package/dist/components/NSBoxPhone.js.map +1 -1
- package/dist/components/NSBoxPhone.module.css +35 -35
- package/dist/components/NSBoxRadio.js +6 -8
- package/dist/components/NSBoxRadio.js.map +1 -1
- package/dist/components/NSBoxRadio.module.css +33 -33
- package/dist/components/NSBoxSchemaBase.d.ts +39 -0
- package/dist/components/NSBoxSchemaBase.js +327 -0
- package/dist/components/NSBoxSchemaBase.js.map +1 -0
- package/dist/components/NSBoxSchemaBase.module.css +18 -0
- package/dist/components/NSBoxSchemaVariable.d.ts +32 -0
- package/dist/components/NSBoxSchemaVariable.js +127 -0
- package/dist/components/NSBoxSchemaVariable.js.map +1 -0
- package/dist/components/NSBoxSchemaVariable.module.css +17 -0
- package/dist/components/NSBoxSearch.js +8 -5
- package/dist/components/NSBoxSearch.js.map +1 -1
- package/dist/components/NSBoxString.js +8 -5
- package/dist/components/NSBoxString.js.map +1 -1
- package/dist/components/NSBoxTextArea.js +8 -5
- package/dist/components/NSBoxTextArea.js.map +1 -1
- package/dist/components/NSBoxTextArea.module.css +12 -12
- package/dist/components/NSBoxTime.js +5 -6
- package/dist/components/NSBoxTime.js.map +1 -1
- package/dist/components/NSBoxTime.module.css +4 -4
- package/dist/components/NSBoxTimeZone.js +5 -6
- package/dist/components/NSBoxTimeZone.js.map +1 -1
- package/dist/components/NSBoxURL.js +6 -6
- package/dist/components/NSBoxURL.js.map +1 -1
- package/dist/components/NSBoxVersion.js +5 -6
- package/dist/components/NSBoxVersion.js.map +1 -1
- package/dist/components/NSButton.module.css +57 -57
- package/dist/components/NSButtonBlue.module.css +4 -4
- package/dist/components/NSButtonGreen.module.css +4 -4
- package/dist/components/NSButtonRed.module.css +4 -4
- package/dist/components/NSCard.module.css +114 -114
- package/dist/components/NSCardScreenshot.module.css +41 -41
- package/dist/components/NSChartColumn.module.css +7 -7
- package/dist/components/NSChartTable.module.css +21 -21
- package/dist/components/NSColumn.module.css +16 -16
- package/dist/components/NSCopyBox.module.css +39 -39
- package/dist/components/NSDialog.module.css +111 -110
- package/dist/components/NSDialogPageSelection.module.css +103 -103
- package/dist/components/NSDownTimer.module.css +55 -55
- package/dist/components/NSDownload.module.css +46 -46
- package/dist/components/NSElectronicCard.module.css +60 -60
- package/dist/components/NSEntityCardBackground.module.css +27 -27
- package/dist/components/NSFilterBox.module.css +56 -56
- package/dist/components/NSFilterItem.module.css +25 -25
- package/dist/components/NSFooter.module.css +123 -123
- package/dist/components/NSHeader.module.css +291 -291
- package/dist/components/NSHeaderScreenshot.module.css +35 -35
- package/dist/components/NSLabel.module.css +15 -15
- package/dist/components/NSLabelErrorNotifier.module.css +2 -2
- package/dist/components/NSLayout.module.css +14 -14
- package/dist/components/NSLine.js.map +1 -1
- package/dist/components/NSLine.module.css +13 -12
- package/dist/components/NSLink.module.css +36 -36
- package/dist/components/NSListGrouped.module.css +69 -69
- package/dist/components/NSLoading.module.css +30 -30
- package/dist/components/NSMenuAction.js +2 -2
- package/dist/components/NSMenuAction.module.css +87 -87
- package/dist/components/NSMenuButton.d.ts +10 -5
- package/dist/components/NSMenuButton.js +13 -12
- package/dist/components/NSMenuButton.js.map +1 -1
- package/dist/components/NSMenuButton.module.css +44 -44
- package/dist/components/NSNoData.module.css +9 -9
- package/dist/components/NSPagination.module.css +85 -85
- package/dist/components/NSPanel.module.css +19 -18
- package/dist/components/NSPanelAccordion.module.css +4 -4
- package/dist/components/NSRange.module.css +66 -66
- package/dist/components/NSRepeater.d.ts +8 -6
- package/dist/components/NSRepeater.js +21 -14
- package/dist/components/NSRepeater.js.map +1 -1
- package/dist/components/NSRepeaterNSBoxSchemaVariable.d.ts +23 -0
- package/dist/components/NSRepeaterNSBoxSchemaVariable.js +50 -0
- package/dist/components/NSRepeaterNSBoxSchemaVariable.js.map +1 -0
- package/dist/components/NSRow.module.css +17 -17
- package/dist/components/NSSection.module.css +4 -4
- package/dist/components/NSSectionCards.module.css +38 -38
- package/dist/components/NSSectionTiles.module.css +10 -10
- package/dist/components/NSTabPage.module.css +59 -59
- package/dist/components/NSTable.module.css +263 -263
- package/dist/components/NSTag.module.css +52 -52
- package/dist/components/NSTile.module.css +76 -76
- package/dist/components/NSTimelineMonthly.module.css +71 -71
- package/dist/components/NSTitle.module.css +15 -15
- package/dist/index.css +6 -0
- package/dist/pages/NSNotFoundPage.module.css +17 -17
- package/dist/pages/NSUpdating.module.css +35 -35
- package/package.json +76 -76
- package/public/index.html +38 -38
- package/src/App.css +33 -33
- package/src/App.tsx +54 -107
- package/src/Color.tsx +10 -10
- package/src/CopyToClipboard.ts +6 -6
- package/src/NSBoxBuilder.tsx +849 -828
- package/src/Validator.ts +147 -147
- package/src/components/INSBox.tsx +6 -6
- package/src/components/NSBarAction.module.css +82 -82
- package/src/components/NSBarAction.tsx +85 -85
- package/src/components/NSBarAlert.module.css +79 -79
- package/src/components/NSBarAlert.tsx +31 -31
- package/src/components/NSBarNotification.module.css +34 -34
- package/src/components/NSBarNotification.tsx +89 -89
- package/src/components/NSBarTitle.module.css +9 -9
- package/src/components/NSBarTitle.tsx +29 -29
- package/src/components/NSBox.module.css +50 -50
- package/src/components/NSBox.tsx +19 -19
- package/src/components/NSBoxBaseCombo.module.css +6 -6
- package/src/components/NSBoxBaseCombo.tsx +298 -305
- package/src/components/NSBoxBaseLayout.tsx +79 -83
- package/src/components/NSBoxBaseLayoutRecursive.tsx +55 -0
- package/src/components/NSBoxBoolean.module.css +67 -67
- package/src/components/NSBoxBoolean.tsx +114 -120
- package/src/components/NSBoxBooleans.tsx +161 -163
- package/src/components/NSBoxColor.tsx +87 -91
- package/src/components/NSBoxCombo.tsx +84 -86
- package/src/components/NSBoxDate.module.css +4 -4
- package/src/components/NSBoxDate.tsx +101 -105
- package/src/components/NSBoxDateTime.module.css +4 -4
- package/src/components/NSBoxDateTime.tsx +102 -106
- package/src/components/NSBoxDouble.tsx +91 -95
- package/src/components/NSBoxDuration.module.css +4 -4
- package/src/components/NSBoxDuration.tsx +92 -96
- package/src/components/NSBoxDynamic.tsx +55 -56
- package/src/components/NSBoxEmail.tsx +96 -98
- package/src/components/NSBoxEntity.tsx +73 -75
- package/src/components/NSBoxEnum.tsx +101 -99
- package/src/components/NSBoxFile.module.css +10 -10
- package/src/components/NSBoxFile.tsx +101 -105
- package/src/components/NSBoxFilePath.tsx +87 -91
- package/src/components/NSBoxFont.tsx +87 -91
- package/src/components/NSBoxIPV4.tsx +92 -96
- package/src/components/NSBoxIPV4Range.tsx +87 -91
- package/src/components/NSBoxIPV6.tsx +89 -93
- package/src/components/NSBoxIPV6Range.tsx +87 -91
- package/src/components/NSBoxInteger.tsx +89 -93
- package/src/components/NSBoxMoney.tsx +92 -96
- package/src/components/NSBoxPassword.tsx +103 -109
- package/src/components/NSBoxPhone.module.css +35 -35
- package/src/components/NSBoxPhone.tsx +107 -112
- package/src/components/NSBoxRadio.module.css +33 -33
- package/src/components/NSBoxRadio.tsx +89 -95
- package/src/components/NSBoxSchemaBase.module.css +18 -0
- package/src/components/NSBoxSchemaBase.tsx +523 -0
- package/src/components/NSBoxSchemaVariable.module.css +17 -0
- package/src/components/NSBoxSchemaVariable.tsx +247 -0
- package/src/components/NSBoxSearch.tsx +95 -93
- package/src/components/NSBoxString.tsx +88 -86
- package/src/components/NSBoxTextArea.module.css +12 -12
- package/src/components/NSBoxTextArea.tsx +96 -94
- package/src/components/NSBoxTime.module.css +4 -4
- package/src/components/NSBoxTime.tsx +90 -93
- package/src/components/NSBoxTimeZone.tsx +87 -91
- package/src/components/NSBoxURL.tsx +88 -91
- package/src/components/NSBoxVersion.tsx +87 -91
- package/src/components/NSButton.module.css +57 -57
- package/src/components/NSButton.tsx +25 -25
- package/src/components/NSButtonBlue.module.css +4 -4
- package/src/components/NSButtonBlue.tsx +19 -19
- package/src/components/NSButtonGreen.module.css +4 -4
- package/src/components/NSButtonGreen.tsx +19 -19
- package/src/components/NSButtonRed.module.css +4 -4
- package/src/components/NSButtonRed.tsx +19 -19
- package/src/components/NSCard.module.css +114 -114
- package/src/components/NSCard.tsx +63 -63
- package/src/components/NSCardScreenshot.module.css +41 -41
- package/src/components/NSCardScreenshot.tsx +31 -31
- package/src/components/NSChartColumn.module.css +7 -7
- package/src/components/NSChartColumn.tsx +106 -106
- package/src/components/NSChartDoughnut.tsx +108 -108
- package/src/components/NSChartPie.tsx +105 -105
- package/src/components/NSChartRange.tsx +14 -14
- package/src/components/NSChartTable.module.css +21 -21
- package/src/components/NSChartTable.tsx +94 -94
- package/src/components/NSColumn.module.css +16 -16
- package/src/components/NSColumn.tsx +18 -18
- package/src/components/NSCopy.tsx +56 -56
- package/src/components/NSCopyBox.module.css +39 -39
- package/src/components/NSCopyBox.tsx +53 -53
- package/src/components/NSDialog.module.css +111 -110
- package/src/components/NSDialog.tsx +61 -61
- package/src/components/NSDialogDelete.tsx +26 -26
- package/src/components/NSDialogInfo.tsx +32 -32
- package/src/components/NSDialogPageSelection.module.css +103 -103
- package/src/components/NSDialogPageSelection.tsx +223 -223
- package/src/components/NSDownTimer.module.css +55 -55
- package/src/components/NSDownTimer.tsx +77 -77
- package/src/components/NSDownload.module.css +46 -46
- package/src/components/NSDownload.tsx +63 -63
- package/src/components/NSElectronicCard.module.css +60 -60
- package/src/components/NSElectronicCard.tsx +46 -46
- package/src/components/NSEntityCardBackground.module.css +27 -27
- package/src/components/NSEntityCardBackground.tsx +36 -36
- package/src/components/NSFilterBox.module.css +56 -56
- package/src/components/NSFilterBox.tsx +366 -366
- package/src/components/NSFilterItem.module.css +25 -25
- package/src/components/NSFilterItem.tsx +27 -27
- package/src/components/NSFooter.module.css +123 -123
- package/src/components/NSFooter.tsx +316 -316
- package/src/components/NSHeader.module.css +291 -291
- package/src/components/NSHeader.tsx +253 -253
- package/src/components/NSHeaderScreenshot.module.css +35 -35
- package/src/components/NSHeaderScreenshot.tsx +39 -39
- package/src/components/NSLabel.module.css +15 -15
- package/src/components/NSLabel.tsx +29 -29
- package/src/components/NSLabelErrorNotifier.module.css +2 -2
- package/src/components/NSLabelErrorNotifier.tsx +32 -32
- package/src/components/NSLayout.module.css +14 -14
- package/src/components/NSLayout.tsx +94 -94
- package/src/components/NSLine.module.css +13 -12
- package/src/components/NSLine.tsx +13 -15
- package/src/components/NSLink.module.css +36 -36
- package/src/components/NSLink.tsx +25 -25
- package/src/components/NSLinkBlue.tsx +21 -21
- package/src/components/NSLinkGreen.tsx +5 -5
- package/src/components/NSLinkRed.tsx +5 -5
- package/src/components/NSListGrouped.module.css +69 -69
- package/src/components/NSListGrouped.tsx +119 -119
- package/src/components/NSListProduct.tsx +44 -44
- package/src/components/NSLoading.module.css +30 -30
- package/src/components/NSLoading.tsx +19 -19
- package/src/components/NSMenuAction.module.css +87 -87
- package/src/components/NSMenuAction.tsx +90 -90
- package/src/components/NSMenuButton.module.css +44 -44
- package/src/components/NSMenuButton.tsx +177 -172
- package/src/components/NSNoData.module.css +9 -9
- package/src/components/NSNoData.tsx +24 -24
- package/src/components/NSPagination.module.css +85 -85
- package/src/components/NSPagination.tsx +182 -182
- package/src/components/NSPanel.module.css +19 -18
- package/src/components/NSPanel.tsx +18 -18
- package/src/components/NSPanelAccordion.module.css +4 -4
- package/src/components/NSPanelAccordion.tsx +51 -51
- package/src/components/NSRange.module.css +66 -66
- package/src/components/NSRange.tsx +83 -83
- package/src/components/NSRepeater.tsx +223 -217
- package/src/components/NSRepeaterNSBoxSchemaVariable.tsx +90 -0
- package/src/components/NSRow.module.css +17 -17
- package/src/components/NSRow.tsx +18 -18
- package/src/components/NSSection.module.css +4 -4
- package/src/components/NSSection.tsx +20 -20
- package/src/components/NSSectionCards.module.css +38 -38
- package/src/components/NSSectionCards.tsx +51 -51
- package/src/components/NSSectionTiles.module.css +10 -10
- package/src/components/NSSectionTiles.tsx +25 -25
- package/src/components/NSSectionTitle.tsx +21 -21
- package/src/components/NSSpace.tsx +28 -28
- package/src/components/NSTabPage.module.css +59 -59
- package/src/components/NSTabPage.tsx +77 -77
- package/src/components/NSTable.module.css +263 -263
- package/src/components/NSTable.tsx +479 -479
- package/src/components/NSTag.module.css +52 -52
- package/src/components/NSTag.tsx +78 -78
- package/src/components/NSTile.module.css +76 -76
- package/src/components/NSTile.tsx +27 -27
- package/src/components/NSTimelineMonthly.module.css +71 -71
- package/src/components/NSTimelineMonthly.tsx +44 -44
- package/src/components/NSTitle.module.css +15 -15
- package/src/components/NSTitle.tsx +19 -19
- package/src/formatter/BackColorFormatter.tsx +23 -23
- package/src/formatter/BaseColumnFormatter.ts +16 -16
- package/src/formatter/BooleanFormatter.ts +22 -22
- package/src/formatter/DateFormatter.ts +20 -20
- package/src/formatter/DateTimeFormatter.ts +20 -20
- package/src/formatter/DurationFormatter.ts +13 -13
- package/src/formatter/EmailFormatter.ts +13 -13
- package/src/formatter/EnumFormatter.ts +13 -13
- package/src/formatter/FloatFormatter.ts +16 -16
- package/src/formatter/ForeColorFormatter.tsx +24 -24
- package/src/formatter/IDFormatter.tsx +30 -30
- package/src/formatter/IPFormatter.ts +13 -13
- package/src/formatter/IntegerFormatter.ts +16 -16
- package/src/formatter/JsonFormatter.ts +14 -14
- package/src/formatter/MoneyFormatter.ts +16 -16
- package/src/formatter/PhoneFormatter.ts +13 -13
- package/src/formatter/StringFormatter.ts +22 -22
- package/src/formatter/TimeFormatter.ts +21 -21
- package/src/formatter/UnknowFormatter.ts +18 -18
- package/src/index.tsx +7 -7
- package/src/main.ts +193 -193
- package/src/pages/NSNotFoundPage.module.css +17 -17
- package/src/pages/NSNotFoundPage.tsx +11 -11
- package/src/pages/NSUpdating.module.css +35 -35
- package/src/pages/NSUpdating.tsx +32 -32
- package/src/props/IBaseComponentProps.ts +8 -8
- package/src/props/IHeaderIconProps.ts +10 -10
- package/src/props/IHeaderProps.ts +7 -7
- package/src/props/IImageProps.ts +4 -4
- package/src/props/ILinkProps.ts +5 -5
- package/src/props/IValidationNumberProps.ts +4 -4
- package/src/props/IValidationPrecisionProps.ts +3 -3
- package/src/props/IValidationProps.ts +9 -9
- package/src/props/IValidationRegexProps.ts +4 -4
- package/src/props/IValidationStringProps.ts +4 -4
- package/src/routing/INSRouterMaker.ts +6 -6
- package/src/routing/INSRouterProps.ts +5 -5
- package/src/routing/INSRouterState.ts +5 -5
- package/src/routing/NSRouterMaker.tsx +33 -33
- package/src/routing/Notifier.ts +79 -79
- package/tsconfig.json +43 -43
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
.ns_section_cards_holder {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
align-items: center;
|
|
6
|
-
margin-left: auto;
|
|
7
|
-
margin-right: auto;
|
|
8
|
-
padding-left: 1rem;
|
|
9
|
-
padding-right: 1rem;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ns_section_cards_title_container {
|
|
13
|
-
margin-bottom: 32px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ns_card_container {
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: row;
|
|
19
|
-
flex-wrap: wrap;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
gap: 24px;
|
|
22
|
-
width: 100%;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.ns_section_cards_link_container {
|
|
26
|
-
margin-top: 48px;
|
|
27
|
-
width: 100%;
|
|
28
|
-
text-align: center;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ns_description {
|
|
32
|
-
text-align: center;
|
|
33
|
-
font-style: normal;
|
|
34
|
-
font-weight: inherit;
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
font-family: inherit;
|
|
37
|
-
line-height: inherit;
|
|
38
|
-
margin-bottom: 16px;
|
|
1
|
+
.ns_section_cards_holder {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
margin-left: auto;
|
|
7
|
+
margin-right: auto;
|
|
8
|
+
padding-left: 1rem;
|
|
9
|
+
padding-right: 1rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ns_section_cards_title_container {
|
|
13
|
+
margin-bottom: 32px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ns_card_container {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: row;
|
|
19
|
+
flex-wrap: wrap;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
gap: 24px;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ns_section_cards_link_container {
|
|
26
|
+
margin-top: 48px;
|
|
27
|
+
width: 100%;
|
|
28
|
+
text-align: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ns_description {
|
|
32
|
+
text-align: center;
|
|
33
|
+
font-style: normal;
|
|
34
|
+
font-weight: inherit;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-family: inherit;
|
|
37
|
+
line-height: inherit;
|
|
38
|
+
margin-bottom: 16px;
|
|
39
39
|
}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import Styles from './NSSectionCards.module.css';
|
|
2
|
-
import { NSTitle } from './NSTitle';
|
|
3
|
-
import { NSCard, NSCardProps } from './NSCard';
|
|
4
|
-
import { NSSection } from './NSSection';
|
|
5
|
-
import { NSLinkBlue } from './NSLinkBlue';
|
|
6
|
-
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
7
|
-
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
8
|
-
import { ILinkProps } from '../props/ILinkProps';
|
|
9
|
-
|
|
10
|
-
export interface NSSectionCardsProps extends IBaseComponentProps
|
|
11
|
-
{
|
|
12
|
-
title?: string;
|
|
13
|
-
description?: {
|
|
14
|
-
text: string,
|
|
15
|
-
color?: string
|
|
16
|
-
};
|
|
17
|
-
button?: ILinkProps;
|
|
18
|
-
cards: NSCardProps[];
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export function NSSectionCards(props: NSSectionCardsProps)
|
|
22
|
-
{
|
|
23
|
-
return (
|
|
24
|
-
<NSSection {...props} >
|
|
25
|
-
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
26
|
-
<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
|
|
27
|
-
{
|
|
28
|
-
props.title &&
|
|
29
|
-
<div className={Styles.ns_section_cards_title_container}>
|
|
30
|
-
<NSTitle title={props.title} />
|
|
31
|
-
{
|
|
32
|
-
props.description &&
|
|
33
|
-
<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
|
|
34
|
-
}
|
|
35
|
-
</div>
|
|
36
|
-
}
|
|
37
|
-
<div className={` ${Styles.ns_card_container}`}>
|
|
38
|
-
{
|
|
39
|
-
props.cards?.map((card) => <NSCard key={card.id} {...card} />)
|
|
40
|
-
}
|
|
41
|
-
</div>
|
|
42
|
-
{
|
|
43
|
-
props.button &&
|
|
44
|
-
<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
|
|
45
|
-
<NSLinkBlue {...props.button} />
|
|
46
|
-
</div>
|
|
47
|
-
}
|
|
48
|
-
</div>
|
|
49
|
-
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
50
|
-
</NSSection>
|
|
51
|
-
);
|
|
1
|
+
import Styles from './NSSectionCards.module.css';
|
|
2
|
+
import { NSTitle } from './NSTitle';
|
|
3
|
+
import { NSCard, NSCardProps } from './NSCard';
|
|
4
|
+
import { NSSection } from './NSSection';
|
|
5
|
+
import { NSLinkBlue } from './NSLinkBlue';
|
|
6
|
+
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
7
|
+
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
8
|
+
import { ILinkProps } from '../props/ILinkProps';
|
|
9
|
+
|
|
10
|
+
export interface NSSectionCardsProps extends IBaseComponentProps
|
|
11
|
+
{
|
|
12
|
+
title?: string;
|
|
13
|
+
description?: {
|
|
14
|
+
text: string,
|
|
15
|
+
color?: string
|
|
16
|
+
};
|
|
17
|
+
button?: ILinkProps;
|
|
18
|
+
cards: NSCardProps[];
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function NSSectionCards(props: NSSectionCardsProps)
|
|
22
|
+
{
|
|
23
|
+
return (
|
|
24
|
+
<NSSection {...props} >
|
|
25
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
26
|
+
<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
|
|
27
|
+
{
|
|
28
|
+
props.title &&
|
|
29
|
+
<div className={Styles.ns_section_cards_title_container}>
|
|
30
|
+
<NSTitle title={props.title} />
|
|
31
|
+
{
|
|
32
|
+
props.description &&
|
|
33
|
+
<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
|
|
34
|
+
}
|
|
35
|
+
</div>
|
|
36
|
+
}
|
|
37
|
+
<div className={` ${Styles.ns_card_container}`}>
|
|
38
|
+
{
|
|
39
|
+
props.cards?.map((card) => <NSCard key={card.id} {...card} />)
|
|
40
|
+
}
|
|
41
|
+
</div>
|
|
42
|
+
{
|
|
43
|
+
props.button &&
|
|
44
|
+
<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
|
|
45
|
+
<NSLinkBlue {...props.button} />
|
|
46
|
+
</div>
|
|
47
|
+
}
|
|
48
|
+
</div>
|
|
49
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
50
|
+
</NSSection>
|
|
51
|
+
);
|
|
52
52
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.ns_entity_bar_container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
align-items: center;
|
|
6
|
-
margin-left: auto;
|
|
7
|
-
margin-right: auto;
|
|
8
|
-
padding-left: 1rem;
|
|
9
|
-
padding-right: 1rem;
|
|
10
|
-
gap: 24px;
|
|
1
|
+
.ns_entity_bar_container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
margin-left: auto;
|
|
7
|
+
margin-right: auto;
|
|
8
|
+
padding-left: 1rem;
|
|
9
|
+
padding-right: 1rem;
|
|
10
|
+
gap: 24px;
|
|
11
11
|
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import Styles from './NSSectionTiles.module.css';
|
|
2
|
-
import { NSTile, NSTileProps } from './NSTile';
|
|
3
|
-
import { NSSection } from './NSSection';
|
|
4
|
-
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
5
|
-
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
6
|
-
|
|
7
|
-
export interface NSSectionTilesProps extends IBaseComponentProps
|
|
8
|
-
{
|
|
9
|
-
title?: string;
|
|
10
|
-
tiles: NSTileProps[]
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function NSSectionTiles(props: NSSectionTilesProps)
|
|
14
|
-
{
|
|
15
|
-
return (
|
|
16
|
-
<NSSection {...props} >
|
|
17
|
-
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
18
|
-
<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
|
|
19
|
-
{
|
|
20
|
-
props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
|
|
21
|
-
}
|
|
22
|
-
</div>
|
|
23
|
-
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
24
|
-
</NSSection>
|
|
25
|
-
);
|
|
1
|
+
import Styles from './NSSectionTiles.module.css';
|
|
2
|
+
import { NSTile, NSTileProps } from './NSTile';
|
|
3
|
+
import { NSSection } from './NSSection';
|
|
4
|
+
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
5
|
+
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
6
|
+
|
|
7
|
+
export interface NSSectionTilesProps extends IBaseComponentProps
|
|
8
|
+
{
|
|
9
|
+
title?: string;
|
|
10
|
+
tiles: NSTileProps[]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function NSSectionTiles(props: NSSectionTilesProps)
|
|
14
|
+
{
|
|
15
|
+
return (
|
|
16
|
+
<NSSection {...props} >
|
|
17
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
18
|
+
<div className={`mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
|
|
19
|
+
{
|
|
20
|
+
props.tiles?.map((bar) => <NSTile key={bar.id} {...bar} />)
|
|
21
|
+
}
|
|
22
|
+
</div>
|
|
23
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
24
|
+
</NSSection>
|
|
25
|
+
);
|
|
26
26
|
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { NSSection } from './NSSection';
|
|
3
|
-
import { NSTitle } from './NSTitle';
|
|
4
|
-
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
5
|
-
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
6
|
-
|
|
7
|
-
export interface NSSectionTitleProps extends IBaseComponentProps
|
|
8
|
-
{
|
|
9
|
-
title: string;
|
|
10
|
-
children: ReactNode
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function NSSectionTitle(props: NSSectionTitleProps)
|
|
14
|
-
{
|
|
15
|
-
return (
|
|
16
|
-
<NSSection {...props} >
|
|
17
|
-
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
18
|
-
<NSTitle title={props.title} />
|
|
19
|
-
{props.children}
|
|
20
|
-
</NSSection>
|
|
21
|
-
);
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { NSSection } from './NSSection';
|
|
3
|
+
import { NSTitle } from './NSTitle';
|
|
4
|
+
import { NSSpace, NSSpaceSizeType } from './NSSpace';
|
|
5
|
+
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
6
|
+
|
|
7
|
+
export interface NSSectionTitleProps extends IBaseComponentProps
|
|
8
|
+
{
|
|
9
|
+
title: string;
|
|
10
|
+
children: ReactNode
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function NSSectionTitle(props: NSSectionTitleProps)
|
|
14
|
+
{
|
|
15
|
+
return (
|
|
16
|
+
<NSSection {...props} >
|
|
17
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
18
|
+
<NSTitle title={props.title} />
|
|
19
|
+
{props.children}
|
|
20
|
+
</NSSection>
|
|
21
|
+
);
|
|
22
22
|
}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
2
|
-
|
|
3
|
-
export interface NSSpaceProps extends IBaseComponentProps
|
|
4
|
-
{
|
|
5
|
-
size: NSSpaceSizeType;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export enum NSSpaceSizeType
|
|
9
|
-
{
|
|
10
|
-
NANO = "4px",
|
|
11
|
-
MICRO = "8px",
|
|
12
|
-
MINI = "16px",
|
|
13
|
-
SMALL = "24px",
|
|
14
|
-
MEDUIM = "32px",
|
|
15
|
-
NORMAL = "48px",
|
|
16
|
-
LARGE = "64px",
|
|
17
|
-
XLARGE = "80px",
|
|
18
|
-
XXLARGE = "96px",
|
|
19
|
-
XXXLARGE = "128px",
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export function NSSpace(props: NSSpaceProps)
|
|
23
|
-
{
|
|
24
|
-
return (
|
|
25
|
-
<hr id={props.id}
|
|
26
|
-
className={props.classList?.join(" ")}
|
|
27
|
-
style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
|
|
28
|
-
);
|
|
1
|
+
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
2
|
+
|
|
3
|
+
export interface NSSpaceProps extends IBaseComponentProps
|
|
4
|
+
{
|
|
5
|
+
size: NSSpaceSizeType;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export enum NSSpaceSizeType
|
|
9
|
+
{
|
|
10
|
+
NANO = "4px",
|
|
11
|
+
MICRO = "8px",
|
|
12
|
+
MINI = "16px",
|
|
13
|
+
SMALL = "24px",
|
|
14
|
+
MEDUIM = "32px",
|
|
15
|
+
NORMAL = "48px",
|
|
16
|
+
LARGE = "64px",
|
|
17
|
+
XLARGE = "80px",
|
|
18
|
+
XXLARGE = "96px",
|
|
19
|
+
XXXLARGE = "128px",
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export function NSSpace(props: NSSpaceProps)
|
|
23
|
+
{
|
|
24
|
+
return (
|
|
25
|
+
<hr id={props.id}
|
|
26
|
+
className={props.classList?.join(" ")}
|
|
27
|
+
style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
|
|
28
|
+
);
|
|
29
29
|
}
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
.ns_tab_page_panel {
|
|
2
|
-
border-radius: 8px;
|
|
3
|
-
overflow: hidden;
|
|
4
|
-
background: #141B5C;
|
|
5
|
-
padding: 16px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.ns_tab_page_panel ul.ns_tab_page_titles_container {
|
|
10
|
-
list-style-type: none;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
|
-
display: flex;
|
|
14
|
-
overflow-x: auto;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.ns_tab_page_panel li.ns_tab_page_title {
|
|
18
|
-
text-align: center;
|
|
19
|
-
padding: 0px 16px;
|
|
20
|
-
cursor: pointer;
|
|
21
|
-
color: #fff;
|
|
22
|
-
font-size: 16px;
|
|
23
|
-
font-weight: 600;
|
|
24
|
-
border-right: 1px solid #fff;
|
|
25
|
-
margin: 14px 0;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
|
|
29
|
-
border-right: none;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
|
|
33
|
-
background-color: #fff;
|
|
34
|
-
border-radius: 8px 8px 0 0;
|
|
35
|
-
color: #141B5C;
|
|
36
|
-
margin: 0;
|
|
37
|
-
padding: 14px 16px;
|
|
38
|
-
box-shadow: 0px 2px 2px 2px #141B5C;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.ns_tab_content_column {
|
|
42
|
-
padding: 16px;
|
|
43
|
-
border-radius: 0 8px 8px 8px;
|
|
44
|
-
background-color: #fff;
|
|
45
|
-
gap: 0;
|
|
46
|
-
border-right: 1px solid #ccc;
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
flex-wrap: wrap;
|
|
50
|
-
overflow-y: auto;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* .ns_tab_content_grid {
|
|
54
|
-
padding: 16px;
|
|
55
|
-
border-radius: 0 8px 8px 8px;
|
|
56
|
-
background-color: #fff;
|
|
57
|
-
display: grid !important;
|
|
58
|
-
gap: 0;
|
|
59
|
-
border-right: 1px solid #ccc;
|
|
1
|
+
.ns_tab_page_panel {
|
|
2
|
+
border-radius: 8px;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
background: #141B5C;
|
|
5
|
+
padding: 16px;
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ns_tab_page_panel ul.ns_tab_page_titles_container {
|
|
10
|
+
list-style-type: none;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
display: flex;
|
|
14
|
+
overflow-x: auto;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ns_tab_page_panel li.ns_tab_page_title {
|
|
18
|
+
text-align: center;
|
|
19
|
+
padding: 0px 16px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
color: #fff;
|
|
22
|
+
font-size: 16px;
|
|
23
|
+
font-weight: 600;
|
|
24
|
+
border-right: 1px solid #fff;
|
|
25
|
+
margin: 14px 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
|
|
29
|
+
border-right: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
|
|
33
|
+
background-color: #fff;
|
|
34
|
+
border-radius: 8px 8px 0 0;
|
|
35
|
+
color: #141B5C;
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: 14px 16px;
|
|
38
|
+
box-shadow: 0px 2px 2px 2px #141B5C;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ns_tab_content_column {
|
|
42
|
+
padding: 16px;
|
|
43
|
+
border-radius: 0 8px 8px 8px;
|
|
44
|
+
background-color: #fff;
|
|
45
|
+
gap: 0;
|
|
46
|
+
border-right: 1px solid #ccc;
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
flex-wrap: wrap;
|
|
50
|
+
overflow-y: auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* .ns_tab_content_grid {
|
|
54
|
+
padding: 16px;
|
|
55
|
+
border-radius: 0 8px 8px 8px;
|
|
56
|
+
background-color: #fff;
|
|
57
|
+
display: grid !important;
|
|
58
|
+
gap: 0;
|
|
59
|
+
border-right: 1px solid #ccc;
|
|
60
60
|
} */
|
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { Component } from "react";
|
|
3
|
-
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
4
|
-
import Styles from './NSTabPage.module.css';
|
|
5
|
-
|
|
6
|
-
export interface NSTabPageTab
|
|
7
|
-
{
|
|
8
|
-
title: string;
|
|
9
|
-
getContent: () => React.ReactNode;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface NSTabPageProps extends IBaseComponentProps
|
|
13
|
-
{
|
|
14
|
-
tabs: NSTabPageTab[]
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface NSTabPageState
|
|
18
|
-
{
|
|
19
|
-
activeTabIndex: number;
|
|
20
|
-
isClicked: boolean[];
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
|
|
24
|
-
{
|
|
25
|
-
constructor(props: NSTabPageProps)
|
|
26
|
-
{
|
|
27
|
-
super(props);
|
|
28
|
-
this.state = {
|
|
29
|
-
activeTabIndex: 0,
|
|
30
|
-
isClicked: [true]
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
setClicked(indices: number[], callback: () => void)
|
|
34
|
-
{
|
|
35
|
-
let isClicked = this.state.isClicked;
|
|
36
|
-
for (let i = 0; i < indices.length; i++)
|
|
37
|
-
isClicked[indices[i]] = true;
|
|
38
|
-
this.setState({ isClicked }, callback);
|
|
39
|
-
}
|
|
40
|
-
override render()
|
|
41
|
-
{
|
|
42
|
-
return (
|
|
43
|
-
<div className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style ?? {}}>
|
|
44
|
-
<ul className={Styles.ns_tab_page_titles_container}>
|
|
45
|
-
{
|
|
46
|
-
this.props.tabs.map((tab, index) => (
|
|
47
|
-
<li
|
|
48
|
-
key={`NSTabPage_li_key_${index}`}
|
|
49
|
-
className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
|
|
50
|
-
onClick={() =>
|
|
51
|
-
{
|
|
52
|
-
let isClicked = this.state.isClicked;
|
|
53
|
-
isClicked[index] = true;
|
|
54
|
-
this.setState({ activeTabIndex: index, isClicked })
|
|
55
|
-
}}
|
|
56
|
-
>
|
|
57
|
-
{tab.title}
|
|
58
|
-
</li>
|
|
59
|
-
))
|
|
60
|
-
}
|
|
61
|
-
</ul>
|
|
62
|
-
{
|
|
63
|
-
this.props.tabs.map((tab, index) => (
|
|
64
|
-
<div
|
|
65
|
-
key={`NSTabPage_div_key_${this.props.name}_${index}`}
|
|
66
|
-
className={Styles.ns_tab_content_column}
|
|
67
|
-
style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
|
|
68
|
-
>
|
|
69
|
-
{
|
|
70
|
-
this.state.isClicked[index] ? tab.getContent() : <></>
|
|
71
|
-
}
|
|
72
|
-
</div>
|
|
73
|
-
))
|
|
74
|
-
}
|
|
75
|
-
</div>
|
|
76
|
-
);
|
|
77
|
-
}
|
|
1
|
+
"use client";
|
|
2
|
+
import { Component } from "react";
|
|
3
|
+
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
4
|
+
import Styles from './NSTabPage.module.css';
|
|
5
|
+
|
|
6
|
+
export interface NSTabPageTab
|
|
7
|
+
{
|
|
8
|
+
title: string;
|
|
9
|
+
getContent: () => React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface NSTabPageProps extends IBaseComponentProps
|
|
13
|
+
{
|
|
14
|
+
tabs: NSTabPageTab[]
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface NSTabPageState
|
|
18
|
+
{
|
|
19
|
+
activeTabIndex: number;
|
|
20
|
+
isClicked: boolean[];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
|
|
24
|
+
{
|
|
25
|
+
constructor(props: NSTabPageProps)
|
|
26
|
+
{
|
|
27
|
+
super(props);
|
|
28
|
+
this.state = {
|
|
29
|
+
activeTabIndex: 0,
|
|
30
|
+
isClicked: [true]
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
setClicked(indices: number[], callback: () => void)
|
|
34
|
+
{
|
|
35
|
+
let isClicked = this.state.isClicked;
|
|
36
|
+
for (let i = 0; i < indices.length; i++)
|
|
37
|
+
isClicked[indices[i]] = true;
|
|
38
|
+
this.setState({ isClicked }, callback);
|
|
39
|
+
}
|
|
40
|
+
override render()
|
|
41
|
+
{
|
|
42
|
+
return (
|
|
43
|
+
<div className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style ?? {}}>
|
|
44
|
+
<ul className={Styles.ns_tab_page_titles_container}>
|
|
45
|
+
{
|
|
46
|
+
this.props.tabs.map((tab, index) => (
|
|
47
|
+
<li
|
|
48
|
+
key={`NSTabPage_li_key_${index}`}
|
|
49
|
+
className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
|
|
50
|
+
onClick={() =>
|
|
51
|
+
{
|
|
52
|
+
let isClicked = this.state.isClicked;
|
|
53
|
+
isClicked[index] = true;
|
|
54
|
+
this.setState({ activeTabIndex: index, isClicked })
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
{tab.title}
|
|
58
|
+
</li>
|
|
59
|
+
))
|
|
60
|
+
}
|
|
61
|
+
</ul>
|
|
62
|
+
{
|
|
63
|
+
this.props.tabs.map((tab, index) => (
|
|
64
|
+
<div
|
|
65
|
+
key={`NSTabPage_div_key_${this.props.name}_${index}`}
|
|
66
|
+
className={Styles.ns_tab_content_column}
|
|
67
|
+
style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
|
|
68
|
+
>
|
|
69
|
+
{
|
|
70
|
+
this.state.isClicked[index] ? tab.getContent() : <></>
|
|
71
|
+
}
|
|
72
|
+
</div>
|
|
73
|
+
))
|
|
74
|
+
}
|
|
75
|
+
</div>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
78
|
}
|