react-asc 20.1.0 → 20.2.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 (237) hide show
  1. package/apple-touch-icon.png +0 -0
  2. package/assets/index.1f5e1902.js +10 -0
  3. package/assets/index.a1009f35.css +1 -0
  4. package/assets/vendor.d012860f.js +57 -0
  5. package/changelog.md +919 -0
  6. package/favicon-16x16.png +0 -0
  7. package/favicon-32x32.png +0 -0
  8. package/favicon.ico +0 -0
  9. package/favicon.svg +23 -0
  10. package/index.html +27 -0
  11. package/manifest.webmanifest +1 -0
  12. package/package.json +1 -1
  13. package/pwa-192x192.png +0 -0
  14. package/pwa-512x512.png +0 -0
  15. package/react-asc.scss +63 -2
  16. package/registerSW.js +1 -0
  17. package/robots.txt +3 -0
  18. package/showcase/alert.md +3 -0
  19. package/showcase/appbar.md +8 -0
  20. package/showcase/autocomplete.md +53 -0
  21. package/showcase/backdrop.md +11 -0
  22. package/showcase/badge.md +8 -0
  23. package/showcase/breadcrumb.md +5 -0
  24. package/showcase/button.md +11 -0
  25. package/showcase/buttongroup.md +5 -0
  26. package/showcase/card.md +9 -0
  27. package/showcase/checkbox.md +7 -0
  28. package/showcase/chip.md +7 -0
  29. package/showcase/dateselect.md +8 -0
  30. package/showcase/drawer.md +13 -0
  31. package/showcase/expansionpanel.md +40 -0
  32. package/showcase/fileinput.md +6 -0
  33. package/showcase/floatingactionbutton.md +8 -0
  34. package/showcase/form.md +7 -0
  35. package/showcase/grid.md +5 -0
  36. package/showcase/hookuseconstructor.md +3 -0
  37. package/showcase/hookusedebounce.md +5 -0
  38. package/showcase/hookusehover.md +8 -0
  39. package/showcase/hookusewindowsize.md +5 -0
  40. package/showcase/icon.md +3 -0
  41. package/showcase/iconbutton.md +5 -0
  42. package/showcase/link.md +1 -0
  43. package/showcase/list.md +7 -0
  44. package/showcase/loadingindicator.md +18 -0
  45. package/showcase/menu.md +18 -0
  46. package/showcase/modal.md +17 -0
  47. package/showcase/numberselect.md +20 -0
  48. package/showcase/select.md +27 -0
  49. package/showcase/snackbar.md +22 -0
  50. package/showcase/speeddial.md +43 -0
  51. package/showcase/stepper.md +1 -0
  52. package/showcase/table.md +34 -0
  53. package/showcase/tabs.md +35 -0
  54. package/showcase/timeselect.md +1 -0
  55. package/showcase/tooltip.md +6 -0
  56. package/showcase/treeview.md +12 -0
  57. package/showcase/typography.md +6 -0
  58. package/sw.js +1 -0
  59. package/workbox-6cd28afd.js +1 -0
  60. package/components/Alert/Alert.d.ts +0 -11
  61. package/components/Alert/index.d.ts +0 -1
  62. package/components/AppBar/AppBar.d.ts +0 -9
  63. package/components/AppBar/AppBarTitle.d.ts +0 -5
  64. package/components/AppBar/index.d.ts +0 -2
  65. package/components/AutoComplete/AutoComplete.d.ts +0 -19
  66. package/components/AutoComplete/index.d.ts +0 -1
  67. package/components/Backdrop/Backdrop.d.ts +0 -7
  68. package/components/Backdrop/index.d.ts +0 -1
  69. package/components/Badge/Badge.d.ts +0 -7
  70. package/components/Badge/index.d.ts +0 -1
  71. package/components/Breadcrumb/Breadcrumb.d.ts +0 -5
  72. package/components/Breadcrumb/BreadcrumbItem.d.ts +0 -6
  73. package/components/Breadcrumb/index.d.ts +0 -2
  74. package/components/Button/Button.d.ts +0 -12
  75. package/components/Button/index.d.ts +0 -1
  76. package/components/ButtonGroup/ButtonGroup.d.ts +0 -2
  77. package/components/ButtonGroup/index.d.ts +0 -1
  78. package/components/Card/Card.d.ts +0 -6
  79. package/components/Card/CardBody.d.ts +0 -2
  80. package/components/Card/CardFooter.d.ts +0 -2
  81. package/components/Card/CardImage.d.ts +0 -2
  82. package/components/Card/CardSubtitle.d.ts +0 -2
  83. package/components/Card/CardText.d.ts +0 -2
  84. package/components/Card/CardTitle.d.ts +0 -6
  85. package/components/Card/index.d.ts +0 -7
  86. package/components/Checkbox/Checkbox.d.ts +0 -7
  87. package/components/Checkbox/index.d.ts +0 -1
  88. package/components/Chip/Chip.d.ts +0 -11
  89. package/components/Chip/index.d.ts +0 -1
  90. package/components/ConditionalWrapper/ConditionalWrapper.d.ts +0 -8
  91. package/components/ConditionalWrapper/index.d.ts +0 -1
  92. package/components/DateSelect/DateSelect.d.ts +0 -17
  93. package/components/DateSelect/DaySelect.d.ts +0 -12
  94. package/components/DateSelect/MonthSelect.d.ts +0 -10
  95. package/components/DateSelect/YearSelect.d.ts +0 -12
  96. package/components/DateSelect/index.d.ts +0 -4
  97. package/components/Drawer/Drawer.d.ts +0 -9
  98. package/components/Drawer/index.d.ts +0 -1
  99. package/components/ExpansionPanel/ExpansionPanel.d.ts +0 -8
  100. package/components/ExpansionPanel/ExpansionPanelContent.d.ts +0 -5
  101. package/components/ExpansionPanel/ExpansionPanelHeader.d.ts +0 -7
  102. package/components/ExpansionPanel/index.d.ts +0 -3
  103. package/components/FileInput/FileInput.d.ts +0 -5
  104. package/components/FileInput/index.d.ts +0 -1
  105. package/components/FloatingActionButton/FloatingActionButton.d.ts +0 -12
  106. package/components/FloatingActionButton/index.d.ts +0 -1
  107. package/components/Form/Form.d.ts +0 -38
  108. package/components/Form/FormError.d.ts +0 -8
  109. package/components/Form/FormGroup.d.ts +0 -7
  110. package/components/Form/FormHint/FormHint.d.ts +0 -2
  111. package/components/Form/FormHint/index.d.ts +0 -1
  112. package/components/Form/FormInput/FormInput.d.ts +0 -29
  113. package/components/Form/FormInput/index.d.ts +0 -1
  114. package/components/Form/FormLabel/FormLabel.d.ts +0 -2
  115. package/components/Form/FormLabel/index.d.ts +0 -1
  116. package/components/Form/form.interfaces.d.ts +0 -42
  117. package/components/Form/form.models.d.ts +0 -12
  118. package/components/Form/form.types.d.ts +0 -2
  119. package/components/Form/index.d.ts +0 -10
  120. package/components/Form/validators/EmailValidtor.d.ts +0 -1
  121. package/components/Form/validators/IsEmptyValidator.d.ts +0 -1
  122. package/components/Form/validators/IsEqualValidator.d.ts +0 -1
  123. package/components/Form/validators/index.d.ts +0 -3
  124. package/components/Grid/Column/Column.d.ts +0 -10
  125. package/components/Grid/Column/index.d.ts +0 -1
  126. package/components/Grid/Row/Row.d.ts +0 -5
  127. package/components/Grid/Row/index.d.ts +0 -1
  128. package/components/Grid/index.d.ts +0 -2
  129. package/components/Icon/Icon.d.ts +0 -6
  130. package/components/Icon/index.d.ts +0 -1
  131. package/components/IconButton/IconButton.d.ts +0 -11
  132. package/components/IconButton/index.d.ts +0 -1
  133. package/components/Link/Link.d.ts +0 -2
  134. package/components/Link/Link.test.d.ts +0 -1
  135. package/components/Link/index.d.ts +0 -1
  136. package/components/List/List.d.ts +0 -5
  137. package/components/List/ListItem.d.ts +0 -9
  138. package/components/List/ListItemAction.d.ts +0 -2
  139. package/components/List/ListItemAvatar.d.ts +0 -6
  140. package/components/List/ListItemIcon.d.ts +0 -6
  141. package/components/List/ListItemText.d.ts +0 -7
  142. package/components/List/index.d.ts +0 -6
  143. package/components/List/list.models.d.ts +0 -8
  144. package/components/LoadingIndicator/LoadingIndicator.d.ts +0 -2
  145. package/components/LoadingIndicator/LoadingIndicatorContainer.d.ts +0 -5
  146. package/components/LoadingIndicator/index.d.ts +0 -3
  147. package/components/LoadingIndicator/loading-indicator.service.d.ts +0 -11
  148. package/components/Menu/Menu.d.ts +0 -11
  149. package/components/Menu/MenuBackdrop.d.ts +0 -6
  150. package/components/Menu/MenuBody.d.ts +0 -12
  151. package/components/Menu/MenuContext.d.ts +0 -6
  152. package/components/Menu/MenuDivider.d.ts +0 -2
  153. package/components/Menu/MenuItem.d.ts +0 -8
  154. package/components/Menu/MenuToggle.d.ts +0 -6
  155. package/components/Menu/index.d.ts +0 -6
  156. package/components/Menu/menu.types.d.ts +0 -1
  157. package/components/Modal/GlobalModal.d.ts +0 -19
  158. package/components/Modal/Modal.d.ts +0 -14
  159. package/components/Modal/ModalBody.d.ts +0 -6
  160. package/components/Modal/ModalFooter.d.ts +0 -2
  161. package/components/Modal/ModalHeader.d.ts +0 -7
  162. package/components/Modal/index.d.ts +0 -8
  163. package/components/Modal/modal.enum.d.ts +0 -10
  164. package/components/Modal/modal.interfaces.d.ts +0 -12
  165. package/components/Modal/modal.service.d.ts +0 -21
  166. package/components/NumberSelect/NumberSelect.d.ts +0 -12
  167. package/components/NumberSelect/index.d.ts +0 -1
  168. package/components/Select/Select.d.ts +0 -15
  169. package/components/Select/index.d.ts +0 -1
  170. package/components/Sidebar/Sidebar.d.ts +0 -9
  171. package/components/Sidebar/index.d.ts +0 -2
  172. package/components/Sidebar/sidebar.interfaces.d.ts +0 -9
  173. package/components/Sidebar/sidebar.models.d.ts +0 -11
  174. package/components/Snackbar/Snackbar.d.ts +0 -8
  175. package/components/Snackbar/index.d.ts +0 -2
  176. package/components/Snackbar/snackbar.service.d.ts +0 -19
  177. package/components/SpeedDial/SpeedDial.d.ts +0 -7
  178. package/components/SpeedDial/SpeedDialAction.d.ts +0 -9
  179. package/components/SpeedDial/SpeedDialActions.d.ts +0 -2
  180. package/components/SpeedDial/SpeedDialIcon.d.ts +0 -5
  181. package/components/SpeedDial/index.d.ts +0 -3
  182. package/components/Stepper/Step/Step.d.ts +0 -19
  183. package/components/Stepper/Step/index.d.ts +0 -1
  184. package/components/Stepper/StepConnector/StepConnector.d.ts +0 -6
  185. package/components/Stepper/StepPanel/StepPanel.d.ts +0 -5
  186. package/components/Stepper/Stepper.d.ts +0 -16
  187. package/components/Stepper/StepperActions/StepperActions.d.ts +0 -12
  188. package/components/Stepper/StepperActions/index.d.ts +0 -1
  189. package/components/Stepper/index.d.ts +0 -3
  190. package/components/Table/Table.d.ts +0 -10
  191. package/components/Table/index.d.ts +0 -1
  192. package/components/Tabs/Tab.d.ts +0 -14
  193. package/components/Tabs/TabIndicator.d.ts +0 -10
  194. package/components/Tabs/TabPanel.d.ts +0 -6
  195. package/components/Tabs/Tabs.d.ts +0 -17
  196. package/components/Tabs/index.d.ts +0 -3
  197. package/components/Textarea/Textarea.d.ts +0 -5
  198. package/components/Textarea/index.d.ts +0 -1
  199. package/components/TimeSelect/HourSelect.d.ts +0 -10
  200. package/components/TimeSelect/MilliSecondSelect.d.ts +0 -11
  201. package/components/TimeSelect/MinuteSelect.d.ts +0 -10
  202. package/components/TimeSelect/SecondSelect.d.ts +0 -10
  203. package/components/TimeSelect/TimeSelect.d.ts +0 -20
  204. package/components/TimeSelect/index.d.ts +0 -5
  205. package/components/Tooltip/Tooltip.d.ts +0 -6
  206. package/components/Tooltip/index.d.ts +0 -1
  207. package/components/TreeView/TreeItem.d.ts +0 -14
  208. package/components/TreeView/TreeView.d.ts +0 -2
  209. package/components/TreeView/index.d.ts +0 -2
  210. package/components/Typography/Typography.d.ts +0 -10
  211. package/components/Typography/index.d.ts +0 -1
  212. package/components/component.enums.d.ts +0 -25
  213. package/components/component.interfaces.d.ts +0 -18
  214. package/components/index.d.ts +0 -41
  215. package/hooks/index.d.ts +0 -4
  216. package/hooks/useConstructor.d.ts +0 -1
  217. package/hooks/useDebounce.d.ts +0 -2
  218. package/hooks/useHover.d.ts +0 -2
  219. package/hooks/useWindowSize.d.ts +0 -4
  220. package/icons/CaretDownSolidIcon.d.ts +0 -2
  221. package/icons/CheckSolidIcon.d.ts +0 -2
  222. package/icons/CheckSquareRegularIcon.d.ts +0 -2
  223. package/icons/ChevronDownSolidIcon.d.ts +0 -2
  224. package/icons/ChevronLeftSolidIcon.d.ts +0 -2
  225. package/icons/ChevronRightSolidIcon.d.ts +0 -2
  226. package/icons/ChevronUpSolidIcon.d.ts +0 -2
  227. package/icons/CircleSolidIcon.d.ts +0 -2
  228. package/icons/HomeSolidIcon.d.ts +0 -2
  229. package/icons/PlusSolidIcon.d.ts +0 -2
  230. package/icons/SpinnerSolidIcon.d.ts +0 -2
  231. package/icons/SquareRegularIcon.d.ts +0 -2
  232. package/icons/TimesCircleSolidIcon.d.ts +0 -2
  233. package/icons/TimesSolidIcon.d.ts +0 -2
  234. package/icons/index.d.ts +0 -14
  235. package/index.d.ts +0 -3
  236. package/index.es.js +0 -2629
  237. package/index.js +0 -2745
