packages-rc/console-base-rc-tooltip/stories/knobs/index.tsx (94 lines of code) (raw):

import { useMemo, useEffect } from 'react'; import { text, number, boolean, optionsKnob } from '@storybook/addon-knobs'; import { TooltipProps, TooltipPlacement, TooltipTheme } from '../../src'; interface IKnobProps extends TooltipProps { config?: boolean; } interface IProps { onChange(props: IKnobProps): void; } function optional<T>({ value, inUse }: { value: T; inUse: boolean; }): T | undefined { return inUse ? value : undefined; } function omitUndefined(o: any): IKnobProps { const props = {} as any; for (const k in o) { // eslint-disable-next-line no-prototype-builtins if (o.hasOwnProperty(k) && o[k] !== undefined) { props[k] = o[k]; } } return props as IKnobProps; } export default function Knobs({ onChange }: IProps): null { const title = text('props.title', 'Tooltip Title'); const content = text('props.content', 'Tooltip content - must - Nothing lasts forever, even cold November rain..'); const theme = optional<TooltipTheme>({ value: optionsKnob<TooltipTheme>('props.theme', TooltipTheme, TooltipTheme.ACCENT, { display: 'inline-radio' }), inUse: boolean('启用 props.theme', true) }); const placement = optional<TooltipPlacement>({ value: optionsKnob<TooltipPlacement>('props.placement', TooltipPlacement, TooltipPlacement.TOP_LEFT, { display: 'inline-radio' }), inUse: boolean('启用 props.placement', true) }); const arrow = boolean('props.arrow', true); const arrowOffset = number('props.arrowOffset', 0); const closable = boolean('props.closable', true); const autoClose = boolean('props.autoClose', false); const autoCloseKey = text('props.autoCloseKey', 'AUTO_CLOSE_KEY_1'); const autoCloseCounter = boolean('props.autoCloseCounter', true); const config = boolean('+ onConfig', true); const props = useMemo(() => omitUndefined({ title, content, theme, placement, arrow, arrowOffset: arrowOffset > 0 ? arrowOffset : undefined, closable, autoClose, autoCloseKey, autoCloseCounter, config }), [ title, content, theme, placement, arrow, arrowOffset, closable, autoClose, autoCloseKey, autoCloseCounter, config ]); useEffect(() => onChange(props), [onChange, props]); return null; } export type { IKnobProps as KnobProps };