@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
182 lines • 8.39 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrpDropdownWrapper = exports.SelectionModeSwitchWrapper = exports.CalendarDateWrapper = void 0;
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
const dom_1 = require("@awsui/test-utils-core/dom");
const utils_dom_1 = require("@awsui/test-utils-core/utils-dom");
const button_1 = require("../button");
const input_1 = require("../input");
const radio_group_1 = require("../radio-group");
const segmented_control_1 = require("../segmented-control");
const select_1 = require("../select");
const styles_selectors_js_1 = require("../../../date-range-picker/test-classes/styles.selectors.js");
class CalendarDateWrapper extends dom_1.ComponentWrapper {
findDisabledReason() {
return (0, dom_1.createWrapper)().find(`.${styles_selectors_js_1.default['disabled-reason-tooltip']}`);
}
}
exports.CalendarDateWrapper = CalendarDateWrapper;
class DateRangePickerWrapper extends dom_1.ComponentWrapper {
/**
* Alias for `findTrigger`
* @deprecated
*/
findLabel() {
return this.findTrigger();
}
/**
* Returns the trigger element that can be used to open the picker dropdown.
*/
findTrigger() {
return this.findByClassName(styles_selectors_js_1.default.label);
}
/**
* @param options
* * expandToViewport (boolean) - Use this when the component under test is rendered with an `expandToViewport` flag.
*/
findDropdown(options = { expandToViewport: false }) {
const wrapper = options.expandToViewport ? (0, dom_1.createWrapper)() : this;
return wrapper.findComponent(`.${styles_selectors_js_1.default.dropdown}`, DrpDropdownWrapper);
}
openDropdown() {
(0, utils_dom_1.act)(() => {
this.findTrigger().click();
});
}
}
DateRangePickerWrapper.rootSelector = styles_selectors_js_1.default.root;
exports.default = DateRangePickerWrapper;
__decorate([
dom_1.usesDom
], DateRangePickerWrapper.prototype, "openDropdown", null);
class SelectionModeSwitchWrapper extends dom_1.ComponentWrapper {
/**
* Returns the mode selector as a SegmentedControl wrapper.
*
* The mode selector is only rendered as a SegmentedControl on wide viewports. On narrow viewports, use `findModesAsSelect()` instead.
*/
findModesAsSegments() {
return new segmented_control_1.default(this.getElement());
}
/**
* Returns the mode selector as a Select wrapper.
* The mode selector is only rendered as a Select on narrow viewports. On wide viewports, use `findModesAsSegments()` instead.
*/
findModesAsSelect() {
return new select_1.default(this.getElement());
}
}
exports.SelectionModeSwitchWrapper = SelectionModeSwitchWrapper;
class DrpDropdownWrapper extends dom_1.ComponentWrapper {
findSelectionModeSwitch() {
return this.findComponent(`.${styles_selectors_js_1.default['mode-switch']}`, SelectionModeSwitchWrapper);
}
findValidationError() {
return this.findByClassName(styles_selectors_js_1.default['validation-error']);
}
// -- Relative mode --
findRelativeRangeRadioGroup() {
return this.findComponent(`.${styles_selectors_js_1.default['relative-range-radio-group']}`, radio_group_1.default);
}
findCustomRelativeRangeDuration() {
return this.findComponent(`.${styles_selectors_js_1.default['custom-range-duration-input']}`, input_1.default);
}
findCustomRelativeRangeUnit() {
return this.findComponent(`.${styles_selectors_js_1.default['custom-range-unit-select']}`, select_1.default);
}
// -- Absolute mode --
findHeader() {
return this.findByClassName(styles_selectors_js_1.default['calendar-header']);
}
findPreviousButton() {
return this.findComponent(`.${styles_selectors_js_1.default['calendar-prev-page-btn']}`, button_1.default);
}
findNextButton() {
return this.findComponent(`.${styles_selectors_js_1.default['calendar-next-page-btn']}`, button_1.default);
}
/**
* Alias for findPreviousButton for compatibility with previous versions.
* @deprecated
*/
findPreviousMonthButton() {
return this.findComponent(`.${styles_selectors_js_1.default['calendar-prev-month-btn']}`, button_1.default);
}
/**
* Alias for findNextButton for compatibility with previous versions.
* @deprecated
*/
findNextMonthButton() {
return this.findComponent(`.${styles_selectors_js_1.default['calendar-next-month-btn']}`, button_1.default);
}
/**
* Returns the day container that corresponds to the current day.
*/
findCurrentDay() {
return this.findComponent(`.${styles_selectors_js_1.default.today}`, CalendarDateWrapper);
}
/**
* Returns the month container that corresponds to the current month.
*/
findCurrentMonth() {
return this.findComponent(`.${styles_selectors_js_1.default['this-month']}`, CalendarDateWrapper);
}
/**
* Returns a day container on the calendar.
*
* @param grid the calendar grid. If only one calendar grid is visible (on small screens), use `'right'`.
* @param row 1-based row index of the day.
* @param column 1-based column index of the day.
*/
findDateAt(grid, row, column) {
const gridClassName = grid === 'right' ? styles_selectors_js_1.default['second-grid'] : styles_selectors_js_1.default['first-grid'];
return this.findComponent(`.${gridClassName} .${styles_selectors_js_1.default['calendar-week']}[data-awsui-weekindex="${row}"] .${styles_selectors_js_1.default['calendar-date']}:nth-child(${column})`, CalendarDateWrapper);
}
/**
* Returns a month container on the calendar.
*
* @param grid the calendar grid. If only one calendar grid is visible (on small screens), use `'right'`.
* @param row 1-based row index of the month.
* @param column 1-based column index of the month.
*/
findMonthAt(grid, row, column) {
const gridClassName = grid === 'right' ? styles_selectors_js_1.default['second-grid'] : styles_selectors_js_1.default['first-grid'];
return this.findComponent(`.${gridClassName} .${styles_selectors_js_1.default['calendar-quarter']}:nth-child(${row}) .${styles_selectors_js_1.default['calendar-month']}:nth-child(${column})`, CalendarDateWrapper);
}
findSelectedStartDate() {
return this.findByClassName(styles_selectors_js_1.default['start-date']);
}
findSelectedEndDate() {
return this.findByClassName(styles_selectors_js_1.default['end-date']);
}
findStartDateInput() {
return this.findComponent(`.${styles_selectors_js_1.default['start-date-input']}`, input_1.default);
}
findStartTimeInput() {
return this.findComponent(`.${styles_selectors_js_1.default['start-time-input']}`, input_1.default);
}
findEndDateInput() {
return this.findComponent(`.${styles_selectors_js_1.default['end-date-input']}`, input_1.default);
}
findEndTimeInput() {
return this.findComponent(`.${styles_selectors_js_1.default['end-time-input']}`, input_1.default);
}
// -- Footer --
findClearButton() {
return this.findComponent(`.${styles_selectors_js_1.default['clear-button']}`, button_1.default);
}
findCancelButton() {
return this.findComponent(`.${styles_selectors_js_1.default['cancel-button']}`, button_1.default);
}
findApplyButton() {
return this.findComponent(`.${styles_selectors_js_1.default['apply-button']}`, button_1.default);
}
}
exports.DrpDropdownWrapper = DrpDropdownWrapper;
//# sourceMappingURL=index.js.map