package/favicon-16x16.png ADDED
Binary file
package/favicon-32x32.png ADDED
Binary file
package/favicon.ico ADDED
Binary file
package/favicon.svg ADDED
@@ -0,0 +1,23 @@
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 ADDED
@@ -0,0 +1,27 @@
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 ADDED
@@ -0,0 +1 @@
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "20.1.0",
3
+ "version": "20.2.0",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",
package/pwa-192x192.png ADDED
Binary file
package/pwa-512x512.png ADDED
Binary file
package/react-asc.scss CHANGED
@@ -132,6 +132,10 @@
132
132
  margin-top: 30px !important;
133
133
  }
134
134
 
135
+ .mt-4 {
136
+ margin-top: 40px!important;
137
+ }
138
+
135
139
  .mb-0 {
136
140
  margin-bottom: 0px !important;
137
141
  }
@@ -177,13 +181,70 @@
177
181
  flex-direction: column-reverse;
178
182
  }
179
183
 
184
+ .w-100 {
185
+ width: 100%;
186
+ }
187
+
188
+ .h-100 {
189
+ height: 100%;
190
+ }
191
+
192
+ .pt-1 {
193
+ padding-top: 10px !important;
194
+ }
195
+
196
+ .pt-2 {
197
+ padding-top: 20px !important;
198
+ }
199
+
200
+ .pt-3 {
201
+ padding-top: 30px !important;
202
+ }
203
+
204
+
205
+
206
+ .pb-1 {
207
+ padding-bottom: 10px !important;
208
+ }
209
+
210
+ .pb-2 {
211
+ padding-bottom: 20px !important;
212
+ }
213
+
214
+ .pb-3 {
215
+ padding-bottom: 30px !important;
216
+ }
217
+
218
+ .p-3 {
219
+ padding: 1rem!important;
220
+ }
221
+
222
+ .pt-0 {
223
+ padding-top: 0px !important;
224
+ }
225
+
226
+
227
+ .pb-0 {
228
+ padding-bottom: 0px !important;
229
+ }
230
+
231
+ .rounded-pill {
232
+ border-radius: 50rem!important;
233
+ }
234
+
235
+
180
236
  @media (max-width: 576px) {
181
237
  .flex-row {
182
- flex-direction: column!important;
238
+ flex-direction: column !important;
183
239
  }
184
240
  }
