()
| 129 | } |
| 130 | |
| 131 | renderGradient() { |
| 132 | const { style } = this.props; |
| 133 | const { backgroundColor } = style.modal; |
| 134 | |
| 135 | // We divide the modal screen per key areas to which we apply a layer of gradient |
| 136 | // Screen ratio is represented in (0 - 1) format, where the ratio of 1 represents the entire |
| 137 | // screen height. Screen is then divided into 5 areas, marking the following elements -> |
| 138 | // Buffer area, where the layer is filled with default background color of the modal window, |
| 139 | // with no transparency. This area is applied above and below the list. Gradient area, |
| 140 | // where we apply the gradient transitioning the layer transparency from 1 -> 0. This |
| 141 | // section corrseponds to one list option height. Transparency area, where the layer is |
| 142 | // completely transparent, allowing us to see list options. Screen is then divided in the |
| 143 | // following fashion |
| 144 | // -> Buffer area -> Gradient area -> Transparency area -> Gradient Area -> Buffer Area |
| 145 | |
| 146 | const { |
| 147 | listViewHeight, |
| 148 | screenHeight, |
| 149 | gradientHeight, |
| 150 | bufferHeight, |
| 151 | } = this.getKeyAreaHeights(); |
| 152 | |
| 153 | const bufferColor = backgroundColor; |
| 154 | const invertedColor = changeColorAlpha(backgroundColor, 0); |
| 155 | |
| 156 | // This config array holds the appropriate screen segment ratios per calculcations above |
| 157 | // Every screen segment has it's corresponding color to transition to. |
| 158 | |
| 159 | const gradientConfig = [ |
| 160 | { |
| 161 | location: 0, |
| 162 | color: changeColorAlpha(bufferColor, 1), |
| 163 | }, |
| 164 | { |
| 165 | location: Math.max( |
| 166 | (bufferHeight - gradientHeight) / screenHeight, |
| 167 | 0.15, |
| 168 | ), |
| 169 | color: backgroundColor, |
| 170 | }, |
| 171 | { |
| 172 | location: Math.max(bufferHeight / screenHeight, 0.2), |
| 173 | color: invertedColor, |
| 174 | }, |
| 175 | { |
| 176 | location: Math.min((bufferHeight + listViewHeight) / screenHeight, 0.8), |
| 177 | color: invertedColor, |
| 178 | }, |
| 179 | { |
| 180 | location: Math.min( |
| 181 | (bufferHeight + listViewHeight + gradientHeight) / screenHeight, |
| 182 | 0.85, |
| 183 | ), |
| 184 | color: backgroundColor, |
| 185 | }, |
| 186 | { |
| 187 | location: 1, |
| 188 | color: changeColorAlpha(bufferColor, 1), |
no test coverage detected