We Keep Coding

How to add custom icon in react select of search filter

I am working on react-select where I need to add custom icon with cross icon when user to select something from dropdown. I really tried hard but did not find any proper solution to resolve my problem . Could someone please help me how to add custom icon in react select .
Dropdown an attachment
As you see in attachment, you will see cross icon and I want my custom icon with this cross icon .

If you want to add an additional icon, you could still create a custom component (say for the ClearIndicator) then just add your icon to the component as a sibling alongside props.children and they should both appear on the DOM together
<Select
components={{
ClearIndicator: ({ ...props }) => (
<components.ClearIndicator
{...props}
>
{props.children}
<NewIcon>Your icon here</NewIcon>
</components.ClearIndicator>
),
}}
/>

Based on what I could find in this file, there is a component prop which takes an object which has these properties. You can probably use the CrossIcon or ClearIndicator property to specify the icon. In the end, it would like this:
<Select component={{
CrossIcon: // Icon here,
ClearIndicator: // Or here
}}
/>

Ant Design, how to customize Steps component

I am using the Ant Design Steps component. I want to append additional components such as a button next to each step's description (make it more actionable).
I also want to make a border around each step's description.
Does anyone know how to use it?

Method
If you check their document, you would find that there are 4 APIs with type string|ReactNode
title
subTitle
icon
description
This means you can pass a child component to those props, which can be used for customizing.
Refer:
API of Steps.Step
Demo
<Step
title="Step 1"
subTitle={<button>XXX</button>}
status="finish"
icon={<AcUnit />}
description="This is a description."
/>

Why query params are disappearing from the url?

My React app is using react-router-dom#4.3.1.
This is how I add search after checkbox is clicked:
this.props.history.push({search: `?packages=${list.join(',')}`})
As soon as I click the checkbox, queryparam would display for a split second and disappear. UI does appear corresponding to the queryparams.
What could be the reason it is disappearing?

I think you need to provide pathname as well, path is required
Do it as this
this.props.history.push({pathname: '/yourpath', search: `?packages=${list.join(',')}`})
Hope it helps

Customize ngx-datatable pager component to show Text instead of Icons and add totalVisible property?

I am Customizing the datatable-pager in ngx-dataTable and can able to add footers and pagers. I have only two issues as follows -
For prev / Next / First and Last button , How to show text instead of icon?
How to add totalVisible property to show first 3 and last 3 pages in the pager and show a ... disabled button in between?
currently I am writing the following code -
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible"
>
<datatable-pager
[pagerLeftArrowIcon]="datatable-icon-Left"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
I need to pass some Text Props instead of the arro icons and next/prev icons to show text. And I also need to show first 3 and last 3 page buttons in the pager and show a ... disabled button in between in case there are more than 7 page to show Just like

to replace icons with text you will have to replace datatable-pager with your component, and provide the functionality. You can see here how datatable-pager has been implemented and create your own component.
Link: https://github.com/swimlane/ngx-datatable/blob/master/src/components/footer/pager.component.ts
If you need any help feel free to ask.

above provided url is not working, you can check below url which showing correct code https://github.com/swimlane/ngx-datatable/blob/master/projects/swimlane/ngx-datatable/src/lib/components/footer/pager.component.ts

CKEditor(5) - How to remove select table widget?

I need to remove the widget that is used for table selection to prevent selecting and potentially deleting the entire table afterwards.
I just want to show and edit table data that I get in raw html string, without any other functionalities, toolbars, widgets, ...
Hiding this widget can be done by removing class names, but I hope there is a better way of doing this.
I suppose this widget is a part of Table plugin.
I want to get more clear look, like this:
I'm using "react": "^16.8.3" and "#ckeditor/ckeditor5-react": "^1.1.3".
This is my CKEditor React component config.
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
<CKEditor
editor={ClassicEditor}
config={{
toolbar: null // To remove default CKEditor toolbar
}}
data={tableContent}
disabled={disabled}
/>

We do not support this functionality (it is impossible to achieve this through editor configuration), however, there are two directions / ideas we could point you if you'd like to try to write it yourself.
When the table becomes selected, you could turn read-only mode. This should prevent any modifications except of moving the selection to another place. Switch off read-only mode when the selection is changed.
Similarly, when the table is selected, you could disable DeleteCommand.
To check if the table is selected you need to check if the model selection contains exactly the table element.
Below, I link you to the important part of API docs:
editor.model.document.selection
editor.isReadOnly
Command class - check forceDisabled and clearForceDisabled methods
editor.commands - to get a command

After all, I just hid the widget. It doesn't completely prevent the selection but it looks cleaner and "selecting" space is very narrow.
.ck.ck-widget__selection-handler {
display: none;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred > figure,
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused > figure {
margin: 16px 0;
}