|
| 1 | +import Relationship from "components/RelationShip"; |
| 2 | +import { grey, randomColor } from "helpers/Colors"; |
| 3 | +import React, { useState } from "react"; |
| 4 | +import { CellComponentProps, RowSelectOption } from "cdm/ComponentsModel"; |
| 5 | +import { TableColumn } from "cdm/FolderModel"; |
| 6 | +import CreatableSelect from "react-select/creatable"; |
| 7 | +import CustomTagsStyles from "components/styles/TagsStyles"; |
| 8 | +import { c } from "helpers/StylesHelper"; |
| 9 | +import { ActionMeta, OnChangeValue } from "react-select"; |
| 10 | + |
| 11 | +const SelectPortal = (popperProps: CellComponentProps) => { |
| 12 | + const { defaultCell } = popperProps; |
| 13 | + const { row, column, table } = defaultCell; |
| 14 | + const { tableState } = table.options.meta; |
| 15 | + const dataActions = tableState.data((state) => state.actions); |
| 16 | + |
| 17 | + const selectPortalRow = tableState.data((state) => state.rows[row.index]); |
| 18 | + const columnsInfo = tableState.columns((state) => state.info); |
| 19 | + const configInfo = tableState.configState((state) => state.info); |
| 20 | + |
| 21 | + const tableColumn = column.columnDef as TableColumn; |
| 22 | + |
| 23 | + const [showSelect, setShowSelect] = useState(false); |
| 24 | + |
| 25 | + const columnActions = table.options.meta.tableState.columns( |
| 26 | + (state) => state.actions |
| 27 | + ); |
| 28 | + |
| 29 | + function getColor() { |
| 30 | + const match = tableColumn.options.find( |
| 31 | + (option: { label: string }) => |
| 32 | + option.label === selectPortalRow[tableColumn.key] |
| 33 | + ); |
| 34 | + return (match && match.backgroundColor) || grey(200); |
| 35 | + } |
| 36 | + |
| 37 | + const defaultValue = { |
| 38 | + label: selectPortalRow[tableColumn.key]?.toString(), |
| 39 | + value: selectPortalRow[tableColumn.key]?.toString(), |
| 40 | + color: getColor(), |
| 41 | + }; |
| 42 | + |
| 43 | + const multiOptions = tableColumn.options |
| 44 | + .sort((a, b) => a.label.localeCompare(b.label)) |
| 45 | + .map((option: RowSelectOption) => ({ |
| 46 | + value: option.label, |
| 47 | + label: option.label, |
| 48 | + color: option.backgroundColor, |
| 49 | + })); |
| 50 | + |
| 51 | + const handleOnChange = ( |
| 52 | + newValue: OnChangeValue<any, false>, |
| 53 | + actionMeta: ActionMeta<RowSelectOption> |
| 54 | + ) => { |
| 55 | + const selection = newValue ? newValue.value : ""; |
| 56 | + // Update on disk & memory |
| 57 | + dataActions.updateCell( |
| 58 | + row.index, |
| 59 | + tableColumn, |
| 60 | + selection, |
| 61 | + columnsInfo.getAllColumns(), |
| 62 | + configInfo.getLocalSettings(), |
| 63 | + true |
| 64 | + ); |
| 65 | + // Add new option to column options |
| 66 | + |
| 67 | + if ( |
| 68 | + newValue.value && |
| 69 | + !tableColumn.options.find((option) => option.label === newValue.value) |
| 70 | + ) { |
| 71 | + columnActions.addOptionToColumn( |
| 72 | + tableColumn, |
| 73 | + newValue.value, |
| 74 | + randomColor() |
| 75 | + ); |
| 76 | + } |
| 77 | + setShowSelect(false); |
| 78 | + }; |
| 79 | + |
| 80 | + function SelectComponent() { |
| 81 | + return ( |
| 82 | + <div className={c("tags")}> |
| 83 | + <CreatableSelect |
| 84 | + defaultValue={defaultValue} |
| 85 | + isSearchable |
| 86 | + autoFocus |
| 87 | + isClearable |
| 88 | + menuPosition="fixed" |
| 89 | + styles={CustomTagsStyles} |
| 90 | + options={multiOptions} |
| 91 | + onBlur={() => setShowSelect(false)} |
| 92 | + onChange={handleOnChange} |
| 93 | + menuPortalTarget={activeDocument.body} |
| 94 | + menuPlacement="auto" |
| 95 | + menuShouldBlockScroll={true} |
| 96 | + className="react-select-container" |
| 97 | + classNamePrefix="react-select" |
| 98 | + key={`${tableColumn.key}-select-open`} |
| 99 | + /> |
| 100 | + </div> |
| 101 | + ); |
| 102 | + } |
| 103 | + |
| 104 | + return ( |
| 105 | + <> |
| 106 | + {showSelect ? ( |
| 107 | + SelectComponent() |
| 108 | + ) : ( |
| 109 | + /* Current value of the select */ |
| 110 | + <div |
| 111 | + className="cell-padding d-flex cursor-default align-items-center flex-1" |
| 112 | + onClick={() => setShowSelect(true)} |
| 113 | + style={{ width: column.getSize() }} |
| 114 | + > |
| 115 | + {selectPortalRow[tableColumn.key] && ( |
| 116 | + <Relationship |
| 117 | + value={selectPortalRow[tableColumn.key]?.toString()} |
| 118 | + backgroundColor={getColor()} |
| 119 | + /> |
| 120 | + )} |
| 121 | + </div> |
| 122 | + )} |
| 123 | + </> |
| 124 | + ); |
| 125 | +}; |
| 126 | + |
| 127 | +export default SelectPortal; |
0 commit comments