@unbxd-ui/unbxd-react-components 0.2.105 → 0.2.107-beta.2

package/src/components/Form/Input.js

@@ -0,0 +1,121 @@
+import React, { useContext, useState, forwardRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormContext } from "./Form";
+import FormElementWrapper from "./FormElementWrapper";
+import VALIDATORS from "../../core/Validators";
+import utils from "../../core/utils";
+
+let Input = (props, ref) => {
+    const [ error, setError ] = useState();
+    const { 
+        label, 
+        name, 
+        type, 
+        className, 
+        value, 
+        defaultValue, 
+        placeholder, 
+        appearance, 
+        onChange,
+        validations,
+        autoComplete,
+        showLabel,
+        ...restProps
+    } = props;
+    const { onValueChange } = useContext(FormContext);
+
+    const postFormValueChange = (value, error) => {
+        typeof(onValueChange) === "function" && onValueChange(name, value, error);
+    };
+
+    const onInputChange = (event) => {
+        const value = event.target.value;
+        const { isValid, error } = utils.checkIfValid(value, validations);
+
+        if (isValid) {
+            setError("");
+        } else {
+            setError(error);
+        }
+
+        if (typeof(onChange) === "function") {
+            onChange(value, error);
+        }
+
+        postFormValueChange(value, error);
+    };
+
+    useEffect(() => {
+        /* set the initial form element value in the form context */
+        const postValue = typeof(onChange) === "function" ? value : defaultValue;
+        const { error } = utils.checkIfValid(postValue, validations);
+        postFormValueChange(postValue, error);
+    }, [value, defaultValue]);
+
+    let inputProps = {
+        type,
+        label,
+        name,
+        id: name,
+        defaultValue,
+        placeholder,
+        autoComplete,
+        className: "RCB-form-el",
+        onChange: onInputChange,
+        ref,
+        ...restProps
+    };
+
+    if (typeof(onChange) === "function") {
+        /* make it a controlled component if onChange function is given */
+        inputProps.value = value;
+    }
+
+    return (<FormElementWrapper className={className} appearance={appearance}>
+        {(showLabel && label) && <label className="RCB-form-el-label" htmlFor={name}>{label}</label>}
+        <input {...inputProps} />
+        {error && <div className="RCB-form-error">{error}</div>}
+    </FormElementWrapper>);
+};
+
+Input = forwardRef(Input);
+
+Input.propTypes = {
+    /** Pass any additional classNames to Input component */
+    className: PropTypes.string,
+    /** Use it to render different input types like text, password etc. */
+    type: PropTypes.string,
+    /** indicates whether to show or hide label */
+    showLabel: PropTypes.bool,
+    /** Label for the input element */
+    label: PropTypes.string,
+    /** Unique ID for the input element */
+    name: PropTypes.string.isRequired,
+    /** Will be used only with onChange function, or else ignored */
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    /** Array of validations to perform on the form element value. 
+     * If the validation fails, you will get an "error" field in the form onSubmit event */
+    validations: PropTypes.arrayOf(PropTypes.shape({
+        type: PropTypes.oneOf(Object.keys(VALIDATORS)).isRequired,
+        message: PropTypes.string.isRequired,
+        validator: PropTypes.func
+    })),
+    placeholder: PropTypes.string,
+    /** Define the appearance of the form element. Accepted values are either "inline" or "block" */
+    appearance: PropTypes.oneOf(["inline", "block"]),
+    /** Becomes a controlled component if onChange function is given */
+    onChange: PropTypes.func,
+    /* HTML 5 autocomplete attribute */
+    autoComplete: PropTypes.string
+};
+
+Input.defaultProps = {
+    className: "",
+    showLabel: true,
+    appearance: "inline",
+    validations: [],
+    autoComplete: "off"
+};
+
+export default Input;

package/src/components/Form/RadioList.js

