TypeScript react.addDecorator函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@storybook/react.addDecorator函数的典型用法代码示例。如果您正苦于以下问题：TypeScript addDecorator函数的具体用法？TypeScript addDecorator怎么用？TypeScript addDecorator使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了addDecorator函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: makeDecorator

import addons, { makeDecorator } from "@storybook/addons";
import { addDecorator, storiesOf } from "@storybook/react";

// Example from Storybook documentation
const withNotes = makeDecorator({
    name: "withNotes",
    parameterName: "notes",
    wrapper: (getStory, context, {options, parameters}: {options: number, parameters: string}) => {
        const channel = addons.getChannel();
        channel.emit("MYADDON/add_notes", parameters);
        return getStory(context);
    }
});

// new style
addDecorator(withNotes);

// old style, but still supported
addDecorator(withNotes(42));

// the deprecated style actually isn't supported by
// @storybook/react's typings, so, no test for that...
storiesOf("Hello", module)
    .addDecorator(withNotes)        // new style
    .addDecorator(withNotes(42));   // old style, but still supported

开发者ID:MrBigDog2U，项目名称:DefinitelyTyped，代码行数:25，代码来源:storybook__addons-tests.ts

示例2: addDecorator

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withTheme } from '../src/utils/storybook/withTheme';

import '../../../public/sass/grafana.light.scss';

// automatically import all files ending in *.stories.tsx
const req = require.context('../src/components', true, /.story.tsx$/);

addDecorator(withKnobs);
addDecorator(withTheme);

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);

开发者ID:CorpGlory，项目名称:grafana，代码行数:17，代码来源:config.ts

示例3: addDecorator

import '../../../public/vendor/flot/jquery.flot.fillbelow';
import '../../../public/vendor/flot/jquery.flot.crosshair';
import '../../../public/vendor/flot/jquery.flot.dashes';
import '../../../public/vendor/flot/jquery.flot.gauge';
// @ts-ignore
import lightTheme from '../../../public/sass/grafana.light.scss';
// @ts-ignore
import darkTheme from '../../../public/sass/grafana.dark.scss';

const handleThemeChange = (theme: string) => {
  if (theme !== 'light') {
    lightTheme.unuse();
    darkTheme.use();
  } else {
    darkTheme.unuse();
    lightTheme.use();
  }
};
// automatically import all files ending in *.stories.tsx
const req = require.context('../src/components', true, /.story.tsx$/);

addDecorator(withKnobs);
addDecorator(withPaddedStory);
addDecorator(withTheme(handleThemeChange));

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);

开发者ID:grafana，项目名称:grafana，代码行数:30，代码来源:config.ts

示例4: addDecorator

import { addDecorator } from '@storybook/react';
import { setOptions, withOptions } from '@storybook/addon-options';

addDecorator(
  withOptions({
    name: 'My Storybook',
    url: 'https://example.com',
    goFullScreen: false,
    showStoriesPanel: false,
    showAddonPanel: false,
    showSearchBox: false,
    addonPanelInRight: false,
    sortStoriesByKind: false,
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/,
    sidebarAnimations: false,
    selectedAddonPanel: 'storybook/actions/action-panel',
    enableShortcuts: false
  })
);

setOptions({
  name: 'My Storybook',
  url: 'https://example.com',
  goFullScreen: false,
  showStoriesPanel: false,
  showAddonPanel: false,
  showSearchBox: false,
  addonPanelInRight: false,
  sortStoriesByKind: false,
  hierarchySeparator: /\//,

开发者ID:Jeremy-F，项目名称:DefinitelyTyped，代码行数:31，代码来源:storybook__addon-options-tests.ts

示例5: setOptions

import { setOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';

setOptions({
	name: 'Storybook',
	goFullScreen: false,
	showStoriesPanel: true,
	showAddonsPanel: true,
	showSearchBox: false,
	addonPanelInRight: true,
	sortStoriesByKind: false,
	hierarchySeparator: /\./,
	hierarchyRootSeparator: /\|/,
} as any);

addDecorator(withKnobs);

declare var SRC_PATH: string;

console.log('sdrs=>', SRC_PATH);

const req = require.context(SRC_PATH, true, /\.page\.tsx$/);

configure(function() {
	req
		.keys()
		.sort(function(a, b) {
			return a.toLowerCase().localeCompare(b.toLowerCase());
		})
		.forEach(req);
}, module);

开发者ID:sutarmin，项目名称:dx-platform，代码行数:31，代码来源:config.ts

注：本文中的@storybook/react.addDecorator函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。