generated from react-component/footer
-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #151 from ant-design/next
chore: master merge next
- Loading branch information
Showing
23 changed files
with
1,307 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| title: CSS Variables | ||
| nav: | ||
| title: Demo | ||
| path: /demo | ||
| --- | ||
|
|
||
| <code src="../examples/css-var.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
| import './basic.less'; | ||
| import Button from './components/Button'; | ||
| import { DesignTokenContext } from './components/theme'; | ||
|
|
||
| export default function App() { | ||
| const [show, setShow] = React.useState(true); | ||
|
|
||
| const [, forceUpdate] = React.useState({}); | ||
| React.useEffect(() => { | ||
| forceUpdate({}); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div style={{ background: 'rgba(0,0,0,0.1)', padding: 16 }}> | ||
| <h3>默认情况下不会自动删除添加的样式</h3> | ||
|
|
||
| <label> | ||
| <input type="checkbox" checked={show} onChange={() => setShow(!show)} /> | ||
| Show Components | ||
| </label> | ||
|
|
||
| {show && ( | ||
| <div> | ||
| <DesignTokenContext.Provider | ||
| value={{ cssVar: { key: 'default' }, hashed: true }} | ||
| > | ||
| <Button>Default</Button> | ||
| <Button type="primary">Primary</Button> | ||
| <Button type="ghost">Ghost</Button> | ||
|
|
||
| <Button className="btn-override">Override By ClassName</Button> | ||
| </DesignTokenContext.Provider> | ||
| <br /> | ||
| <DesignTokenContext.Provider | ||
| value={{ | ||
| token: { primaryColor: 'green' }, | ||
| cssVar: { key: 'default2' }, | ||
| hashed: true, | ||
| }} | ||
| > | ||
| <Button>Default</Button> | ||
| <Button type="primary">Primary</Button> | ||
| <Button type="ghost">Ghost</Button> | ||
|
|
||
| <Button className="btn-override">Override By ClassName</Button> | ||
| </DesignTokenContext.Provider> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import type Cache from './Cache'; | ||
| import { | ||
| extract as tokenExtractStyle, | ||
| TOKEN_PREFIX, | ||
| } from './hooks/useCacheToken'; | ||
| import { | ||
| CSS_VAR_PREFIX, | ||
| extract as cssVarExtractStyle, | ||
| } from './hooks/useCSSVarRegister'; | ||
| import { | ||
| extract as styleExtractStyle, | ||
| STYLE_PREFIX, | ||
| } from './hooks/useStyleRegister'; | ||
| import { toStyleStr } from './util'; | ||
| import { | ||
| ATTR_CACHE_MAP, | ||
| serialize as serializeCacheMap, | ||
| } from './util/cacheMapUtil'; | ||
|
|
||
| const ExtractStyleFns = { | ||
| [STYLE_PREFIX]: styleExtractStyle, | ||
| [TOKEN_PREFIX]: tokenExtractStyle, | ||
| [CSS_VAR_PREFIX]: cssVarExtractStyle, | ||
| }; | ||
|
|
||
| function isNotNull<T>(value: T | null): value is T { | ||
| return value !== null; | ||
| } | ||
|
|
||
| export default function extractStyle(cache: Cache, plain = false) { | ||
| const matchPrefixRegexp = new RegExp( | ||
| `^(${Object.keys(ExtractStyleFns).join('|')})%`, | ||
| ); | ||
|
|
||
| // prefix with `style` is used for `useStyleRegister` to cache style context | ||
| const styleKeys = Array.from(cache.cache.keys()).filter((key) => | ||
| matchPrefixRegexp.test(key), | ||
| ); | ||
|
|
||
| // Common effect styles like animation | ||
| const effectStyles: Record<string, boolean> = {}; | ||
|
|
||
| // Mapping of cachePath to style hash | ||
| const cachePathMap: Record<string, string> = {}; | ||
|
|
||
| let styleText = ''; | ||
|
|
||
| styleKeys | ||
| .map<[number, string] | null>((key) => { | ||
| const cachePath = key.replace(matchPrefixRegexp, '').replace(/%/g, '|'); | ||
| const [prefix] = key.split('%'); | ||
| const extractFn = ExtractStyleFns[prefix as keyof typeof ExtractStyleFns]; | ||
| const extractedStyle = extractFn(cache.cache.get(key)![1], effectStyles, { | ||
| plain, | ||
| }); | ||
| if (!extractedStyle) { | ||
| return null; | ||
| } | ||
| const [order, styleId, styleStr] = extractedStyle; | ||
| if (key.startsWith('style')) { | ||
| cachePathMap[cachePath] = styleId; | ||
| } | ||
| return [order, styleStr]; | ||
| }) | ||
| .filter(isNotNull) | ||
| .sort(([o1], [o2]) => o1 - o2) | ||
| .forEach(([, style]) => { | ||
| styleText += style; | ||
| }); | ||
|
|
||
| // ==================== Fill Cache Path ==================== | ||
| styleText += toStyleStr( | ||
| `.${ATTR_CACHE_MAP}{content:"${serializeCacheMap(cachePathMap)}";}`, | ||
| undefined, | ||
| undefined, | ||
| { | ||
| [ATTR_CACHE_MAP]: ATTR_CACHE_MAP, | ||
| }, | ||
| plain, | ||
| ); | ||
|
|
||
| return styleText; | ||
| } |
Oops, something went wrong.