How to use renderOptionType method in Playwright Internal

Best JavaScript code snippet using playwright-internal

module-guide.js

Source:module-guide.js Github

copy

Full Screen

...542 <Fragment>543 <div>544 {guideOption.enabled && (<EuiSpacer size='s' />)}545 {typeof guideOption.enabled === 'boolean' ?546 (guideOption.enabled ? this.renderOptionType(guideOption, keyID) : null)547 : this.renderOptionType(guideOption, keyID)548 }549 </div>550 {/* {typeof guideOption.enabled === 'boolean' && (<EuiSpacer size='m' />)} */}551 </Fragment>552 )}553 </Fragment>554 )555 }556 checkInvalidElements(elements) {557 return elements.reduce((accum, element) => {558 return accum559 || !element.repeatable && !element.elements && this.checkInvalidElement(element)560 || element.repeatable && !element.elements && this.checkInvalidElement(element)561 || element.elements && element.elements.length && this.checkInvalidElements(element.elements)562 || !element.elements && element.enabled && element.attributes && element.attributes.length && this.checkInvalidElements(element.attributes)563 || !element.elements && element.enabled && element.options && element.options.length && this.checkInvalidElements(element.options)564 }, false)565 }566 checkInvalidElement(element) {567 if (!element.enabled) { return undefined }568 switch (element.type) {569 case 'input': {570 return (element.validate && !element.validate(element))571 || (element.validate_regex && !element.value.match(element.validate_regex))572 || (!element.value)573 }574 case 'input-number': {575 return (element.validate && !element.validate(element))576 || (element.values && (element.values.min !== undefined && element.values.max !== undefined && element.value < element.values.min || element.value > element.values.max))577 || (element.values && (element.values.min !== undefined && element.values.max === undefined && element.value < element.values.min))578 || (element.values && (element.values.min === undefined && element.values.max !== undefined && element.value > element.values.max))579 || (element.value === '')580 }581 default:582 return undefined;583 }584 }585 renderOptionType(guideOption, keyID) {586 switch (guideOption.type) {587 case 'input': {588 const invalid = this.checkInvalidElement(guideOption);589 return (590 <Fragment>591 <EuiFieldText592 placeholder={guideOption.placeholder}593 value={guideOption.value}594 isInvalid={invalid}595 disabled={guideOption.field_disabled}596 readOnly={guideOption.field_read_only}597 onChange={(e) => { this.setElementProp(keyID, 'value', e.target.value) }}598 />599 {invalid === true && <EuiText color='danger'>{guideOption.validate_error_message}</EuiText>}...

Full Screen

Full Screen

TimeSliderWidget.js

Source:TimeSliderWidget.js Github

copy

Full Screen

...320 </span>321 </div>322 );323 }324 renderOptionType() {325 const self = this;326 switch (this.props.optionType) {327 case 'tab': {328 let hasMoreOption = false;329 if (this.props.timeDurations && this.props.timeDurations.length > 1) {330 hasMoreOption = true;331 }332 return (333 <div className={"selector-row " + (hasMoreOption ? 'hasOption' : '')} >334 {335 hasMoreOption &&336 _.map(this.props.timeDurations, function (option, index) {337 return (338 <div339 key={'timespan-option-' + index}340 className={self.state.selectedDuration == option.type ? "active" : "in-active"}341 onClick={self.handleRender.bind(self, option.type)}342 >343 <span>{RS.getString(option.type.toUpperCase())}</span>344 </div>345 );346 })347 }348 </ div>349 );350 }351 case 'dropdown': {352 const timeDurations = this.props.timeDurations || [353 { type: TIMESPAN.FROM_LAST_SUBMISSION },354 { type: TIMESPAN.WEEK },355 { type: TIMESPAN.FORTNIGHT },356 { type: TIMESPAN.MONTH },357 { type: TIMESPAN.MANUAL },358 { type: TIMESPAN.LAST_MONTH },359 { type: TIMESPAN.LAST_FORTNIGHT },360 { type: TIMESPAN.LAST_WEEK }361 ];362 const options = _.map(timeDurations, item => {363 return {364 label: RS.getString(item.type),365 type: item.type366 };367 });368 const value = _.find(options, { type: this.state.selectedDuration }) || options[0];369 return (370 <div className="option-selection dropdown">371 <button372 className="btn btn-default dropdown-toggle"373 type="button"374 data-toggle="dropdown"375 >376 {value.label}377 <div className="button-addon"><span className="Select-arrow" /></div>378 </button>379 <ul className="dropdown-menu">380 {381 _.map(options, (item, index) => {382 if (item.type === TIMESPAN.MANUAL) {383 return (384 <li385 key={index}386 className="dropdown-submenu"387 >388 <a className="submenu">{item.label}</a>389 <ul className="dropdown-menu">390 <li className="filter-date-range-li">391 <FilterDateRangeV2392 startDate={new Date(this.state.dateFrom)}393 endDate={new Date(this.state.dateTo)}394 onChange={this.handleOnChangeFilterDateRange}395 ref={input => this.filterDateRange = input}396 />397 </li>398 </ul>399 </li>);400 }401 return (402 <li key={index} onClick={this.handleOnchangeOptions.bind(this, item)} ><a>{item.label}</a></li>403 );404 })405 }406 </ul >407 </div >408 );409 }410 default:411 break;412 }413 }414 render() {415 const classLabelTime = _.includes(this.state.selectedDuration, 'MONTH') ? 'month' : 'week';416 return (417 <div className="time-slider-widget" >418 {this.renderOptionType()}419 <div className="value-row">420 <div className="pre-button" onClick={this.handlePrev} ><i className="fa fa-angle-left" aria-hidden="true" /></div>421 <div className={'label-time ' + classLabelTime}>{this.formatLocaleTimeValue()}</div>422 <div className="next-button" onClick={this.handleNext} ><i className="fa fa-angle-right" aria-hidden="true" /></div>423 </div>424 </div >425 );426 }427}428TimeSliderWidget.defaultProps = {429 selectedDuration: TIMESPAN.WEEK,430 optionType: 'tab'431};432TimeSliderWidget.propTypes = propTypes;...

Full Screen

Full Screen

HandlerAdmin.js

Source:HandlerAdmin.js Github

copy

Full Screen

1// ---------------------------------------------------------------------------- //2// xử lí các sự kiện đóng mở form chung3function OpenCloseForm() {4 var btnAdd = document.querySelector('.js-addProduct');5 var btnAddType = document.querySelector('.js-addTypeProduct');6 var AP_wrap = document.querySelector('.AddProduct_Wrap');7 var ATP_wrap = document.querySelector('.AddTypeProduct_Wrap');8 var closeBtn = document.querySelector('.js-close-btn');9 var closeBtn2 = document.querySelector('.js-close-btn2');10 var closeBtn3 = document.querySelector('.js-close-btn3');11 var closeBtn4 = document.querySelector('.js-close-btn4');12 // event mở form13 btnAdd.addEventListener('click', () => {14 AP_wrap.classList.add('isOpenAP');15 RenderOptionType();16 });17 btnAddType.addEventListener('click', () => {18 ATP_wrap.classList.add('isOpenAP');19 })20 // event đóng form21 closeBtn.addEventListener('click', () => {22 AP_wrap.classList.remove('isOpenAP');23 });24 closeBtn2.addEventListener('click', () => {25 document.querySelector(".ChangeProduct_Wrap").classList.remove('isOpenAP')26 })27 closeBtn3.addEventListener('click', () => {28 document.querySelector(".ConfirmListCart_Wrap").classList.remove('isOpenAP')29 })30 closeBtn4.addEventListener('click', () => {31 document.querySelector(".AddTypeProduct_Wrap").classList.remove('isOpenAP')32 })33}34//----------------------show user----------------------------------35function showUserList() {36 if (localStorage.getItem('user') === null) return false;37 var userArray = JSON.parse(localStorage.getItem('user'));38 var tr = `<tr>39 <th>ID</th>40 <th>Username</th>41 <th>Gmail</th>42 <th>Register Day</th>43 <th>Permission</th>44 <th>Delete</th>45 </tr>`;46 for (var i = 0; i < userArray.length; i++) {47 tr += `48 <tr>49 <td>${i}</td>50 <td>${userArray[i].username}</td>51 <td>${userArray[i].gmail}</td>52 <td>${userArray[i].RegisterDay}</td>53 <td>${userArray[i].userType}</td>54 <td>55 <button class="delete" onClick="deleteuser(\'${userArray[i].username}\')">56 <i class="fas fa-times-circle"></i>57 </button>58 </td>59 </tr>60 `;61 }62 document.querySelector('#userlist').innerHTML = tr;63}64// su dung: push them phan tu vao cuoi mang, pop: xoa phan tu cuoi mang, 65// unshit: them phan tu vao dau mang, shit: xoa phtu nam dau mang66//----------------------delete user-------------------------------67function deleteuser(usernamedelete) {68 var userArray = JSON.parse(localStorage.getItem('user'));69 for (var i = 0; i < userArray.length; i++) {70 if (userArray[i].username == usernamedelete) {71 if (userArray[i].userType === 'admin') {72 alert('Bạn không thể xoá tài khoản này !\nVì đây là tài khoản Quản Trị !');73 break;74 }75 if (confirm('Bạn có muốn xóa tài khoản này?')) {76 userArray.splice(i, 1);77 window.location.reload(); // reload lại trang web sau khi xoá78 }79 }80 }81 localStorage.setItem('user', JSON.stringify(userArray));82}83//----------------------show products----------------------------------84function showProductList() {85 if (localStorage.getItem('product') === null) return false;86 var ProductArray = JSON.parse(localStorage.getItem('product'));87 var tr = `<tr>88 <th>ID</th>89 <th>Name</th>90 <th>Type</th>91 <th>Price</th>92 <th>Image</th>93 <th>Change</th>94 <th>Delete</th>95 </tr>`;96 for (var i = 0; i < ProductArray.length; i++) {97 tr += `98 <tr>99 <td>${ProductArray[i].id}</td>100 <td>${ProductArray[i].name}</td>101 <td>${ProductArray[i].type}</td>102 <td>${ProductArray[i].price.toLocaleString('vi', {style : 'currency', currency : 'VND'})}</td>103 <td><img src="..${ProductArray[i].img}" class="container-img"></td>104 <td><button id="js-fix" class="fix" onClick="changeProduct(\'${ProductArray[i].name}\'); RenderOptionTypeC();"><i class="fas fa-wrench"></i></button></td>105 <td><button class="delete" onClick="deleteProduct(\'${ProductArray[i].name}\')"><i class="fas fa-times-circle"></i></button></td>106 </tr>107 `;108 }109 document.querySelector('#productlist').innerHTML = tr;110}111function deleteProduct(ProductName) {112 var ProductArray = JSON.parse(localStorage.getItem('product'));113 for (var i = 0; i < ProductArray.length; i++) {114 if (ProductArray[i].name == ProductName) {115 if (confirm('Bạn có muốn xóa sản phẩm này ?')) {116 ProductArray.splice(i, 1);117 window.location.reload(); // reset lại web sau khi nhập xong118 }119 }120 }121 localStorage.setItem('product', JSON.stringify(ProductArray));122}123function Add_Product() {124 var add_btn = document.querySelector("#js-btn-product");125 add_btn.addEventListener('click', () => {126 var itemName = document.getElementById("js-item-name");127 var itemPrice = document.getElementById("js-item-price");128 var productArray = JSON.parse(localStorage.getItem('product'));129 var OptionSelect = document.querySelector("#AddOption");130 if (itemName.value.length === 0) {131 alert("vui lòng nhập tên sản phẩm !");132 itemName.focus();133 return false;134 }135 if (itemPrice.value.length === 0) {136 alert("vui lòng nhập giá tiền !");137 itemPrice.focus();138 return false;139 }140 // tìm thể loại của sản phẩm141 var OptionSelect = document.querySelector("#AddOption");142 var valueType = OptionSelect.options[OptionSelect.selectedIndex].text;143 // tìm id lớn nhất của sản phẩm144 var maxID = Math.max(...productArray.map(item => item.id));145 var item = {146 id: maxID + 1,147 type: valueType,148 name: itemName.value,149 img: '/img/UpdatingProduct.png',150 price: Number(itemPrice.value), // đổi chuỗi thành số151 }152 productArray.push(item);153 localStorage.setItem('product', JSON.stringify(productArray));154 alert("Thêm sản phẩm thành công !");155 // đóng form lẫn reset value trong form input156 document.querySelector(".AddProduct_Wrap").classList.remove('isOpenAP');157 itemName.value = "";158 itemPrice.value = "";159 showProductList();160 })161}162// hàm in danh sách thể loại lên Form163function RenderOptionType() {164 // in ra danh sách loại sản phẩm165 var typesArray = JSON.parse(localStorage.getItem('types'))166 var tempArr = '';167 for (var i = 0; i < typesArray.length; i++) {168 if (typesArray[i].id != 'All') {169 tempArr += `<option value="${typesArray[i].id}">${typesArray[i].id}</option>`;170 }171 }172 document.querySelector("#AddOption").innerHTML = tempArr;173}174function RenderOptionTypeC() {175 // in ra danh sách loại sản phẩm176 var typesArray = JSON.parse(localStorage.getItem('types'))177 var tempArr = '';178 for (var i = 0; i < typesArray.length; i++) {179 if (typesArray[i].id != 'All') {180 tempArr += `<option value="${typesArray[i].id}">${typesArray[i].id}</option>`;181 }182 }183 document.querySelector("#AddOptionC").innerHTML = tempArr;184}185function Add_TypeProduct() {186 var add_btn = document.querySelector("#js-btn-product--typpe");187 add_btn.addEventListener('click', () => {188 var itemID = document.getElementById("js-item-Type--id");189 var itemName = document.getElementById("js-item-Type--name");190 var typeArray = JSON.parse(localStorage.getItem('types'));191 if (itemID.value.length === 0) {192 alert("vui lòng nhập id dòng sản phẩn !");193 itemID.focus();194 return false;195 }196 if (itemName.value.length === 0) {197 alert("vui lòng nhập tên dòng sản phẩm !");198 itemName.focus();199 return false;200 }201 var item = {202 id: itemID.value,203 name: itemName.value,204 }205 typeArray.unshift(item);206 localStorage.setItem('types', JSON.stringify(typeArray));207 alert("Thêm dòng sản phẩm thành công !");208 // đóng form lẫn reset value trong form input209 document.querySelector(".AddTypeProduct_Wrap").classList.remove('isOpenAP');210 itemID.value = "";211 itemName.value = "";212 })213}214function changeProduct(ProductName) {215 var ProductArray = JSON.parse(localStorage.getItem('product'));216 for (var i = 0; i < ProductArray.length; i++) {217 if (ProductArray[i].name == ProductName) {218 // ấn vào nút thay đổi thì mở form đổi thông tin sản phẩm219 document.querySelector(".ChangeProduct_Wrap").classList.add("isOpenAP");220 document.querySelector("#js-btn-productC").addEventListener('click', () => {221 var productArray = JSON.parse(localStorage.getItem('product'));222 var itemName = document.getElementById("js-item-nameC");223 var itemPrice = document.getElementById("js-item-priceC");224 var OptionSelect = document.querySelector("#AddOptionC");225 if (itemName.value.length === 0) {226 alert("vui lòng nhập tên sản phẩm !");227 itemName.focus();228 return false;229 }230 if (itemPrice.value.length === 0) {231 alert("vui lòng nhập giá tiền !");232 itemPrice.focus();233 return false;234 }235 // tìm thể loại của sản phẩm236 var OptionSelect = document.querySelector("#AddOptionC");237 var valueType = OptionSelect.options[OptionSelect.selectedIndex].text;238 for (var i = 0; i < ProductArray.length; i++) {239 if (ProductArray[i].name == ProductName) {240 productArray[i].name = itemName.value;241 productArray[i].price = Number(itemPrice.value);242 productArray[i].type = valueType;243 productArray[i].img = '/img/UpdatingProduct.png';244 }245 }246 localStorage.setItem('product', JSON.stringify(productArray));247 alert("Sửa sản phẩm thành công !");248 window.location.reload(); // reset lại web sau khi nhập xong249 });250 }251 }252}253// hiển thị ra danh sách đơn đặt hàng từ khách hàng254function showOrder() {255 // lấy dữ liệu từ localStorage256 // hiện ra danh sách user mua hàng257 var orderArray = JSON.parse(localStorage.getItem('cartList'));258 var tr = `259 <tr>260 <th>ID</th>261 <th>Name</th>262 <th>Status</th>263 <th>Active</th>264 </tr>`;265 for (var i = 0; i < orderArray.length; i++) {266 var value = "";267 var color = "";268 var form = "";269 if (orderArray[i].status == 'confirmed') {270 value = "Đã xác nhận";271 color = "green";272 }273 if (orderArray[i].status == 'pending') {274 value = "Đang xử lí";275 color = "orange";276 form = ` 277 <button class="apply" onClick="showListCartUser(\'${i}\')">278 <i class="fas fa-clipboard-list"></i>279 </button>`;280 } else {281 form = ``;282 }283 if (orderArray[i].status == 'unconfirmed') {284 value = "Đã huỷ";285 color = "red";286 }287 tr += `288 <tr>289 <td>${i}</td>290 <td>${orderArray[i].username}</td>291 <td id="statusOrder">292 <span style="color: ${color}">${value}</span>293 </td>294 <td>${form}</td>295 </tr>296 `;297 }298 // in lên màn hình299 document.querySelector('#confirm-order').innerHTML = tr;300}301function showListCartUser(id) {302 document.querySelector(".ConfirmListCart_Wrap").classList.add("isOpenAP");303 var orderArray = JSON.parse(localStorage.getItem('cartList'));304 var tr = `<tr>305 <th>ID</th>306 <th>Name</th>307 <th>Type</th>308 <th>Price</th>309 <th>Image</th>310 </tr>`;311 // lấy ra danh sách sản phẩm mà user đã mua312 var ListCart = orderArray[id].totalProducts; // id là id của đơn hàng mà user đã mua313 for (var i = 0; i < ListCart.length; i++) {314 tr += `315 <tr>316 <td>${i+1}</td>317 <td>${ListCart[i].name}</td>318 <td>${ListCart[i].type}</td>319 <td>${ListCart[i].price}</td>320 <td>321 <img src="..${ListCart[i].img}" alt="" class="container-img">322 </td>323 </tr>324 `;325 }326 document.querySelector('#product-list').innerHTML = tr;327 if (orderArray[id].status == 'confirmed') {328 value = "Đã xác nhận";329 color = "green";330 }331 if (orderArray[id].status == 'pending') {332 value = "Đang xử lí";333 color = "orange";334 }335 if (orderArray[id].status == 'unconfirmed') {336 value = "Đã huỷ";337 color = "red";338 }339 document.querySelector('#product-list--price').innerHTML = `340 <p style="padding: 12px 0;">Mã đơn hàng: <strong id="product-list--id">${id}</strong></p>341 <p style="padding: 12px 0;">Tên người mua: <strong>${orderArray[id].username}</strong></p>342 <p style="padding: 12px 0;">Tổng tiền: <strong>${orderArray[id].totalMoney.toLocaleString('vi', {style : 'currency', currency : 'VND'})}</strong></p>343 <p style="padding: 12px 0;">Tình trạng đơn hàng: <span style="color: ${color}">${value}</span></p>344 `;345}346function unConfirmOrder() {347 if (confirm('Xác nhận huỷ đơn hàng !')) {348 // lấy ra id của đơn hàng được chọn349 var id = document.getElementById("product-list--id").innerText;350 // thay đổi status trong loacalStorage -> đơn hàng xem như đã bị huỷ351 var orderArray = JSON.parse(localStorage.getItem('cartList'));352 orderArray[id].status = 'unconfirmed'; // chuyển đổi trạng thái của đơn hàng353 localStorage.setItem('cartList', JSON.stringify(orderArray)); // update dữ liệu354 // sau khi ấn vào nút xác nhận thì đóng form và chuyển trạng thái hiện thị355 document.querySelector(".ConfirmListCart_Wrap").classList.remove('isOpenAP')356 showOrder(); // chạy lại hàm showOrder() để hiển thị lại danh sách đặt hàng357 }358}359function ConfirmOrder() {360 if (confirm('Xác nhận chấp nhận đơn hàng !')) {361 // lấy ra id của đơn hàng được chọn362 var id = document.getElementById("product-list--id").innerText;363 // thay đổi status trong loacalStorage -> đơn hàng xem như đã bị huỷ364 var orderArray = JSON.parse(localStorage.getItem('cartList'));365 orderArray[id].status = 'confirmed'; // chuyển đổi trạng thái của đơn hàng366 localStorage.setItem('cartList', JSON.stringify(orderArray)); // update dữ liệu367 // sau khi ấn vào nút xác nhận thì đóng form và chuyển trạng thái hiện thị368 document.querySelector(".ConfirmListCart_Wrap").classList.remove('isOpenAP')369 showOrder(); // chạy lại hàm showOrder() để hiển thị lại danh sách đặt hàng370 }371}372// ---------------------------------------------------------------------------- //373window.onload = () => {374 // user375 showUserList();376 deleteuser();377 // product378 showProductList();379 deleteProduct();380 OpenCloseForm();381 Add_Product();382 Add_TypeProduct();383 // order384 showOrder();...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1// @flow2import * as React from 'react';3import { Text, TouchableOpacity, View } from 'react-native';4import Popup from '../../../internals/Picker.native/Popup';5import Icon from '../../Icon';6import type { Option, Value, renderOptionType } from '../types.js.flow';7import Menu from './Menu';8import SearchBar from './SearchBar';9import SelectedOption from './SelectedOption';10import {11 Container,12 Control,13 ListContainer,14 ListEmptyContainer,15 MultiValueWrapper,16 OKText,17 Placeholder,18 PopupContentContainer,19 PopupText,20 PopupTopBar,21 PopupTouchableContainer,22} from './StyledComponents';23type Props = {24 /**25 * Overrides the text that's read by the screen reader when the user interacts with the element.26 */27 accessibilityLabel?: string,28 /**29 * If `true`, focuses the input on `componentDidMount`. The default value is `false`.30 */31 autoFocus: ?boolean,32 /**33 * If `true`, the input value can be cleared by pressing a button. The default value is `true`.34 */35 clearable: ?boolean,36 clearAllText: string,37 clearValueText: string,38 filterOption?: ?(option: Option, searchText: string) => boolean,39 /**40 * See `getItemLayout` of `FlatList`.41 */42 getDropdownItemLayout?: (43 options: Array<Option>,44 index: number,45 ) => { length: number, offset: number, index: number },46 /**47 * If `true`, a spinner is displayed. The default value is `false`.48 */49 isLoading: ?boolean,50 labelKey: string,51 /**52 * If `true`, the input becomes a multi-select. The default value is `false`.53 */54 multi: ?boolean,55 /**56 * Text to show when there are no search results.57 */58 noResultsText: string,59 /**60 * Callback that is called when the input is blurred.61 */62 onBlur?: ?() => void,63 /**64 * Called once when the scroll position gets within `onDropdownEndReachedThreshold` of the65 * rendered content of the dropdown.66 */67 onDropdownEndReached?: ?() => void,68 /**69 * How far from the end (in units of visible length of the list) the bottom edge of the70 * list must be from the end of the content to trigger the `onDropdownEndReached` callback.71 */72 onDropdownEndReachedThreshold?: ?number,73 /**74 * Callback that is called when the input is focused.75 */76 onFocus?: ?() => void,77 /**78 * Callback that is called when the search input's text changes.79 */80 onInputChange?: ?(text: string, triggeredByUser: boolean) => void,81 /**82 * Callback that is called when the input value changes.83 */84 onValueChange?: ?(value: Value) => void,85 /**86 * An array of options.87 */88 options?: ?Array<Option>,89 /**90 * The string that will be rendered when there is no value.91 */92 placeholder: string,93 /**94 * If `true`, the input is not editable. The default value is `false`.95 */96 readOnly: ?boolean,97 /**98 * Function to render the dropdown icon.99 */100 renderDropdownIcon?: ?() => ?React.Element<any>,101 /**102 * Function to render an option. Requires `getDropdownItemLayout` to be implemented.103 */104 renderOption?: ?renderOptionType,105 /**106 * If `true`, user can use the text input to filter options. The default value is `true`.107 */108 searchable: ?boolean,109 // TODO110 style?: any,111 /**112 * Used to locate this view in end-to-end tests.113 */114 testID?: string,115 /**116 * The value of the select input.117 */118 value?: Value,119 valueKey: string,120};121type State = {122 inputValue: string,123 isOpen: boolean,124};125class Select extends React.Component<Props, State> {126 static defaultProps = {127 autoFocus: false,128 clearable: true,129 clearAllText: 'Clear all',130 clearValueText: 'Clear value',131 isLoading: false,132 labelKey: 'label',133 multi: false,134 noResultsText: 'No results found',135 placeholder: '',136 readOnly: false,137 searchable: true,138 valueKey: 'value',139 };140 static _findOption = (141 options: ?Array<Option>,142 valueKey: string,143 value: ?Value,144 ): ?Option => {145 const valueType = typeof value;146 if (valueType !== 'string' && valueType !== 'number') return null;147 if (!options) return null;148 for (let i = 0; i < options.length; i++) {149 if (options[i][valueKey] === value) return options[i];150 }151 return null;152 };153 blur = () => {154 const { onBlur } = this.props;155 this._setPopupVisible(false);156 onBlur && onBlur();157 };158 focus = () => {159 this._openPicker();160 };161 state: State = {162 inputValue: '',163 isOpen: false,164 };165 componentDidMount() {166 if (this.props.autoFocus) {167 this.focus();168 }169 }170 render() {171 const { accessibilityLabel, style, testID } = this.props;172 const selectState = this._getSelectState();173 const { selectedOptions, visibleOptions } = selectState;174 const styleProps = {175 style,176 };177 return (178 <Container179 {...styleProps}180 accessibilityLabel={accessibilityLabel}181 onPress={this.focus}182 testID={testID}183 >184 <Control>185 <MultiValueWrapper>186 {this._renderSelectedValue(selectedOptions)}187 </MultiValueWrapper>188 {this._renderDropdownIcon()}189 {this._renderPopup(visibleOptions, selectedOptions)}190 </Control>191 </Container>192 );193 }194 _searchInput: ?React.ElementRef<typeof Text>;195 _addValue = (option: Option) => {196 const selectedOptions = this._getSelectedOptions();197 this._setValue(selectedOptions.concat(option));198 };199 _captureSearchInput = (ref: ?React.ElementRef<typeof Text>) => {200 this._searchInput = ref;201 };202 _blurSearchInput = () => {203 this._searchInput && this._searchInput.blur();204 };205 _clearValue = () => {206 this._setValue([]);207 };208 _filterOptions = (excludeOptions: ?Array<Option>): Array<Option> => {209 const { filterOption, labelKey, valueKey } = this.props;210 const filterValue = this.state.inputValue.toLowerCase();211 const options = this.props.options || [];212 let excludeValues;213 if (excludeOptions) excludeValues = excludeOptions.map((i) => i[valueKey]);214 return options.filter((option) => {215 if (excludeValues && excludeValues.indexOf(option[valueKey]) > -1)216 return false;217 if (filterOption) return filterOption(option, filterValue);218 if (!filterValue) return true;219 const labelTest = String(option[labelKey]).toLowerCase();220 return labelTest.indexOf(filterValue) >= 0;221 });222 };223 _getOptionFromValue = (value: ?Value): ?Option => {224 const { options, valueKey } = this.props;225 return Select._findOption(options, valueKey, value);226 };227 _getOptionLabel = (option: Option): string => {228 return option[this.props.labelKey];229 };230 _getSelectedOptions = (): Array<Option> => {231 const { value } = this.props;232 let valueArray;233 if (Array.isArray(value)) {234 valueArray = value;235 } else {236 valueArray = [value];237 }238 return valueArray.map(this._getOptionFromValue).filter(Boolean);239 };240 _getSelectState = () => {241 const { clearable, isLoading, multi, readOnly, searchable } = this.props;242 const selectedOptions = this._getSelectedOptions();243 const visibleOptions = this._filterOptions();244 return {245 hasValue: selectedOptions.length > 0,246 isMulti: multi,247 isSingle: !multi,248 isClearable: clearable,249 isDisabled: readOnly,250 isLoading,251 isOpen: this.state.isOpen,252 isSearchable: searchable,253 selectedOptions,254 visibleOptions,255 };256 };257 _onCancel = () => {258 this.blur();259 };260 _onSearchBarInputChange = (inputValue: string) => {261 const { onInputChange } = this.props;262 if (onInputChange) {263 onInputChange(inputValue, true);264 }265 this.setState({ inputValue });266 };267 _openPicker = () => {268 const { onFocus, readOnly } = this.props;269 if (readOnly) return;270 this._setPopupVisible(true);271 onFocus && onFocus();272 };273 _selectOption = (option: Option) => {274 if (this.props.multi) {275 this._addValue(option);276 } else {277 this._setValue([option]);278 }279 };280 _setPopupVisible = (visible: boolean) => {281 this.setState({ isOpen: visible });282 };283 _setValue = (options: Array<Option>) => {284 const { multi, onValueChange, valueKey } = this.props;285 if (!multi) {286 this.blur();287 }288 if (onValueChange) {289 const valueArray = options.map((option) => option[valueKey]);290 const value = multi291 ? valueArray292 : valueArray.length > 0293 ? valueArray[0]294 : null;295 onValueChange(value);296 }297 };298 _toggleOption = (option: Option) => {299 const { valueKey } = this.props;300 const selectedOptions = this._getSelectedOptions();301 if (selectedOptions.find((op) => op[valueKey] === option[valueKey])) {302 this._setValue(303 selectedOptions.filter((op) => op[valueKey] !== option[valueKey]),304 );305 } else {306 this._selectOption(option);307 }308 };309 _renderClear = () => {310 const {311 clearable,312 clearAllText,313 clearValueText,314 isLoading,315 multi,316 readOnly,317 value,318 } = this.props;319 if (320 !clearable ||321 value === undefined ||322 value === null ||323 (multi && !value.length) ||324 readOnly ||325 isLoading326 ) {327 return null;328 }329 const label = multi ? clearAllText : clearValueText;330 return (331 <TouchableOpacity onPress={this._clearValue}>332 <PopupText>{label}</PopupText>333 </TouchableOpacity>334 );335 };336 _renderConfirmButton = () => {337 if (!this.props.multi) return null;338 return (339 <TouchableOpacity onPress={this.blur}>340 <OKText>OK</OKText>341 </TouchableOpacity>342 );343 };344 _renderDropdownIcon = () => {345 const { renderDropdownIcon } = this.props;346 return renderDropdownIcon ? (347 renderDropdownIcon()348 ) : (349 <Icon name="arrow-drop-down" style={{ marginLeft: 10, fontSize: 16 }} />350 );351 };352 _renderMenu = (options: Array<Option>, selectedOptions: Array<Option>) => {353 const {354 labelKey,355 multi,356 noResultsText,357 onDropdownEndReached,358 onDropdownEndReachedThreshold,359 renderOption,360 valueKey,361 } = this.props;362 let body = null;363 if (options.length > 0) {364 const handleSelect = multi ? this._toggleOption : this._selectOption;365 body = (366 <Menu367 labelKey={labelKey}368 onEndReached={onDropdownEndReached}369 onEndReachedThreshold={onDropdownEndReachedThreshold}370 onItemSelect={handleSelect}371 options={options}372 renderOption={renderOption}373 selectedOptions={selectedOptions}374 valueKey={valueKey}375 />376 );377 } else if (noResultsText) {378 body = (379 <ListEmptyContainer>380 <PopupText>{noResultsText}</PopupText>381 </ListEmptyContainer>382 );383 }384 return <ListContainer>{body}</ListContainer>;385 };386 _renderPopup = (options: Array<Option>, selectedOptions: Array<Option>) => {387 const { searchable } = this.props;388 const popupHeight = searchable ? 359 : 259;389 return (390 <Popup391 height={popupHeight}392 onRequestClose={this._onCancel}393 show={this.state.isOpen}394 testID="select-popup-container"395 >396 <PopupTouchableContainer397 activeOpacity={1}398 onPress={this._blurSearchInput}399 >400 <PopupContentContainer>401 <PopupTopBar>402 <TouchableOpacity onPress={this._onCancel}>403 <PopupText>Cancel</PopupText>404 </TouchableOpacity>405 <View style={{ flex: 1 }} />406 {this._renderClear()}407 {this._renderConfirmButton()}408 </PopupTopBar>409 {this._renderSearchBar()}410 {this._renderMenu(options, selectedOptions)}411 </PopupContentContainer>412 </PopupTouchableContainer>413 </Popup>414 );415 };416 _renderSearchBar = () => {417 if (!this.props.searchable) return null;418 return (419 <SearchBar420 inputRef={this._captureSearchInput}421 isLoading={this.props.isLoading}422 onInputChange={this._onSearchBarInputChange}423 searchText={this.state.inputValue}424 />425 );426 };427 _renderSelectedValue = (selectedOptions: Array<Option>) => {428 const { labelKey, multi, placeholder, valueKey } = this.props;429 if (selectedOptions.length === 0) {430 return <Placeholder>{placeholder}</Placeholder>;431 }432 if (multi) {433 return selectedOptions.map((option) => (434 <SelectedOption435 key={`value-${option[valueKey]}`}436 labelKey={labelKey}437 option={option}438 style={{ marginRight: 8 }}439 />440 ));441 }442 const option = selectedOptions[0];443 return <SelectedOption labelKey={labelKey} option={option} />;444 };445}...

Full Screen

Full Screen

CreateOption.js

Source:CreateOption.js Github

copy

Full Screen

...32 const {value, id} = this.props;33 return (34 <div className="answers-option" id={id}>35 {36 this.renderOptionType()37 }38 <Input placeholder={`请填写选项`} size="large" onChange={(e) => this.handleChange('value', e)}/>39 </div>40 )41 }42}43//44const anserOption = {45 id: 0,46 value: '',47 checked: false48}49class CreateOption extends Component {50 constructor(props) {...

