161 lines
3.7 KiB
JavaScript
161 lines
3.7 KiB
JavaScript
// External dependencies.
|
|
import React from 'react';
|
|
import { useArgs } from '@storybook/preview-api';
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
// Internal dependencies.
|
|
import ETBuilderControlSelectAdvanced from '../../controls/select-advanced/select-advanced';
|
|
|
|
// Define the default metadata for the story
|
|
export default {
|
|
title: 'Controls/Select Advanced',
|
|
component: ETBuilderControlSelectAdvanced,
|
|
render: args => {
|
|
const [, updateArgs] = useArgs();
|
|
|
|
const handleOnChange = (attrName, selectedValue) => {
|
|
action('changed')(attrName, selectedValue);
|
|
updateArgs({ value: selectedValue });
|
|
}
|
|
|
|
return (
|
|
<div style={{ width: '300px' }}>
|
|
<ETBuilderControlSelectAdvanced
|
|
{...args}
|
|
_onChange={handleOnChange}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
argTypes: {
|
|
options: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
onOpen: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
onClose: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
labelFilter: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
onChange: {
|
|
action: 'changed',
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
beforeList: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
afterList: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
getSvgContent: {
|
|
table: {
|
|
disable: true,
|
|
}
|
|
},
|
|
value: { control: 'text' },
|
|
},
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
label: 'Select Advanced',
|
|
options: ['Apple', 'Banana', 'Orange'],
|
|
name: 'default',
|
|
value: '',
|
|
},
|
|
};
|
|
|
|
export const OptionsObject = {
|
|
args: {
|
|
...Default.args,
|
|
label: 'Object Options',
|
|
options: {
|
|
Apple: 'Apple',
|
|
Banana: 'Banana',
|
|
Orange: 'Orange',
|
|
},
|
|
},
|
|
};
|
|
|
|
export const OptionsWithSubOptions = {
|
|
args: {
|
|
...Default.args,
|
|
label: 'Sub Options',
|
|
options: {
|
|
Vegetable: {
|
|
Tomato: 'Tomato',
|
|
Carrot: 'Carrot',
|
|
},
|
|
Fruits: {
|
|
Apple: 'Apple',
|
|
Banana: 'Banana',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const FirstNotSelected = {
|
|
args: {
|
|
...Default.args,
|
|
selectFirst: false,
|
|
emptyLabel: 'Please select an option...',
|
|
value: undefined
|
|
}
|
|
}
|
|
|
|
|
|
export const Searchable = {
|
|
args: {
|
|
...Default.args,
|
|
searchable: true,
|
|
}
|
|
}
|
|
|
|
export const ActiveOnLoad = {
|
|
args: {
|
|
...Default.args,
|
|
activeOnLoad: true,
|
|
},
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
},
|
|
}
|
|
|
|
export const BeforeAndAfterList = {
|
|
args: {
|
|
...Default.args,
|
|
beforeList: () => 'Before Fruits List',
|
|
afterList: () => 'After Fruits List',
|
|
}
|
|
}
|
|
|
|
export const AdditionalContentFirst = {
|
|
args: {
|
|
...Default.args,
|
|
additionalContentFirst: true,
|
|
getSvgContent: () => {
|
|
return (
|
|
<svg height="18.516px" id="Capa_1" version="1.1" viewBox="0 0 80 88.516" width="30px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M63.254,36.822C51.852,12.287,45.926,2.97,27.295,3.355c-6.635,0.137-5.041-4.805-10.1-2.93 c-5.055,1.876-0.717,4.62-5.889,8.863C-3.207,21.2-1.869,32.221,4.861,58.487c2.838,11.062-6.836,11.605-3.008,22.33 c2.793,7.819,23.393,11.093,45.127,3.028c21.734-8.063,35.453-24.07,32.66-31.889C75.811,41.231,68.059,47.152,63.254,36.822z M44.621,77.238c-19.41,7.202-35.363,2.965-36.037,1.083C7.422,75.073,14.85,64.24,37.041,56.005 c22.193-8.234,34.576-5.181,35.871-1.553C73.678,56.594,64.033,70.036,44.621,77.238z M38.383,59.764 c-10.148,3.766-17.201,8.073-21.764,11.951c3.211,2.918,9.23,3.63,15.23,1.404c7.637-2.833,12.326-9.337,10.471-14.526 c-0.021-0.063-0.055-0.119-0.078-0.181C40.99,58.826,39.705,59.274,38.383,59.764z"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|