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

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

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 }; }

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

  var Variables = (0, _variable2.default)(theme);
  var core = theme.Core;

  return {
    Input: {
      'input-inner': {
        flex: 1
      },
      'single-wrap': {
        borderRadius: Variables['single-radius'],
        borderColor: Variables['single-line-color'],
        borderWidth: Variables['line-width'],
        borderStyle: Variables['border-style'],
        backgroundColor: Variables['bg-color'],
        height: Variables['single-height'],
        paddingLeft: Variables['single-padding-left-right'],
        paddingRight: Variables['single-padding-left-right']
      },
      'single-disabled': {
        borderColor: Variables['disabled-line-color'],
        backgroundColor: Variables['disabled-bg-color']
      },
      'md-single-disabled': {
        borderColor: Variables['disabled-line-color'],
        backgroundColor: 'transparent'
      },
      'single-disabled-input': {
        color: Variables['disabled-color']
      },
      'multiple-wrap': _extends({}, core.border(Variables['line-width'], Variables.borderStyle, Variables['multiple-borderColor']), {
        borderRadius: Variables['multiple-radius'],
        backgroundColor: Variables['bg-color'],
        height: Variables['multiple-height'],
        padding: Variables['multiple-padding']
      }),

      'multiple-disabled': {
        backgroundColor: Variables['disabled-bg-color']
      },
      'md-multiple-disabled': {
        backgroundColor: 'transparent'
      },
      'multiple-disabled-input': {
        backgroundColor: Variables['disabled-bg-color'],
        color: Variables['disabled-color']
      },

      'single-input-ele': {
        backgroundColor: 'transparent',
        color: Variables['single-color'],
        height: Variables['single-height'],
        lineHeight: Variables['single-height'],
        fontSize: Variables['single-font-size']
      },

      readonly: {
        color: Variables['readonly-color']
      },

      'multiple-input-ele': {
        fontSize: Variables['multiple-font-size'],
        backgroundColor: 'transparent',
        color: Variables['single-color'],
        lineHeight: Variables['multiple-line-height']
      },

      'single-md-wrap': {
        // position: 'relative',
        flexDirection: 'column',
        // justifyContent: 'flex-end',
        // height:
        // Variables['md-input-height'] + Variables['md-placeholder-height'],
        paddingTop: Variables['md-placeholder-small-height'],
        paddingLeft: 0,
        paddingRight: 0,
        borderRadius: Variables['md-border-radius'],
        borderColor: 'transparent',
        borderBottomWidth: Variables['md-border-top-width'],
        borderTopWidth: Variables['md-border-top-width'],
        borderLeftWidth: Variables['md-border-left-width'],
        borderRightWidth: Variables['md-border-right-width']
      },
      'static-placeholder': {
        paddingTop: 0
      },
      'md-bottom-line': {
        height: (0, _nukeHelper.fixSmallUnit)(Variables['md-line-height']),
        marginTop: Variables['md-line-margin-tb'],
        marginBottom: Variables['md-line-margin-tb'],
        backgroundColor: Variables['md-border-color']
      },
      'md-bottom-line-focus': {
        height: (0, _nukeHelper.fixSmallUnit)(Variables['md-line-focus-height']),
        marginTop: 0,
        marginBottom: 0,

        backgroundColor: Variables['md-focus-border-color']
      },
      'md-bottom-line-error': {
        height: (0, _nukeHelper.fixSmallUnit)(Variables['md-line-error-height']),
        marginTop: 0,
        marginBottom: 0,
        backgroundColor: Variables['md-error-border-color']
      },
      'md-bottom-line-disabled': {
        height: (0, _nukeHelper.fixSmallUnit)(Variables['md-line-height']),
        backgroundColor: 'transparent',
        borderBottomWidth: Variables['md-line-height'],
        borderBottomStyle: 'dotted',
        borderBottomColor: Variables['disabled-line-color']
      },

      'input-has-clear': {
        paddingRight: 36
      },
      'md-input-ele': {
        borderWidth: 0,
        padding: 0,
        zIndex: 3,
        flex: 1,
        backgroundColor: 'transparent',
        fontSize: Variables['md-input-font-size'],
        marginTop: Variables['md-input-margin-top'],
        marginBottom: Variables['md-input-margin-bottom'],
        height: Variables['md-input-height']
      },
      'multiple-md-input-ele': {
        bordeWidth: 0,
        flex: 1,
        padding: 0,

        marginTop: Variables['md-input-margin-top'],
        marginBottom: Variables['md-input-margin-top'],
        zIndex: 3,
        backgroundColor: 'transparent',
        // bottom: Variables['md-border-bottom-width'],
        lineHeight: Variables['md-input-height']
      },

      'md-error': {
        height: Variables['md-error-height'],
        justifyContent: 'center'
      },
      'md-help': {
        height: Variables['md-help-height'],
        justifyContent: 'flex-end',
        flexDirection: 'row',
        marginTop: Variables['md-help-margin-top']
      },
      'md-error-text': {
        color: Variables['md-error-text-color'],
        fontSize: Variables['md-error-text-font-size'],
        flex: 1,
        display: 'flex'
      },
      'web-normalize': {
        webkitAppearance: 'none',
        outline: 'none',
        boxSizing: 'border-box',
        width: '100%',
        border: 'none',
        resize: 'none',
        zIndex: 1
      },
      'single-count-wrap': {
        // position: 'absolute',
        alignSelf: 'flex-end',
        // bottom: Variables['single-count-bottom'],
        // right: Variables['single-count-right'],
        maxWidth: Variables['single-count-min-width']
        // flexDirection: 'row',
        // justifyContent: 'flex-end',
        // backgroundColor: 'red'
      },
      'single-count-text': {
        flex: 1,
        textAlign: 'right',
        fontSize: Variables['count-font-size'],
        color: Variables['count-color']
      },
      'count-error': {
        color: Variables['count-error-color']
      },
      'multiple-count-wrap': {
        alignSelf: 'flex-end',
        // position: 'absolute',
        // bottom: Variables['multiple-count-bottom'],
        // right: Variables['multiple-count-right'],
        maxWidth: Variables['multiple-count-min-width']
        // flexDirection: 'row',
        // justifyContent: 'flex-end',
        // backgroundColor: 'red'
      },
      'multiple-count-text': {
        flex: 1,
        textAlign: 'right',
        fontSize: Variables['count-font-size'],
        color: Variables['count-color']
      },
      'md-single-count-wrap': {
        alignSelf: 'flex-end',
        // position: 'absolute',
        // bottom: Variables['md-single-count-bottom'],
        // right: Variables['md-single-count-right'],
        maxWidth: Variables['single-count-min-width']
      },

      'md-multiple-count-wrap': {
        alignSelf: 'flex-end',
        maxWidth: Variables['multiple-count-min-width']
      },
      'md-multiple-count-text': {
        flex: 1,
        textAlign: 'right',
        fontSize: Variables['count-font-size'],
        color: Variables['count-color']
      },
      'md-clear': {
        width: Variables['md-clear-width'],
        height: Variables['md-clear-height'],
        position: 'absolute',
        top: Variables['md-clear-top'],
        right: Variables['md-clear-right'],
        zIndex: 4 // for web
      },
      'md-icon': {
        width: Variables['md-icon-width'],
        height: Variables['md-icon-height'],
        position: 'absolute',
        top: Variables['md-icon-top'],
        right: Variables['md-icon-right'],
        zIndex: 4 // for web
      },
      'clear-image': {
        width: Variables['clear-width'],
        height: Variables['clear-height']
      },

      'md-warning': {
        width: Variables['md-warning-width'],
        height: Variables['md-warning-height'],
        position: 'absolute',
        bottom: Variables['md-warning-bottom'],
        right: Variables['md-warning-right']
      },
      'single-outter': {
        // height: Variables['single-height'] + Variables['error-height'],
      },
      'multiple-outter': {
        // height: Variables['single-height'] + Variables['error-height'],
      },
      help: {
        minHeight: Variables['error-height'],
        justifyContent: 'center'
      },
      clear: {
        width: Variables['clear-width'],
        height: Variables['clear-height']
        // position: 'absolute',
        // top: Variables['clear-top'],
        // right: Variables['clear-right'],
        // zIndex: 2, // for web
      },
      clearWrap: {
        width: Variables['icon-width'],
        height: Variables['icon-height'],
        position: 'absolute',
        top: 0,
        right: Variables['icon-right'],
        zIndex: 2, // for web
        justifyContent: 'center'
      },
      icon: {
        width: Variables['icon-width'],
        height: Variables['icon-height'],
        position: 'absolute',
        justifyContent: 'center',
        // top: Variables['icon-top'],
        right: Variables['icon-right'],
        top: 0,
        // right: 0,
        zIndex: 2 // for web
      },
      'icon-image': {
        width: Variables['icon-width'],
        height: Variables['icon-height']
      },
      'error-text': {
        color: Variables['error-text-color'],
        lineHeight: Variables['error-text-line-height'],
        // justifyContent: 'center',
        fontSize: Variables['error-text-font-size'],
        paddingTop: Variables['error-text-padding-top']
      },
      'error-input-wrap': {
        borderColor: Variables['error-border-color']
      },
      'focus-input-wrap': {
        borderColor: Variables['focus-border-color']
      },
      warning: {
        width: Variables['warning-width'],
        height: Variables['warning-height'],
        position: 'absolute',
        bottom: Variables['warning-bottom'],
        right: Variables['warning-right']
      },
      'multiple-md-wrap': {
        position: 'relative',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        padding: Variables['multiple-padding'],

        // height:
        // Variables['md-input-height'] + Variables['md-placeholder-height'],
        paddingTop: Variables['md-placeholder-height'],
        // lineHeight: Variables['md-input-height'],
        paddingLeft: 0,
        paddingRight: 0,
        borderRadius: Variables['md-border-radius'],
        borderColor: 'transparent',
        borderBottomWidth: Variables['md-border-top-width'],
        borderTopWidth: Variables['md-border-top-width'],
        borderLeftWidth: Variables['md-border-left-width'],
        borderRightWidth: Variables['md-border-right-width'],
        backgroundColor: Variables['bg-color']
      },
      'text-for-height': {
        position: 'absolute',
        top: 10,
        left: 10,
        fontSize: Variables['multiple-font-size'],
        lineHeight: 36,
        // color: 'red',
        visibility: 'hidden'
      },
      'multiple-md-placeholder': {
        top: Variables['multiple-md-placeholder-top']
      },

      placeholder: _extends({
        position: 'absolute',
        // width: '90%',
        flexDirection: 'row',
        left: 0,
        top: Variables['placeholder-top'],
        justifyContent: 'flex-start',
        alignItems: 'center',
        minWidth: Variables['placeholder-min-width'],
        height: Variables['placeholder-height']
      }, core.padding(0, 0)),
      'placeholder-text': {
        color: Variables['placeholder-color'],
        fontSize: Variables['placeholder-font-size']
      },
      'md-placeholder': {
        alignItems: 'center',
        // lineHeight: Variables['md-placeholder-height'],
        height: Variables['md-placeholder-height'],
        top: Variables['md-placeholder-top']
        // ##  todo (weex 0.17)
        // transitionProperty: 'top',
        // transitionDuration: '0.1s',
        // transitionDelay: '0s',
        // transitionTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
        // transitionTimingFunction: 'linear',
      },
      'md-placeholder-static': {
        top: Variables['md-input-margin-top']
      },

      'md-placeholder-text': {
        color: Variables['md-placeholder-color'],
        fontSize: Variables['md-placeholder-font-size']
      },
      'md-focus-placeholder-text': {
        color: Variables['md-focus-placeholder-color']
      },
      'md-empty-placeholder-text': {
        color: Variables['md-empty-placeholder-color']
      },
      'md-disabled-placeholder-text': {
        color: Variables['md-disabled-placeholder-color']
      },
      'md-placeholder-small': {
        // lineHeight: Variables['md-placeholder-small-height'],
        height: Variables['md-placeholder-small-height'],
        // to avoid cut when placeholder language is thai
        top: Variables['md-placeholder-small-top'] // ##  todo (weex 0.17)
        // transitionProperty: 'top',
        // transitionDuration: '0.1s',
        // transitionDelay: '0s',
        // transitionTimingFunction: 'linear',
        // transitionTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
      },

      'md-placeholder-small-text': {
        paddingTop: Variables['md-placeholder-small-padding-top'],
        fontSize: Variables['md-placeholder-small-font-size']
      },
      'md-placeholder-small-text-has-error': {
        color: Variables['md-error-placeholder-color']
      }
    }
  };
}
module.exports = styleProvider;