Full Screen

Full Screen

Menu.js

Source:Menu.js Github

copy

Full Screen

1// @flow2import * as React from 'react';3import { styled } from '../../../apis/Style';4import FlatList from '../../../primitives/FlatList';5import Text from '../../../primitives/Text';6import TouchableView from '../../../primitives/TouchableView';7import View from '../../../primitives/View';8import type { Option, renderOptionType } from '../types.js.flow';9type Props = {10 getItemLayout?: (11 item: Option,12 index: number,13 ) => {14 length: number,15 offset: number,16 index: number,17 },18 labelKey: string,19 onEndReached?: ?() => void,20 onEndReachedThreshold?: ?number,21 onItemSelect: (option: Option) => void,22 options: Array<Option>,23 renderOption?: ?renderOptionType,24 selectedOptions: Array<Option>,25 valueKey: string,26};27const ROW_HEIGHT = 50;28class Menu extends React.Component<Props> {29 render() {30 const {31 getItemLayout,32 onEndReached,33 onEndReachedThreshold,34 options,35 } = this.props;36 return (37 <FlatList38 data={options}39 getItemLayout={getItemLayout || this._defaultGetItemLayout}40 keyExtractor={this._keyExtractor}41 onEndReached={onEndReached}42 onEndReachedThreshold={onEndReachedThreshold}43 renderItem={this._renderItem}44 />45 );46 }47 _defaultGetItemLayout = (item: Option, index: number) => ({48 length: ROW_HEIGHT,49 offset: ROW_HEIGHT * index,50 index,51 });52 _defaultRenderOption = ({53 option,54 isSelected,55 }: {56 option: Option,57 isSelected: boolean,58 }) => {59 const optionLabel = option[this.props.labelKey];60 return (61 <Row testID={`select-option-${optionLabel}`}>62 <Label numberOfLines={2} isDisabled={option.disabled}>63 {optionLabel}64 </Label>65 <SelectedIcon show={isSelected}>✓</SelectedIcon>66 </Row>67 );68 };69 _keyExtractor = (option: Option) => option[this.props.valueKey];70 _renderItem = ({ item: option, index }: { item: Option, index: number }) => {71 const { onItemSelect, selectedOptions } = this.props;72 const renderOption = this.props.renderOption || this._defaultRenderOption;73 const isSelected = selectedOptions.indexOf(option) > -1;74 return (75 <TouchableView76 disabled={option.disabled}77 onPress={() => onItemSelect(option)}78 >79 {renderOption({ option, index, isSelected })}80 </TouchableView>81 );82 };83}84export default Menu;85const Label = styled(Text)`86 flex: 1;87 ${({ isDisabled }) =>88 isDisabled &&89 `90 color: #ccc;91 `};92`;93const Row = styled(View)`94 align-items: center;95 flex-direction: row;96 height: ${ROW_HEIGHT}px;97 padding: 0 10px;98`;99const SelectedIcon = styled(Text)`100 font-size: 20px;101 opacity: ${props => (props.show ? '1' : '0')};...

