Add component ActionField

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "sigeco-tools.umd.js": {
-    "bundled": 163573,
-    "minified": 50540,
-    "gzipped": 13879
+    "bundled": 380232,
+    "minified": 131786,
+    "gzipped": 38780
   },
   "sigeco-tools.umd.min.js": {
-    "bundled": 134175,
-    "minified": 42782,
-    "gzipped": 11658
+    "bundled": 327872,
+    "minified": 112570,
+    "gzipped": 32858
   }
 }

README.md

@@ -26,10 +26,14 @@ yarn add @sigeco/tools
 You can also use a global-friendly UMD build:
 
 ```html
-https://cdn.jsdelivr.net/npm/@sigeco/tools@latest/dist/sigeco-tools.umd.js
+https://cdn.jsdelivr.net/npm/@sigeco/tools@1.0.1/dist/sigeco-tools.umd.js
 
-https://cdn.jsdelivr.net/npm/@sigeco/tools@latest/dist/sigeco-tools.umd.min.js
+https://cdn.jsdelivr.net/npm/@sigeco/tools@1.0.1/dist/sigeco-tools.umd.min.js
 ```
 
+### ActionField API
+
+### FieldSet API
+
 ### Table API
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sigeco/tools",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "Tools for sigeco",
     "license": "MIT",
     "homepage": "https://github.com/juanmaabanto/sigeco-tools",
@@ -57,6 +57,7 @@
         "@babel/preset-env": "^7.11.5",
         "@babel/preset-flow": "^7.10.4",
         "@babel/preset-react": "^7.10.4",
+        "@babel/runtime": "^7.11.2",
         "@material-ui/core": "^4.11.0",
         "babel-plugin-optimize-clsx": "^2.6.1",
         "date-fns": "^2.16.1",

rollup.config.js

@@ -24,12 +24,14 @@ const globals = {
   '@material-ui/core/CircularProgress': 'MaterialUI.CircularProgress',
   '@material-ui/core/Icon': 'MaterialUI.Icon',
   '@material-ui/core/IconButton': 'MaterialUI.IconButton',
+  '@material-ui/core/InputAdornment': 'MaterialUI.InputAdornment',
   '@material-ui/core/MenuItem': 'MaterialUI.MenuItem',
   '@material-ui/core/Paper': 'MaterialUI.Paper',
   '@material-ui/core/Select': 'MaterialUI.Select',
   '@material-ui/core/styles': 'MaterialUI',
-  '@material-ui/core/styles/makeStyles': 'MaterialUI.makeStyles',
+  '@material-ui/core/styles/withStyles': 'MaterialUI.withStyles',
   '@material-ui/core/TableSortLabel': 'MaterialUI.TableSortLabel',
+  '@material-ui/core/TextField': 'MaterialUI.TextField',
   '@material-ui/core/Tooltip': 'MaterialUI.Tooltip'
 };
 
@@ -45,7 +47,11 @@ const getBabelOptions = ({ useESModules }) => ({
 const commonjsOptions = {
     include: /node_modules/,
     namedExports: {
-      'prop-types': Object.keys(propTypes)
+      'prop-types': Object.keys(propTypes),
+      'node_modules/react-is/index.js': [
+        'ForwardRef',
+        'Memo'
+      ]
     },
 };
 

src/ActionField/ActionField.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+export const styles = {
+  root: { }
+};
+
+const ActionField = React.forwardRef(function ActionField(props, ref) {
+    const { 
+        autoComplete = 'off', 
+        autoFocus = false,
+        classes, 
+        className,
+        disabled = false,
+        error = false,
+        fullWidth = true,
+        helperText,
+        hiddenAction = false,
+        iconActionCls = 'fas fa-external-link-alt',
+        label,
+        placeholder,
+        readOnly = true,
+        value,
+        variant = 'standard',
+        onHandleAction,
+        onKeyPress,
+        ...other 
+    } = props;
+
+    const handleKeyPress = event => {
+        if(typeof onKeyPress === "function" ) {
+            onKeyPress(event);
+        }
+
+        if(event.key === 'Enter') {
+            onHandleAction(event);
+        }
+    };
+
+    return (
+        <TextField
+            autoComplete={autoComplete}
+            autoFocus={autoFocus}
+            className={clsx(classes.root, className)}
+            disabled={disabled}
+            error={error}
+            fullWidth={fullWidth}
+            helperText={helperText}
+            label={label}
+            placeholder={placeholder}
+            value={value}
+            variant={variant}
+            onKeyPress={handleKeyPress}
+            InputProps={{
+                endAdornment: !hiddenAction && (
+                    <InputAdornment position="end">
+                        <IconButton
+                            disabled={disabled}
+                            className={iconActionCls}
+                            tabIndex={-1}
+                            style={{ fontSize: '0.8125rem' }}
+                            onClick={onHandleAction}
+                        />
+                    </InputAdornment>
+                ),
+                readOnly: readOnly
+            }}
+            ref={ref}
+            {...other}
+        />
+    );
+});
+
+ActionField.propTypes = {
+    autoComplete: PropTypes.string,
+    autoFocus: PropTypes.bool,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    helperText: PropTypes.node,
+    label: PropTypes.node,
+    onHandleAction: PropTypes.func,
+    onKeyPress: PropTypes.func,
+    placeholder: PropTypes.string,
+    readOnly: PropTypes.bool,
+    value: PropTypes.any,
+    /**
+     * The variant to use.
+     * @default 'standard'
+     */
+    variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+};
+
+export default withStyles(styles)(ActionField);

src/ActionField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ActionField';
+export * from './ActionField';

src/ActionField/index.js

@@ -0,0 +1 @@
+export { default } from './ActionField';

src/index.d.ts

@@ -1,3 +1,6 @@
+export { default as Body } from './ActionField';
+export * from './ActionField';
+
 export { default as Body } from './Body';
 export * from './Body';
 

src/index.js

@@ -1,3 +1,6 @@
+export { default as ActionField } from './ActionField';
+export * from './ActionField';
+
 export { default as Body } from './Body';
 export * from './Body';