@reactivers/generic-ui 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.babelrc +3 -0
- package/README.md +36 -0
- package/dist/bundle.css +1 -0
- package/dist/index.cjs.js +1566 -0
- package/dist/index.esm.js +1510 -0
- package/package.json +68 -0
- package/rollup.config.js +36 -0
- package/src/components/Badge/index.js +19 -0
- package/src/components/Button/index.js +63 -0
- package/src/components/Card/index.js +51 -0
- package/src/components/ColorPicker/index.js +44 -0
- package/src/components/EmptyResult/index.js +30 -0
- package/src/components/FadeAnimation/index.js +35 -0
- package/src/components/Form/index.js +25 -0
- package/src/components/Grid/index.js +1 -0
- package/src/components/Header/index.js +20 -0
- package/src/components/Image/index.js +63 -0
- package/src/components/IncDecField/index.js +35 -0
- package/src/components/InfiniteScroll/index.js +150 -0
- package/src/components/ListItem/index.js +81 -0
- package/src/components/Mapper/index.js +12 -0
- package/src/components/Modal/index.js +87 -0
- package/src/components/Notification/index.js +69 -0
- package/src/components/OverflowImages/index.js +38 -0
- package/src/components/Popover/index.js +109 -0
- package/src/components/Rate/index.js +33 -0
- package/src/components/Section/index.js +26 -0
- package/src/components/Selectfield/index.js +63 -0
- package/src/components/Show/index.js +15 -0
- package/src/components/Tag/index.js +67 -0
- package/src/components/TextListField/index.js +85 -0
- package/src/components/Textfield/index.js +51 -0
- package/src/components/ThreeDot/index.js +22 -0
- package/src/components/Upload/index.js +14 -0
- package/src/css/index.css +110 -0
- package/src/index.js +32 -0
- package/src/utils/styles.js +116 -0
package/.babelrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# generic-ui
|
|
2
|
+
|
|
3
|
+
- This package is not a complete ui components. They are basic ui components that need to be customized to use.
|
|
4
|
+
- Also it has some simple useful components.
|
|
5
|
+
|
|
6
|
+
# Usage
|
|
7
|
+
|
|
8
|
+
```js
|
|
9
|
+
...
|
|
10
|
+
import {Card, appStyles, Mapper, Show} from "@reactivers/generic-ui"
|
|
11
|
+
|
|
12
|
+
const Sample = (props) => {
|
|
13
|
+
const items = [{name: "Item 1"}, {name: "Item 2"}, {name: "Hide Me", show: false}];
|
|
14
|
+
return (
|
|
15
|
+
<div style={{...appStyles.center}}>
|
|
16
|
+
<Card>
|
|
17
|
+
<Mapper items={items}>
|
|
18
|
+
<ItemRenderer/>
|
|
19
|
+
</Mapper>
|
|
20
|
+
</Card>
|
|
21
|
+
</div>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const ItemRenderer = (props) => {
|
|
26
|
+
const {name, show} = props;
|
|
27
|
+
return (
|
|
28
|
+
<div>
|
|
29
|
+
<Show condition={show}>
|
|
30
|
+
{name}
|
|
31
|
+
</Show>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
package/dist/bundle.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.select-field{background-color:initial;border:none;outline:none;padding:8px;width:100%}.grid-item{margin:8px 8px 0 0}.stretch-cell{height:100%!important}.full-width,.stretch-cell{width:100%!important}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clickable:hover{background-color:#eee!important;cursor:pointer;opacity:.8;transition:.4s}.clickable{background-color:initial;transition:.4s}.clickable:active{opacity:.5;transition:.4s}.center{flex-shrink:0}.center,.center-column{align-items:center;display:flex!important;justify-content:center}.center-column{flex-direction:column}.rounded-image-container{background-color:#eee;overflow:hidden}.rounded-image{border-radius:50%;height:100%;object-fit:cover;width:100%}.spread-horizontally{align-items:center;display:flex;justify-content:space-between}.three-dot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fade-in{animation:fade-in 2s backwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (min-width:768px){.show-mobil{display:none!important}}@media (max-width:767px){.show-desktop{display:none!important}}
|