Merge pull request #1401 from inplayer-org/feat/make-table-field-renameable

Feat/make table field renameable

Author: mustran

CHANGELOG.md

@@ -2,7 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
-# [2.5.21] - 24.01.2022
+# [2.5.22] - 04.02.2022
+
+## Added
+
+- Option in column table to make fields(columns) editable
+- onBlur function to trigger persa when input and textarea are focused-out
+
+# [2.5.21] - 25.01.2022
 
 ## Change
 

index.d.ts

@@ -216,11 +216,17 @@ export interface RadioProps extends AnalyticsProps{
 
 export declare const Radio: FunctionComponent<RadioProps>;
 
+export interface EditableFields {
+  fn: (props: ColumnFunctionProps) => void;
+  validationSchema: ObjectSchema<any>;
+}
+
 export interface TableColumn<T extends TableRowData> {
   title: string;
   key: string;
   render?: (props: TableColumn$RenderProps<T>) => ReactNode;
   style?: CSSProperties;
+  editable?: EditableFields;
 }
 
 export interface TableRowData extends Object {
@@ -232,6 +238,12 @@ export interface TableColumn$RenderProps<T extends TableRowData, V = any> {
   rowValues: T;
 }
 
+export interface ColumnFunctionProps {
+  value: string;
+  currentValue: string;
+  id: number;
+}
+
 export interface RowAction<T extends TableRowData> {
   icon?: string;
   onClick?: (id: number | string) => any;
@@ -270,6 +282,7 @@ export interface TableProps<TableData extends TableRowData = TableRowData> exten
   options?: Partial<TableOptions<TableData>>;
   tableButton?: Array<TableButtonProps>;
   actionsRowTitle?: string;
+  editableById?: string;
 }
 
 interface TableState {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inplayer-org/inplayer-ui",
   "sideEffects": false,
-  "version": "2.5.20",
+  "version": "2.5.22",
   "author": "InPlayer",
   "description": "InPlayer React UI Components",
   "main": "dist/inplayer-ui.cjs.js",
@@ -102,5 +102,9 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "typescript": "^4.1.3"
+  },
+  "dependencies": {
+    "formik": "^2.1.5",
+    "yup": "^0.32.11"
   }
 }

src/components/Input/ErrorField.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import { ErrorMessage, ErrorMessageProps } from 'formik';
+import styled from 'styled-components';
+import colors from '../../theme/colors';
+
+const ErrorMessageWrapper = styled(ErrorMessage)<ErrorMessageProps>`
+  margin-top: 0.5rem;
+  display: block;
+  color: ${colors.red};
+`;
+
+const ErrorField: FunctionComponent<ErrorMessageProps> = ({ className, ...rest }) => (
+  <ErrorMessageWrapper component="span" className={className} {...rest} />
+);
+
+export default ErrorField;

src/components/Input/FormikInput.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent, InputHTMLAttributes } from 'react';
+import { FieldProps } from 'formik';
+import styled from 'styled-components';
+import { AnalyticsProps } from 'index';
+import Input from './Input';
+
+const InputContainer = styled.div`
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-column-end: span 12;
+  grid-row-end: span 1;
+  flex: 1;
+`;
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> & FieldProps & AnalyticsProps;
+
+const FormikInput: FunctionComponent<Props> = ({
+  id,
+  field,
+  value,
+  form: _,
+  placeholder = '',
+  tag = '',
+  ...rest
+}) => {
+  const { name: fieldName, ...fieldRest } = field;
+
+  return (
+    <InputContainer>
+      <Input
+        tag={tag}
+        type="text"
+        id={id || fieldName}
+        placeholder={placeholder}
+        name={fieldName}
+        {...fieldRest}
+        {...rest}
+        value={value ?? fieldRest.value}
+      />
+    </InputContainer>
+  );
+};
+
+export default FormikInput;