79 lines
1.2 KiB
JavaScript
79 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import ETCoreRange from '../../controls/range/range';
|
|
|
|
|
|
export default {
|
|
title: 'Controls/ETCoreRange',
|
|
component: ETCoreRange,
|
|
render: (args) => {
|
|
const { range_min: min, range_max: max, range_step: step } = args;
|
|
return (
|
|
<ETCoreRange
|
|
{...args}
|
|
value={min}
|
|
_onChange={(e) => {
|
|
console.log(e);
|
|
}}
|
|
range_settings={{
|
|
min,
|
|
max,
|
|
step,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
argTypes: {
|
|
range_settings: {
|
|
control: false,
|
|
},
|
|
range_min: {
|
|
control: {
|
|
type: 'number',
|
|
},
|
|
},
|
|
range_max: {
|
|
control: {
|
|
type: 'number',
|
|
},
|
|
},
|
|
range_step: {
|
|
control: {
|
|
type: 'number',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
|
|
export const Default = {
|
|
args: {
|
|
name: 'default-range',
|
|
range_min: 0,
|
|
range_max: 100,
|
|
range_step: 1,
|
|
},
|
|
};
|
|
|
|
export const WithCustomUnit = {
|
|
args: {
|
|
...Default.args,
|
|
name: 'custom-unit-range',
|
|
default_unit: '%',
|
|
},
|
|
};
|
|
|
|
export const WithCustomRange = {
|
|
args: {
|
|
...Default.args,
|
|
name: 'custom-range',
|
|
},
|
|
};
|
|
|
|
export const WithPrecision = {
|
|
args: {
|
|
...Default.args,
|
|
name: 'precision-range',
|
|
precision: 2,
|
|
},
|
|
};
|