“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

From today on, I will summarize the technical problems I encountered in the actual project process and the process of packaging components, record and output the corresponding knowledge articles, provide a direction for everyone to think, and then encourage them together and make progress together.

Today, I will first summarize the packaging ideas of three progress bar related components in a React project. Since the technology stack I use now is React, students of Vue technology stack can only refer to the ideas and make flexible attempts by themselves. Related components in the Vue project will be shared in the following articles.

The Progress bar is used in many scenarios in actual development projects, especially in our company, which has many report requirements and many percentage display scenarios. Moreover, our Boss and UI have their own ideas, so we cannot simply use the Progress component provided by Antd to render the effect. Therefore, we need to develop corresponding components to meet the needs of the progress bar effect.

In the above picture, the effect is used in the table, and the use scenario is not in the table:

Background Progress bar

As its name implies, the background progress bar makes the performance effect of the progress bar into a background. The progress can be visually expressed by changing the dark and light colors of the background and adding numbers.

How to encapsulate? There are two boxes, one for the container and one for the progress. The container box has a light background and the progress box has a dark background. As for the numbers, use the special property Children provided by React. The project uses simple TypeScript for typing, so those of you who don’t know TypeScript need to learn about it on your own or remove the TypeScript references. 3. Without more talk, engage in:

Create bgProgress.tsx file:

