@ant-design/icons#HolderOutlined TypeScript Examples

The following examples show how to use @ant-design/icons#HolderOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Row.tsx    From fe-v5 with Apache License 2.0 4 votes vote down vote up 
export default function Row(props: IProps) {
  const { name, row, onToggle, onAddClick, onEditClick, onDeleteClick } = props;
  const [editVisble, setEditVisble] = useState(false);
  const [newName, setNewName] = useState<string>();
  const [deleteVisible, setDeleteVisible] = useState(false);

  return (
    <div className='dashboards-panels-row'>
      <div
        className='dashboards-panels-row-name'
        onClick={() => {
          onToggle();
        }}
      >
        {row.collapsed ? <DownOutlined /> : <RightOutlined />}
        <span style={{ paddingLeft: 6 }}>{name}</span>
      </div>
      <Space>
        <AddPanelIcon
          onClick={() => {
            onAddClick();
          }}
        />
        <SettingOutlined
          onClick={() => {
            setEditVisble(true);
          }}
        />
        <DeleteOutlined
          onClick={() => {
            setDeleteVisible(true);
          }}
        />
        {row.collapsed === false && <HolderOutlined className='dashboards-panels-item-drag-handle' />}
      </Space>
      <Modal
        title='编辑分组'
        visible={editVisble}
        onCancel={() => {
          setEditVisble(false);
        }}
        onOk={() => {
          onEditClick({
            ...row,
            name: newName,
          });
          setEditVisble(false);
        }}
      >
        <div>
          分组名称
          <Input
            value={newName}
            onChange={(e) => {
              setNewName(e.target.value);
            }}
            onPressEnter={() => {
              onEditClick({
                ...row,
                name: newName,
              });
              setEditVisble(false);
            }}
          />
        </div>
      </Modal>
      <Modal
        closable={false}
        visible={deleteVisible}
        onCancel={() => {
          setDeleteVisible(false);
        }}
        footer={[
          <Button
            key='cancel'
            onClick={() => {
              setDeleteVisible(false);
            }}
          >
            取消
          </Button>,
          <Button
            key='ok'
            type='primary'
            onClick={() => {
              onDeleteClick('self');
              setDeleteVisible(false);
            }}
          >
            仅删除分组
          </Button>,
          <Button
            key='all'
            type='primary'
            danger
            onClick={() => {
              onDeleteClick('withPanels');
              setDeleteVisible(false);
            }}
          >
            删除分组和图表
          </Button>,
        ]}
      >
        <div>
          <h3 style={{ fontSize: 16 }}>
            <InfoCircleOutlined style={{ color: '#faad14', marginRight: 10, fontSize: 22, position: 'relative', top: 4 }} /> 删除分组
          </h3>
          <div style={{ marginLeft: 38, fontSize: 14 }}>确定删除该分组吗？</div>
        </div>
      </Modal>
    </div>
  );
}