UI component library
If the UI development framework is a high-speed production line, then the UI component library is a complete set of molds, greatly improving production efficiency.
UI component library has made a high degree of unity in design style, basic functions, operation and interaction, providing convenience for project development out of the box. In the React space, Ant Design (ANTD) is the most popular UI component library for backend projects.
Here’s a series of source sharing of the ANTD component library to see the logic behind some of the features we’ve taken for granted.
Reading process, will follow the front to share the “reading front source ideas”, the article ignores specific details, directly share the focus.
(2) The forced case of the component
A UI component library with no design philosophy, even embarrassed to call it a UI component library
If you look at the official documentation, you can see that the first column is “Design.” You can imagine that the soul of the UI component library is design, which contains its own values and patterns and follows a set of specifications.
Expand the “Components” TAB again, and you can see that the left menu categorizes components, including:
- Common component
- Layout of the components
- Navigation components
- Data entry unit
- Data presentation component
- Feedback component
- Other components
In this article, I will share the source code of the first common component I read.
3.One at a time
Focus on what you want to focus on
There are three common components: Button, Icon and Typography.
Let’s take a look at the documentation for each of these components and see what features are worth thinking about.
As you can see, some types, states, etc. are presented based on props. There is no need to go too far.
One of the things that feels interesting about Button is the feedback of the click action, and the movement of the surrounding waves.
For the Icon, notice how it encapsulates the Icon reference internally.
In terms of Typography, you can focus on the encapsulation of text processing or functions.
④ No sooner said than done
To be honest, the antD component source code is messy
Open the components folder and you’ll find the Button component with only 300 lines of code. You can take a look at it in its entirety, starting with the previous reference
Omit is to omit a key pair from an object.
A button-group is used to mount a button-group on a Button.
Configcontext is a global configuration context that is created using react. createContext and then obtained by the Consumer. It provides functions such as class name prefixes.
Tuple and devWarning both know what to do with names;
Wave is what I want to see, I’ll see it later.
Then if you look down, you can see this:
If it’s two Chinese characters, insert space in the middle, and then you can see the process of content hijacking.
After a bunch of type definitions, you can see that it introduces the global class name prefix, which is not surprising:
Moving on, you can see that if the type is a text button with no border, it is not covered by Wave, so the focus is still on Wave:
⑤ Look at the implementation of Wave
It’s just transition and animation
It’s easy to find the code for Wave, to know that componentDidMount executes the bindAnimationEvent function, and to see that it adds the click listener injection method primarily to node nodes. This code is not unexpected:
Here’s a closer look at the binding onClick method. It’s basically the updateCSS method on lines 102 through 111, which dynamically adds some styles, and then dynamically adds transition and animation on lines 116 through 119:
To take a closer look at the updateCSS method, find another library: react-component/util, which is available on Github: github.com/react-compo… If we need to dynamically inject CSS files, we can refer to it.
Here you can see the contents of the container, the injection, the cache, etc., basically create a label to write CSS styles, and here I pay attention to the node nonce attribute, can refer to the MDN:
This is the CSP category, and you can also see that it says that later implementations will change script tags to expose this property.
Okay, that’s it for the Button component.
6.Take a look at the implementation of Icon
Icon moved to @ant-design/ ICONS
Antd’s icon is implemented by moving out a @ant-Design/ICONS library, which can be found in the Github repository: github-ant-Design /ant-design-icons: ⭐ Ant Design SVG ICONS. Take a look at antdicon.tsx and other files under Ant-design-icons /packages/ ICONS -react/ SRC /components.
The discovery is a variety of styles, events, and icon references, nothing to look at.
Not surprisingly, the ICONS of different SVG are component-based parameters:
All landownersAnd finally Typography
Typesetting component is a unified display of some content, at present, it is still relatively weak
Find the folder here and you can see that it provides several types: Text, Link, Title, and Paragraph
Matches a series of text style content not to look at in detail, here mainly looks at two content: a text copy, a text omit processing.
TSX uses a library called copy-to-clipboard to copy text.
Enter this library again: github.com/sudodoki/co… , the code is not very many lines, mainly using document.createRange and document.getSelection methods, which are similar to our own, no longer expand.
Focusing on the text overflow handling section, you can see that several status values are defined:
Then it knows that it needs to calculate the conditions for the overflow part:
Look at this again, we can know that only when dealing with multi-line text overflow compatible with webkitLineClamp or single-line text overflow can use the defined CSS, which is also consistent with our cognition, dealing with multi-line text overflow needs to consider the compatibility problem, that is, need to use JS implementation.
Skip some of the code here and go straight to the use of the corresponding Ellipsis component:
EnableMeasure is used to start internal overflow algorithm, width is used to know the width of the container, and rows is used to set the number of rows that cannot exceed the number of rows.
The Ellipsis component is used to control the rendering flow with several state values:
If it is a text class, it adds length to the text. If it is a text class, it adds length to the text. If it is a text class, it adds length to the text.
After holding the totalLen, calculate the position of the cut, start, middle and end, and set the state to PREPARE:
You can then see that it continues to calculate the height of a single line of text:
When you wonder how it calculates the height of a single line, it makes use of a very clever method, which is to set whiteSpace to display an “LG” text for a single line and render once to get the rendered height of a single line.
At the same time, it will render the text data based on the midLen data, and then fetch the midRowRef to fetch the virtual height.
Of course, the previously rendered text is not visible from the Settings.
And then you can see how it handles finding the cut position, and this is the crucial part, and you can see that the dependency of the following hook is startLen and endLen, and you can see that if the walkingState inside is WALKING, the function will behave like a dichotomy recursion, Finally, as long as the height is no higher than the number of rows, keep moving startLen and endLen closer to the end of the row.
As for how to cut it, you can finally take a look at this:
Well, the general components of ANTD source code are as follows.