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

package/components/clearableInput/ClearableInput.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+export declare const DEFAULT_TYPE = "text";
+export declare const SUPPORTED_TYPES: string[];
+export type ClearableInputProps = {
+    /**
+     * The translated text that shall be shown when the input is empty.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines the type of the input itself.
+     *
+     * There are three types supported:
+     * `text`, `email`, `password`.
+     */
+    type?: 'text' | 'password' | 'email';
+    /**
+     * Initial value of the ClearableInput. Pass this prop if you want to use this
+     * component as an uncontrolled component.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the ClearableInput. Pass this prop if you want to use this
+     * component as a controlled component.
+     */
+    value?: string;
+    /**
+     * Defines the maximum amount of characters that can be entered.
+     */
+    maxLength?: number;
+    /**
+     * Defines the tab index to be added to the input element.
+     */
+    tabIndex?: number;
+    /**
+     * Defined whether or not the input has the error styling.
+     */
+    hasError?: boolean;
+    /**
+     * The callback ref for the underlying input. Alternatively, use can use a forward ref.
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Sets autocomplete value for autosuggest forms.
+     */
+    autoComplete?: string;
+    /**
+     * Callback function for when the value changes. Receives new value as an argument.
+     * @param newValue
+     * @param event
+     * @returns
+     */
+    onChange?: (newValue: string, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function which gets triggered when the input looses the focus.
+     * @param event
+     * @returns
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function which gets triggered when the input gains the focus.
+     * @param event
+     * @returns
+     */
+    onFocus?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function for when the value is cleared via the clear button.
+     * @param event
+     * @returns
+     */
+    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function for every key pressed including `Enter` key.
+     * @param event
+     * @returns
+     */
+    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Additional classes to be set on the input element.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+type ChildrenProp = {
+    /**
+     * Providing a function enables the render props approach. The function gets the input props
+     * passed and is responsible for rendering the custom `input` component.
+     * @param props
+     * @returns
+     */
+    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
+};
+declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
+export default ClearableInput;

package/components/clearableInput/ClearableInput.js

@@ -1,184 +1,68 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-var _excluded = ["children", "className", "inputClassName", "type", "hasError", "inputRef", "autoComplete"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
-import PropTypes from 'prop-types';
-import omit from 'lodash/fp/omit';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
-import classNames from 'classnames';
-export var DEFAULT_TYPE = 'text';
-export var SUPPORTED_TYPES = ['text', 'password', 'email'];
-var ClearableInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(ClearableInput, _React$Component);
-  var _super = _createSuper(ClearableInput);
-  function ClearableInput(props) {
-    var _this;
-    _classCallCheck(this, ClearableInput);
-    _this = _super.call(this, props);
-    var initialValue = props.value || props.defaultValue || '';
-    _this.state = {
-      inputValue: initialValue,
-      showClear: _this.hasValue(initialValue),
-      // Note: check for null and undefined not for empty string
-      isControlled: !isNil(props.value)
-    };
-    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
-    _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
-    _this.clearInputValue = _this.clearInputValue.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  // only gets triggered on user interaction.
-  _createClass(ClearableInput, [{
-    key: "handleChange",
-    value: function handleChange(event) {
-      var isControlled = this.state.isControlled;
-      var onChange = this.props.onChange;
-      var value = event.target.value;
-      if (isControlled) {
-        onChange(value, event);
-      } else {
-        this.changeInternalValue(value, event);
-        onChange(value, event);
-      }
-    }
-
-    // Will be triggered on every key press but also when pressing 'Enter' for example
-  }, {
-    key: "handleKeyPress",
-    value: function handleKeyPress(event) {
-      var onKeyPress = this.props.onKeyPress;
-      onKeyPress(event);
-    }
-
-    // important for when used as a controlled component (value from outside).
-    // eslint-disable-next-line camelcase
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.changeInternalValue(nextProps.value);
-    }
-  }, {
-    key: "hasValue",
-    value: function hasValue(value) {
-      return !isEmpty("".concat(value));
-    }
-
-    // handles new input value and saves it in the state.
-    // the value stored in the state is used for rendering.
-  }, {
-    key: "changeInternalValue",
-    value: function changeInternalValue() {
-      var _this2 = this;
-      var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-      if (this.state.inputValue === newValue) {
-        return;
-      }
-      this.setState(function () {
-        return {
-          inputValue: newValue,
-          showClear: _this2.hasValue(newValue)
-        };
-      });
-    }
-  }, {
-    key: "clearInputValue",
-    value: function clearInputValue(event) {
-      var _this$props = this.props,
-        onChange = _this$props.onChange,
-        onClear = _this$props.onClear;
-      this.changeInternalValue('', event);
-      onChange('', event);
-      if (onClear) {
-        onClear(event);
-      }
-    }
-
-    // it is always the value from the state which is used for rendering.
-    // reason: make it possible to use the component as a controlled or uncontrolled component.
-    // https://facebook.github.io/react/docs/uncontrolled-components.html
-  }, {
-    key: "render",
-    value: function render() {
-      var filteredProps = omit(['value', 'defaultValue', 'onClear']);
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        inputClassName = _this$props2.inputClassName,
-        type = _this$props2.type,
-        hasError = _this$props2.hasError,
-        inputRef = _this$props2.inputRef,
-        autoComplete = _this$props2.autoComplete,
-        customProps = _objectWithoutProperties(_this$props2, _excluded);
-      var _this$state = this.state,
-        showClear = _this$state.showClear,
-        inputValue = _this$state.inputValue;
-      var classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-      var inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton');
-      var clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
-      var convertedType = type && type.toLowerCase();
-      var inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-      var inputProps = _objectSpread(_objectSpread({}, filteredProps(customProps)), {}, {
-        className: inputClassNames,
-        type: inputType,
-        value: inputValue,
-        onChange: this.handleChange,
-        onKeyPress: this.handleKeyPress,
-        // ref={this.props.innerRef} is the equivalent of forwardRef
-        ref: inputRef || this.props.innerRef,
-        autoComplete: autoComplete
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
-      }, children ? children(inputProps) : /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", {
-        className: clearButtonClassNames,
-        onClick: this.clearInputValue
-      }, /*#__PURE__*/React.createElement("span", {
-        className: 'clearButtonIcon rioglyph rioglyph-remove-sign'
-      })));
-    }
-  }]);
-  return ClearableInput;
-}(React.Component);
-ClearableInput.defaultProps = {
-  type: DEFAULT_TYPE,
-  className: '',
-  inputClassName: '',
-  hasError: false,
-  tabIndex: 0,
-  onChange: function onChange() {},
-  onBlur: function onBlur() {},
-  onFocus: function onFocus() {},
-  onKeyPress: function onKeyPress() {}
-};
-ClearableInput.propTypes = {
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onClear: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  type: PropTypes.oneOf(SUPPORTED_TYPES),
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  maxLength: PropTypes.number,
-  tabIndex: PropTypes.number,
-  hasError: PropTypes.bool,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  autoComplete: PropTypes.string
-};
-export default ClearableInput;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef } from 'react';
+import omit from 'lodash/fp/omit';
+import isNil from 'lodash/fp/isNil';
+import isEmpty from 'lodash/fp/isEmpty';
+import classNames from 'classnames';
+import isFunction from 'lodash/fp/isFunction';
+import noop from 'lodash/fp/noop';
+import usePrevious from '../../hooks/usePrevious';
+export const DEFAULT_TYPE = 'text';
+export const SUPPORTED_TYPES = ['text', 'password', 'email'];
+const hasValue = (value) => !isEmpty(`${value}`);
+const ClearableInput = forwardRef((props, ref) => {
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, inputClassName = '', className = '', children } = props, remainingProps = __rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "inputClassName", "className", "children"]);
+    const initialValue = value || defaultValue || '';
+    const [inputValue, setInputValue] = useState(initialValue);
+    const [showClear, setShowClear] = useState(hasValue(initialValue));
+    const isControlled = !isNil(value);
+    // Handles new input value and saves it in the local state.
+    // The value stored in the state is used for rendering.
+    const changeInternalValue = (newValue = '') => {
+        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
+        if (inputValue === newValue) {
+            return;
+        }
+        setInputValue(newValue);
+        setShowClear(hasValue(newValue));
+    };
+    // important for when used as a controlled component and value changes from the outside.
+    const previousValue = usePrevious(value);
+    if (previousValue !== value) {
+        changeInternalValue(value);
+    }
+    // only gets triggered on user interaction.
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (isControlled) {
+            onChange(newValue, event);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, event);
+        }
+    };
+    // Will be triggered on every key press but also when pressing 'Enter' for example
+    const handleKeyPress = (event) => {
+        onKeyPress(event);
+    };
+    const clearInputValue = (event) => {
+        changeInternalValue('');
+        onChange('', event);
+        if (onClear) {
+            onClear(event);
+        }
+    };
+    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', className && className);
+    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton');
+    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
+    const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
+    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
+    const inputProps = Object.assign(Object.assign({}, omit(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
+        onFocus,
+        maxLength,
+        tabIndex, ref: inputRef || ref });
+    return (_jsxs("div", Object.assign({ className: classes }, { children: [children && isFunction(children) ? children(inputProps) : _jsx("input", Object.assign({}, inputProps)), _jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+});
+export default ClearableInput;

package/components/collapse/Collapse.d.ts

@@ -0,0 +1,59 @@
+declare class Collapse extends React.Component<any, any, any> {
+    constructor(props: any);
+    state: {};
+    handleEnter(): void;
+    handleEntering(element: any): void;
+    handleEntered(): void;
+    handleExit(element: any): void;
+    handleExiting(): void;
+    handleExited(): void;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    getFullHeight(element: any): any;
+    render(): import("react/jsx-runtime").JSX.Element;
+    refTransition: Transition<HTMLElement | undefined> | null | undefined;
+}
+declare namespace Collapse {
+    namespace defaultProps {
+        const _in: boolean;
+        export { _in as in };
+        export const timeout: number;
+        export const mountOnEnter: boolean;
+        export const unmountOnExit: boolean;
+        export const appear: boolean;
+        export function onEnter(): void;
+        export function onEntering(): void;
+        export function onEntered(): void;
+        export function onExit(): void;
+        export function onExiting(): void;
+        export function onExited(): void;
+    }
+    namespace propTypes {
+        const _in_1: PropTypes.Validator<boolean>;
+        export { _in_1 as in };
+        const mountOnEnter_1: PropTypes.Requireable<boolean>;
+        export { mountOnEnter_1 as mountOnEnter };
+        const unmountOnExit_1: PropTypes.Requireable<boolean>;
+        export { unmountOnExit_1 as unmountOnExit };
+        const appear_1: PropTypes.Requireable<boolean>;
+        export { appear_1 as appear };
+        const timeout_1: PropTypes.Requireable<number>;
+        export { timeout_1 as timeout };
+        const onEnter_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEnter_1 as onEnter };
+        const onEntering_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEntering_1 as onEntering };
+        const onEntered_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEntered_1 as onEntered };
+        const onExit_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExit_1 as onExit };
+        const onExiting_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExiting_1 as onExiting };
+        const onExited_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExited_1 as onExited };
+    }
+}
+export default Collapse;
+import React from "react";
+import Transition from "react-transition-group/Transition";
+import PropTypes from "prop-types";