wini-web-components 1.3.2 → 1.4.0
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/dist/component/card/card.d.ts +13 -0
- package/dist/component/card/card.js +33 -0
- package/dist/component/select1/select1.js +9 -7
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/package.json +78 -78
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React, { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import './card.css';
|
|
3
|
+
interface cardInfoProps {
|
|
4
|
+
avatar?: ReactNode;
|
|
5
|
+
heading?: ReactNode;
|
|
6
|
+
subHeading?: ReactNode;
|
|
7
|
+
content?: ReactNode;
|
|
8
|
+
action?: ReactNode;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare function CardInfo({ avatar, heading, subHeading, content, action, style, className }: cardInfoProps): React.JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
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.CardInfo = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
require("./card.css");
|
|
9
|
+
function CardInfo(_a) {
|
|
10
|
+
var avatar = _a.avatar, heading = _a.heading, subHeading = _a.subHeading, content = _a.content, action = _a.action, style = _a.style, className = _a.className;
|
|
11
|
+
return react_1.default.createElement("div", { className: "card-new-grid ".concat(className !== null && className !== void 0 ? className : ''), style: style },
|
|
12
|
+
react_1.default.createElement("div", { className: "list-item" },
|
|
13
|
+
react_1.default.createElement("div", { className: "media" },
|
|
14
|
+
react_1.default.createElement("div", { className: "media-styleimage-circle" }, avatar !== null && avatar !== void 0 ? avatar : react_1.default.createElement("img", { className: "media-styleimage-circle-child", src: "https://via.placeholder.com/40x40" }))),
|
|
15
|
+
react_1.default.createElement("div", { className: "content" },
|
|
16
|
+
react_1.default.createElement("div", { className: "content-title-parent" },
|
|
17
|
+
heading ? react_1.default.createElement("div", { className: "content-title" }, heading) : react_1.default.createElement("div", { className: "content-title" }, "name"),
|
|
18
|
+
subHeading ? react_1.default.createElement("div", { className: "subtitle" }, subHeading) : react_1.default.createElement("div", { className: "subtitle" }, "sub"))),
|
|
19
|
+
react_1.default.createElement("div", { className: "media1" },
|
|
20
|
+
react_1.default.createElement("svg", { onClick: function () { }, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
21
|
+
react_1.default.createElement("path", { d: "M3.60698 5.34049C3.35391 5.10851 2.94912 5.10851 2.69605 5.34049C2.43465 5.58011 2.43465 5.97512 2.69605 6.21474L7.54454 10.6592C7.7976 10.8912 8.2024 10.8912 8.45546 10.6592L13.3039 6.21474C13.5654 5.97512 13.5654 5.58011 13.3039 5.34049C13.0509 5.10851 12.6461 5.10851 12.393 5.34049L8 9.36743L3.60698 5.34049Z", fill: "#61616B" })))),
|
|
22
|
+
react_1.default.createElement("div", { className: "frame-parent" }, content !== null && content !== void 0 ? content : react_1.default.createElement("div", { className: "content-parent" },
|
|
23
|
+
react_1.default.createElement("div", { className: "content1" },
|
|
24
|
+
react_1.default.createElement("div", { className: "content-title-wrapper" },
|
|
25
|
+
react_1.default.createElement("div", { className: "content-title" }, "value1")),
|
|
26
|
+
react_1.default.createElement("div", { className: "body-content" }, "content1")),
|
|
27
|
+
react_1.default.createElement("div", { className: "content1" },
|
|
28
|
+
react_1.default.createElement("div", { className: "content-title-wrapper" },
|
|
29
|
+
react_1.default.createElement("div", { className: "content-title" }, "value2")),
|
|
30
|
+
react_1.default.createElement("div", { className: "body-content" }, "content2")))),
|
|
31
|
+
react_1.default.createElement("div", null, action !== null && action !== void 0 ? action : react_1.default.createElement("div", null)));
|
|
32
|
+
}
|
|
33
|
+
exports.CardInfo = CardInfo;
|
|
@@ -233,19 +233,21 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
233
233
|
};
|
|
234
234
|
Select1.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
235
235
|
var _this = this;
|
|
236
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
236
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
237
237
|
if (prevProps.options !== this.props.options) {
|
|
238
238
|
this.setState(__assign(__assign({}, this.state), { options: this.props.options }));
|
|
239
239
|
if (this.inputRef.current)
|
|
240
240
|
this.inputRef.current.value = "".concat((_b = (_a = this.props.options.find(function (e) { return e.id === _this.state.value; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "");
|
|
241
241
|
}
|
|
242
|
-
if (prevProps.value !== this.props.value)
|
|
242
|
+
if (prevProps.value !== this.props.value && this.inputRef.current) {
|
|
243
243
|
this.setState(__assign(__assign({}, this.state), { value: this.props.value }));
|
|
244
|
-
if (prevState.value !== this.state.value && this.inputRef.current)
|
|
245
244
|
this.inputRef.current.value = "".concat((_d = (_c = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "");
|
|
245
|
+
}
|
|
246
|
+
if (prevState.value !== this.state.value && this.inputRef.current)
|
|
247
|
+
this.inputRef.current.value = "".concat((_f = (_e = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : "");
|
|
246
248
|
//
|
|
247
249
|
if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
|
|
248
|
-
var thisPopupRect = (
|
|
250
|
+
var thisPopupRect = (_g = document.body.querySelector('.select1-popup')) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect();
|
|
249
251
|
if (thisPopupRect) {
|
|
250
252
|
var style = void 0;
|
|
251
253
|
if (thisPopupRect.right > document.body.offsetWidth) {
|
|
@@ -255,15 +257,15 @@ var Select1 = /** @class */ (function (_super) {
|
|
|
255
257
|
};
|
|
256
258
|
}
|
|
257
259
|
var _bottom = thisPopupRect.bottom - 8;
|
|
258
|
-
var thisContainerRect = (
|
|
260
|
+
var thisContainerRect = (_h = this.containerRef.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect();
|
|
259
261
|
if (thisContainerRect) {
|
|
260
262
|
if (_bottom > document.body.offsetHeight) {
|
|
261
263
|
style = __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { top: "".concat(thisContainerRect.y - 2 - thisPopupRect.height, "px") });
|
|
262
264
|
}
|
|
263
265
|
}
|
|
264
266
|
if (style) {
|
|
265
|
-
(
|
|
266
|
-
(
|
|
267
|
+
(_j = style.left) !== null && _j !== void 0 ? _j : (style.left = style.right ? undefined : "".concat(this.state.offset.x, "px"));
|
|
268
|
+
(_k = style.width) !== null && _k !== void 0 ? _k : (style.width = "".concat(this.state.offset.width, "px"));
|
|
267
269
|
this.setState(__assign(__assign({}, this.state), { style: style }));
|
|
268
270
|
}
|
|
269
271
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -24,4 +24,5 @@ import { Rating } from './component/rating/rating';
|
|
|
24
24
|
import { ProgressCircle } from './component/progress-circle/progress-circle';
|
|
25
25
|
import { CustomSlider } from './component/slider/slider';
|
|
26
26
|
import { ToastContainer } from 'react-toastify';
|
|
27
|
-
|
|
27
|
+
import { CardInfo } from './component/card/card';
|
|
28
|
+
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, OptionsItem, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, CardInfo };
|