fix: enable scroll in table columns configs popup

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/option.tsx

@@ -153,8 +153,9 @@ const OptionItem = (props: {
  popoverTitle?: string;
  draggable?: boolean;
  optionExtra?: React.ReactNode;
+ scrollable?: boolean;
 }) => {
- const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
+ const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
  const [visible, setVisible] = useState(false);
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
  id: config.dataIndex,
@@ -182,6 +183,7 @@ const OptionItem = (props: {
  setVisible={(vis) => {
  setVisible(vis);
  }}
+ scrollable={scrollable}
  >
  {optionRow}
  </SimplePopover>
@@ -204,6 +206,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
  optionToolbar?: React.ReactNode;
  headerItem?: React.ReactNode;
  itemExtra?: (comp: T) => React.ReactNode;
+ scrollable?: boolean;
 }) {
  const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
  const itemsDistinctValCount = uniqVal
@@ -286,6 +289,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
  title={props.itemTitle(item)}
  config={{ dataIndex: dataIndex }}
  optionExtra={optionExtra}
+ scrollable={props.scrollable}
  />
  );
  })}

client/packages/lowcoder-design/src/components/popover.tsx

@@ -51,13 +51,15 @@ const SimplePopover = (props: {
  setVisible?: (vis: boolean) => void;
  children: JSX.Element | React.ReactNode;
  content: JSX.Element | React.ReactNode;
+ scrollable?: boolean;
 }) => {
  const { visible, setVisible } = props;
  const contentWithBox = (
  <SuspensionBox
  title={props.title}
  onClose={() => setVisible?.(false)}
  content={props.content}
+ scrollable={props.scrollable}
  />
  );
  return (
@@ -66,7 +68,7 @@ const SimplePopover = (props: {
  align={{
  offset: [-12, 0, 0, 0],
  }}
- destroyTooltipOnHide
+ // destroyTooltipOnHide
  content={contentWithBox}
  trigger="click"
  open={visible}

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -390,6 +390,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
  comp.children.columns.dispatch(action);
  }}
  dataIndex={(column) => column.getView().dataIndex}
+ scrollable={true}
  />
  </>
  );