flipper-ui 0.25.0 → 0.25.3

package/core/PinInput.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var removeValuesFromArray = function removeValuesFromArray(valuesArray, value) {
+  var valueIndex = valuesArray.findIndex(function (entry) {
+    return entry === value;
+  });
+
+  if (valueIndex === -1) {
+    return;
+  }
+
+  valuesArray.splice(valueIndex, 1);
+};
+
+var PIN_MIN_VALUE = 0;
+var PIN_MAX_VALUE = 9;
+var BACKSPACE_KEY = 'Backspace';
+
+var PinInput = function PinInput(_ref) {
+  var pinLength = _ref.pinLength,
+      pin = _ref.pin,
+      setPin = _ref.setPin,
+      onPinChanged = _ref.onPinChanged,
+      validationResult = _ref.validationResult,
+      isValidating = _ref.isValidating,
+      size = _ref.size;
+  var inputRefs = (0, _react.useRef)([]);
+
+  var changePinFocus = function changePinFocus(pinIndex) {
+    var ref = inputRefs.current[pinIndex];
+
+    if (ref) {
+      ref.focus();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    changePinFocus(0);
+  }, [isValidating]);
+
+  var onPaste = function onPaste(event) {
+    var pastedValue = event.clipboardData.getData('text/plain');
+    var splitValues = pastedValue.split('');
+    var intValues = [];
+
+    var _iterator = _createForOfIteratorHelper(splitValues),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var value = _step.value;
+        intValues.push(parseInt(value));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    setPin(intValues);
+    changePinFocus(intValues.length - 1);
+  };
+
+  var _onChange = function onChange(event, index) {
+    if (event.target.value.length > 1) {
+      return;
+    }
+
+    var previousValue = event.target.defaultValue;
+    var valuesArray = event.target.value.split('');
+    removeValuesFromArray(valuesArray, previousValue);
+    var value = valuesArray.pop();
+
+    if (!value) {
+      return;
+    }
+
+    var pinNumber = Number(value.trim());
+
+    if (isNaN(pinNumber) || value.length === 0) {
+      return;
+    }
+
+    if (pinNumber >= PIN_MIN_VALUE && pinNumber <= PIN_MAX_VALUE) {
+      onPinChanged(pinNumber, index);
+
+      if (index < pinLength - 1) {
+        changePinFocus(index + 1);
+      }
+    }
+  };
+
+  var _onKeyDown = function onKeyDown(event, index) {
+    var keyboardKeyCode = event.nativeEvent.code;
+
+    if (keyboardKeyCode !== BACKSPACE_KEY) {
+      return;
+    }
+
+    if (pin[index] === undefined) {
+      changePinFocus(index - 1);
+    } else {
+      onPinChanged(undefined, index);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, Array.from({
+    length: pinLength
+  }, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      disabled: isValidating,
+      variant: "outlined",
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event, index);
+      },
+      onPaste: onPaste,
+      color: "primary",
+      error: validationResult,
+      style: {
+        width: size === 'small' ? '40px' : '40px',
+        height: size === 'small' ? '30px' : '40px',
+        marginInline: size === 'small' ? '5px' : '10px'
+      },
+      InputProps: {
+        style: {
+          width: size === 'small' ? '40px' : '45px',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          fontSize: size === 'small' ? '16px' : '20px',
+          padding: 'auto'
+        }
+      },
+      inputRef: function inputRef(el) {
+        inputRefs.current[index] = el;
+      },
+      key: index,
+      onChange: function onChange(event) {
+        _onChange(event, index);
+      },
+      value: pin[index] || ''
+    });
+  })));
+};
+
+var _default = PinInput;
+exports["default"] = _default;

