index.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import React , { useState } from 'react';
  2. import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
  3. import Types from '../../lib/Types';
  4. export default class BaseHolder extends React.Component {
  5. constructor(props){
  6. super(props);
  7. }
  8. render() {
  9. let {
  10. children,
  11. selected,
  12. justifyContent,
  13. alignItems,
  14. alignContent,
  15. flexDirection,
  16. flexWrap,
  17. flexFlow,
  18. order,
  19. alignSelf,
  20. flexGrow,
  21. flexShrink,
  22. flexBasis,
  23. width,
  24. height,
  25. overflow,
  26. stretchContainer,
  27. content,
  28. ...restProps
  29. } = this.props;
  30. let styl = [styles.base];
  31. if (selected) styl.push(styles.selected);
  32. if (stretchContainer) styl.push(styles.stretchToContent);
  33. return (
  34. // self container
  35. <View {...restProps} style={[styl, {
  36. order,
  37. alignSelf,
  38. flexGrow,
  39. flexShrink,
  40. flexBasis,
  41. width,
  42. height,
  43. overflow
  44. }]}>
  45. {content}
  46. <View WRAPPER={true} style={ //children Container
  47. [
  48. (!!content || stretchContainer) ? styles.stretchToContent : {borderColor:'yellow'},
  49. {
  50. justifyContent,
  51. alignItems,
  52. alignContent,
  53. flexDirection,
  54. flexWrap,
  55. flexFlow
  56. }
  57. ]}>
  58. {children}
  59. </View>
  60. </View>
  61. );
  62. }
  63. }
  64. const styles = StyleSheet.create({
  65. base: {
  66. minHeight: 20,
  67. // borderColor: 'blue',
  68. // borderWidth: 1
  69. },
  70. stretchToContent: {
  71. position: 'absolute',
  72. top: 0,
  73. left: 0,
  74. bottom: 0,
  75. right: 0,
  76. // borderColor: 'red',
  77. // borderWidth: 1
  78. },
  79. contentWrapper: {
  80. },
  81. selected: {
  82. boxShadow: 'inset 0px 0px 1px 1px #fce8e8',
  83. border: '1px solid #f28d8d',
  84. // boxShadow: 'inset 0px 0px 1px 1px rgba(250,10,0,0.81)',
  85. shadowColor: "rgba(250,10,0,0.81)",
  86. shadowOffset: {
  87. width: 0,
  88. height: 4,
  89. },
  90. shadowOpacity: 0.30,
  91. shadowRadius: 4.65,
  92. elevation: 8
  93. // border: '1px solid green'
  94. }
  95. });
  96. BaseHolder.Inputs = {
  97. width: new Types.Integer(),
  98. height: new Types.Integer(),
  99. stretchContainer: new Types.Bool().default(false),
  100. overflow: new Types.Text().default('visible'),
  101. justifyContent: new Types.Text().default("flex-start"),
  102. alignItems: new Types.Text(),
  103. alignContent: new Types.Text(),
  104. flexDirection: new Types.Text(),
  105. flexWrap: new Types.Text(),
  106. flexFlow: new Types.Text(),
  107. alignSelf: new Types.Text(),
  108. flexGrow: new Types.Real(),
  109. flexShrink: new Types.Real(),
  110. flexBasis: new Types.Real()
  111. }