flipper-ui 0.29.5 → 0.29.7

package/core/data-display/data-table/rows.js

@@ -77,6 +77,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
   var type = column.type === 'number' ? 'number' : 'text';
   var value = row[column.field];
   return /*#__PURE__*/_react["default"].createElement(_textField["default"], {
+    options: column.options,
     defaultValue: value,
     type: type,
     fullWidth: true,

package/core/data-display/data-table/types.d.ts

@@ -1,3 +1,4 @@
+import { IOption } from '@/core/inputs/text-field';
 import type { CSSProperties, FunctionComponent } from 'react';
 export type RecordUnknown = Record<string, unknown>;
 export type StackView = RecordUnknown;
@@ -29,6 +30,7 @@ interface ColumnSpecDefault<D extends Data> extends ColumnSpecBase<RenderCellPro
     type: ColumnType;
     field: keyof D;
     editable?: boolean;
+    options?: string | IOption[];
     getValue?(value: unknown): string;
 }
 export type ActionsCellProps<D extends Data> = {

package/core/inputs/text-field/index.d.ts

@@ -1,8 +1,15 @@
 import { TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
 import React, { ChangeEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent } from 'react';
 import { DefaultProps } from '../../types';
+export interface IOption {
+    label: string;
+    name?: string;
+    disabled?: boolean;
+    value: string | number;
+}
 export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'margin' | 'variant'> {
     autoComplete?: string;
+    options?: IOption[] | string;
     autoFocus?: boolean;
     defaultValue?: string | number;
     disabled?: boolean;
@@ -50,7 +57,10 @@ interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
 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) => import("@material-ui/styles").ClassNameMap<"input" | "iconOutlined" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline">;
+export declare const coerceComboOptions: (input: string) => IOption[];
+export declare const toLispCase: (name: string) => string;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
+export declare const renderOptions: (options: TextFieldProps['options']) => "" | JSX.Element[] | undefined;
 export declare const EditBox: (props: IEditProps) => JSX.Element;
-export declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps) => JSX.Element;
+export declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, children, ...otherProps }: TextFieldProps) => JSX.Element;
 export default TextField;

package/core/inputs/text-field/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.TextField = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
+exports.useStyles = exports.toLispCase = exports.renderOptions = exports["default"] = exports.coerceComboOptions = exports.TextFieldWrapper = exports.TextField = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -12,6 +12,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
 var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
@@ -20,7 +21,15 @@ var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
 var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _excluded = ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"];
+var _when = _interopRequireDefault(require("ramda/es/when"));
+var _is = _interopRequireDefault(require("ramda/es/is"));
+var _pipe = _interopRequireDefault(require("ramda/es/pipe"));
+var _split = _interopRequireDefault(require("ramda/es/split"));
+var _map = _interopRequireDefault(require("ramda/es/map"));
+var _zipObj = _interopRequireDefault(require("ramda/es/zipObj"));
+var _reject = _interopRequireDefault(require("ramda/es/reject"));
+var _propEq = _interopRequireDefault(require("ramda/es/propEq"));
+var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "children"];
 var _templateObject, _templateObject2, _templateObject3;
 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) { (0, _defineProperty2["default"])(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; }
@@ -52,6 +61,14 @@ var useStyles = (0, _styles.makeStyles)({
   }
 });
 exports.useStyles = useStyles;
+var coerceComboOptions = (0, _when["default"])((0, _is["default"])(String), (0, _pipe["default"])((0, _split["default"])(';'), (0, _map["default"])((0, _pipe["default"])((0, _split["default"])('='), (0, _zipObj["default"])(['value', 'label']))), (0, _reject["default"])((0, _propEq["default"])('value', ''))));
+exports.coerceComboOptions = coerceComboOptions;
+var toLispCase = function toLispCase(name) {
+  return name.replace(/([a-z])([A-Z])/g, function (_, first, second) {
+    return first + '-' + second;
+  }).toLowerCase();
+};
+exports.toLispCase = toLispCase;
 var HelperBox = function HelperBox(props) {
   return /*#__PURE__*/_react["default"].createElement(Helper, {
     role: "helper-box"
@@ -62,7 +79,23 @@ var HelperBox = function HelperBox(props) {
     color: "primary"
   })));
 };
+/* Jest-ignore-start ignore next */
 exports.HelperBox = HelperBox;
+var renderOptions = function renderOptions(options) {
+  console.log(options);
+  var comboOptions = typeof options === 'string' ? coerceComboOptions(options) : options;
+  return options &&
+  // @ts-ignore
+  comboOptions.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      id: toLispCase("option-".concat(option.value)),
+      key: option.value,
+      disabled: option.disabled,
+      value: option.value
+    }, option.label);
+  });
+};
+exports.renderOptions = renderOptions;
 var EditBox = function EditBox(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     role: "edit-box"
@@ -93,7 +126,8 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
   })));
 };
 var TextField = function TextField(_ref) {
-  var margin = _ref.margin,
+  var options = _ref.options,
+    margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
@@ -113,6 +147,7 @@ var TextField = function TextField(_ref) {
     fullWidth = _ref.fullWidth,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var clearStyle = (0, _styles.makeStyles)({
     iconOutlined: {
@@ -134,6 +169,7 @@ var TextField = function TextField(_ref) {
   };
   var Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper;
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+    select: !!(options !== null && options !== void 0 && options.length),
     fullWidth: fullWidth,
     autoComplete: autoComplete,
     error: error,
@@ -161,7 +197,7 @@ var TextField = function TextField(_ref) {
         iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
     }, endAdornment), SelectProps)
-  }, otherProps)), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
+  }, otherProps), options ? renderOptions(options) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));

package/core/inputs/text-field/text-field.stories.d.ts

@@ -5,3 +5,4 @@ export declare const withInputAdornment: any;
 export declare const withHelperButton: any;
 export declare const withSelect: () => JSX.Element;
 export declare const useWithSelectAndClear: () => JSX.Element;
+export declare const combobox: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.29.5",
+  "version": "0.29.7",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",

package/test/mocks/text-field-options-mock.d.ts

@@ -0,0 +1,8 @@
+import { IOption, TextFieldProps } from '@/core/inputs/text-field';
+interface IProps {
+    initialOption?: string;
+    inputProps?: TextFieldProps;
+    options?: IOption[] | string;
+}
+declare const Default: ({ inputProps, initialOption, options }: IProps) => JSX.Element;
+export default Default;

package/test/mocks/text-field-options-mock.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _textField = _interopRequireDefault(require("../../core/inputs/text-field"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Default = function Default(_ref) {
+  var inputProps = _ref.inputProps,
+    initialOption = _ref.initialOption,
+    options = _ref.options;
+  var _React$useState = React.useState(initialOption ? initialOption : ''),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
+  var handleClear = function handleClear() {
+    setValue('');
+  };
+  return /*#__PURE__*/React.createElement(_textField["default"], (0, _extends2["default"])({
+    value: value,
+    onChange: handleChange,
+    onClear: handleClear
+  }, inputProps, {
+    options: options
+  }));
+};
+var _default = Default;
+exports["default"] = _default;