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

package/components/radiobutton/RadioButton.js

@@ -1,139 +1,85 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"];
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import classname from 'classnames';
-var RadioButtonIcon = function RadioButtonIcon(props) {
-  var icon = props.icon,
-    iconSize = props.iconSize,
-    iconLabelPosition = props.iconLabelPosition,
-    text = props.text;
-  var iconStyles = {
-    width: "".concat(iconSize, "px"),
-    height: "".concat(iconSize, "px"),
-    fontSize: "".concat(iconSize, "px"),
-    lineHeight: "".concat(iconSize, "px")
-  };
-  return /*#__PURE__*/React.createElement("span", {
-    className: "radio-icon label-".concat(iconLabelPosition)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph ".concat(icon),
-    style: iconStyles
-  }), /*#__PURE__*/React.createElement("span", {
-    className: 'radio-label'
-  }, text));
-};
-var RadioButton = function RadioButton(props) {
-  var checked = props.checked,
-    children = props.children,
-    className = props.className,
-    custom = props.custom,
-    defaultChecked = props.defaultChecked,
-    disabled = props.disabled,
-    icon = props.icon,
-    iconLabelPosition = props.iconLabelPosition,
-    iconSize = props.iconSize,
-    inline = props.inline,
-    inputRef = props.inputRef,
-    label = props.label,
-    name = props.name,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    right = props.right,
-    tabIndex = props.tabIndex,
-    value = props.value,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var labelRef = useRef();
-  var handleToggleKeyDown = function handleToggleKeyDown(event) {
-    switch (event.keyCode) {
-      case 32:
-        // toggle on space
-        toggle(event);
-        break;
-      case 13:
-        // open on enter
-        toggle(event);
-        break;
-      default:
-        break;
-    }
-  };
-  var toggle = function toggle(event) {
-    event.preventDefault();
-    if (disabled) {
-      return;
-    }
-
-    // Controlled case - uses "onChange()" instead of "onClick()" callback
-    if (checked !== null && checked !== undefined) {
-      onChange(event);
-      return;
-    }
-
-    // Uncontrolled case - set the input checked or unchecked
-    labelRef.current.firstChild.checked = !labelRef.current.firstChild.checked;
-    onClick(event);
-  };
-  var text = label || children;
-  var labelClassnames = classname('radio', inline && 'radio-inline', className);
-  var inputClassnames = classname(right && 'icon-right', className);
-  var renderCustomIcon = !!icon;
-  var renderCustomContent = custom && children;
-  var renderDefault = !icon && !custom;
-  return /*#__PURE__*/React.createElement("label", _extends({}, remainingProps, {
-    className: labelClassnames,
-    tabIndex: tabIndex,
-    onKeyDown: handleToggleKeyDown,
-    ref: labelRef
-  }), /*#__PURE__*/React.createElement("input", {
-    type: 'radio',
-    defaultChecked: defaultChecked,
-    checked: checked,
-    disabled: disabled,
-    className: inputClassnames,
-    ref: inputRef,
-    onClick: onClick,
-    onChange: onChange,
-    name: name,
-    value: value
-  }), renderCustomIcon && /*#__PURE__*/React.createElement(RadioButtonIcon, {
-    icon: icon,
-    iconSize: iconSize,
-    iconLabelPosition: iconLabelPosition,
-    text: text
-  }), renderDefault && /*#__PURE__*/React.createElement("span", {
-    className: 'radio-text'
-  }, /*#__PURE__*/React.createElement("span", null, text)), renderCustomContent && children);
-};
-RadioButton.ICON_LABEL_VERTICAL = 'vertical';
-RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
-RadioButton.defaultProps = {
-  inline: false,
-  disabled: false,
-  right: false,
-  custom: false,
-  tabIndex: 0,
-  icon: '',
-  iconSize: 16,
-  iconLabelPosition: RadioButton.ICON_LABEL_VERTICAL,
-  onClick: function onClick() {}
-};
-RadioButton.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  icon: PropTypes.string,
-  iconSize: PropTypes.number,
-  iconLabelPosition: PropTypes.oneOf([RadioButton.ICON_LABEL_VERTICAL, RadioButton.ICON_LABEL_HORIZONTAL]),
-  onClick: PropTypes.func,
-  onChange: PropTypes.func,
-  defaultChecked: PropTypes.bool,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  inline: PropTypes.bool,
-  right: PropTypes.bool,
-  custom: PropTypes.bool,
-  inputRef: PropTypes.func,
-  tabIndex: PropTypes.number
-};
-export default RadioButton;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+const RadioButtonIcon = props => {
+    const { icon, iconSize, iconLabelPosition, text } = props;
+    const iconStyles = {
+        width: `${iconSize}px`,
+        height: `${iconSize}px`,
+        fontSize: `${iconSize}px`,
+        lineHeight: `${iconSize}px`,
+    };
+    return (_jsxs("span", Object.assign({ className: `radio-icon label-${iconLabelPosition}` }, { children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", Object.assign({ className: 'radio-label' }, { children: text }))] })));
+};
+const RadioButton = props => {
+    const { checked, children, className, custom, defaultChecked, disabled, icon, iconLabelPosition, iconSize, inline, inputRef, label, name, onChange, onClick, right, tabIndex, value } = props, remainingProps = __rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"]);
+    const labelRef = useRef();
+    const handleToggleKeyDown = event => {
+        switch (event.key) {
+            case ' ':
+                // toggle on space
+                toggle(event);
+                break;
+            case 'Enter':
+                // open on enter
+                toggle(event);
+                break;
+            default:
+                break;
+        }
+    };
+    const toggle = event => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        // Controlled case - uses "onChange()" instead of "onClick()" callback
+        if (checked !== null && checked !== undefined) {
+            onChange(event);
+            return;
+        }
+        // Uncontrolled case - set the input checked or unchecked
+        labelRef.current.firstChild.checked = !labelRef.current.firstChild.checked;
+        onClick(event);
+    };
+    const text = label || children;
+    const labelClassnames = classNames('radio', inline && 'radio-inline', className);
+    const inputClassnames = classNames(right && 'icon-right', className);
+    const renderCustomIcon = !!icon;
+    const renderCustomContent = custom && children;
+    const renderDefault = !icon && !custom;
+    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", Object.assign({ className: 'radio-text' }, { children: _jsx("span", { children: text }) }))), renderCustomContent && children] })));
+};
+RadioButton.ICON_LABEL_VERTICAL = 'vertical';
+RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
+RadioButton.defaultProps = {
+    inline: false,
+    disabled: false,
+    right: false,
+    custom: false,
+    tabIndex: 0,
+    icon: '',
+    iconSize: 16,
+    iconLabelPosition: RadioButton.ICON_LABEL_VERTICAL,
+    onClick: () => { },
+};
+RadioButton.propTypes = {
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    icon: PropTypes.string,
+    iconSize: PropTypes.number,
+    iconLabelPosition: PropTypes.oneOf([RadioButton.ICON_LABEL_VERTICAL, RadioButton.ICON_LABEL_HORIZONTAL]),
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+    defaultChecked: PropTypes.bool,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
+    inline: PropTypes.bool,
+    right: PropTypes.bool,
+    custom: PropTypes.bool,
+    inputRef: PropTypes.func,
+    tabIndex: PropTypes.number,
+};
+export default RadioButton;

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];
+export type NoteProps = {
+    version: string;
+    note: {
+        date: string;
+        content: NoteContent;
+    };
+};
+export type ReleaseNotesProps = {
+    /**
+     * Translated release notes of the following shape:
+     * @example
+     * {
+            "0.1.2": {
+                date: '23.07.2018',
+                content: (
+                    <div className='padding-left-15'>
+                        Map view within the tour history table
+                        • Modern map design as used in the Beta of the fleet monitor
+                        • Works with all event types
+                    </div>
+                ),
+            }
+        }
+     */
+    releaseNotes: {
+        [key: string]: {
+            date: string;
+            content: NoteContent;
+        };
+    };
+};
+declare const ReleaseNotes: (props: ReleaseNotesProps) => import("react/jsx-runtime").JSX.Element;
+export default ReleaseNotes;

package/components/releaseNotes/ReleaseNotes.js

@@ -1,56 +1,17 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from 'react';
-import PropTypes from 'prop-types';
-import isArray from 'lodash/fp/isArray';
-import map from 'lodash/fp/map';
-import toPairs from 'lodash/fp/toPairs';
-var renderList = function renderList(notes) {
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "margin-bottom-0 margin-left-5 padding-left-25"
-  }, notes);
-};
-var renderNode = function renderNode(content) {
-  return /*#__PURE__*/React.createElement("div", null, content);
-};
-var getNotes = function getNotes(content, version) {
-  return map(function (point) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: "".concat(version, "-note-").concat(Math.random())
-    }, point);
-  }, content);
-};
-var renderNotes = function renderNotes(note, version) {
-  var date = note.date,
-    content = note.content;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "panel panel-default",
-    key: "".concat(version, "-note")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "panel-heading"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "display-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "text-size-16 text-medium"
-  }, "".concat(version)), /*#__PURE__*/React.createElement("span", {
-    className: "text-muted text-thin"
-  }, date))), /*#__PURE__*/React.createElement("div", {
-    className: "panel-body white-space-pre-line"
-  }, isArray(content) ? renderList(getNotes(content, version)) : renderNode(content)));
-};
-var getReleases = function getReleases(_ref) {
-  var releaseNotes = _ref.releaseNotes;
-  return map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      note = _ref3[1];
-    return renderNotes(note, key);
-  }, toPairs(releaseNotes));
-};
-var ReleaseNotes = function ReleaseNotes(props) {
-  return /*#__PURE__*/React.createElement("div", null, getReleases(props));
-};
-ReleaseNotes.defaultProps = {};
-ReleaseNotes.propTypes = {
-  releaseNotes: PropTypes.object
-};
-export default ReleaseNotes;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import isArray from 'lodash/fp/isArray';
+import map from 'lodash/fp/map';
+import toPairs from 'lodash/fp/toPairs';
+const Note = (props) => {
+    const { note, version } = props;
+    const { date, content } = note;
+    return (_jsxs("div", Object.assign({ className: 'panel panel-default' }, { children: [_jsx("div", Object.assign({ className: 'panel-heading' }, { children: _jsxs("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [_jsx("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), _jsx("span", Object.assign({ className: 'text-muted text-thin' }, { children: date }))] })) })), _jsx("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: isArray(content) ? (_jsx("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : (_jsx("div", { children: content })) }))] }), `${version}-note`));
+};
+const ReleaseNotes = (props) => {
+    const { releaseNotes } = props, remainingProps = __rest(props, ["releaseNotes"]);
+    return (_jsx("div", Object.assign({}, remainingProps, { children: map(([key, note]) => (_jsx(Note, { note: note, version: key }, key)), toPairs(releaseNotes)) })));
+};
+export default ReleaseNotes;

