@reactivers/generic-ui 0.1.0

package/src/components/ListItem/index.js

@@ -0,0 +1,81 @@
+import { takeIf } from "@reactivers/use-utils";
+import Show from "../Show";
+
+const ListItem = props => {
+    const {
+        style,
+        avatar,
+        title,
+        lastItem,
+        titleRenderer,
+        description,
+        className,
+        titleStyle,
+        subtitleStyle,
+        titleContainerStyle,
+        onClick,
+        onTitleClick,
+        subtitle,
+        subtitleRenderer,
+        headerContainerStyle,
+        avatarContainerStyle,
+        selected,
+        children
+    } = props;
+
+    const borderBottom = takeIf(lastItem, '1px solid #eee');
+    const titleContainerClassName = takeIf(onTitleClick, "clickable", "")
+    return (
+        <div style={{ borderBottom, padding: 4, ...(style || {}) }}
+            className={className}
+            onClick={onClick}>
+            <div style={{ display: "flex", alignItems: 'center', ...(headerContainerStyle || {}) }}>
+                <Show condition={avatar}>
+                    <div style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        marginRight: takeIf(!!title || !!titleRenderer, 8, 0),
+                        ...(avatarContainerStyle || {}),
+                    }}>
+                        {avatar}
+                    </div>
+                </Show>
+                <div style={{
+                    width: '100%',
+                    padding: 4,
+                    ...(titleContainerStyle || {})
+                }}
+                    onClick={onTitleClick}
+                    className={titleContainerClassName}>
+                    <Show condition={titleRenderer}>
+                        {titleRenderer}
+                    </Show>
+                    <Show condition={title}>
+                        <div style={{
+                            margin: 0,
+                            color: takeIf(selected, "#1890ff"),
+                            ...(titleStyle || {})
+                        }}>{title}</div>
+                    </Show>
+                    <Show condition={subtitle}>
+                        <div style={{
+                            margin: 0,
+                            fontSize: 10,
+                            color: 'black',
+                            ...(subtitleStyle || {})
+                        }}>{subtitle}</div>
+                    </Show>
+                    <Show condition={subtitleRenderer}>
+                        {subtitleRenderer}
+                    </Show>
+                </div>
+                <Show condition={description}>
+                    {description}
+                </Show>
+            </div>
+            {children}
+        </div>
+    )
+}
+
+export default ListItem

package/src/components/Mapper/index.js

@@ -0,0 +1,12 @@
+import {cloneElement} from 'react';
+
+const Mapper = props => {
+    const {items, map, children} = props;
+    if (children)
+        return (items || []).map((item, index) => {
+            return cloneElement(children, {...item, key: index})
+        })
+    return (items || []).map(map)
+}
+
+export default Mapper;

package/src/components/Modal/index.js

