react-asc 20.2.0 → 21.0.0

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.
Files changed (238) hide show
  1. package/components/Alert/Alert.d.ts +11 -0
  2. package/components/Alert/index.d.ts +1 -0
  3. package/components/AppBar/AppBar.d.ts +9 -0
  4. package/components/AppBar/AppBarTitle.d.ts +5 -0
  5. package/components/AppBar/index.d.ts +2 -0
  6. package/components/AutoComplete/AutoComplete.d.ts +19 -0
  7. package/components/AutoComplete/index.d.ts +1 -0
  8. package/components/Backdrop/Backdrop.d.ts +7 -0
  9. package/components/Backdrop/index.d.ts +1 -0
  10. package/components/Badge/Badge.d.ts +7 -0
  11. package/components/Badge/index.d.ts +1 -0
  12. package/components/Breadcrumb/Breadcrumb.d.ts +5 -0
  13. package/components/Breadcrumb/BreadcrumbItem.d.ts +6 -0
  14. package/components/Breadcrumb/index.d.ts +2 -0
  15. package/components/Button/Button.d.ts +12 -0
  16. package/components/Button/index.d.ts +1 -0
  17. package/components/ButtonGroup/ButtonGroup.d.ts +2 -0
  18. package/components/ButtonGroup/index.d.ts +1 -0
  19. package/components/Card/Card.d.ts +6 -0
  20. package/components/Card/CardBody.d.ts +2 -0
  21. package/components/Card/CardFooter.d.ts +2 -0
  22. package/components/Card/CardImage.d.ts +2 -0
  23. package/components/Card/CardSubtitle.d.ts +2 -0
  24. package/components/Card/CardText.d.ts +2 -0
  25. package/components/Card/CardTitle.d.ts +6 -0
  26. package/components/Card/index.d.ts +7 -0
  27. package/components/Checkbox/Checkbox.d.ts +7 -0
  28. package/components/Checkbox/index.d.ts +1 -0
  29. package/components/Chip/Chip.d.ts +11 -0
  30. package/components/Chip/index.d.ts +1 -0
  31. package/components/ConditionalWrapper/ConditionalWrapper.d.ts +8 -0
  32. package/components/ConditionalWrapper/index.d.ts +1 -0
  33. package/components/DateSelect/DateSelect.d.ts +17 -0
  34. package/components/DateSelect/DaySelect.d.ts +12 -0
  35. package/components/DateSelect/MonthSelect.d.ts +10 -0
  36. package/components/DateSelect/YearSelect.d.ts +12 -0
  37. package/components/DateSelect/index.d.ts +4 -0
  38. package/components/Drawer/Drawer.d.ts +9 -0
  39. package/components/Drawer/index.d.ts +1 -0
  40. package/components/ExpansionPanel/ExpansionPanel.d.ts +8 -0
  41. package/components/ExpansionPanel/ExpansionPanelContent.d.ts +5 -0
  42. package/components/ExpansionPanel/ExpansionPanelHeader.d.ts +7 -0
  43. package/components/ExpansionPanel/index.d.ts +3 -0
  44. package/components/FileInput/FileInput.d.ts +5 -0
  45. package/components/FileInput/index.d.ts +1 -0
  46. package/components/FloatingActionButton/FloatingActionButton.d.ts +12 -0
  47. package/components/FloatingActionButton/index.d.ts +1 -0
  48. package/components/Form/Form.d.ts +38 -0
  49. package/components/Form/FormError.d.ts +8 -0
  50. package/components/Form/FormGroup.d.ts +7 -0
  51. package/components/Form/FormHint/FormHint.d.ts +2 -0
  52. package/components/Form/FormHint/index.d.ts +1 -0
  53. package/components/Form/FormInput/FormInput.d.ts +29 -0
  54. package/components/Form/FormInput/index.d.ts +1 -0
  55. package/components/Form/FormLabel/FormLabel.d.ts +2 -0
  56. package/components/Form/FormLabel/index.d.ts +1 -0
  57. package/components/Form/form.interfaces.d.ts +42 -0
  58. package/components/Form/form.models.d.ts +12 -0
  59. package/components/Form/form.types.d.ts +2 -0
  60. package/components/Form/index.d.ts +10 -0
  61. package/components/Form/validators/EmailValidtor.d.ts +1 -0
  62. package/components/Form/validators/IsEmptyValidator.d.ts +1 -0
  63. package/components/Form/validators/IsEqualValidator.d.ts +1 -0
  64. package/components/Form/validators/index.d.ts +3 -0
  65. package/components/Grid/Column/Column.d.ts +10 -0
  66. package/components/Grid/Column/index.d.ts +1 -0
  67. package/components/Grid/Row/Row.d.ts +5 -0
  68. package/components/Grid/Row/index.d.ts +1 -0
  69. package/components/Grid/index.d.ts +2 -0
  70. package/components/Icon/Icon.d.ts +6 -0
  71. package/components/Icon/index.d.ts +1 -0
  72. package/components/IconButton/IconButton.d.ts +11 -0
  73. package/components/IconButton/index.d.ts +1 -0
  74. package/components/Link/Link.d.ts +2 -0
  75. package/components/Link/Link.test.d.ts +1 -0
  76. package/components/Link/index.d.ts +1 -0
  77. package/components/List/List.d.ts +5 -0
  78. package/components/List/ListItem.d.ts +9 -0
  79. package/components/List/ListItemAction.d.ts +2 -0
  80. package/components/List/ListItemAvatar.d.ts +6 -0
  81. package/components/List/ListItemIcon.d.ts +6 -0
  82. package/components/List/ListItemText.d.ts +7 -0
  83. package/components/List/index.d.ts +6 -0
  84. package/components/List/list.models.d.ts +8 -0
  85. package/components/LoadingIndicator/LoadingIndicator.d.ts +2 -0
  86. package/components/LoadingIndicator/LoadingIndicatorContainer.d.ts +5 -0
  87. package/components/LoadingIndicator/index.d.ts +3 -0
  88. package/components/LoadingIndicator/loading-indicator.service.d.ts +11 -0
  89. package/components/Menu/Menu.d.ts +11 -0
  90. package/components/Menu/MenuBackdrop.d.ts +6 -0
  91. package/components/Menu/MenuBody.d.ts +12 -0
  92. package/components/Menu/MenuContext.d.ts +6 -0
  93. package/components/Menu/MenuDivider.d.ts +2 -0
  94. package/components/Menu/MenuItem.d.ts +8 -0
  95. package/components/Menu/MenuToggle.d.ts +6 -0
  96. package/components/Menu/index.d.ts +6 -0
  97. package/components/Menu/menu.types.d.ts +1 -0
  98. package/components/Modal/GlobalModal.d.ts +19 -0
  99. package/components/Modal/Modal.d.ts +14 -0
  100. package/components/Modal/ModalBody.d.ts +6 -0
  101. package/components/Modal/ModalFooter.d.ts +2 -0
  102. package/components/Modal/ModalHeader.d.ts +7 -0
  103. package/components/Modal/index.d.ts +8 -0
  104. package/components/Modal/modal.enum.d.ts +10 -0
  105. package/components/Modal/modal.interfaces.d.ts +12 -0
  106. package/components/Modal/modal.service.d.ts +21 -0
  107. package/components/NumberSelect/NumberSelect.d.ts +12 -0
  108. package/components/NumberSelect/index.d.ts +1 -0
  109. package/components/Select/Select.d.ts +16 -0
  110. package/components/Select/index.d.ts +1 -0
  111. package/components/Sidebar/Sidebar.d.ts +9 -0
  112. package/components/Sidebar/index.d.ts +2 -0
  113. package/components/Sidebar/sidebar.interfaces.d.ts +9 -0
  114. package/components/Sidebar/sidebar.models.d.ts +11 -0
  115. package/components/Snackbar/Snackbar.d.ts +8 -0
  116. package/components/Snackbar/index.d.ts +2 -0
  117. package/components/Snackbar/snackbar.service.d.ts +19 -0
  118. package/components/SpeedDial/SpeedDial.d.ts +7 -0
  119. package/components/SpeedDial/SpeedDialAction.d.ts +9 -0
  120. package/components/SpeedDial/SpeedDialActions.d.ts +2 -0
  121. package/components/SpeedDial/SpeedDialIcon.d.ts +5 -0
  122. package/components/SpeedDial/index.d.ts +3 -0
  123. package/components/Stepper/Step/Step.d.ts +19 -0
  124. package/components/Stepper/Step/index.d.ts +1 -0
  125. package/components/Stepper/StepConnector/StepConnector.d.ts +6 -0
  126. package/components/Stepper/StepPanel/StepPanel.d.ts +5 -0
  127. package/components/Stepper/Stepper.d.ts +16 -0
  128. package/components/Stepper/StepperActions/StepperActions.d.ts +12 -0
  129. package/components/Stepper/StepperActions/index.d.ts +1 -0
  130. package/components/Stepper/index.d.ts +3 -0
  131. package/components/Table/Table.d.ts +10 -0
  132. package/components/Table/index.d.ts +1 -0
  133. package/components/Tabs/Tab.d.ts +14 -0
  134. package/components/Tabs/TabIndicator.d.ts +10 -0
  135. package/components/Tabs/TabPanel.d.ts +6 -0
  136. package/components/Tabs/Tabs.d.ts +17 -0
  137. package/components/Tabs/index.d.ts +3 -0
  138. package/components/Textarea/Textarea.d.ts +5 -0
  139. package/components/Textarea/index.d.ts +1 -0
  140. package/components/TimeSelect/HourSelect.d.ts +10 -0
  141. package/components/TimeSelect/MilliSecondSelect.d.ts +11 -0
  142. package/components/TimeSelect/MinuteSelect.d.ts +10 -0
  143. package/components/TimeSelect/SecondSelect.d.ts +10 -0
  144. package/components/TimeSelect/TimeSelect.d.ts +20 -0
  145. package/components/TimeSelect/index.d.ts +5 -0
  146. package/components/Tooltip/Tooltip.d.ts +6 -0
  147. package/components/Tooltip/index.d.ts +1 -0
  148. package/components/TreeView/TreeItem.d.ts +14 -0
  149. package/components/TreeView/TreeView.d.ts +2 -0
  150. package/components/TreeView/index.d.ts +2 -0
  151. package/components/Typography/Typography.d.ts +10 -0
  152. package/components/Typography/index.d.ts +1 -0
  153. package/components/component.enums.d.ts +25 -0
  154. package/components/component.interfaces.d.ts +18 -0
  155. package/components/index.d.ts +41 -0
  156. package/hooks/index.d.ts +4 -0
  157. package/hooks/useConstructor.d.ts +1 -0
  158. package/hooks/useDebounce.d.ts +2 -0
  159. package/hooks/useHover.d.ts +2 -0
  160. package/hooks/useWindowSize.d.ts +4 -0
  161. package/icons/CaretDownSolidIcon.d.ts +2 -0
  162. package/icons/CheckSolidIcon.d.ts +2 -0
  163. package/icons/CheckSquareRegularIcon.d.ts +2 -0
  164. package/icons/ChevronDownSolidIcon.d.ts +2 -0
  165. package/icons/ChevronLeftSolidIcon.d.ts +2 -0
  166. package/icons/ChevronRightSolidIcon.d.ts +2 -0
  167. package/icons/ChevronUpSolidIcon.d.ts +2 -0
  168. package/icons/CircleSolidIcon.d.ts +2 -0
  169. package/icons/HomeSolidIcon.d.ts +2 -0
  170. package/icons/PlusSolidIcon.d.ts +2 -0
  171. package/icons/SpinnerSolidIcon.d.ts +2 -0
  172. package/icons/SquareRegularIcon.d.ts +2 -0
  173. package/icons/TimesCircleSolidIcon.d.ts +2 -0
  174. package/icons/TimesSolidIcon.d.ts +2 -0
  175. package/icons/index.d.ts +14 -0
  176. package/index.d.ts +3 -0
  177. package/index.es.js +2635 -0
  178. package/index.js +2751 -0
  179. package/package.json +1 -3
  180. package/react-asc.scss +4 -0
  181. package/readme.md +3 -5
  182. package/apple-touch-icon.png +0 -0
  183. package/assets/index.1f5e1902.js +0 -10
  184. package/assets/index.a1009f35.css +0 -1
  185. package/assets/vendor.d012860f.js +0 -57
  186. package/changelog.md +0 -919
  187. package/favicon-16x16.png +0 -0
  188. package/favicon-32x32.png +0 -0
  189. package/favicon.ico +0 -0
  190. package/favicon.svg +0 -23
  191. package/index.html +0 -27
  192. package/manifest.webmanifest +0 -1
  193. package/pwa-192x192.png +0 -0
  194. package/pwa-512x512.png +0 -0
  195. package/registerSW.js +0 -1
  196. package/robots.txt +0 -3
  197. package/showcase/alert.md +0 -3
  198. package/showcase/appbar.md +0 -8
  199. package/showcase/autocomplete.md +0 -53
  200. package/showcase/backdrop.md +0 -11
  201. package/showcase/badge.md +0 -8
  202. package/showcase/breadcrumb.md +0 -5
  203. package/showcase/button.md +0 -11
  204. package/showcase/buttongroup.md +0 -5
  205. package/showcase/card.md +0 -9
  206. package/showcase/checkbox.md +0 -7
  207. package/showcase/chip.md +0 -7
  208. package/showcase/dateselect.md +0 -8
  209. package/showcase/drawer.md +0 -13
  210. package/showcase/expansionpanel.md +0 -40
  211. package/showcase/fileinput.md +0 -6
  212. package/showcase/floatingactionbutton.md +0 -8
  213. package/showcase/form.md +0 -7
  214. package/showcase/grid.md +0 -5
  215. package/showcase/hookuseconstructor.md +0 -3
  216. package/showcase/hookusedebounce.md +0 -5
  217. package/showcase/hookusehover.md +0 -8
  218. package/showcase/hookusewindowsize.md +0 -5
  219. package/showcase/icon.md +0 -3
  220. package/showcase/iconbutton.md +0 -5
  221. package/showcase/link.md +0 -1
  222. package/showcase/list.md +0 -7
  223. package/showcase/loadingindicator.md +0 -18
  224. package/showcase/menu.md +0 -18
  225. package/showcase/modal.md +0 -17
  226. package/showcase/numberselect.md +0 -20
  227. package/showcase/select.md +0 -27
  228. package/showcase/snackbar.md +0 -22
  229. package/showcase/speeddial.md +0 -43
  230. package/showcase/stepper.md +0 -1
  231. package/showcase/table.md +0 -34
  232. package/showcase/tabs.md +0 -35
  233. package/showcase/timeselect.md +0 -1
  234. package/showcase/tooltip.md +0 -6
  235. package/showcase/treeview.md +0 -12
  236. package/showcase/typography.md +0 -6
  237. package/sw.js +0 -1
  238. package/workbox-6cd28afd.js +0 -1
