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

Question

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

因此，每当类型道具被选择为“照片”时，我都想禁用 Storybook 中的内容控件。

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

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

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'
        }
      }
    }
  },
};

但在这种情况下，我没有办法引用“类型”的当前值

Answer 1

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