@@ -0,0 +1,87 @@
+import { takeIf } from '@reactivers/use-utils';
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import appStyles from "../../utils/styles";
+import { Col } from "../Grid";
+import Show from "../Show";
+
+const ModalRenderer = props => {
+    const { title, children, footer } = props;
+    return (
+        <>
+            <div style={{ borderBottom: '1px solid #eee' }}>
+                <div style={{ margin: 0, padding: 16, fontSize: "1.2em", fontWeight: 500 }}>{title}</div>
+            </div>
+            <div style={{ padding: 16 }}>
+                {children}
+            </div>
+            <Show condition={footer}>
+                <div style={{ borderTop: '1px solid #eee' }}>
+                    {footer}
+                </div>
+            </Show>
+        </>
+    )
+}
+
+const Overlay = props => {
+    const { visible: _visible, onClick: _onClick, children } = props;
+    const [visible, setVisible] = useState(_visible);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setVisible(_visible)
+        }, 1)
+    }, [_visible])
+
+    const onClick = useCallback((e) => {
+        setVisible(false)
+        setTimeout(() => {
+            _onClick(e)
+        }, 400)
+    }, [_onClick])
+
+    if (!_visible) return null;
+
+    return (
+        <div onClick={onClick}
+            style={{
+                position: 'fixed',
+                zIndex: 1,
+                backgroundColor: 'rgba(0,0,0,0.5)',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                transition: "0.4s",
+                opacity: takeIf(visible, 1, 0),
+                display: takeIf(visible, 'block', 'none'),
+                overflow: 'auto',
+                pointerEvents: takeIf(visible, "initial", "none"),
+                ...appStyles.center,
+            }}>
+            <Col onClick={e => e.stopPropagation()}
+                xs={10} sm={10} md={8} lg={8} xl={6}
+                style={{
+                    backgroundColor: 'white',
+                    position: 'absolute',
+                    width: takeIf(visible, "100%", "0%"),
+                    overflow: 'auto',
+                    transition: '0.4s',
+                    maxHeight: takeIf(visible, "90%", "0%"),
+                }}>
+                {children}
+            </Col>
+        </div>
+    )
+}
+
+const Modal = props => {
+    const { visible, destroyOnClose, onClose, ...rest } = props;
+    return createPortal(
+        <Overlay onClick={onClose}
+            visible={visible}>
+            <ModalRenderer {...rest} />
+        </Overlay>, document.body)
+}
+
+export default Modal;

package/src/components/Notification/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import 'rc-notification/assets/index.css';
+import Notification from 'rc-notification';
+import ListItem from "../ListItem";
+
+let notification = null
+Notification.newInstance({
+    style: {
+        right: 32,
+        top: 32
+    },
+}, _notification => {
+    notification = _notification
+});
+
+const notificationColors = {
+    success: 'green',
+    error: 'red',
+    warning: 'orange',
+    info: 'blue',
+}
+
+const NotificationRenderer = props => {
+    const {type, title, message, icon} = props;
+    const color = notificationColors[type]
+    return (
+        <ListItem style={{borderLeft: `5px solid ${color}`, minWidth: 250, padding: 8}}
+                  avatar={icon}
+                  avatarContainerStyle={{
+                      color: notificationColors[type],
+                      fontSize: 20,
+                      marginRight: 4
+                  }}
+                  titleStyle={{fontWeight: 'bold'}}
+                  title={title}>
+            <p style={{marginLeft: 28, fontSize: 12}}>
+                {message}
+            </p>
+        </ListItem>
+    )
+}
+
+export const notificationPusher = props => {
+    const {duration, title, message, icon, type, ...rest} = props;
+    notification.notice({
+        duration: duration || 5,
+        content: <NotificationRenderer title={title}
+                                       message={message}
+                                       type={type}
+                                       icon={icon}/>,
+        style: {padding: 0},
+        ...rest
+    })
+}
+
+notification.success = props => {
+    notificationPusher({...props, type: "success"})
+}
+notification.error = props => {
+    notificationPusher({...props, type: "error"})
+}
+notification.warning = props => {
+    notificationPusher({...props, type: "warning"})
+}
+notification.info = props => {
+    notificationPusher({...props, type: "info"})
+}
+
+export default notification;

package/src/components/OverflowImages/index.js

@@ -0,0 +1,38 @@
+import { takeIf } from "@reactivers/use-utils";
+import appStyles from "../../utils/styles";
+import Badge from "../Badge";
+import Image from "../Image";
+import Mapper from "../Mapper";
+
+const OverflowImages = props => {
+    const { images, maxCount: _maxCount, size } = props;
+    const maxCount = _maxCount || 3;
+    const overflowItemsCount = images.length - maxCount;
+    const count = takeIf(overflowItemsCount > 0, `+${overflowItemsCount}`)
+    return (
+        <div style={{ ...appStyles.center, flexDirection: 'column', marginRight: 8 }}>
+            <Badge title={count}>
+                <div style={{ ...appStyles.center }}>
+                    <Mapper items={images.filter((_, index) => index < maxCount)}>
+                        <OverflowImage size={size} />
+                    </Mapper>
+                </div>
+            </Badge>
+        </div>
+    )
+}
+
+const OverflowImage = props => {
+    const { src, index, size } = props;
+    return (
+        <div style={{
+            border: '1px solid white',
+            marginLeft: takeIf(index, -32),
+            borderRadius: size
+        }} key={index}>
+            <Image src={src} key={index} size={size} />
+        </div>
+    )
+}
+
+export default OverflowImages;