185
241
  @media (min-width: 768px) {
186
-
242
+ .justify-content-md-center {
243
+ justify-content: center!important;
244
+ }
245
+ .align-items-md-center {
246
+ align-items: center!important;
247
+ }
187
248
  }
188
249
 
189
250
  .modal-open {
package/registerSW.js ADDED
@@ -0,0 +1 @@
1
+ if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}
package/robots.txt ADDED
@@ -0,0 +1,3 @@
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
package/showcase/alert.md ADDED
@@ -0,0 +1,3 @@
1
+ <Alert>
2
+ some alert text
3
+ </Alert>
package/showcase/appbar.md ADDED
@@ -0,0 +1,8 @@
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 ADDED
@@ -0,0 +1,53 @@
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 ADDED
@@ -0,0 +1,11 @@
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 ADDED
@@ -0,0 +1,8 @@
1
+ <Badge
2
+ color={COLOR.accent}
3
+ content={10}
4
+ >
5
+ <Icon>
6
+ <HomeSolidIcon />
7
+ </Icon>
8
+ </Badge>
package/showcase/breadcrumb.md ADDED
@@ -0,0 +1,5 @@
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 ADDED
@@ -0,0 +1,11 @@
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 ADDED
@@ -0,0 +1,5 @@
1
+ <ButtonGroup>
2
+ <Button>some button</Button>
3
+ <Button>some button</Button>
4
+ <Button>some button</Button>
5
+ </ButtonGroup>
package/showcase/card.md ADDED
@@ -0,0 +1,9 @@
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 ADDED
@@ -0,0 +1,7 @@
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 ADDED
@@ -0,0 +1,7 @@
1
+ <Chip
2
+ color={settingValues.color}
3
+ shadow={settingValues.shadow}
4
+ onClick={handleClick}
5
+ >
6
+ some label
7
+ </Chip>
package/showcase/dateselect.md ADDED
@@ -0,0 +1,8 @@
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 ADDED
@@ -0,0 +1,13 @@
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 ADDED
@@ -0,0 +1,40 @@
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 ADDED
@@ -0,0 +1,6 @@
1
+ <FileInput
2
+ accept={settingValues.accept}
3
+ multiple={settingValues.multiple}
4
+ disabled={settingValues.disabled}
5
+ onChange={handleOnChange}
6
+ />
package/showcase/floatingactionbutton.md ADDED
@@ -0,0 +1,8 @@
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 ADDED
@@ -0,0 +1,7 @@
1
+ <Form
2
+ ref={myForm}
3
+ controls={controls}
4
+ validateOnBlur={settingValues.validateOnBlur}
5
+ onSubmit={onFormSubmit}
6
+ onChange={onFormChange}
7
+ />
package/showcase/grid.md ADDED
@@ -0,0 +1,5 @@
1
+ <Row>
2
+ <Column>col 1</Column>
3
+ <Column>col 2</Column>
4
+ <Column>col 3</Column>
5
+ </Row>
package/showcase/hookuseconstructor.md ADDED
@@ -0,0 +1,3 @@
1
+ useConstructor(() => {
2
+ // do something
3
+ });
package/showcase/hookusedebounce.md ADDED
@@ -0,0 +1,5 @@
1
+ useDebounce(
2
+ () => { onChange && onChange(searchText); },
3
+ debounce,
4
+ [searchText]
5
+ );
package/showcase/hookusehover.md ADDED
@@ -0,0 +1,8 @@
1
+ const [hoverRef, isHovered] = useHover();
2
+
3
+
4
+ return (
5
+ <div ref={hoverRef as any}>
6
+ ...isHovered
7
+ </div>
8
+ )
package/showcase/hookusewindowsize.md ADDED
@@ -0,0 +1,5 @@
1
+ const windowSize = useWindowSize();
2
+
3
+ useEffect(() => {
4
+ windowSize && checkIsMobile(windowSize.height, windowSize.width);
5
+ }, [windowSize]);
package/showcase/icon.md ADDED
@@ -0,0 +1,3 @@
1
+ <Icon>
2
+ <HomeSolidIcon />
3
+ </Icon>
package/showcase/iconbutton.md ADDED
@@ -0,0 +1,5 @@
1
+ ## Basic
2
+
3
+ <IconButton
4
+ icon={<HomeSolidIcon />}
5
+ />
package/showcase/link.md ADDED
@@ -0,0 +1 @@
1
+ <Link>some link text</Link>
package/showcase/list.md ADDED
@@ -0,0 +1,7 @@
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 ADDED
@@ -0,0 +1,18 @@
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 ADDED
@@ -0,0 +1,18 @@
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 ADDED
@@ -0,0 +1,17 @@
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 ADDED
@@ -0,0 +1,20 @@
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 ADDED
@@ -0,0 +1,27 @@
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 ADDED
@@ -0,0 +1,22 @@
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 ADDED
@@ -0,0 +1,43 @@
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 ADDED
@@ -0,0 +1 @@
1
+ coming soon