2ccd20e1e5
## Description This PR implements the following changes: - Move the drag events from the Parent component's useEffect to the `HeaderCell` component. - Refactored the code. Inside the table component, we refactored the code such that when SSP is disabled the component uses `StaticTable` and when SSP enabled then we use `VirtualTable`. - It also includes the fix for the following issue. Whenever the user has a scroll to the bottom of the page, on clicking of add new button it is expected that the scroll should move to the top but it wasn't happening. > Add a TL;DR when description is extra long (helps content team) Fixes #20858 > if no issue exists, please create an issue and ask the maintainers about this first ## Type of change - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? - Manual - Test cases: - Column name should appear on update from the property pane - reorder whenever SSP is enabled - On column re-size - When a col is frozen - When a col is unfrozen - When all the headers or one of them is removed - When sorted also should work - Enable multi-row selection - When in preview mode and back and forth(Check the above cases) - When in Deployed mode - Dragging of columns from the column header should work as expected both in Deploy and Published mode. - Cypress ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
export const WIDGET = {
|
|
INPUT_V2: "inputwidgetv2",
|
|
TEXT: "textwidget",
|
|
TEXTNAME: (index: string) => `Text${index}`,
|
|
PHONE_INPUT: "phoneinputwidget",
|
|
CURRENCY_INPUT: "currencyinputwidget",
|
|
BUTTON: "buttonwidget",
|
|
BUTTONNAME: (index: string) => `Button${index}`,
|
|
MULTISELECT: "multiselectwidgetv2",
|
|
BUTTON_GROUP: "buttongroupwidget",
|
|
TREESELECT: "singleselecttreewidget",
|
|
TAB: "tabswidget",
|
|
TABLE: "tablewidgetv2",
|
|
SWITCHGROUP: "switchgroupwidget",
|
|
SWITCH: "switchwidget",
|
|
SELECT: "selectwidget",
|
|
MULTITREESELECT: "multiselecttreewidget",
|
|
RADIO_GROUP: "radiogroupwidget",
|
|
LIST: "listwidget",
|
|
RATING: "ratewidget",
|
|
CHECKBOXGROUP: "checkboxgroupwidget",
|
|
CHECKBOX: "checkboxwidget",
|
|
AUDIO: "audiowidget",
|
|
AUDIORECORDER: "audiorecorderwidget",
|
|
PHONEINPUT: "phoneinputwidget",
|
|
CAMERA: "camerawidget",
|
|
FILEPICKER: "filepickerwidgetv2",
|
|
DOCUMENT_VIEWER: "documentviewerwidget",
|
|
VIDEO: "videowidget",
|
|
CATEGORY_SLIDER: "categorysliderwidget",
|
|
NUMBER_SLIDER: "numbersliderwidget",
|
|
RANGE_SLIDER: "rangesliderwidget",
|
|
IFRAME: "iframewidget",
|
|
} as const;
|
|
|
|
// property pane element selector are maintained here
|
|
export const PROPERTY_SELECTOR = {
|
|
// input
|
|
onClick: ".t--property-control-onclick",
|
|
onSubmit: ".t--property-control-onsubmit",
|
|
text: ".t--property-control-text",
|
|
defaultValue: ".t--property-control-defaultselectedvalues",
|
|
propertyName: ".t--property-control-propertyname",
|
|
onClickFieldName: "onClick",
|
|
TextFieldName: "Text",
|
|
tableData: ".t--property-control-tabledata",
|
|
tableColumnNames: '[data-rbd-draggable-id] input[type="text"]',
|
|
};
|
|
type ValueOf<T> = T[keyof T];
|
|
|
|
export const getWidgetSelector = (widget: ValueOf<typeof WIDGET>) =>
|
|
`.t--widget-${widget}`;
|
|
export const getWidgetInputSelector = (widget: ValueOf<typeof WIDGET>) =>
|
|
`.t--widget-${widget} input`;
|