@vendorflow/components 2.0.61 → 2.0.65

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 (7) hide show
  1. package/lib/components/material-ui/AudioPlayer/AudioPlayer.js +25 -21
  2. package/lib/components/material-ui/DataTable/Data.d.ts +1 -0
  3. package/lib/components/material-ui/DataTable/Data.js +1 -0
  4. package/lib/components/material-ui/DataTable/DataTable.d.ts +6 -2
  5. package/lib/components/material-ui/DataTable/DataTable.js +5 -0
  6. package/lib/components/material-ui/DataTable/DataTable.story.js +3 -0
  7. package/package.json +1 -1
package/lib/components/material-ui/AudioPlayer/AudioPlayer.js CHANGED
@@ -50,6 +50,7 @@ var react_2 = require("react");
50
50
  var react_h5_audio_player_1 = __importStar(require("react-h5-audio-player"));
51
51
  require("react-h5-audio-player/lib/styles.css");
52
52
  var ButtonMenu_1 = __importDefault(require("../ButtonMenu"));
53
+ var MobileBreakpoint = 768;
53
54
  function AudioPlayer(_a) {
54
55
  var audioSrc = _a.audioSrc;
55
56
  var player = (0, react_2.createRef)();
@@ -57,31 +58,34 @@ function AudioPlayer(_a) {
57
58
  (0, react_2.useEffect)(function () {
58
59
  player.current.audio.current.playbackRate = playbackRate;
59
60
  }, [playbackRate]);
61
+ var isMobile = (0, react_2.useMemo)(function () {
62
+ return window.screen.width < MobileBreakpoint;
63
+ }, [window.screen.width]);
64
+ var PlaybackRateOptions = (0, react_2.useMemo)(function () {
65
+ return ((0, react_1.jsx)(ButtonMenu_1.default, { key: "plaback-rate", color: "primary", id: "playback-rate-options", buttonRenderer: (0, react_1.jsx)(material_1.Button, null, playbackRate + "x"), menuItems: [
66
+ {
67
+ content: '0.75x',
68
+ onClick: function () { return setPlaybackRate(0.75); },
69
+ },
70
+ {
71
+ content: '1x',
72
+ onClick: function () { return setPlaybackRate(1); },
73
+ },
74
+ {
75
+ content: '1.5x',
76
+ onClick: function () { return setPlaybackRate(1.5); },
77
+ },
78
+ {
79
+ content: '2x',
80
+ onClick: function () { return setPlaybackRate(2); },
81
+ },
82
+ ] }));
83
+ }, [playbackRate]);
60
84
  return ((0, react_1.jsx)("div", { css: function (theme) {
61
85
  var _a, _b, _c, _d;
62
86
  return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rhap_main-controls-button {\n color: ", ";\n }\n .rhap_progress-indicator {\n background: ", ";\n }\n "], ["\n .rhap_main-controls-button {\n color: ", ";\n }\n .rhap_progress-indicator {\n background: ", ";\n }\n "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)', ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || 'hsl(321, 53%, 31%)');
63
87
  } },
64
- (0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src: audioSrc, showFilledProgress: true, progressJumpSteps: { backward: 10000, forward: 10000 }, customAdditionalControls: [
65
- react_h5_audio_player_1.RHAP_UI.LOOP,
66
- (0, react_1.jsx)(ButtonMenu_1.default, { key: "plaback-rate", color: "primary", id: "playback-rate-options", buttonRenderer: (0, react_1.jsx)(material_1.Button, null, playbackRate + "x"), menuItems: [
67
- {
68
- content: '0.75x',
69
- onClick: function () { return setPlaybackRate(0.75); },
70
- },
71
- {
72
- content: '1x',
73
- onClick: function () { return setPlaybackRate(1); },
74
- },
75
- {
76
- content: '1.5x',
77
- onClick: function () { return setPlaybackRate(1.5); },
78
- },
79
- {
80
- content: '2x',
81
- onClick: function () { return setPlaybackRate(2); },
82
- },
83
- ] }),
84
- ] })));
88
+ (0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src: audioSrc, showFilledProgress: true, progressJumpSteps: { backward: 10000, forward: 10000 }, customAdditionalControls: isMobile ? [PlaybackRateOptions] : [react_h5_audio_player_1.RHAP_UI.LOOP, PlaybackRateOptions], customVolumeControls: isMobile ? [] : [react_h5_audio_player_1.RHAP_UI.VOLUME] })));
85
89
  }
