Function Details

src/ui-solid-inspector/index.tsx:151–185

(
  props: {
    readonly uniqueId: Id;
    readonly title: JSXElement;
    readonly editable?: Accessor<boolean>;
    readonly handleEditable?: (event: MouseEvent) => void;
  } & ChildrenProp &
    StoreProp,
)

};

const Details = (
  props: {
    readonly uniqueId: Id;
    readonly title: JSXElement;
    readonly editable?: Accessor<boolean>;
    readonly handleEditable?: (event: MouseEvent) => void;
  } & ChildrenProp &
    StoreProp,
) => {
  const open = useCell(STATE_TABLE, props.uniqueId, OPEN_CELL, props.s);
  const handleToggle = (event: Event & {currentTarget: HTMLDetailsElement}) =>
    props.s.setCell(
      STATE_TABLE,
      props.uniqueId,
      OPEN_CELL,
      event.currentTarget.open,
    );
  return (
    <details open={!!open()} onToggle={handleToggle}>
      <summary>
        <span>{props.title}</span>
        {props.handleEditable ? (
          <img
            onClick={props.handleEditable}
            class={props.editable?.() ? 'done' : 'edit'}
            title={props.editable?.() ? 'Done editing' : 'Edit'}
          />
        ) : (
          EMPTY_STRING
        )}
      </summary>
      <div>{props.children}</div>
    </details>
  );
};

const ConfirmableActions = <
  Props extends TableProps | RowProps | CellProps | ValuesProps | ValueProps,