I am trying to implement the react-chessboard component. I want a page that contains an empty chessboard and the pieces are kept outside for the user to drag and drop them into the board. By default the board is set to the starting position.
In the react-chessboard documentation, I came across a prop called 'customDndBackend' which takes a value of type BackendFactory. I could not find it anywhere so I asked it here. Any help would be appreciated.
react-chessboard-npm page
<Chessboard
className={classes.board}
boardWidth={
window.screen.width < 600 ? 0.9 * window.screen.width : 560
}
arePiecesDraggable={true}
// position={'start'}
animationDuration={200}
customBoardStyle={{
borderRadius: '4px',
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',
}}
customDarkSquareStyle={{ backgroundColor: '#A1B57D' }}
customLightSquareStyle={{ backgroundColor: '#F7F7EE' }}
customPieces={customPieces()}
ref={chessboardRef}
/>
I'm actually the author of this package so maybe I can help.
The package utilises react-dnd to handle dragging and dropping. This comes with different "Backends" for handling dragging and dropping on Mobile devices or Browsers.
react-chessboard has its own logic to try to load the correct backend for you automatically. But in case you want to override it with your own, or set a specific one, you can use the prop to pass it in yourself. That's all there is to it really, here's some code used in the package for more reference.
const backend = customDndBackend || (isMobile ? TouchBackend : HTML5Backend);
Related
For the 2 panels in the AgentDesktopView, I'm trying to adjust the size of Panel 1.
I've tried:
flex.AgentDesktopView
.defaultProps
.splitterOptions
.initialFirstPanelSize = '250px'
and
flex.AgentDesktopView
.defaultProps
.splitterOptions
.minimumFirstPanelSize = '250px'
I've tried searching through docs and can't find much information around it.
Twilio developer evangelist here.
If you have a plugin you can put the code in, you can try this
flex.AgentDesktopView.defaultProps.splitterOptions = {
initialFirstPanelSize: "250px",
minimumFirstPanelSize: "250px",
//minimumSecondPanelSize: "xx%"
};
Either the theme or these component options can be used ie. if you're updating the config in the manager when you changed the options:
manager.updateConfig(appConfig);
Let me know if this helps at all!
I've styled my website using a theme.js file utilizing emotion and styled-system and want to show the value (e.g #141414) on the front end vs the token name (e.g bgPrimary).
Obviously when I use the token in practice, my website's background is the correct value but I want to showcase the token name and value on the front end as well (for documentation purposes).
An example of how I regularly use it is like so:
background-color: ${props => props.theme.colors.bgPrimary)
But if I wanted to show the value of bgPrimary on the front-end inside a Text component, like so:
<Text value={___} />
how would I have that return the value #141414 without actually hardcoding the HEX value?
Here's how the color object in theme file currently looks:
const colors = {
accent: '#8548FF',
actionPrimary: '#12A55C',
actionPrimaryInteractive: '#0C6E3D',
actionSecondary: '#292929',
actionSecondaryInteractive: '#1F1F1F',
bgPrimary: '#141414',
bgSecondary: '#0A0A0A',
contentPrimary: '#F5F5F5',
contentSecondary: '#8F8F8F',
modes: {
light: {
accent: '#691FFF',
actionPrimary: '#16CA70',
actionPrimaryInteractive: '#109351',
actionSecondary: '#E0E0E0',
actionSecondaryInteractive: '#CCCCCC',
bgPrimary: '#EBEBEB',
bgSecondary: '#F5F5F5',
contentPrimary: '#0A0A0A',
contentSecondary: '#707070',
},
}
}
As you can see, I have two color modes and bgPrimary is different depending on which mode you have set. This is why it's important for the value to be pulled from the theme vs hardcoded.
My Y-Axis keys (or ticks) are pretty long, and they're being truncated
But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the whole graph is not sufficient... and that's supposed to be the ResponsiveBar...
changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:
How can I make them appear in full? Couldn't find my answer in the docs.
Here's a sandbox to reproduce the problem: https://codesandbox.io/s/missing-legends-text-pns6v
IMPORTANT: 'width' is not the problem, it is somehow covered with a sort of a white line... also, I tried many 'width' sizes
The problem I'm referring to is this:
Would love to hear if there's a way to wrap the text, or truncating with adding on hover effect to show the full text
solution 1 : increase margin
You can set the left property in margin of ResponsiveBar. In the following example set to 240px:
<ResponsiveBar
........
margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
........
/>
You will also need to update the container style to expand the chart setting the margin to 0 for example :
style={{
.....
margin: "0"
}}
Result:
Sandbox
solution 2: tooltip
If you don't want to increase the margin, you can override the format function in axisLeft props and :
cut the string like New York, Manhatta...
add a <title> tag to display a tooltip :
axisLeft={{
format: (v) => {
return v.length > 10 ? (
<tspan>
{v.substring(0, 10) + "..."}
<title>{v}</title>
</tspan>
) : (
v
);
},
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: -40
}}
checkout this post
Sandbox
Can I use the styled-system to achieve something like this?
<MyComponent
backgroundImage={{
default: "https://placekitten.com/380/80",
sm: "https://placekitten.com/340/80"
}}
/>
or this (because I know it can be done this way too with other "style props" such as width, but I prefer to use an object with keys):
<MyComponent
backgroundImage={[
"https://placekitten.com/300/80",
"https://placekitten.com/500/80"
]}
/>
I think the code examples above are self-descriptive and they follow the library's pattern but just to be clear, I'm mapping the values (image sources) to the breakpoints (default and next one up).
For example, this works out of the box:
<Box
width={[
default: 1,
sm: 1/3,
]}
/>
The output is something like this:
.QWojd {
width: 100%;
}
#media screen and (min-width: 24em) {
.QWojd {
width: 33.33333333333333%;
}
}
I've been looking into the source code and this part here makes me think it should work with backgroundImage too:
Sadly, it doesn't work, and the result is a stringified object (or concatenated array values) in the CSS output.
I can't think of how the variant function would be useful here as people have suggested. I've tried to use the system function but I just can't understand the documentation. The ResponsiveValue type gives me a hint but I feel like crawling in the dark when I try to understand the internals.
Ultimately, I'd like to use the "breakpoints object" (or array) with whatever custom prop I feel like, like this:
<Box
myProp={[
default: 'foo',
sm: 'bar',
]}
/>
Note: I've learned (from experience) that you can just use the "breakpoints array" version (without setting breakpoints in a theme and passing it to a provider) and that will map the value to the first 2 default breakpoints (not sure where they come from) but if you want to use an object with keys you need to use a ThemeProvider with a theme object with your own breakpoints.
Note 2: I can understand the styled-system documentation up to this point: https://styled-system.com/custom-props. When I arrive here I feel like this is what I'm looking for but I can't understand the example, the explanation confuses me even more and I can't find any examples on the web.
Note 3: Spectrum Chat has a styled-system channel and the library author is in there but sadly I haven't been able to send any messages there (constant network error)
Examples
Ok, so according to the docs (https://styled-system.com/custom-props/), in order to create a custom prop (or in this case, replace the existing one) you should use the system utility. Since I'm not a user of this library (styled-system), I'm not 100% sure that this is correct approach, but I tested on top of your example code and it seems to work as you wanted.
The component declaration (it also works with objects like you wanted) with an array:
<ResponsiveImageBox
color="white"
backgroundImage={[
"https://placekitten.com/300/80",
"https://placekitten.com/500/80"
]}
>
Box 8
</ResponsiveImageBox>
with objects:
<ResponsiveImageBox
color="white"
backgroundImage={{
default: "https://placekitten.com/300/80",
sm: "https://placekitten.com/500/80"
}}
>
Box 8
</ResponsiveImageBox>
And this is the component code:
export const ResponsiveImageBox = styled(Box)(
({ myCustomProp }) => {
return css`
${system({
backgroundImage: {
property: "backgroundImage",
transform: value => `url(${value})`
}
})}
`
});
As you can see on examples 4, 5 and 8 (https://stackblitz.com/edit/styled-system-mccqje?file=Examples.tsx), I also did it for the border-radius attribute with a simple prop renaming and just specifying what css attribute I wanted to change (property), so no need to add transform as the value will remain the same.
export const ExtendedBox2 = styled(Box)<ExtendedBoxProps>`
background-position: center;
${system({
myCustomProp: {
property: "border-radius"
}
})}
`;
Have a look and see if this is what you were looking for! :)
I know you already marked it as solved, and Eduardo's approach definitely works. However another way you can do it "out of the box" is to use aliases so that you can use objects instead of arrays (source: https://styled-system.com/responsive-styles/):
// theme.js
const breakpoints = ['40em', '52em', '64em', '80em']
// aliases
breakpoints.sm = breakpoints[0]
breakpoints.md = breakpoints[1]
breakpoints.lg = breakpoints[2]
breakpoints.xl = breakpoints[3]
export default {
breakpoints,
}
// ResponsiveImageBox.js
<ResponsiveImageBox
color="white"
backgroundImage={{
md: "https://placekitten.com/300/80",
sm: "https://placekitten.com/500/80"
}}
>
Box 8
</ResponsiveImageBox>
I try to implement a virtual scrolling loading qx.ui.mobile.list.List. At least a lazy loading one. There is no event available by qooxdoo to know when the List is scrolled to the end. Is there some way to know the 'onScrollEnd' event or is there a better way?
The team added the feature in August, called waypoints. Here's the post. You need to define offsets at which you wish the event to be risen. Here's example from the post to illustrate the idea.
var scrollContainer = page._getScrollContainer();
scrollContainer.setWaypointsY(["0%", "50%", "100%", 200, ".waypoint"]);
scrollContainer.addListener("waypoint", function(evt)
{
console.log("Waypoint reached:" + evt.getData());
}, this);
Event payload has the following structure.
{
"offset" : 0,
"input" : "10%",
"index" : 0,
"element" : 0
}
There's also a complete demo in mobile showcase of lazy-loading list implemented with waypoints: showcase, code.