dndPanel add collapseBtn & update sharp version

october-rain commented 2 years ago

1. sharp 版本升级

问题描述

在 M1 的 mac 环境下使用 pnpm i 会报错

问题追溯

查看 sharp官网关于M1芯片的说明后得知，^0.29.x 版本才支持 ARM64

解决方案

在 package.json 中，利用 pnpm.overrides 字段，将 sharp 版本锁定在 0.29.x 以上

2. 新增Dnd collapse btn

新增属性

/** 是否可以折叠 */
collapsible?: boolean
/** 折叠的 onChange 方法 */
onCollapseChange?: (isCollapsed: boolean) => void
/** collapseBtn 的样式 */
collapseButtonStyle?: React.CSSProperties

使用方法

const XFlowDemo: React.FC<{}> = props => {
  const collapsePanelWidth = 290
  const graphConfig = useGraphConfig(props)

  const [menuWidth, setMenuWidth] = useState(collapsePanelWidth)

  const onCollapseChange = (isCollapsed: boolean) => {
    setMenuWidth(isCollapsed ? 0 : collapsePanelWidth)
  }

  return (
    <XFlow onLoad={onLoad} className="xflow-workspace">
      <NodeCollapsePanel
        header={<h4 className="dnd-panel-header"> 组件面板 </h4>}
        footer={<div> Foorter </div>}
        onNodeDrop={panelConfig.onNodeDrop}
        nodeDataService={panelConfig.nodeDataService}
        position={{ top: 0, bottom: 0, left: 0, width: menuWidth }}
        collapsible={true}
        onCollapseChange={onCollapseChange}
        collapseButtonStyle={{}}
      />
      <XFlowCanvas
        config={graphConfig}
        position={{ top: 0, bottom: 0, left: menuWidth, right: 0 }}
      />
    </XFlow>
  )
}

changeset-bot[bot] commented 2 years ago

🦋 Changeset detected

Latest commit: 41e74e2fdc2d3c80d843053218a0feb61f99c086

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

| Name | Type | | --------------------- | ----- | | @antv/xflow-core | Major | | @antv/xflow-extension | Major | | @antv/xflow | Major | | @antv/xflow-hook | Major | | xflow-quick-start-cra | Patch | | xflow-quick-start-umi | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR