@ant-design/icons#DeleteOutlined TypeScript Examples

export function DangerZone({ isRestricted }: RestrictedComponentProps): JSX.Element {
    const { currentOrganization } = useValues(organizationLogic)

    const [isModalVisible, setIsModalVisible] = useState(false)

    return (
        <>
            <div style={{ color: 'var(--danger)' }}>
                <h2 style={{ color: 'var(--danger)' }} className="subtitle">
                    Danger Zone
                </h2>
                <div className="mt">
                    {!isRestricted && (
                        <Paragraph type="danger">
                            This is <b>irreversible</b>. Please be certain.
                        </Paragraph>
                    )}
                    <Button
                        type="default"
                        danger
                        onClick={() => setIsModalVisible(true)}
                        className="mr-05"
                        data-attr="delete-project-button"
                        icon={<DeleteOutlined />}
                        disabled={isRestricted}
                    >
                        Delete {currentOrganization?.name || 'the current organization'}
                    </Button>
                </div>
            </div>
            <DeleteOrganizationModal isVisible={isModalVisible} setIsVisible={setIsModalVisible} />
        </>
    )
}

EditHead: React.FC<{
  title: string;
  onRemove: () => void;
  onDragStart: React.DragEventHandler;
}> = React.memo(({ title, onRemove, onDragStart }) => (
  <div className="ant-ext-pm__head" draggable onDragStart={onDragStart}>
    <small>{title}</small>
    <div>
      <button>
        <DragOutlined />
      </button>
      <button onClick={(e) => [onRemove(), e.stopPropagation()]}>
        <DeleteOutlined />
      </button>
    </div>
  </div>
))

GraphToolbar = (props: Props) => {
  const { onAddNodeClick, onDeleteNodeClick, onConnectEdgeClick } = props
  const [selectedNodes, setSelectedNodes] = React.useState([])

  /** 监听画布中选中的节点 */
  const watchModelService = async () => {
    const appRef = useXFlowApp()
    const modelService = appRef && appRef?.modelService
    if (modelService) {
      const model = await MODELS.SELECTED_NODES.getModel(modelService)
      model.watch(async () => {
        const nodes = await MODELS.SELECTED_NODES.useValue(modelService)
        setSelectedNodes(nodes)
      })
    }
  }

  watchModelService()

  return (
    <div className="xflow-er-solution-toolbar">
      <div className="icon" onClick={() => onAddNodeClick()}>
        <span>添加节点</span>
        <PlusCircleOutlined />
      </div>
      <div className="icon" onClick={() => onConnectEdgeClick()}>
        <span>添加关系</span>
        <LinkOutlined />
      </div>
      <div
        className={`icon ${selectedNodes?.length > 0 ? '' : 'disabled'}`}
        onClick={() => onDeleteNodeClick()}
      >
        <span>删除节点</span>
        <DeleteOutlined />
      </div>
    </div>
  )
}

function QuestionCard({question, updateQuestion, deleteQuestion}: any) {
  return (
    <div>
      <Card
        bordered={false}
        actions={[
          <DeleteOutlined
            key="setting"
            onClick={e => {
              deleteQuestion();
            }}
          />,
        ]}
      >
        <Input
          placeholder="Enter your question here"
          allowClear
          value={question.title}
          onChange={e => updateQuestion({...question, title: e.target.value})}
        />
        <Checkbox
          onChange={e =>
            updateQuestion({...question, required: e.target.checked})
          }
        >
          Required
        </Checkbox>
        <div>{createQuestionField({question, updateQuestion})}</div>
      </Card>
    </div>
  );
}

DelWidgetsBtn: FC<{
  fn: () => void;
  title: string;
}> = ({ fn, title }) => {
  const selectedIds = useSelector(selectSelectedIds);
  return (
    <Tooltip title={title}>
      <ToolbarButton
        disabled={!selectedIds.length}
        onClick={fn}
        icon={<DeleteOutlined />}
      />
    </Tooltip>
  );
}

Autoreplies: React.FC = () => {
	const { id }: any = useParams();

	const { data, isLoading, isError } = useAutoreplyDetails(id);

	const { mutate: deleteAutoreply } = useDeleteAutoreply();

	return (
		<Page loading={isLoading} error={isError}>
			<AutorepliesForm data={data} />
			<FloatingButton>
				<Tooltip title='Delete Auto Reply'>
					<DeleteOutlined
						onClick={() =>
							showConfirm(() => {
								deleteAutoreply(id);
							}, 'Are you sure you want to delete?')
						}
					/>
				</Tooltip>
			</FloatingButton>
		</Page>
	);
}

RepeatedFieldView: FunctionComponent<RFVProps> = ({ editable, fieldName, values, handlers }) => {
  return (
    <Block>
      <FieldName>{fieldName}</FieldName>
      <span>: </span>
      {values.map((v, idx) => (
        <IndentationBlock key={idx}>
          <ProtobufValueView editable={editable} value={v} handlers={prefix(idx.toString(), handlers)} />
          {editable ? (
            <Button
              shape="circle"
              size="small"
              danger
              style={{ marginLeft: 4 }}
              onClick={(): void => handlers.entryRemove(`${idx.toString()}/`)}
            >
              <DeleteOutlined />
            </Button>
          ) : null}
        </IndentationBlock>
      ))}
      {editable ? (
        <IndentationBlock>
          <Button shape="circle" size="small" ghost type="primary" onClick={(): void => handlers.entryAdd('')}>
            <PlusOutlined />
          </Button>
        </IndentationBlock>
      ) : null}
    </Block>
  );
}