Full Screen

Full Screen

Options.js

Source:Options.js Github

copy

Full Screen

...45 <main className="row">46 <div className="dishes-column col d-flex flex-column align-items-center">47 <h3>Comida</h3>48 <div className="d-flex flex-wrap align-items-center justify-content-center">49 { renderOptionType(dishes, comida, 'comida') }50 </div>51 </div>52 <div className="drinks-column col d-flex flex-column align-items-center">53 <h3>Bebida</h3>54 <div className="d-flex flex-wrap align-items-center justify-content-center">55 { renderOptionType(drinks, bebida, 'bebida') }56 </div>57 </div>58 <div className="desserts-column col d-flex flex-column align-items-center">59 <h3>Sobremesa</h3>60 <div className="d-flex flex-wrap align-items-center justify-content-center">61 { renderOptionType(desserts, sobremesa, 'sobremesa') }62 </div>63 </div>64 </main>)65 );66}...

Full Screen

Full Screen

select-hook.js

Source:select-hook.js Github

copy

Full Screen

1// @flow2import {useEffect, useState} from 'react';3import type {OptionsPropsType} from './select-utils';4type RenderOptionType = (props: OptionsPropsType) => React$Node;5type UseSelectPropsType = {|6 native?: boolean,7 renderNativeOption: RenderOptionType,8 renderMuiOption: RenderOptionType,9|};10export const useSelect = ({11 native,12 renderNativeOption,13 renderMuiOption,14}: UseSelectPropsType) => {15 const [renderOption, setRenderOption] = useState(() => renderMuiOption);16 useEffect(() => {17 if (native) {18 setRenderOption(() => renderNativeOption);19 }20 }, []);21 return {renderOption};...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { renderOptionType } = require('playwright/lib/server/frames');2const { chromium } = require('playwright');3const fs = require('fs');4const path = require('path');5(async () => {6 const browser = await chromium.launch();7 const context = await browser.newContext();8 const page = await context.newPage();9 await page.waitForSelector('input[name="q"]');10 const input = await page.$('input[name="q"]');11 const inputElement = await input._elementHandle._client.send('DOM.resolveNode', { node: input._elementHandle._remoteObject });12 const option = await renderOptionType(inputElement.object.objectId, {13 });14 await page.evaluate((node, option) => {15 node.value = option.text;16 }, inputElement.object, option);17 await page.screenshot({ path: 'example.png' });18 await browser.close();19})();20const { renderOptionType } = require('playwright/lib/server/frames');21const { chromium } = require('playwright');22const fs = require('fs');23const path = require('path');24(async () => {25 const browser = await chromium.launch();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { renderOptionType } = require('playwright/lib/server/frames');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/dom');4const page = new Page();5const elementHandle = new ElementHandle(page, null, 'test');6const option = renderOptionType(elementHandle, { value: 'value', label: 'label' });7console.log(option);8{ value: 'value', label: 'label' }9const { renderOptionType } = require('playwright/lib/server/frames');10const { Page } = require('playwright/lib/server/page');11const { ElementHandle } = require('playwright/lib/server/dom');12const page = new Page();13const elementHandle = new ElementHandle(page, null, 'test');14const option = renderOptionType(elementHandle, { value: 'value', label: 'label' });15console.log(option);16{ value: 'value', label: 'label' }17import { renderOptionType } from 'playwright/lib/server/frames';18import { Page } from 'playwright/lib/server/page';19import { ElementHandle } from 'playwright/lib/server/dom';20const page = new Page();21const elementHandle = new ElementHandle(page, null, 'test');22const option = renderOptionType(elementHandle, { value: 'value', label: 'label' });23console.log(option);24{ value: 'value', label: 'label' }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2const { renderOptionType } = require('playwright/lib/server/supplements/recorder/recorderSupplement');3const { chromium } = require('playwright');4const browser = await chromium.launch();5const context = await browser.newContext();6const page = await context.newPage();7const options = { 'value': 'optionValue', 'label': 'optionLabel' };8const option = renderOptionType(options);9console.log(option);10await browser.close();11Expected Output: { value: 'optionValue', label: 'optionLabel' }12const { renderOptionType } = require('playwright/lib/server/supplements/recorder/recorderSupplement');13const { chromium } = require('playwright');14const browser = await chromium.launch();15const context = await browser.newContext();16const page = await context.newPage();17const options = { 'value': 'optionValue', 'label': 'optionLabel' };18const option = renderOptionType(options);19console.log(option);20await browser.close();21const { renderOptionType } = require('playwright/lib/server/supplements/recorder/recorderSupplement');22const { chromium } = require('playwright');23const browser = await chromium.launch();24const context = await browser.newContext();25const page = await context.newPage();26const options = { 'value': 'optionValue', 'label': 'optionLabel' };27const option = renderOptionType(options);28console.log(option);29await browser.close();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { renderOptionType } = require('playwright/lib/helper');2const { expect } = require('chai');3const { TestServer } = require('playwright/lib/utils/testserver');4const { test } = require('playwright/lib/utils/testrunner');5test.describe('Test', () => {6 test.beforeAll(async ({ server }) => {7 await server.setRoute('/test', (req, res) => {8 res.setHeader('Content-Type', 'application/json');9 res.end(JSON.stringify({ foo: 'bar' }));10 });11 });12 test('should work', async ({ page, server }) => {13 await page.goto(server.PREFIX + '/test');14 const foo = await page.evaluate(() => document.body.textContent);15 expect(renderOptionType(foo)).to.equal('object');16 });17});18import { PlaywrightTestConfig } from "@playwright/test";19const config: PlaywrightTestConfig = {20 webServer: {21 },22 use: {23 viewport: { width: 1280, height: 720 },24 },25};26export default config;27 at Context.<anonymous> (test.js:17:30)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { renderOptionType } = require('playwright/lib/server/chromium/crNetworkManager');2console.log(renderOptionType);3const { renderOptionType } = require('playwright/lib/server/chromium/crNetworkManager');4console.log(renderOptionType);5const { renderOptionType } = require('playwright/lib/server/chromium/crNetworkManager');6console.log(renderOptionType);7const { renderOptionType } = require('playwright/lib/server/chromium/crNetworkManager');8console.log(renderOptionType);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { renderOptionType } = require('playwright/lib/server/chromium/crNetworkManager');2const option = renderOptionType({foo: 'bar'});3console.log(option);4{ foo: 'bar' }5 at renderOptionType (/Users/pankaj/Downloads/playwright-internal-api-test/node_modules/playwright/lib/server/chromium/crNetworkManager.js:118:74)6 at Object.<anonymous> (/Users/pankaj/Downloads/playwright-internal-api-test/test.js:6:41)7 at Module._compile (internal/modules/cjs/loader.js:1138:30)8 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)9 at Module.load (internal/modules/cjs/loader.js:986:32)10 at Function.Module._load (internal/modules/cjs/loader.js:879:14)11 at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful