@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/rules/RuleContainer.js

@@ -1,72 +1,41 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"];
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import RuleConnector from './RuleConnector';
-var RuleContainer = function RuleContainer(props) {
-  var show = props.show,
-    unchecked = props.unchecked,
-    background = props.background,
-    borderColor = props.borderColor,
-    hideConnector = props.hideConnector,
-    customConnector = props.customConnector,
-    className = props.className,
-    children = props.children,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  if (!show) {
-    return null;
-  }
-  var boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && "border border-width border-style-dashed ".concat(borderColor), className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: "RuleContainer"
-  }, remainingProps), /*#__PURE__*/React.createElement("div", {
-    className: boxClassNames,
-    "data-testid": "ruleContainerBox"
-  }, /*#__PURE__*/React.createElement(AnimatePresence, {
-    exitBeforeEnter: true
-  }, React.Children.map(children, function (child) {
-    var _child$type;
-    if (!child) {
-      return null;
-    }
-
-    // In case there are multiple children of RuleContainer, use the
-    // type name or the type itself as a key to animate between the two children
-    return /*#__PURE__*/React.createElement(motion.div, {
-      key: ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || child.type,
-      initial: {
-        opacity: 0
-      },
-      animate: {
-        opacity: 1
-      },
-      exit: {
-        opacity: 0
-      }
-      // transition={{ delay: 1, duration: 2 }}
-    }, child);
-  }))), customConnector ? customConnector : /*#__PURE__*/React.createElement(RuleConnector, {
-    hidden: unchecked || hideConnector
-  }));
-};
-RuleContainer.defaultProps = {
-  show: true,
-  unchecked: false,
-  background: 'bg-lightest',
-  borderColor: '',
-  hideConnector: false,
-  className: ''
-};
-RuleContainer.propTypes = {
-  show: PropTypes.bool,
-  unchecked: PropTypes.bool,
-  background: PropTypes.string,
-  borderColor: PropTypes.string,
-  hideConnector: PropTypes.bool,
-  customConnector: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  className: PropTypes.string
-};
-export default RuleContainer;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import RuleConnector from './RuleConnector';
+const RuleContainer = props => {
+    const { show, unchecked, background, borderColor, hideConnector, customConnector, className, children } = props, remainingProps = __rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
+    if (!show) {
+        return null;
+    }
+    const boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
+    return (_jsxs("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [_jsx("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: React.Children.map(children, child => {
+                        var _a;
+                        if (!child) {
+                            return null;
+                        }
+                        // In case there are multiple children of RuleContainer, use the
+                        // type name or the type itself as a key to animate between the two children
+                        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) || child.type));
+                    }) })) })), customConnector ? customConnector : _jsx(RuleConnector, { hidden: unchecked || hideConnector })] })));
+};
+RuleContainer.defaultProps = {
+    show: true,
+    unchecked: false,
+    background: 'bg-lightest',
+    borderColor: '',
+    hideConnector: false,
+    className: '',
+};
+RuleContainer.propTypes = {
+    show: PropTypes.bool,
+    unchecked: PropTypes.bool,
+    background: PropTypes.string,
+    borderColor: PropTypes.string,
+    hideConnector: PropTypes.bool,
+    customConnector: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    className: PropTypes.string,
+};
+export default RuleContainer;

package/components/rules/RulesWrapper.d.ts

