如何根据另一个参数的值有条件地禁用 Storybook 中的控件？

Posted 2023-02-19

【中文标题】如何根据另一个参数的值有条件地禁用 Storybook 中的控件？

【英文标题】：How can I conditionally disable a control in Storybook based on the value of another argument?

【发布时间】：2021-02-25 15:50:10

【问题描述】：

我正在尝试根据另一个参数的值有条件地禁用 Storybook.js 控件。例如，我有一个模式组件，它的类型可以是“警报”、“确认”、“内容”或“照片”。所有这些模式类型，除了“照片”，还需要一个字符串类型的内容道具。 photo modal 不需要这个 content prop，因为它不显示任何文本。

所以我想在 type 属性选择为“照片”时禁用 Storybook 中的内容控件。

我首先尝试编写一个自定义的 propType 验证器，但 Storybook 认为这个 prop 应该是一个函数： Custom PropType validator in Storybook

现在我正在尝试禁用组件故事书文件中的控件：

export default 
  title: 'Global Design System/Modal',
  component: Modal,
  argTypes: 
    type: 
      control: 
        type: 'select',
        options: [
          'alert',
          'confirmation',
          'content',
          'photo'
        ]
      
    ,
    content: 
      table: 
        disable: function() 
          return this.argTypes.type === 'photo'
        
      
    
  ,
;

但在这种情况下，我无法引用 'type' 的当前值

【参考方案1】：

暂时不能！我看到成员 SB 为类似的功能创建了 PR，但它没有合并就关闭了。