renderExtraOptions(id) {
    return (
      <div className="extra-options">
        <Tooltip
          title="Edit card"
          onClick={() => {
            this.editNote(id);
          }}
        >
          <FormOutlined className="option-icon" />
        </Tooltip>
        <Tooltip title="Add to card">
          <CommentOutlined className="option-icon" />
        </Tooltip>
        <Tooltip title="Add tags">
          <TagsOutlined className="option-icon" />
        </Tooltip>
        <Tooltip title="Delete">
          <DeleteOutlined
            onClick={() => {
              this.deleteNote(id);
            }}
            className="option-icon"
          />
        </Tooltip>
      </div>
    );
  }

DownloadManagerMenu = ({ onCreate, onClear }: DownloadManagerMenuProps) => {
  return (
    <div className={styles['menu-container']}>
      <Button type='text' icon={<PlusOutlined />} onClick={onCreate}>
        新建下载
      </Button>
      <Button type='text' icon={<DeleteOutlined />} onClick={onClear}>
        清空已完成
      </Button>
    </div>
  )
}

/**
 * 注册【批量删除】事件
 */
registerAction('batch-delete', (props, _record, searchTable) => {
  return {
    icon: <DeleteOutlined />,
    tableFooterExtraOnly: true,
    onClick: () => {
      let selection = searchTable?.selection || []
      if (!selection.length) {
        info(locale.action.noSelection)
        return
      }
      if (searchTable?.deleteApi) {
        Modal.confirm({
          title: locale.action.deleteConfirmTitle,
          content: `${locale.action.deleteConfirmBefore} ${selection.length} ${locale.action.deleteConfirmAfter}`,
          icon: <ExclamationCircleOutlined />,
          onOk: () => {
            let params: Array<string> = selection.map((row: any) => getKey(row, searchTable?.rowKey))
            searchTable?.deleteApi(params).then((data: any) => {
              success(props.successMsg || locale.action.deleteConfirmBatchSuccess)
              searchTable?.clearSelection()
              searchTable?.tableRef.current.refresh()
              // 请求完成回调
              if (props.onFinish) {
                props.onFinish({ data, params })
              }
            })
          }
        })
      }
    },
    ...props
  }
})

CompositionO2O = observer((props: CompositionComponentProps) => {
  const {
    attrInfo, 
    parentEntityName, 
    value,  
    onChange, 
    screensControl, 
    routingPath, 
    entityNamesInfo
  } = props;

  const {openEditorScreen} = screensControl;

  const metadata = useMetadata();
  const intl = useIntl();

  const [dirty, setDirty] = useState(false);

  const onCommit = useCallback((value?: EntityInstance) => {
    setDirty(true);
    onChange?.(value);
  }, [setDirty, onChange]);

  const handleUpsertBtnClick = useCallback(() => {
    openEditorScreen({
      screensControl,
      entityAttrs: getAllEntityPropertyNames(attrInfo.type, metadata),
      entityNamesInfo,
      routingPath,
      onCommit,
      entityInstance: value ? ant_to_jmixFront(value, parentEntityName, metadata) : undefined
    }, `${attrInfo.name} edit`);
  },[parentEntityName, value, onChange, setDirty])

  const handleDeleteBtnClick = useCallback(() => {
    showDeleteEntityDialog(
      () => onChange?.(undefined),
      intl,
      value as MayHaveId
    );
  } ,[onChange, intl, value]);

  return (
    <span className='jmix-composition-field'>
      <Button 
        type='link'
        onClick={handleUpsertBtnClick}
        className='jmix-composition-field-upsert-btn'
      >
        <UpsertBtnTitle 
          value={value as MayHaveId}
          dirty={dirty}
        />
      </Button>
      {value != null &&
        <DeleteOutlined onClick={handleDeleteBtnClick} />
      }
    </span>
  )
})

export function MatchCriteriaSelector({
    onCriteriaChange,
    group,
    onRemove,
    showErrors,
}: {
    onCriteriaChange: (group: Partial<CohortGroupType>) => void
    group: CohortGroupType
    onRemove: () => void
    showErrors?: boolean
}): JSX.Element {
    const onMatchTypeChange = (input: MatchType): void => {
        onCriteriaChange({
            matchType: input,
            ...(input === ENTITY_MATCH_TYPE
                ? {
                      count_operator: 'gte',
                      days: '1',
                  }
                : {}),
        })
    }

    const errored =
        showErrors &&
        ((group.matchType === ENTITY_MATCH_TYPE && !group.properties?.length) ||
            (group.matchType === PROPERTY_MATCH_TYPE && !(group.action_id || group.event_id)))

    return (
        <div
            style={{
                padding: 15,
                border: errored ? '1px solid var(--danger)' : '1px solid rgba(0, 0, 0, 0.1)',
                borderRadius: 4,
                width: '100%',
            }}
        >
            <Row align="middle" justify="space-between">
                <div>
                    Match users who
                    <Select
                        defaultValue={PROPERTY_MATCH_TYPE}
                        value={group.matchType}
                        style={{ width: 240, marginLeft: 10 }}
                        onChange={onMatchTypeChange}
                    >
                        <Option value={PROPERTY_MATCH_TYPE}>have properties</Option>
                        <Option value={ENTITY_MATCH_TYPE}>performed action or event</Option>
                    </Select>
                </div>
                <DeleteOutlined onClick={() => onRemove()} style={{ cursor: 'pointer' }} />
            </Row>
            <Row>
                {errored && (
                    <div style={{ color: 'var(--danger)', marginTop: 16 }}>
                        {group.matchType === ENTITY_MATCH_TYPE
                            ? 'Please select an event or action.'
                            : 'Please select at least one property or remove this match group.'}
                    </div>
                )}
            </Row>
            <Row align="middle">
                {group.matchType === ENTITY_MATCH_TYPE ? (
                    <EntityCriteriaRow group={group} onEntityCriteriaChange={onCriteriaChange} />
                ) : (
                    <PropertyCriteriaRow onPropertyCriteriaChange={onCriteriaChange} group={group} />
                )}
            </Row>
        </div>
    )
}

