tuya-panel-kit/lib/components/dialog/styled.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledList = exports.StyledCheckboxList = exports.StyledInput = exports.StyledInputContainer = exports.StyledConfirmText = exports.StyledCancelText = exports.StyledButton = exports.StyledCancelButton = exports.StyledConfirmButton = exports.StyledSubTitle = exports.StyledTitle = exports.StyledFooter = exports.StyledContent = exports.StyledHeader = exports.StyledContainer = undefined;

var _templateObject = _taggedTemplateLiteral(['\n  width: ', 'px;\n  align-self: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: ', ';\n  overflow: hidden;\n  background-color: ', ';\n'], ['\n  width: ', 'px;\n  align-self: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: ', ';\n  overflow: hidden;\n  background-color: ', ';\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  align-self: stretch;\n  align-items: center;\n  justify-content: center;\n  border-bottom-width: ', ';\n  border-bottom-color: ', ';\n  height: ', 'px;\n'], ['\n  align-self: stretch;\n  align-items: center;\n  justify-content: center;\n  border-bottom-width: ', ';\n  border-bottom-color: ', ';\n  height: ', 'px;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  padding: ', ';\n  align-self: stretch;\n  align-items: center;\n  justify-content: center;\n'], ['\n  padding: ', ';\n  align-self: stretch;\n  align-items: center;\n  justify-content: center;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  align-self: stretch;\n  flex-direction: row;\n  border-top-width: ', ';\n  border-top-color: ', ';\n  height: ', 'px;\n'], ['\n  align-self: stretch;\n  flex-direction: row;\n  border-top-width: ', ';\n  border-top-color: ', ';\n  height: ', 'px;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  font-weight: 500;\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n  flex-wrap: wrap;\n'], ['\n  font-weight: 500;\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n  flex-wrap: wrap;\n']),
    _templateObject6 = _taggedTemplateLiteral(['\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n  flex-wrap: wrap;\n'], ['\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n  flex-wrap: wrap;\n']),
    _templateObject7 = _taggedTemplateLiteral(['\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-right-width: ', ';\n  border-right-color: ', ';\n  background-color: ', ';\n'], ['\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-right-width: ', ';\n  border-right-color: ', ';\n  background-color: ', ';\n']),
    _templateObject8 = _taggedTemplateLiteral(['\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-right-width: ', ';\n  border-right-color: ', ';\n'], ['\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  border-right-width: ', ';\n  border-right-color: ', ';\n']),
    _templateObject9 = _taggedTemplateLiteral(['\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n'], ['\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n']),
    _templateObject10 = _taggedTemplateLiteral(['\n  font-weight: bold;\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n'], ['\n  font-weight: bold;\n  font-size: ', 'px;\n  text-align: center;\n  color: ', ';\n']),
    _templateObject11 = _taggedTemplateLiteral(['\n  justify-content: center;\n  align-self: stretch;\n  margin-top: 28px;\n  padding: ', ';\n'], ['\n  justify-content: center;\n  align-self: stretch;\n  margin-top: 28px;\n  padding: ', ';\n']),
    _templateObject12 = _taggedTemplateLiteral(['\n  font-size: 16;\n  color: ', ';\n  padding: 0px;\n'], ['\n  font-size: 16;\n  color: ', ';\n  padding: 0px;\n']),
    _templateObject13 = _taggedTemplateLiteral(['\n  align-self: stretch;\n  background-color: ', ';\n'], ['\n  align-self: stretch;\n  background-color: ', ';\n']),
    _templateObject14 = _taggedTemplateLiteral(['\n  margin-top: ', 'px;\n  align-self: stretch;\n  background-color: ', ';\n  border-top-color: ', ';\n  border-top-width: ', ';\n  border-bottom-left-radius: ', ';\n  border-bottom-right-radius: ', ';\n'], ['\n  margin-top: ', 'px;\n  align-self: stretch;\n  background-color: ', ';\n  border-top-color: ', ';\n  border-top-width: ', ';\n  border-bottom-left-radius: ', ';\n  border-bottom-right-radius: ', ';\n']);

var _reactNative = require('react-native');

var _native = require('styled-components/native');

var _native2 = _interopRequireDefault(_native);

var _utils = require('../../utils');

var _list = require('../TYLists/list');

var _list2 = _interopRequireDefault(_list);

var _TYText = require('../TYText');