@@ -0,0 +1,86 @@
+import React, { useContext, Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormContext } from "./Form";
+import FormElementWrapper from "./FormElementWrapper";
+  
+const RadioList = (props) => {
+    const { options, label, name, className, value, defaultValue, appearance, onChange, ...restProps } = props;
+    const { onValueChange } = useContext(FormContext);
+
+    const postFormValueChange = (value) => {
+        typeof(onValueChange) === "function" && onValueChange(name, value);
+    };
+
+    const onInputChange = (event) => {
+        const value = event.target.value;
+
+        if (typeof(onChange) === "function") {
+            onChange(value);
+        }
+
+        postFormValueChange(value);
+    }
+
+    useEffect(() => {
+        /* set the initial form element value in the form context */
+        const postValue = typeof(onChange) === "function" ? value : defaultValue;
+        postFormValueChange(postValue);
+    }, [value, defaultValue]);
+
+    let inputProps = {
+        type: "radio",
+        label,
+        name,
+        className: "RCB-form-el",
+        onChange: onInputChange,
+        ...restProps
+    };
+
+    return (<FormElementWrapper className={className} appearance={appearance}>
+        <label className="RCB-form-el-label">{label}</label>
+        {options.map(option => {
+            const { id, name } = option;
+            const additionalProps = {
+                defaultChecked: defaultValue === id
+            };
+
+            if (typeof(onChange) === "function") {
+                /* make it a controlled component if onChange function is given */
+                additionalProps.checked = value === id;
+            }
+
+            return (<Fragment key={id}>
+                <input {...inputProps} id={id} value={id} {...additionalProps} data-hj-allow />
+                <label className="RCB-radio-label" htmlFor={id}>{name}</label>
+            </Fragment>);
+        })}
+    </FormElementWrapper>);
+};
+
+RadioList.propTypes = {
+    /** Pass any additional classNames to Input component */
+    className: PropTypes.string,
+    /** radio items list */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        name: PropTypes.string
+    })).isRequired,
+    /** Label for the input element */
+    label: PropTypes.string,
+    /** Unique ID for the input element */
+    name: PropTypes.string.isRequired,
+    /** ID of the selected radio item, will be used only with onChange function, or else ignored */
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    /** Define the appearance of the form element. Accepted values are either "inline" or "block" */
+    appearance: PropTypes.oneOf(["inline", "block"]),
+    /** Becomes a controlled component if onChange function is given */
+    onChange: PropTypes.func
+};
+
+RadioList.defaultProps = {
+    className: "",
+    appearance: "inline"
+};
+
+export default RadioList;

package/src/components/Form/RangeSlider.js

