@stack-spot/citric-react 0.39.1 → 0.40.1

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.
Files changed (18) hide show
  1. package/dist/components/AsyncContent.d.ts +6 -1
  2. package/dist/components/AsyncContent.d.ts.map +1 -1
  3. package/dist/components/AsyncContent.js +2 -2
  4. package/dist/components/AsyncContent.js.map +1 -1
  5. package/dist/components/Card.d.ts +1 -1
  6. package/dist/components/Card.d.ts.map +1 -1
  7. package/dist/components/LoadingPanel.d.ts +2 -1
  8. package/dist/components/LoadingPanel.d.ts.map +1 -1
  9. package/dist/components/LoadingPanel.js +5 -3
  10. package/dist/components/LoadingPanel.js.map +1 -1
  11. package/dist/types.d.ts +19 -1
  12. package/dist/types.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/src/components/AsyncContent.tsx +7 -2
  15. package/src/components/Card.tsx +1 -1
  16. package/src/components/LoadingPanel.tsx +9 -5
  17. package/src/components/SmartTable.tsx +4 -2
  18. package/src/types.ts +20 -1
package/dist/components/AsyncContent.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { MutableRefObject } from 'react';
2
+ import { LoadingStyle } from '../types.js';
2
3
  interface Props {
3
4
  /**
4
5
  * Whether or not to show the loading feedback.
@@ -17,6 +18,10 @@ interface Props {
17
18
  * The content to show if it's not loading or has errors.
18
19
  */
19
20
  children: React.ReactNode;
21
+ /**
22
+ * Customizes the loading component.
23
+ */
24
+ loadingStyle?: LoadingStyle;
20
25
  }
21
26
  /**
22
27
  * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
@@ -40,6 +45,6 @@ interface Props {
40
45
  * )
41
46
  * ```
42
47
  */