@@ -0,0 +1,8 @@
+export default RulesWrapper;
+declare function RulesWrapper({ children, ...remainigProps }: {
+    [x: string]: any;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace RulesWrapper {
+    const defaultProps: {};
+}

package/components/rules/RulesWrapper.js

@@ -1,17 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-import React from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-var RulesWrapper = function RulesWrapper(_ref) {
-  var children = _ref.children,
-    remainigProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(motion.div, _extends({
-    initial: false,
-    layout: true
-  }, remainigProps), /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(motion.div, {
-    layout: "position"
-  }, children)));
-};
-RulesWrapper.defaultProps = {};
-export default RulesWrapper;
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+const RulesWrapper = (_a) => {
+    var { children } = _a, remainigProps = __rest(_a, ["children"]);
+    return (_jsx(motion.div, Object.assign({ initial: false, layout: true }, remainigProps, { children: _jsx(AnimatePresence, { children: _jsx(motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
+};
+RulesWrapper.defaultProps = {};
+export default RulesWrapper;

package/components/saveableInput/SaveableInput.d.ts

@@ -0,0 +1,46 @@
+import { type Attributes } from 'react';
+export type SaveableInputProps = {
+    /**
+     * The input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value will *not* be changed for new input values.
+     */
+    fixedPreviousValue?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value *changes* when a new input value is accepted.
+     */
+    previousValue?: string;
+    /**
+     * The actual input value.
+     */
+    value?: string;
+    /**
+     * Callback function triggered when the value changes.
+     * @param value
+     * @param previousValue
+     * @returns
+     */
+    onValueChanged?: (value: string, previousValue: string) => void;
+    /**
+     * Defines the button style: `default` or `primary`.
+     */
+    buttonStyle?: 'primary' | 'default';
+    /**
+     * Additional HTML attributes to be set on the input element.
+     */
+    inputProps?: Attributes;
+    /**
+     * Additional classes to be set on the input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SaveableInput: (props: SaveableInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveableInput;

package/components/saveableInput/SaveableInput.js

@@ -0,0 +1,90 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+// @ts-ignore
+import Button from '../../Button';
+import useKey from '../../hooks/useKey';
+import useEsc from '../../hooks/useEsc';
+const DEFAULT_BUTTON_STYLE = 'primary';
+// TODO:
+// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?
+// [x] avoid save without change
+// [x] use fixed previous value
+// [x] enter = save
+// [x] esc key to abort and leave edit mode
+// [x] tab focus + enter = go into edit mode
+const SaveableInput = (props) => {
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', onValueChanged = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, className, inputProps } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "buttonStyle", "inputClassName", "className", "inputProps"]);
+    const externalOldValue = previousValue || fixedPreviousValue;
+    const [inputValue, setInputValue] = useState(externalValue);
+    const [oldInputValue, setOldInputValue] = useState(externalOldValue);
+    const [editInput, setEditInput] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const initialInputValueRef = useRef(inputValue);
+    const initialOldInputValueRef = useRef(oldInputValue);
+    // Update internal state in a controlled environment
+    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
+    if (previousExternalValue !== externalValue) {
+        setInputValue(externalValue);
+        setPreviousExternalValue(externalValue);
+    }
+    // Update internal state in a controlled environment
+    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);
+    if (previousExternalOldValue !== externalOldValue) {
+        setOldInputValue(externalOldValue);
+        setPreviousExternalOldValue(externalOldValue);
+    }
+    // Set focus on input when being in edit mode
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current && editInput) {
+            inputRef.current.focus();
+        }
+    }, [inputRef.current, editInput]);
+    // Allow to exit "edit" mode with "Enter" to accept changes
+    useKey((event) => {
+        if (isFocused && editInput && event.key === 'Enter') {
+            handleToggleInput();
+        }
+    });
+    // Allow to exit "edit" mode with "Esc" to ignore changes
+    useEsc(() => {
+        if (isFocused) {
+            // Restore local state to initial vales as it was when entering edit mode
+            setInputValue(initialInputValueRef.current);
+            setOldInputValue(initialOldInputValueRef.current);
+            setEditInput(false);
+        }
+    });
+    const handleToggleInput = () => {
+        if (editInput === false) {
+            setEditInput(true);
+            // Temporarily store values of input and oldInput to be used when
+            // discarding changes on "esc" or to avoid saving without changes
+            if (!fixedPreviousValue) {
+                initialInputValueRef.current = inputValue;
+                initialOldInputValueRef.current = oldInputValue;
+            }
+        }
+        else {
+            setEditInput(false);
+            if (initialInputValueRef.current !== inputValue) {
+                setOldInputValue(initialInputValueRef.current);
+                onValueChanged(inputValue, oldInputValue);
+            }
+        }
+    };
+    const handleInputChange = (event) => setInputValue(event.target.value);
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+    const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;
+    const wrapperClasses = classNames('form-group', className);
+    const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', inputClassName);
+    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
+    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [_jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), showOldValue && (_jsx("div", Object.assign({ className: 'position-absolute top-2 left-10 ' +
+                        'margin-left-3 text-size-10 text-decoration-line-through' }, { children: oldInputValue }))), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
+};
+export default SaveableInput;

package/components/selects/BaseDropdownMenu.d.ts

@@ -0,0 +1,83 @@
+export class BaseDropdownMenu extends React.Component<any, any, any> {
+    constructor(props: any);
+    state: {
+        dropup: boolean;
+        pullRight: any;
+        focusedItemIndex: any;
+        keyboardUsed: any;
+        itemDOMValues: never[];
+    };
+    handleOptionChange(event: any): void;
+    handleKeydown(event: any): void;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    focusOption(direction: any): void;
+    getDropdownDOMNode(): Element | Text | null;
+    getOptionNodes(): any;
+    setItemDOMValues(): {
+        id: any;
+        text: any;
+    }[] | undefined;
+    getFocusedOptionNode(): any;
+    selectOptionOnEnter(event: any): void;
+    render(): import("react/jsx-runtime").JSX.Element | null;
+    refDropdownMenu: HTMLUListElement | null | undefined;
+    renderMenuOption(option: any, index: any): import("react/jsx-runtime").JSX.Element;
+    getSelectedFocusedItemIndex(): any;
+    isAutoDropActive(): boolean;
+    openMenu(nextProps: any): void;
+    onDocumentKeydownListener: {
+        remove(): void;
+    } | undefined;
+    closeMenu(): void;
+}
+export namespace BaseDropdownMenu {
+    namespace defaultProps {
+        export const isOpen: boolean;
+        export function updateDOMValues(): void;
+        export function onOpen(): void;
+        export function onSelect(): void;
+        export function onClose(): void;
+        export const options: never[];
+        export const autoDropDirection: boolean;
+        export const pullRight: boolean;
+        export const useActiveClass: boolean;
+        export const keyboardUsed: boolean;
+        export { DEFAULT_FOCUSED_ITEM_INDEX as focusedItemIndex };
+    }
+    namespace propTypes {
+        const options_1: PropTypes.Requireable<(PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            label: PropTypes.Validator<any>;
+            icon: PropTypes.Requireable<object>;
+            selected: PropTypes.Requireable<boolean>;
+            disabled: PropTypes.Requireable<boolean>;
+            header: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        export { options_1 as options };
+        const isOpen_1: PropTypes.Requireable<boolean>;
+        export { isOpen_1 as isOpen };
+        const updateDOMValues_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { updateDOMValues_1 as updateDOMValues };
+        const onOpen_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onOpen_1 as onOpen };
+        const onSelect_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onSelect_1 as onSelect };
+        const onClose_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onClose_1 as onClose };
+        export const placeholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export const dropup: PropTypes.Requireable<boolean>;
+        const pullRight_1: PropTypes.Requireable<boolean>;
+        export { pullRight_1 as pullRight };
+        const autoDropDirection_1: PropTypes.Requireable<boolean>;
+        export { autoDropDirection_1 as autoDropDirection };
+        export const noItemMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export const focusedItemIndex: PropTypes.Validator<number>;
+        export const dropdownClassName: PropTypes.Requireable<string>;
+        export const requestItemDOMValues: PropTypes.Requireable<boolean>;
+    }
+}
+import React from "react";
+declare const DEFAULT_FOCUSED_ITEM_INDEX: -1;
+import PropTypes from "prop-types";
+export {};