package/core/Progress.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 interface ILinear {
     color?: 'primary' | 'secondary';
     valueBuffer?: number;
@@ -16,9 +16,9 @@ interface ICircular {
     color?: 'primary' | 'secondary' | 'inherit';
     variant?: 'determinate' | 'indeterminate' | 'static';
 }
-interface IProps extends IDefault {
+interface ProgressProps extends DefaultProps {
     value?: number;
     linear?: boolean;
 }
-declare const Progress: FC<IProps & ICircular & ILinear>;
+declare const Progress: FC<ProgressProps & ICircular & ILinear>;
 export default Progress;

package/core/Radio.d.ts

@@ -1,11 +1,11 @@
 import { ChangeEvent, FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface RadioProps extends DefaultProps {
     checked?: boolean;
     color?: 'primary' | 'secondary' | 'default';
     value?: string;
     disabled?: boolean;
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
 }
-declare const Radio: FC<IProps>;
+declare const Radio: FC<RadioProps>;
 export default Radio;

package/core/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, FC, ReactNode } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface RadioGroupProps extends DefaultProps {
     row?: boolean;
     title?: ReactNode;
     name: string;
@@ -8,12 +8,12 @@ interface IProps extends IDefault {
     disabled?: boolean;
     spacing?: 'default' | 'equal';
     options?: IOption[];
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 interface IOption {
     value: string;
     label?: ReactNode;
     disabled?: boolean;
 }
-declare const RadioGroup: FC<IProps>;
+declare const RadioGroup: FC<RadioGroupProps>;
 export default RadioGroup;

package/core/Select.d.ts

@@ -1,12 +1,14 @@
 import { ChangeEvent, FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface SelectProps extends DefaultProps {
     autoWidth?: boolean;
     value?: string | number;
     multiple?: boolean;
     variant?: 'standard' | 'outlined' | 'filled';
+    hasClear?: boolean;
+    onClear?: () => void;
     onClose?: () => void;
     onChange?: (event: ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void;
 }
-declare const Select: FC<IProps>;
+declare const Select: FC<SelectProps>;
 export default Select;

package/core/Select.js

@@ -13,26 +13,38 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
-var _react = _interopRequireDefault(require("react"));
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
 
 var _styles = require("@material-ui/core/styles");
 
+var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
+
+var _react = _interopRequireDefault(require("react"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    root: {
-      padding: '10px 24px 10px 12px'
-    },
-    iconOutlined: {
-      right: '2px'
+var iconStyle = {
+  right: '2px'
+};
+
+var renderEndAdornment = function renderEndAdornment(onClear) {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+    position: "end"
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClear,
+    size: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
+    style: {
+      fontSize: '15px'
     }
-  };
-});
+  })));
+};
 
 var Select = function Select(_ref) {
   var children = _ref.children,
@@ -40,11 +52,28 @@ var Select = function Select(_ref) {
       style = _ref$style === void 0 ? {} : _ref$style,
       margin = _ref.margin,
       padding = _ref.padding,
+      hasClear = _ref.hasClear,
+      onClear = _ref.onClear,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["children", "style", "margin", "padding", "variant"]);
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["children", "style", "margin", "padding", "hasClear", "onClear", "variant"]);
+  var useStyles = (0, _styles.makeStyles)(function () {
+    return {
+      root: {
+        padding: "10px 24px 10px ".concat(hasClear ? '20' : '12', "px")
+      },
+      iconOutlined: hasClear ? _objectSpread(_objectSpread({}, iconStyle), {}, {
+        position: 'relative',
+        marginLeft: '-20px'
+      }) : iconStyle
+    };
+  });
   var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Select["default"], (0, _extends2["default"])({
+  var hasValue = !!otherProps.value;
+  var endAdornment = hasValue && hasClear ? {
+    endAdornment: renderEndAdornment(onClear)
+  } : {};
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, endAdornment, {
     variant: variant,
     classes: {
       root: classes.root,

package/core/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-import { IProps as IButtonProps } from './Button';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+import { ButtonProps } from './Button';
+interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;
     showButton?: boolean;
@@ -14,8 +14,8 @@ interface IProps extends IDefault {
     top?: number | string;
     paperClasses?: object;
     name?: string;
-    ButtonProps?: IButtonProps;
+    ButtonProps?: ButtonProps;
     onToggle: () => void;
 }
-declare const Sidebar: FC<IProps>;
+declare const Sidebar: FC<SidebarProps>;
 export default Sidebar;

package/core/Sidebar.js

@@ -115,7 +115,8 @@ var Sidebar = function Sidebar(_ref) {
       variant = _ref$variant === void 0 ? 'permanent' : _ref$variant,
       ButtonProps = _ref.ButtonProps,
       onToggle = _ref.onToggle,
-      children = _ref.children;
+      children = _ref.children,
+      name = _ref.name;
   var classes = useStyles();
 
   var renderAction = function renderAction() {

package/core/Slide.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface SlideProps extends DefaultProps {
     in: boolean;
     direction: 'left' | 'right' | 'up' | 'down';
     timeout?: number | {
@@ -9,5 +9,5 @@ interface IProps extends IDefault {
     };
     children?: React.ReactElement<{}>;
 }
-declare const Slide: ({ children, direction, margin, padding, style, ...otherProps }: IProps) => JSX.Element;
+declare const Slide: ({ children, direction, margin, padding, style, ...otherProps }: SlideProps) => JSX.Element;
 export default Slide;

package/core/Slider.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { SliderProps } from '@material-ui/core/Slider';
-import { IDefault } from './Advertise';
-interface IProps {
+import { DefaultProps } from './types';
+interface ISliderProps {
     defaultValue?: number | number[];
 }
-declare const Slider: FC<Omit<SliderProps, 'defaultValue'> & IDefault & IProps>;
+declare const Slider: FC<Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps>;
 export default Slider;

package/core/Snackbar.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, FC, FunctionComponent } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
-interface IProps extends IDefault {
+interface SnackBarProps extends DefaultProps {
     autoHide?: number;
     message: ReactNode;
     open: boolean;
@@ -21,5 +21,5 @@ interface IProps extends IDefault {
     onClose?(): void;
     onClick?(): void;
 }
-declare const SnackBar: FC<IProps>;
+declare const SnackBar: FC<SnackBarProps>;
 export default SnackBar;

package/core/Stepper.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;
     bottomLabel?: boolean;
@@ -10,7 +10,7 @@ declare type TStep = {
     label: JSX.Element | string;
     icon: JSX.Element | ((active?: boolean) => JSX.Element);
 };
-declare class Stepper extends Component<IProps, {}> {
+declare class Stepper extends Component<StepperProps, {}> {
     static defaultProps: {
         active: number;
     };

package/core/Tab.d.ts

@@ -1,13 +1,13 @@
 import { Component } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface TabProps extends DefaultProps {
     disabled?: boolean;
     icon?: string | JSX.Element;
     label?: string;
     value?: unknown;
     disableRipple?: boolean;
 }
-declare class Tab extends Component<IProps> {
+declare class Tab extends Component<TabProps> {
     static defaultProps: {
         disabled: boolean;
         margin: string;

package/core/Table.d.ts

@@ -1,8 +1,8 @@
-import { TableProps } from '@material-ui/core/Table';
+import { TableProps as MuiTableProps } from '@material-ui/core/Table';
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
-    spacing?: TableProps['padding'];
+import { DefaultProps } from './types';
+interface TableProps extends DefaultProps {
+    spacing?: MuiTableProps['padding'];
 }
-declare const Table: FC<TableProps & IProps>;
+declare const Table: FC<MuiTableProps & TableProps>;
 export default Table;

package/core/TableBody.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-declare const TableBody: FC<IDefault>;
+import { DefaultProps } from './types';
+declare const TableBody: FC<DefaultProps>;
 export default TableBody;

package/core/TableCell.d.ts

@@ -1,13 +1,13 @@
-import { TableCellProps } from '@material-ui/core/TableCell';
+import { TableCellProps as MuiTableCellProps } from '@material-ui/core/TableCell';
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { Omit } from 'ramda';
-interface IProps extends IDefault {
+interface TableCellProps extends DefaultProps {
     numeric?: boolean;
     variant?: 'head' | 'body' | 'footer';
-    spacing?: TableCellProps['padding'];
+    spacing?: MuiTableCellProps['padding'];
     padding?: number | string;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
 }
-declare const TableCell: FC<Omit<TableCellProps, 'padding'> & IProps>;
+declare const TableCell: FC<Omit<MuiTableCellProps, 'padding'> & TableCellProps>;
 export default TableCell;

package/core/TableHead.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault, ISort {
+import { DefaultProps } from './types';
+interface TableHeadProps extends DefaultProps, ISort {
     color?: 'primary' | 'secondary' | 'default' | 'inherit';
     classes: {
         default: string;
@@ -19,5 +19,5 @@ interface ISort {
     onSort?(name: string): void;
 }
 export declare const SortContext: React.Context<ISort>;
-declare const _default: React.ComponentType<Pick<React.PropsWithChildren<IProps>, "children" | "style" | "padding" | "margin" | "className" | "name" | "id" | "color" | "active" | "direction" | "onSort"> & import("@material-ui/core/styles").StyledComponentProps<"inherit" | "default" | "primary" | "secondary">>;
+declare const _default: React.ComponentType<Pick<React.PropsWithChildren<TableHeadProps>, "children" | "style" | "padding" | "margin" | "className" | "name" | "id" | "color" | "active" | "direction" | "onSort"> & import("@material-ui/core/styles").StyledComponentProps<"inherit" | "default" | "primary" | "secondary">>;
 export default _default;

package/core/TableRow.d.ts

@@ -1,11 +1,11 @@
-import { TableRowProps } from '@material-ui/core/TableRow';
+import { TableRowProps as MuiTableRowProps } from '@material-ui/core/TableRow';
 import { FC, MouseEvent } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface TableRowProps extends DefaultProps {
     selected?: boolean;
     hover?: boolean;
     background?: string;
     onClick?: (event: MouseEvent<HTMLTableRowElement>) => void;
 }
-declare const TableRow: FC<TableRowProps & IProps>;
+declare const TableRow: FC<MuiTableRowProps & TableRowProps>;
 export default TableRow;

package/core/Tabs.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface TabsProps extends DefaultProps {
     centered?: boolean;
     value: string | number;
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
@@ -18,5 +18,5 @@ interface IClasses {
         indicator: string;
     };
 }
-declare const Tabs: FC<IProps & IClasses>;
+declare const Tabs: FC<TabsProps & IClasses>;
 export default Tabs;

package/core/TextField.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, KeyboardEvent, FC, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { IDefault } from './Advertise';
-export interface IProps extends IDefault {
+import { DefaultProps } from './types';
+export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
     defaultValue?: string | number;
@@ -26,18 +26,20 @@ export interface IProps extends IDefault {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    hasClear?: boolean;
+    onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: KeyboardEvent) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
 }
-declare type TProps = IProps;
-interface IHelperProps extends Pick<TProps, 'helperIcon'> {
+interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
-declare const TextField: FC<TProps>;
+declare const TextField: FC<TextFieldProps>;
 export default TextField;