86
90
  exports.default = AudioPlayer;
87
91
  var templateObject_1;
package/lib/components/material-ui/DataTable/Data.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { EnhancedColumn } from './DataTable';
2
2
  export interface People {
3
+ id: string;
3
4
  firstName: string;
4
5
  lastName: string;
5
6
  age: number;
package/lib/components/material-ui/DataTable/Data.js CHANGED
@@ -30,6 +30,7 @@ exports.Columns = [
30
30
  __assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
31
31
  ];
32
32
  exports.Data = new Array(20).fill(null).map(function () { return ({
33
+ id: faker_1.default.datatype.uuid(),
33
34
  firstName: faker_1.default.name.firstName(),
34
35
  lastName: faker_1.default.name.lastName(),
35
36
  age: faker_1.default.datatype.number(60),
package/lib/components/material-ui/DataTable/DataTable.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps } from 'react-table';
1
+ import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions } from 'react-table';
2
2
  import { ReactNode } from 'react';
3
3
  export declare type Mode = 'single' | 'multi';
4
4
  export declare type CustomColumnConfigProps<D extends object> = {
@@ -7,7 +7,7 @@ export declare type CustomColumnConfigProps<D extends object> = {
7
7
  columns?: EnhancedColumn<D>[];
8
8
  };
9
9
  export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
10
- export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
10
+ export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
11
11
  export declare type EnhancedTableInstance<D extends object> = Omit<TableInstance<D>, 'state'> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & {
12
12
  state: EnhancedTableState<D>;
13
13
  };
@@ -22,6 +22,7 @@ export interface TableFeatureOptions<D extends object> {
22
22
  Component: (props: {
23
23
  data: D;
24
24
  }) => JSX.Element;
25
+ autoResetExpanded?: boolean;
25
26
  };
26
27
  filters?: {
27
28
  enabled: boolean;
@@ -45,6 +46,9 @@ export interface TableFeatureOptions<D extends object> {
45
46
  sorting?: {
46
47
  enabled: boolean;
47
48
  };
49
+ table?: {
50
+ getRowId?: UseTableOptions<D>['getRowId'];
51
+ };
48
52
  }
49
53
  interface Props<D extends object> {
50
54
  title?: string;
package/lib/components/material-ui/DataTable/DataTable.js CHANGED
@@ -298,7 +298,12 @@ function useDefaultTableInstance(_a) {
298
298
  });
299
299
  }
300
300
  }
301
+ var getRowId = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowId;
302
+ var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
301
303
  return react_table_1.useTable.apply(void 0, __spreadArray([{
304
+ autoResetExpanded: autoResetExpanded,
305
+ autoResetGlobalFilter: false,
306
+ getRowId: getRowId,
302
307
  columns: columns,
303
308
  data: data,
304
309
  filterTypes: filterTypes,
package/lib/components/material-ui/DataTable/DataTable.story.js CHANGED
@@ -54,6 +54,9 @@ function DataTable() {
54
54
  sorting: {
55
55
  enabled: true,
56
56
  },
57
+ table: {
58
+ getRowId: function (person) { return person.id; },
59
+ },
57
60
  };
58
61
  var instance = (0, DataTable_1.useDefaultTableInstance)({ columns: columns, data: data, options: options });
59
62
  return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.61",
3
+ "version": "2.0.65",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",