flipper-ui 0.26.13 → 0.26.15

package/core/Checkbox.js

@@ -54,7 +54,7 @@ var Checkbox = function Checkbox(props) {
     }));
   };
   var renderControl = function renderControl(props) {
-    return type === 'checkbox' ? renderCheckbox(props) : renderSwitch();
+    return type === 'checkbox' ? renderCheckbox(props) : renderSwitch(props);
   };
   var renderLabel = function renderLabel() {
     return typeof props.label === 'string' && props.dense ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {

package/core/ExpansionPanel.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { PaperProps } from './Paper';
-interface ExpansionPanelProps extends PaperProps {
+import { HTMLElementWithDataCy } from './types';
+export interface ExpansionPanelProps extends PaperProps {
     actions?: ReactNode;
     defaultExpanded?: boolean;
     details?: ReactNode;
@@ -11,10 +12,16 @@ interface ExpansionPanelProps extends PaperProps {
     summaryStyle?: object;
     detailsStyle?: object;
     actionsStyle?: object;
+    editStyle?: React.CSSProperties;
+    headerProps?: HTMLElementWithDataCy<HTMLDivElement>;
     helperIcon?: React.ReactNode;
+    editable?: boolean;
+    editing?: boolean;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
+    onEditClick?: () => void;
+    onSaveClick?: () => void;
     onChange?: (event?: React.ChangeEvent<Record<string, unknown>>, expanded?: boolean) => void;
 }
-declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, onHelperClick, helperIcon, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => JSX.Element;
+declare const ExpansionPanel: ({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: ExpansionPanelProps) => JSX.Element;
 export default ExpansionPanel;

package/core/ExpansionPanel.js

@@ -16,7 +16,7 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _TextField = require("./TextField");
-var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "onHelperClick", "helperIcon", "helperButtonPosition"];
+var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style", "summary", "summaryStyle", "detailsStyle", "actionsStyle", "editStyle", "onHelperClick", "onEditClick", "onSaveClick", "helperIcon", "editable", "editing", "headerProps", "helperButtonPosition"];
 var _templateObject;
 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; }
@@ -32,21 +32,59 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
     summaryStyle = _ref.summaryStyle,
     detailsStyle = _ref.detailsStyle,
     actionsStyle = _ref.actionsStyle,
+    editStyle = _ref.editStyle,
     onHelperClick = _ref.onHelperClick,
+    onEditClick = _ref.onEditClick,
+    onSaveClick = _ref.onSaveClick,
     helperIcon = _ref.helperIcon,
+    editable = _ref.editable,
+    editing = _ref.editing,
+    headerProps = _ref.headerProps,
     _ref$helperButtonPosi = _ref.helperButtonPosition,
     helperButtonPosition = _ref$helperButtonPosi === void 0 ? 'right' : _ref$helperButtonPosi,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (editable) {
+    if (!onSaveClick) {
+      throw new Error('onSaveClick is required when editable is true');
+    }
+    if (!onEditClick) {
+      throw new Error('onEditClick is required when editable is true');
+    }
+  }
   var handleClick = function handleClick(event) {
     if (onHelperClick) {
       event.stopPropagation();
       onHelperClick();
     }
   };
+  var handleEditClick = function handleEditClick(event) {
+    if (onEditClick) {
+      event.stopPropagation();
+      onEditClick();
+    }
+  };
+  var handleSaveClick = function handleSaveClick(event) {
+    if (onSaveClick) {
+      event.stopPropagation();
+      onSaveClick();
+    }
+  };
   var renderHelper = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, onHelperClick && /*#__PURE__*/_react["default"].createElement(_TextField.HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));
+  var renderEdit = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, editable && /*#__PURE__*/_react["default"].createElement(_TextField.EditBox, {
+    editing: !!editing,
+    style: editStyle,
+    onEditClick: handleEditClick,
+    onSaveClick: handleSaveClick,
+    saveButtonProps: {
+      'data-cy': 'save-button'
+    },
+    editButtonProps: {
+      'data-cy': 'edit-button'
+    }
+  }));
   return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       margin: margin,
@@ -55,7 +93,7 @@ var ExpansionPanel = function ExpansionPanel(_ref) {
   }), summary && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
     expandIcon: expandIcon,
     style: summaryStyle
