// import React, { useState, useCallback } from "react"
// import {
//   RenderCellProps,
//   RenderColHeaderProps,
//   RenderRowHeaderProps,
//   GridComponent,
//   RenderCellEditorProps,
//   SaveEditFunc
// } from "./GridComponent"
// import ReactSelect from "react-select"

// export const GridComponentDemo = () => {
//   const [colWidths, setColWidths] = useState([100, 200, 300])
//   const renderCell = (props: RenderCellProps) => {
//     return <div style={{ padding: 10 }}>{`x${props.row}:${props.col}`}</div>
//   }
//   const renderColHeader = (props: RenderColHeaderProps) => {
//     return <div style={{ padding: 5 }}>{`x${props.col}`}</div>
//   }
//   const renderRowHeader = (props: RenderRowHeaderProps) => {
//     return (
//       <div style={{ padding: 10 }}>
//         <i className="fa fa-open" />
//       </div>
//     )
//   }

//   const renderCellEditor = (props: RenderCellEditorProps) => {
//     return <Editor width={props.width} setSaveEdit={props.setSaveEdit} />
//   }

//   return (
//     <div style={{ padding: 20 }}>
//       <GridComponent
//         colWidths={colWidths}
//         onColWidthsChange={setColWidths}
//         height={600}
//         numRows={1000}
//         rowHeight={40}
//         rowHeaderWidth={40}
//         colHeaderHeight={32}
//         width={800}
//         renderCell={renderCell}
//         renderColHeader={renderColHeader}
//         renderRowHeader={renderRowHeader}
//         renderCellEditor={renderCellEditor}
//         colHeaderExtraWidth={20}
//         renderColHeaderExtra={() => "X"}
//         rowHeaderExtraHeight={20}
//         renderRowHeaderExtra={() => "X"}
//         canEdit={() => true}
//       />
//     </div>
//   )
// }

// const Editor = (props: { width: number; setSaveEdit: (saveEditFunc: SaveEditFunc) => void }) => {
//   const [value, setValue] = useState<any>(null)

//   props.setSaveEdit(() => {
//     //alert(value)
//     return new Promise((resolve, reject) => {
//       setTimeout(() => {
//         resolve(true)
//       }, 10000)
//     })
//   })

//   /** Focus on select */
//   const selectRef = useCallback((node: ReactSelect | null) => {
//     if (node) {
//       setTimeout(() => {
//         node.focus()
//       }, 0)
//     }
//   }, [])

//   return (
//     <div style={{ width: props.width }}>
//       <ReactSelect
//         options={[
//           { value: "x", label: "X" },
//           { value: "y", label: "Y" }
//         ]}
//         value={value}
//         onChange={(v: any) => {
//           console.log("onChange")
//           setValue(v)
//         }}
//         onBlur={() => {
//           console.log("onBlur")
//         }}
//         isMulti={true}
//         ref={selectRef}
//       />
//     </div>
//   )
// }