weex-nuke/lib/Radio/styles/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _nukeHelper = require('../../Helper/index.js');

var _variable = require('./variable.js');

var _variable2 = _interopRequireDefault(_variable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var caculateRemToPx = _nukeHelper.rem.caculateRemToPx;
var alignCenter = _nukeHelper.layout.alignCenter;

function StyleMix() {
  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var Variables = (0, _variable2.default)(theme);
  return {
    Radio: {
      'touch-small': {
        width: Variables['small-touch-width'],
        height: Variables['small-touch-height'],
        justifyContent: 'center',
        alignItems: 'center'
      },
      'touch-medium': {
        width: Variables['medium-touch-width'],
        height: Variables['medium-touch-height'],
        justifyContent: 'center',
        alignItems: 'center'
      },
      'wrap-small': {
        justifyContent: 'center',
        alignItems: 'center',
        borderStyle: Variables['border-style'],
        width: Variables['small-size'],
        height: Variables['small-size'],
        borderRadius: Variables['border-radius']
      },
      'wrap-medium': {
        borderStyle: Variables['border-style'],
        width: Variables['medium-size'],
        height: Variables['medium-size'],
        borderRadius: Variables['border-radius'],
        justifyContent: 'center',
        alignItems: 'center'
      },

      'wrap-normal': {
        borderWidth: Variables['normal-border-width'],
        borderColor: Variables['normal-border-color'],
        backgroundColor: Variables['normal-bg-color']
      },
      'wrap-dot': {
        borderWidth: Variables['dot-border-width'],

        borderColor: Variables['dot-border-color'],
        backgroundColor: Variables['dot-bg-color']
      },
      'wrap-empty': {
        borderWidth: Variables['empty-border-width'],
        borderColor: Variables['empty-border-color'],
        backgroundColor: Variables['empty-bg-color']
      },
      'wrap-list': {
        borderWidth: Variables['list-border-width'],
        borderColor: Variables['list-border-color'],
        backgroundColor: Variables['list-bg-color']
      },
      'wrap-normal-checked': {
        backgroundColor: Variables['normal-bg-color-selected'],
        borderColor: Variables['normal-border-color-selected']
      },
      'wrap-normal-disabled': {
        borderColor: Variables['normal-border-color-disabled'],
        backgroundColor: Variables['normal-bg-color-disabled'],
        color: Variables['normal-icon-color-disabled']
      },
      'wrap-normal-checked-disabled': {
        borderColor: Variables['normal-border-color-selected-disabled'],
        backgroundColor: Variables['normal-bg-color-selected-disabled']
      },
      'normal-inner-checked': {
        color: Variables['normal-icon-color-selected']
        // borderColor: Variables[`normal-border-color-selected`],
        // backgroundColor: Variables[`normal-bg-color-selected`],
      },

      'normal-inner-disabled': {
        color: Variables['normal-icon-color-disabled']
        // borderColor: Variables[`normal-border-color-disabled`],
        // backgroundColor: Variables[`normal-bg-color-disabled`],
      },

      'wrap-empty-checked': {
        backgroundColor: Variables['empty-bg-color-selected'],
        borderColor: Variables['empty-border-color-selected']
      },
      'wrap-empty-disabled': {
        backgroundColor: Variables['empty-bg-color-disabled'],
        borderColor: Variables['empty-border-color-disabled']
      },
      'wrap-empty-checked-disabled': {
        backgroundColor: Variables['empty-bg-color-selected-disabled'],
        borderColor: Variables['empty-border-color-selected-disabled']
      },
      'empty-inner-checked': {
        color: Variables['empty-color-selected']
      },
      'empty-inner-disabled': {
        color: Variables['empty-color-disabled']
      },

      'wrap-list-checked': {
        borderColor: Variables['list-border-color'],
        backgroundColor: Variables['list-bg-color-selected']
      },

      'wrap-list-disabled': {
        borderColor: Variables['list-border-color-disabled'],
        backgroundColor: 'transparent'
      },
      'wrap-list-checked-disabled': {
        borderColor: Variables['list-border-color-disabled'],
        backgroundColor: 'transparent'
      },
      'list-inner-checked': {
        color: Variables['list-icon-color-selected']
      },
      'list-inner-disabled': {
        color: Variables['list-border-color-disabled']
      },

      'wrap-dot-checked': {
        borderWidth: 4,
        borderStyle: Variables['dot-border-style'],
        borderColor: Variables['dot-selected-border-color'],
        backgroundColor: Variables['dot-bg-color']
      },
      'wrap-dot-disabled': {
        borderColor: Variables['dot-border-color-disabled'],
        backgroundColor: Variables['dot-bg-color-disabled']
      },
      'wrap-dot-checked-disabled': {
        color: Variables['dot-border-color-disabled'],
        borderColor: Variables['dot-border-color-disabled'],
        backgroundColor: Variables['dot-bg-color-selected-disabled']
      },

      'dot-inner': {
        backgroundColor: Variables['dot-bg-color-selected'],
        borderRadius: Variables['border-radius']
      },
      'dot-inner-small': {
        width: Variables['dot-small-size'],
        height: Variables['dot-small-size']
      },
      'dot-inner-medium': {
        width: caculateRemToPx(Variables['dot-medium-size']),
        height: caculateRemToPx(Variables['dot-medium-size'])
      },
      'dot-inner-disabled': {
        borderColor: Variables['dot-border-color-disabled'],
        backgroundColor: Variables['dot-point-bg-color-disabled']
      },
      'icon-small': {
        fontSize: Variables['icon-small']
      },
      'icon-medium': {
        fontSize: Variables['icon-medium']
      }
    },
    RadioGroup: {
      group: {
        flexDirection: 'row',
        alignItems: 'center',
        height: Variables['group-item-height'],
        width: Variables['group-item-width']
      },
      'group-small-text': {
        marginLeft: 5
      },
      'group-medium-text': {
        marginLeft: 5
      }
    }
  };
}

exports.default = StyleMix;
module.exports = exports['default'];