package/favicon-16x16.png DELETED
Binary file
package/favicon-32x32.png DELETED
Binary file
package/favicon.ico DELETED
Binary file
package/favicon.svg DELETED
@@ -1,23 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
- <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
- <g transform="matrix(2.89888,0,0,2.75989,-177.586,-144.468)">
5
- <ellipse cx="149.57" cy="145.103" rx="88.31" ry="92.757" style="fill:rgb(63,81,181);"/>
6
- </g>
7
- <g id="users-solid.svg" transform="matrix(0.663018,0,0,0.663018,256,256)">
8
- <g id="pencil-ruler-solid.svg" transform="matrix(1.01126,0,0,1.01126,-0.000781879,1.24345e-14)">
9
- <g id="users-solid.svg1" serif:id="users-solid.svg">
10
- <g id="pencil-ruler-solid.svg1" serif:id="pencil-ruler-solid.svg" transform="matrix(1,0,0,1,-256,-256)">
11
- <clipPath id="_clip1">
12
- <rect x="0" y="0" width="512" height="512"/>
13
- </clipPath>
14
- <g clip-path="url(#_clip1)">
15
- <path d="M109.46,244.04L244.04,109.48L199.92,65.36L138.24,127.04C136.755,128.528 134.737,129.365 132.635,129.365C130.533,129.365 128.515,128.528 127.03,127.04L115.82,115.83C112.72,112.73 112.72,107.71 115.82,104.62L177.5,42.94L143.86,9.29C131.47,-3.1 111.39,-3.1 99,9.29L9.29,99C-3.09,111.39 -3.1,131.47 9.29,143.86L109.46,244.04ZM497.93,127.24C516.69,108.48 516.68,78.07 497.93,59.31L452.68,14.06C433.92,-4.7 403.5,-4.7 384.73,14.06L338.71,60.07L451.91,173.27L497.93,127.24ZM316.08,82.71L19.08,379.67L0.32,487.11C-2.21,501.6 10.41,514.22 24.91,511.67L132.36,492.83L429.28,195.9L316.08,82.71ZM502.71,368.14L469.07,334.5L407.39,396.18C404.29,399.28 399.27,399.28 396.18,396.18L384.97,384.97C381.88,381.87 381.88,376.85 384.97,373.76L446.65,312.08L402.51,267.94L267.93,402.5L368.14,502.7C380.53,515.09 400.61,515.09 413,502.7L502.71,413C515.1,400.61 515.1,380.53 502.71,368.14Z" style="fill:white;fill-rule:nonzero;"/>
16
- </g>
17
- </g>
18
- <g id="pencil-ruler-solid.svg2" serif:id="pencil-ruler-solid.svg">
19
- </g>
20
- </g>
21
- </g>
22
- </g>
23
- </svg>
package/index.html DELETED
@@ -1,27 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title>react-asc showcase</title>
8
- <meta name="description"
9
- content="handcrafted react components written in Typescript using Twitter Bootstrap 5 inspired by Material Design">
10
-
11
- <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
12
- <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
13
- <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
14
- <link rel="mask-icon" href="safari-pinned-tab.svg" color="#3f51b5">
15
- <meta name="msapplication-TileColor" content="#2b5797">
16
- <meta name="theme-color" content="#3f51b5">
17
- <script type="module" crossorigin src="/assets/index.1f5e1902.js"></script>
18
- <link rel="modulepreload" href="/assets/vendor.d012860f.js">
19
- <link rel="stylesheet" href="/assets/index.a1009f35.css">
20
- <link rel="manifest" href="/manifest.webmanifest"></head>
21
-
22
- <body>
23
- <div id="root"></div>
24
-
25
- </body>
26
-
27
- </html>
package/manifest.webmanifest DELETED
@@ -1 +0,0 @@
1
- {"name":"react-asc","short_name":"react-asc","start_url":".","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"handcrafted react components written in Typescript using Twitter Bootstrap 5 inspired by Material Design","icons":[{"src":"pwa-192x192.png","sizes":"192x192","type":"image/png"},{"src":"pwa-512x512.png","sizes":"512x512","type":"image/png"},{"src":"pwa-512x512.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}],"theme_color":"#3f51b5"}
package/pwa-192x192.png DELETED
Binary file
package/pwa-512x512.png DELETED
Binary file
package/registerSW.js DELETED
@@ -1 +0,0 @@
1
- if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}
package/robots.txt DELETED
@@ -1,3 +0,0 @@
1
- # https://www.robotstxt.org/robotstxt.html
2
- User-agent: *
3
- Disallow:
package/showcase/alert.md DELETED
@@ -1,3 +0,0 @@
1
- <Alert>
2
- some alert text
3
- </Alert>
package/showcase/appbar.md DELETED
@@ -1,8 +0,0 @@
1
- // default AppBar
2
- <AppBar />
3
-
4
- // setting color
5
- <AppBar color={COLOR.light} />
6
-
7
- // setting shadow
8
- <AppBar shadow={false} />
package/showcase/autocomplete.md DELETED
@@ -1,53 +0,0 @@
1
- const AutoCompletePageBase = () => {
2
-
3
- const [options, setOptions] = useState<Array<ISelectOption>>([]);
4
-
5
- const handleOnSelect = (e: ISelectOption) => {
6
- snackbarService.show(`value changed: ${e.label}`);
7
- }
8
-
9
- const handleOnChange = (e: string | undefined) => {
10
- setValue(e as string);
11
-
12
- const oldOptions = options;
13
- const newOptions: Array<ISelectOption> = [
14
- { value: "1", label: 'one' },
15
- { value: "2", label: 'two' },
16
- { value: "3", label: 'three' },
17
- { value: "4", label: 'four' },
18
- { value: "5", label: 'five' },
19
- { value: "6", label: 'six' },
20
- { value: "7", label: 'seven' },
21
- { value: "8", label: 'eight' },
22
- { value: "9", label: 'nine' },
23
- { value: "10", label: 'ten' },
24
- { value: "11", label: 'eleven' },
25
- { value: "12", label: 'twelve' },
26
- { value: "13", label: 'thirteen' },
27
- { value: "14", label: 'fourteen' },
28
- { value: "15", label: 'fifteen' },
29
- { value: "16", label: 'sixteen' },
30
- { value: "17", label: 'seventeen' },
31
- { value: "18", label: 'eighteen' },
32
- { value: "19", label: 'nineteen' },
33
- { value: "20", label: 'twenty' },
34
- ];
35
-
36
- const filteredNewOptions = newOptions.filter(option => oldOptions.map(o => o.value).indexOf(option.value) < 0);
37
- setOptions(options.concat(filteredNewOptions));
38
- }
39
-
40
- return (
41
- <AutoComplete
42
- className="form-control"
43
- options={options}
44
- openOnFocus={settingValues.openOnFocus}
45
- debounce={settingValues.debounce}
46
- disabled={settingValues.disabled}
47
- onSelect={handleOnSelect}
48
- onChange={handleOnChange}
49
- value={value}
50
- />
51
- );
52
-
53
- }
package/showcase/backdrop.md DELETED
@@ -1,11 +0,0 @@
1
- <Button onClick={() => setIsShow(!isShow)}>
2
- {isShow ? 'hide' : 'show'}
3
- </Button>
4
-
5
- <div id="backdrop-container" style={{ height: '300px', position: 'relative' }}>
6
- show backdrop
7
- </div>
8
-
9
- {isShow &&
10
- <Backdrop target={document.body.querySelector('#backdrop-container') as HTMLElement} />
11
- }
package/showcase/badge.md DELETED
@@ -1,8 +0,0 @@
1
- <Badge
2
- color={COLOR.accent}
3
- content={10}
4
- >
5
- <Icon>
6
- <HomeSolidIcon />
7
- </Icon>
8
- </Badge>
package/showcase/breadcrumb.md DELETED
@@ -1,5 +0,0 @@
1
- <Breadcrumb>
2
- <BreadcrumbItem path="/home">Home</BreadcrumbItem>
3
- <BreadcrumbItem path="/library">Library</BreadcrumbItem>
4
- <BreadcrumbItem path="/" isActive>Data</BreadcrumbItem>
5
- </Breadcrumb>
package/showcase/button.md DELETED
@@ -1,11 +0,0 @@
1
- <Button
2
- block={settingValues.block}
3
- color={settingValues.color}
4
- disabled={settingValues.disabled}
5
- isActive={settingValues.isActive}
6
- isRounded={settingValues.isRounded}
7
- variant={settingValues.variant}
8
- onClick={handleClick}
9
- >
10
- some button text
11
- </Button>
package/showcase/buttongroup.md DELETED
@@ -1,5 +0,0 @@
1
- <ButtonGroup>
2
- <Button>some button</Button>
3
- <Button>some button</Button>
4
- <Button>some button</Button>
5
- </ButtonGroup>
package/showcase/card.md DELETED
@@ -1,9 +0,0 @@
1
- <Card>
2
- <CardBody>
3
- <CardTitle>Title</CardTitle>
4
- <CardSubtitle>SubTitle</CardSubtitle>
5
- <CardText>
6
- some card text
7
- </CardText>
8
- </CardBody>
9
- </Card>
package/showcase/checkbox.md DELETED
@@ -1,7 +0,0 @@
1
- <Checkbox
2
- checked={settingValues.checked}
3
- disabled={settingValues.disabled}
4
- readOnly={settingValues.readOnly}
5
- label={settingValues.label}
6
- onChange={handleChange}
7
- />
package/showcase/chip.md DELETED
@@ -1,7 +0,0 @@
1
- <Chip
2
- color={settingValues.color}
3
- shadow={settingValues.shadow}
4
- onClick={handleClick}
5
- >
6
- some label
7
- </Chip>
package/showcase/dateselect.md DELETED
@@ -1,8 +0,0 @@
1
- // default
2
- <DateSelect />
3
-
4
- // year range and date
5
- <DateSelect
6
- yearConfig={{ from: 2000, to: 2010 }}
7
- value={ new Date(2001, 11, 30) }
8
- />
package/showcase/drawer.md DELETED
@@ -1,13 +0,0 @@
1
- <Button onClick={() => handleClick()}>
2
- show drawer
3
- </Button>
4
-
5
- {isVisible &&
6
- <Drawer
7
- position={settingValues.position}
8
- permanent={settingValues.permanent}
9
- onClickBackdrop={handleClick}
10
- >
11
- some drawer content
12
- </Drawer>
13
- }
package/showcase/expansionpanel.md DELETED
@@ -1,40 +0,0 @@
1
- // Default
2
- <div>
3
- <ExpansionPanel header={'header 1'}>
4
- Some Content 1
5
- </ExpansionPanel>
6
- <ExpansionPanel header={'header 2'} isExpanded={true}>
7
- Some Content 2
8
- </ExpansionPanel>
9
- <ExpansionPanel header={'header 3'}>
10
- Some Content 3
11
- </ExpansionPanel>
12
- </div>
13
-
14
- // Controlled ExpansionPanel
15
- const [expanded, setExpanded] = React.useState<string | false>(false);
16
-
17
- const handleChange = (panelKey: string) => (event: React.MouseEvent, isExpanded: boolean) => {
18
- setExpanded(isExpanded ? panelKey : false);
19
- };
20
-
21
- <div>
22
- <ExpansionPanel
23
- header={'header 1'}
24
- onChange={handleChange('panel1')}
25
- isExpanded={expanded === 'panel1'}>
26
- Some Content 1
27
- </ExpansionPanel>
28
- <ExpansionPanel
29
- header={'header 2'}
30
- onChange={handleChange('panel2')}
31
- isExpanded={expanded === 'panel2'}>
32
- Some Content 2
33
- </ExpansionPanel>
34
- <ExpansionPanel
35
- header={'header 3'}
36
- onChange={handleChange('panel3')}
37
- isExpanded={expanded === 'panel3'}>
38
- Some Content 3
39
- </ExpansionPanel>
40
- </div>
package/showcase/fileinput.md DELETED
@@ -1,6 +0,0 @@
1
- <FileInput
2
- accept={settingValues.accept}
3
- multiple={settingValues.multiple}
4
- disabled={settingValues.disabled}
5
- onChange={handleOnChange}
6
- />
package/showcase/floatingactionbutton.md DELETED
@@ -1,8 +0,0 @@
1
- <FloatingActionButton
2
- color={settingValues.color}
3
- size={settingValues.size}
4
- isActive={settingValues.isActive}
5
- disabled={settingValues.disabled}
6
- icon={<HomeSolidIcon />}
7
- onClick={handleClick}
8
- />
package/showcase/form.md DELETED
@@ -1,7 +0,0 @@
1
- <Form
2
- ref={myForm}
3
- controls={controls}
4
- validateOnBlur={settingValues.validateOnBlur}
5
- onSubmit={onFormSubmit}
6
- onChange={onFormChange}
7
- />
package/showcase/grid.md DELETED
@@ -1,5 +0,0 @@
1
- <Row>
2
- <Column>col 1</Column>
3
- <Column>col 2</Column>
4
- <Column>col 3</Column>
5
- </Row>
package/showcase/hookuseconstructor.md DELETED
@@ -1,3 +0,0 @@
1
- useConstructor(() => {
2
- // do something
3
- });
package/showcase/hookusedebounce.md DELETED
@@ -1,5 +0,0 @@
1
- useDebounce(
2
- () => { onChange && onChange(searchText); },
3
- debounce,
4
- [searchText]
5
- );
package/showcase/hookusehover.md DELETED
@@ -1,8 +0,0 @@
1
- const [hoverRef, isHovered] = useHover();
2
-
3
-
4
- return (
5
- <div ref={hoverRef as any}>
6
- ...isHovered
7
- </div>
8
- )
package/showcase/hookusewindowsize.md DELETED
@@ -1,5 +0,0 @@
1
- const windowSize = useWindowSize();
2
-
3
- useEffect(() => {
4
- windowSize && checkIsMobile(windowSize.height, windowSize.width);
5
- }, [windowSize]);
package/showcase/icon.md DELETED
@@ -1,3 +0,0 @@
1
- <Icon>
2
- <HomeSolidIcon />
3
- </Icon>
package/showcase/iconbutton.md DELETED
@@ -1,5 +0,0 @@
1
- ## Basic
2
-
3
- <IconButton
4
- icon={<HomeSolidIcon />}
5
- />
package/showcase/link.md DELETED
@@ -1 +0,0 @@
1
- <Link>some link text</Link>
package/showcase/list.md DELETED
@@ -1,7 +0,0 @@
1
- // simple list
2
- <List isFlush={settingValues.isFlush}>
3
- <ListItem onClick={handleClickItem}><ListItemText primary="lorem ipsum" /></ListItem>
4
- <ListItem onClick={handleClickItem}><ListItemText primary="lorem ipsum" /></ListItem>
5
- <ListItem onClick={handleClickItem}><ListItemText primary="lorem ipsum" /></ListItem>
6
- <ListItem onClick={handleClickItem}><ListItemText primary="lorem ipsum" /></ListItem>
7
- </List>
package/showcase/loadingindicator.md DELETED
@@ -1,18 +0,0 @@
1
- import { Button, loadingIndicatorService } from '..';
2
-
3
- const LoadingIndicatorExample = () => {
4
- const handleClick = () => {
5
- loadingIndicatorService.show();
6
- setTimeout(() => {
7
- loadingIndicatorService.hide();
8
- }, 1000);
9
- };
10
-
11
- return (
12
- <div>
13
- <Button onClick={handleClick}>
14
- show loading indicator
15
- </Button>
16
- </div>
17
- );
18
- }
package/showcase/menu.md DELETED
@@ -1,18 +0,0 @@
1
- <Menu
2
- toggle={<Button>Menu Button</Button>}
3
- menuPosition={settingValues.menuPosition}
4
- >
5
- <MenuItem type="header">
6
- This is a header
7
- </MenuItem>
8
- <MenuDivider />
9
- <MenuItem onClick={() => handleClick('1')}>
10
- Action 1
11
- </MenuItem>
12
- <MenuItem onClick={() => handleClick('2')}>
13
- Action 2
14
- </MenuItem>
15
- <MenuItem onClick={() => handleClick('3')}>
16
- Action 3
17
- </MenuItem>
18
- </Menu>
package/showcase/modal.md DELETED
@@ -1,17 +0,0 @@
1
- import { Button, modalService } from 'react-asc';
2
-
3
- const ModalExample = () => {
4
-
5
- const handleClick = () => {
6
- modalService.show('some title', 'some content')
7
- .then(() => alert('modal confirmed'));
8
- };
9
-
10
- return (
11
- <div>
12
- <Button onClick={handleClick}>
13
- show modal
14
- </Button>
15
- </div>
16
- );
17
- }
package/showcase/numberselect.md DELETED
@@ -1,20 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { NumberSelect } from 'react-asc';
3
-
4
- const NumberSelectExample = () => {
5
-
6
- const [value, setValue] = useState<number>(10);
7
-
8
- const handleOnChange = (e: number) => {
9
- setValue(e);
10
- }
11
-
12
- return (
13
- <NumberSelect
14
- from={10}
15
- to={20}
16
- value={value}
17
- onChange={handleOnChange}
18
- />
19
- );
20
- }
package/showcase/select.md DELETED
@@ -1,27 +0,0 @@
1
- <Select
2
- id="myselect"
3
- name="myselect"
4
- className="form-control"
5
- multiple={settingValues.multiple}
6
- multipleMaxCountItems={settingValues.multipleMaxCountItems}
7
- options={[
8
- { value: "1", label: 'one' },
9
- { value: "2", label: 'two' },
10
- { value: "3", label: 'three' },
11
- { value: "4", label: 'four' },
12
- { value: "5", label: 'five' },
13
- { value: "6", label: 'six' },
14
- { value: "7", label: 'seven' },
15
- { value: "8", label: 'eight' },
16
- { value: "9", label: 'nine' },
17
- { value: "10", label: 'ten' },
18
- { value: "11", label: 'eleven' },
19
- { value: "12", label: 'twelve' },
20
- { value: "13", label: 'thirteen' },
21
- { value: "14", label: 'fourteen' },
22
- { value: "15", label: 'fifteen' },
23
- ]}
24
- onChange={handleOnChange}
25
- disabled={settingValues.disabled}
26
- value="2"
27
- />
package/showcase/snackbar.md DELETED
@@ -1,22 +0,0 @@
1
- import { Button, COLOR, snackbarService } from 'react-asc';
2
-
3
- const SnackbarExample = () => {
4
-
5
- const handleClick = () => {
6
- snackbarService
7
- .show(settingValues.message, {
8
- actionText: settingValues.actionText,
9
- timeout: settingValues.timeout,
10
- color: settingValues.color
11
- })
12
- .then(() => loggerService.debug('onOk clicked'));
13
- };
14
-
15
- return (
16
- <div>
17
- <Button onClick={handleClick}>
18
- show snackbar
19
- </Button>
20
- </div>
21
- );
22
- }
package/showcase/speeddial.md DELETED
@@ -1,43 +0,0 @@
1
- import React, { useEffect, useState } from 'react';
2
- import { ISpeedDialProps, snackbarService, SpeedDial, SpeedDialAction } from 'react-asc';
3
- import { InfoSolidIcon } from '../assets';
4
- import { IShowcaseBaseProps, withOptions } from './components';
5
-
6
- const SpeedDialExample = () => {
7
-
8
- const [open, setOpen] = useState<boolean>(false);
9
-
10
- const handleClick = (index: number) => {
11
- snackbarService.show(`you clicked action: ${index}`);
12
- handleClose();
13
- }
14
-
15
- const handleOpen = () => {
16
- setOpen(true);
17
- }
18
-
19
- const handleClose = () => {
20
- setOpen(false);
21
- }
22
-
23
- return (
24
- <div style={{ height: '200px', position: 'relative' }}>
25
- <SpeedDial
26
- open={open}
27
- onOpen={handleOpen}
28
- onClose={handleClose}
29
- style={{ position: 'absolute', bottom: 0, right: 0 }}>
30
- <SpeedDialAction
31
- icon={<InfoSolidIcon />}
32
- tooltipTitle="some tooltip text"
33
- onClick={() => handleClick(1)}
34
- />
35
- <SpeedDialAction
36
- icon={<InfoSolidIcon />}
37
- tooltipTitle="some tooltip text"
38
- onClick={() => handleClick(2)}
39
- />
40
- </SpeedDial>
41
- </div>
42
- );
43
- }
package/showcase/stepper.md DELETED
@@ -1 +0,0 @@
1
- coming soon
package/showcase/table.md DELETED
@@ -1,34 +0,0 @@
1
- <Table
2
- bordered={settingValues.bordered}
3
- hover={settingValues.hover}
4
- striped={settingValues.striped}
5
- responsive={settingValues.responsive}
6
- >
7
- <thead>
8
- <tr>
9
- <th scope="col">#</th>
10
- <th scope="col">First</th>
11
- <th scope="col">Last</th>
12
- <th scope="col">Handle</th>
13
- </tr>
14
- </thead>
15
- <tbody>
16
- <tr>
17
- <th scope="row">1</th>
18
- <td>Mark</td>
19
- <td>Otto</td>
20
- <td>@mdo</td>
21
- </tr>
22
- <tr>
23
- <th scope="row">2</th>
24
- <td>Jacob</td>
25
- <td>Thornton</td>
26
- <td>@fat</td>
27
- </tr>
28
- <tr>
29
- <th scope="row">3</th>
30
- <td colSpan={2}>Larry the Bird</td>
31
- <td>@twitter</td>
32
- </tr>
33
- </tbody>
34
- </Table>
package/showcase/tabs.md DELETED
@@ -1,35 +0,0 @@
1
- export const TabsPage = () => {
2
- const [value, setValue] = useState<string>('tab2');
3
-
4
- const handleChange = (event: any, newValue: string) => {
5
- setValue(newValue);
6
- }
7
-
8
- return (
9
- <div>
10
- <Tabs
11
- value={value}
12
- onChange={handleChange}
13
- >
14
- <Tab value="tab1" label="Tab 1" />
15
- <Tab value="tab2" label="Tab 2" />
16
- <Tab value="tab3" label={<div className="text-success">Tab 3 with css</div>} />
17
- <Tab value="tab4" label="Tab 4" disabled />
18
- </Tabs>
19
-
20
- <TabPanel value={value} index="tab1">
21
- Tab1 Content
22
- </TabPanel>
23
- <TabPanel value={value} index="tab2">
24
- Tab2 Content
25
- </TabPanel>
26
- <TabPanel value={value} index="tab3">
27
- Tab3 Content
28
- </TabPanel>
29
- <TabPanel value={value} index="tab4">
30
- Tab4 Content should never be displayed
31
- </TabPanel>
32
- </div>
33
- );
34
- }
35
-
package/showcase/timeselect.md DELETED
@@ -1 +0,0 @@
1
- coming soon
package/showcase/tooltip.md DELETED
@@ -1,6 +0,0 @@
1
- <Tooltip
2
- text={settingValues.text}
3
- placement={settingValues.placement}
4
- >
5
- <Button>show tooltip</Button>
6
- </Tooltip>
package/showcase/treeview.md DELETED
@@ -1,12 +0,0 @@
1
- <TreeView>
2
- <TreeItem nodeId="1" label="some text" onSelect={handleOnSelect}>
3
- <TreeItem nodeId="11" label="some text" onSelect={handleOnSelect} />
4
- <TreeItem nodeId="12" label="some text" onSelect={handleOnSelect} />
5
- <TreeItem nodeId="13" label="some text" onSelect={handleOnSelect}>
6
- <TreeItem nodeId="111" label="some text" onSelect={handleOnSelect} />
7
- <TreeItem nodeId="112" label="some text" onSelect={handleOnSelect} />
8
- </TreeItem>
9
- </TreeItem>
10
- <TreeItem nodeId="2" label="some text" onSelect={handleOnSelect} />
11
- <TreeItem nodeId="3" label="some text" onSelect={handleOnSelect} />
12
- </TreeView>