import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: '',
    theme: '',
    themeVariant: ''
};

const fromValues = [];
let toValues = [];

for (let i = 0; i <= 1000; i += 20) {
    fromValues.push({
        display: '$' + i,
        value: i
    });
}

toValues = fromValues.slice();
toValues.shift();
toValues.push({
    display: 'over $1000'
});

const wheels = [
    [{
        circular: false,
        data: fromValues,
        label: 'From'
    }, {
        circular: false,
        data: toValues,
        label: 'To'
    }]
];

class App extends React.Component {
    validate = (event, inst) => {
        const values = event.values;
        const disabledValues = [];

        for (let i = 0; i < toValues.length; ++i) {
            if (toValues[i].value <= values[0]) {
                disabledValues.push(toValues[i].value);
            }
        }

        return {
            disabled: [
                [], disabledValues
            ]
        }
    }
    formatValue = (data) => {
        return '$' + data[0] + ' -  $' + data[1];
    }
    parseValue = (valueText) => {
        if (valueText) {
            return valueText.replace(/\s/gi, '').split('-');
        }
        return [0, 20];
    }
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.Scroller
                    display="inline"
                    type="hidden"
                    width={150}
                    wheels={wheels}
                    showLabel={true}
                    validate={this.validate}
                    formatValue={this.formatValue}
                    parseValue={this.parseValue}
                    placeholder="Please Select..."
                />
            </mobiscroll.Form>
            
        );
    }
}

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: '',
    theme: '',
    themeVariant: ''
};

const units = ['oz', 'g', 'serving'];
let prevUnit = 'oz';
const wheel = [
    [{
        circular: false,
        data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
    }, {
        circular: false,
        data: ['-', '1/4', '1/2', '3/4']
    }, {
        circular: false,
        data: units
    }]
];
            
class App extends React.Component {
    validate = (event, inst) => {
        let mult = 1;
        const index = event.index;
        const currUnit = event.values[2];
        const disabled = [];

        if (currUnit == 'g' && (prevUnit == 'oz' || prevUnit == 'serving')) {
            mult = 28;
        } else if ((currUnit != 'oz' || currUnit != 'serving') && prevUnit == 'g') {
            mult = 1 / 28;
        }

        if (currUnit != 'serving') {
            disabled.push('1/4', '1/2', '3/4');
        }

        if (index == 2 && currUnit != prevUnit) {
            for (let i = 0; i < wheel[0][0].data.length; ++i) {
                wheel[0][0].data[i] = Math.round(wheel[0][0].data[i] * mult);
            }

            inst.settings.wheels = wheel;
            inst._tempWheelArray[0] = inst._tempWheelArray[0] * mult;
            inst.changeWheel({
                0: wheel[0][0]
            });

            prevUnit = currUnit;
        }

        return {
            disabled: [
                [], disabled, []
            ]
        }
    }
    parseValue = (val) => {
        let hasUnit = false;
        
        if (val) {
            val = val.toString().split(' ');
            hasUnit = units.indexOf(val[1]) !== -1;
            return [val[0], (hasUnit ? '' : val[1].replace('-', '')), (hasUnit ? val[1] : val[2])];
        }

        return [0, '-', 'oz'];
    }
    formatValue = (data) => {
        return (data[2] == 'serving' && data[0] == 0 && data[1] ? '' : data[0]) + (data[1] ? ' ' + data[1].replace('-', '') : '') + ' ' + data[2];
    }
    render() {
        return (
            <div>
                <mobiscroll.Scroller
                    display="inline"
                    type="hidden"
                    wheels={wheel}
                    validate={this.validate}
                    parseValue={this.parseValue}
                    formatValue={this.formatValue}
                    placeholder="Please Select..."
                />
            </div>
        );
    }    
}

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: '',
    theme: '',
    themeVariant: ''
};

const fromValues = ['Before 1960', 1970, 1980, 1990, 1995, 2000, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015];
const toValues = [1970, 1980, 1990, 1995, 2000, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016];
const wheels = [
    [{
        circular: false,
        data: fromValues,
        label: 'From'
    }, {
        circular: false,
        data: toValues,
        label: 'To'
    }]
];