import React from 'react'; import './style.less'; interface BgProgressProps extends React.ComponentProps<any> { rate: string; // percentage wrapClassName: string; // barClassName: string; } /** * @props * @constructor */ const BgProgress = (props: BgProgressProps) => { const {rate, wrapClassName, barClassName, children} = props; return ( <div className={['bit-cellprogress', wrapClassName].join(' ')}> <div className={['bit-bar', barClassName].join(' ')} style={{width: `${rate}`}} ></div> {children} </div> ) } export default BgProgress;Copy the code

Create style.less style file:

.bit-cellprogress { position: absolute; left: 0; top: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; .bit-bar { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; }}Copy the code

At this point, the main code for the background progress bar component is complete. We define three necessary attributes: rate, wrapClassName, and barClassName. The component will implement the background progress bar effect based on the percentage of progress passed in, the container class name, and the progress barClassName. The container class name and progress bar class name are defined as the class name rather than the color value directly, considering that different color effects may be defined according to different conditions. In my work, I need to display green, red or gray according to whether it is passed, rejected or undecided. It is easy to expand with the class name. If you don’t want to use the class name, you can also pass in different color values for different states.

Usage:

1) Import BgProgress from "... /.. /.. /component/BgProgress/BgProgress"; 2) Let wrapClass = status? 'is-green' : 'is-red'; let barClass = status ? 'is-green-bar' : 'is-red-bar'; <BgProgress rate={`${percent}%`} wrapClassName={wrapClass} barClassName={barClass} > <div>{percent}%</div> </BgProgress> Is -green {color: #B1B1B1; background-color: #fafff5; } .is-green-bar { background-color: #e5f6d3; } .is-red { color: #B1B1B1; background-color: #ffdad7; } .is-red-bar { background-color: #ffb6b6; }Copy the code

Effect:

The effect is like this. The background progress bar is mainly used in the table, which is more intuitive to show the progress. In fact, the above code can extend many attributes, but my business only needs three attributes, if you need other styles in the actual work, you can continue to extend the attributes to achieve the desired effect, I will enrich the background component and publish on NPM later.

Customize the progress bar

The requirement of custom progress bar is that the numbers of the progress bar provided by Antd are displayed on the right side, while THE UI expects the numbers to be displayed on the top of the progress bar and along with the progress to be displayed horizontally on the right side (fancy). Therefore, the existing components do not meet the use scenario, and we have to develop again. Look at the design draft:

Consider: will the pattern be affected when the width of the progression is not enough to place the decimal values in the design diagram? The answer is yes, the UI didn’t think of it when I pointed it out, and when I tried to lobby the UI to use the existing Antd component, the UI threw out: Boss wants this… I’m nm… All right, wait for me!

Create diyprogress.tsx file:

import React, {useEffect} from 'react'; import './style.less'; interface DiyProgressProps { decimal: number | string; // Decimals percent: number; // percentage strokeWidth? : number; // Width of progress bar strokeLinecap? : string; // Progress bar style strokeColor? : string; } /** * const DiyProgress = (props: DiyProgressProps) => { const { percent = 0, decimal = 0, strokeWidth = 12, strokeLinecap = 'square', strokeColor = '#5B8FF9' } = props; useEffect(() => { }, []); return ( <div className="bit-progress"> <div className="bit-progress-outer"> <div className={["bit-progress-inner", percent < 20 ? 'bit-fixed-inner' : ''].join(' ')} style={{borderRadius: strokeLinecap === 'round' ? 100 : 0}} > <div className={percent < 20 ? 'bit-fixed-text' : "bit-progress-text"} style={{width: `${percent}%`}} >{decimal}</div> <div className="bit-progress-bg" style={{width: `${percent}%`, height: strokeWidth, backgroundColor: strokeColor}} ></div> </div> </div> </div> ) } export default DiyProgress;Copy the code

Create style.less file:

.bit-progress { display: flex; flex-direction: column; align-items: flex-end; width: 100%; .bit-progress-outer { display: inline-block; width: 100%; .bit-progress-inner { position: relative; display: inline-block; width: 100%; overflow: hidden; vertical-align: middle; background-color: transparent; border-radius: 0; .bit-progress-text { text-align: right; font-size: 14px; color: #313C42; } .bit-fixed-text { position: absolute; left: 0; top: -2px; z-index: 99; width: 100% ! important; text-align: left; height: 14px; font-size: 14px; color: #313C42; } .bit-progress-bg { background-color: #1890FF; } } .bit-fixed-inner { display: flex; align-items: flex-end; height: 30px; }}}Copy the code

As you can see from the code above, the thinking has been resolved that the width of the progress is too small for the values to show up completely. That is, the method of positioning is used. By judging that when the progress is less than 20%(percent < 20), the numerical style is changed to the way of absolute positioning to deal with the display effect of numerical values, and the effect that UI wants to achieve is finally solved.

Usage:

1) Import DiyProgress from ".. /.. /.. /component/DiyProgress/DiyProgress"; Const changeProgressBgColor = (flag: number) => {if (flag === 1) {return '#5B8FF9'; } if (flag === 2) { return '#5AD8A6'; } return '#313C42'; } /* The above function is used to change the background color of the progress bar. Use */ <DiyProgress Percent ={35} Decimal ={0.35} strokeColor={changeProgressBgColor(flag)} />Copy the code

In fact, the custom progress bar component can also set the height of the inner bit-progress-inner as a property for dynamic change Settings, and optimize the extensibility of the property can also add changes. Here is just an idea for reference, you may also have a better implementation method, so we need to share the progress together. This component will then also be uploaded to NPM as a plug-in.

Step progress bar

A step progress bar is a progress bar with steps. For example, the progress bar has 5 squares for 100%, and 26% for progress. How does it look in 5 squares? One little square is 20%, 26% is one point how many little squares? Since there is no display effect of a few dots, it is necessary to do rounding, 26% only lit up a small square to indicate 26% progress.

Had to deal with the above requirements, Antd provide progress bar can be the perfect solution, and can make you so simple and easy for our company, even if others give you write there we want to change another UI fringes, temper (shit), that is digital must be centered over the progress bar shows that digital display above is accurate value (decimal), The value of the progress bar is integer to display the progress value, and the small squares should have the rounded corner effect. This is not forced to give their own whole life, too lazy to force, the whole whole.

Wrong, you give me livable I can livable ah, I will not write new components for you, I change Antd to achieve the effect is not on the line, this problem is much better whole. Use a

66.6

tag to install the exact value, and then hide the VALUE display of Antd, change the style of small squares to rounded corners, so easy! 

Import {Progress} from 'Antd '; Const changeProgressBgColor = (flag: number) => {if (flag === 1) {return '#5B8FF9'; } if (flag === 2) { return '#5AD8A6'; } return '#313C42'; } /* This function is used to change the background color of the progress bar. */ <div className="bit-progress-steps"> <p className="bit-step-value">{yearSalary}</p> < progress percent={yearSalaryGrade} steps={10} trailColor={'#D8D8D8'} strokeColor={changeProgressBgColor(flag)} /> </div> 3) Set and change styles:. Bit-progress-steps {display: flex; flex-direction: column; justify-content: center; align-items: flex-end; margin-right: 1px; .bit-step-value { width: 100%; text-align: center; } .ant-progress-steps { .ant-progress-text { display: none ! important; } .ant-progress-steps-item { width: 10px ! important; height: 12px ! important; margin-right: 1px; border-radius: 2px; }}}Copy the code

Take a look at this in action:

Once again, the progress bar related effects are just like this in my actual project work. The three progress bar effects mentioned above are also perfectly realized. There is still a lot of room for optimization, but it is enough to meet the daily development. The third step progress bar effect was modified to Antd component effect because there was not enough time for component writing. Subsequently, the progress bar of writing step was combined with background progress bar and custom progress bar as a plug-in and published to NPM warehouse.

Past wonderful articles

  • Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
  • If ancient have programmers writing summaries, probably is such | 2021 year-end summary
  • Front-end development specifications in front end team practice
  • Javascript high-level constructors
  • Javascript high-level inheritance
  • Recursion and closure

After the language

Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.