Entity = (props: Props) => {
  const entity: EntityCanvasModel = props?.data

  const getCls = () => {
    if (entity?.entityType === EntityType.FACT) {
      return 'fact'
    }
    if (entity?.entityType === EntityType.DIM) {
      return 'dim'
    }
    if (entity?.entityType === EntityType.OTHER) {
      return 'other'
    }
    return ''
  }
  return (
    <div className={`entity-container ${getCls()}`}>
      <div className={`content ${getCls()}`}>
        <div className="head">
          <div>
            <BarsOutlined className="type" />
            <span>{entity?.entityName}</span>
          </div>
          <div className="del-icon" onClick={() => props.deleteNode(entity?.id)}>
            <DeleteOutlined />
          </div>
        </div>
        <div className="body">
          {entity?.properties?.map((property: EntityProperty) => {
            return (
              <div className="body-item" key={property.propertyId}>
                <div className="name">
                  {property?.isPK && <span className="pk">PK</span>}
                  {property?.isFK && <span className="fk">FK</span>}
                  {property?.propertyName}
                </div>
                <div className="type">{property.propertyType}</div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export function ContextItem({
  index,
  data,
  canDrag,
  highlighted,
  handleDropItem,
  handleItemClick,
  handleItemDelete,
  handleItemHover,
}: ContextItemProps): React.ReactElement {
  const ref = useRef();
  const [{ isOver, dropClassName }, drop] = useDrop({
    accept: type,
    collect: (monitor) => {
      const { index: dragIndex } = monitor.getItem() || {};
      if (dragIndex === index) {
        return {};
      }
      return {
        isOver: monitor.isOver(),
        dropClassName:
          dragIndex < index
            ? `${styles.dropOverDownward}`
            : `${styles.dropOverUpward}`,
      };
    },
    drop: (item: any) => {
      handleDropItem(item.index, index);
    },
  });
  const [{ isDragging }, drag] = useDrag({
    item: { type, index },
    canDrag,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  drop(drag(ref));

  const handleMouseEnter = (): void => {
    handleItemHover(data.name);
  };

  const handleMouseLeave = (): void => {
    handleItemHover();
  };

  return (
    <div
      ref={ref}
      className={classNames(styles.varItem, {
        [dropClassName]: isOver,
        [styles.highlighted]: highlighted,
      })}
      onClick={handleItemClick}
      key={data.name}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {data.resolve ? (
        <LinkOutlined style={{ color: "var(--theme-orange-color)" }} />
      ) : (
        <CodeOutlined style={{ color: "var(--theme-green-color)" }} />
      )}
      <span className={styles.varName}>{data.name}</span>
      <Button
        type="link"
        danger
        icon={<DeleteOutlined />}
        className={styles.deleteIcon}
        onClick={handleItemDelete}
      />
    </div>
  );
}

nodeMenuConfig = [
  {
    key: 'copy',
    title: '复制',
    icon: <CopyOutlined />,
    handler: shortcuts.copy.handler,
  },
  {
    key: 'delete',
    title: '删除',
    icon: <DeleteOutlined />,
    handler: shortcuts.delete.handler,
  },
  {
    key: 'rename',
    title: '编辑文本',
    icon: <EditOutlined />,
    showDividerBehind: true,
    handler() {
      // TODO
    },
  },
  {
    key: 'bringToTop',
    title: '置于顶层',
    icon: <XIcon type={'icon-bring-to-top'} />,
    handler: shortcuts.bringToTop.handler,
  },
  {
    key: 'bringToBack',
    title: '置于底层',
    icon: <XIcon type={'icon-bring-to-bottom'} />,
    showDividerBehind: true,
    handler: shortcuts.bringToBack.handler,
  },
  {
    key: 'editCode',
    title: '编辑代码',
    icon: <FormOutlined />,
    disabled(flowChart: Graph) {
      return getSelectedNodes(flowChart).length !== 1;
    },
    handler(flowChart: Graph) {
      flowChart.trigger('graph:editCode');
    },
  },
  {
    key: 'executeCode',
    title: '执行代码',
    icon: <CodeOutlined />,
    disabled(flowChart: Graph) {
      return getSelectedNodes(flowChart).length !== 1;
    },
    handler(flowChart: Graph) {
      flowChart.trigger('graph:runCode');
    },
  },
]

ArrayComponents = {
  CircleButton,
  TextButton,
  AdditionIcon: () => <PlusOutlined />,
  RemoveIcon: () => <DeleteOutlined />,
  MoveDownIcon: () => <DownOutlined />,
  MoveUpIcon: () => <UpOutlined />
}

CommentOptions: React.FC<IProps> = (props) => {
    const [isOpen, setIsOpen] = useState(false);
    const isOpenRef = useRef(isOpen);
    const dispatch = useDispatch();

    useEffect(() => {
        document.addEventListener('click', handleClickOutside);

        return () => {
            document.removeEventListener('click', handleClickOutside);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        isOpenRef.current = isOpen;
    }, [isOpen]);

    const handleClickOutside = (e: Event) => {
        const option = (e.target as HTMLDivElement).closest(`#comment_${props.comment.id}`);

        if (!option && isOpenRef.current) {
            setIsOpen(false);
        }
    }

    const toggleOpen = () => {
        setIsOpen(!isOpen);
    }

    const onClickDelete = () => {
        dispatch(setTargetComment(props.comment));
        props.openDeleteModal();
    }

    const onClickEdit = () => {
        setIsOpen(false);

        props.onClickEdit();
        dispatch(setTargetComment(props.comment));
    }

    return (
        <div className="relative z-10" id={`comment_${props.comment.id}`}>
            <div
                className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
                onClick={toggleOpen}
            >
                <EllipsisOutlined style={{ fontSize: '20px' }} />
            </div>
            {isOpen && (
                <div className=" w-56 flex flex-col bg-white dark:bg-indigo-1000 rounded-md shadow-lg overflow-hidden absolute top-8 right-3 border border-gray-200 dark:border-gray-800 divide-y divide-gray-100 dark:divide-gray-800">
                    {props.comment.isOwnComment && (
                        <h4
                            className="p-4 flex items-center hover:bg-indigo-700 hover:text-white cursor-pointer dark:text-white"
                            onClick={onClickEdit}
                        >
                            <EditOutlined className="mr-4" />
                            Edit Comment
                        </h4>
                    )}
                    <h4
                        className="p-4 flex items-center hover:bg-indigo-700 hover:text-white cursor-pointer dark:text-white"
                        onClick={onClickDelete}
                    >
                        <DeleteOutlined className="mr-4" />
                        Delete Comment
                </h4>
                </div>
            )}
        </div>
    );
}

export function ApiKeyCard({ apiKey: key, showDocumentation }: ApiKeyCardProps) {
  const services = useServices()
  const [loading, setLoading] = useState(false)
  const rotateKey = async (key: ApiKey, type: "jsAuth" | "serverAuth"): Promise<string> => {
    let newKey = apiKeysStore.generateApiToken(type === "jsAuth" ? "js" : "s2s")
    await flowResult(apiKeysStore.patch(key.uid, { [type]: newKey }))
    actionNotification.info("New key has been generated and saved")
    return newKey
  }

  let deleteAction = async () => {
    confirmDelete({
      entityName: "api key",
      action: async () => {
        setLoading(true)
        try {
          await flowResult(apiKeysStore.delete(key.uid))
        } catch (error) {
          handleError(error, "Unable to delete API key at this moment, please try later.")
        } finally {
          setLoading(false)
        }
      },
    })
  }
  let editLink = generatePath(apiKeysRoutes.editExact, {
    projectId: services.activeProject.id,
    id: key.uid.replace(".", "-"),
  })
  return (
    <ConnectionCard
      loading={loading}
      title={APIKeyUtil.getDisplayName(key)}
      icon={apiKeysReferenceMap.js.icon}
      deleteAction={deleteAction}
      editAction={editLink}
      menuOverlay={
        <Menu>
          <Menu.Item icon={<EditOutlined />}>
            <NavLink to={editLink}>Edit</NavLink>
          </Menu.Item>
          <Menu.Item icon={<DeleteOutlined />} onClick={deleteAction}>
            Delete
          </Menu.Item>
        </Menu>
      }
      rename={async newName => {
        await flowResult(apiKeysStore.patch(key.uid, { comment: newName }))
      }}
      subtitle={<a onClick={showDocumentation}>Show connection instructions→</a>}
      status={
        <>
          <div className="text-xs">
            <div className="flex flex-nowrap items-center">
              <span className="inline-block whitespace-nowrap w-16 text-xxs">Server Key</span>{" "}
              <SecretKey rotateKey={() => rotateKey(key, "serverAuth")}>{key.serverAuth}</SecretKey>
            </div>
            <div className="flex flex-nowrap items-center pt-2">
              <span className="inline-block whitespace-nowrap w-16 text-xxs">JS Key</span>
              <SecretKey rotateKey={() => rotateKey(key, "jsAuth")}>{key.jsAuth}</SecretKey>
            </div>
          </div>
        </>
      }
    />
  )
}

function SubscriptionData(props) {
  return [
    {
      title: "NAME",
      dataIndex: "name",
      key: "name",
      render: (name) => {
        return <Text strong>{name}</Text>;
      },
    },
    {
      title: "BROKER",
      dataIndex: "broker",
      key: "broker",
      render: (broker) => {
        return <Tag>{broker}</Tag>;
      },
    },
    {
      title: "BACKEND",
      dataIndex: "backend",
      key: "backend",
      render: (backend) => {
        return backend ? <Tag>{backend}</Tag> : <Tag>{"-"}</Tag>;
      },
    },
    {
      title: "ENV",
      dataIndex: "app_env",
      key: "app_env",
      render: (app_env) => {
        return <Tag>{app_env}</Tag>;
      },
    },
    {
      title: "Actions",
      dataIndex: "name",
      key: "name",
      render: (name, record) => {
        return (
          <Space direction="horizontal">
            <Button
              onClick={() => props.handleDeleteSubscription(name)}
              size="small"
              type="primary"
              ghost
              danger
              loading={props.loading}
              icon={<DeleteOutlined />}
            />
          </Space>
        );
      },
    },
  ];
}

Project: React.FC<{
  project: ProjectObject;
  appService: AppService;
  setVisible: (visible: boolean) => void;
}> = ({ project, appService, setVisible }) => {
  const operation = [
    {
      key: 'EditOutlined',
      icon: (
        <div
          className={styles.item}
          onClick={() => {
            appService.set(project.id);
            setVisible(false);
          }}
        >
          <EditOutlined />
        </div>
      ),
    },
    {
      key: 'ArrowDownOutlined',
      icon: (
        <div
          className={styles.item}
          onClick={() => {
            exportCode(appService.project);
          }}
        >
          <ArrowDownOutlined />
        </div>
      ),
    },
    {
      key: 'DeleteOutlined',
      icon: (
        <Popconfirm
          title="确定删除项目"
          onConfirm={() => appService.delete(project.id)}
          onCancel={() => {}}
          okText="是"
          cancelText="否"
        >
          <div className={styles.item}>
            <DeleteOutlined style={{ color: 'red' }} />
          </div>
        </Popconfirm>
      ),
    },
  ];

  const isSelect = appService.project.id === project.id;

  return (
    <div className={styles.container}>
      <div className={styles.operation}>
        <span className={isSelect ? styles.select : ''} />
        {operation.map(({ key, icon }) => (
          <div key={key}>{icon}</div>
        ))}
      </div>
      <div className={styles.info}>
        <div>
          <span>项目名: </span>
          <span>{project.name ? project.name : '--'}</span>
        </div>
        <div>
          <span>项目描述: </span>
          <span>{project.description ? project.description : '--'}</span>
        </div>
      </div>
    </div>
  );
}

export default function index() {
  const namePrefix = ['options', 'thresholds'];

  return (
    <Panel header='阈值'>
      <Form.List name={[...namePrefix, 'steps']}>
        {(fields, { add, remove }) => (
          <>
            <Button
              style={{ width: '100%', marginBottom: 10 }}
              onClick={() => {
                add({
                  value: 0,
                });
              }}
            >
              添加
            </Button>
            {fields.map(({ key, name, ...restField }) => {
              return (
                <Input.Group key={key} compact style={{ marginBottom: 5 }}>
                  <Form.Item noStyle {...restField} name={[name, 'color']}>
                    <ColorPicker />
                  </Form.Item>
                  <Form.Item noStyle {...restField} name={[name, 'value']}>
                    <InputNumber style={{ width: 430 }} />
                  </Form.Item>
                  <Button
                    style={{ width: 50 }}
                    icon={<DeleteOutlined />}
                    onClick={() => {
                      remove(name);
                    }}
                  />
                </Input.Group>
              );
            })}
          </>
        )}
      </Form.List>
    </Panel>
  );
}

function RenderActionsColumn (text, item, index) {
    const intl = useIntl()
    const AreYouSureMessage = intl.formatMessage({ id: 'AreYouSure' })
    const DeleteMessage = intl.formatMessage({ id: 'Delete' })
    const EditMessage = intl.formatMessage({ id: 'Edit' })

    const { user } = useAuth()

    const { isUnsavedNew } = item
    const { action, remove, form, setEditing, setLoading, editing, loading } = _useTableRowForm()

    function validateFields () {
        setLoading(true)
        return form.validateFields()
            .then((values) => action('CreateOrUpdate', { values, item, form }))
            .then(() => (isUnsavedNew) ? remove({ id: item.id }) : null)
            .then(() => (isUnsavedNew) ? null : setEditing(false))
            .finally(() => setLoading(false))
    }

    function deleteRow () {
        setLoading(false)
        setEditing(false)
        remove({ id: item.id })
    }

    return <Space>
        {(isUnsavedNew || editing) ?
            <Button size="small" type={'primary'} onClick={validateFields} loading={loading}>
                <SaveOutlined/>
            </Button>
            : null}
        {(isUnsavedNew) ?
            <Button size="small" type={'primary'} onClick={deleteRow}>
                <DeleteOutlined/>
            </Button>
            :
            <ExtraDropdownActionsMenu actions={[
                (item.user && item.user.id === user.id) ? null : {
                    confirm: {
                        title: AreYouSureMessage,
                        icon: <QuestionCircleOutlined style={{ color: 'red' }}/>,
                    },
                    label: DeleteMessage,
                    action: () => action('Delete', { values: { id: item.id }, item, form }),
                },
                {
                    label: EditMessage,
                    action: () => {
                        setEditing(true)
                    },
                },
            ]}/>
        }
    </Space>
}

ChartDraggableElement = forwardRef<
  HTMLDivElement,
  ChartDraggableElementProps
>(function ChartDraggableElement(
  {
    content,
    isDragging,
    config,
    connectDragSource,
    connectDropTarget,
    onDelete,
  },
  ref,
) {
  const elementRef = useRef(null);
  connectDragSource(elementRef);
  connectDropTarget(elementRef);

  useImperativeHandle<any, ChartDraggableElementInstance>(ref, () => ({
    getNode: () => elementRef.current,
  }));

  return (
    <StyledChartDraggableElement
      className="draggable-element"
      ref={elementRef}
      isDragging={isDragging}
      type={config.type}
    >
      {typeof content === 'string' ? (
        content
      ) : (
        <Content>
          <span className="title">{content()}</span>
          <DeleteOutlined className="action" onClick={onDelete} />
        </Content>
      )}
    </StyledChartDraggableElement>
  );
})

export default function CourseOverrideSettings({
  courseId,
}: CourseOverrideSettingsProps): ReactElement {
  const { data, mutate } = useSWR(`/api/v1/courses/course_override`, async () =>
    API.course.getCourseOverrides(courseId)
  );

  const { course, mutateCourse } = useCourse(courseId);

  const formattedRoles = {
    student: "Student",
    ta: "TA",
    professor: "Professor",
  };

  return (
    <OverrideContents>
      <AddOverrideInput courseId={courseId} onAddOverride={() => mutate()} />
      <Table
        dataSource={data?.data.map((row, i) => ({
          ...row,
          key: i,
          role: formattedRoles[row.role],
        }))}
      >
        <Column title="Name" dataIndex="name" key="name" />
        <Column title="Email" dataIndex="email" key="email" />
        <Column title="Role" dataIndex="role" key="role" />
        <Column
          title="Delete"
          key="delete"
          render={(text, record: GetCourseOverridesRow) => (
            <Button
              onClick={async () => {
                await API.course.deleteOverride(courseId, {
                  email: record.email,
                  role: record.role as Role,
                });
                message.success(
                  "Successfully deleted the override for " + record.name
                );
                mutate();
              }}
              type="link"
              style={{ textAlign: "center" }}
              icon={<DeleteOutlined style={{ color: "red" }} />}
            />
          )}
        />
      </Table>
      <div>
        Is Khoury Admin/Banner down? Toggle this to temporarily allow students
        to join your class.{" "}
        <Switch
          onChange={async () => {
            await API.course.toggleSelfEnroll(courseId);
            mutateCourse();
          }}
          defaultChecked={course?.selfEnroll}
        />
      </div>
      <b>
        You must manually toggle this feature off later, or any student will be
        allowed to join your class.
      </b>
    </OverrideContents>
  );
}

FlowCell: React.FC<CellProps> = ({ flowName, emphasize, handleSelection, handleDelete, handleClone, idx }) => {
  const [menuVisible, setMenuVisible] = React.useState(false);
  function showMenu(): void {
    setMenuVisible(true);
  }

  function hideMenu(): void {
    setMenuVisible(false);
  }

  function deleteFlow(): void {
    handleDelete(flowName);
    hideMenu();
  }

  function cloneFlow(): void {
    handleClone(flowName);
    hideMenu();
  }

  const menu = (
    <>
      <Button type="link" danger onClick={prevent(deleteFlow)}>
        <DeleteOutlined />
        Delete Request
      </Button>
      <Separator />
      <Button type="link" onClick={prevent(cloneFlow)}>
        <SubnodeOutlined />
        Clone Request
      </Button>
    </>
  );

  return (
    <Popover
      placement="rightTop"
      content={menu}
      visible={menuVisible}
      trigger="contextMenu"
      onVisibleChange={setMenuVisible}
    >
      <ClickableItem onClick={(): void => handleSelection(flowName)} onContextMenu={prevent(showMenu)}>
        <Draggable draggableId={flowName} index={idx}>
          {(provided): React.ReactElement => {
            const style: React.CSSProperties = {
              width: '100%',
              height: '100%',
              padding: 8,
              boxSizing: 'border-box',
            };

            const { style: draggableStyle, ...draggableRest } = provided.draggableProps;

            return (
              <div
                ref={provided.innerRef}
                {...provided.dragHandleProps}
                {...draggableRest}
                style={{ ...style, ...draggableStyle }}
              >
                <Typography.Text
                  strong={emphasize}
                  style={{ userSelect: 'none', color: emphasize ? 'rgb(47, 93, 232)' : undefined }}
                >
                  {flowName}
                </Typography.Text>
              </div>
            );
          }}
        </Draggable>
      </ClickableItem>
    </Popover>
  );
}

AccountItem = (props: {
  address: string;
  name: string | undefined;
  type: 'injected' | 'contact';
  refreshContacts?: () => void;
}) => {
  const { t } = useTranslation();

  const deleteContact = () => {
    try {
      keyring.forgetAddress(props.address);

      message.success(t('success'));
      if (props.refreshContacts) {
        props.refreshContacts();
      }
    } catch (err: unknown) {
      if (err instanceof Error) {
        message.error(err.message);
      }
    }
  };

  return (
    <div className="header-account-list pt-2  w-full md:w-auto">
      <div className="flex-1 flex items-center justify-between ">
        <BaseIdentityIcon
          theme="substrate"
          size={24}
          className="mx-2 md:mx-4 rounded-full border border-solid border-gray-100"
          value={props.address}
        />

        <div className="flex-1 flex flex-col leading-5 mb-6 md:mb-0">
          <div className="mb-1 flex items-center">
            <b className="mr-3">{props.name}</b>

            {props.type === 'contact' && <DeleteOutlined onClick={deleteContact} />}
          </div>

          {/* <span className="hidden md:inline opacity-60">{props.address}</span> */}

          {/* <Typography.Text className="hidden md:inline opacity-60" style={{ width: '450px' }} copyable>
            {props.address}
          </Typography.Text> */}

          <SubscanLink address={props.address} copyable></SubscanLink>

          {/* <Typography.Text className="inline md:hidden opacity-60" style={{ width: '450px' }} copyable>
            {props.address.slice(0, 20) + '...'}
          </Typography.Text> */}
        </div>
      </div>
    </div>
  );
}

SessionList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const access = useAccess();

    const handleDelete = (record: any) => {
        if (!record) return;
        const content = `您是否要注销该连接？`;
        Modal.confirm({
            title: '注意',
            content,
            onOk: () => {
                deleteSession(record).then((res) => {
                    if (res.code === 200 && res.status === true) {
                        message.success(res.message);
                        if (actionRef.current) {
                            actionRef.current.reload();
                        }
                    }
                });
            },
            onCancel() { },
        });
    };

    const columns: ProColumns<API.SessionList>[] = [
        {
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
        },
        {
            title: '用户名',
            dataIndex: 'user_name',
        },
        {
            title: '主机名',
            dataIndex: 'host_name',
        },
        {
            title: '接入时间',
            dataIndex: 'connect_time',
            //sorter: true,
        },
        {
            title: '标识',
            dataIndex: 'connect_id',
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <>
                    <Divider type="vertical" />
                    <Access accessible={access.hasPerms(['admin', 'session:delete'])}>
                        <Tooltip title="注销">
                            <DeleteOutlined
                                style={{ fontSize: '17px', color: 'red' }}
                                onClick={() => handleDelete({ key: record.connect_id })}
                            />
                        </Tooltip>
                    </Access>
                </>
            ),
        },
    ];

    return (
        <PageHeaderWrapper>
            {access.hasPerms(['admin', 'session:list']) && <ProTable
                pagination={false}
                search={false}
                actionRef={actionRef}
                rowKey="connect_id"
                request={(params) => querySessions({ ...params })}
                columns={columns}
            />}
        </PageHeaderWrapper>
    );
}

HTTPFuzzerHistorySelector: React.FC<HTTPFuzzerHistorySelectorProp> = React.memo((props) => {
    const [tasks, setTasks] = useState<HTTPFuzzerTask[]>([]);
    const [loading, setLoading] = useState(false);

    const deleteAll = useMemoizedFn(()=>{
        setLoading(true)
        ipcRenderer.invoke("DeleteHistoryHTTPFuzzerTask", {}).then(()=>{
            info("Delete History")
            reload()
        }).finally(()=>setTimeout(()=>setLoading(false), 300))
    })

    const reload = useMemoizedFn(() => {
        setLoading(true)
        ipcRenderer.invoke("QueryHistoryHTTPFuzzerTask", {}).then((data: { Tasks: HTTPFuzzerTask[] }) => {
            setTasks(data.Tasks)
        }).finally(() => setTimeout(() => setLoading(false), 300))
    })
    useEffect(() => {
        reload()
    }, [])

    return <Card size={"small"} bordered={false} title={<Space>
        Web Fuzzer History
        <Button type={"link"} size={"small"} icon={<ReloadOutlined/>} onClick={e => {
            reload()
        }}/>
        <Popconfirm title={"确定删除吗？"} onConfirm={()=>{
            deleteAll()
        }}>
            <Button type={"link"} size={"small"} danger={true}
                    icon={<DeleteOutlined />}
            />
        </Popconfirm>
    </Space>}>
        <List<HTTPFuzzerTask>
            loading={loading}
            dataSource={tasks} pagination={{total: tasks.length, size: "small", pageSize: 10}}
            renderItem={(i: HTTPFuzzerTask) => {
                return <Card size={"small"} style={{marginBottom: 8}} hoverable={true} onClick={e => {
                    e.preventDefault()

                    props.onSelect(i.Id)
                }}>
                    <Space>
                        <div>
                            {`ID:${i.Id} ${formatTimestamp(i.CreatedAt)}`}
                        </div>
                        <Tag>共{i.HTTPFlowTotal}个</Tag>
                        {i.HTTPFlowSuccessCount != i.HTTPFlowTotal && <Tag>成功:{i.HTTPFlowSuccessCount}个</Tag>}
                    </Space>
                </Card>
            }}
        />
    </Card>
})

CarBrowserCards = observer((props: EntityListProps<Car>) => {
  const {
    entityList,
    onEntityListChange,
    onSelectEntity,
    disabled: readOnlyMode
  } = props;
  const onOpenScreenError = useOpenScreenErrorCallback();
  const onEntityDelete = useEntityDeleteCallback();
  const {
    items,
    count,
    executeListQuery,
    listQueryResult: { loading, error },
    handleDeleteBtnClick,
    handleCreateBtnClick,
    handleEditBtnClick,
    handlePaginationChange,
    goToParentScreen,
    entityListState
  } = useEntityList<Car>({
    listQuery: SCR_CAR_LIST,
    entityName: ENTITY_NAME,
    routingPath: ROUTING_PATH,
    entityList,
    onEntityListChange,
    onPagination: saveHistory,
    onEntityDelete,
    onOpenScreenError
  });

  const getEntityCardsActions = useMemo(() => {
    if (readOnlyMode) {
      return () => [];
    }

    return onSelectEntity
      ? (e: EntityInstance<Car>) => [
          <Button
            htmlType="button"
            type="primary"
            onClick={() => {
              onSelectEntity(e);
              goToParentScreen();
            }}
          >
            <span>
              <FormattedMessage id="common.selectEntity" />
            </span>
          </Button>
        ]
      : (e: EntityInstance<Car>) => [
          <EntityPermAccessControl entityName={ENTITY_NAME} operation="delete">
            <DeleteOutlined
              role={"button"}
              key="delete"
              onClick={(event?: React.MouseEvent) =>
                handleDeleteBtnClick(event, e.id)
              }
            />
          </EntityPermAccessControl>,
          <EntityPermAccessControl entityName={ENTITY_NAME} operation="update">
            <EditOutlined
              role={"button"}
              key="edit"
              onClick={(event?: React.MouseEvent) =>
                handleEditBtnClick(event, e.id)
              }
            />
          </EntityPermAccessControl>
        ];
  }, [
    onSelectEntity,
    handleDeleteBtnClick,
    handleEditBtnClick,
    goToParentScreen,
    readOnlyMode
  ]);

  if (error != null) {
    console.error(error);
    return <RetryDialog onRetry={executeListQuery} />;
  }

  if (loading || items == null) {
    return <Spinner />;
  }

  return (
    <div className={styles.narrowLayout}>
      <div style={{ marginBottom: "12px" }}>
        {(entityList != null || onSelectEntity != null) && (
          <Tooltip title={<FormattedMessage id="common.back" />}>
            <Button
              htmlType="button"
              style={{ margin: "0 12px 12px 0" }}
              icon={<LeftOutlined />}
              onClick={goToParentScreen}
              key="back"
              type="default"
              shape="circle"
            />
          </Tooltip>
        )}
        {onSelectEntity == null && !readOnlyMode && (
          <EntityPermAccessControl entityName={ENTITY_NAME} operation="create">
            <span>
              <Button
                htmlType="button"
                type="primary"
                icon={<PlusOutlined />}
                onClick={handleCreateBtnClick}
              >
                <span>
                  <FormattedMessage id="common.create" />
                </span>
              </Button>
            </span>
          </EntityPermAccessControl>
        )}
      </div>

      {items == null || items.length === 0 ? (
        <p>
          <FormattedMessage id="management.browser.noItems" />
        </p>
      ) : null}
      {items.map((e: EntityInstance<Car>) => (
        <Card
          title={e._instanceName}
          key={e.id ? toIdString(e.id) : undefined}
          style={{ marginBottom: "12px" }}
          actions={getEntityCardsActions(e)}
        >
          {getFields(e).map(p => (
            <EntityProperty
              entityName={ENTITY_NAME}
              propertyName={p}
              value={e[p]}
              key={p}
            />
          ))}
        </Card>
      ))}

      <div style={{ margin: "12px 0 12px 0", float: "right" }}>
        <Paging
          paginationConfig={entityListState.pagination ?? {}}
          onPagingChange={handlePaginationChange}
          total={count}
        />
      </div>
    </div>
  );
})