I have already set the ProTable's language to en-US. Everything is translated to English already but the pagination footer still is in Chinese. How can I change the pagination language to English?
import ProTable, { ProColumns, IntlProvider, enUSIntl } from '#ant-design/pro-table';
const ProTableList: React.FC<{}> = () => {
return (
<IntlProvider value={enUSIntl}>
<ProTable<TableListItem>
headerTitle="Example List"
actionRef={actionRef}
rowKey="key"
...
/>
...
</IntlProvider>
)
}
If you use Ant Design with Pro Components than you need to use Internationalization from non pro version of Ant Design.
Wrap your App or in this case only ProTable component with ConfigProvider like in code below and you will get english translate.
import React from 'react';
import { ConfigProvider } from 'antd';
import enUS from 'antd/lib/locale/en_US';
import ProTable from '#ant-design/pro-table'
const YourComponent = () => {
return (
<ConfigProvider locale={enUS}>
<ProTable />
</ConfigProvider>
);
}
export default YourComponent;
I figured it out but forgot to update the answer here. The ProTable component has a showTotal method under pagination. You can use the provided total and range variables to modify the displayed pagination text.
import ProTable, { ProColumns, IntlProvider, enUSIntl } from '#ant-design/pro-table';
const ProTableList: React.FC<{}> = () => {
return (
<IntlProvider value={enUSIntl}>
<ProTable<TableListItem>
headerTitle="Example List"
actionRef={actionRef}
rowKey="key"
...
pagination={{
showTotal: (total, range) => (
<div>{`showing ${range[0]}-${range[1]} of ${total} total items`}</div>
),
}}
/>
...
</IntlProvider>
)
}
Will result in this:
Encountering the same issue, I think it's a bug. You can disable it by setting
showTotal to false
pagination={{ showTotal: false }}
Related
I have a function if statement set up to check if one user-input number is bigger than another user-input number, and then subtract the bigger number from the smaller one to create the answer to the problem. But whenever I run the code, sometimes it will work fine, but usually, it will only ever select the first number as the bigger one.
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableHighlight } from 'react-native';
import Constants from 'expo-constants';
export default class App extends Component {
state = {
num1: 0,
num2: 0,
num3: 0,
message: ' ',
};
subtractSmallerNumber = () => {
if (this.state.num1 > this.state.num2) {
this.setState({
num3: (this.state.num1 - this.state.num2),
message: 'num1 is bigger',
})
} else {
this.setState({
num3: (this.state.num2 - this.state.num1),
message: 'num2 is bigger',
})
}
}
I tried rewriting the code but I'm not sure if it's a syntax error. I'm not really sure what to do because I just started working with react native and I don't know a lot yet, but I wasn't sure what to look up online.
It would be beneficial to see the full code as its unclear if the error could be happening within the function you have provided. Also what are the default state values (if any)?
I would hazard a guess that your numbers are probably being evaluated as strings, so it could do with it being cast as a Number. The code you provided can be cleaned up without the use of an if/else statement too with the use of a ternary operator, so your function only every relies on 1 useState, like so:
subtractSmallerNumber = () => {
const { num1, num2 } = this.state;
const isBigger = Number(num1) > Number(num2);
this.setState({
num3: isBigger ? Number(num1) - Number(num2) : Number(num2) - Number(num1),
message: `${isBigger ? 'num1' : 'num2'} is bigger`,
});
};
I have tried simply setting Tone.Transport.bpm but it is ignored. My content just plays at the default 120 BPM. I then looked at some of the docs and it implies you can pass parameters to a constructor to make a Transport with custom parameters. However when I try this is tells me Transport is not a constructor, which I guess it isn't in v14 :/
I am using v14 / Ubuntu / Version 104.0.5112.79 (Official Build) (64-bit) in the latest React.
Here is my code, it is very close to their official example code. The interesting (and confusing!) thing is un-commenting the rampTo line does change the tempo, but over the course of 200ms. Setting this value too low causes an error and I don't want the Tempo to shift once playback is started. I want it to start at a set tempo from sample 0...
import React, {useState} from 'react'
import * as Tone from 'tone'
function App() {
const [toneStarted, setToneStarted] = useState(false)
const [playing, setPlaying] = useState(false)
const [setup, setSetup] = useState(false)
async function goHandler(event) {
if(!toneStarted) await Tone.start()
setToneStarted(true)
setPlaying(!playing)
if(playing) return Tone.Transport.stop()
if(!setup){
var kick = new Tone.Player("/samples/Kicks/003.WAV").toDestination()
var snare = new Tone.Player("/samples/Snares/003.WAV").toDestination()
await Tone.loaded()
// play a note every quarter-note
new Tone.Loop(time => {
kick.start(time)
}, "4n").start(0)
// play another note every off quarter-note, by starting it "8n"
new Tone.Loop(time => {
snare.start(time)
}, "4n").start("8n")
// Tone.Transport.bpm.rampTo(50, 0.2);
setSetup(true)
}
Tone.Transport.bmp = 50;
Tone.Transport.start()
}
return (
<div className="App">
<header className="App-header">
<button onClick={goHandler}>{playing ? "STOP" : "PLAY"}</button>
</header>
</div>
);
}
export default App;
You have to use the .value notation at the end:
Tone.Transport.bpm.value = 50
and you got a wrong typo = bpm instead of bmp
I am trying to create a button group where a user can choose between multiple options. react-bootstrap 2.0.0-rc.0 provides the combination ToggleButtonGroup + ToggleButton for this purpose. Unfortunately, a radio icon appears next to the button. I want to get rid of it. Below, you can find a minimal example to reproduce the radio icon.
import * as React from "react";
import {
ToggleButton,
ToggleButtonGroup,
} from "react-bootstrap";
interface OwnState {
val: boolean;
}
export default class SomeToggleOptions extends React.Component<OwnProps, OwnState> {
constructor(p: Readonly<OwnProps>) {
super(p);
this.state = { val: true }
}
setVal = (newVal: number) => {
this.setState({
val: newVal == 1
})
}
render() {
return (
<div className="p-1 text-right">
<span className="p-1">Auto Refresh:</span>
<ToggleButtonGroup
name="radio"
size="sm"
onChange={this.setVal}
value={this.state.val ? 1 : 0}
>
{radios.map((radio, idx) => {
return (
<ToggleButton
key={idx}
id={`radio-${idx}`}
variant={
this.state.val === radio.value ? "dark" : "outline-dark"
}
value={idx}
>
{radio.name}
</ToggleButton>
);
})}
</ToggleButtonGroup>
</div>
);
}
}
NOTE: I already found React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle and this is NOT working for me.
The icon seems to disappear when I use the normal ButtonGroup + Button instead. But this is not primarily an option as you don't have the radio-like "exclusive" behavior there.
I reverted to the earlier react-bootstrap version 1.6.4. This is probably not fixable (without any hacky moves, css-overwriting, or similar) and induced by react-bootstrap 2.0.0 being only a release candidate so far.
In the earlier react-bootstrap version, my code snippet worked flawless.
This appears to be a temporary issue when upgrading react-bootstrap, see my answer here on duplicate question: https://stackoverflow.com/a/72636860/8291415
Also here is the closed issue on github: https://github.com/react-bootstrap/react-bootstrap/issues/5782
I am creating a block with InnerBlocks component.
If no content added to the InnerBlocks (and even with content in fact) it is very difficult to popup the block toolbar
I would like to add an iconbutton on top corner that will show the block floating toolbar
How can I tell the .block-editor-block-contextual-toolbar to show?
I don't see any method of the .wp-block in the inspector that would do that and the documentation of Block Controls: Block Toolbar and Settings Sidebar https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/ is quite basic
Many thanks
You can use useSelect() to determine if there are any blocks present in the InnerBlocks component:
import { useSelect } from '#wordpress/data';
const hasInnerBlocks = useSelect((select) => (
select('core/block-editor').getBlock(clientId).innerBlocks.length > 0
), [clientId]);
Then you can use hasInnerBlocks to conditionally render whatever you'd like within the edit function:
{ !!hasInnerBlocks && (
<BlockControls group="block">
<ToolbarGroup
// Toolbar group settings here
/>
</BlockControls>
) }
Try to use same code structure among the edit and save methods. The RIchText need to be waraped inside div.
<div>
<RichText.Content
className={ `sticky-note-${ props.attributes.alignment }` }
style={ {
fontSize: props.attributes.fontSize,backgroundColor: props.attributes.color,
} }
tagName="p"
value={ props.attributes.content }/>
</div>
Example
I created this example to illustrate your situation.
import { InnerBlocks, BlockControls } from '#wordpress/block-editor';
// ...
edit: () => {
const blockProps = {
// your own props
};
return (
<div { ...blockProps }>
<BlockControls>
// your controls
</BlockControls>
<InnerBlocks />
</div>
);
}
Problem
For the BlockControls to decide whether or not it should appear, it needs to get some context from its parent which your own props don't have.
Solution:
Use the block props instead for the parent of BlockControls.
Steps:
Import useBlockProps from #wordpress/block-editor:
import { InnerBlocks, BlockControls, useBlockProps } from '#wordpress/block-editor';
Pass your own props as an argument to useBlockProps():
const blockProps = useBlockProps({
// your own props
});
Result
import { InnerBlocks, BlockControls, useBlockProps } from '#wordpress/block-editor';
// ...
edit: () => {
const blockProps = useBlockProps({
// your own props
});
return (
<div { ...blockProps }>
<BlockControls>
// your controls
</BlockControls>
<InnerBlocks />
</div>
);
}
Links
I hope that helped.
My answer is based on Wordpress's official Block Editor Handbook:
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/#block-toolbar
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props
Problem: ignore some part of the .snap file test results
the question here: there are some components in my test that have a random values and i don't really care about testing them. is there any way to ignore part of my X.snap file? so when i run tests in the future it won't give me test fail results.
Now you can also use property matcher for these cases.
By example to be able to use snapshot with these object :
const obj = {
id: dynamic(),
foo: 'bar',
other: 'value',
val: 1,
};
You can use :
expect(obj).toMatchSnapshot({
id: expect.any(String),
});
Jest will just check that id is a String and will process the other fields in the snapshot as usual.
Actually, you need to mock the moving parts.
As stated in jest docs:
Your tests should be deterministic. That is, running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data.
If it's something related to time, you could use
Date.now = jest.fn(() => 1482363367071);
I know it's quite old question but I know one more solution. You can modify property you want to ignore, so it will be always constant instead of random / dynamic. This is best for cases when you are using third party code and thus may not be able to control the non deterministic property generation
Example:
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Card from './Card';
import toJSON from 'enzyme-to-json';
Enzyme.configure({ adapter: new Adapter() });
describe('<Card />', () => {
it('renders <Card /> component', () => {
const card = shallow(
<Card
baseChance={1}
name={`test name`}
description={`long description`}
imageURL={'https://d2ph5fj80uercy.cloudfront.net/03/cat1425.jpg'}
id={0}
canBeIgnored={false}
isPassive={false}
/>
);
const snapshot = toJSON(card);
// for some reason snapshot.node.props.style.backgroundColor = "#cfc5f6"
// does not work, seems the prop is being set later
Object.defineProperty(snapshot.node.props.style, 'backgroundColor', { value: "#cfc5f6", writable: false });
// second expect statement is enaugh but this is the prop we care about:
expect(snapshot.node.props.style.backgroundColor).toBe("#cfc5f6");
expect(snapshot).toMatchSnapshot();
});
});
You can ignore some parts in the snapshot tests replacing the properties in the HTML. Using jest with testing-library, it would look something like this:
it('should match snapshot', async () => {
expect(removeUnstableHtmlProperties(await screen.findByTestId('main-container'))).toMatchSnapshot();
});
function removeUnstableHtmlProperties(htmlElement: HTMLElement) {
const domHTML = prettyDOM(htmlElement, Infinity);
if (!domHTML) return undefined;
return domHTML.replace(/id(.*)"(.*)"/g, '');
}
I used this to override moment's fromNow to make my snapshots deterministic:
import moment, {Moment} from "moment";
moment.fn.fromNow = jest.fn(function (this: Moment) {
const withoutSuffix = false;
return this.from(moment("2023-01-12T20:14:00"), withoutSuffix);
});