1 | import { setStoryTimeout } from '../../../utils/test_utils';
|
2 | import readme from './animated_number.md';
|
3 | import GlAnimatedNumber from './animated_number.vue';
|
4 |
|
5 | const template = `
|
6 | <div>
|
7 | <gl-animated-number :number="updatedNumber" :decimalPlaces="decimalPlaces" :duration="duration" :animateOnMount="animateOnMount"/>
|
8 | <button @click="updateNumber">Update number</button>
|
9 | </div>
|
10 | `;
|
11 |
|
12 | const defaultValue = (prop) => GlAnimatedNumber.props[prop].default;
|
13 |
|
14 | const generateProps = ({
|
15 | initialNumber = 100,
|
16 | decimalPlaces = defaultValue('decimalPlaces'),
|
17 | duration = 1000,
|
18 | animateOnMount = defaultValue('animateOnMount'),
|
19 | } = {}) => ({
|
20 | initialNumber,
|
21 | decimalPlaces,
|
22 | duration,
|
23 | animateOnMount,
|
24 | });
|
25 |
|
26 | const Template = (args, { argTypes }) => ({
|
27 | components: { GlAnimatedNumber },
|
28 | props: Object.keys(argTypes),
|
29 | template,
|
30 | data() {
|
31 | return {
|
32 | isLoading: false,
|
33 | loadTimer: null,
|
34 | updatedNumber: this.initialNumber,
|
35 | };
|
36 | },
|
37 | methods: {
|
38 | loadView() {
|
39 | clearTimeout(this.loadTimer);
|
40 | this.isLoading = true;
|
41 | this.loadTimer = setStoryTimeout(() => {
|
42 | this.isLoading = false;
|
43 | }, 1500);
|
44 | },
|
45 | updateNumber() {
|
46 | this.updatedNumber = Math.floor(Math.random() * 100);
|
47 | },
|
48 | },
|
49 | mounted() {
|
50 | this.loadView();
|
51 | },
|
52 | });
|
53 |
|
54 | export const InitialAnimate = Template.bind({});
|
55 | InitialAnimate.args = generateProps({
|
56 | animateOnMount: true,
|
57 | });
|
58 |
|
59 | export const Default = Template.bind({});
|
60 | Default.args = generateProps();
|
61 |
|
62 | export default {
|
63 | title: 'utilities/animated-number',
|
64 | component: GlAnimatedNumber,
|
65 | parameters: {
|
66 | docs: {
|
67 | description: {
|
68 | component: readme,
|
69 | },
|
70 | },
|
71 | },
|
72 | argTypes: {},
|
73 | };
|