How to use the san.defineComponent function in san

/* eslint-disable */
const template = `<div class="{{mainClass}}">
    <ul>
        <li class="{{item | itemClass(value)}}">
          <div class="${cx2('item-hover')}">{{item.tip}}<br></div>
          <div class="arrow-down"><i></i></div>
          {{item.text}}
        </li>
    </ul>
</div>`;
/* eslint-enable */

const RadioSelect = defineComponent({
    template,
    computed: {
        mainClass() {
            return cx.mainClass(this);
        }
    },
    filters: {
        itemClass(item, value) {
            const klass = [cx2('block')];

            if (item.disabled) {
                klass.push(cx2('disabled'));
            }

            if (item.value === value) {
                klass.push(cx2('selected'));

const createComponent = function (options) {
        let Component = san.defineComponent(
            Object.assign({
                components: {
                    'ui-list': List,
                    'ui-list-item': ListItem,
                    'ui-icon': Icon
                },
                initData() {
                    return {};
                }
            }, options)
        );
        let component = new Component();
        component.attach(viewport);
        return component;
    };

function padEnd(string, length, chars) {
    let strLength = length ? string.length : 0;
    let l = length - strLength;
    let padding = '';

    while (l--) {
        padding += chars;
    }

    return (length && strLength < length)
        ? (string + padding)
        : string;
}

export default san.defineComponent({
    dataTypes: {
        decimalSeparator: DataTypes.string,
        formatter: DataTypes.func,
        groupSeparator: DataTypes.string,
        precision: DataTypes.number,
        prefix: DataTypes.string,
        suffix: DataTypes.string,
        title: DataTypes.string,
        value: DataTypes.oneOfType([DataTypes.string, DataTypes.number])
    },
    template: `
        <div class="${prefixCls}">
            <div class="${prefixCls}-title">{{title}}</div>
            <div style="{{valueStyle}}" class="${prefixCls}-content">
                <span class="${prefixCls}-content-prefix">
                    {{prefix}}</span></div></div>

/**
 * @file Santd full calendar source file
 * @author mayihui@baidu.com
 **/

import san from 'san';
import Base from './base';
import DateTable from './date/dateTable';
import MonthTable from './month/monthTable';
import inherits from '../../core/util/inherits';
import moment from 'moment';

export default inherits(san.defineComponent({
    components: {
        's-datetable': DateTable,
        's-monthtable': MonthTable
    },
    initData() {
        return {
            defaultType: 'date',
            fullscreen: false,
            showTypeSwitch: true,
            showHeader: true
        };
    },
    inited() {
        const type = this.data.get('type');
        const defaultType = this.data.get('defaultType');
        const value = this.data.get('value');

const generator = function ({suffixCls, tagName}) {
    const prefixCls = classCreator(suffixCls)();
    const template = `
        <${tagName} class="{{classes}}">
    `;
    const baseComponent = san.defineComponent({
        computed: {
            classes() {
                const prefixCls = this.data.get('prefixCls');
                const className = this.data.get('className');
                const hasSider = this.data.get('hasSider');
                let classArr = [className, prefixCls];
                let siderRes = typeof hasSider === 'boolean' ? hasSider : this.data.get('siders').length > 0;
                siderRes && classArr.push(`${prefixCls}-has-sider`);
                return classArr;
            }
        },
        messages: {
            santd_layout_addSider(payload) {
                this.data.push('siders', payload.value);
            },
            santd_layout_removeSider(payload) {

/**
* @file input 输入框组件
* @author fuqiangqiang@baidu.com
*/

import san, {DataTypes} from 'san';
import {classCreator} from '../core/util';
import './style/index.less';
import BaseInput from './base';
import Icon from '../icon';
const prefixCls = classCreator('input')();

export default san.defineComponent({
    dataTypes: {
        addonAfter: DataTypes.string,
        addonBefore: DataTypes.string,
        prefix: DataTypes.string,
        suffix: DataTypes.string,
        defaultValue: DataTypes.any,
        placeholder: DataTypes.string,
        disabled: DataTypes.bool,
        inputType: DataTypes.oneOf(['inputGroup', 'inputFix']),
        id: DataTypes.oneOfType([DataTypes.string, DataTypes.number]),
        size: DataTypes.oneOf(['large', 'default', 'small']),
        type: DataTypes.string,
        value: DataTypes.any
    },

    components: {

function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
    const points = align.points;
    for (const placement in builtinPlacements) {
        if (builtinPlacements.hasOwnProperty(placement)) {
            if (isPointsEq(builtinPlacements[placement].points, points, isAlignPoint)) {
                return `${prefixCls}-placement-${placement}`;
            }
        }
    }
    return '';
}

let documentEventListener = null;

export default san.defineComponent({
    dataTypes: {
        action: DataTypes.oneOfType([DataTypes.string, DataTypes.array]),
        showAction: DataTypes.array,
        hideAction: DataTypes.array,
        getPopupClassNameFromAlign: DataTypes.func,
        popupStyle: DataTypes.oneOfType([DataTypes.string, DataTypes.object]),
        prefixCls: DataTypes.string,
        popupClassName: DataTypes.string,
        popupPlacement: DataTypes.string,
        builtinPlacements: DataTypes.object,
        popupTransitionName: DataTypes.oneOfType([DataTypes.string, DataTypes.object]),
        popupAnimation: DataTypes.object,
        mouseEnterDelay: DataTypes.number,
        mouseLeaveDelay: DataTypes.number,
        zIndex: DataTypes.number,
        focusDelay: DataTypes.number,

define(function (require) {
    var san = require('san');

    var $ = require('jquery');
    var layerTemplate = require('tpl!./TimePickerLayer.html');
    var Layer = san.defineComponent({
        template: layerTemplate,

        tagName: 'ul',

        itemClick: function (item) {
            this.fire('valueChange', item.value);
        }
    });


    return san.defineComponent({
        template: '<template class="ui-timepicker">{{ value | valueText }}</template>',

        filters: {
            valueText: function (value) {
                var datasource = this.data.get('datasource');

import MonthView from './components/MonthView';
import Calendar from './components/Calendar';
import Toast from './components/Toast';
import Tip from './components/Tip';
import Icon from './components/Icon';
import BosUploader from './components/BosUploader';
import RangeCalendar from './components/RangeCalendar';

const Row = defineComponent({
    template: `<div class="x-row">
        <div class="label">{{label}}</div>
        <div class="content"></div>
    </div>`
});

const Section = defineComponent({
    template: `<fieldset class="x-section">
        <legend>{{open ? '[-]' : '[+]'}}{{label}}</legend>
        <div></div>
    </fieldset>`,

    toggleViewport() {
        const open = this.data.get('open');
        this.data.set('open', !open);
    },

    initData() {
        return {
            open: true
        };
    }
});

/**
 * @file 组件 radio
 * @author chenkai13 
 */

import './style/index.less';
import san from 'san';
import {classCreator} from '../core/util';
import Radio from './radio';
const prefixCls = classCreator('radio-button')();

export default san.defineComponent({
    initData() {
        return {
            ...Radio.prototype.initData(),
            prefixCls
        };
    }
}, Radio);