@vendorflow/components 2.0.49 → 2.0.53
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/lib/components/index.d.ts +1 -1
- package/lib/components/index.js +3 -3
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.d.ts +5 -0
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.js +87 -0
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.d.ts +1 -0
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.js +10 -0
- package/lib/components/material-ui/AudioPlayer/index.d.ts +1 -0
- package/lib/components/material-ui/AudioPlayer/index.js +8 -0
- package/lib/components/material-ui/ChatInterface/ActionsMenu.js +2 -7
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +4 -4
- package/lib/stories/0-Inputs.stories.d.ts +1 -1
- package/lib/stories/0-Inputs.stories.js +3 -3
- package/package.json +2 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
export { default as AudioPlayer } from './material-ui/AudioPlayer';
|
|
1
2
|
export { default as Button } from './material-ui/Button';
|
|
2
3
|
export { default as ButtonMenu } from './material-ui/ButtonMenu';
|
|
3
|
-
export { default as ChatInterface } from './material-ui/ChatInterface';
|
|
4
4
|
export { default as ColorPicker } from './material-ui/ColorPicker';
|
|
5
5
|
export { default as DataTable } from './material-ui/DataTable';
|
|
6
6
|
export { default as InputDate } from './material-ui/InputDate';
|
package/lib/components/index.js
CHANGED
|
@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.
|
|
6
|
+
exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ButtonMenu = exports.Button = exports.AudioPlayer = void 0;
|
|
7
|
+
var AudioPlayer_1 = require("./material-ui/AudioPlayer");
|
|
8
|
+
Object.defineProperty(exports, "AudioPlayer", { enumerable: true, get: function () { return __importDefault(AudioPlayer_1).default; } });
|
|
7
9
|
var Button_1 = require("./material-ui/Button");
|
|
8
10
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
|
|
9
11
|
var ButtonMenu_1 = require("./material-ui/ButtonMenu");
|
|
10
12
|
Object.defineProperty(exports, "ButtonMenu", { enumerable: true, get: function () { return __importDefault(ButtonMenu_1).default; } });
|
|
11
|
-
var ChatInterface_1 = require("./material-ui/ChatInterface");
|
|
12
|
-
Object.defineProperty(exports, "ChatInterface", { enumerable: true, get: function () { return __importDefault(ChatInterface_1).default; } });
|
|
13
13
|
var ColorPicker_1 = require("./material-ui/ColorPicker");
|
|
14
14
|
Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
|
|
15
15
|
var DataTable_1 = require("./material-ui/DataTable");
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
26
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
27
|
+
if (!m) return o;
|
|
28
|
+
var i = m.call(o), r, ar = [], e;
|
|
29
|
+
try {
|
|
30
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
31
|
+
}
|
|
32
|
+
catch (error) { e = { error: error }; }
|
|
33
|
+
finally {
|
|
34
|
+
try {
|
|
35
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
36
|
+
}
|
|
37
|
+
finally { if (e) throw e.error; }
|
|
38
|
+
}
|
|
39
|
+
return ar;
|
|
40
|
+
};
|
|
41
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
42
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
43
|
+
};
|
|
44
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
|
+
/** @jsxRuntime classic */
|
|
46
|
+
/** @jsx jsx */
|
|
47
|
+
var react_1 = require("@emotion/react");
|
|
48
|
+
var material_1 = require("@mui/material");
|
|
49
|
+
var react_2 = require("react");
|
|
50
|
+
var react_h5_audio_player_1 = __importStar(require("react-h5-audio-player"));
|
|
51
|
+
require("react-h5-audio-player/lib/styles.css");
|
|
52
|
+
var ButtonMenu_1 = __importDefault(require("../ButtonMenu"));
|
|
53
|
+
function AudioPlayer(_a) {
|
|
54
|
+
var audioSrc = _a.audioSrc;
|
|
55
|
+
var player = (0, react_2.createRef)();
|
|
56
|
+
var _b = __read((0, react_2.useState)(1), 2), playbackRate = _b[0], setPlaybackRate = _b[1];
|
|
57
|
+
(0, react_2.useEffect)(function () {
|
|
58
|
+
player.current.audio.current.playbackRate = playbackRate;
|
|
59
|
+
}, [playbackRate]);
|
|
60
|
+
return ((0, react_1.jsx)("div", { css: function (theme) {
|
|
61
|
+
var _a, _b, _c, _d;
|
|
62
|
+
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
|
+
} },
|
|
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
|
+
] })));
|
|
85
|
+
}
|
|
86
|
+
exports.default = AudioPlayer;
|
|
87
|
+
var templateObject_1;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AudioPlayer: () => JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.AudioPlayer = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var AudioPlayer_1 = __importDefault(require("./AudioPlayer"));
|
|
9
|
+
var AudioPlayer = function () { return (react_1.default.createElement(AudioPlayer_1.default, { audioSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' })); };
|
|
10
|
+
exports.AudioPlayer = AudioPlayer;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './AudioPlayer';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var AudioPlayer_1 = require("./AudioPlayer");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AudioPlayer_1).default; } });
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
2
|
var __assign = (this && this.__assign) || function () {
|
|
7
3
|
__assign = Object.assign || function(t) {
|
|
8
4
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -30,8 +26,8 @@ function ActionsMenu() {
|
|
|
30
26
|
var popupId = (0, react_2.useRef)(short_uuid_1.default.generate());
|
|
31
27
|
var popupState = (0, hooks_1.usePopupState)({ variant: 'popover', popupId: popupId.current });
|
|
32
28
|
return ((0, react_1.jsx)("div", null,
|
|
33
|
-
(0, react_1.jsx)(material_1.Tooltip, {
|
|
34
|
-
(0, react_1.jsx)(material_1.IconButton, __assign({
|
|
29
|
+
(0, react_1.jsx)(material_1.Tooltip, { placement: "top", title: "Actions" },
|
|
30
|
+
(0, react_1.jsx)(material_1.IconButton, __assign({}, (0, hooks_1.bindTrigger)(popupState)),
|
|
35
31
|
(0, react_1.jsx)(icons_material_1.MapsUgc, null))),
|
|
36
32
|
(0, react_1.jsx)(material_1.Menu, __assign({}, (0, hooks_1.bindMenu)(popupState), { anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' } }),
|
|
37
33
|
(0, react_1.jsx)(material_1.MenuItem, null, "Template 1"),
|
|
@@ -39,4 +35,3 @@ function ActionsMenu() {
|
|
|
39
35
|
(0, react_1.jsx)(material_1.MenuItem, null, "Template 3"))));
|
|
40
36
|
}
|
|
41
37
|
exports.default = ActionsMenu;
|
|
42
|
-
var templateObject_1, templateObject_2;
|
|
@@ -121,13 +121,13 @@ function InputSearchDropdown(props) {
|
|
|
121
121
|
return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
122
122
|
}
|
|
123
123
|
return ((0, react_1.jsx)("div", null,
|
|
124
|
-
(0, react_1.jsx)(material_1.Autocomplete, __assign({ autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
|
|
124
|
+
(0, react_1.jsx)(material_1.Autocomplete, __assign({ css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "], ["\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
|
|
125
125
|
(0, react_1.jsx)("div", null,
|
|
126
|
-
helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(
|
|
127
|
-
multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(
|
|
126
|
+
helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "], ["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
|
|
127
|
+
multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "], ["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
|
|
128
128
|
getCount(),
|
|
129
129
|
"/",
|
|
130
130
|
max)))));
|
|
131
131
|
}
|
|
132
132
|
exports.default = InputSearchDropdown;
|
|
133
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
133
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -2,9 +2,9 @@ declare const _default: {
|
|
|
2
2
|
title: string;
|
|
3
3
|
};
|
|
4
4
|
export default _default;
|
|
5
|
+
export { AudioPlayer } from '../components/material-ui/AudioPlayer/AudioPlayer.story';
|
|
5
6
|
export { Button } from '../components/material-ui/Button/Button.story';
|
|
6
7
|
export { ButtonMenuUsingDefault, ButtonMenuUsingCustom } from '../components/material-ui/ButtonMenu/ButtonMenu.story';
|
|
7
|
-
export { ChatInterface } from '../components/material-ui/ChatInterface/ChatInterface.story';
|
|
8
8
|
export { ColorPicker } from '../components/material-ui/ColorPicker/ColorPicker.story';
|
|
9
9
|
export { DataTable } from '../components/material-ui/DataTable/DataTable.story';
|
|
10
10
|
export { InputDate } from '../components/material-ui/InputDate/InputDate.story';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Modal = exports.InputTime = exports.InputSearchDropdownMulti = exports.InputSearchDropdownSingle = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.
|
|
3
|
+
exports.Modal = exports.InputTime = exports.InputSearchDropdownMulti = exports.InputSearchDropdownSingle = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ButtonMenuUsingCustom = exports.ButtonMenuUsingDefault = exports.Button = exports.AudioPlayer = void 0;
|
|
4
4
|
exports.default = {
|
|
5
5
|
title: 'Inputs',
|
|
6
6
|
};
|
|
7
|
+
var AudioPlayer_story_1 = require("../components/material-ui/AudioPlayer/AudioPlayer.story");
|
|
8
|
+
Object.defineProperty(exports, "AudioPlayer", { enumerable: true, get: function () { return AudioPlayer_story_1.AudioPlayer; } });
|
|
7
9
|
var Button_story_1 = require("../components/material-ui/Button/Button.story");
|
|
8
10
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_story_1.Button; } });
|
|
9
11
|
var ButtonMenu_story_1 = require("../components/material-ui/ButtonMenu/ButtonMenu.story");
|
|
10
12
|
Object.defineProperty(exports, "ButtonMenuUsingDefault", { enumerable: true, get: function () { return ButtonMenu_story_1.ButtonMenuUsingDefault; } });
|
|
11
13
|
Object.defineProperty(exports, "ButtonMenuUsingCustom", { enumerable: true, get: function () { return ButtonMenu_story_1.ButtonMenuUsingCustom; } });
|
|
12
|
-
var ChatInterface_story_1 = require("../components/material-ui/ChatInterface/ChatInterface.story");
|
|
13
|
-
Object.defineProperty(exports, "ChatInterface", { enumerable: true, get: function () { return ChatInterface_story_1.ChatInterface; } });
|
|
14
14
|
var ColorPicker_story_1 = require("../components/material-ui/ColorPicker/ColorPicker.story");
|
|
15
15
|
Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_story_1.ColorPicker; } });
|
|
16
16
|
var DataTable_story_1 = require("../components/material-ui/DataTable/DataTable.story");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vendorflow/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.53",
|
|
4
4
|
"description": "React components for vendorflow",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
"react-color-palette": "^6.1.0",
|
|
113
113
|
"react-dev-utils": "^10.2.1",
|
|
114
114
|
"react-dom": "^17.0.2",
|
|
115
|
+
"react-h5-audio-player": "^3.8.1",
|
|
115
116
|
"react-measure": "^2.5.2",
|
|
116
117
|
"react-scripts": "^4.0.3",
|
|
117
118
|
"react-table": "^7.7.0",
|