-  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, null, helperButtonPosition === 'left' && renderHelper, summary, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(ExpansionPanelHeaderWrapper, headerProps, helperButtonPosition === 'left' && renderHelper, summary, renderEdit, helperButtonPosition === 'right' && renderHelper)), details && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], {
     style: detailsStyle
   }, details), actions && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelActions["default"], {
     style: actionsStyle

package/core/TextField.d.ts

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { DefaultProps } from './types';
+import { DefaultProps, HTMLElementWithDataCy } from './types';
 export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
@@ -26,6 +26,7 @@ export interface TextFieldProps extends DefaultProps {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    showEdit?: boolean;
     hasClear?: boolean;
     onClear?: () => void;
     onHelperClick?: () => void;
@@ -38,9 +39,17 @@ export interface TextFieldProps extends DefaultProps {
 interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
+interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
+    editing: boolean;
+    onEditClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onSaveClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    editButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
+    saveButtonProps?: Partial<Omit<HTMLElementWithDataCy<HTMLButtonElement>, 'color'>>;
+}
 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;
+export declare const EditBox: (props: IEditProps) => JSX.Element;
 declare const TextField: ({ margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, ...otherProps }: TextFieldProps) => JSX.Element;
 export default TextField;

package/core/TextField.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports["default"] = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.HelperBox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.useStyles = exports["default"] = exports.TextFieldWrapper = 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"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
@@ -16,6 +16,8 @@ var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
 var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
+var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
 var _IconButton2 = _interopRequireDefault(require("./IconButton"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"];
@@ -59,6 +61,24 @@ var HelperBox = function HelperBox(props) {
   })));
 };
 exports.HelperBox = HelperBox;
+var EditBox = function EditBox(props) {
+  if (props.editing) {
+    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
+      padding: "6px 2px",
+      onClick: props.onSaveClick
+    }), /*#__PURE__*/_react["default"].createElement(_Save["default"], {
+      fontSize: "small"
+    }));
+  } else {
+    return /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], (0, _extends2["default"])({}, props.editButtonProps, {
+      padding: "6px 2px",
+      onClick: props.onEditClick
+    }), /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+      fontSize: "small"
+    }));
+  }
+};
+exports.EditBox = EditBox;
 var renderEndAdornment = function renderEndAdornment(onClear) {
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
     position: "end"

package/core/types.d.ts

@@ -8,3 +8,6 @@ export interface DefaultProps {
     name?: string;
     id?: string;
 }
+export interface HTMLElementWithDataCy<T> extends React.HTMLAttributes<T> {
+    'data-cy': string;
+}

package/package.json

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

package/stories/ExpansionPanel.stories.js

@@ -4,19 +4,62 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Disabled = exports.Default = void 0;
+exports["default"] = exports.WithEditable = exports.Disabled = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _ExpansionPanel = _interopRequireDefault(require("../core/ExpansionPanel"));
 var _Typography = _interopRequireDefault(require("../core/Typography"));
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _Button = _interopRequireDefault(require("../core/Button"));
+var _TextField = _interopRequireDefault(require("../core/TextField"));
 var _default = {
   title: 'ExpansionPanel',
   component: _ExpansionPanel["default"]
 };
 exports["default"] = _default;
 var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], args);
+  var _React$useState = _react["default"].useState(args.editing),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    editing = _React$useState2[0],
+    setEditing = _React$useState2[1];
+  var _React$useState3 = _react["default"].useState(args.details),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    details = _React$useState4[0],
+    setDetails = _React$useState4[1];
+  var inputRef = _react["default"].useRef(null);
+  var handleEditClick = function handleEditClick() {
+    setEditing(true);
+  };
+  var handleSaveClick = function handleSaveClick() {
+    var _inputRef$current;
+    setDetails((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value);
+    setEditing(false);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      handleSaveClick();
+    }
+    if (event.key === 'Escape') {
+      setEditing(false);
+    }
+  };
+  var renderDetails = function renderDetails() {
+    if (editing) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        autoFocus: true,
+        inputRef: inputRef,
+        onKeyDown: handleKeyDown
+      });
+    }
+    return details;
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], (0, _extends2["default"])({}, args, {
+    editing: editing,
+    onEditClick: handleEditClick,
+    onSaveClick: handleSaveClick,
+    details: renderDetails()
+  }));
 };
 var Default = Template.bind({});
 exports.Default = Default;
@@ -42,4 +85,12 @@ Disabled.args = {
   summary: 'Dormammu',
   details: 'I have come to bargain',
   expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
+};
+var WithEditable = Template.bind({});
+exports.WithEditable = WithEditable;
+WithEditable.args = {
+  editable: true,
+  summary: 'Editable Expansion Panel',
+  details: 'This is an editable expansion panel',
+  expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
 };