package/src/components/Popover/index.js

@@ -0,0 +1,109 @@
+import { coalasce } from "@reactivers/use-utils";
+import { useCallback, useRef, useState } from 'react';
+import Show from "../Show";
+
+const styles = {
+    popover: {
+        position: 'absolute',
+        zIndex: '2',
+    },
+    cover: {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+        zIndex: 1
+    },
+}
+
+const Popover = props => {
+    const { overlay, trigger: _trigger, alignment: _alignment, children } = props;
+    const trigger = coalasce(_trigger, "click")
+    const alignment = coalasce(_alignment, "bottom")
+    const target = useRef(null);
+
+    const [displayColorPicker, setDisplayColorPicker] = useState(false);
+    const [position, setPosition] = useState({})
+
+    const showPopover = useCallback(() => {
+        setDisplayColorPicker(true)
+        if (target.current) {
+            const { left, top, bottom, right, height } = target.current.getBoundingClientRect() || {};
+            switch (alignment) {
+                case "bottom":
+                    setPosition({
+                        left,
+                        top: bottom
+                    })
+                    break;
+                case "top":
+                    setPosition({
+                        left,
+                        bottom: top
+                    })
+                    break;
+                case "left":
+                    setPosition({
+                        right: left,
+                        top: top
+                    })
+                    break;
+                case "right":
+                    setPosition({
+                        left: right,
+                        top: top
+                    })
+                    break;
+            }
+
+        }
+    }, [target])
+
+    const showPopoverClick = useCallback((e) => {
+        if (trigger === "click") showPopover()
+    }, [showPopover, trigger])
+
+    const showPopoverMouseEnter = useCallback((e) => {
+        if (trigger === "mouse") showPopover()
+    }, [showPopover, trigger])
+
+    const stopPropagation = useCallback((e) => {
+        e.stopPropagation()
+    }, [])
+
+    const closePopover = useCallback(() => {
+        setDisplayColorPicker(false)
+    }, [])
+
+    const closePopoverClick = useCallback(() => {
+        if (trigger === "click") closePopover();
+    }, [target, closePopover])
+
+    const closePopoverMouseEnter = useCallback(() => {
+        if (trigger === "mouse") closePopover();
+    }, [target, closePopover])
+
+    return (
+        <div>
+            <div onClick={showPopoverClick}
+                onMouseEnter={showPopoverMouseEnter}
+                ref={target}>
+                {children}
+            </div>
+            <Show condition={displayColorPicker}>
+                <div style={styles.cover}
+                    onClick={closePopoverClick}
+                    onMouseEnter={closePopoverMouseEnter}
+                >
+                    <div style={{ ...styles.popover, ...position }}
+                        onClick={stopPropagation}
+                        onMouseEnter={stopPropagation}>
+                        {overlay}
+                    </div>
+                </div>
+            </Show>
+        </div>
+    )
+}
+export default Popover

package/src/components/Rate/index.js

