@create-figma-plugin/ui
Version:
Production-grade Preact components that replicate the Figma UI design
89 lines • 3.33 kB
JavaScript
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { useInitialFocus } from '../../../hooks/use-initial-focus/use-initial-focus.js';
import { IconTextAlignCenter24 } from '../../../icons/icon-24/icon-text-align-center-24.js';
import { IconTextAlignLeft24 } from '../../../icons/icon-24/icon-text-align-left-24.js';
import { IconTextAlignRight24 } from '../../../icons/icon-24/icon-text-align-right-24.js';
import { SegmentedControl } from '../segmented-control.js';
export default { title: 'Components/Segmented Control' };
export const Passive = function () {
const [value, setValue] = useState('bar');
const options = [
{ value: 'foo' },
{ value: 'bar' },
{ value: 'baz' }
];
function handleChange(event) {
const newValue = event.currentTarget.value;
console.log(newValue);
setValue(newValue);
}
return (h(SegmentedControl, { onChange: handleChange, options: options, value: value }));
};
export const Focused = function () {
const [value, setValue] = useState('bar');
const options = [
{ value: 'foo' },
{ value: 'bar' },
{ value: 'baz' }
];
function handleChange(event) {
const newValue = event.currentTarget.value;
console.log(newValue);
setValue(newValue);
}
return (h(SegmentedControl, { ...useInitialFocus(), onChange: handleChange, options: options, value: value }));
};
export const Disabled = function () {
const options = [
{ value: 'foo' },
{ value: 'bar' },
{ value: 'baz' }
];
function handleChange() {
throw new Error('This function should not be called');
}
return (h(SegmentedControl, { disabled: true, onChange: handleChange, options: options, value: "bar" }));
};
export const DisabledOption = function () {
const [value, setValue] = useState('bar');
const options = [
{ value: 'foo' },
{ value: 'bar' },
{ disabled: true, value: 'baz' }
];
function handleChange(event) {
const newValue = event.currentTarget.value;
console.log(newValue);
setValue(newValue);
}
return (h(SegmentedControl, { onChange: handleChange, options: options, value: value }));
};
export const IconChildren = function () {
const [value, setValue] = useState('align-left');
const options = [
{ children: h(IconTextAlignLeft24, null), value: 'align-left' },
{ children: h(IconTextAlignCenter24, null), value: 'align-center' },
{ children: h(IconTextAlignRight24, null), value: 'align-right' }
];
function handleChange(event) {
const newValue = event.currentTarget.value;
console.log(newValue);
setValue(newValue);
}
return (h(SegmentedControl, { onChange: handleChange, options: options, value: value }));
};
export const OnValueChange = function () {
const [value, setValue] = useState('bar');
const options = [
{ value: 'foo' },
{ value: 'bar' },
{ value: 'baz' }
];
function handleValueChange(newValue) {
console.log(newValue);
setValue(newValue);
}
return (h(SegmentedControl, { onValueChange: handleValueChange, options: options, value: value }));
};
//# sourceMappingURL=segmented-control.stories.js.map