var _TYText2 = _interopRequireDefault(_TYText);

var _theme = require('../theme');

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var cx = _utils.RatioUtils.convertX;
var _getDefaultTheme$dial = _theme.getDefaultTheme.dialog,
    width = _getDefaultTheme$dial.width,
    radius = _getDefaultTheme$dial.radius,
    bgColor = _getDefaultTheme$dial.bgColor,
    lineColor = _getDefaultTheme$dial.lineColor,
    cellHeight = _getDefaultTheme$dial.cellHeight,
    titleFontSize = _getDefaultTheme$dial.titleFontSize,
    titleFontColor = _getDefaultTheme$dial.titleFontColor,
    subTitleFontSize = _getDefaultTheme$dial.subTitleFontSize,
    subTitleFontColor = _getDefaultTheme$dial.subTitleFontColor,
    cancelFontSize = _getDefaultTheme$dial.cancelFontSize,
    cancelFontColor = _getDefaultTheme$dial.cancelFontColor,
    confirmFontSize = _getDefaultTheme$dial.confirmFontSize,
    confirmFontColor = _getDefaultTheme$dial.confirmFontColor,
    prompt = _getDefaultTheme$dial.prompt,
    pressColor = _getDefaultTheme$dial.pressColor;
var StyledContainer = exports.StyledContainer = (0, _native2.default)(_reactNative.View)(_templateObject, width, radius, bgColor);

var StyledHeader = exports.StyledHeader = (0, _native2.default)(_reactNative.View)(_templateObject2, _reactNative.StyleSheet.hairlineWidth, lineColor, cellHeight);

var StyledContent = exports.StyledContent = (0, _native2.default)(_reactNative.View)(_templateObject3, cx(32) + 'px ' + cx(32) + 'px');

var StyledFooter = exports.StyledFooter = (0, _native2.default)(_reactNative.View)(_templateObject4, _reactNative.StyleSheet.hairlineWidth, lineColor, cellHeight);

var StyledTitle = exports.StyledTitle = (0, _native2.default)(_TYText2.default)(_templateObject5, titleFontSize, titleFontColor);

var StyledSubTitle = exports.StyledSubTitle = (0, _native2.default)(_TYText2.default)(_templateObject6, subTitleFontSize, subTitleFontColor);

var StyledConfirmButton = exports.StyledConfirmButton = (0, _native2.default)(_reactNative.TouchableOpacity).attrs({
  activeOpacity: 0.8
})(_templateObject7, function (props) {
  return props.bordered ? _reactNative.StyleSheet.hairlineWidth : 0;
}, lineColor, function (props) {
  return props.pressActive ? pressColor : bgColor;
});

var StyledCancelButton = exports.StyledCancelButton = (0, _native2.default)(_reactNative.TouchableOpacity).attrs({
  activeOpacity: 0.8
})(_templateObject7, function (props) {
  return props.bordered ? _reactNative.StyleSheet.hairlineWidth : 0;
}, lineColor, function (props) {
  return props.pressActive ? pressColor : bgColor;
});

var StyledButton = exports.StyledButton = (0, _native2.default)(_reactNative.TouchableOpacity).attrs({
  activeOpacity: 0.8
})(_templateObject8, function (props) {
  return props.bordered ? _reactNative.StyleSheet.hairlineWidth : 0;
}, lineColor);

var StyledCancelText = exports.StyledCancelText = (0, _native2.default)(_TYText2.default)(_templateObject9, cancelFontSize, cancelFontColor);

var StyledConfirmText = exports.StyledConfirmText = (0, _native2.default)(_TYText2.default)(_templateObject10, confirmFontSize, confirmFontColor);

var StyledInputContainer = exports.StyledInputContainer = (0, _native2.default)(_reactNative.View)(_templateObject11, prompt.padding);

var StyledInput = exports.StyledInput = (0, _native2.default)(_reactNative.TextInput).attrs({
  placeholderTextColor: prompt.placeholder,
  underlineColorAndroid: 'transparent'
})(_templateObject12, cancelFontColor);

var StyledCheckboxList = exports.StyledCheckboxList = (0, _native2.default)(_list2.default)(_templateObject13, bgColor);

var StyledList = exports.StyledList = (0, _native2.default)(_list2.default)(_templateObject14, cx(16), bgColor, lineColor, _reactNative.StyleSheet.hairlineWidth, radius, radius);