@reactivers/generic-ui 0.1.0

package/src/components/Textfield/index.js

@@ -0,0 +1,51 @@
+import React, {useCallback, useRef} from "react";
+import appStyles from "../../utils/styles";
+import Show from "../Show";
+
+const Textfield = props => {
+    const {
+        containerClassName,
+        className,
+        label,
+        prefix,
+        suffix,
+        value,
+        onChange,
+        onBlur,
+        onPressEnter,
+        ...rest
+    } = props;
+    const input = useRef(null);
+
+    const focusInput = useCallback(() => {
+        if (input.current) input.current.focus()
+    }, [input])
+
+    const onKeyPress = useCallback((e) => {
+        if (["enter", "Enter"].indexOf(e.key) > -1)
+            if (onPressEnter) onPressEnter(e)
+    }, [onPressEnter])
+
+    return (
+        <div className={containerClassName}
+             style={{width: '100%'}}>
+            <Show condition={label}>
+                <p className="no-select" style={{fontWeight: 500}} onClick={focusInput}>{label}</p>
+            </Show>
+            <div style={{...appStyles.row, alignItems: 'center'}}>
+                {prefix}
+                <input className={`${className || ""} input`}
+                       style={{width: '100%'}}
+                       value={value || ""}
+                       ref={input}
+                       onChange={onChange}
+                       onBlur={onBlur}
+                       onKeyPress={onKeyPress}
+                       {...rest}/>
+                {suffix}
+            </div>
+        </div>
+    )
+}
+
+export default Textfield;

package/src/components/ThreeDot/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Popover from "../Popover";
+import appStyles from "../../utils/styles";
+
+const ThreeDot = props => {
+    const {title, children} = props;
+    return (
+        <Popover trigger="mouse"
+                 alignment="top"
+                 overlay={
+                     <div style={appStyles.toolTip}>
+                         {title || children}
+                     </div>
+                 }>
+            <div style={appStyles.threeDot}>
+                {children}
+            </div>
+        </Popover>
+    )
+}
+
+export default ThreeDot;

package/src/components/Upload/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import UUpload from 'rc-upload'
+
+const Upload = props => {
+    const {style, ...rest} = props;
+    return (
+        <UUpload style={{
+            outline: 'none',
+            ...(style || {})
+        }} {...rest} />
+    )
+}
+
+export default Upload;

package/src/css/index.css

@@ -0,0 +1,110 @@
+.select-field {
+    width: 100%;
+    outline: none;
+    border: none;
+    padding: 8px;
+    background-color: transparent;
+}
+
+.grid-item {
+    margin: 8px 8px 0 0;
+}
+
+.stretch-cell {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.full-width {
+    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: #eeeeee !important;
+    opacity: 0.8;
+    cursor: pointer;
+    transition: 0.4s;
+}
+
+.clickable {
+    background-color: transparent;
+    transition: 0.4s;
+}
+
+.clickable:active {
+    opacity: 0.5;
+    transition: 0.4s;
+}
+
+.center {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.center-column {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.rounded-image-container {
+    background-color: #eee;
+    overflow: hidden;
+}
+
+.rounded-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.spread-horizontally {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.three-dot {
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fade-in {
+    animation: fade-in 2s backwards;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+
+@media (min-width: 768px) {
+    .show-mobil {
+        display: none !important;
+    }
+}
+
+@media (max-width: 767px) {
+    .show-desktop {
+        display: none !important;
+    }
+}

package/src/index.js

@@ -0,0 +1,32 @@
+import "./css/index.css";
+
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as ColorPicker } from './components/ColorPicker';
+export { default as EmptyResult } from './components/EmptyResult';
+export { default as FadeAnimation } from './components/FadeAnimation';
+export { Field, Form, useForm } from './components/Form';
+export { Col, Grid, Row } from './components/Grid';
+export { default as Header } from './components/Header';
+export { default as Image } from './components/Image';
+export { default as IncDecField } from './components/IncDecField';
+export { default as InfiniteScroll } from './components/InfiniteScroll';
+export { default as ListItem } from './components/ListItem';
+export { default as Mapper } from './components/Mapper';
+export { default as Modal } from './components/Modal';
+export { default as notification, notificationPusher } from './components/Notification';
+export { default as OverflowImages } from './components/OverflowImages';
+export { default as Popover } from './components/Popover';
+export { default as Rate } from './components/Rate';
+export { default as Section } from './components/Section';
+export { default as Selectfield } from './components/Selectfield';
+export { default as Show } from './components/Show';
+export { default as Tag } from './components/Tag';
+export { default as Textfield } from './components/Textfield';
+export { default as TextListField } from './components/TextListField';
+export { default as ThreeDot } from './components/ThreeDot';
+export { default as Upload } from './components/Upload';
+export { default as appStyles } from './utils/styles';
+
+

package/src/utils/styles.js

@@ -0,0 +1,116 @@
+const appStyles = {
+    stretchRow: {
+        display: 'flex',
+        alignItems: 'stretch',
+        flexFlow: 'row wrap'
+    },
+    defaultShadow: {
+        boxShadow: "0 0 5px -2.75px black",
+    },
+    cardBorderRadius: {
+        borderBottomLeftRadius: 20,
+        borderTopRightRadius: 20,
+        borderBottomRightRadius: 20,
+    },
+    borderBottom: {
+        borderBottomWidth: 1,
+        borderBottomColor: '#eee'
+    },
+    center: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: 'center',
+        flexShrink: 0
+    },
+    centerInColumn: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: 'center',
+        flexDirection: 'column'
+    },
+    secondaryText: {
+        color: '#aaa'
+    },
+    imageStyle: {
+        height: "100%",
+        width: '100%',
+        borderRadius: 20,
+        resizeMode: 'contain',
+    },
+    listHeader: {
+        fontSize: 18,
+        fontWeight: 'bold'
+    },
+    spreadHorizontally: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    },
+    paddingHorizontal: (value) => ({
+        paddingLeft: value,
+        paddingRight: value
+    }),
+    paddingVertical: (value) => ({
+        paddingTop: value,
+        paddingBottom: value
+    }),
+    marginHorizontal: (value) => ({
+        marginLeft: value,
+        marginRight: value
+    }),
+    marginVertical: (value) => ({
+        marginTop: value,
+        marginBottom: value
+    }),
+    row: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    card: {
+        backgroundColor: 'white',
+    },
+    grid: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        flexShrink: 'initial'
+    },
+    cardTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: 'black',
+    },
+    cardSubtitle: {
+        marginTop: 8,
+        marginBottom: 8,
+        fontSize: 14,
+        fontWeight: '300'
+    },
+    rounded: size => ({
+        width: size,
+        height: size,
+        borderRadius: size * 2
+    }),
+    roundedImage: {
+        width: '100%',
+        objectFit: "cover",
+        borderRadius: "50%"
+    },
+    threeDot: {
+        whiteSpace: 'nowrap',
+        width: '100%',
+        display: 'inline-block',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    toolTip: {
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        color: 'white',
+        padding: "2px 6px",
+        borderRadius: 10
+    }
+}
+
+
+export default appStyles