class App extends React.Component {
    validate = (event, inst) => {
        const values = event.values;
        const disabledValues = [];

        for (let i = 0; i < toValues.length; ++i) {
            if (toValues[i] <= values[0]) {
                disabledValues.push(toValues[i]);
            }
        }

        return {
            disabled: [
                [], disabledValues
            ]
        }
    }
    formatValue = (data) => {
        return data[0] + ' - ' + data[1];
    }
    parseValue = (valueText) => {
        if (valueText) {
            return valueText.replace(/\s/gi, '').split('-');
        }
        return [1990, 2010];
    }
    render() {
        return (
            <div>
                <mobiscroll.Scroller
                    display="inline"
                    type="hidden"
                    rows={12}
                    wheels={wheels}
                    showLabel={true}
                    minWidth={130}
                    validate={this.validate}
                    formatValue={this.formatValue}
                    parseValue={this.parseValue}
                    placeholder="Please Select..."
                />
            </div>
        );
    }    
}

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: '',
    theme: '',
    themeVariant: ''
};

class App extends React.Component {
    show = () => {
        this.scroller.instance.show();
    }
    
    clear = () => {
        this.scroller.instance.clear();
    }
    onInit = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onMarkupReady = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onBeforeShow = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onPosition = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onShow = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onSet = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onItemTap = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onDestroy = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onClose = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onCancel = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onBeforeClose = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onClear = (event, inst) => {
        // Your custom event handler goes here
    }
    
    onChange = (event, inst) => {
        // Your custom event handler goes here
    }
    
    validate = (data, inst) => {
        // Your custom event handler goes here
    }
    
    setRef = (comp) => {
        this.scroller = comp;
    }
    
    render() {
        const wheels = [
            [{
                data: ['0', '1', '2', '3', '4', '5', '6', '7']
            }, {
                data: [{
                    value: 0,
                    display: 'a'
                }, {
                    value: 1,
                    display: 'b'
                }, {
                    value: 2,
                    display: 'c'
                }, {
                    value: 3,
                    display: 'd'
                }]
            }]
        ];
        return (
             <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.Scroller 
                        ref={this.setRef}
                        onInit={this.onInit}
                        onMarkupReady={this.onMarkupReady}
                        onBeforeShow={this.onBeforeShow}
                        onPosition={this.onPosition}
                        onShow={this.onShow}
                        onSet={this.onSet}
                        onItemTap={this.onItemTap}
                        onDestroy={this.onDestroy}
                        onClose={this.onClose}
                        onCancel={this.onCancel}
                        onBeforeClose={this.onBeforeClose}
                        onClear={this.onClear}
                        onChange={this.onChange}
                        validate={this.validate}
                        wheels={wheels}
                        placeholder="Please Select..."
                        placeholder="Please Select..."
                    >
                        <mobiscroll.Input inputStyle="box" labelStyle="stacked" placeholder="Please Select..." />
                    </mobiscroll.Scroller>
                    <div className="mbsc-btn-group">
                        <button type="button" onClick={this.clear}>Clear</button>
                        <button type="button" onClick={this.show}>Show</button>
                    </div>
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

mobiscroll.settings = {
    lang: '',
    theme: '',
    themeVariant: ''
};

const wheels = [
    [{
        label: 'First wheel',
        data: ['0', '1', '2', '3', '4', '5', '6', '7']
    }, {
        label: 'Second wheel',
        data: [{
            value: 0,
            display: 'a'
        }, {
            value: 1,
            display: 'b'
        }, {
            value: 2,
            display: 'c'
        }, {
            value: 3,
            display: 'd'
        }]
    }]
];

class App extends React.Component {
    render() {
        return (
            <mobiscroll.Form >
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Try different display modes</mobiscroll.FormGroupTitle>
                    <mobiscroll.Scroller display="bottom" wheels={wheels}>
						<mobiscroll.Input placeholder="Please Select...">Bottom</mobiscroll.Input>
					</mobiscroll.Scroller>
					<mobiscroll.Scroller display="top" wheels={wheels}>
						<mobiscroll.Input placeholder="Please Select...">Top</mobiscroll.Input>
					</mobiscroll.Scroller>
					<mobiscroll.Scroller display="center" wheels={wheels}>
						<mobiscroll.Input placeholder="Please Select...">Center</mobiscroll.Input>
					</mobiscroll.Scroller>
					<mobiscroll.Scroller display="bubble" wheels={wheels}>
						<mobiscroll.Input placeholder="Please Select...">Bubble</mobiscroll.Input>
					</mobiscroll.Scroller>
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup className="mbsc-padding">
                    <p className="mbsc-thin">With inline display you can embed the Scroller component in almost any markup or form.</p>
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Embedded scroller picker</mobiscroll.FormGroupTitle>
                    <mobiscroll.Scroller type="hidden" display="inline" wheels={wheels} />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }   
}