Rename Function

edit Rename Group Row And Cell in tableconfig After Duoble Click on button

Used By

html on input Rename :

• autoFocus
• onFocus
• onKeyDown
• onBlur
• onChange
• required

Installation

Install my-project with npm

  npm i @ruttwice/functionrename

Usage/Examples Main Component

import React, {
  useState,
  useEffect,
  useRef,
 createContext,
} from "react";

import {
  visibleRenameNull,
  focusOutBlur,
  handleEnterRename,
  handleDivFocus,
  renameTitleChange
} from '@ruttwice/functionrename'

export const SendTableconfigOutput = createContext();

function App() {
   const [visible, setVisible] = useState({});
   const [sendStyleBackend, setSendStyleBackend] = useState(null);
   const [tableConfigSetting, setTableConfigSetting] = useState([]);
   const [tableConfig, setConfigTables] = useState([]);
   const [loadingConfig, setLoadingConfig] = useState(false);

  useEffect(() => {
    let cancel = false;

    async function sendRequest() {
      let responseData = await sendBackendRequest(
        "post",
        // " https://n34y4klnpd.execute-api.us-east-2.amazonaws.com/Test" + "/Config/List"
        "https://0yzv0v3f86.execute-api.us-west-2.amazonaws.com/Test" +
        "/Email/List"
      );
      let visibleObj = {
        table: [],
        visibleTable: 0,
        visibleRename: null,
        visibleSelect: null,
        nametitle: ""
      };
      let loadUserStyle = [];
      for (let tableIndex = 0; tableIndex < responseData.length; tableIndex++)
        let tableObj = {
          groupings: [],
          visibleGrouping: 0,
          visibleRename: null,
          visibleGroupingModal: false,
        };
        for (
          let groupingIndex = 0;
          groupingIndex < responseData[tableIndex].groupings.length;
          groupingIndex++
        ) {
          let grouppingObj = {
            rows: [],
            visibleRow: 0,
            visibleRename: null,
            visibleRowModal: false,
          };
          for (
            let rowsIndex = 0;
            rowsIndex <
            responseData[tableIndex].groupings[groupingIndex].rows.length;
            rowsIndex++
          ) {
            let rowObj = { cells: [] };
            for (
              let cellIndex = 0;
              cellIndex <
              responseData[tableIndex].groupings[groupingIndex].rows[rowsIndex]
                .cells.length;
              cellIndex++
            ) {
              rowObj.cells.push("hide");
            }
            grouppingObj.rows.push(rowObj);
          }
          tableObj.groupings.push(grouppingObj);
        }
        visibleObj.table.push(tableObj);
      }
      setSendStyleBackend(true);
      setVisible(visibleObj);
      setConfigTables(responseData);
      setTableConfigSetting(responseData);
      setLoadingConfig(true);
    }
    sendRequest();
    return () => {
      cancel = true;
    };
  }, []);

return (

  <SendTableconfigOutput.Provider
              value={{
                tableConfigSetting,
                schema: props.schema,
                tablevisble,
                groupingvisble,
                rowvisble,
                cellvisible,
                cellvisibleMap,
                visible,
                setVisible,
                setTableConfigSetting,
                passTable,
                setpassTable,
                passGroup,
                setpassGroup,
                passRow,
                setpassRow,
                passCell,
                setpassCell,
                dragname,
                setdragname,
                dragStart,
                dragPass,
                setStyleSetting,
                styleSetting,
                sendStyleBackend,
                setSendStyleBackend
              }}>
  <ChildComponent/>
  </SendTableconfigOutput.Provider>
)

Usage/Examples group

import {
  visibleRenameNull,
  focusOutBlur,
  handleEnterRename,
  handleDivFocus,
  renameTitleChange
} from '@ruttwice/functionrename'


function App() {
  return <RenameInputChange
          autoFocus
          onFocus={(e) => handleDivFocus(e)}
          onKeyDown={(e) => handleEnterRename
          (e, "group", visible, setVisible, setTableConfigSetting)}
          onBlur={(e) => focusOutBlur
          (e, "group", visible, setVisible, setTableConfigSetting)}
          value={visible.nametitle}
          type="text"
          onChange={(e) => renameTitleChange(e, setVisible)}
          placeholder="NameGroup"
          required
          ></RenameInputChange>
          <RenameEnterButton
          id={"group" + idgrouping}
          type="submit"
          onClick={(e) => handleEnterRename
          (e, "group", visible, setVisible, setTableConfigSetting)}>
            ✓
          </RenameEnterButton>
}