wini-web-components 1.6.0 → 1.6.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 (7) hide show
  1. package/dist/component/dialog/dialog.d.ts +3 -2
  2. package/dist/component/dialog/dialog.js +13 -15
  3. package/dist/component/progress-bar/progress-bar.js +1 -1
  4. package/dist/component/switch/switch.js +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1 -1
  7. package/package.json +1 -1
package/dist/component/dialog/dialog.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './dialog.css';
3
2
  import { ComponentStatus } from '../../index';
4
3
  export declare enum DialogAlignment {
5
4
  start = "start",
@@ -13,15 +12,17 @@ interface DialogState {
13
12
  content: string;
14
13
  onSubmit: Function;
15
14
  submitTitle?: string;
15
+ cancelTitle?: string;
16
16
  alignment?: DialogAlignment;
17
17
  }
18
- export declare const showDialog: ({ ref, title, status, content, onSubmit, submitTitle, alignment }: {
18
+ export declare const showDialog: ({ ref, title, status, content, onSubmit, submitTitle, cancelTitle, alignment }: {
19
19
  ref: React.MutableRefObject<Dialog>;
20
20
  title?: string | undefined;
21
21
  status?: ComponentStatus | undefined;
22
22
  content?: string | undefined;
23
23
  onSubmit?: Function | undefined;
24
24
  submitTitle?: string | undefined;
25
+ cancelTitle?: string | undefined;
25
26
  alignment?: DialogAlignment | undefined;
26
27
  }) => void;
27
28
  export declare class Dialog extends React.Component<Object, DialogState> {
package/dist/component/dialog/dialog.js CHANGED
@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
32
32
  exports.Dialog = exports.showDialog = exports.DialogAlignment = void 0;
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var react_dom_1 = __importDefault(require("react-dom"));
35
- require("./dialog.css");
35
+ var dialog_module_css_1 = __importDefault(require("./dialog.module.css"));
36
36
  var index_1 = require("../../index");
37
37
  var DialogAlignment;
38
38
  (function (DialogAlignment) {
@@ -41,13 +41,14 @@ var DialogAlignment;
41
41
  DialogAlignment["end"] = "end";
42
42
  })(DialogAlignment = exports.DialogAlignment || (exports.DialogAlignment = {}));
43
43
  var showDialog = function (_a) {
44
- var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, alignment = _a.alignment;
44
+ var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, cancelTitle = _a.cancelTitle, alignment = _a.alignment;
45
45
  ref.current.showDialogNoti({
46
46
  title: title !== null && title !== void 0 ? title : '',
47
47
  status: status !== null && status !== void 0 ? status : index_1.ComponentStatus.INFOR,
48
48
  content: content !== null && content !== void 0 ? content : '',
49
49
  onSubmit: onSubmit !== null && onSubmit !== void 0 ? onSubmit : (function () { }),
50
50
  submitTitle: submitTitle,
51
+ cancelTitle: cancelTitle,
51
52
  alignment: alignment
52
53
  });
53
54
  };
@@ -73,23 +74,20 @@ var Dialog = /** @class */ (function (_super) {
73
74
  };
74
75
  Dialog.prototype.render = function () {
75
76
  var _this = this;
76
- var _a;
77
+ var _a, _b;
77
78
  return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
78
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: 'dialog-overlay' },
79
- react_1.default.createElement("div", { className: 'dialog-container col', style: { width: '41.4rem', alignItems: this.state.alignment }, "dialog-type": this.state.status, onClick: function (e) { return e.stopPropagation(); } },
80
- react_1.default.createElement("div", { key: 'dialog-body', className: 'dialog-body col', style: { alignItems: 'inherit' } },
81
- react_1.default.createElement("div", { className: 'dialog-status row' }, (0, index_1.getStatusIcon)(this.state.status)),
82
- react_1.default.createElement("div", { className: 'dialog-title', style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.title),
83
- react_1.default.createElement("div", { className: 'dialog-content', style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.content)),
84
- react_1.default.createElement("div", { key: 'dialog-footer', className: 'dialog-footer row' },
85
- react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () { return _this.setState({ open: false }); }, className: 'dialog-action' }, "Quay l\u1EA1i"),
79
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-overlay'] },
80
+ react_1.default.createElement("div", { className: "".concat(dialog_module_css_1.default['dialog-container'], " col"), style: { width: '41.4rem', alignItems: this.state.alignment }, "dialog-type": this.state.status, onClick: function (e) { return e.stopPropagation(); } },
81
+ react_1.default.createElement("div", { key: 'dialog-body', className: "".concat(dialog_module_css_1.default['dialog-body'], " col"), style: { alignItems: 'inherit' } },
82
+ react_1.default.createElement("div", { className: "".concat(dialog_module_css_1.default['dialog-status'], " row") }, (0, index_1.getStatusIcon)(this.state.status)),
83
+ react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-title'], style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.title),
84
+ react_1.default.createElement("div", { className: dialog_module_css_1.default['dialog-content'], style: { textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' } }, this.state.content)),
85
+ react_1.default.createElement("div", { key: 'dialog-footer', className: "".concat(dialog_module_css_1.default['dialog-footer'], " row") },
86
+ react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () { return _this.setState({ open: false }); }, className: dialog_module_css_1.default['dialog-action'] }, (_a = this.state.cancelTitle) !== null && _a !== void 0 ? _a : "Quay lại"),
86
87
  react_1.default.createElement("button", { type: 'button', style: this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined, onClick: function () {
87
88
  _this.state.onSubmit();
88
89
  _this.setState({ open: false });
89
- }, className: 'dialog-action dialog-submit' }, (_a = this.state.submitTitle) !== null && _a !== void 0 ? _a : 'Xác nhận')),
90
- react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.setState({ open: false }); }, className: 'dialog-close-btn row' },
91
- react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
92
- react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 }))))), document.body)));
90
+ }, className: "".concat(dialog_module_css_1.default['dialog-action'], " ").concat(dialog_module_css_1.default['dialog-submit']) }, (_b = this.state.submitTitle) !== null && _b !== void 0 ? _b : 'Xác nhận')))), document.body)));
93
91
  };
94
92
  return Dialog;
95
93
  }(react_1.default.Component));
package/dist/component/progress-bar/progress-bar.js CHANGED
@@ -22,7 +22,7 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
22
22
  var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
23
23
  var index_1 = require("../../index");
24
24
  function ProgressBar(_a) {
25
- var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--background)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
25
+ var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-background-main)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
26
26
  var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
27
27
  return react_2.default.createElement("div", { id: id, className: "progress-bar-container col", style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
28
28
  (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "progress-bar-title row" },
package/dist/component/switch/switch.js CHANGED
@@ -52,7 +52,7 @@ var Switch = /** @class */ (function (_super) {
52
52
  var _this = this;
53
53
  var _a, _b, _c, _d;
54
54
  var propStyle = {
55
- '--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--background)',
55
+ '--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--neutral-background-main)',
56
56
  '--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--infor-color)',
57
57
  '--dot-color': (_c = this.props.dotColor) !== null && _c !== void 0 ? _c : '#ffffff',
58
58
  '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '2rem'
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './skin/color.css';
1
+ import './skin/root.css';
2
2
  import './skin/layout.css';
3
3
  import './skin/typography.css';
4
4
  import { Checkbox } from './component/checkbox/checkbox';