flipper-ui 0.25.1 → 0.25.2

package/core/TextField.d.ts

@@ -26,6 +26,8 @@ export interface TextFieldProps extends DefaultProps {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    hasClear?: boolean;
+    onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -35,8 +37,9 @@ export interface TextFieldProps extends DefaultProps {
 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<TextFieldProps>;
 export default TextField;

package/core/TextField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.HelperBox = exports.TextFieldWrapper = exports.useStyles = void 0;
+exports["default"] = exports.HelperBox = exports.useStyles = exports.StaticTextFieldWrapper = exports.TextFieldWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,15 +15,21 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+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 _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 _IconButton = _interopRequireDefault(require("./IconButton"));
+var _IconButton2 = _interopRequireDefault(require("./IconButton"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -31,8 +37,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;  \n    }\n    :hover button {\n        display: flex;\n    }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -51,6 +67,15 @@ function _templateObject() {
   return data;
 }
 
+var Helper = _styledComponents["default"].div(_templateObject());
+
+var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
+
+exports.TextFieldWrapper = TextFieldWrapper;
+
+var StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject3());
+
+exports.StaticTextFieldWrapper = StaticTextFieldWrapper;
 var useStyles = (0, _styles.makeStyles)({
   input: {
     fontSize: '14px',
@@ -75,14 +100,8 @@ var useStyles = (0, _styles.makeStyles)({
 });
 exports.useStyles = useStyles;
 
-var Helper = _styledComponents["default"].div(_templateObject());
-
-var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
-
-exports.TextFieldWrapper = TextFieldWrapper;
-
 var HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_Help["default"], {
@@ -92,6 +111,19 @@ var HelperBox = function HelperBox(props) {
 
 exports.HelperBox = HelperBox;
 
+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 TextField = function TextField(_ref) {
   var margin = _ref.margin,
       padding = _ref.padding,
@@ -111,8 +143,22 @@ var TextField = function TextField(_ref) {
       onHelperClick = _ref.onHelperClick,
       helperIcon = _ref.helperIcon,
       fullWidth = _ref.fullWidth,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth"]);
+      hasClear = _ref.hasClear,
+      onClear = _ref.onClear,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"]);
+  var clearStyle = (0, _styles.makeStyles)({
+    iconOutlined: {
+      position: 'relative',
+      right: '2px',
+      marginLeft: '-20px'
+    }
+  });
+  var hasValue = !!otherProps.value;
+  var endAdornment = hasValue && hasClear ? {
+    endAdornment: renderEndAdornment(onClear)
+  } : {};
   var classes = useStyles();
+  var clearClass = clearStyle();
 
   var handleClick = function handleClick() {
     if (onHelperClick) {
@@ -120,7 +166,8 @@ var TextField = function TextField(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(TextFieldWrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+  var Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     fullWidth: fullWidth,
     autoComplete: autoComplete,
     error: error,
@@ -140,11 +187,11 @@ var TextField = function TextField(_ref) {
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
       }
     }, InputProps),
-    SelectProps: _objectSpread({
+    SelectProps: _objectSpread(_objectSpread({
       classes: {
-        iconOutlined: classes.iconOutlined
+        iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
-    }, SelectProps)
+    }, endAdornment), SelectProps)
   }, otherProps)), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.25.1",
+    "version": "0.25.2",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.vercel.app",

package/stories/TextField.stories.js

@@ -1,13 +1,17 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withSelect = exports.withHelperButton = exports.withInputAdornment = exports.Default = exports["default"] = void 0;
+exports.withSelectAndClear = exports.withSelect = exports.withHelperButton = exports.withInputAdornment = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _TextField = _interopRequireDefault(require("../core/TextField"));
 
@@ -97,4 +101,51 @@ var withSelect = function withSelect() {
   })));
 };
 
-exports.withSelect = withSelect;
+exports.withSelect = withSelect;
+
+var withSelectAndClear = function withSelectAndClear() {
+  var _useState = (0, _react.useState)('fable'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var onClear = function onClear() {
+    setValue('');
+  };
+
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    select: true,
+    value: value,
+    hasClear: true,
+    onClear: onClear,
+    onChange: handleChange
+  }, [{
+    label: null,
+    value: ''
+  }, {
+    label: 'Elm',
+    value: 'elm'
+  }, {
+    label: 'ReasonML',
+    value: 'reasonml'
+  }, {
+    label: 'Purescript',
+    value: 'purescript'
+  }, {
+    label: 'Fable',
+    value: 'fable'
+  }].map(function (_ref3) {
+    var label = _ref3.label,
+        value = _ref3.value;
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      key: value,
+      value: value
+    }, label);
+  })));
+};
+
+exports.withSelectAndClear = withSelectAndClear;