Material UI pagination component initial view of number override the default - reactjs

In the Material UI the pagination component is shown below.
<Pagination count={10} />
Here the pagination starts from 1 and first view ends at 5, I need to show 1 to 4 as shown below
I tried using the siblingCount and boundaryCount, but that didn't work. Is there way or am I missing something in the above prop.

There is not currently a way to do this.
This is controlled by the following block of code (from https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui-lab/src/Pagination/usePagination.js#L57):
const siblingsEnd = Math.min(
Math.max(
// Natural end
page + siblingCount,
// Upper boundary when page is low
boundaryCount + siblingCount * 2 + 2,
),
// Less than endPages
endPages[0] - 2,
);
When page, boundaryCount, and siblingCount are all 1, siblingsEnd will be 5 (because of boundaryCount + siblingCount * 2 + 2). If you use a siblingCount of 0, you get a siblingsEnd of 3, but this causes it to behave in a way that doesn't look as nice when you start progressing to later pages. There isn't a way currently to have the first block of numbers end at 4 when page is 1.

Related

Looping in blogger for variable no of times depending on the post page

actually i want to add <a> tag with value inside 1,2,3,4 and so on depending on the post
i am using <b:loop> for this .
this is my code
<div class='queno'>
<b:loop index='i' values='["1","2","3","4","5","6"]' var='foo'>
<a expr:href='"#" + (data:i + 1)' expr:id='"a" + (data:i + 1)'><data:foo/></a>
</b:loop>
so how can print from 1 to n inside the a tag in blogger

Why is a random part of the code highlighted?

We have an online editor made by monaco-editor, here is the link: https://v3.10studio.tech/#/formula-editor-addin?app=formula-editor-addin. Users could enter an Excel formula like =1+2+3+4+5, then click on the Format button to see the formatted formula.
What is odd is that, after clicking on Format button, a random part of the formula is often highlighted in gray:
Does anyone know what may be the cause?
PS: The current options setting are as follows:
const monacoOptions: monacoEditor.editor.IEditorConstructionOptions = {
lineNumbers: 'off',
selectionHighlight: false,
glyphMargin: false, //left side,
lineDecorationsWidth: 0, // width between line number and content,
renderIndentGuides: false, // no indent guide lines
minimap: { enabled: false },
};
When you set the value of the model ie editor.getModel().setValue('FORMATTED-CODE') you should have to set the position of the cursor manually.
The selection is actually not random. Monaco will select all the extra texts you have added. For example -
Before : 1+2+3+4+5 - here last position is line 1 column 10
Format: 1 + 2 + 3 + 4 + 5 - here last position is line 1 column 18
So the extra text + 4 + 5 is selected, it means column 11 to 18 is selected
To set the position of the cursor at where it was before
const pos = editor.getPosition()
editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition(pos)
To set the position of the cursor at Line 1 Column 1
editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition({ lineNumber: 1, column: 1 })
To set the position of the cursor at last (using offset)
const formatted = 'FORMATTED-CODE'
const offset = formatted.length
const pos = editor.getModel().getPositionAt(offset)
editor.getModel().setValue(formatted)
editor.setPosition(pos)
You can also set selection
editor.setSelection({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: 5,
})
For more informations you can follow these APIs -
setPosition - To set cursor position
setSelection - To set selection
setSelections - To set multiple positions & selections

How to implement input text masking in React-Native?

The mask is needed: 90.99%, where:
9 - optional digit
0 - required
%,. - relevant characters '%' and '.'
For example:
Input / Result
1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%
I'm using redux-form
I've tried react-native-text-input-mask and react-native-masked-text already, however, there is no similar functionality in these packages (in the first one there is something similar, but '%' is correctly displayed only if it is used before the number but this char should be after)
The best way here is to provide masking next to the input itself.
It highly depends on how do you use the Field component (do you even use it?).
You can try to use the format prop on the Field.
Or you can provide your own component to render a field and provide own format functionality:
const renderPercentagedInput = (field) => {
function onChange(evt) {
const value = evt.target.value;
const numbers = value.replace(/[^0-9.,]/g, '')
field.input.onChange(numbers + '%')
}
return (
<TextInput
{...field.input}
onChangeText={onChange}
/>
);
}

cv2.imshow() does not work properly when the image is small

cv2.imshow() does not work properly when the image is small.
import numpy as np
import cv2
im = np.ones((5, 10, 3)) * 255
im = im.astype(np.uint8)
im[:, 5:, :] = np.zeros((5, 5, 3)).astype(np.uint8)
cv2.imshow('1', im)
cv2.imshow('2', cv2.resize(im, dsize=(20, 20), interpolation=cv2.INTER_NEAREST))
touch_img = np.zeros((5, 256, 3))
for i in range(25):
touch_img[:, i*10 + 6:(i+1)*10 + 6, :] = im
touch_img[:, :6, :] = im[:, 4:, :]
cv2.imshow('3', touch_img)
cv2.imshow('4', cv2.resize(touch_img, dsize=(512, 10), interpolation=cv2.INTER_NEAREST))
im = np.ones((1, 2, 3)) * 255
im = im.astype(np.uint8)
im[:, 1:, :] = np.zeros((1, 1, 3)).astype(np.uint8)
cv2.imshow('5', im)
cv2.waitKey(0)
These code will create 5 windows to show the different images.
However, I found the following problems of these images' show results.
window 1 does not show properly;
window 2 shows properly;
window 3 does not show properly, because the rightest of image has some unexpected white region.
window 4 works properly.
If the problem is coming from the image being too small, add the following line before your cv2.imshow('window_name', image) lines:
cv2.namedWindow('window_name', cv2.WINDOW_NORMAL)
Then you can resize it to whatever you want. Reference: https://docs.opencv.org/2.4/modules/highgui/doc/user_interface.html?highlight=namedwindow
you can read the doc and the result is to add this line:
cv2.namedWindow("Image", cv2.WINDOW_NORMAL)
before the line:
cv2.imshow("Image", image)
and the wall lines is:
cv2.namedWindow("Image", cv2.WINDOW_NORMAL)
cv2.imshow("Image", image)
cv2.waitKey(0)
cv2.destroyAllWindows()

Qbasic Highlighted Menu

Does anyone have an example code or instructions for making this work? I've just never been able to accomplish a highlighted menu that uses the arrow keys and enter for selections. Thanks in advance!
I anticipate this working by drawing boxes for each option, and redrawing the box in color while coloring the text when an option is selected. I'm just unsure how to design a loop to accomplish this. I'm pretty comfortable with the INKEY$ function and the SELECT CASE statement, but I don't know how to factor them in.
A highlighted menu will draw the menu and wait for a key press in a loop or using SLEEP. A common alternative was to simply change the text color of one of the first few letters, informing the user to press the corresponding key to select the corresponding menu option. For example, the letters Q in "Quit" and N in "New Game" would be a different color from the rest of the text in the line.
However, you're asking to use the arrow keys, so clearly you don't want to do it that way. How you highlight the current menu item depends on the screen mode in use. Screen modes 11, 12, and 13 don't allow you to specify a background color, and I can't get DOSBox to render a background with modes 7, 8, and 9. As a workaround to this issue, you could instead simply draw a box next to the current selection and erase the box (draw a black one or whatever your screen's background color is). Or you could just use an asterisk to avoid graphics/text size issues and simplify the code. Here's an example of the box style with arrow keys, WASD keys, and Vim-style keys (H=Left, J=Down, K=Up, L=Right) all supported, assuming a US-QWERTY keyboard is used. If you only wanted arrow keys, then you'd merely need to change the first (outer) SELECT CASE...END SELECT block to simply IF LEFT$(k$, 1) = CHR$(0) THEN...END IF while preserving the inner SELECT CASE...END SELECT block that works with extended keys.
'size% is used in the selIncDec subroutine.
DIM text$(0 TO 3)
DIM SHARED size%
size% = UBOUND(text$) - LBOUND(text$) + 1
selected% = 0
text$(0) = "Example 1"
text$(1) = "Example 2"
text$(2) = "Example 3"
text$(3) = "Example 4"
SCREEN 12
' Width and height of a text cell in pixels.
' I use 8x8 text cells for max screen compatibility, despite 8x16 looking better.
xpxText% = 8
ypxText% = 8
' See the documentation for SCREEN to determine which screen sizes are
' available with the screen mode you want to use.
' 80x60 for mode 12 results in 8x8 text cells. 80x30 results in 8x16 text cells.
WIDTH 80, 60
DO
LOCATE 1, 1
FOR i% = LBOUND(text$) TO UBOUND(text$)
PRINT TAB(3); text$(i%)
' selected% = i%
' is an equality comparison, resulting in -1 for true and 0 for false.
' If false, -(0) * 2 = 0; if true, -(-1) * 2 = 2.
LINE (0, i% * ypxText%)-STEP(xpxText% - 1, xpxText% - 1), -(selected% = i%) * 2, BF
NEXT i%
SLEEP
k$ = INKEY$
SELECT CASE UCASE$(LEFT$(k$, 1))
' Left -- does nothing
CASE "H", "A"
' Right -- does nothing
CASE "L", "D"
' Up
CASE "K", "W"
CALL selIncDec(selected%, -1)
' Down
CASE "J", "S"
CALL selIncDec(selected%, 1)
' Enter key
CASE CHR$(13)
EXIT DO
' Extended key, such as arrows.
CASE CHR$(0)
SELECT CASE RIGHT$(k$, 1)
' Left
CASE "K"
' Right
CASE "M"
' Up
CASE "H"
CALL selIncDec(selected%, -1)
' Down
CASE "P"
CALL selIncDec(selected%, 1)
END SELECT
END SELECT
LOOP
PRINT USING "You selected option #"; selected% + 1
END
SUB selIncDec (selected%, amtInc%)
selected% = selected% + amtInc%
IF selected% >= size% THEN
selected% = selected% - size%
ELSEIF selected% < 0 THEN
selected% = selected% + size%
END IF
END SUB
If you were using a screen mode that supports background colors or highlighting in some form, such as screen 0, you might be able to get away with simply "highlighting" the entire line's background in text mode. You need not specify the width of the screen to have a "reverse video" effect acting as highlighting, but it looks better when you have an entire line highlighted rather than just the text. After that menu item is printed, just change the colors back to the default and continue printing as usual. Below shows a few changes to the above code (screen mode, screen width setting, and menu display code), but it remains the same otherwise:
SCREEN 0
'8x8 text cells in SCREEN 0 for VGA adapters.
WIDTH 80, 43
...
FOR i% = LBOUND(text$) TO UBOUND(text$)
' "Reverse video" highlighting.
IF selected% = i% THEN COLOR 0, 7 ELSE COLOR 7, 0
PRINT TAB(3); text$(i%); SPACE$(78 - LEN(text$(i%)))
NEXT i%
' The screen will turn "white" when the last menu item is selected.
' This fixes the issue.
COLOR 7, 0
SLEEP
...
Note that I assumed a VGA adapter with a color display for all of the code above, which has long since been superseded by various other display adapter standards that are in use even on devices as small as smart watches.
You should be able to adapt the code to fit your needs. I designed it such that you could simply add menu items as you wished. Also, the display code itself is contained entirely in the FOR...NEXT loop with the functionality immediately following, so all you'd need to change is the stuff inside the FOR...NEXT loop to change how things are displayed.
I'm in the same boat, wanting to use SCREEN 12 for a menu, with background colour. As per http://www.qb64.net/wiki/index_title_COLOR/
SCREEN modes 12 and 13 can use the foreground parameter only in QB 4.5! Background color 0 can be changed using OUT.
I also came across this SUB:
SCREEN 12
ColourPrint "Hello", 4, 9
PRINT
ColourPrint "bob", 3, 10
SUB ColourPrint (t$, fg%, bg%)
' t$ = printing text
' fg% = foreground colour
' bg% = background colour
DIM h%(1 + 32 * LEN(t$))
x1% = 8 * (POS(0) - 1)
y1% = 16 * (CSRLIN - 1)
x2% = x1% + 8 * LEN(t$) - 1
y2% = y1% + 15
LINE (x1%, y1%)-(x2%, y2%), bg%, BF
GET (x1%, y1%)-(x2%, y2%), h%()
COLOR fg% XOR bg%
PRINT t$;
PUT (x1%, y1%), h%(), XOR
ERASE h%
END SUB
This site has a bunch of menu examples that might help too:
http://www.brisray.com/qbasic/qmenu.htm
Basically you need a loop that:
Keeps track of the current menu item selected (usually an index of the menu item: 1, 2, 3, ...) within a variable - let's call it SELECTED
Draws the menu on the screen with a highlight for the selected item (you'll need to iterate over all menu items and highlight when SELECTED = current menu item index)
Wait for a key to be pressed:
If the key is UP then select previous menu item (SELECTED = SELECTED - 1)
If the key is DOWN then select next menu item (SELECTED = SELECTED + 1)
If the key is ENTER then exit menu and return the selected item
I have a full example here but for a text-based menu. You can adapt it to your problem. The main functionality is on the "menu" function:
DECLARE FUNCTION countItems% (items$)
DECLARE FUNCTION menu% (row%, col%, items$)
DECLARE FUNCTION widestItemLength% (items$)
DEFINT A-Z
CONST SEPARATOR = ";"
CLS
selectedMenuOption = menu(1, 1, "APPLE;BANANA;ORANGE;EXIT")
PRINT
PRINT
PRINT "Selected menu option:"; selectedMenuOption
' Returns how much items we have in the menu
'
FUNCTION countItems (items$)
count = 1
DO
i = INSTR(i + 1, items$, SEPARATOR)
IF i > 0 THEN count = count + 1
LOOP UNTIL i = 0
countItems = count
END FUNCTION
' Main menu functionality
' 1. shows the menu highlighting the selected item
' 2. wait for a key to be pressed
' a. UP -> select previous item
' b. DOWN -> select next
' c. ENTER -> exit and returns the index of the current selected item
'
FUNCTION menu (row%, col%, items$)
widestLength = widestItemLength(items$)
itemCount = countItems(items$)
selected = 1 ' menu item index starting by 1
DO
' Prints the menu on the screen
itemEnd = 0
LOCATE row%, col%
FOR i = 1 TO itemCount
itemStart = itemEnd + 1
itemEnd = INSTR(itemStart, items$, SEPARATOR)
IF itemEnd = 0 THEN itemEnd = LEN(items$) + 1
item$ = MID$(items$, itemStart, itemEnd - itemStart)
item$ = " " + item$ + SPACE$(widestLength - LEN(item$)) + " "
IF selected = i THEN COLOR 0, 7 ELSE COLOR 7, 0
LOCATE CSRLIN + 1, col: PRINT item$;
NEXT
WHILE INKEY$ <> "": WEND ' Clears the keyboard buffer
DO: k$ = INKEY$: LOOP WHILE k$ = "" ' Waits for a key to be pressed
SELECT CASE k$
' Up key pressed - select previous menu item
CASE CHR$(0) + "H": IF selected > 1 THEN selected = selected - 1
' Down key pressed - select next menu item
CASE CHR$(0) + "P": IF selected < itemCount THEN selected = selected + 1
END SELECT
LOOP UNTIL k$ = CHR$(13) ' Loops until the key pressed is enter
menu = selected ' returns the selected menu item index
COLOR 7, 0
END FUNCTION
' Returns the size of the widest menu item
'
FUNCTION widestItemLength (items$)
widestLen = 0
itemEnd = 0
DO
itemStart = itemEnd + 1
itemEnd = INSTR(itemStart, items$, SEPARATOR)
IF itemEnd = 0 THEN itemEnd = LEN(items$) + 1
itemLen = itemEnd - itemStart
IF itemLen > widestLen THEN widestLen = itemLen
LOOP UNTIL itemEnd = LEN(items$) + 1
widestItemLength = widestLen
END FUNCTION

Resources