import { Flowchart } from '#ant-design/flowchart';
import "#ant-design/flowchart/dist/index.css";
const IndicatorNode = (props:any) => {
const { size = { width: 120, height: 50 }, data } = props;
const { width, height } = size;
const { label = 'john', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;
return (
<div
className="indicator-container"
style={{
position: 'relative',
display: 'block',
background: '#fff',
border: '1px solid #84b2e8',
borderRadius: '2px',
padding: '10px 12px',
overflow: 'hidden',
boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
width,
height,
borderColor: stroke,
backgroundColor: fill,
color: fontFill,
fontSize,
}}
>
<div style={{ color: fontFill }}>{label}</div>
</div>
);
};
export designer = () => {
return (
<div style={{ height: 600 }}>
<Flowchart
onSave={(d) => {
console.log(d);
}}
toolbarPanelProps={{
position: {
top: 0,
left: 0,
right: 0,
},
}}
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
right: 0,
top: -40,
},
style: {
width: 150,
height: 39,
left: 'auto',
background: 'transparent',
},
}}
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
nodePanelProps={{
position: { width: 160, top: 40, bottom: 0, left: 0 },
defaultActiveKey: ['custom'], // ['custom', 'official']
registerNode: {
title: 'abc',
key:"abc",
nodes: [
{
component: IndicatorNode,
popover: () => <div>abcs</div>,
name: 'custom-node-indicator',
width: 120,
height: 50,
label: 'abc',
},
],
},
}}
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
/>
</div>
);
}
I want to create new custom code with api configurations and once I click on that node it shows the editable custom properties on right panel.
in custom node of #ant-design/flowchart can I add my custom editable properties? that are showing on right panel once I clink on node.. Can someone provide me any reference for that?
In this code the mirrored property is not working. What is the problem in this code?
<Webcam
mirrored={true}
ref={webcamRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
Can anyone help me how to replicate border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; in React Native so I have egg-like object shape? Thanks in advance.
const Egg = () => {
return <View style={styles.egg} />;
};
StyleSheet.create({
egg: {
width: 126,
height: 180,
backgroundColor: "red",
borderTopLeftRadius: 108,
borderTopRightRadius: 108,
borderBottomLeftRadius: 95,
borderBottomRightRadius: 95,
},
});
https://codedaily.io/tutorials/The-Shapes-of-React-Native
I want my video to cover the entire screen but it seems to cover only half of the screen as follows
I have styled the video component as follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: Dimensions.get('window').width,
}}
resizeMode="cover"
repeat={true}
/>
Could anyone tell me how to achieve this behavior and where am I going wrong?
Any help would be useful.
Somehow giving a height has solved the mentioned issue like follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: "90%",
}}
resizeMode="cover"
repeat={true}
/>
I want to use rc-slider for my project.
I want to display different pricing.
It should be like this:
but when i'm trying to implement the slider for my site, it looks like this:
And here's my code for the slider.
<div className="rc-slider rc-slider-with-marks">
<div className="rc-slider-rail" style={{backgroundColor: 'rgb(216, 216, 216)', height: 6}} />
<div className="rc-slider-track" style={{backgroundImage: 'linear-gradient(91deg, rgb(13, 119, 243), rgb(14, 126, 243))', height: 6, left: '0%', width: '0%'}} />
<div className="rc-slider-step"><span className="rc-slider-dot rc-slider-dot-active" style={{left: '0%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(27, 124, 239)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '14.2857%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '28.5714%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '42.8571%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '57.1429%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '71.4286%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '85.7143%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /><span className="rc-slider-dot" style={{left: '100%', width: 10, height: 10, border: 'none', backgroundColor: 'rgb(216, 216, 216)', bottom: '-4px'}} /></div>
<div role="slider" tabIndex={0} aria-valuemin={10} aria-valuemax={80} aria-valuenow={10} aria-disabled="false" className="rc-slider-handle" style={{borderColor: 'rgb(27, 124, 239)', borderWidth: 7, marginTop: '-6px', height: 18, width: 18, backgroundColor: 'rgb(255, 255, 255)', left: '0%'}} />
<div className="rc-slider-mark"><span className="rc-slider-mark-text rc-slider-mark-text-active" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '0%'}}>25K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '14.2857%'}}>50K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '28.5714%'}}>100K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '42.8571%'}}>250K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '57.1429%'}}>500K</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '71.4286%'}}>1M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '85.7143%'}}>3M</span><span className="rc-slider-mark-text" style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}>5M</span></div>
</div>
And here's my css for the slider.
.view-container .upper-info .pricing-content-wrap .rc-slider {
margin-bottom: 45px;
}
.view-container
.upper-info
.pricing-content-wrap
.rc-slider
.rc-slider-mark-text {
bottom: -47px;
color: #a4a4a4;
}
It seems like you forgot to import rc-slider CSS.
import 'rc-slider/assets/index.css'
I tried to reproduce your issue here and removing this CSS import leads to your broken behavior.
Otherwise, it's OK.
Also, note that using inline styles stye={{ prop: value, etc... }}is not a good practice, consider moving them to CSS and operate with class names only in JSX.
Another thing to improve is boilerplate markup. You can use maps to reduce the amount of code:
const marks = ['50K', '100K', '250K']
// in render
<div className="slider-rail">
{marks.map(m => <SliderDot key={m} />)}
</div>
<div className="slider-handle">
{marks.map(m => <SliderMark key={m} label={m} />)}
</div>
// SliderDot
const SliderDot = () =>
<span
className="rc-slider-dot"
style={{
left: '85.7143%',
width: 10,
height: 10,
border: 'none',
backgroundColor: 'rgb(216, 216, 216)',
bottom: '-4px',
}}
/>
// SliderMark
const SliderMark = ({ label }) =>
<span
className="rc-slider-mark-text"
style={{width: '12.8571%', marginLeft: '-6.42857%', left: '100%'}}
>
{label}
</span>
I was facing a similar issue on my Rails app: the whole slider didn't show up even with the import 'rc-slider/assets/index.css' line within the component.
I've just removed it and called it in my main scss file. Now, it works like a charm, hope it helps some people!