REACT

gistfile1.jsx

import WidgetWrapper from '@/components/WidgetWrapper';
import WrapTable from '@/components/WrapTable';
import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
import GridLayout from 'react-grid-layout';
import { 
  Select, Input, Col, Row, Form, Button, Card, 
  Alert, PageHeader, Divider, Checkbox
} from 'antd';
import * as widgets from '@/widgets';
import {
  PlusOutlined,
} from '@ant-design/icons';
import { matchSorter } from 'match-sorter';
import { render } from 'react-dom';

const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

const WidgetSelection = (props) => {
  const [checkedList, setCheckedList] = React.useState(props.newWidgets);
  const children = Object.keys(widgets).filter((name) => {
    return (
      ['GettingStarted', 'NewPage'].indexOf(name) < 0 && 
      props.selectedWidget.indexOf(name) < 0
    );
  }).map((name) => {
    return {
      label: name,
      value: name,
      disabled: props.selectedWidget.indexOf(name) > -1,
    }
  });
  const [options, setOptions] = useState(children);

  const onChange = list => {
    const selected = [...list];
    for (const s of checkedList) {
      if (list.indexOf(s) > -1) continue;
      if (list.indexOf(s) > -1) continue;
      if (options.some((obj) => obj.value === s)) continue;
      selected.push(s);
    }
    setCheckedList(selected);
    props.handleChange(selected);
  };

  return (
    <>
      <CheckboxGroup options={options} value={checkedList} onChange={onChange} />
    </>
  )
}

const NewPage = (props) => {
  const renders = useRef(0);
  const [pageName, setPageName] = useState();
  const [selectedWidget, setSelectedWidgets] = useState([]);
  const [newWidgets, setNewWidgets] = useState([]);

  const conRef = React.createRef();
  const chartRefs = [];
  const setChartRef = (ref) => {
    chartRefs.push(ref);
  };


  const addNewWidgets = () => {
    console.log(selectedWidget, newWidgets)
    props.closeHelpAction();
    setSelectedWidgets(selectedWidget => [...selectedWidget, ...newWidgets]);
  };

  const handleChangeNewWidgets = (e) => {
    console.log(e); setNewWidgets([...e]);
  }

  const pageExtras = [
    <Button
      key="help"
      type="link"
      onClick={() => props.helpAction({
        title: <h3>Choose widgets</h3>,
        message: (
          <WidgetSelection
            handleChange={(e) => handleChangeNewWidgets(e)}
            selectedWidget={selectedWidget}
            newWidgets={newWidgets}
          />
        ),
        footer: (
          <Button key="apply" type="primary" onClick={addNewWidgets}>Apply</Button>
        )
      })}
    >
      <PlusOutlined /> Add Widget
    </Button>,
    <Button key="create" type="primary" htmlType="submit" onClick={createPage}>Create</Button>
  ]
  
  return (
    <>
      <div style={{background: '#fff'}}>
        {pageExtras}
        <div>Renders: {renders.current++}</div>
      </PageHeader>
    </div>      
    </>

  );
};


export default NewPage;