Могу ли я создать ручку в React Storybook, чтобы изменить массив с 4 значениями, где каждое значение имеет выпадающий список? - PullRequest
Новая
       6

Могу ли я создать ручку в React Storybook, чтобы изменить массив с 4 значениями, где каждое значение имеет выпадающий список?

0 голосов
/ 10 ноября 2018

Я использую React Storybook (https://github.com/storybooks/storybook/tree/next/app/react) для написания историй для моих компонентов пользовательского интерфейса, и я использую аддон knobs (https://github.com/storybooks/storybook/tree/next/addons/knobs) для создания редактируемых реквизитов в реальном времени ...

Мое приложение написано с использованием потоковых типов, поэтому мои реквизиты являются типами, я определил этот тип для работы с моей темой: 

export type BoxModel =
  | [ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0];

так что идея в том, что я могу определить отступ или маржу для компонента, используя массив значений моей темы

это моя тема: 

spacing: {
    xxSmall: '2px',
    xSmall: '4px',
    small: '8px',
    medium: '12px',
    larger: '16px',
    large: '24px',
    xLarge: '32px',
    xxLarge: '48px',
},

реквизиты моего компонента (несколько из них) 

export type LinkStyleProps = {
  theme?: Theme,
  padding?: BoxModel,
  margin?: BoxModel,
};

Таким образом, я могу в основном определить margin и padding для моего компонента, используя массив, подобный ['small', 'medium', 'xsmall'] и т. Д., Очень похоже на сокращение css

Есть ли способ создать Knob, который может иметь этот массив и иметь возможность выбора каждого поля с помощью выбора?

1 Ответ

0 голосов
/ 10 ноября 2018

Это определенно возможно сделать с помощью ручек Storybook. Вы можете использовать что-то вроде примера ниже. Вы можете сделать дополнительную логику, чтобы построить массив с менее чем 4 элементами, если вы хотите, вам просто понадобится опция в select, чтобы указать это и динамически построить массив. 

storiesOf("YourComponent", module)
  .add("with knobs", () => {
    const options = {
      none: '0',
      xxSmall: 'xxSmall',
      xSmall: 'xSmall',
      small: 'small',
      // etc.
    };
    const top = select('Top', options, '0');
    const right = select('Right', options, '0');
    const bottom = select('Bottom', options, '0');
    const left = select('Left', options, '0');
    return <YourComponent yourProp={[top, right, bottom, left]} />;
  });
...