43
- export declare const AsyncContent: ({ loading, error, autofocus, children }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
48
+ export declare const AsyncContent: ({ loading, error, autofocus, children, loadingStyle }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
44
49
  export {};
45
50
  //# sourceMappingURL=AsyncContent.d.ts.map
package/dist/components/AsyncContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,YAAY,4CAAqD,KAAK,iIAoBjF,CAAA"}
1
+ {"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAKvC,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,YAAY,0DAAmE,KAAK,iIAoB/F,CAAA"}
package/dist/components/AsyncContent.js CHANGED
@@ -26,7 +26,7 @@ import { LoadingPanel } from './LoadingPanel.js';
26
26
  * )
27
27
  * ```
28
28
  */
29
- export const AsyncContent = withRef(({ loading, error, autofocus, children }) => {
29
+ export const AsyncContent = withRef(({ loading, error, autofocus, children, loadingStyle }) => {
30
30
  const citric = useCitricController();
31
31
  useEffect(() => {
32
32
  if (error) {
@@ -41,7 +41,7 @@ export const AsyncContent = withRef(({ loading, error, autofocus, children }) =>
41
41
  }
42
42
  }, [loading, error]);
43
43
  if (loading)
44
- return _jsx(LoadingPanel, {});
44
+ return citric?.renderLoading ? citric.renderLoading(loadingStyle) : _jsx(LoadingPanel, { ...loadingStyle });
45
45
  if (error)
46
46
  return citric?.renderError ? citric.renderError(error) : _jsx(ErrorMessage, { error: error });
47
47
  return children;
package/dist/components/AsyncContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AA0B7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IACnG,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,YAAY,GAAI,CAAA;IACnH,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}
package/dist/components/Card.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { WithColorScheme, WithStyleShortcuts } from '../types.js';
2
- type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button' | 'header';
2
+ type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'li' | 'section' | 'article' | 'a' | 'button' | 'header';
3
3
  export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends WithColorScheme, Omit<WithStyleShortcuts, 'bg'> {
4
4
  /**
5
5
  * HTML tag to render.
package/dist/components/Card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9G,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,6EAAqF,SAAS,CAAC,CAAC,CAAC,4CAcvI,CAAA"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAErH,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,6EAAqF,SAAS,CAAC,CAAC,CAAC,4CAcvI,CAAA"}
package/dist/components/LoadingPanel.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export declare const LoadingPanel: () => import("react/jsx-runtime").JSX.Element;
1
+ import { LoadingStyle } from '../types.js';
2
+ export declare const LoadingPanel: ({ type, text, colorScheme }: LoadingStyle) => import("react/jsx-runtime").JSX.Element;
2
3
  //# sourceMappingURL=LoadingPanel.d.ts.map
package/dist/components/LoadingPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingPanel.d.ts","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CAIxB,CAAA"}
1
+ {"version":3,"file":"LoadingPanel.d.ts","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAMvC,eAAO,MAAM,YAAY,GAAI,6BAAwC,YAAY,4CAKhF,CAAA"}
package/dist/components/LoadingPanel.js CHANGED
@@ -1,5 +1,7 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Center } from './layout.js';
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Column } from './layout.js';
3
+ import { ProgressBar } from './ProgressBar.js';
3
4
  import { ProgressCircular } from './ProgressCircular.js';
4
- export const LoadingPanel = () => (_jsx(Center, { flex: 1, p: "80px", style: { alignSelf: 'stretch' }, "data-test-hint": "loading", children: _jsx(ProgressCircular, {}) }));
5
+ import { Text } from './Text.js';
6
+ export const LoadingPanel = ({ type = 'circle', text, colorScheme }) => (_jsxs(Column, { flex: 1, p: "80px", alignItems: "center", justifyContent: "center", style: { alignSelf: 'stretch' }, "data-test-hint": "loading", gap: 8, children: [typeof text === 'string' ? _jsx(Text, { color: "light.700", children: text }) : text, type === 'circle' ? _jsx(ProgressCircular, { colorScheme: colorScheme }) : _jsx(ProgressBar, { colorScheme: colorScheme })] }));
5
7
  //# sourceMappingURL=LoadingPanel.js.map
package/dist/components/LoadingPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAChC,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAiB,SAAS,YACjF,KAAC,gBAAgB,KAAG,GACb,CACV,CAAA"}
1
+ {"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAgB,EAAE,EAAE,CAAC,CACpF,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAiB,SAAS,EAAC,GAAG,EAAE,CAAC,aACnI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,EACvE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,IACxG,CACV,CAAA"}
package/dist/types.d.ts CHANGED
@@ -161,6 +161,24 @@ export interface WithStyleShortcuts {
161
161
  */
162
162
  gap?: React.CSSProperties['gap'];
163
163
  }
164
+ export interface LoadingStyle {
165
+ /**
166
+ * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
167
+ *
168
+ * @default 'circle'
169
+ */
170
+ type?: 'circle' | 'bar';
171
+ /**
172
+ * A text to show above the ProgressCircular or ProgressBar.
173
+ */
174
+ text?: React.ReactNode;
175
+ /**
176
+ * The color scheme of the loading view.
177
+ *
178
+ * @default 'primary'
179
+ */
180
+ colorScheme?: ColorSchemeName;
181
+ }
164
182
  export interface CitricController {
165
183
  /**
166
184
  * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
@@ -198,7 +216,7 @@ export interface CitricController {
198
216
  * Loadings are rendered in Suspended calls or in AsyncContent.
199
217
  * @returns the UI for the feedback.
200
218
  */
201
- renderLoading?: () => void;
219
+ renderLoading?: (options?: LoadingStyle) => React.ReactElement;
202
220
  /**
203
221
  * Function to run whenever an Error is caught.
204
222
  * @param error the error caught.
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.39.1",
3
+ "version": "0.40.1",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/AsyncContent.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
2
2
  import { useCitricController } from '../context/hooks'
3
+ import { LoadingStyle } from '../types'
3
4
  import { withRef } from '../utils/react'
4
5
  import { ErrorMessage } from './ErrorMessage'
5
6
  import { LoadingPanel } from './LoadingPanel'
@@ -22,6 +23,10 @@ interface Props {
22
23
  * The content to show if it's not loading or has errors.
23
24
  */
24
25
  children: React.ReactNode,
26
+ /**
27
+ * Customizes the loading component.
28
+ */
29
+ loadingStyle?: LoadingStyle,
25
30
  }
26
31
 
27
32
  /**
@@ -47,7 +52,7 @@ interface Props {
47
52
  * ```
48
53
  */
49
54
 
50
- export const AsyncContent = withRef(({ loading, error, autofocus, children }: Props) => {
55
+ export const AsyncContent = withRef(({ loading, error, autofocus, children, loadingStyle }: Props) => {
51
56
  const citric = useCitricController()
52
57
 
53
58
  useEffect(() => {
@@ -64,7 +69,7 @@ export const AsyncContent = withRef(({ loading, error, autofocus, children }: Pr
64
69
  }
65
70
  }, [loading, error])
66
71
 
67
- if (loading) return <LoadingPanel />
72
+ if (loading) return citric?.renderLoading ? citric.renderLoading(loadingStyle) : <LoadingPanel {...loadingStyle} />
68
73
  if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
69
74
  return children
70
75
  })
package/src/components/Card.tsx CHANGED
@@ -5,7 +5,7 @@ import { applyStyles } from '../utils/css'
5
5
  import { withRef } from '../utils/react'
6
6
  import { asCitricProps, CitricComponent } from './CitricComponent'
7
7
 
8
- type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button' | 'header'
8
+ type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'li' | 'section' | 'article' | 'a' | 'button' | 'header'
9
9
 
10
10
  export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends WithColorScheme, Omit<WithStyleShortcuts, 'bg'> {
11
11
  /**
package/src/components/LoadingPanel.tsx CHANGED
@@ -1,8 +1,12 @@
1
- import { Center } from './layout'
1
+ import { LoadingStyle } from '../types'
2
+ import { Column } from './layout'
3
+ import { ProgressBar } from './ProgressBar'
2
4
  import { ProgressCircular } from './ProgressCircular'
5
+ import { Text } from './Text'
3
6
 
4
- export const LoadingPanel = () => (
5
- <Center flex={1} p="80px" style={{ alignSelf: 'stretch' }} data-test-hint="loading">
6
- <ProgressCircular />
7
- </Center>
7
+ export const LoadingPanel = ({ type = 'circle', text, colorScheme }: LoadingStyle) => (
8
+ <Column flex={1} p="80px" alignItems="center" justifyContent="center" style={{ alignSelf: 'stretch' }} data-test-hint="loading" gap={8}>
9
+ {typeof text === 'string' ? <Text color="light.700">{text}</Text> : text}
10
+ {type === 'circle' ? <ProgressCircular colorScheme={colorScheme} /> : <ProgressBar colorScheme={colorScheme} />}
11
+ </Column>
8
12
  )
package/src/components/SmartTable.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { useMemo } from 'react'
1
+ import { createElement, useMemo } from 'react'
2
2
  import { withRef } from '../utils/react'
3
3
  import { BaseTableProps, SortingDirection, Table, TableProps, Th, Tr } from './Table'
4
4
 
@@ -65,6 +65,8 @@ interface ExtraSmartTableProps<T extends Record<string, any>> {
65
65
  *
66
66
  * The extra row is, effectively, an accordion. The content of this accordion is defined by whatever this function returns.
67
67
  *
68
+ * Attention: this function is treated as a React Component, i.e. you can use React hooks inside of it.
69
+ *
68
70
  * @param item the current item.
69
71
  * @returns the React Node to render.
70
72
  */
@@ -179,7 +181,7 @@ export const SmartTable = withRef(
179
181
  const rows = useMemo(
180
182
  () => data.map((item, index) => {
181
183
  const key = keygen ? keygen(item) : index
182
- const accordionContent = renderAccordion?.(item)
184
+ const accordionContent = renderAccordion ? createElement(renderAccordion, item) : undefined
183
185
  const row = (
184
186
  <Tr
185
187
  key={key}
package/src/types.ts CHANGED
@@ -170,6 +170,25 @@ export interface WithStyleShortcuts {
170
170
  gap?: React.CSSProperties['gap'],
171
171
  }
172
172
 
173
+ export interface LoadingStyle {
174
+ /**
175
+ * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
176
+ *
177
+ * @default 'circle'
178
+ */
179
+ type?: 'circle' | 'bar',
180
+ /**
181
+ * A text to show above the ProgressCircular or ProgressBar.
182
+ */
183
+ text?: React.ReactNode,
184
+ /**
185
+ * The color scheme of the loading view.
186
+ *
187
+ * @default 'primary'
188
+ */
189
+ colorScheme?: ColorSchemeName,
190
+ }
191
+
173
192
  export interface CitricController {
174
193
  /**
175
194
  * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
@@ -207,7 +226,7 @@ export interface CitricController {
207
226
  * Loadings are rendered in Suspended calls or in AsyncContent.
208
227
  * @returns the UI for the feedback.
209
228
  */
210
- renderLoading?: () => void,
229
+ renderLoading?: (options?: LoadingStyle) => React.ReactElement,
211
230
  /**
212
231
  * Function to run whenever an Error is caught.
213
232
  * @param error the error caught.