@@ -0,0 +1,33 @@
+import React, {useEffect, useState} from 'react';
+import appStyles from "../../utils/styles";
+import Show from "../Show";
+
+const Rate = props => {
+    const {value, total, size: _size, style} = props;
+    const [stars, setStars] = useState([])
+    const size = _size || 24
+
+    useEffect(() => {
+        const _stars = Array(total || 5).fill(0).map((i, index) => index < value ? 1 : 0);
+        setStars(_stars)
+    }, [total, value]);
+
+    return (
+        <div style={{...appStyles.center, ...appStyles.grid, ...(style || {})}}>
+            {stars.map((i, index) => {
+                return (
+                    <div style={{margin: 4}} key={index}>
+                        <Show condition={i}>
+                            <props.filledStarIcon style={{color: 'orange', fontSize: size}}/>
+                        </Show>
+                        <Show condition={!i}>
+                            <props.emptyStarIcon style={{color: "orange", fontSize: size}}/>
+                        </Show>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default Rate

package/src/components/Section/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Section = props => {
+    const {title, extra, className, style, children} = props;
+    return (
+        <div
+            className={className}
+            style={{
+                border: '1px solid #ddd',
+                borderRadius: 20,
+                padding: 16,
+                margin: 8,
+                height: '100%', ...(style || {})
+            }}>
+            <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+                {title ?
+                    <div style={{fontWeight: 'bold', fontSize: 18}}>{title}</div>
+                    : null}
+                {extra}
+            </div>
+            {children}
+        </div>
+    );
+};
+
+export default Section;

package/src/components/Selectfield/index.js

@@ -0,0 +1,63 @@
+import { coalasce } from "@reactivers/use-utils";
+import { useCallback } from 'react';
+import Mapper from "../Mapper";
+import Show from "../Show";
+
+const Selectfield = props => {
+    const {
+        className,
+        label,
+        items,
+        value,
+        descriptionKey: _descriptionKey,
+        valueKey: _valueKey,
+        onChange: _onChange,
+        selectFieldClassName: _selectFieldClassName
+    } = props
+    let selectFieldClassName = "select-field "
+    if (_selectFieldClassName) selectFieldClassName += _selectFieldClassName
+
+    const valueKey = coalasce(_valueKey, "value")
+    const descriptionKey = coalasce(_descriptionKey, "title")
+
+    const onChange = useCallback((e) => {
+        const selectedValueKey = e.target.value;
+        const [selectedValue] = items.filter(i => i[valueKey] === selectedValueKey);
+        _onChange(selectedValue);
+    }, [_onChange, items, valueKey])
+
+    return (
+        <div className={className}>
+            <Show condition={label}>
+                <p style={{ fontWeight: 'bold' }}>{label}</p>
+            </Show>
+            <select name={label}
+                value={value || ""}
+                onChange={onChange}
+                className={selectFieldClassName}>
+                <Mapper items={items}>
+                    <SelectfieldOption valueKey={valueKey}
+                        descriptionKey={descriptionKey}
+                        value={value}
+                    />
+                </Mapper>
+            </select>
+        </div>
+    )
+}
+
+const SelectfieldOption = props => {
+    const { valueKey, value: _value, descriptionKey, ...rest } = props;
+    const value = rest[valueKey];
+    const description = rest[descriptionKey];
+    return (
+        <option value={value}
+            selected={value === _value}
+            className='select-field-option'
+        >
+            {description}
+        </option>
+    )
+}
+
+export default Selectfield;

package/src/components/Show/index.js

@@ -0,0 +1,15 @@
+import {useEffect} from "react";
+
+const Show = props => {
+    const {condition, willUnmount, children} = props;
+
+    useEffect(() => {
+        return willUnmount
+    }, [willUnmount])
+
+    if (condition)
+        return children;
+    return null;
+}
+
+export default Show

package/src/components/Tag/index.js

@@ -0,0 +1,67 @@
+import { changeColor, generatedColorFromString, takeIf } from "@reactivers/use-utils";
+import appStyles from "../../utils/styles";
+import Button from "../Button";
+import Show from "../Show";
+
+const Tag = props => {
+    const {
+        color: _color,
+        className,
+        description,
+        generatedColor,
+        type: _type,
+        textStyle,
+        style,
+        onClick,
+        onTextClick,
+        closeIcon,
+        onClear,
+        closeButtonClassName,
+        closeButtonStyle,
+        children
+    } = props
+    const type = _type || "outlined";
+
+    const color = _color || (generatedColor ? generatedColorFromString(description) : "#cccccc")
+    const textColor = type === "filled" ? '#ffffff' : (color || "");
+    const backgroundColor = type === "filled" ? color : `${changeColor(color, 150)}`
+    return (
+        <div style={{
+            padding: "8px 16px",
+            borderRadius: 8,
+            backgroundColor,
+            maxWidth: 'calc(100% - 16px)',
+            ...appStyles.center, ...(style || {})
+        }}
+            className={`
+             ${takeIf(onClick, "clickable", "")}
+              ${className || ""}
+              `}
+            onClick={onClick}>
+            <div className={takeIf(onTextClick, "clickable", "")}
+                style={{
+                    color: textColor,
+                    margin: 0,
+                    lineHeight: 1,
+                    width: '100%',
+                    ...(textStyle || {})
+                }}
+                onClick={onTextClick}>
+                {children}
+            </div>
+            <Show condition={onClear}>
+                <Button icon={closeIcon}
+                    onClick={onClear}
+                    className={closeButtonClassName}
+                    style={{
+                        color: 'white',
+                        marginLeft: 8,
+                        ...(closeButtonStyle || {})
+                    }}
+                />
+            </Show>
+        </div>
+    )
+}
+
+export default Tag;

package/src/components/TextListField/index.js

@@ -0,0 +1,85 @@
+import { takeIf } from "@reactivers/use-utils";
+import { useCallback, useMemo, useState } from 'react';
+import appStyles from "../../utils/styles";
+import Button from "../Button";
+import Textfield from "../Textfield";
+
+const TextListField = props => {
+    const {
+        value: _value,
+        onChange: _onChange,
+        listContainerStyle,
+        descriptionKey: _descriptionKey,
+        valuesRenderer,
+        textfieldContainerClassName,
+        checkButton,
+        label,
+        checkIcon,
+        valueTransformer
+    } = props;
+    const descriptionKey = useMemo(() => _descriptionKey || "name", [_descriptionKey]);
+    const [value, setValue] = useState({});
+    const values = useMemo(() => _value || [], [_value]);
+
+    const onSave = useCallback((e) => {
+        if (e) e.preventDefault()
+        const newValue = valueTransformer ? valueTransformer(value) : value
+        if (!newValue[descriptionKey]) return;
+
+        if (newValue.index !== undefined) {
+            const { index } = newValue;
+            delete newValue.index;
+            values[index] = newValue;
+            _onChange([...values])
+        } else {
+            _onChange([...values, newValue])
+        }
+
+        setValue({})
+    }, [value, valueTransformer, values, _onChange, descriptionKey])
+
+    const onClear = useCallback((index => {
+        values.splice(index, 1)
+        _onChange([...values])
+    }), [values, _onChange])
+
+    const commitChange = useCallback((index, _newValue) => {
+        values[index] = valueTransformer ? valueTransformer(_newValue) : _newValue
+        _onChange([...values])
+    }, [values, valueTransformer, _onChange])
+
+
+    const suffix = takeIf(checkButton, checkButton({ disabled: !value[descriptionKey], onClick: onSave }), <Button
+        icon={checkIcon}
+        type="primary"
+        disabled={!value[descriptionKey]}
+        onClick={onSave}
+    />)
+
+    return (
+        <>
+            <div style={{ ...appStyles.grid, ...(listContainerStyle || {}) }}>
+                {values.map((item, index) => valuesRenderer({
+                    item,
+                    index,
+                    onClear,
+                    setValue,
+                    onSave,
+                    onChange: commitChange
+                }))}
+            </div>
+            <div style={{ ...appStyles.row, marginTop: 8 }}>
+                <Textfield value={value[descriptionKey]}
+                    containerClassName={textfieldContainerClassName}
+                    label={label}
+                    onChange={e => setValue({ ...value, [descriptionKey]: e.target.value })}
+                    onPressEnter={onSave}
+                    onBlur={onSave}
+                    suffix={suffix}
+                />
+            </div>
+        </>
+    )
+}
+
+export default TextListField;