@@ -0,0 +1,100 @@
+import React, { useContext, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { FormContext } from "./Form";
+import FormElementWrapper from "./FormElementWrapper";
+
+const RangeSlider = (props) => {
+    const { label, name, min, max, className, value, defaultValue, appearance, onChange, disabled, showBubble, inputStyle = {}, bubbleStyle = {}, inputClassName, ...restProps } = props;
+    const { onValueChange } = useContext(FormContext);
+    const [ val, setVal ] = useState(value || defaultValue);
+    
+    const postFormValueChange = (value) => {
+        typeof(onValueChange) === "function" && onValueChange(name, value);
+    };
+
+    const onInputChange = (event) => {
+        const value = event.target.value;
+
+        // TODO : do validations
+
+        if (typeof(onChange) === "function") {
+            onChange(value);
+        }
+
+        postFormValueChange(value);
+        setVal(value);
+        
+    }
+
+    useEffect(() => {
+        /* set the initial form element value in the form context */
+        const postValue = typeof(onChange) === "function" ? value : defaultValue;
+        postFormValueChange(postValue);
+    }, [value, defaultValue]);
+
+    let inputProps = {
+        type: "range",
+        min,
+        max,
+        label,
+        name,
+        id: name,
+        defaultValue,
+        disabled,
+        className: `RCB-form-el RCB-input-range ${inputClassName}`,
+        onChange: onInputChange,
+        ...restProps,
+        showBubble
+    };
+
+    if (typeof(onChange) === "function") {
+        /* make it a controlled component if onChange function is given */
+        inputProps.value = value;
+    }
+
+
+    return (<FormElementWrapper className={className} appearance={appearance}>
+        <label className="RCB-form-el-label" htmlFor={name}>{label}</label>
+        <div className="RCB-range-wrapper">
+            { showBubble && <div className="RCB-range-value" style={bubbleStyle}><span>{val}</span></div>}
+            <input {...inputProps} style={inputStyle} disabled={disabled} data-hj-allow/>
+        </div>
+    </FormElementWrapper>);
+};
+
+RangeSlider.propTypes = {
+    /** Pass any additional classNames to Input component container */
+    className: PropTypes.string,
+    /** Pass any additional classNames to Input component */
+    inputClassName: PropTypes.string,
+    /** Minimum value for range slider */
+    min: PropTypes.string.isRequired,
+    /** Maximum value for range slider */
+    max: PropTypes.string.isRequired,
+    /** Label for the input element */
+    label: PropTypes.string,
+    /** Unique ID for the input element */
+    name: PropTypes.string.isRequired,
+    /** Will be used only with onChange function, or else ignored */
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    /** Define the appearance of the form element. Accepted values are either "inline" or "block" */
+    appearance: PropTypes.oneOf(["inline", "block"]),
+    /** Becomes a controlled component if onChange function is given */
+    onChange: PropTypes.func,
+    /** Custom Style changes of slider track */
+    inputStyle: PropTypes.object,
+    /** Custom Style changes of value bubble */
+    bubbleStyle: PropTypes.object,
+    /** Show bubble with values */
+    showBubble: PropTypes.bool,
+    /** Indicates if the slider is disabled or enabled */
+    disabled: PropTypes.bool
+};
+
+RangeSlider.defaultProps = {
+    className: "",
+    appearance: "inline"
+};
+
+export default RangeSlider;

package/src/components/Form/ServerPaginatedDDList.js

@@ -0,0 +1,231 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { FixedSizeList } from "react-window";
+import InfiniteLoader from "react-window-infinite-loader";
+import dataLoader from "../../core/dataLoader";
+import utils from "../../core/utils";
+
+/* eslint-disable react/prop-types */
+
+export const DefaultDropdownItem = (props) => {
+    const { 
+        index, 
+        style,
+        data
+    } = props;
+    const {
+        items,
+        isItemLoaded,
+        selectItem, 
+        selectedItems = [], 
+        idAttribute, 
+        nameAttribute,
+        showClippedContentTitle
+    } = data;
+
+    const itemData = items[index] || {};
+    const idValue = itemData[idAttribute];
+    const name = itemData[nameAttribute];
+    const isSelected = selectedItems.find(obj => obj[idAttribute] === idValue) ? true : false;
+    const className = "RCB-list-item " + (isSelected ? "selected" : "");
+    let content = name;
+
+    if (!isItemLoaded(index)) {
+        content = "Loading...";
+    }
+
+    return <div style={style} onClick={() => selectItem(itemData)} 
+    { ...(showClippedContentTitle ? {title: content} : {})}
+    className={className}>{content}</div>;
+};
+
+const ServerPaginatedDDList = (props) => {
+    const { 
+        selectedItems, 
+        selectItem, 
+        idAttribute, 
+        nameAttribute, 
+        DropdownItem,
+        requestId,
+        requestParams,
+        responseFormatter,
+        pageNoKey,
+        perPageKey,
+        pageSize,
+        maxHeight,
+        searchAttribute,
+        searchQuery,
+        getUrlParams,
+        serverListClassName,
+        ddItemHeight,
+        minPageNo,
+        delay = 500,
+        loadImmediately = true,
+        showClippedContentTitle,
+        ...restProps
+    } = props;
+    const [ items, setItems ] = useState([]);
+    const [ itemsResetCounter, setItemsResetCounter ] = useState(loadImmediately?1:0);
+    const [ total, setTotal ] = useState(null);
+    const [ hasNextPage, setHasNextPage ] = useState(false);
+    const [ isNextPageLoading, setIsNextPageLoading ] = useState(false);
+    const debouncedFn = useRef();
+    const getDefaultPageNo = () => {
+        return minPageNo ?? 1
+    }
+    const pageNoRef = useRef(getDefaultPageNo());
+    const searchRef = useRef(searchQuery);
+        
+    const onDataLoaded = (response) => {
+        let apiResponse = response;
+        setIsNextPageLoading(false);
+        if(!loadImmediately && searchRef.current === "") {
+            setItems([]);
+            setTotal(null);
+            return false;
+        }
+
+        if (typeof(responseFormatter) === "function") {
+            apiResponse = responseFormatter(response);
+        }
+
+        let { entries, total = 0 }  = apiResponse;
+        
+        if (entries === null) {
+            entries = [];
+        }
+        
+        const totalEntries = [...items, ...entries];
+
+        if (totalEntries.length < total) {
+            setHasNextPage(true);
+        } else {
+            setHasNextPage(false);
+        }
+        
+
+        setItems(totalEntries);
+        setTotal(total);
+    };
+
+    const makeAPICall = () => {
+        setIsNextPageLoading(true);
+        const def = dataLoader.getRequestDef({
+            requestId,
+            params: {
+                [pageNoKey]: pageNoRef.current,
+                [perPageKey]: pageSize,
+                ...(searchRef.current && { [searchAttribute] : searchRef.current}),
+                ...requestParams
+            },
+            urlParams: getUrlParams()
+        });
+
+        def.done(onDataLoaded);
+
+        return def;
+    }
+
+    /* Callback to be invoked when more rows must be loaded. 
+        It should return a Promise that is resolved once all data has finished loading.
+     */
+    const loadNextPage = () => {
+        pageNoRef.current = pageNoRef.current + 1;
+        return makeAPICall();
+    };
+
+    useEffect(() => {
+        /* not the first call */
+        if(itemsResetCounter > 0) {
+            makeAPICall();   
+        }
+    }, [itemsResetCounter]);
+
+    useEffect(() => {
+        /* search query changed -> reset page no. to 1 */
+        if(searchQuery !== searchRef.current) {
+            setIsNextPageLoading(true);
+            searchRef.current = searchQuery;
+            startSearch();
+        } else {
+            setIsNextPageLoading(false);
+        }
+    }, [searchQuery]);
+    const startSearch = useCallback(()=>{
+        if (!debouncedFn.current) {
+            debouncedFn.current = utils.debounce(startSearchCallBack, delay);
+        }
+    
+        debouncedFn.current();
+    },[]);
+    const startSearchCallBack = () => {
+        pageNoRef.current = getDefaultPageNo();
+        setItems([]);
+        setTotal(null);
+        setItemsResetCounter((prevItemsResetCounter) =>{
+            return prevItemsResetCounter+1
+        });
+    };
+
+    // If there are more items to be loaded then add an extra row to hold a loading indicator.
+    const itemCount = hasNextPage ? items.length + 1 : items.length;
+    
+    // Only load 1 page of items at a time.
+    // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
+    const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;
+    
+    // Every row is loaded except for our loading indicator row.
+    const isItemLoaded = index => !hasNextPage || index < items.length;
+
+    const listProps = {
+        selectItem, 
+        selectedItems, 
+        idAttribute, 
+        nameAttribute,
+        items,
+        isItemLoaded,
+        showClippedContentTitle,
+        ...restProps 
+    };
+    if(total === null) {
+        return []
+    }
+    if (total === 0) {
+        return (
+            <div className="RCB-no-data">{`No data found`}</div>
+        )
+    }
+    return (<InfiniteLoader
+        // Function responsible for tracking the loaded state of each item.
+        isItemLoaded={isItemLoaded}
+        // Number of rows in list; can be arbitrary high number if actual number is unknown.
+        itemCount={total}
+        loadMoreItems={loadMoreItems}
+        // Minimum number of rows to be loaded at a time; defaults to 10. This property can be used to batch requests to reduce HTTP requests.
+        minimumBatchSize={pageSize}
+        // Threshold at which to pre-fetch data; defaults to 15. A threshold of 15 means that data will start loading when a user scrolls within 15 rows.
+        threshold={pageSize}>
+        {({ onItemsRendered, ref }) => (
+            <FixedSizeList
+                itemCount={itemCount} itemSize={ddItemHeight}
+                onItemsRendered={onItemsRendered}
+                className={serverListClassName}
+                ref={ref} height={maxHeight} itemData={listProps}>
+                    {DropdownItem}
+            </FixedSizeList>
+        )}
+    </InfiniteLoader>);
+};
+
+ServerPaginatedDDList.propTypes = {
+    ddItemHeight: PropTypes.number
+};
+
+ServerPaginatedDDList.defaultProps = {
+    DropdownItem: DefaultDropdownItem,
+    ddItemHeight: 30
+};
+
+/* eslint-enable react/prop-types */
+
+export default ServerPaginatedDDList;

package/src/components/Form/Textarea.js

@@ -0,0 +1,76 @@
+import React, { useContext, useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormContext } from "./Form";
+import FormElementWrapper from "./FormElementWrapper";
+
+const Textarea = (props) => {
+    const { label, name, className, value, defaultValue, placeholder, appearance, onChange, ...restProps } = props;
+    const { onValueChange } = useContext(FormContext);
+
+    const postFormValueChange = (value) => {
+        typeof(onValueChange) === "function" && onValueChange(name, value);
+    };
+
+    const onInputChange = (event) => {
+        const value = event.target.value;
+
+        // TODO : do validations
+
+        if (typeof(onChange) === "function") {
+            onChange(value);
+        }
+
+        postFormValueChange(value);
+    }
+
+    useEffect(() => {
+        /* set the initial form element value in the form context */
+        const postValue = typeof(onChange) === "function" ? value : defaultValue;
+        postFormValueChange(postValue);
+    }, [value, defaultValue]);
+
+    let inputProps = {
+        label,
+        name,
+        id: name,
+        defaultValue,
+        placeholder,
+        className: "RCB-form-el",
+        onChange: onInputChange,
+        ...restProps
+    };
+
+    if (typeof(onChange) === "function") {
+        /* make it a controlled component if onChange function is given */
+        inputProps.value = value;
+    }
+
+    return (<FormElementWrapper className={className} appearance={appearance}>
+        <label className="RCB-form-el-label" htmlFor={name}>{label}</label>
+        <textarea {...inputProps} />
+    </FormElementWrapper>);
+};
+
+Textarea.propTypes = {
+    /** Pass any additional classNames to Textarea component */
+    className: PropTypes.string,
+    /** Label for the input element */
+    label: PropTypes.string,
+    /** Unique ID for the input element */
+    name: PropTypes.string.isRequired,
+    /* Will be used only with onChange function, or else ignored */
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    placeholder: PropTypes.string,
+    /* Define the appearance of the form element. Accepted values are either "inline" or "block" */
+    appearance: PropTypes.oneOf(["inline", "block"]),
+    /* Becomes a controlled component if onChange function is given */
+    onChange: PropTypes.func
+};
+
+Textarea.defaultProps = {
+    className: "",
+    appearance: "inline"
+};
+
+export default Textarea;