@cdx-ui/utils 0.0.1-beta.79 → 0.0.1-beta.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/lib/commonjs/context/createContext.js +7 -3
- package/lib/commonjs/context/createContext.js.map +1 -1
- package/lib/commonjs/style/index.js +0 -11
- package/lib/commonjs/style/index.js.map +1 -1
- package/lib/module/context/createContext.js +7 -3
- package/lib/module/context/createContext.js.map +1 -1
- package/lib/module/style/index.js +0 -1
- package/lib/module/style/index.js.map +1 -1
- package/lib/typescript/context/createContext.d.ts +16 -1
- package/lib/typescript/context/createContext.d.ts.map +1 -1
- package/lib/typescript/style/index.d.ts +0 -1
- package/lib/typescript/style/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/context/createContext.tsx +21 -4
- package/src/style/index.tsx +0 -1
- package/lib/commonjs/style/withStyleContext/index.js +0 -33
- package/lib/commonjs/style/withStyleContext/index.js.map +0 -1
- package/lib/module/style/withStyleContext/index.js +0 -28
- package/lib/module/style/withStyleContext/index.js.map +0 -1
- package/lib/typescript/style/withStyleContext/index.d.ts +0 -6
- package/lib/typescript/style/withStyleContext/index.d.ts.map +0 -1
- package/src/style/withStyleContext/index.test.tsx +0 -55
- package/src/style/withStyleContext/index.tsx +0 -36
package/README.md
CHANGED
|
@@ -35,10 +35,9 @@ Used internally by `@cdx-ui/components` to propagate variant props (size, color,
|
|
|
35
35
|
|
|
36
36
|
| Export | Description |
|
|
37
37
|
| ------------------------------------- | ---------------------------------------------------------------------------------- |
|
|
38
|
-
| `
|
|
39
|
-
| `useStyleContext(scope?)` | Reads the style context set by the nearest `
|
|
38
|
+
| `ParentContext` | React context for propagating variant props from a compound root to sub-components. Wrap children in `<ParentContext.Provider value={...}>`. |
|
|
39
|
+
| `useStyleContext(scope?)` | Reads the style context set by the nearest `ParentContext.Provider`. |
|
|
40
40
|
| `useParentContext()` | Reads the full `StyleContextMap` from the nearest provider. |
|
|
41
|
-
| `ParentContext` | The React context object used internally by `withStyleContext`. |
|
|
42
41
|
|
|
43
42
|
### Form control
|
|
44
43
|
|
|
@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.createContext = createContext;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
function createContext(displayName) {
|
|
10
|
-
const
|
|
9
|
+
function createContext(displayName, options) {
|
|
10
|
+
const {
|
|
11
|
+
defaultValue,
|
|
12
|
+
strict = true
|
|
13
|
+
} = options ?? {};
|
|
14
|
+
const Context = /*#__PURE__*/(0, _react.createContext)(defaultValue);
|
|
11
15
|
const Provider = props => {
|
|
12
16
|
const {
|
|
13
17
|
children,
|
|
@@ -21,7 +25,7 @@ function createContext(displayName) {
|
|
|
21
25
|
Provider.displayName = `${displayName}Provider`;
|
|
22
26
|
function useC() {
|
|
23
27
|
const context = (0, _react.useContext)(Context);
|
|
24
|
-
if (context === undefined) {
|
|
28
|
+
if (context === undefined && strict) {
|
|
25
29
|
throw new Error(`use${displayName} must be used within a ${displayName}Provider`);
|
|
26
30
|
}
|
|
27
31
|
return context;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_jsxRuntime","createContext","displayName","
|
|
1
|
+
{"version":3,"names":["_react","require","_jsxRuntime","createContext","displayName","options","defaultValue","strict","Context","createReactContext","Provider","props","children","value","jsx","useC","context","useContext","undefined","Error"],"sourceRoot":"../../../src","sources":["context/createContext.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAKe,IAAAC,WAAA,GAAAD,OAAA;AAiBR,SAASE,aAAaA,CAAIC,WAAmB,EAAEC,OAAiC,EAAE;EACvF,MAAM;IAAEC,YAAY;IAAEC,MAAM,GAAG;EAAK,CAAC,GAAGF,OAAO,IAAI,CAAC,CAAC;EAErD,MAAMG,OAAO,gBAAG,IAAAC,oBAAkB,EAAgBH,YAAY,CAAC;EAE/D,MAAMI,QAA0D,GAAIC,KAAK,IAAK;IAC5E,MAAM;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAGF,KAAK;IACjC,oBAAO,IAAAT,WAAA,CAAAY,GAAA,EAACN,OAAO,CAACE,QAAQ;MAACG,KAAK,EAAEA,KAAM;MAAAD,QAAA,EAAEA;IAAQ,CAAmB,CAAC;EACtE,CAAC;EAEDF,QAAQ,CAACN,WAAW,GAAG,GAAGA,WAAW,UAAU;EAE/C,SAASW,IAAIA,CAAA,EAAM;IACjB,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACT,OAAO,CAAC;IACnC,IAAIQ,OAAO,KAAKE,SAAS,IAAIX,MAAM,EAAE;MACnC,MAAM,IAAIY,KAAK,CAAC,MAAMf,WAAW,0BAA0BA,WAAW,UAAU,CAAC;IACnF;IACA,OAAOY,OAAO;EAChB;EAEA,OAAO,CAACN,QAAQ,EAAEK,IAAI,CAAC;AACzB","ignoreList":[]}
|
|
@@ -14,15 +14,4 @@ Object.keys(_context).forEach(function (key) {
|
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
-
var _withStyleContext = require("./withStyleContext");
|
|
18
|
-
Object.keys(_withStyleContext).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (key in exports && exports[key] === _withStyleContext[key]) return;
|
|
21
|
-
Object.defineProperty(exports, key, {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () {
|
|
24
|
-
return _withStyleContext[key];
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_context","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"
|
|
1
|
+
{"version":3,"names":["_context","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../src","sources":["style/index.tsx"],"mappings":";;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,QAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,QAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,QAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -2,8 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import { createContext as createReactContext, useContext } from 'react';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
export function createContext(displayName) {
|
|
6
|
-
const
|
|
5
|
+
export function createContext(displayName, options) {
|
|
6
|
+
const {
|
|
7
|
+
defaultValue,
|
|
8
|
+
strict = true
|
|
9
|
+
} = options ?? {};
|
|
10
|
+
const Context = /*#__PURE__*/createReactContext(defaultValue);
|
|
7
11
|
const Provider = props => {
|
|
8
12
|
const {
|
|
9
13
|
children,
|
|
@@ -17,7 +21,7 @@ export function createContext(displayName) {
|
|
|
17
21
|
Provider.displayName = `${displayName}Provider`;
|
|
18
22
|
function useC() {
|
|
19
23
|
const context = useContext(Context);
|
|
20
|
-
if (context === undefined) {
|
|
24
|
+
if (context === undefined && strict) {
|
|
21
25
|
throw new Error(`use${displayName} must be used within a ${displayName}Provider`);
|
|
22
26
|
}
|
|
23
27
|
return context;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","createReactContext","useContext","jsx","_jsx","displayName","
|
|
1
|
+
{"version":3,"names":["createContext","createReactContext","useContext","jsx","_jsx","displayName","options","defaultValue","strict","Context","Provider","props","children","value","useC","context","undefined","Error"],"sourceRoot":"../../../src","sources":["context/createContext.tsx"],"mappings":";;AAAA,SAEEA,aAAa,IAAIC,kBAAkB,EAEnCC,UAAU,QACL,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiBf,OAAO,SAASJ,aAAaA,CAAIK,WAAmB,EAAEC,OAAiC,EAAE;EACvF,MAAM;IAAEC,YAAY;IAAEC,MAAM,GAAG;EAAK,CAAC,GAAGF,OAAO,IAAI,CAAC,CAAC;EAErD,MAAMG,OAAO,gBAAGR,kBAAkB,CAAgBM,YAAY,CAAC;EAE/D,MAAMG,QAA0D,GAAIC,KAAK,IAAK;IAC5E,MAAM;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAGF,KAAK;IACjC,oBAAOP,IAAA,CAACK,OAAO,CAACC,QAAQ;MAACG,KAAK,EAAEA,KAAM;MAAAD,QAAA,EAAEA;IAAQ,CAAmB,CAAC;EACtE,CAAC;EAEDF,QAAQ,CAACL,WAAW,GAAG,GAAGA,WAAW,UAAU;EAE/C,SAASS,IAAIA,CAAA,EAAM;IACjB,MAAMC,OAAO,GAAGb,UAAU,CAACO,OAAO,CAAC;IACnC,IAAIM,OAAO,KAAKC,SAAS,IAAIR,MAAM,EAAE;MACnC,MAAM,IAAIS,KAAK,CAAC,MAAMZ,WAAW,0BAA0BA,WAAW,UAAU,CAAC;IACnF;IACA,OAAOU,OAAO;EAChB;EAEA,OAAO,CAACL,QAAQ,EAAEI,IAAI,CAAC;AACzB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["style/index.tsx"],"mappings":";;AAAA,cAAc,WAAW
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["style/index.tsx"],"mappings":";;AAAA,cAAc,WAAW","ignoreList":[]}
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
|
|
2
|
+
interface CreateContextOptions<T> {
|
|
3
|
+
/**
|
|
4
|
+
* Value returned by the consumer hook when no matching provider is mounted.
|
|
5
|
+
* Only meaningful when `strict` is `false`; when omitted the hook returns `undefined`.
|
|
6
|
+
*/
|
|
7
|
+
defaultValue?: T;
|
|
8
|
+
/**
|
|
9
|
+
* When `true` (default) the consumer hook throws if used outside its provider.
|
|
10
|
+
* Set to `false` to allow the hook to run without a provider, returning
|
|
11
|
+
* `defaultValue` (or `undefined`) instead of throwing.
|
|
12
|
+
* @default true
|
|
13
|
+
*/
|
|
14
|
+
strict?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare function createContext<T>(displayName: string, options?: CreateContextOptions<T>): readonly [import("react").FunctionComponent<{
|
|
3
17
|
children: ReactNode;
|
|
4
18
|
value: T;
|
|
5
19
|
}>, () => T];
|
|
20
|
+
export {};
|
|
6
21
|
//# sourceMappingURL=createContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../../src/context/createContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM;
|
|
1
|
+
{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../../src/context/createContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,UAAU,oBAAoB,CAAC,CAAC;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;cAK3C,SAAS;WAAS,CAAC;UAO5C,CAAC,EASnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/style/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/style/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -5,8 +5,25 @@ import {
|
|
|
5
5
|
useContext,
|
|
6
6
|
} from 'react';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
interface CreateContextOptions<T> {
|
|
9
|
+
/**
|
|
10
|
+
* Value returned by the consumer hook when no matching provider is mounted.
|
|
11
|
+
* Only meaningful when `strict` is `false`; when omitted the hook returns `undefined`.
|
|
12
|
+
*/
|
|
13
|
+
defaultValue?: T;
|
|
14
|
+
/**
|
|
15
|
+
* When `true` (default) the consumer hook throws if used outside its provider.
|
|
16
|
+
* Set to `false` to allow the hook to run without a provider, returning
|
|
17
|
+
* `defaultValue` (or `undefined`) instead of throwing.
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
strict?: boolean;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export function createContext<T>(displayName: string, options?: CreateContextOptions<T>) {
|
|
24
|
+
const { defaultValue, strict = true } = options ?? {};
|
|
25
|
+
|
|
26
|
+
const Context = createReactContext<T | undefined>(defaultValue);
|
|
10
27
|
|
|
11
28
|
const Provider: ComponentType<{ children: ReactNode; value: T }> = (props) => {
|
|
12
29
|
const { children, value } = props;
|
|
@@ -17,10 +34,10 @@ export function createContext<T>(displayName: string) {
|
|
|
17
34
|
|
|
18
35
|
function useC(): T {
|
|
19
36
|
const context = useContext(Context);
|
|
20
|
-
if (context === undefined) {
|
|
37
|
+
if (context === undefined && strict) {
|
|
21
38
|
throw new Error(`use${displayName} must be used within a ${displayName}Provider`);
|
|
22
39
|
}
|
|
23
|
-
return context;
|
|
40
|
+
return context as T;
|
|
24
41
|
}
|
|
25
42
|
|
|
26
43
|
return [Provider, useC] as const;
|
package/src/style/index.tsx
CHANGED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.withStyleContext = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _context = require("../context");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
const withStyleContext = (Component, scope = 'Global') => {
|
|
11
|
-
const Wrapped = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
12
|
-
context,
|
|
13
|
-
...props
|
|
14
|
-
}, ref) => {
|
|
15
|
-
const parentContextValues = (0, _context.useParentContext)();
|
|
16
|
-
const contextValues = (0, _react.useMemo)(() => {
|
|
17
|
-
return {
|
|
18
|
-
...parentContextValues,
|
|
19
|
-
[scope]: context
|
|
20
|
-
};
|
|
21
|
-
}, [parentContextValues, context]);
|
|
22
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ParentContext.Provider, {
|
|
23
|
-
value: contextValues,
|
|
24
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
|
|
25
|
-
...props,
|
|
26
|
-
ref: ref
|
|
27
|
-
})
|
|
28
|
-
});
|
|
29
|
-
});
|
|
30
|
-
return Wrapped;
|
|
31
|
-
};
|
|
32
|
-
exports.withStyleContext = withStyleContext;
|
|
33
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_context","_jsxRuntime","withStyleContext","Component","scope","Wrapped","forwardRef","context","props","ref","parentContextValues","useParentContext","contextValues","useMemo","jsx","ParentContext","Provider","value","children","exports"],"sourceRoot":"../../../../src","sources":["style/withStyleContext/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AASA,IAAAC,QAAA,GAAAD,OAAA;AAAmF,IAAAE,WAAA,GAAAF,OAAA;AAM5E,MAAMG,gBAAgB,GAAGA,CAAwBC,SAAY,EAAEC,KAAK,GAAG,QAAQ,KAAK;EAIzF,MAAMC,OAAO,gBAAG,IAAAC,iBAAU,EAAa,CAAC;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,KAAK;IACrE,MAAMC,mBAAmB,GAAG,IAAAC,yBAAgB,EAAC,CAAC;IAE9C,MAAMC,aAA8B,GAAG,IAAAC,cAAO,EAAC,MAAM;MACnD,OAAO;QAAE,GAAGH,mBAAmB;QAAE,CAACN,KAAK,GAAGG;MAAQ,CAAC;IACrD,CAAC,EAAE,CAACG,mBAAmB,EAAEH,OAAO,CAAC,CAAC;IAElC,oBACE,IAAAN,WAAA,CAAAa,GAAA,EAACd,QAAA,CAAAe,aAAa,CAACC,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAM,QAAA,eAE3C,IAAAjB,WAAA,CAAAa,GAAA,EAACX,SAAS;QAAA,GAAKK,KAAK;QAAEC,GAAG,EAAEA;MAAI,CAAE;IAAC,CACZ,CAAC;EAE7B,CAAC,CAAC;EAEF,OAAOJ,OAAO;AAChB,CAAC;AAACc,OAAA,CAAAjB,gBAAA,GAAAA,gBAAA","ignoreList":[]}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useMemo } from 'react';
|
|
4
|
-
import { ParentContext, useParentContext } from '../context';
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
export const withStyleContext = (Component, scope = 'Global') => {
|
|
7
|
-
const Wrapped = /*#__PURE__*/forwardRef(({
|
|
8
|
-
context,
|
|
9
|
-
...props
|
|
10
|
-
}, ref) => {
|
|
11
|
-
const parentContextValues = useParentContext();
|
|
12
|
-
const contextValues = useMemo(() => {
|
|
13
|
-
return {
|
|
14
|
-
...parentContextValues,
|
|
15
|
-
[scope]: context
|
|
16
|
-
};
|
|
17
|
-
}, [parentContextValues, context]);
|
|
18
|
-
return /*#__PURE__*/_jsx(ParentContext.Provider, {
|
|
19
|
-
value: contextValues,
|
|
20
|
-
children: /*#__PURE__*/_jsx(Component, {
|
|
21
|
-
...props,
|
|
22
|
-
ref: ref
|
|
23
|
-
})
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
return Wrapped;
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useMemo","ParentContext","useParentContext","jsx","_jsx","withStyleContext","Component","scope","Wrapped","context","props","ref","parentContextValues","contextValues","Provider","value","children"],"sourceRoot":"../../../../src","sources":["style/withStyleContext/index.tsx"],"mappings":";;AAAA,SAMEA,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SAASC,aAAa,EAAwBC,gBAAgB,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMnF,OAAO,MAAMC,gBAAgB,GAAGA,CAAwBC,SAAY,EAAEC,KAAK,GAAG,QAAQ,KAAK;EAIzF,MAAMC,OAAO,gBAAGT,UAAU,CAAa,CAAC;IAAEU,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,KAAK;IACrE,MAAMC,mBAAmB,GAAGV,gBAAgB,CAAC,CAAC;IAE9C,MAAMW,aAA8B,GAAGb,OAAO,CAAC,MAAM;MACnD,OAAO;QAAE,GAAGY,mBAAmB;QAAE,CAACL,KAAK,GAAGE;MAAQ,CAAC;IACrD,CAAC,EAAE,CAACG,mBAAmB,EAAEH,OAAO,CAAC,CAAC;IAElC,oBACEL,IAAA,CAACH,aAAa,CAACa,QAAQ;MAACC,KAAK,EAAEF,aAAc;MAAAG,QAAA,eAE3CZ,IAAA,CAACE,SAAS;QAAA,GAAKI,KAAK;QAAEC,GAAG,EAAEA;MAAI,CAAE;IAAC,CACZ,CAAC;EAE7B,CAAC,CAAC;EAEF,OAAOH,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithoutRef, type ComponentRef, type ElementType, type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
|
2
|
-
export interface WithStyleContextProps {
|
|
3
|
-
context?: Record<string, unknown>;
|
|
4
|
-
}
|
|
5
|
-
export declare const withStyleContext: <T extends ElementType>(Component: T, scope?: string) => ForwardRefExoticComponent<(ComponentPropsWithoutRef<T> & WithStyleContextProps) & RefAttributes<ComponentRef<T>>>;
|
|
6
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/style/withStyleContext/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAGnB,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,WAAW,EAAE,WAAW,CAAC,EAAE,cAAgB,KAmBlE,yBAAyB,CAAC,wDAAQ,aAAa,iBAAK,CACvE,CAAC"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Text, View } from 'react-native';
|
|
2
|
-
import { render, screen } from '@testing-library/react-native';
|
|
3
|
-
import { useStyleContext } from '../context';
|
|
4
|
-
import { withStyleContext } from './index';
|
|
5
|
-
|
|
6
|
-
const StyledView = withStyleContext(View, 'Button');
|
|
7
|
-
|
|
8
|
-
function StyleConsumer() {
|
|
9
|
-
const context = useStyleContext('Button');
|
|
10
|
-
return <Text testID="style-context">{JSON.stringify(context)}</Text>;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
describe('withStyleContext', () => {
|
|
14
|
-
it('provides scoped context to descendants', () => {
|
|
15
|
-
render(
|
|
16
|
-
<StyledView context={{ size: 'lg' }} testID="wrapped">
|
|
17
|
-
<StyleConsumer />
|
|
18
|
-
</StyledView>,
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
expect(screen.getByTestId('style-context')).toHaveTextContent('{"size":"lg"}');
|
|
22
|
-
expect(screen.getByTestId('wrapped')).toBeTruthy();
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
it('inherits parent context for other scopes', () => {
|
|
26
|
-
const Outer = withStyleContext(View, 'Card');
|
|
27
|
-
|
|
28
|
-
render(
|
|
29
|
-
<Outer context={{ padded: true }} testID="outer">
|
|
30
|
-
<StyledView context={{ size: 'sm' }} testID="inner">
|
|
31
|
-
<StyleConsumer />
|
|
32
|
-
</StyledView>
|
|
33
|
-
</Outer>,
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
expect(screen.getByTestId('style-context')).toHaveTextContent('{"size":"sm"}');
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
it('defaults to the Global scope when none is provided', () => {
|
|
40
|
-
const GlobalView = withStyleContext(View);
|
|
41
|
-
|
|
42
|
-
function GlobalConsumer() {
|
|
43
|
-
const context = useStyleContext('Global');
|
|
44
|
-
return <Text testID="global-context">{JSON.stringify(context)}</Text>;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
render(
|
|
48
|
-
<GlobalView context={{ theme: 'dark' }} testID="global-wrapped">
|
|
49
|
-
<GlobalConsumer />
|
|
50
|
-
</GlobalView>,
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
expect(screen.getByTestId('global-context')).toHaveTextContent('{"theme":"dark"}');
|
|
54
|
-
});
|
|
55
|
-
});
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type ComponentPropsWithoutRef,
|
|
3
|
-
type ComponentRef,
|
|
4
|
-
type ElementType,
|
|
5
|
-
type ForwardRefExoticComponent,
|
|
6
|
-
type RefAttributes,
|
|
7
|
-
forwardRef,
|
|
8
|
-
useMemo,
|
|
9
|
-
} from 'react';
|
|
10
|
-
import { ParentContext, type StyleContextMap, useParentContext } from '../context';
|
|
11
|
-
|
|
12
|
-
export interface WithStyleContextProps {
|
|
13
|
-
context?: Record<string, unknown>;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const withStyleContext = <T extends ElementType>(Component: T, scope = 'Global') => {
|
|
17
|
-
type Ref = ComponentRef<T>;
|
|
18
|
-
type Props = ComponentPropsWithoutRef<T> & WithStyleContextProps;
|
|
19
|
-
|
|
20
|
-
const Wrapped = forwardRef<Ref, Props>(({ context, ...props }, ref) => {
|
|
21
|
-
const parentContextValues = useParentContext();
|
|
22
|
-
|
|
23
|
-
const contextValues: StyleContextMap = useMemo(() => {
|
|
24
|
-
return { ...parentContextValues, [scope]: context };
|
|
25
|
-
}, [parentContextValues, context]);
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<ParentContext.Provider value={contextValues}>
|
|
29
|
-
{/* @ts-expect-error -- generic component spread is not fully inferrable */}
|
|
30
|
-
<Component {...props} ref={ref} />
|
|
31
|
-
</ParentContext.Provider>
|
|
32
|
-
);
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
return Wrapped as ForwardRefExoticComponent<Props & RefAttributes<Ref>>;
|
|
36
|
-
};
|