package/components/resizer/Resizer.d.ts

@@ -0,0 +1,58 @@
+import { type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';
+declare const HORIZONTAL = "x";
+declare const VERTICAL = "y";
+declare const LEFT = "left";
+declare const RIGHT = "right";
+declare const TOP = "top";
+declare const BOTTOM = "bottom";
+export type ResizerProps = {
+    /**
+     * Defines where the resize handle is positioned relative to the element to resize.
+     *
+     * Possible values are:
+     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or
+     * `left`, `right`, `top`, `bottom`.
+     */
+    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
+    /**
+     * Defines on which axis to resize.
+     *
+     * Possible values are:
+     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.
+     */
+    direction?: typeof HORIZONTAL | typeof VERTICAL;
+    /**
+     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.
+     * @param event
+     * @returns
+     */
+    onResizeStart?: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback when the resize handle is moved. The function returns the distant between the last
+     * position and the mouse movement. Means you can either subtract or add this diff to the elements
+     * width you want to change.
+     * @param diff
+     * @returns
+     */
+    onResize?: (diff: number) => void;
+    /**
+     * Callback when the resize ends, means when the handle is released. It returns the respective event.
+     * @param event
+     * @returns
+     */
+    onResizeEnd?: (event: Event) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const Resizer: {
+    (props: PropsWithChildren<ResizerProps>): import("react/jsx-runtime").JSX.Element;
+    HORIZONTAL: "x";
+    VERTICAL: "y";
+    LEFT: "left";
+    RIGHT: "right";
+    TOP: "top";
+    BOTTOM: "bottom";
+};
+export default Resizer;