weex-nuke/lib/node_modules/nuke-radio/src/styles/index.js

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

import { rem, layout } from 'nuke-helper';
import VariableMix from './variable';

const { caculateRemToPx } = rem;
const { alignCenter } = layout;
function StyleMix(theme = {}) {
  const Variables = VariableMix(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,
      },
    },
  };
}

export default StyleMix;