@symply.io/basic-components 1.1.0 → 1.1.1-beta.2
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/README.md +39 -74
- package/Sidebar/SidebarItem.js +20 -22
- package/Sidebar/SidebarItemsGroup.js +2 -2
- package/Sidebar/index.js +2 -2
- package/Sidebar/types.d.ts +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
- [MonthYearInput](#monthyearinput)
|
|
27
27
|
- [DigitInput](#digitinput)
|
|
28
28
|
- [FeinInput](#feininput)
|
|
29
|
-
- [FileUploader](#fileuploader)
|
|
30
29
|
- [FormRadioGroup](#formradiogroup)
|
|
31
30
|
- [FormSelector](#formselector)
|
|
32
31
|
- [HelpCaption](#helpcaption)
|
|
@@ -86,7 +85,7 @@ Diglog component for alerts or confirmations.
|
|
|
86
85
|
<h5>Import</h5>
|
|
87
86
|
|
|
88
87
|
```typescript
|
|
89
|
-
import { AlertDialog } from '@symply.io/basic-components';
|
|
88
|
+
import { AlertDialog } from '@symply.io/basic-components/';
|
|
90
89
|
// or
|
|
91
90
|
import AlertDialog from '@symply.io/basic-components/AlertDialog';
|
|
92
91
|
```
|
|
@@ -113,7 +112,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
113
112
|
<h5>Import</h5>
|
|
114
113
|
|
|
115
114
|
```typescript
|
|
116
|
-
import { Autocomplete } from '@symply.io/basic-components';
|
|
115
|
+
import { Autocomplete } from '@symply.io/basic-components/';
|
|
117
116
|
// or
|
|
118
117
|
import Autocomplete from '@symply.io/basic-components/Autocomplete';
|
|
119
118
|
```
|
|
@@ -145,7 +144,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
145
144
|
<h5>Import</h5>
|
|
146
145
|
|
|
147
146
|
```typescript
|
|
148
|
-
import { AutocompleteWithFilter } from '@symply.io/basic-components';
|
|
147
|
+
import { AutocompleteWithFilter } from '@symply.io/basic-components/';
|
|
149
148
|
// or
|
|
150
149
|
import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter';
|
|
151
150
|
```
|
|
@@ -176,7 +175,7 @@ Reusable modal component.
|
|
|
176
175
|
<h5>Import</h5>
|
|
177
176
|
|
|
178
177
|
```typescript
|
|
179
|
-
import { BasicModal } from '@symply.io/basic-components';
|
|
178
|
+
import { BasicModal } from '@symply.io/basic-components/';
|
|
180
179
|
// or
|
|
181
180
|
import BasicModal from '@symply.io/basic-components/BasicModal';
|
|
182
181
|
```
|
|
@@ -215,7 +214,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
|
|
|
215
214
|
import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
216
215
|
```
|
|
217
216
|
|
|
218
|
-
<h5>Column Props (
|
|
217
|
+
<h5>Column Props (IColumn)</h5>
|
|
219
218
|
|
|
220
219
|
| Name | Type | Default | Required | Description |
|
|
221
220
|
| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
|
|
@@ -234,7 +233,7 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
|
234
233
|
|
|
235
234
|
| Name | Type | Default | Required | Description |
|
|
236
235
|
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
|
|
237
|
-
| columns | Array\<
|
|
236
|
+
| columns | Array\<IColumn\> | | true | table columns |
|
|
238
237
|
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
|
239
238
|
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
|
240
239
|
| initialState | { sortBy?: SortByProps } | | false | Set the initial states |
|
|
@@ -244,22 +243,20 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
|
244
243
|
|
|
245
244
|
| Name | Type | Description |
|
|
246
245
|
| ------- | -------------------- | ------------------------- |
|
|
247
|
-
| headers | Array\<
|
|
248
|
-
| columns | Array\<
|
|
249
|
-
| footers | Array\<
|
|
250
|
-
| rows | Array<
|
|
246
|
+
| headers | Array\<IHeader\> | The cells for the header. |
|
|
247
|
+
| columns | Array\<IBodyColumn\> | The cells for the body. |
|
|
248
|
+
| footers | Array\<IFooter> | The cells for the footer. |
|
|
249
|
+
| rows | Array<IRow\> | The rows for the table. |
|
|
251
250
|
|
|
252
251
|
<h5>Component Props</h5>
|
|
253
252
|
|
|
254
253
|
| Name | Type | Default | Required | Description |
|
|
255
254
|
| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
|
|
256
|
-
| headers | Array\<
|
|
257
|
-
| columns | Array\<
|
|
258
|
-
| footers | Array\<
|
|
259
|
-
| onRowClick | func | | false | The function for row clicking. |
|
|
255
|
+
| headers | Array\<IHeader\> | | true | The cells for the header. (from the hook) |
|
|
256
|
+
| columns | Array\<IBodyColumn\> | | true | The cells for the body. (from the hook) |
|
|
257
|
+
| footers | Array\<IFooter> | [] | false | The cells for the footer. (from the hook) |
|
|
260
258
|
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
|
261
|
-
|
|
|
262
|
-
| rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
|
|
259
|
+
| rows | Array<IRow\> | | true | The rows for the table. (from the hook) |
|
|
263
260
|
|
|
264
261
|
|
|
265
262
|
|
|
@@ -270,7 +267,7 @@ A list of links that help a user visualize a page's location within the hierarch
|
|
|
270
267
|
<h5>Import</h5>
|
|
271
268
|
|
|
272
269
|
```typescript
|
|
273
|
-
import { BreadCrumbs } from '@symply.io/basic-components';
|
|
270
|
+
import { BreadCrumbs } from '@symply.io/basic-components/';
|
|
274
271
|
// or
|
|
275
272
|
import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs';
|
|
276
273
|
```
|
|
@@ -292,7 +289,7 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
|
|
|
292
289
|
<h5>Import</h5>
|
|
293
290
|
|
|
294
291
|
```typescript
|
|
295
|
-
import { CheckBox } from '@symply.io/basic-components';
|
|
292
|
+
import { CheckBox } from '@symply.io/basic-components/';
|
|
296
293
|
// or
|
|
297
294
|
import { CheckBox } from '@symply.io/basic-components/CheckBox';
|
|
298
295
|
// or
|
|
@@ -317,7 +314,7 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
|
|
|
317
314
|
<h5>Import</h5>
|
|
318
315
|
|
|
319
316
|
```typescript
|
|
320
|
-
import { CheckBoxGroup } from '@symply.io/basic-components';
|
|
317
|
+
import { CheckBoxGroup } from '@symply.io/basic-components/';
|
|
321
318
|
// or
|
|
322
319
|
import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox';
|
|
323
320
|
// or
|
|
@@ -339,7 +336,7 @@ A common component for rendering the copyright
|
|
|
339
336
|
<h5>Import</h5>
|
|
340
337
|
|
|
341
338
|
```typescript
|
|
342
|
-
import { Copyright } from '@symply.io/basic-components';
|
|
339
|
+
import { Copyright } from '@symply.io/basic-components/';
|
|
343
340
|
// or
|
|
344
341
|
import Copyright from '@symply.io/basic-components/Copyright';
|
|
345
342
|
```
|
|
@@ -355,7 +352,7 @@ Input component for full date (MM/DD/YYYY)
|
|
|
355
352
|
<h5>Import</h5>
|
|
356
353
|
|
|
357
354
|
```typescript
|
|
358
|
-
import { FullDateInput } from '@symply.io/basic-components';
|
|
355
|
+
import { FullDateInput } from '@symply.io/basic-components/';
|
|
359
356
|
// or
|
|
360
357
|
import { FullDateInput } from '@symply.io/basic-components/DateInput';
|
|
361
358
|
// or
|
|
@@ -383,7 +380,7 @@ Input component for month day (MM/DD)
|
|
|
383
380
|
<h5>Import</h5>
|
|
384
381
|
|
|
385
382
|
```typescript
|
|
386
|
-
import { MonthDayInput } from '@symply.io/basic-components';
|
|
383
|
+
import { MonthDayInput } from '@symply.io/basic-components/';
|
|
387
384
|
// or
|
|
388
385
|
import { MonthDayInput } from '@symply.io/basic-components/DateInput';
|
|
389
386
|
// or
|
|
@@ -411,7 +408,7 @@ Input component for month year (MM/YYYY)
|
|
|
411
408
|
<h5>Import</h5>
|
|
412
409
|
|
|
413
410
|
```typescript
|
|
414
|
-
import { MonthYearInput } from '@symply.io/basic-components';
|
|
411
|
+
import { MonthYearInput } from '@symply.io/basic-components/';
|
|
415
412
|
// or
|
|
416
413
|
import { MonthYearInput } from '@symply.io/basic-components/DateInput';
|
|
417
414
|
// or
|
|
@@ -443,7 +440,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
443
440
|
<h5>Import</h5>
|
|
444
441
|
|
|
445
442
|
```typescript
|
|
446
|
-
import { DigitInput } from '@symply.io/basic-components';
|
|
443
|
+
import { DigitInput } from '@symply.io/basic-components/';
|
|
447
444
|
// or
|
|
448
445
|
import DigitInput from '@symply.io/basic-components/DigitInput';
|
|
449
446
|
```
|
|
@@ -470,7 +467,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
470
467
|
<h5>Import</h5>
|
|
471
468
|
|
|
472
469
|
```typescript
|
|
473
|
-
import { FeinInput } from '@symply.io/basic-components';
|
|
470
|
+
import { FeinInput } from '@symply.io/basic-components/';
|
|
474
471
|
// or
|
|
475
472
|
import FeinInput from '@symply.io/basic-components/FeinInput';
|
|
476
473
|
```
|
|
@@ -485,38 +482,6 @@ import FeinInput from '@symply.io/basic-components/FeinInput';
|
|
|
485
482
|
|
|
486
483
|
|
|
487
484
|
|
|
488
|
-
<h3>FileUploader</h3>
|
|
489
|
-
|
|
490
|
-
An uploader component for uploading file.
|
|
491
|
-
|
|
492
|
-
<h5>Import</h5>
|
|
493
|
-
|
|
494
|
-
```typescript
|
|
495
|
-
import { FileUploader } from '@symply.io/basic-components';
|
|
496
|
-
// or
|
|
497
|
-
import FileUploader from '@symply.io/basic-components/FileUploader';
|
|
498
|
-
```
|
|
499
|
-
|
|
500
|
-
<h5>Props</h5>
|
|
501
|
-
|
|
502
|
-
| Name | Type | Default | Required | Description |
|
|
503
|
-
| -------------------------------- | -------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
|
|
504
|
-
| accept | {string[]} | | false | An object with a common [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) as keys and an array of file extensions as values. E.g. :`{ 'image/png': ['.png'] }`. |
|
|
505
|
-
| chooseFileText | string | "Choose a File" | false | Customized text for the choose file button. |
|
|
506
|
-
| disabled | boolean | false | false | If `true` then the component would be disabled. |
|
|
507
|
-
| dropFileText | string | "Drop files here" | false | Customized text for the drop file button. |
|
|
508
|
-
| height | number\|string | '150px' | false | The height of the uploader box. |
|
|
509
|
-
| loading | boolean | false | false | If `true` then the circular progress would be shown. |
|
|
510
|
-
| maxFiles | number | 0 | false | Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted. |
|
|
511
|
-
| maxSize | number | 5,242,880 (in bytes, i.e. 5MB) | false | The maximum file size (in bytes) that can be uploaded. |
|
|
512
|
-
| maxWidth | number\|string | '430px' | false | The max width of the uploader box. |
|
|
513
|
-
| multiple | boolean | false | false | If `true` then allow select multiple files. |
|
|
514
|
-
| onUpload | | | | |
|
|
515
|
-
| sizeExceededErrorText | string | "Your file exceed the max size of [x] MB." | false | Customized text for the alert message when size exceeded. |
|
|
516
|
-
| wrongFileTypeErrorText?: string; | string | "The type of the file you uploaded is not accepted, please reupload!" | false | Customized text for the alert message when unacceptable files uploaded. |
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
485
|
<h3>FormRadioGroup</h3>
|
|
521
486
|
|
|
522
487
|
Radio Group allow the user to select one option from a set.
|
|
@@ -524,7 +489,7 @@ Radio Group allow the user to select one option from a set.
|
|
|
524
489
|
<h5>Import</h5>
|
|
525
490
|
|
|
526
491
|
```typescript
|
|
527
|
-
import { FormRadioGroup } from '@symply.io/basic-components';
|
|
492
|
+
import { FormRadioGroup } from '@symply.io/basic-components/';
|
|
528
493
|
// or
|
|
529
494
|
import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
|
|
530
495
|
```
|
|
@@ -608,7 +573,7 @@ You can use it to add a hint/help paragraph.
|
|
|
608
573
|
<h5>Import</h5>
|
|
609
574
|
|
|
610
575
|
```typescript
|
|
611
|
-
import { HelpCaption } from '@symply.io/basic-components';
|
|
576
|
+
import { HelpCaption } from '@symply.io/basic-components/';
|
|
612
577
|
// or
|
|
613
578
|
import HelpCaption from '@symply.io/basic-components/HelpCaption';
|
|
614
579
|
```
|
|
@@ -632,7 +597,7 @@ A modal for loading.
|
|
|
632
597
|
<h5>Import</h5>
|
|
633
598
|
|
|
634
599
|
```typescript
|
|
635
|
-
import { LoadingModal } from '@symply.io/basic-components';
|
|
600
|
+
import { LoadingModal } from '@symply.io/basic-components/';
|
|
636
601
|
// or
|
|
637
602
|
import LoadingModal from '@symply.io/basic-components/LoadingModal';
|
|
638
603
|
```
|
|
@@ -656,7 +621,7 @@ A button with menu options.
|
|
|
656
621
|
<h5>Import</h5>
|
|
657
622
|
|
|
658
623
|
```typescript
|
|
659
|
-
import { MenuButtonGroup } from '@symply.io/basic-components';
|
|
624
|
+
import { MenuButtonGroup } from '@symply.io/basic-components/';
|
|
660
625
|
// or
|
|
661
626
|
import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
|
|
662
627
|
```
|
|
@@ -693,7 +658,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
693
658
|
<h5>Import</h5>
|
|
694
659
|
|
|
695
660
|
```typescript
|
|
696
|
-
import { NumberInput } from '@symply.io/basic-components';
|
|
661
|
+
import { NumberInput } from '@symply.io/basic-components/';
|
|
697
662
|
// or
|
|
698
663
|
import NumberInput from '@symply.io/basic-components/NumberInput';
|
|
699
664
|
```
|
|
@@ -755,7 +720,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
755
720
|
<h5>Import</h5>
|
|
756
721
|
|
|
757
722
|
```typescript
|
|
758
|
-
import { PhoneNumberInput } from '@symply.io/basic-components';
|
|
723
|
+
import { PhoneNumberInput } from '@symply.io/basic-components/';
|
|
759
724
|
// or
|
|
760
725
|
import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
|
|
761
726
|
```
|
|
@@ -778,7 +743,7 @@ Sidebars for navigation.
|
|
|
778
743
|
<h5>Import</h5>
|
|
779
744
|
|
|
780
745
|
```typescript
|
|
781
|
-
import { Sidebar } from '@symply.io/basic-components';
|
|
746
|
+
import { Sidebar } from '@symply.io/basic-components/';
|
|
782
747
|
// or
|
|
783
748
|
import Sidebar from '@symply.io/basic-components/Sidebar';
|
|
784
749
|
```
|
|
@@ -791,7 +756,6 @@ import Sidebar from '@symply.io/basic-components/Sidebar';
|
|
|
791
756
|
| betaTagColor | CSSProperties["color"] | \#00A2A9 | false | The value of the `Input` element. |
|
|
792
757
|
| children | Array\<SidebarItemProps\> | | false | If not undefined the sub sidebar items would be rendered. |
|
|
793
758
|
| icon | Element | | true | The icon adornment. |
|
|
794
|
-
| id | string | | false | The element id of the item. |
|
|
795
759
|
| lock | boolean | | false | If `true` the lock icon will be rendered, and the sidebar item would be disabled. |
|
|
796
760
|
| name | string | | true | The sidebar item label. |
|
|
797
761
|
| path | string | | true | The link path of the sidebar item. |
|
|
@@ -799,9 +763,10 @@ import Sidebar from '@symply.io/basic-components/Sidebar';
|
|
|
799
763
|
|
|
800
764
|
<h5>Props</h5>
|
|
801
765
|
|
|
802
|
-
| Name
|
|
803
|
-
|
|
|
804
|
-
| items
|
|
766
|
+
| Name | Type | Default | Required | Description |
|
|
767
|
+
| ------------ | ------------------------- | ------- | -------- | ------------------------------------------ |
|
|
768
|
+
| items | Array\<SidebarItemProps\> | | true | Sidebar items. |
|
|
769
|
+
| showIconOnly | boolean | false | false | If `true` it will show the main icon only. |
|
|
805
770
|
|
|
806
771
|
|
|
807
772
|
|
|
@@ -814,7 +779,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
814
779
|
<h5>Import</h5>
|
|
815
780
|
|
|
816
781
|
```typescript
|
|
817
|
-
import { SocialInput } from '@symply.io/basic-components';
|
|
782
|
+
import { SocialInput } from '@symply.io/basic-components/';
|
|
818
783
|
// or
|
|
819
784
|
import SocialInput from '@symply.io/basic-components/SocialInput';
|
|
820
785
|
```
|
|
@@ -836,7 +801,7 @@ Tabs group.
|
|
|
836
801
|
<h5>Import</h5>
|
|
837
802
|
|
|
838
803
|
```typescript
|
|
839
|
-
import { TabGroup } from '@symply.io/basic-components';
|
|
804
|
+
import { TabGroup } from '@symply.io/basic-components/';
|
|
840
805
|
// or
|
|
841
806
|
import TabGroup from '@symply.io/basic-components/TabGroup';
|
|
842
807
|
```
|
|
@@ -860,7 +825,7 @@ Reusable pagination component for the material table
|
|
|
860
825
|
<h5>Import</h5>
|
|
861
826
|
|
|
862
827
|
```typescript
|
|
863
|
-
import { TablePagination } from '@symply.io/basic-components';
|
|
828
|
+
import { TablePagination } from '@symply.io/basic-components/';
|
|
864
829
|
// or
|
|
865
830
|
import TablePagination from '@symply.io/basic-components/TablePagination';
|
|
866
831
|
```
|
|
@@ -888,7 +853,7 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
|
|
|
888
853
|
<h5>Import</h5>
|
|
889
854
|
|
|
890
855
|
```typescript
|
|
891
|
-
import { TextInput } from '@symply.io/basic-components';
|
|
856
|
+
import { TextInput } from '@symply.io/basic-components/';
|
|
892
857
|
// or
|
|
893
858
|
import TextInput from '@symply.io/basic-components/TextInput';
|
|
894
859
|
```
|
|
@@ -937,7 +902,7 @@ A modal for playing videos.
|
|
|
937
902
|
<h5>Import</h5>
|
|
938
903
|
|
|
939
904
|
```typescript
|
|
940
|
-
import { VideoPlayerModal } from '@symply.io/basic-components';
|
|
905
|
+
import { VideoPlayerModal } from '@symply.io/basic-components/';
|
|
941
906
|
// or
|
|
942
907
|
import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
|
|
943
908
|
```
|
package/Sidebar/SidebarItem.js
CHANGED
|
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import colorAlpha from "color-alpha";
|
|
14
14
|
import Chip from "@mui/material/Chip";
|
|
15
15
|
import ListItem from "@mui/material/ListItem";
|
|
@@ -20,7 +20,7 @@ import useTheme from "@mui/material/styles/useTheme";
|
|
|
20
20
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
21
21
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
22
22
|
function SidebarItem(props) {
|
|
23
|
-
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, onClick = props.onClick;
|
|
23
|
+
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
|
|
24
24
|
var theme = useTheme();
|
|
25
25
|
return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
|
|
26
26
|
paddingLeft: isSub ? theme.spacing(4) : undefined,
|
|
@@ -37,25 +37,23 @@ function SidebarItem(props) {
|
|
|
37
37
|
borderRadius: active ? "5px" : undefined,
|
|
38
38
|
opacity: active ? "1" : undefined,
|
|
39
39
|
fontWeight: active ? 600 : undefined
|
|
40
|
-
} }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
padding: theme.spacing(0, 0.75)
|
|
59
|
-
} })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })));
|
|
40
|
+
} }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
|
|
41
|
+
color: active ? theme.palette.primary.main : "textPrimary",
|
|
42
|
+
sx: {
|
|
43
|
+
overflow: "hidden",
|
|
44
|
+
textOverflow: "ellipsis",
|
|
45
|
+
whiteSpace: "nowrap",
|
|
46
|
+
borderRadius: active ? "5px" : undefined,
|
|
47
|
+
opacity: active ? "1" : undefined,
|
|
48
|
+
fontWeight: active ? 600 : undefined
|
|
49
|
+
}
|
|
50
|
+
}, primary: name }), lock ? (_jsx(LockIcon, { fontSize: "small", color: "error", sx: { fontSize: "1rem" } })) : (_jsx(_Fragment, {})), beta ? (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
|
|
51
|
+
borderRadius: theme.spacing(0.5),
|
|
52
|
+
backgroundColor: betaTagColor,
|
|
53
|
+
color: "white",
|
|
54
|
+
height: theme.spacing(2.5),
|
|
55
|
+
fontSize: theme.spacing(1.25),
|
|
56
|
+
padding: theme.spacing(0, 0.75)
|
|
57
|
+
} })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
|
|
60
58
|
}
|
|
61
59
|
export default SidebarItem;
|
|
@@ -18,7 +18,7 @@ import useTheme from "@mui/material/styles/useTheme";
|
|
|
18
18
|
import SidebarItem from "./SidebarItem";
|
|
19
19
|
import SidebarLink from "./SidebarLink";
|
|
20
20
|
function SidebarItemsGroup(props) {
|
|
21
|
-
var item = props.item;
|
|
21
|
+
var item = props.item, showIconOnly = props.showIconOnly;
|
|
22
22
|
var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
|
|
23
23
|
var pathname = useLocation().pathname;
|
|
24
24
|
var match = useMemo(function () {
|
|
@@ -32,6 +32,6 @@ function SidebarItemsGroup(props) {
|
|
|
32
32
|
setExpand(match);
|
|
33
33
|
}, [match]);
|
|
34
34
|
var theme = useTheme();
|
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
|
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
|
|
36
36
|
}
|
|
37
37
|
export default memo(SidebarItemsGroup);
|
package/Sidebar/index.js
CHANGED
|
@@ -18,11 +18,11 @@ import SidebarItem from "./SidebarItem";
|
|
|
18
18
|
import SidebarItemsGroup from "./SidebarItemsGroup";
|
|
19
19
|
import SidebarLink from "./SidebarLink";
|
|
20
20
|
function Sidebar(props) {
|
|
21
|
-
var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
|
21
|
+
var items = props.items, showIconOnly = props.showIconOnly, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
|
22
22
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
|
23
23
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
|
|
24
24
|
var id = i.id, children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
|
|
25
|
-
return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
|
|
25
|
+
return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
|
|
26
26
|
}) }) })));
|
|
27
27
|
}
|
|
28
28
|
export default Sidebar;
|
package/Sidebar/types.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
|
|
|
14
14
|
}
|
|
15
15
|
export interface SidebarProps {
|
|
16
16
|
items: Array<SidebarBaseProps>;
|
|
17
|
+
showIconOnly?: boolean;
|
|
17
18
|
primaryColor?: CSSProperties["color"];
|
|
18
19
|
secondaryColor?: CSSProperties["color"];
|
|
19
20
|
}
|
|
@@ -22,6 +23,7 @@ export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
|
|
|
22
23
|
expand?: boolean;
|
|
23
24
|
isSub?: boolean;
|
|
24
25
|
hasChildren?: boolean;
|
|
26
|
+
showIconOnly?: boolean;
|
|
25
27
|
onClick?: () => void;
|
|
26
28
|
}
|
|
27
29
|
export interface SidebarLinkProps extends SidebarItemProps {
|
|
@@ -29,4 +31,5 @@ export interface SidebarLinkProps extends SidebarItemProps {
|
|
|
29
31
|
}
|
|
30
32
|
export interface SidebarItemsGroupProps {
|
|
31
33
|
item: SidebarBaseProps;
|
|
34
|
+
showIconOnly?: boolean;
|
|
32
35
|
}
|