如何映射枚举以在 Storybook 中选择下拉菜单？

Question

我有一个像这样的简单 JS“枚举”

const MyEnum = {
  Aaa: 1,
  Bbb: 84,
};

我有一个简单的故事：

import MyEnum from 'models/my-enum';
import HotSpot from 'hot-spot/hot-spot.vue';
import hotSpotProp from './hot-spot.stories.defaults';

export default {
  title: 'components/catalog/images/HotSpot',
  args: {
    hotspotProp: hotSpotProp,
    currentWidth: 360,
    selectedCallouts: [],
    calloutMode: true,
    originalWidth: 2100,
    title: 'Example tooltip',
  },
  argTypes: {
    oemId: {
      options: Object.keys(MyEnum), // an array of serializable values
      mapping: MyEnum, // maps serializable option values to complex arg values
      control: {
        type: 'select', // type 'select' is automatically inferred when 'options' is defined
        // labels: MyEnum,
      },
    },
  },
};

const Template = (args, { argTypes }) => ({
  components: { HotSpot },
  template: `<HotSpot v-bind="$props" />`,
  props: Object.keys(argTypes),
});

export const Default = Template.bind({});

文档中的示例不起作用。

我有一个select下拉菜单正在工作，但它从映射返回 aString而不是 a 。Number

我的故事书在控制台中出现错误：

[Vue warn]: Invalid prop: type check failed for prop "oemId". Expected Number with value NaN, got String with value "Aaa".

如何映射枚举以在 Storybook 中选择下拉菜单？

Answer 1

那个故事书文档的例子绝对是恐怖的。这是一个示例，将立即向您展示该怎么做。

myValueList: {
      options: [0, 1, 2], // iterator
      mapping: [12, 13, 14], // values
      control: {
        type: 'select', 
        labels: ['twelve', 'thirteen', 'fourteen'],
      },
    }

Answer 2

枚举最终为Objects，因此：

enum Nums {
 Zero,
 One,
 Two,
 Three,
}

似乎变成了Object这样：

{
  0: "Zero",
  1: "One",
  2: "Two",
  3: "Three",
  One: 1,
  Three: 3,
  Two: 2,
  Zero: 0,
}

由于所有对象键都是 JavaScript 中的字符串或符号，因此我能够保证只从 an 中获取字符串值的唯一方法Enum是使用Object.values和过滤字符串：

    oemId: {
      options: Object.values(MyEnum).filter(x => typeof x === "string"),
      mapping: MyEnum,
      control: {
        type: 'select',
      },
    },

或者，过滤掉键并保留Object- 这样 Storybook 仍然可以默认值而不会出现问题：

options: Object.entries(MyEnum)
    .filter(([, value]) => typeof value !== "string")
    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})

Answer 3

对我来说没有任何帮助的最简单的方法是：

export default {
  title: 'One/SingleBarItem',
  component: SingleBarItem,
  //  Creates drowdown to select Phase enum values
  argTypes: {
    phase: {
      options: Object.values(NodeExecutionPhase),
      mapping: Object.values(NodeExecutionPhase),
      control: {
        type: 'select',
        labels: Object.keys(NodeExecutionPhase),
      },
    },
  },
} as ComponentMeta<typeof SingleBarItem>;

其中 NodeExecutionPhase 定义为：

enum Phase {
  UNDEFINED = 0,
  QUEUED = 1,
}

Answer 4

您正在寻找的Object.values不是.keys.

const MyEnum = {
    Aaa: 1,
    Bbb: 84,
};

Object.values(MyEnum); // -> [ 1, 84 ]
Object.keys(MyEnum);   // -> [ "Aaa", "Bbb" ]