Add comprehensive e2e test suites for Tasks 16-25

Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date)
- Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class
- Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting
- Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states
- Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions
- Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation

Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares)
- Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline
- Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements
- Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations
- Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary
- Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds

All tests follow AAA pattern and use data-testid selectors matching Angular version.
Total: 245 tests across 10 feature suites.
This commit is contained in:
gnezim
2026-04-05 19:25:03 +03:00
parent 21c6ed4f82
commit 60e2149072
31032 changed files with 5222883 additions and 2 deletions
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2016-2025 PrimeTek
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
+67
View File
@@ -0,0 +1,67 @@
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/primereact.svg)](https://badge.fury.io/js/primereact)
[![primereact](https://snyk.io/advisor/npm-package/primereact/badge.svg)](https://snyk.io/advisor/npm-package/primereact)
![NPM Downloads](https://img.shields.io/npm/dm/primereact?color=purple)
[![Actions CI](https://github.com/primefaces/primereact/workflows/NodeJS%20CI/badge.svg)](https://github.com/primefaces/primereact/actions/workflows/node.js.yml)
[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
[![Stackoverflow](https://img.shields.io/badge/StackOverflow-primereact-chocolate.svg)](https://stackoverflow.com/questions/tagged/primereact)
[![Prime Discussions](https://img.shields.io/github/discussions-search?query=org%3Aprimefaces&logo=github&label=Prime%20Discussions&link=https%3A%2F%2Fgithub.com%2Forgs%2Fprimefaces%2Fdiscussions)](https://github.com/orgs/primefaces/discussions)
[![PrimeReact Hero](https://www.primefaces.org/static/social/primereact-preview.jpg)](https://www.primereact.org)
# PrimeReact
PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://primereact.org/) for live showcase and documentation.
## Download
PrimeReact is available at [npm](https://www.npmjs.com/package/primereact).
```
# Using npm
npm install primereact
# Using yarn
yarn add primereact
# Using pnpm
pnpm add primereact
```
## Import
Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
```javascript
//import { ComponentName } from 'primereact/{componentname}';
import { Button } from 'primereact/button';
export default function MyComponent() {
return (
<Button label="PrimeReact" />
)
}
```
## Theming
PrimeReact has two theming modes; styled or unstyled.
**Styled Mode**
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primereact.org/theming) section for the complete list of available themes to choose from.
```javascript
// theme
import 'primereact/resources/themes/lara-light-cyan/theme.css';
```
**Unstyled Mode**
Unstyled mode is disabled by default for all components. Using the PrimeReact context, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primereact.org/unstyled) documentation for more information and examples.
## Contributors
<a href="https://github.com/primefaces/primereact/graphs/contributors">
<img src="https://contrib.rocks/image?repo=primefaces/primereact" />
</a>
+510
View File
@@ -0,0 +1,510 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var csstransition = require('primereact/csstransition');
var hooks = require('primereact/hooks');
var chevrondown = require('primereact/icons/chevrondown');
var chevronright = require('primereact/icons/chevronright');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-accordion p-component',
accordiontab: {
root: function root(_ref) {
var selected = _ref.selected;
return utils.classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});
},
content: 'p-accordion-content',
header: function header(_ref2) {
var selected = _ref2.selected,
getTabProp = _ref2.getTabProp,
tab = _ref2.tab;
return utils.classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
});
},
headeraction: 'p-accordion-header-link',
headericon: 'p-accordion-toggle-icon',
headertitle: 'p-accordion-header-text',
toggleablecontent: 'p-toggleable-content',
transition: 'p-toggleable-content'
}
};
var styles = "\n@layer primereact {\n .p-accordion-header-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n user-select: none;\n position: relative;\n text-decoration: none;\n }\n \n .p-accordion-header-link:focus {\n z-index: 1;\n }\n \n .p-accordion-header-text {\n line-height: 1;\n width: 100%;\n }\n}\n";
var AccordionBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Accordion',
id: null,
activeIndex: null,
className: null,
style: null,
multiple: false,
expandIcon: null,
collapseIcon: null,
transitionOptions: null,
onTabOpen: null,
onTabClose: null,
onTabChange: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AccordionTabBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'AccordionTab',
className: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
style: null,
tabIndex: 0,
children: undefined
},
getCProp: function getCProp(tab, name) {
return utils.ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps);
},
getCProps: function getCProps(tab) {
return utils.ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return utils.ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AccordionTab = function AccordionTab() {};
var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AccordionBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React__namespace.useRef(null);
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var count = React__namespace.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
activeIndex: activeIndexState
}
};
var _AccordionBase$setMet = AccordionBase.setMetaData(_objectSpread({}, metaData)),
ptm = _AccordionBase$setMet.ptm,
ptmo = _AccordionBase$setMet.ptmo,
cx = _AccordionBase$setMet.cx,
isUnstyled = _AccordionBase$setMet.isUnstyled;
componentbase.useHandleStyle(AccordionBase.css.styles, isUnstyled, {
name: 'accordion'
});
var getTabProp = function getTabProp(tab, name) {
return AccordionTabBase.getCProp(tab, name);
};
var getTabPT = function getTabPT(tab, key, index) {
var tabMetaData = {
// props: atProps, /* @todo */
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
selected: isSelected(index),
disabled: getTabProp(tab, 'disabled')
}
};
return mergeProps(ptm("tab.".concat(key), {
tab: tabMetaData
}), ptm("accordiontab.".concat(key), {
accordiontab: tabMetaData
}), ptm("accordiontab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
changeActiveIndex(event, tab, index);
};
var changeActiveIndex = function changeActiveIndex(event, tab, index) {
if (!getTabProp(tab, 'disabled')) {
var selected = isSelected(index);
var newActiveIndex = null;
if (props.multiple) {
var indexes = activeIndex || [];
newActiveIndex = selected ? indexes.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(indexes), [index]);
} else {
newActiveIndex = selected ? null : index;
}
var callback = selected ? props.onTabClose : props.onTabOpen;
callback && callback({
originalEvent: event,
index: index
});
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: newActiveIndex
});
} else {
setActiveIndexState(newActiveIndex);
}
}
event.preventDefault();
};
var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowDown':
onTabArrowDownKey(event);
break;
case 'ArrowUp':
onTabArrowUpKey(event);
break;
case 'Home':
onTabHomeKey(event);
break;
case 'End':
onTabEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onTabEnterKey(event, tab, index);
break;
}
};
var onTabArrowDownKey = function onTabArrowDownKey(event) {
var nextHeaderAction = _findNextHeaderAction(event.target.parentElement.parentElement);
nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
event.preventDefault();
};
var onTabArrowUpKey = function onTabArrowUpKey(event) {
var prevHeaderAction = _findPrevHeaderAction(event.target.parentElement.parentElement);
prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
event.preventDefault();
};
var onTabHomeKey = function onTabHomeKey(event) {
var firstHeaderAction = findFirstHeaderAction();
changeFocusedTab(firstHeaderAction);
event.preventDefault();
};
var onTabEndKey = function onTabEndKey(event) {
var lastHeaderAction = findLastHeaderAction();
changeFocusedTab(lastHeaderAction);
event.preventDefault();
};
var onTabEnterKey = function onTabEnterKey(event, tab, index) {
changeActiveIndex(event, tab, index);
event.preventDefault();
};
var _findNextHeaderAction = function findNextHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
var headerElement = utils.DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var _findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
var headerElement = utils.DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findPrevHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var findFirstHeaderAction = function findFirstHeaderAction() {
return _findNextHeaderAction(elementRef.current.firstElementChild, true);
};
var findLastHeaderAction = function findLastHeaderAction() {
return _findPrevHeaderAction(elementRef.current.lastElementChild, true);
};
var changeFocusedTab = function changeFocusedTab(element) {
if (element) {
utils.DomHandler.focus(element);
}
};
var isSelected = function isSelected(index) {
return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
return i === index;
}) : activeIndex === index;
};
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
hooks.useMountEffect(function () {
if (!idState) {
setIdState(utils.UniqueComponentId());
}
});
if (!idState) {
return null;
}
var createTabHeader = function createTabHeader(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'headerStyle') || {});
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
var headerTitleProps = mergeProps({
className: cx('accordiontab.headertitle')
}, getTabPT(tab, 'headertitle', index));
var tabCProps = AccordionTabBase.getCProps(tab);
var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, utils.ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
var headerIconProps = mergeProps({
'aria-hidden': 'true',
className: cx('accordiontab.headericon')
}, getTabPT(tab, 'headericon', index));
var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerIconProps);
var toggleIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, headerIconProps), {
props: props,
selected: selected
});
var headerProps = mergeProps({
className: utils.classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', {
selected: selected,
getTabProp: getTabProp,
tab: tab
})),
style: style,
'data-p-highlight': selected,
'data-p-disabled': getTabProp(tab, 'disabled')
}, getTabPT(tab, 'header', index));
var headerActionProps = mergeProps({
id: headerId,
href: '#' + ariaControls,
className: cx('accordiontab.headeraction'),
role: 'button',
tabIndex: tabIndex,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return onTabHeaderKeyDown(e, tab, index);
},
'aria-disabled': getTabProp(tab, 'disabled'),
'aria-controls': ariaControls,
'aria-expanded': selected
}, getTabPT(tab, 'headeraction', index));
return /*#__PURE__*/React__namespace.createElement("div", headerProps, /*#__PURE__*/React__namespace.createElement("a", headerActionProps, toggleIcon, header));
};
var createTabContent = function createTabContent(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
var contentId = idState + '_content_' + index;
var ariaLabelledby = idState + '_header_' + index;
var contentRef = /*#__PURE__*/React__namespace.createRef();
var toggleableContentProps = mergeProps({
id: contentId,
ref: contentRef,
className: utils.classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
style: style,
role: 'region',
'aria-labelledby': ariaLabelledby
}, getTabPT(tab, 'toggleablecontent', index));
var contentProps = mergeProps({
className: cx('accordiontab.content')
}, getTabPT(tab, 'content', index));
var transitionProps = mergeProps({
classNames: cx('accordiontab.transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": selected,
unmountOnExit: true,
options: props.transitionOptions
}, getTabPT(tab, 'transition', index));
return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, getTabProp(tab, 'children'))));
};
var createTab = function createTab(tab, index) {
if (utils.ObjectUtils.isValidChild(tab, 'AccordionTab')) {
var key = idState + '_' + index;
var selected = isSelected(index);
var tabHeader = createTabHeader(tab, selected, index);
var tabContent = createTabContent(tab, selected, index);
var _rootProps = mergeProps({
className: cx('accordiontab.root', {
selected: selected
})
}, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root', index));
return /*#__PURE__*/React__namespace.createElement("div", _extends({}, _rootProps, {
key: key
}), tabHeader, tabContent);
}
return null;
};
var createTabs = function createTabs() {
return React__namespace.Children.map(props.children, createTab);
};
var tabs = createTabs();
var rootProps = mergeProps({
className: utils.classNames(props.className, cx('root')),
style: props.style
}, AccordionBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", _extends({
id: idState,
ref: elementRef
}, rootProps), tabs);
});
AccordionTab.displayName = 'AccordionTab';
Accordion.displayName = 'Accordion';
exports.Accordion = Accordion;
exports.AccordionTab = AccordionTab;
File diff suppressed because one or more lines are too long
+342
View File
@@ -0,0 +1,342 @@
/**
*
* Accordion groups a collection of contents in tabs.
*
* [Live Demo](https://www.primereact.org/accordion/)
*
* Helper Components:
*
* - {@link AccordionTab}
*
* @module accordion
*
*/
import * as React from 'react';
import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
import { ComponentHooks } from '../componentbase/componentbase';
import { CSSTransitionProps } from '../csstransition';
import { PassThroughOptions } from '../passthrough';
import { IconType, PassThroughType } from '../utils';
export declare type AccordionPassThroughType<T> = PassThroughType<T, AccordionPassThroughMethodOptions>;
export declare type AccordionTabPassThroughType<T> = PassThroughType<T, AccordionTabPassThroughMethodOptions>;
export declare type AccordionPassThroughTransitionType = ReactCSSTransitionProps | ((options: AccordionPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionTabPassThroughMethodOptions {
props: AccordionTabProps;
parent: AccordionPassThroughMethodOptions;
context: AccordionContext;
}
/**
* Custom passthrough(pt) options.
* @see {@link AccordionTabProps.pt}
*/
export interface AccordionTabPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the headeraction's DOM element.
*/
headerAction?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
/**
* Uses to pass attributes to the headericon's DOM element.
*/
headerIcon?: AccordionTabPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the headertitle's DOM element.
*/
headerTitle?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the toggleablecontent's DOM element.
*/
toggleableContent?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control React Transition API.
*/
transition?: AccordionPassThroughTransitionType;
}
/**
* Defines current inline context in Accordion component.
*/
export interface AccordionContext {
/**
* Opened tab index.
*/
index: number;
/**
* Total number of tabs
*/
count: number;
/**
* Is this the first tab?
* @defaultValue false
*/
first: boolean;
/**
* Is this the last tab?
* @defaultValue false
*/
last: boolean;
/**
* Is this tab currently selected.
* @defaultValue false
*/
selected: boolean;
/**
* Is this tab currently disabled.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in AccordionTab component.
* @group Properties
*/
interface AccordionTabProps {
/**
* Style class of the tab header and content.
*/
className?: string | undefined;
/**
* Style class of the tab content.
*/
contentClassName?: string | undefined;
/**
* Inline style of the tab content.
*/
contentStyle?: React.CSSProperties | undefined;
/**
* Whether the tab is disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Used to define the header of the tab.
*/
header?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode) | undefined;
/**
* Style class of the tab header.
*/
headerClassName?: string | undefined;
/**
* Inline style of the tab header.
*/
headerStyle?: React.CSSProperties | undefined;
/**
* Custom header template of the tab.
*/
headerTemplate?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode);
/**
* Inline style of the tab header and content.
*/
style?: React.CSSProperties | undefined;
/**
* Index of the element in tabbing order.
* @defaultValue 0
*/
tabIndex?: number | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AccordionTabPassThroughOptions}
*/
pt?: AccordionTabPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* AccordionTab is a helper component for Accordion.
* @group Component
*/
export declare class AccordionTab extends React.Component<AccordionTabProps, any> {}
/**
* Custom tab open event.
* @see {@link AccordionProps.onTabOpen}
* @event
*/
export interface AccordionTabOpenEvent {
/**
* Browser mouse event.
*/
originalEvent: React.MouseEvent<HTMLElement>;
/**
* Opened tab index.
*/
index: number;
}
/**
* Custom tab close event.
* @see {@link AccordionProps.onTabClose}
* @extends {AccordionTabOpenEvent}
* @event
*/
export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
/**
* Custom tab change event.
* @see {@link AccordionProps.onTabChange}
* @event
*/
export interface AccordionTabChangeEvent {
/**
* Browser mouse event.
*/
originalEvent: React.MouseEvent<HTMLElement>;
/**
* Opened tab index.
*/
index: number | number[];
}
/**
* Custom passthrough(pt) option method.
*/
export interface AccordionPassThroughMethodOptions {
props: AccordionProps;
state: AccordionState;
}
/**
* Custom passthrough(pt) options.
* @see {@link AccordionProps.pt}
*/
export interface AccordionPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to accordion tabs.
*/
accordiontab?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
}
/**
* Defines current inline state in Accordion component.
*/
export interface AccordionState {
/**
* Current id state as a string
*/
id: string;
/**
* Current active index state.
*/
activeIndex: number | number[];
}
/**
* Defines valid properties in Accordion component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
/**
* Active index or indexes of the element. Use an array of numbers for multiple indexes.
* The {@link multiple} prop must be set to true in order to specify multiple indexes.
*/
activeIndex?: number | number[] | null | undefined;
/**
* When enabled, multiple tabs can be activated at the same time.
* @defaultValue false
*/
multiple?: boolean | undefined;
/**
* Icon of a collapsed tab.
*/
expandIcon?: IconType<AccordionProps> | undefined;
/**
* Icon of an expanded tab.
*/
collapseIcon?: IconType<AccordionProps> | undefined;
/**
* The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
* @type {CSSTransitionProps}
*/
transitionOptions?: CSSTransitionProps | undefined;
/**
* Callback to invoke when a tab gets expanded.
* @param {AccordionTabOpenEvent} event - Custom tab open event.
*/
onTabOpen?(event: AccordionTabOpenEvent): void;
/**
* Callback to invoke when an active tab is collapsed by clicking on the header.
* @param {AccordionTabCloseEvent} event - Custom tab close event.
*/
onTabClose?(event: AccordionTabCloseEvent): void;
/**
* Callback to invoke when state of the accordion changes.
* @param {AccordionTabChangeEvent} event - Custom tab close event.
*/
onTabChange?(event: AccordionTabChangeEvent): void;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
}
/**
* **PrimeReact - Accordion**
*
* _Accordion groups a collection of contents in tabs._
*
* [Live Demo](https://www.primereact.org/accordion/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
// tslint:disable-next-line:max-classes-per-file
export declare class Accordion extends React.Component<AccordionProps, any> {
/**
* Used to get container element.
* @return {HTMLDivElement | null} Container element
*/
public getElement(): HTMLDivElement | null;
}
+485
View File
@@ -0,0 +1,485 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { CSSTransition } from 'primereact/csstransition';
import { useMergeProps, useMountEffect } from 'primereact/hooks';
import { ChevronDownIcon } from 'primereact/icons/chevrondown';
import { ChevronRightIcon } from 'primereact/icons/chevronright';
import { ObjectUtils, classNames, UniqueComponentId, IconUtils, DomHandler } from 'primereact/utils';
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-accordion p-component',
accordiontab: {
root: function root(_ref) {
var selected = _ref.selected;
return classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});
},
content: 'p-accordion-content',
header: function header(_ref2) {
var selected = _ref2.selected,
getTabProp = _ref2.getTabProp,
tab = _ref2.tab;
return classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
});
},
headeraction: 'p-accordion-header-link',
headericon: 'p-accordion-toggle-icon',
headertitle: 'p-accordion-header-text',
toggleablecontent: 'p-toggleable-content',
transition: 'p-toggleable-content'
}
};
var styles = "\n@layer primereact {\n .p-accordion-header-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n user-select: none;\n position: relative;\n text-decoration: none;\n }\n \n .p-accordion-header-link:focus {\n z-index: 1;\n }\n \n .p-accordion-header-text {\n line-height: 1;\n width: 100%;\n }\n}\n";
var AccordionBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Accordion',
id: null,
activeIndex: null,
className: null,
style: null,
multiple: false,
expandIcon: null,
collapseIcon: null,
transitionOptions: null,
onTabOpen: null,
onTabClose: null,
onTabChange: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AccordionTabBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AccordionTab',
className: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
style: null,
tabIndex: 0,
children: undefined
},
getCProp: function getCProp(tab, name) {
return ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps);
},
getCProps: function getCProps(tab) {
return ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AccordionTab = function AccordionTab() {};
var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AccordionBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React.useRef(null);
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var count = React.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
activeIndex: activeIndexState
}
};
var _AccordionBase$setMet = AccordionBase.setMetaData(_objectSpread({}, metaData)),
ptm = _AccordionBase$setMet.ptm,
ptmo = _AccordionBase$setMet.ptmo,
cx = _AccordionBase$setMet.cx,
isUnstyled = _AccordionBase$setMet.isUnstyled;
useHandleStyle(AccordionBase.css.styles, isUnstyled, {
name: 'accordion'
});
var getTabProp = function getTabProp(tab, name) {
return AccordionTabBase.getCProp(tab, name);
};
var getTabPT = function getTabPT(tab, key, index) {
var tabMetaData = {
// props: atProps, /* @todo */
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
selected: isSelected(index),
disabled: getTabProp(tab, 'disabled')
}
};
return mergeProps(ptm("tab.".concat(key), {
tab: tabMetaData
}), ptm("accordiontab.".concat(key), {
accordiontab: tabMetaData
}), ptm("accordiontab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
changeActiveIndex(event, tab, index);
};
var changeActiveIndex = function changeActiveIndex(event, tab, index) {
if (!getTabProp(tab, 'disabled')) {
var selected = isSelected(index);
var newActiveIndex = null;
if (props.multiple) {
var indexes = activeIndex || [];
newActiveIndex = selected ? indexes.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(indexes), [index]);
} else {
newActiveIndex = selected ? null : index;
}
var callback = selected ? props.onTabClose : props.onTabOpen;
callback && callback({
originalEvent: event,
index: index
});
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: newActiveIndex
});
} else {
setActiveIndexState(newActiveIndex);
}
}
event.preventDefault();
};
var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowDown':
onTabArrowDownKey(event);
break;
case 'ArrowUp':
onTabArrowUpKey(event);
break;
case 'Home':
onTabHomeKey(event);
break;
case 'End':
onTabEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onTabEnterKey(event, tab, index);
break;
}
};
var onTabArrowDownKey = function onTabArrowDownKey(event) {
var nextHeaderAction = _findNextHeaderAction(event.target.parentElement.parentElement);
nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
event.preventDefault();
};
var onTabArrowUpKey = function onTabArrowUpKey(event) {
var prevHeaderAction = _findPrevHeaderAction(event.target.parentElement.parentElement);
prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
event.preventDefault();
};
var onTabHomeKey = function onTabHomeKey(event) {
var firstHeaderAction = findFirstHeaderAction();
changeFocusedTab(firstHeaderAction);
event.preventDefault();
};
var onTabEndKey = function onTabEndKey(event) {
var lastHeaderAction = findLastHeaderAction();
changeFocusedTab(lastHeaderAction);
event.preventDefault();
};
var onTabEnterKey = function onTabEnterKey(event, tab, index) {
changeActiveIndex(event, tab, index);
event.preventDefault();
};
var _findNextHeaderAction = function findNextHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
var headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var _findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
var headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var findFirstHeaderAction = function findFirstHeaderAction() {
return _findNextHeaderAction(elementRef.current.firstElementChild, true);
};
var findLastHeaderAction = function findLastHeaderAction() {
return _findPrevHeaderAction(elementRef.current.lastElementChild, true);
};
var changeFocusedTab = function changeFocusedTab(element) {
if (element) {
DomHandler.focus(element);
}
};
var isSelected = function isSelected(index) {
return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
return i === index;
}) : activeIndex === index;
};
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
if (!idState) {
return null;
}
var createTabHeader = function createTabHeader(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'headerStyle') || {});
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
var headerTitleProps = mergeProps({
className: cx('accordiontab.headertitle')
}, getTabPT(tab, 'headertitle', index));
var tabCProps = AccordionTabBase.getCProps(tab);
var header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React.createElement("span", headerTitleProps, ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
var headerIconProps = mergeProps({
'aria-hidden': 'true',
className: cx('accordiontab.headericon')
}, getTabPT(tab, 'headericon', index));
var icon = selected ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, headerIconProps);
var toggleIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, headerIconProps), {
props: props,
selected: selected
});
var headerProps = mergeProps({
className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', {
selected: selected,
getTabProp: getTabProp,
tab: tab
})),
style: style,
'data-p-highlight': selected,
'data-p-disabled': getTabProp(tab, 'disabled')
}, getTabPT(tab, 'header', index));
var headerActionProps = mergeProps({
id: headerId,
href: '#' + ariaControls,
className: cx('accordiontab.headeraction'),
role: 'button',
tabIndex: tabIndex,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return onTabHeaderKeyDown(e, tab, index);
},
'aria-disabled': getTabProp(tab, 'disabled'),
'aria-controls': ariaControls,
'aria-expanded': selected
}, getTabPT(tab, 'headeraction', index));
return /*#__PURE__*/React.createElement("div", headerProps, /*#__PURE__*/React.createElement("a", headerActionProps, toggleIcon, header));
};
var createTabContent = function createTabContent(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
var contentId = idState + '_content_' + index;
var ariaLabelledby = idState + '_header_' + index;
var contentRef = /*#__PURE__*/React.createRef();
var toggleableContentProps = mergeProps({
id: contentId,
ref: contentRef,
className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
style: style,
role: 'region',
'aria-labelledby': ariaLabelledby
}, getTabPT(tab, 'toggleablecontent', index));
var contentProps = mergeProps({
className: cx('accordiontab.content')
}, getTabPT(tab, 'content', index));
var transitionProps = mergeProps({
classNames: cx('accordiontab.transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": selected,
unmountOnExit: true,
options: props.transitionOptions
}, getTabPT(tab, 'transition', index));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React.createElement("div", toggleableContentProps, /*#__PURE__*/React.createElement("div", contentProps, getTabProp(tab, 'children'))));
};
var createTab = function createTab(tab, index) {
if (ObjectUtils.isValidChild(tab, 'AccordionTab')) {
var key = idState + '_' + index;
var selected = isSelected(index);
var tabHeader = createTabHeader(tab, selected, index);
var tabContent = createTabContent(tab, selected, index);
var _rootProps = mergeProps({
className: cx('accordiontab.root', {
selected: selected
})
}, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root', index));
return /*#__PURE__*/React.createElement("div", _extends({}, _rootProps, {
key: key
}), tabHeader, tabContent);
}
return null;
};
var createTabs = function createTabs() {
return React.Children.map(props.children, createTab);
};
var tabs = createTabs();
var rootProps = mergeProps({
className: classNames(props.className, cx('root')),
style: props.style
}, AccordionBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", _extends({
id: idState,
ref: elementRef
}, rootProps), tabs);
});
AccordionTab.displayName = 'AccordionTab';
Accordion.displayName = 'Accordion';
export { Accordion, AccordionTab };
File diff suppressed because one or more lines are too long
+506
View File
@@ -0,0 +1,506 @@
this.primereact = this.primereact || {};
this.primereact.accordion = (function (exports, React, api, componentbase, csstransition, hooks, chevrondown, chevronright, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-accordion p-component',
accordiontab: {
root: function root(_ref) {
var selected = _ref.selected;
return utils.classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});
},
content: 'p-accordion-content',
header: function header(_ref2) {
var selected = _ref2.selected,
getTabProp = _ref2.getTabProp,
tab = _ref2.tab;
return utils.classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
});
},
headeraction: 'p-accordion-header-link',
headericon: 'p-accordion-toggle-icon',
headertitle: 'p-accordion-header-text',
toggleablecontent: 'p-toggleable-content',
transition: 'p-toggleable-content'
}
};
var styles = "\n@layer primereact {\n .p-accordion-header-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n user-select: none;\n position: relative;\n text-decoration: none;\n }\n \n .p-accordion-header-link:focus {\n z-index: 1;\n }\n \n .p-accordion-header-text {\n line-height: 1;\n width: 100%;\n }\n}\n";
var AccordionBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Accordion',
id: null,
activeIndex: null,
className: null,
style: null,
multiple: false,
expandIcon: null,
collapseIcon: null,
transitionOptions: null,
onTabOpen: null,
onTabClose: null,
onTabChange: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AccordionTabBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'AccordionTab',
className: null,
contentClassName: null,
contentStyle: null,
disabled: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTemplate: null,
style: null,
tabIndex: 0,
children: undefined
},
getCProp: function getCProp(tab, name) {
return utils.ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps);
},
getCProps: function getCProps(tab) {
return utils.ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps);
},
getCOtherProps: function getCOtherProps(tab) {
return utils.ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps);
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AccordionTab = function AccordionTab() {};
var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AccordionBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(props.activeIndex),
_React$useState4 = _slicedToArray(_React$useState3, 2),
activeIndexState = _React$useState4[0],
setActiveIndexState = _React$useState4[1];
var elementRef = React__namespace.useRef(null);
var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
var count = React__namespace.Children.count(props.children);
var metaData = {
props: props,
state: {
id: idState,
activeIndex: activeIndexState
}
};
var _AccordionBase$setMet = AccordionBase.setMetaData(_objectSpread({}, metaData)),
ptm = _AccordionBase$setMet.ptm,
ptmo = _AccordionBase$setMet.ptmo,
cx = _AccordionBase$setMet.cx,
isUnstyled = _AccordionBase$setMet.isUnstyled;
componentbase.useHandleStyle(AccordionBase.css.styles, isUnstyled, {
name: 'accordion'
});
var getTabProp = function getTabProp(tab, name) {
return AccordionTabBase.getCProp(tab, name);
};
var getTabPT = function getTabPT(tab, key, index) {
var tabMetaData = {
// props: atProps, /* @todo */
parent: metaData,
context: {
index: index,
count: count,
first: index === 0,
last: index === count - 1,
selected: isSelected(index),
disabled: getTabProp(tab, 'disabled')
}
};
return mergeProps(ptm("tab.".concat(key), {
tab: tabMetaData
}), ptm("accordiontab.".concat(key), {
accordiontab: tabMetaData
}), ptm("accordiontab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
};
var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
changeActiveIndex(event, tab, index);
};
var changeActiveIndex = function changeActiveIndex(event, tab, index) {
if (!getTabProp(tab, 'disabled')) {
var selected = isSelected(index);
var newActiveIndex = null;
if (props.multiple) {
var indexes = activeIndex || [];
newActiveIndex = selected ? indexes.filter(function (i) {
return i !== index;
}) : [].concat(_toConsumableArray(indexes), [index]);
} else {
newActiveIndex = selected ? null : index;
}
var callback = selected ? props.onTabClose : props.onTabOpen;
callback && callback({
originalEvent: event,
index: index
});
if (props.onTabChange) {
props.onTabChange({
originalEvent: event,
index: newActiveIndex
});
} else {
setActiveIndexState(newActiveIndex);
}
}
event.preventDefault();
};
var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowDown':
onTabArrowDownKey(event);
break;
case 'ArrowUp':
onTabArrowUpKey(event);
break;
case 'Home':
onTabHomeKey(event);
break;
case 'End':
onTabEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
onTabEnterKey(event, tab, index);
break;
}
};
var onTabArrowDownKey = function onTabArrowDownKey(event) {
var nextHeaderAction = _findNextHeaderAction(event.target.parentElement.parentElement);
nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
event.preventDefault();
};
var onTabArrowUpKey = function onTabArrowUpKey(event) {
var prevHeaderAction = _findPrevHeaderAction(event.target.parentElement.parentElement);
prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
event.preventDefault();
};
var onTabHomeKey = function onTabHomeKey(event) {
var firstHeaderAction = findFirstHeaderAction();
changeFocusedTab(firstHeaderAction);
event.preventDefault();
};
var onTabEndKey = function onTabEndKey(event) {
var lastHeaderAction = findLastHeaderAction();
changeFocusedTab(lastHeaderAction);
event.preventDefault();
};
var onTabEnterKey = function onTabEnterKey(event, tab, index) {
changeActiveIndex(event, tab, index);
event.preventDefault();
};
var _findNextHeaderAction = function findNextHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
var headerElement = utils.DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var _findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
var headerElement = utils.DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? _findPrevHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
};
var findFirstHeaderAction = function findFirstHeaderAction() {
return _findNextHeaderAction(elementRef.current.firstElementChild, true);
};
var findLastHeaderAction = function findLastHeaderAction() {
return _findPrevHeaderAction(elementRef.current.lastElementChild, true);
};
var changeFocusedTab = function changeFocusedTab(element) {
if (element) {
utils.DomHandler.focus(element);
}
};
var isSelected = function isSelected(index) {
return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
return i === index;
}) : activeIndex === index;
};
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
hooks.useMountEffect(function () {
if (!idState) {
setIdState(utils.UniqueComponentId());
}
});
if (!idState) {
return null;
}
var createTabHeader = function createTabHeader(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'headerStyle') || {});
var headerId = idState + '_header_' + index;
var ariaControls = idState + '_content_' + index;
var tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
var headerTitleProps = mergeProps({
className: cx('accordiontab.headertitle')
}, getTabPT(tab, 'headertitle', index));
var tabCProps = AccordionTabBase.getCProps(tab);
var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, utils.ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
var headerIconProps = mergeProps({
'aria-hidden': 'true',
className: cx('accordiontab.headericon')
}, getTabPT(tab, 'headericon', index));
var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerIconProps);
var toggleIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, headerIconProps), {
props: props,
selected: selected
});
var headerProps = mergeProps({
className: utils.classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', {
selected: selected,
getTabProp: getTabProp,
tab: tab
})),
style: style,
'data-p-highlight': selected,
'data-p-disabled': getTabProp(tab, 'disabled')
}, getTabPT(tab, 'header', index));
var headerActionProps = mergeProps({
id: headerId,
href: '#' + ariaControls,
className: cx('accordiontab.headeraction'),
role: 'button',
tabIndex: tabIndex,
onClick: function onClick(e) {
return onTabHeaderClick(e, tab, index);
},
onKeyDown: function onKeyDown(e) {
return onTabHeaderKeyDown(e, tab, index);
},
'aria-disabled': getTabProp(tab, 'disabled'),
'aria-controls': ariaControls,
'aria-expanded': selected
}, getTabPT(tab, 'headeraction', index));
return /*#__PURE__*/React__namespace.createElement("div", headerProps, /*#__PURE__*/React__namespace.createElement("a", headerActionProps, toggleIcon, header));
};
var createTabContent = function createTabContent(tab, selected, index) {
var style = _objectSpread(_objectSpread({}, getTabProp(tab, 'style') || {}), getTabProp(tab, 'contentStyle') || {});
var contentId = idState + '_content_' + index;
var ariaLabelledby = idState + '_header_' + index;
var contentRef = /*#__PURE__*/React__namespace.createRef();
var toggleableContentProps = mergeProps({
id: contentId,
ref: contentRef,
className: utils.classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
style: style,
role: 'region',
'aria-labelledby': ariaLabelledby
}, getTabPT(tab, 'toggleablecontent', index));
var contentProps = mergeProps({
className: cx('accordiontab.content')
}, getTabPT(tab, 'content', index));
var transitionProps = mergeProps({
classNames: cx('accordiontab.transition'),
timeout: {
enter: 1000,
exit: 450
},
"in": selected,
unmountOnExit: true,
options: props.transitionOptions
}, getTabPT(tab, 'transition', index));
return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
nodeRef: contentRef
}, transitionProps), /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, getTabProp(tab, 'children'))));
};
var createTab = function createTab(tab, index) {
if (utils.ObjectUtils.isValidChild(tab, 'AccordionTab')) {
var key = idState + '_' + index;
var selected = isSelected(index);
var tabHeader = createTabHeader(tab, selected, index);
var tabContent = createTabContent(tab, selected, index);
var _rootProps = mergeProps({
className: cx('accordiontab.root', {
selected: selected
})
}, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root', index));
return /*#__PURE__*/React__namespace.createElement("div", _extends({}, _rootProps, {
key: key
}), tabHeader, tabContent);
}
return null;
};
var createTabs = function createTabs() {
return React__namespace.Children.map(props.children, createTab);
};
var tabs = createTabs();
var rootProps = mergeProps({
className: utils.classNames(props.className, cx('root')),
style: props.style
}, AccordionBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", _extends({
id: idState,
ref: elementRef
}, rootProps), tabs);
});
AccordionTab.displayName = 'AccordionTab';
Accordion.displayName = 'Accordion';
exports.Accordion = Accordion;
exports.AccordionTab = AccordionTab;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.csstransition, primereact.hooks, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.utils);
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./accordion.cjs.js",
"module": "./accordion.esm.js",
"unpkg": "./accordion.min.js",
"types": "./accordion.d.ts",
"sideEffects": false
}
+1145
View File
File diff suppressed because it is too large Load Diff
+1
View File
File diff suppressed because one or more lines are too long
+1527
View File
File diff suppressed because it is too large Load Diff
+1122
View File
File diff suppressed because it is too large Load Diff
+1
View File
File diff suppressed because one or more lines are too long
+1147
View File
File diff suppressed because it is too large Load Diff
+1
View File
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./api.cjs.js",
"module": "./api.esm.js",
"unpkg": "./api.min.js",
"types": "./api.d.ts",
"sideEffects": false
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+611
View File
@@ -0,0 +1,611 @@
/**
*
* AutoComplete is an input component that provides real-time suggestions while being typed.
*
* [Live Demo](https://www.primereact.org/autocomplete/)
*
* @module autocomplete
*
*/
import * as React from 'react';
import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
import { ButtonPassThroughOptions } from '../button/button';
import { ComponentHooks } from '../componentbase/componentbase';
import { CSSTransitionProps } from '../csstransition';
import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext';
import { PassThroughOptions } from '../passthrough';
import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { FormEvent } from '../ts-helpers';
import { IconType, PassThroughType } from '../utils';
import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
export declare type AutoCompletePassThroughType<T> = PassThroughType<T, AutoCompletePassThroughMethodOptions>;
export declare type AutoCompletePassThroughTransitionType = ReactCSSTransitionProps | ((options: AutoCompletePassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface AutoCompletePassThroughMethodOptions {
props: AutoCompleteProps;
state: AutoCompleteState;
context: AutoCompleteContext;
}
/**
* Custom change event.
* @see {@link AutoCompleteProps.onChange}
* @extends {FormEvent}
* @event
*/
interface AutoCompleteChangeEvent<T = any> extends FormEvent<T> {
value: T;
}
/**
* Custom select event with generic type support
* @see {@link AutoCompleteProps.onSelect}
* @event
*/
interface AutoCompleteSelectEvent<T = any> {
/**
* Browser event
*/
originalEvent: React.SyntheticEvent;
/**
* Selected option value
*/
value: T extends any[] ? T[number] : T;
}
/**
* Custom unselect event extending the select event
* @see {@link AutoCompleteProps.onUnselect}
* @extends {AutoCompleteSelectEvent}
* @event
*/
interface AutoCompleteUnselectEvent<T = any> extends AutoCompleteSelectEvent<T> {}
/**
* Custom click event.
* @see {@link AutoCompleteProps.onDropdownClick}
* @event
*/
interface AutoCompleteDropdownClickEvent {
/**
* Browser event
*/
originalEvent: React.SyntheticEvent;
/**
* Current value of the input field
*/
query: string;
}
/**
* Custom complete method event.
* @see {@link AutoCompleteProps.completeMethod}
* @event
*/
interface AutoCompleteCompleteEvent {
/**
* Browser event
*/
originalEvent: React.SyntheticEvent;
/**
* Value to search with
*/
query: string;
}
/**
* Custom passthrough(pt) options.
* @see {@link AutoCompleteProps.pt}
*/
export interface AutoCompletePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the root's DOM element.
*/
footer?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the input's DOM element.
*/
input?: InputTextPassThroughOptions;
/**
* Uses to pass attributes to the container's DOM element.
*/
container?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
/**
* Uses to pass attributes to the token's DOM element.
*/
token?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the token label's DOM element.
*/
tokenLabel?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the remove token icon's DOM element.
*/
removeTokenIcon?: AutoCompletePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the input token's DOM element.
*/
inputToken?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: AutoCompletePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
dropdownButton?: ButtonPassThroughOptions;
/**
* Uses to pass attributes to the panel's DOM element.
*/
panel?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptions}
*/
virtualScroller?: VirtualScrollerPassThroughOptions;
/**
* Uses to pass attributes to the list's DOM element.
*/
list?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
/**
* Uses to pass attributes to the item group's DOM element.
*/
itemGroup?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the item's DOM element.
*/
item?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the empty message's DOM element.
*/
emptyMessage?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes tooltip's DOM element.
* @type {TooltipPassThroughOptions}
*/
tooltip?: TooltipPassThroughOptions;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control React Transition API.
*/
transition?: AutoCompletePassThroughTransitionType;
}
/**
* Defines current inline state in AutoComplete component.
*/
export interface AutoCompleteState {
/**
* Current id state as a string.
*/
id: string;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current overlay visible state as a boolean.
* @defaultValue false
*/
overlayVisible: boolean;
/**
* Current search state as a boolean.
* @defaultValue false
*/
searching: boolean;
}
/**
* Defines current options in AutoComplete component.
*/
export interface AutoCompleteContext {
/**
* Current selection state of the item as a boolean.
* @defaultValue false
*/
selected: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLSpanElement can be used in this component.
* @group Properties
*/
export interface AutoCompleteProps<T = any, M extends boolean = false> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref' | 'value'> {
/**
* Unique identifier of the element.
*/
id?: string | undefined;
/**
* DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
* @defaultValue document.body
*/
appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
/**
* When present, it specifies that the component should automatically get focus on load.
* @defaultValue false
*/
autoFocus?: boolean | undefined;
/**
* When enabled, highlights the first item in the list by default.
* @defaultValue false
*/
autoHighlight?: boolean | undefined;
/**
* Style class of the component.
*/
className?: string | undefined;
/**
* Delay between keystrokes to wait before sending a query.
* @defaultValue 300
*/
delay?: number | undefined;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false
*/
invalid?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Specifies the input variant of the component.
* @defaultValue outlined
*/
variant?: 'outlined' | 'filled' | undefined;
/**
* Displays a button next to the input field when enabled.
* @defaultValue false
*/
dropdown?: boolean | undefined;
/**
* ARIA label for the dropdown button. Defaults to placeholder then Locale "choose" label.
* @defaultValue Choose
*/
dropdownAriaLabel?: string | undefined;
/**
* Focus the input field when the dropdown button is clicked if enabled.
* @defaultValue true
*/
dropdownAutoFocus?: boolean | undefined;
/**
* Icon of the dropdown.
*/
dropdownIcon?: IconType<AutoCompleteProps<T>> | undefined;
/**
* Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
* @defaultValue blank
*/
dropdownMode?: 'blank' | 'current' | undefined;
/**
* Text to display when there is no data. Defaults to global value in i18n translation configuration.
* @defaultValue No results found.
*/
emptyMessage?: string | undefined;
/**
* Field of a suggested object to resolve and display.
*/
field?: string | undefined;
/**
* When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.
* @defaultValue false
*/
forceSelection?: boolean | undefined;
/**
* Style class of the input field.
*/
inputClassName?: string | undefined;
/**
* Identifier of the input element.
*/
inputId?: string | undefined;
/**
* Reference of the input element.
*/
inputRef?: React.Ref<HTMLInputElement> | undefined;
/**
* Inline style of the input field.
*/
inputStyle?: React.CSSProperties | undefined;
/**
* Icon of the loader.
*/
loadingIcon?: IconType<AutoCompleteProps> | undefined;
/**
* Template of a list item.
*/
itemTemplate?: React.ReactNode | ((suggestion: T, index: number) => React.ReactNode);
/**
* Maximum number of characters to initiate a search.
*/
maxLength?: number | undefined;
/**
* Minimum number of characters to initiate a search.
* @defaultValue 1
*/
minLength?: number | undefined;
/**
* Specifies if multiple values can be selected.
* @defaultValue false
*/
multiple?: M;
/**
* Number of maximum options that can be selected.
*/
selectionLimit?: number | undefined;
/**
* Name of the input element.
*/
name?: string | undefined;
/**
* Property name or getter function that refers to the children options of option group.
*/
optionGroupChildren?: string | undefined;
/**
* Property name or getter function to use as the label of an option group.
*/
optionGroupLabel?: string | undefined;
/**
* Template of an option group item.
*/
optionGroupTemplate?: React.ReactNode | ((suggestion: T, index: number) => React.ReactNode);
/**
* Style class of the overlay panel element.
*/
panelClassName?: string | undefined;
/**
* Template of the panel footer.
*/
panelFooterTemplate?: React.ReactNode | ((props: AutoCompleteProps, hide: () => void) => React.ReactNode);
/**
* Inline style of the overlay panel element.
*/
panelStyle?: React.CSSProperties | undefined;
/**
* Hint text for the input field.
*/
placeholder?: string | undefined;
/**
* When present, it specifies that the input cannot be typed.
* @defaultValue false
*/
readOnly?: boolean | undefined;
/**
* When present, it specifies that an input field must be filled out before submitting the form.
* @defaultValue false
*/
required?: boolean | undefined;
/**
* Icon of the remove chip element in multiple mode.
*/
removeTokenIcon?: IconType<AutoCompleteProps> | undefined;
/**
* Maximum height of the suggestions panel.
* @defaultValue 200px
*/
scrollHeight?: string | undefined;
/**
* Template of a selected item. In multiple mode, it is used to customize the chips using a ReactNode. In single mode, it is used to customize the text using a string.
*/
selectedItemTemplate?: React.ReactNode | string | undefined | null | ((value: T) => React.ReactNode | string | undefined | null);
/**
* Whether to show the empty message or not.
* @defaultValue false
*/
showEmptyMessage?: boolean | undefined;
/**
* Size of the input field.
*/
size?: number | undefined;
/**
* Inline style of the component.
*/
style?: React.CSSProperties | undefined;
/**
* An array of suggestions to display.
*/
suggestions?: (T extends any[] ? T[number] : T)[];
/**
* Index of the element in tabbing order.
*/
tabIndex?: number | undefined;
/**
* Content of the tooltip.
*/
tooltip?: string | undefined;
/**
* Configuration of the tooltip, refer to the tooltip documentation for more information.
* @type {TooltipOptions}
*/
tooltipOptions?: TooltipOptions | undefined;
/**
* The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
* @type {CSSTransitionProps}
*/
transitionOptions?: CSSTransitionProps | undefined;
/**
* Type of the input element.
*/
type?: string | undefined;
/**
* Value of the component.
*/
value?: M extends true ? T[] : T | string | number | readonly string[] | undefined;
/**
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
* @type {VirtualScrollerProps}
*/
virtualScrollerOptions?: VirtualScrollerProps | undefined;
/**
* Callback to invoke to search for suggestions.
* @param {AutoCompleteCompleteEvent} event - Custom complete method event.
*/
completeMethod?(event: AutoCompleteCompleteEvent): void;
/**
* Callback to invoke when autocomplete loses focus.
* @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
*/
onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
/**
* Callback to invoke when autocomplete value changes.
* @param {AutoCompleteChangeEvent} event - Custom change event.
*/
onChange?(event: AutoCompleteChangeEvent<M extends true ? T[] : T>): void;
/**
* Callback to invoke when input is cleared by the user.
* @param {React.SyntheticEvent} event - Browser event.
*/
onClear?(event: React.SyntheticEvent): void;
/**
* Callback to invoke on click.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onClick?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke on right-click.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke on double click.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onDblClick?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke to when dropdown button is clicked.
* @param {AutoCompleteDropdownClickEvent} event - Custom click event.
*/
onDropdownClick?(event: AutoCompleteDropdownClickEvent): void;
/**
* Callback to invoke when autocomplete gets focus.
* @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
*/
onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
/**
* Callback to invoke when overlay panel becomes hidden.
*/
onHide?(): void;
/**
* Callback to invoke to when a key is pressed.
* @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
*/
onKeyPress?(event: React.KeyboardEvent<HTMLInputElement>): void;
/**
* Callback to invoke to when a key is released.
* @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
*/
onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
/**
* Callback to invoke to when a mouse button is pressed.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
/**
* Callback to invoke when a suggestion is selected.
* @param {AutoCompleteSelectEvent} event - Custom select event.
*/
onSelect?(event: AutoCompleteSelectEvent<T>): void;
/**
* Callback to invoke when overlay panel becomes visible.
*/
onShow?(): void;
/**
* Callback to invoke when a selected value is removed.
* @param {AutoCompleteUnselectEvent} event - Custom unselect event.
*/
onUnselect?(event: AutoCompleteUnselectEvent<T>): void;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AutoCompletePassThroughOptions}
*/
pt?: AutoCompletePassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - AutoComplete**
*
* _AutoComplete is an input component that provides real-time suggestions while being typed._
*
* [Live Demo](https://www.primereact.org/autocomplete/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class AutoComplete<T = any, M extends boolean = false> extends React.Component<AutoCompleteProps<T, M>, any> {
/**
* Used to show the overlay.
*/
public show(): void;
/**
* Used to hide the overlay.
*/
public hide(): void;
/**
* Used to focus the component.
*/
public focus(): void;
/**
* Used to search new suggestions.
* @param {React.SyntheticEvent} event - Browser event.
* @param {string} query - Value to search with.
* @param {string} [source] - Source type, valid values are 'dropdown' and 'input'
*/
public search(event: React.SyntheticEvent, query: string, source?: 'dropdown' | 'input' | null | undefined): void;
/**
* Used to get container element.
* @return {HTMLSpanElement | null} Container element
*/
public getElement(): HTMLSpanElement | null;
/**
* Used to get input element.
* @return {InputText | null} Input element
*/
public getInput(): typeof InputText | null;
/**
* Used to get overlay element.
* @return {HTMLElement | null} Overlay element
*/
public getOverlay(): HTMLElement | null;
/**
* Used to get the options of inline virtualScroller component.
* @return {VirtualScroller | null} VirtualScroller component
*/
public getVirtualScroller(): VirtualScroller | null;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./autocomplete.cjs.js",
"module": "./autocomplete.esm.js",
"unpkg": "./autocomplete.min.js",
"types": "./autocomplete.d.ts",
"sideEffects": false
}
+258
View File
@@ -0,0 +1,258 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: function root(_ref) {
var props = _ref.props,
state = _ref.state;
return utils.classNames('p-avatar p-component', {
'p-avatar-image': utils.ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
});
},
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
var styles = "\n@layer primereact {\n .p-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n font-size: 1rem;\n }\n \n .p-avatar.p-avatar-image {\n background-color: transparent;\n }\n \n .p-avatar.p-avatar-circle {\n border-radius: 50%;\n }\n \n .p-avatar.p-avatar-circle img {\n border-radius: 50%;\n }\n \n .p-avatar .p-avatar-icon {\n font-size: 1rem;\n }\n \n .p-avatar img {\n width: 100%;\n height: 100%;\n }\n \n .p-avatar-clickable {\n cursor: pointer;\n }\n}\n";
var AvatarBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Avatar',
className: null,
icon: null,
image: null,
imageAlt: 'avatar',
imageFallback: 'default',
label: null,
onImageError: null,
shape: 'square',
size: 'normal',
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AvatarBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(null);
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
imageFailed = _React$useState2[0],
setImageFailed = _React$useState2[1];
var _React$useState3 = React__namespace.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
nested = _React$useState4[0],
setNested = _React$useState4[1];
var _AvatarBase$setMetaDa = AvatarBase.setMetaData({
props: props,
state: {
imageFailed: imageFailed,
nested: nested
}
}),
ptm = _AvatarBase$setMetaDa.ptm,
cx = _AvatarBase$setMetaDa.cx,
isUnstyled = _AvatarBase$setMetaDa.isUnstyled;
componentbase.useHandleStyle(AvatarBase.css.styles, isUnstyled, {
name: 'avatar'
});
var createContent = function createContent() {
if (utils.ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
var imageProps = mergeProps({
src: props.image,
onError: onImageError
}, ptm('image'));
return /*#__PURE__*/React__namespace.createElement("img", _extends({
alt: props.imageAlt
}, imageProps));
} else if (props.label) {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
} else if (props.icon) {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
return utils.IconUtils.getJSXIcon(props.icon, _objectSpread({}, iconProps), {
props: props
});
}
return null;
};
var onImageError = function onImageError(event) {
if (props.imageFallback === 'default') {
if (!props.onImageError) {
// fallback to label or icon
setImageFailed(true);
event.target.src = null;
}
} else {
// try fallback as an image
event.target.src = props.imageFallback;
}
props.onImageError && props.onImageError(event);
};
React__namespace.useEffect(function () {
var nested = utils.DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
setNested(nested);
}, []);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root', {
imageFailed: imageFailed
}))
}, AvatarBase.getOtherProps(props), ptm('root'));
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React__namespace.createElement("div", rootProps, content, props.children);
});
Avatar.displayName = 'Avatar';
exports.Avatar = Avatar;
File diff suppressed because one or more lines are too long
+158
View File
@@ -0,0 +1,158 @@
/**
*
* Avatar represents people using icons, labels and images.
*
* [Live Demo](https://www.primereact.org/avatar)
*
* @module avatar
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { IconType, PassThroughType } from '../utils';
export declare type AvatarPassThroughType<T> = PassThroughType<T, AvatarPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface AvatarPassThroughMethodOptions {
props: AvatarProps;
state: AvatarState;
}
/**
* Defines current inline state in Avatar component.
*/
export interface AvatarState {
/**
* Current imageFailed state as a boolean.
* @defaultValue false
*/
imageFailed: boolean;
/**
* Current state that indicates whether the Avatar component is nested within an AvatarGroup component.
* @defaultValue false
*/
isNestedInAvatarGroup: boolean;
}
/**
* Custom passthrough(pt) options.
* @see {@link AvatarProps.pt}
*/
export interface AvatarPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AvatarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the label's DOM element.
*/
label?: AvatarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the icon's DOM element.
*/
icon?: AvatarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the image's DOM element.
*/
image?: AvatarPassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
export interface AvatarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
/**
* Defines the icon to display.
*/
icon?: IconType<AvatarProps> | undefined;
/**
* Defines the image to display.
*/
image?: string | undefined;
/**
* It specifies an alternate text for an image, if the image cannot be displayed.
* @defaultValue avatar
*/
imageAlt?: string | undefined;
/**
* Defines a fallback image or URL if the main image fails to load. If "default" will fallback to label then icon.
* @defaultValue default
*/
imageFallback?: 'default' | string | undefined;
/**
* Defines the text to display.
*/
label?: string | undefined;
/**
* Shape of the element.
* @defaultValue square
*/
shape?: 'square' | 'circle' | undefined;
/**
* Size of the element.
* @defaultValue normal
*/
size?: 'normal' | 'large' | 'xlarge' | undefined;
/**
* Template of the content.
*/
template?: React.ReactNode | ((props: AvatarProps) => React.ReactNode);
/**
* This event is triggered if an error occurs while loading an image file.
* @param {React.SyntheticEvent} event - Browser event.
*/
onImageError?(event: React.SyntheticEvent): void;
/**
* Callback to invoke on click.
* @param {React.MouseEvent<HTMLElement>} event - Browser event.
*/
onClick?(event: React.MouseEvent<HTMLElement>): void;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AvatarPassThroughOptions}
*/
pt?: AvatarPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - Avatar**
*
* _Avatar represents people using icons, labels and images._
*
* [Live Demo](https://www.primereact.org/avatar/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class Avatar extends React.Component<AvatarProps, any> {
/**
* Used to get container element.
* @return {HTMLDivElement | null} Container element
*/
public getElement(): HTMLDivElement | null;
}
+234
View File
@@ -0,0 +1,234 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { classNames, ObjectUtils, DomHandler, IconUtils } from 'primereact/utils';
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: function root(_ref) {
var props = _ref.props,
state = _ref.state;
return classNames('p-avatar p-component', {
'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
});
},
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
var styles = "\n@layer primereact {\n .p-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n font-size: 1rem;\n }\n \n .p-avatar.p-avatar-image {\n background-color: transparent;\n }\n \n .p-avatar.p-avatar-circle {\n border-radius: 50%;\n }\n \n .p-avatar.p-avatar-circle img {\n border-radius: 50%;\n }\n \n .p-avatar .p-avatar-icon {\n font-size: 1rem;\n }\n \n .p-avatar img {\n width: 100%;\n height: 100%;\n }\n \n .p-avatar-clickable {\n cursor: pointer;\n }\n}\n";
var AvatarBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Avatar',
className: null,
icon: null,
image: null,
imageAlt: 'avatar',
imageFallback: 'default',
label: null,
onImageError: null,
shape: 'square',
size: 'normal',
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Avatar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AvatarBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
imageFailed = _React$useState2[0],
setImageFailed = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
nested = _React$useState4[0],
setNested = _React$useState4[1];
var _AvatarBase$setMetaDa = AvatarBase.setMetaData({
props: props,
state: {
imageFailed: imageFailed,
nested: nested
}
}),
ptm = _AvatarBase$setMetaDa.ptm,
cx = _AvatarBase$setMetaDa.cx,
isUnstyled = _AvatarBase$setMetaDa.isUnstyled;
useHandleStyle(AvatarBase.css.styles, isUnstyled, {
name: 'avatar'
});
var createContent = function createContent() {
if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
var imageProps = mergeProps({
src: props.image,
onError: onImageError
}, ptm('image'));
return /*#__PURE__*/React.createElement("img", _extends({
alt: props.imageAlt
}, imageProps));
} else if (props.label) {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React.createElement("span", labelProps, props.label);
} else if (props.icon) {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
return IconUtils.getJSXIcon(props.icon, _objectSpread({}, iconProps), {
props: props
});
}
return null;
};
var onImageError = function onImageError(event) {
if (props.imageFallback === 'default') {
if (!props.onImageError) {
// fallback to label or icon
setImageFailed(true);
event.target.src = null;
}
} else {
// try fallback as an image
event.target.src = props.imageFallback;
}
props.onImageError && props.onImageError(event);
};
React.useEffect(function () {
var nested = DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
setNested(nested);
}, []);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root', {
imageFailed: imageFailed
}))
}, AvatarBase.getOtherProps(props), ptm('root'));
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React.createElement("div", rootProps, content, props.children);
});
Avatar.displayName = 'Avatar';
export { Avatar };
File diff suppressed because one or more lines are too long
+257
View File
@@ -0,0 +1,257 @@
this.primereact = this.primereact || {};
this.primereact.avatar = (function (exports, React, api, componentbase, hooks, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: function root(_ref) {
var props = _ref.props,
state = _ref.state;
return utils.classNames('p-avatar p-component', {
'p-avatar-image': utils.ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge',
'p-avatar-clickable': !!props.onClick
});
},
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
var styles = "\n@layer primereact {\n .p-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n font-size: 1rem;\n }\n \n .p-avatar.p-avatar-image {\n background-color: transparent;\n }\n \n .p-avatar.p-avatar-circle {\n border-radius: 50%;\n }\n \n .p-avatar.p-avatar-circle img {\n border-radius: 50%;\n }\n \n .p-avatar .p-avatar-icon {\n font-size: 1rem;\n }\n \n .p-avatar img {\n width: 100%;\n height: 100%;\n }\n \n .p-avatar-clickable {\n cursor: pointer;\n }\n}\n";
var AvatarBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Avatar',
className: null,
icon: null,
image: null,
imageAlt: 'avatar',
imageFallback: 'default',
label: null,
onImageError: null,
shape: 'square',
size: 'normal',
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AvatarBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(null);
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
imageFailed = _React$useState2[0],
setImageFailed = _React$useState2[1];
var _React$useState3 = React__namespace.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
nested = _React$useState4[0],
setNested = _React$useState4[1];
var _AvatarBase$setMetaDa = AvatarBase.setMetaData({
props: props,
state: {
imageFailed: imageFailed,
nested: nested
}
}),
ptm = _AvatarBase$setMetaDa.ptm,
cx = _AvatarBase$setMetaDa.cx,
isUnstyled = _AvatarBase$setMetaDa.isUnstyled;
componentbase.useHandleStyle(AvatarBase.css.styles, isUnstyled, {
name: 'avatar'
});
var createContent = function createContent() {
if (utils.ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
var imageProps = mergeProps({
src: props.image,
onError: onImageError
}, ptm('image'));
return /*#__PURE__*/React__namespace.createElement("img", _extends({
alt: props.imageAlt
}, imageProps));
} else if (props.label) {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
} else if (props.icon) {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
return utils.IconUtils.getJSXIcon(props.icon, _objectSpread({}, iconProps), {
props: props
});
}
return null;
};
var onImageError = function onImageError(event) {
if (props.imageFallback === 'default') {
if (!props.onImageError) {
// fallback to label or icon
setImageFailed(true);
event.target.src = null;
}
} else {
// try fallback as an image
event.target.src = props.imageFallback;
}
props.onImageError && props.onImageError(event);
};
React__namespace.useEffect(function () {
var nested = utils.DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
setNested(nested);
}, []);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root', {
imageFailed: imageFailed
}))
}, AvatarBase.getOtherProps(props), ptm('root'));
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props) : createContent();
return /*#__PURE__*/React__namespace.createElement("div", rootProps, content, props.children);
});
Avatar.displayName = 'Avatar';
exports.Avatar = Avatar;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);
+1
View File
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./avatar.cjs.js",
"module": "./avatar.esm.js",
"unpkg": "./avatar.min.js",
"types": "./avatar.d.ts",
"sideEffects": false
}
+80
View File
@@ -0,0 +1,80 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-avatar-group p-component'
};
var styles = "\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n";
var AvatarGroupBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AvatarGroupBase.getProps(inProps, context);
var _AvatarGroupBase$setM = AvatarGroupBase.setMetaData({
props: props
}),
ptm = _AvatarGroupBase$setM.ptm,
cx = _AvatarGroupBase$setM.cx,
isUnstyled = _AvatarGroupBase$setM.isUnstyled;
componentbase.useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, {
name: 'avatargroup'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, AvatarGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", rootProps, props.children);
});
AvatarGroup.displayName = 'AvatarGroup';
exports.AvatarGroup = AvatarGroup;
+1
View File
@@ -0,0 +1 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/componentbase"),a=require("primereact/hooks"),n=require("primereact/utils");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=s(e),u=t.ComponentBase.extend({defaultProps:{__TYPE:"AvatarGroup",style:null,className:null,children:void 0},css:{classes:{root:"p-avatar-group p-component"},styles:"\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n"}}),l=o.forwardRef((function(e,s){var l=a.useMergeProps(),p=o.useContext(r.PrimeReactContext),c=u.getProps(e,p),i=u.setMetaData({props:c}),m=i.ptm,f=i.cx;t.useHandleStyle(u.css.styles,i.isUnstyled,{name:"avatargroup"});var v=o.useRef(null);o.useImperativeHandle(s,(function(){return{props:c,getElement:function(){return v.current}}}));var d=l({ref:v,style:c.style,className:n.classNames(c.className,f("root"))},u.getOtherProps(c),m("root"));return o.createElement("div",d,c.children)}));l.displayName="AvatarGroup",exports.AvatarGroup=l;
+82
View File
@@ -0,0 +1,82 @@
/**
*
* A set of Avatars can be displayed together using the AvatarGroup component.
*
* [Live Demo](https://www.primereact.org/avatar/)
*
* @module avatargroup
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { PassThroughType } from '../utils/utils';
export declare type AvatarGroupPassThroughType<T> = PassThroughType<T, AvatarGroupPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface AvatarGroupPassThroughMethodOptions {}
/**
* Custom passthrough(pt) options.
* @see {@link AvatarGroupProps.pt}
*/
export interface AvatarGroupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: AvatarGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {AvatarGroupPassThroughOptions}
*/
pt?: AvatarGroupPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - AvatarGroup**
*
* _A set of Avatars can be displayed together using the AvatarGroup component._
*
* [Live Demo](https://www.primereact.org/avatargroup/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> {
/**
* Used to get container element.
* @return {HTMLDivElement | null} Container element
*/
public getElement(): HTMLDivElement | null;
}
+56
View File
@@ -0,0 +1,56 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { classNames } from 'primereact/utils';
var classes = {
root: 'p-avatar-group p-component'
};
var styles = "\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n";
var AvatarGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AvatarGroup = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = AvatarGroupBase.getProps(inProps, context);
var _AvatarGroupBase$setM = AvatarGroupBase.setMetaData({
props: props
}),
ptm = _AvatarGroupBase$setM.ptm,
cx = _AvatarGroupBase$setM.cx,
isUnstyled = _AvatarGroupBase$setM.isUnstyled;
useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, {
name: 'avatargroup'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, AvatarGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, props.children);
});
AvatarGroup.displayName = 'AvatarGroup';
export { AvatarGroup };
+1
View File
@@ -0,0 +1 @@
import*as r from"react";import{PrimeReactContext as e}from"primereact/api";import{ComponentBase as t,useHandleStyle as a}from"primereact/componentbase";import{useMergeProps as n}from"primereact/hooks";import{classNames as o}from"primereact/utils";var s=t.extend({defaultProps:{__TYPE:"AvatarGroup",style:null,className:null,children:void 0},css:{classes:{root:"p-avatar-group p-component"},styles:"\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n"}}),p=r.forwardRef((function(t,p){var l=n(),m=r.useContext(e),i=s.getProps(t,m),c=s.setMetaData({props:i}),u=c.ptm,f=c.cx;a(s.css.styles,c.isUnstyled,{name:"avatargroup"});var v=r.useRef(null);r.useImperativeHandle(p,(function(){return{props:i,getElement:function(){return v.current}}}));var d=l({ref:v,style:i.style,className:o(i.className,f("root"))},s.getOtherProps(i),u("root"));return r.createElement("div",d,i.children)}));p.displayName="AvatarGroup";export{p as AvatarGroup};
+79
View File
@@ -0,0 +1,79 @@
this.primereact = this.primereact || {};
this.primereact.avatargroup = (function (exports, React, api, componentbase, hooks, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-avatar-group p-component'
};
var styles = "\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n";
var AvatarGroupBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'AvatarGroup',
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = AvatarGroupBase.getProps(inProps, context);
var _AvatarGroupBase$setM = AvatarGroupBase.setMetaData({
props: props
}),
ptm = _AvatarGroupBase$setM.ptm,
cx = _AvatarGroupBase$setM.cx,
isUnstyled = _AvatarGroupBase$setM.isUnstyled;
componentbase.useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, {
name: 'avatargroup'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, AvatarGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", rootProps, props.children);
});
AvatarGroup.displayName = 'AvatarGroup';
exports.AvatarGroup = AvatarGroup;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);
+1
View File
@@ -0,0 +1 @@
this.primereact=this.primereact||{},this.primereact.avatargroup=function(e,r,t,a,n,s){"use strict";function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=o(r),p=a.ComponentBase.extend({defaultProps:{__TYPE:"AvatarGroup",style:null,className:null,children:void 0},css:{classes:{root:"p-avatar-group p-component"},styles:"\n@layer primereact {\n .p-avatar-group .p-avatar + .p-avatar {\n margin-left: -1rem;\n }\n \n .p-avatar-group {\n display: flex;\n align-items: center;\n }\n}\n"}}),u=c.forwardRef((function(e,r){var o=n.useMergeProps(),u=c.useContext(t.PrimeReactContext),l=p.getProps(e,u),i=p.setMetaData({props:l}),m=i.ptm,f=i.cx;a.useHandleStyle(p.css.styles,i.isUnstyled,{name:"avatargroup"});var v=c.useRef(null);c.useImperativeHandle(r,(function(){return{props:l,getElement:function(){return v.current}}}));var d=o({ref:v,style:l.style,className:s.classNames(l.className,f("root"))},p.getOtherProps(l),m("root"));return c.createElement("div",d,l.children)}));return u.displayName="AvatarGroup",e.AvatarGroup=u,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./avatargroup.cjs.js",
"module": "./avatargroup.esm.js",
"unpkg": "./avatargroup.min.js",
"types": "./avatargroup.d.ts",
"sideEffects": false
}
+129
View File
@@ -0,0 +1,129 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes = {
root: function root(_ref) {
var props = _ref.props;
return utils.classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
componentbase.useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
exports.Badge = Badge;
+1
View File
@@ -0,0 +1 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("primereact/api"),t=require("primereact/componentbase"),n=require("primereact/hooks"),o=require("primereact/utils");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=a(e);function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function l(e,r){if("object"!=s(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=s(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}function u(e){var r=l(e,"string");return"symbol"==s(r)?r:r+""}function c(e,r,t){return(r=u(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var p=t.ComponentBase.extend({defaultProps:{__TYPE:"Badge",__parentMetadata:null,value:null,severity:null,size:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){var r=e.props;return o.classNames("p-badge p-component",c({"p-badge-no-gutter":o.ObjectUtils.isNotEmpty(r.value)&&1===String(r.value).length,"p-badge-dot":o.ObjectUtils.isEmpty(r.value),"p-badge-lg":"large"===r.size,"p-badge-xl":"xlarge"===r.size},"p-badge-".concat(r.severity),null!==r.severity))}},styles:"\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n"}});function b(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?b(Object(t),!0).forEach((function(r){c(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var f=i.memo(i.forwardRef((function(e,a){var s=n.useMergeProps(),l=i.useContext(r.PrimeReactContext),u=p.getProps(e,l),c=p.setMetaData(d({props:u},u.__parentMetadata)),b=c.ptm,f=c.cx;t.useHandleStyle(p.css.styles,c.isUnstyled,{name:"badge"});var m=i.useRef(null);i.useImperativeHandle(a,(function(){return{props:u,getElement:function(){return m.current}}}));var g=s({ref:m,style:u.style,className:o.classNames(u.className,f("root"))},p.getOtherProps(u),b("root"));return i.createElement("span",g,u.value)})));f.displayName="Badge",exports.Badge=f;
+99
View File
@@ -0,0 +1,99 @@
/**
*
* Badge represents people using icons, labels and images.
*
* [Live Demo](https://www.primereact.org/badge)
*
* @module badge
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { PassThroughType } from '../utils/utils';
export declare type BadgePassThroughType<T> = PassThroughType<T, BadgePassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface BadgePassThroughMethodOptions {
props: BadgeProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link BadgeProps.pt}
*/
export interface BadgePassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: BadgePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines valid properties in Badge component. In addition to these, all properties of HTMLSpanElement can be used in this component.
* @group Properties
*/
export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
/**
* Value to display inside the badge.
*
*/
value?: any | null | undefined;
/**
* Severity type of the badge.
* @defaultValue null
*/
severity?: 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null | undefined;
/**
* Size of the badge, valid options are "large" and "xlarge".
* @defaultValue null
*/
size?: 'normal' | 'large' | 'xlarge' | null | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {BadgePassThroughOptions}
*/
pt?: BadgePassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - Badge**
*
* _Badge represents people using icons, labels and images._
*
* [Live Demo](https://www.primereact.org/badge/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class Badge extends React.Component<BadgeProps, any> {
/**
* Used to get container element.
* @return {HTMLSpanElement | null} Container element
*/
public getElement(): HTMLSpanElement | null;
}
+105
View File
@@ -0,0 +1,105 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { classNames, ObjectUtils } from 'primereact/utils';
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
export { Badge };
+1
View File
@@ -0,0 +1 @@
import*as e from"react";import{PrimeReactContext as r}from"primereact/api";import{ComponentBase as t,useHandleStyle as n}from"primereact/componentbase";import{useMergeProps as o}from"primereact/hooks";import{classNames as a,ObjectUtils as i}from"primereact/utils";function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function p(e,r){if("object"!=l(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=l(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}function s(e){var r=p(e,"string");return"symbol"==l(r)?r:r+""}function u(e,r,t){return(r=s(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var c=t.extend({defaultProps:{__TYPE:"Badge",__parentMetadata:null,value:null,severity:null,size:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){var r=e.props;return a("p-badge p-component",u({"p-badge-no-gutter":i.isNotEmpty(r.value)&&1===String(r.value).length,"p-badge-dot":i.isEmpty(r.value),"p-badge-lg":"large"===r.size,"p-badge-xl":"xlarge"===r.size},"p-badge-".concat(r.severity),null!==r.severity))}},styles:"\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n"}});function m(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?m(Object(t),!0).forEach((function(r){u(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var d=e.memo(e.forwardRef((function(t,i){var l=o(),p=e.useContext(r),s=c.getProps(t,p),u=c.setMetaData(b({props:s},s.__parentMetadata)),m=u.ptm,d=u.cx;n(c.css.styles,u.isUnstyled,{name:"badge"});var f=e.useRef(null);e.useImperativeHandle(i,(function(){return{props:s,getElement:function(){return f.current}}}));var g=l({ref:f,style:s.style,className:a(s.className,d("root"))},c.getOtherProps(s),m("root"));return e.createElement("span",g,s.value)})));d.displayName="Badge";export{d as Badge};
+128
View File
@@ -0,0 +1,128 @@
this.primereact = this.primereact || {};
this.primereact.badge = (function (exports, React, api, componentbase, hooks, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes = {
root: function root(_ref) {
var props = _ref.props;
return utils.classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
componentbase.useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
exports.Badge = Badge;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);
+1
View File
@@ -0,0 +1 @@
this.primereact=this.primereact||{},this.primereact.badge=function(e,t,r,n,a,o){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=i(t);function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function u(e,t){if("object"!=l(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=l(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function c(e){var t=u(e,"string");return"symbol"==l(t)?t:t+""}function p(e,t,r){return(t=c(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var b=n.ComponentBase.extend({defaultProps:{__TYPE:"Badge",__parentMetadata:null,value:null,severity:null,size:null,style:null,className:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return o.classNames("p-badge p-component",p({"p-badge-no-gutter":o.ObjectUtils.isNotEmpty(t.value)&&1===String(t.value).length,"p-badge-dot":o.ObjectUtils.isEmpty(t.value),"p-badge-lg":"large"===t.size,"p-badge-xl":"xlarge"===t.size},"p-badge-".concat(t.severity),null!==t.severity))}},styles:"\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n"}});function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var m=s.memo(s.forwardRef((function(e,t){var i=a.useMergeProps(),l=s.useContext(r.PrimeReactContext),u=b.getProps(e,l),c=b.setMetaData(f({props:u},u.__parentMetadata)),p=c.ptm,d=c.cx;n.useHandleStyle(b.css.styles,c.isUnstyled,{name:"badge"});var m=s.useRef(null);s.useImperativeHandle(t,(function(){return{props:u,getElement:function(){return m.current}}}));var g=i({ref:m,style:u.style,className:o.classNames(u.className,d("root"))},b.getOtherProps(u),p("root"));return s.createElement("span",g,u.value)})));return m.displayName="Badge",e.Badge=m,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./badge.cjs.js",
"module": "./badge.esm.js",
"unpkg": "./badge.min.js",
"types": "./badge.d.ts",
"sideEffects": false
}
+281
View File
@@ -0,0 +1,281 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var PrimeReact = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var portal = require('primereact/portal');
var utils = require('primereact/utils');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-blockui-container',
mask: function mask(_ref) {
var props = _ref.props;
return utils.classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
});
}
};
var styles = "\n@layer primereact {\n .p-blockui-container {\n position: relative;\n }\n \n .p-blockui {\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-blockui.p-component-overlay {\n position: absolute;\n }\n \n .p-blockui-document.p-component-overlay {\n position: fixed;\n }\n}\n";
var BlockUIBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'BlockUI',
autoZIndex: true,
baseZIndex: 0,
blocked: false,
className: null,
containerClassName: null,
containerStyle: null,
fullScreen: false,
id: null,
onBlocked: null,
onUnblocked: null,
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BlockUI = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
var props = BlockUIBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.blocked),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var elementRef = React__namespace.useRef(null);
var maskRef = React__namespace.useRef(null);
var activeElementRef = React__namespace.useRef(null);
var _BlockUIBase$setMetaD = BlockUIBase.setMetaData({
props: props
}),
ptm = _BlockUIBase$setMetaD.ptm,
cx = _BlockUIBase$setMetaD.cx,
isUnstyled = _BlockUIBase$setMetaD.isUnstyled;
componentbase.useHandleStyle(BlockUIBase.css.styles, isUnstyled, {
name: 'blockui'
});
var block = function block() {
setVisibleState(true);
activeElementRef.current = document.activeElement;
};
var unblock = function unblock() {
!isUnstyled() && utils.DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
if (utils.DomHandler.hasCSSAnimation(maskRef.current) > 0) {
maskRef.current.addEventListener('animationend', function () {
removeMask();
});
} else {
removeMask();
}
};
var removeMask = function removeMask() {
utils.ZIndexUtils.clear(maskRef.current);
setVisibleState(false);
if (props.fullScreen) {
utils.DomHandler.unblockBodyScroll();
activeElementRef.current && activeElementRef.current.focus();
}
props.onUnblocked && props.onUnblocked();
};
var onPortalMounted = function onPortalMounted() {
if (props.fullScreen) {
utils.DomHandler.blockBodyScroll();
activeElementRef.current && activeElementRef.current.blur();
}
if (props.autoZIndex) {
var key = props.fullScreen ? 'modal' : 'overlay';
utils.ZIndexUtils.set(key, maskRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact__default["default"].zIndex[key]);
}
props.onBlocked && props.onBlocked();
};
hooks.useMountEffect(function () {
visibleState && block();
});
hooks.useUpdateEffect(function () {
props.blocked ? block() : unblock();
}, [props.blocked]);
hooks.useUnmountEffect(function () {
props.fullScreen && utils.DomHandler.unblockBodyScroll();
utils.ZIndexUtils.clear(maskRef.current);
});
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
block: block,
unblock: unblock,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createMask = function createMask() {
if (visibleState) {
var appendTo = props.fullScreen ? document.body : 'self';
var maskProps = mergeProps({
className: utils.classNames(props.className, cx('mask')),
style: _objectSpread(_objectSpread({}, props.style), {}, {
position: props.fullScreen ? 'fixed' : 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
})
}, ptm('mask'));
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props) : null;
var _mask = /*#__PURE__*/React__namespace.createElement("div", _extends({
ref: maskRef
}, maskProps), content);
return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
element: _mask,
appendTo: appendTo,
onMounted: onPortalMounted
});
}
return null;
};
var mask = createMask();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.containerStyle,
className: utils.classNames(props.containerClassName, cx('root')),
'aria-busy': props.blocked
}, BlockUIBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", rootProps, props.children, mask);
});
BlockUI.displayName = 'BlockUI';
exports.BlockUI = BlockUI;
File diff suppressed because one or more lines are too long
+142
View File
@@ -0,0 +1,142 @@
/**
*
* BlockUI represents people using icons, labels and images.
*
* [Live Demo](https://www.primereact.org/blockui)
*
* @module blockui
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { PassThroughType } from '../utils/utils';
export declare type BlockUIPassThroughType<T> = PassThroughType<T, BlockUIPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface BlockUIPassThroughMethodOptions {
props: BlockUIProps;
state: BlockUIState;
}
/**
* Custom passthrough(pt) options.
* @see {@link BlockUIProps.pt}
*/
export interface BlockUIPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: BlockUIPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the mask's DOM element.
*/
mask?: BlockUIPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines current inline state in BlockUI component.
*/
export interface BlockUIState {
/**
* Current blocked state as a boolean.
* @defaultValue false
*/
blocked: boolean;
}
/**
* Defines valid properties in BlockUI component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
/**
* Whether to automatically manage layering.
* @defaultValue true
*/
autoZIndex?: boolean | undefined;
/**
* Base zIndex value to use in layering.
* @defaultValue 0
*/
baseZIndex?: number | undefined;
/**
* Controls the blocked state.
* @defaultValue false
*/
blocked?: boolean | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Style class of the container element.
*/
containerClassName?: string | undefined;
/**
* Inline style of the container element.
*/
containerStyle?: React.CSSProperties | undefined;
/**
* When enabled, the whole document gets blocked.
* @defaultValue false
*/
fullScreen?: boolean | undefined;
/**
* Template of mask.
*/
template?: React.ReactNode | ((props: BlockUIProps) => React.ReactNode) | null | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {BlockUIPassThroughOptions}
*/
pt?: BlockUIPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
/**
* Fired when the element gets blocked.
*/
onBlocked?(): void;
/**
* Fired when the element gets unblocked.
*/
onUnblocked?(): void;
}
/**
* **PrimeReact - BlockUI**
*
* _BlockUI represents people using icons, labels and images._
*
* [Live Demo](https://www.primereact.org/blockui/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class BlockUI extends React.Component<BlockUIProps, any> {
public block(): void;
public unblock(): void;
/**
* Used to get container element.
* @return {HTMLDivElement | null} Container element
*/
public getElement(): HTMLDivElement | null;
}
+254
View File
@@ -0,0 +1,254 @@
'use client';
import * as React from 'react';
import PrimeReact, { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
import { Portal } from 'primereact/portal';
import { classNames, DomHandler, ZIndexUtils, ObjectUtils } from 'primereact/utils';
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-blockui-container',
mask: function mask(_ref) {
var props = _ref.props;
return classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
});
}
};
var styles = "\n@layer primereact {\n .p-blockui-container {\n position: relative;\n }\n \n .p-blockui {\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-blockui.p-component-overlay {\n position: absolute;\n }\n \n .p-blockui-document.p-component-overlay {\n position: fixed;\n }\n}\n";
var BlockUIBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'BlockUI',
autoZIndex: true,
baseZIndex: 0,
blocked: false,
className: null,
containerClassName: null,
containerStyle: null,
fullScreen: false,
id: null,
onBlocked: null,
onUnblocked: null,
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BlockUI = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BlockUIBase.getProps(inProps, context);
var _React$useState = React.useState(props.blocked),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var elementRef = React.useRef(null);
var maskRef = React.useRef(null);
var activeElementRef = React.useRef(null);
var _BlockUIBase$setMetaD = BlockUIBase.setMetaData({
props: props
}),
ptm = _BlockUIBase$setMetaD.ptm,
cx = _BlockUIBase$setMetaD.cx,
isUnstyled = _BlockUIBase$setMetaD.isUnstyled;
useHandleStyle(BlockUIBase.css.styles, isUnstyled, {
name: 'blockui'
});
var block = function block() {
setVisibleState(true);
activeElementRef.current = document.activeElement;
};
var unblock = function unblock() {
!isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
if (DomHandler.hasCSSAnimation(maskRef.current) > 0) {
maskRef.current.addEventListener('animationend', function () {
removeMask();
});
} else {
removeMask();
}
};
var removeMask = function removeMask() {
ZIndexUtils.clear(maskRef.current);
setVisibleState(false);
if (props.fullScreen) {
DomHandler.unblockBodyScroll();
activeElementRef.current && activeElementRef.current.focus();
}
props.onUnblocked && props.onUnblocked();
};
var onPortalMounted = function onPortalMounted() {
if (props.fullScreen) {
DomHandler.blockBodyScroll();
activeElementRef.current && activeElementRef.current.blur();
}
if (props.autoZIndex) {
var key = props.fullScreen ? 'modal' : 'overlay';
ZIndexUtils.set(key, maskRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact.zIndex[key]);
}
props.onBlocked && props.onBlocked();
};
useMountEffect(function () {
visibleState && block();
});
useUpdateEffect(function () {
props.blocked ? block() : unblock();
}, [props.blocked]);
useUnmountEffect(function () {
props.fullScreen && DomHandler.unblockBodyScroll();
ZIndexUtils.clear(maskRef.current);
});
React.useImperativeHandle(ref, function () {
return {
props: props,
block: block,
unblock: unblock,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createMask = function createMask() {
if (visibleState) {
var appendTo = props.fullScreen ? document.body : 'self';
var maskProps = mergeProps({
className: classNames(props.className, cx('mask')),
style: _objectSpread(_objectSpread({}, props.style), {}, {
position: props.fullScreen ? 'fixed' : 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
})
}, ptm('mask'));
var content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null;
var _mask = /*#__PURE__*/React.createElement("div", _extends({
ref: maskRef
}, maskProps), content);
return /*#__PURE__*/React.createElement(Portal, {
element: _mask,
appendTo: appendTo,
onMounted: onPortalMounted
});
}
return null;
};
var mask = createMask();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.containerStyle,
className: classNames(props.containerClassName, cx('root')),
'aria-busy': props.blocked
}, BlockUIBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("div", rootProps, props.children, mask);
});
BlockUI.displayName = 'BlockUI';
export { BlockUI };
File diff suppressed because one or more lines are too long
+279
View File
@@ -0,0 +1,279 @@
this.primereact = this.primereact || {};
this.primereact.blockui = (function (exports, React, PrimeReact, componentbase, hooks, portal, utils) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
root: 'p-blockui-container',
mask: function mask(_ref) {
var props = _ref.props;
return utils.classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
});
}
};
var styles = "\n@layer primereact {\n .p-blockui-container {\n position: relative;\n }\n \n .p-blockui {\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-blockui.p-component-overlay {\n position: absolute;\n }\n \n .p-blockui-document.p-component-overlay {\n position: fixed;\n }\n}\n";
var BlockUIBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'BlockUI',
autoZIndex: true,
baseZIndex: 0,
blocked: false,
className: null,
containerClassName: null,
containerStyle: null,
fullScreen: false,
id: null,
onBlocked: null,
onUnblocked: null,
style: null,
template: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BlockUI = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
var props = BlockUIBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.blocked),
_React$useState2 = _slicedToArray(_React$useState, 2),
visibleState = _React$useState2[0],
setVisibleState = _React$useState2[1];
var elementRef = React__namespace.useRef(null);
var maskRef = React__namespace.useRef(null);
var activeElementRef = React__namespace.useRef(null);
var _BlockUIBase$setMetaD = BlockUIBase.setMetaData({
props: props
}),
ptm = _BlockUIBase$setMetaD.ptm,
cx = _BlockUIBase$setMetaD.cx,
isUnstyled = _BlockUIBase$setMetaD.isUnstyled;
componentbase.useHandleStyle(BlockUIBase.css.styles, isUnstyled, {
name: 'blockui'
});
var block = function block() {
setVisibleState(true);
activeElementRef.current = document.activeElement;
};
var unblock = function unblock() {
!isUnstyled() && utils.DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
if (utils.DomHandler.hasCSSAnimation(maskRef.current) > 0) {
maskRef.current.addEventListener('animationend', function () {
removeMask();
});
} else {
removeMask();
}
};
var removeMask = function removeMask() {
utils.ZIndexUtils.clear(maskRef.current);
setVisibleState(false);
if (props.fullScreen) {
utils.DomHandler.unblockBodyScroll();
activeElementRef.current && activeElementRef.current.focus();
}
props.onUnblocked && props.onUnblocked();
};
var onPortalMounted = function onPortalMounted() {
if (props.fullScreen) {
utils.DomHandler.blockBodyScroll();
activeElementRef.current && activeElementRef.current.blur();
}
if (props.autoZIndex) {
var key = props.fullScreen ? 'modal' : 'overlay';
utils.ZIndexUtils.set(key, maskRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact__default["default"].zIndex[key]);
}
props.onBlocked && props.onBlocked();
};
hooks.useMountEffect(function () {
visibleState && block();
});
hooks.useUpdateEffect(function () {
props.blocked ? block() : unblock();
}, [props.blocked]);
hooks.useUnmountEffect(function () {
props.fullScreen && utils.DomHandler.unblockBodyScroll();
utils.ZIndexUtils.clear(maskRef.current);
});
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
block: block,
unblock: unblock,
getElement: function getElement() {
return elementRef.current;
}
};
});
var createMask = function createMask() {
if (visibleState) {
var appendTo = props.fullScreen ? document.body : 'self';
var maskProps = mergeProps({
className: utils.classNames(props.className, cx('mask')),
style: _objectSpread(_objectSpread({}, props.style), {}, {
position: props.fullScreen ? 'fixed' : 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%'
})
}, ptm('mask'));
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props) : null;
var _mask = /*#__PURE__*/React__namespace.createElement("div", _extends({
ref: maskRef
}, maskProps), content);
return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
element: _mask,
appendTo: appendTo,
onMounted: onPortalMounted
});
}
return null;
};
var mask = createMask();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.containerStyle,
className: utils.classNames(props.containerClassName, cx('root')),
'aria-busy': props.blocked
}, BlockUIBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("div", rootProps, props.children, mask);
});
BlockUI.displayName = 'BlockUI';
exports.BlockUI = BlockUI;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.portal, primereact.utils);
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./blockui.cjs.js",
"module": "./blockui.esm.js",
"unpkg": "./blockui.min.js",
"types": "./blockui.d.ts",
"sideEffects": false
}
+386
View File
@@ -0,0 +1,386 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var chevronright = require('primereact/icons/chevronright');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
icon: 'p-menuitem-icon',
action: 'p-menuitem-link',
label: 'p-menuitem-text',
home: function home(_ref) {
var _className = _ref._className,
disabled = _ref.disabled;
return utils.classNames('p-breadcrumb-home p-menuitem', {
'p-disabled': disabled
}, _className);
},
separatorIcon: 'p-breadcrumb-chevron',
separator: 'p-menuitem-separator',
menuitem: function menuitem(_ref2) {
var item = _ref2.item;
return utils.classNames('p-menuitem', item.className, {
'p-disabled': item.disabled
});
},
menu: 'p-breadcrumb-list',
root: 'p-breadcrumb p-component'
};
var styles = "\n@layer primereact {\n .p-breadcrumb {\n overflow-x: auto;\n display: flex;\n }\n\n .p-breadcrumb ol {\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .p-breadcrumb .p-menuitem-text {\n line-height: 1;\n }\n\n .p-breadcrumb .p-menuitem-link {\n text-decoration: none;\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb .p-menuitem-separator {\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb::-webkit-scrollbar {\n display: none;\n }\n}\n";
var BreadCrumbBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'BreadCrumb',
id: null,
model: null,
home: null,
separatorIcon: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadCrumb = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BreadCrumbBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var elementRef = React__namespace.useRef(null);
var _BreadCrumbBase$setMe = BreadCrumbBase.setMetaData({
props: props,
state: {
id: idState
}
}),
ptm = _BreadCrumbBase$setMe.ptm,
cx = _BreadCrumbBase$setMe.cx,
isUnstyled = _BreadCrumbBase$setMe.isUnstyled;
componentbase.useHandleStyle(BreadCrumbBase.css.styles, isUnstyled, {
name: 'breadcrumb'
});
var itemClick = function itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var isCurrent = function isCurrent(url) {
var lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return url === lastPath ? 'page' : undefined;
};
var createHome = function createHome() {
var home = props.home;
if (home) {
if (home.visible === false) {
return null;
}
var _icon = home.icon,
target = home.target,
url = home.url,
disabled = home.disabled,
style = home.style,
_className = home.className,
template = home.template,
_label = home.label;
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = utils.IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
props: props
});
var actionProps = mergeProps({
href: url || '#',
className: cx('action'),
'aria-disabled': disabled,
'aria-current': isCurrent(url),
target: target,
onClick: function onClick(event) {
return itemClick(event, home);
}
}, ptm('action'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = _label && /*#__PURE__*/React__namespace.createElement("span", labelProps, _label);
var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label);
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, home);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = utils.ObjectUtils.getJSXElement(template, home, defaultContentOptions);
}
var key = idState + '_home';
var menuitemProps = mergeProps({
id: key,
className: cx('home', {
_className: _className,
disabled: disabled
}),
style: style
}, ptm('home'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
}
return null;
};
var createSeparator = function createSeparator(index) {
var key = idState + '_sep_' + index;
var separatorIconProps = mergeProps({
className: cx('separatorIcon'),
'aria-hidden': 'true'
}, ptm('separatorIcon'));
var icon = props.separatorIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, separatorIconProps);
var separatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, separatorIconProps), {
props: props
});
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, separatorProps, {
key: key
}), separatorIcon);
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = item.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, item.label);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
target: item.target,
'aria-current': isCurrent(item.url),
onClick: function onClick(event) {
return itemClick(event, item);
},
'aria-disabled': item.disabled,
tabIndex: item.disabled ? -1 : undefined
}, ptm('action'));
var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var key = item.id || idState + '_' + index;
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
item: item
}),
style: item.style
}, ptm('menuitem'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
};
var createMenuitems = function createMenuitems() {
if (props.model) {
var _items = props.model.map(function (item, index) {
if (item.visible === false) {
return null;
}
var menuitem = createMenuitem(item, index);
var separator = index === props.model.length - 1 ? null : createSeparator(index);
var key = idState + '_' + index;
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
key: key
}, menuitem, separator);
});
return _items;
}
return null;
};
hooks.useMountEffect(function () {
if (!idState) {
setIdState(utils.UniqueComponentId());
}
});
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var home = createHome();
var items = createMenuitems();
var separator = createSeparator('home');
var menuProps = mergeProps({
className: cx('menu')
}, ptm('menu'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: utils.classNames(props.className, cx('root')),
style: props.style
}, BreadCrumbBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("nav", rootProps, /*#__PURE__*/React__namespace.createElement("ol", menuProps, home, home && !!(items !== null && items !== void 0 && items.length) && separator, items));
}));
BreadCrumb.displayName = 'BreadCrumb';
exports.BreadCrumb = BreadCrumb;
File diff suppressed because one or more lines are too long
+124
View File
@@ -0,0 +1,124 @@
/**
*
* Breadcrumb provides contextual information about page hierarchy.
*
* [Live Demo](https://www.primereact.org/breadcrumb/)
*
* @module breadcrumb
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { MenuItem } from '../menuitem';
import { PassThroughOptions } from '../passthrough';
import { IconType, PassThroughType } from '../utils/utils';
export declare type BreadCrumbPassThroughType<T> = PassThroughType<T, BreadCrumbPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface BreadCrumbPassThroughMethodOptions {
props: BreadCrumbProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link BreadCrumbProps.pt}
*/
export interface BreadCrumbPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLElement>>;
/**
* Uses to pass attributes to the list's DOM element.
*/
menu?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
/**
* Uses to pass attributes to the list item's DOM element.
*/
menuitem?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the action's DOM element.
*/
action?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
/**
* Uses to pass attributes to the icon's DOM element.
*/
icon?: BreadCrumbPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the label's DOM element.
*/
label?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the separator's DOM element.
*/
separator?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
/**
* Uses to pass attributes to the separator icon's DOM element.
*/
separatorIcon?: BreadCrumbPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines valid properties in BreadCrumb component. In addition to these, all properties of HTMLElement can be used in this component.
* @group Properties
*/
export interface BreadCrumbProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'> {
/**
* An array of menuitems.
*/
model?: MenuItem[] | undefined;
/**
* MenuItem configuration for the home icon.
*/
home?: MenuItem | undefined;
/**
* Icon of the separator.
*/
separatorIcon?: IconType<BreadCrumbProps> | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {BreadCrumbPassThroughOptions}
*/
pt?: BreadCrumbPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - BreadCrumb**
*
* _Breadcrumb provides contextual information about page hierarchy._
*
* [Live Demo](https://www.primereact.org/breadcrumb/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> {
/**
* Used to get container element.
* @return {HTMLElement | null} Container element
*/
public getElement(): HTMLElement | null;
}
+362
View File
@@ -0,0 +1,362 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps, useMountEffect } from 'primereact/hooks';
import { ChevronRightIcon } from 'primereact/icons/chevronright';
import { classNames, UniqueComponentId, IconUtils, ObjectUtils } from 'primereact/utils';
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
icon: 'p-menuitem-icon',
action: 'p-menuitem-link',
label: 'p-menuitem-text',
home: function home(_ref) {
var _className = _ref._className,
disabled = _ref.disabled;
return classNames('p-breadcrumb-home p-menuitem', {
'p-disabled': disabled
}, _className);
},
separatorIcon: 'p-breadcrumb-chevron',
separator: 'p-menuitem-separator',
menuitem: function menuitem(_ref2) {
var item = _ref2.item;
return classNames('p-menuitem', item.className, {
'p-disabled': item.disabled
});
},
menu: 'p-breadcrumb-list',
root: 'p-breadcrumb p-component'
};
var styles = "\n@layer primereact {\n .p-breadcrumb {\n overflow-x: auto;\n display: flex;\n }\n\n .p-breadcrumb ol {\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .p-breadcrumb .p-menuitem-text {\n line-height: 1;\n }\n\n .p-breadcrumb .p-menuitem-link {\n text-decoration: none;\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb .p-menuitem-separator {\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb::-webkit-scrollbar {\n display: none;\n }\n}\n";
var BreadCrumbBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'BreadCrumb',
id: null,
model: null,
home: null,
separatorIcon: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadCrumb = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BreadCrumbBase.getProps(inProps, context);
var _React$useState = React.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var elementRef = React.useRef(null);
var _BreadCrumbBase$setMe = BreadCrumbBase.setMetaData({
props: props,
state: {
id: idState
}
}),
ptm = _BreadCrumbBase$setMe.ptm,
cx = _BreadCrumbBase$setMe.cx,
isUnstyled = _BreadCrumbBase$setMe.isUnstyled;
useHandleStyle(BreadCrumbBase.css.styles, isUnstyled, {
name: 'breadcrumb'
});
var itemClick = function itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var isCurrent = function isCurrent(url) {
var lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return url === lastPath ? 'page' : undefined;
};
var createHome = function createHome() {
var home = props.home;
if (home) {
if (home.visible === false) {
return null;
}
var _icon = home.icon,
target = home.target,
url = home.url,
disabled = home.disabled,
style = home.style,
_className = home.className,
template = home.template,
_label = home.label;
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
props: props
});
var actionProps = mergeProps({
href: url || '#',
className: cx('action'),
'aria-disabled': disabled,
'aria-current': isCurrent(url),
target: target,
onClick: function onClick(event) {
return itemClick(event, home);
}
}, ptm('action'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label);
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, home);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
}
var key = idState + '_home';
var menuitemProps = mergeProps({
id: key,
className: cx('home', {
_className: _className,
disabled: disabled
}),
style: style
}, ptm('home'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
}
return null;
};
var createSeparator = function createSeparator(index) {
var key = idState + '_sep_' + index;
var separatorIconProps = mergeProps({
className: cx('separatorIcon'),
'aria-hidden': 'true'
}, ptm('separatorIcon'));
var icon = props.separatorIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, separatorIconProps);
var separatorIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, separatorIconProps), {
props: props
});
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React.createElement("li", _extends({}, separatorProps, {
key: key
}), separatorIcon);
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = item.label && /*#__PURE__*/React.createElement("span", labelProps, item.label);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
target: item.target,
'aria-current': isCurrent(item.url),
onClick: function onClick(event) {
return itemClick(event, item);
},
'aria-disabled': item.disabled,
tabIndex: item.disabled ? -1 : undefined
}, ptm('action'));
var content = /*#__PURE__*/React.createElement("a", actionProps, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var key = item.id || idState + '_' + index;
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
item: item
}),
style: item.style
}, ptm('menuitem'));
return /*#__PURE__*/React.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
};
var createMenuitems = function createMenuitems() {
if (props.model) {
var _items = props.model.map(function (item, index) {
if (item.visible === false) {
return null;
}
var menuitem = createMenuitem(item, index);
var separator = index === props.model.length - 1 ? null : createSeparator(index);
var key = idState + '_' + index;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, menuitem, separator);
});
return _items;
}
return null;
};
useMountEffect(function () {
if (!idState) {
setIdState(UniqueComponentId());
}
});
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var home = createHome();
var items = createMenuitems();
var separator = createSeparator('home');
var menuProps = mergeProps({
className: cx('menu')
}, ptm('menu'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: classNames(props.className, cx('root')),
style: props.style
}, BreadCrumbBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("nav", rootProps, /*#__PURE__*/React.createElement("ol", menuProps, home, home && !!(items !== null && items !== void 0 && items.length) && separator, items));
}));
BreadCrumb.displayName = 'BreadCrumb';
export { BreadCrumb };
File diff suppressed because one or more lines are too long
+384
View File
@@ -0,0 +1,384 @@
this.primereact = this.primereact || {};
this.primereact.breadcrumb = (function (exports, React, api, componentbase, hooks, chevronright, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var classes = {
icon: 'p-menuitem-icon',
action: 'p-menuitem-link',
label: 'p-menuitem-text',
home: function home(_ref) {
var _className = _ref._className,
disabled = _ref.disabled;
return utils.classNames('p-breadcrumb-home p-menuitem', {
'p-disabled': disabled
}, _className);
},
separatorIcon: 'p-breadcrumb-chevron',
separator: 'p-menuitem-separator',
menuitem: function menuitem(_ref2) {
var item = _ref2.item;
return utils.classNames('p-menuitem', item.className, {
'p-disabled': item.disabled
});
},
menu: 'p-breadcrumb-list',
root: 'p-breadcrumb p-component'
};
var styles = "\n@layer primereact {\n .p-breadcrumb {\n overflow-x: auto;\n display: flex;\n }\n\n .p-breadcrumb ol {\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n .p-breadcrumb .p-menuitem-text {\n line-height: 1;\n }\n\n .p-breadcrumb .p-menuitem-link {\n text-decoration: none;\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb .p-menuitem-separator {\n display: flex;\n align-items: center;\n }\n\n .p-breadcrumb::-webkit-scrollbar {\n display: none;\n }\n}\n";
var BreadCrumbBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'BreadCrumb',
id: null,
model: null,
home: null,
separatorIcon: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadCrumb = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BreadCrumbBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.id),
_React$useState2 = _slicedToArray(_React$useState, 2),
idState = _React$useState2[0],
setIdState = _React$useState2[1];
var elementRef = React__namespace.useRef(null);
var _BreadCrumbBase$setMe = BreadCrumbBase.setMetaData({
props: props,
state: {
id: idState
}
}),
ptm = _BreadCrumbBase$setMe.ptm,
cx = _BreadCrumbBase$setMe.cx,
isUnstyled = _BreadCrumbBase$setMe.isUnstyled;
componentbase.useHandleStyle(BreadCrumbBase.css.styles, isUnstyled, {
name: 'breadcrumb'
});
var itemClick = function itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (!item.url) {
event.preventDefault();
event.stopPropagation();
}
};
var isCurrent = function isCurrent(url) {
var lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
return url === lastPath ? 'page' : undefined;
};
var createHome = function createHome() {
var home = props.home;
if (home) {
if (home.visible === false) {
return null;
}
var _icon = home.icon,
target = home.target,
url = home.url,
disabled = home.disabled,
style = home.style,
_className = home.className,
template = home.template,
_label = home.label;
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var icon = utils.IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
props: props
});
var actionProps = mergeProps({
href: url || '#',
className: cx('action'),
'aria-disabled': disabled,
'aria-current': isCurrent(url),
target: target,
onClick: function onClick(event) {
return itemClick(event, home);
}
}, ptm('action'));
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = _label && /*#__PURE__*/React__namespace.createElement("span", labelProps, _label);
var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label);
if (template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, home);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = utils.ObjectUtils.getJSXElement(template, home, defaultContentOptions);
}
var key = idState + '_home';
var menuitemProps = mergeProps({
id: key,
className: cx('home', {
_className: _className,
disabled: disabled
}),
style: style
}, ptm('home'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
}
return null;
};
var createSeparator = function createSeparator(index) {
var key = idState + '_sep_' + index;
var separatorIconProps = mergeProps({
className: cx('separatorIcon'),
'aria-hidden': 'true'
}, ptm('separatorIcon'));
var icon = props.separatorIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, separatorIconProps);
var separatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, separatorIconProps), {
props: props
});
var separatorProps = mergeProps({
id: key,
className: cx('separator'),
role: 'separator'
}, ptm('separator'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, separatorProps, {
key: key
}), separatorIcon);
};
var createMenuitem = function createMenuitem(item, index) {
if (item.visible === false) {
return null;
}
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
var label = item.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, item.label);
var actionProps = mergeProps({
href: item.url || '#',
className: cx('action'),
target: item.target,
'aria-current': isCurrent(item.url),
onClick: function onClick(event) {
return itemClick(event, item);
},
'aria-disabled': item.disabled,
tabIndex: item.disabled ? -1 : undefined
}, ptm('action'));
var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, label);
if (item.template) {
var defaultContentOptions = {
onClick: function onClick(event) {
return itemClick(event, item);
},
className: 'p-menuitem-link',
labelClassName: 'p-menuitem-text',
element: content,
props: props
};
content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
}
var key = item.id || idState + '_' + index;
var menuitemProps = mergeProps({
id: key,
className: cx('menuitem', {
item: item
}),
style: item.style
}, ptm('menuitem'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, menuitemProps, {
key: key
}), content);
};
var createMenuitems = function createMenuitems() {
if (props.model) {
var _items = props.model.map(function (item, index) {
if (item.visible === false) {
return null;
}
var menuitem = createMenuitem(item, index);
var separator = index === props.model.length - 1 ? null : createSeparator(index);
var key = idState + '_' + index;
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
key: key
}, menuitem, separator);
});
return _items;
}
return null;
};
hooks.useMountEffect(function () {
if (!idState) {
setIdState(utils.UniqueComponentId());
}
});
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var home = createHome();
var items = createMenuitems();
var separator = createSeparator('home');
var menuProps = mergeProps({
className: cx('menu')
}, ptm('menu'));
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: utils.classNames(props.className, cx('root')),
style: props.style
}, BreadCrumbBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("nav", rootProps, /*#__PURE__*/React__namespace.createElement("ol", menuProps, home, home && !!(items !== null && items !== void 0 && items.length) && separator, items));
}));
BreadCrumb.displayName = 'BreadCrumb';
exports.BreadCrumb = BreadCrumb;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.icons.chevronright, primereact.utils);
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./breadcrumb.cjs.js",
"module": "./breadcrumb.esm.js",
"unpkg": "./breadcrumb.min.js",
"types": "./breadcrumb.d.ts",
"sideEffects": false
}
+309
View File
@@ -0,0 +1,309 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
var spinner = require('primereact/icons/spinner');
var ripple = require('primereact/ripple');
var tooltip = require('primereact/tooltip');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes$1 = {
root: function root(_ref) {
var props = _ref.props;
return utils.classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$1,
styles: styles
}
});
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread$1({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
componentbase.useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
var classes = {
icon: function icon(_ref) {
var props = _ref.props;
return utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
},
loadingIcon: function loadingIcon(_ref2) {
var props = _ref2.props,
className = _ref2.className;
return utils.classNames(className, {
'p-button-loading-icon': props.loading
});
},
label: 'p-button-label p-c',
root: function root(_ref3) {
var props = _ref3.props,
size = _ref3.size,
disabled = _ref3.disabled;
return utils.classNames('p-button p-component', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, "p-button-loading-".concat(props.iconPos), props.loading && props.label), "p-button-".concat(size), size), "p-button-".concat(props.severity), props.severity), 'p-button-plain', props.plain));
}
};
var ButtonBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Button',
__parentMetadata: null,
badge: null,
badgeClassName: null,
className: null,
children: undefined,
disabled: false,
icon: null,
iconPos: 'left',
label: null,
link: false,
loading: false,
loadingIcon: null,
outlined: false,
plain: false,
raised: false,
rounded: false,
severity: null,
size: null,
text: false,
tooltip: null,
tooltipOptions: null,
visible: true
},
css: {
classes: classes
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Button = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = ButtonBase.getProps(inProps, context);
var disabled = props.disabled || props.loading;
var metaData = _objectSpread(_objectSpread({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: disabled
}
});
var _ButtonBase$setMetaDa = ButtonBase.setMetaData(metaData),
ptm = _ButtonBase$setMetaDa.ptm,
cx = _ButtonBase$setMetaDa.cx,
isUnstyled = _ButtonBase$setMetaDa.isUnstyled;
componentbase.useHandleStyle(ButtonBase.css.styles, isUnstyled, {
name: 'button',
styled: true
});
var elementRef = React__namespace.useRef(ref);
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
var createIcon = function createIcon() {
var className = utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
var iconsProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
className = utils.classNames(className, {
'p-button-loading-icon': props.loading
});
var loadingIconProps = mergeProps({
className: cx('loadingIcon', {
className: className
})
}, ptm('loadingIcon'));
var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
})) : props.icon;
return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
props: props
});
};
var createLabel = function createLabel() {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
if (props.label) {
return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
}
return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", _extends({}, labelProps, {
dangerouslySetInnerHTML: {
__html: '&nbsp;'
}
}));
};
var createBadge = function createBadge() {
if (props.badge) {
var badgeProps = mergeProps({
className: utils.classNames(props.badgeClassName),
value: props.badge,
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('badge'));
return /*#__PURE__*/React__namespace.createElement(Badge, badgeProps, props.badge);
}
return null;
};
var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var icon = createIcon();
var label = createLabel();
var badge = createBadge();
var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
var rootProps = mergeProps({
ref: elementRef,
'aria-label': defaultAriaLabel,
'data-pc-autofocus': props.autoFocus,
className: utils.classNames(props.className, cx('root', {
size: size,
disabled: disabled
})),
disabled: disabled
}, ButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Button.displayName = 'Button';
exports.Button = Button;
File diff suppressed because one or more lines are too long
+199
View File
@@ -0,0 +1,199 @@
/**
*
* Button is an extension to standard button element with icons and theming.
*
* [Live Demo](https://www.primereact.org/button/)
*
* @module button
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { IconType, PassThroughType } from '../utils';
export declare type ButtonPassThroughType<T> = PassThroughType<T, ButtonPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface ButtonPassThroughMethodOptions {
props: ButtonProps;
context: ButtonContext;
}
/**
* Custom passthrough(pt) options.
* @see {@link ButtonProps.pt}
*/
export interface ButtonPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ButtonPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
/**
* Uses to pass attributes to the loading icon's DOM element.
*/
loadingIcon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
/**
* Uses to pass attributes to the icon's DOM element.
*/
icon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
/**
* Uses to pass attributes to the label's DOM element.
*/
label?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the badge's DOM element.
*/
badge?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the Tooltip component.
* @see {@link TooltipPassThroughOptions}
*/
tooltip?: TooltipPassThroughOptions;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines current options in Button component.
*/
export interface ButtonContext {
/**
* Current disabled state of the element as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.
* @group Properties
*/
export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled' | 'ref'> {
/**
* Value of the badge.
*/
badge?: string | undefined;
/**
* Style class of the badge.
*/
badgeClassName?: string | undefined;
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* When present, it specifies that the element should be disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Name of the icon or JSX.Element for icon.
*/
icon?: IconType<ButtonProps> | undefined;
/**
* Add a textual class to the button without a background initially.
* @defaultValue false
*/
text?: boolean | undefined;
/**
* Add a circular border radius to the button.
* @defaultValue false
*/
rounded?: boolean | undefined;
/**
* Add a shadow to indicate elevation.
* @defaultValue false
*/
raised?: boolean | undefined;
/**
* Add a border class without a background initially.
* @defaultValue false
*/
outlined?: boolean | undefined;
/**
* Add a link style to the button.
* @defaultValue false
*/
link?: boolean | undefined;
/**
* Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "help", "contrast".
*/
severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'contrast' | undefined;
/**
* Defines the size of the button, valid values are "small" and "large".
*/
size?: 'small' | 'large' | undefined;
/**
* Position of the icon, valid values are "left", "right", "top" and "bottom".
* @defaultValue left
*/
iconPos?: 'top' | 'bottom' | 'left' | 'right' | undefined;
/**
* Text of the button.
*/
label?: string | undefined;
/**
* Display loading icon of the button
* @defaultValue false
*/
loading?: boolean | undefined;
/**
* Name of the loading icon or JSX.Element for loading icon.
*/
loadingIcon?: IconType<ButtonProps> | undefined;
/**
* Add a plain textual class to the button without a background initially.
* @defaultValue false
*/
plain?: boolean | undefined;
/**
* Content of the tooltip.
*/
tooltip?: string | undefined;
/**
* Configuration of the tooltip, refer to the tooltip documentation for more information.
*/
tooltipOptions?: TooltipOptions | undefined;
/**
* When present, it specifies that the element should be visible.
* @defaultValue true
*/
visible?: boolean | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {ButtonPassThroughOptions}
*/
pt?: ButtonPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - Button**
*
* _Button is an extension to standard button element with icons and theming._
*
* [Live Demo](https://www.primereact.org/button/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class Button extends React.Component<ButtonProps, any> {}
+285
View File
@@ -0,0 +1,285 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { classNames, ObjectUtils, IconUtils } from 'primereact/utils';
import { SpinnerIcon } from 'primereact/icons/spinner';
import { Ripple } from 'primereact/ripple';
import { Tooltip } from 'primereact/tooltip';
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes$1 = {
root: function root(_ref) {
var props = _ref.props;
return classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$1,
styles: styles
}
});
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread$1({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
var classes = {
icon: function icon(_ref) {
var props = _ref.props;
return classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
},
loadingIcon: function loadingIcon(_ref2) {
var props = _ref2.props,
className = _ref2.className;
return classNames(className, {
'p-button-loading-icon': props.loading
});
},
label: 'p-button-label p-c',
root: function root(_ref3) {
var props = _ref3.props,
size = _ref3.size,
disabled = _ref3.disabled;
return classNames('p-button p-component', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, "p-button-loading-".concat(props.iconPos), props.loading && props.label), "p-button-".concat(size), size), "p-button-".concat(props.severity), props.severity), 'p-button-plain', props.plain));
}
};
var ButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Button',
__parentMetadata: null,
badge: null,
badgeClassName: null,
className: null,
children: undefined,
disabled: false,
icon: null,
iconPos: 'left',
label: null,
link: false,
loading: false,
loadingIcon: null,
outlined: false,
plain: false,
raised: false,
rounded: false,
severity: null,
size: null,
text: false,
tooltip: null,
tooltipOptions: null,
visible: true
},
css: {
classes: classes
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Button = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ButtonBase.getProps(inProps, context);
var disabled = props.disabled || props.loading;
var metaData = _objectSpread(_objectSpread({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: disabled
}
});
var _ButtonBase$setMetaDa = ButtonBase.setMetaData(metaData),
ptm = _ButtonBase$setMetaDa.ptm,
cx = _ButtonBase$setMetaDa.cx,
isUnstyled = _ButtonBase$setMetaDa.isUnstyled;
useHandleStyle(ButtonBase.css.styles, isUnstyled, {
name: 'button',
styled: true
});
var elementRef = React.useRef(ref);
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
var createIcon = function createIcon() {
var className = classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
var iconsProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
className = classNames(className, {
'p-button-loading-icon': props.loading
});
var loadingIconProps = mergeProps({
className: cx('loadingIcon', {
className: className
})
}, ptm('loadingIcon'));
var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
})) : props.icon;
return IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
props: props
});
};
var createLabel = function createLabel() {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
if (props.label) {
return /*#__PURE__*/React.createElement("span", labelProps, props.label);
}
return !props.children && !props.label && /*#__PURE__*/React.createElement("span", _extends({}, labelProps, {
dangerouslySetInnerHTML: {
__html: '&nbsp;'
}
}));
};
var createBadge = function createBadge() {
if (props.badge) {
var badgeProps = mergeProps({
className: classNames(props.badgeClassName),
value: props.badge,
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('badge'));
return /*#__PURE__*/React.createElement(Badge, badgeProps, props.badge);
}
return null;
};
var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var icon = createIcon();
var label = createLabel();
var badge = createBadge();
var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
var rootProps = mergeProps({
ref: elementRef,
'aria-label': defaultAriaLabel,
'data-pc-autofocus': props.autoFocus,
className: classNames(props.className, cx('root', {
size: size,
disabled: disabled
})),
disabled: disabled
}, ButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Button.displayName = 'Button';
export { Button };
File diff suppressed because one or more lines are too long
+305
View File
@@ -0,0 +1,305 @@
this.primereact = this.primereact || {};
this.primereact.button = (function (exports, React, api, componentbase, hooks, utils, spinner, ripple, tooltip) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
var classes$1 = {
root: function root(_ref) {
var props = _ref.props;
return utils.classNames('p-badge p-component', _defineProperty({
'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge'
}, "p-badge-".concat(props.severity), props.severity !== null));
}
};
var styles = "\n@layer primereact {\n .p-badge {\n display: inline-block;\n border-radius: 10px;\n text-align: center;\n padding: 0 .5rem;\n }\n \n .p-overlay-badge {\n position: relative;\n }\n \n .p-overlay-badge .p-badge {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%,-50%);\n transform-origin: 100% 0;\n margin: 0;\n }\n \n .p-badge-dot {\n width: .5rem;\n min-width: .5rem;\n height: .5rem;\n border-radius: 50%;\n padding: 0;\n }\n \n .p-badge-no-gutter {\n padding: 0;\n border-radius: 50%;\n }\n}\n";
var BadgeBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Badge',
__parentMetadata: null,
value: null,
severity: null,
size: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes$1,
styles: styles
}
});
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Badge = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = BadgeBase.getProps(inProps, context);
var _BadgeBase$setMetaDat = BadgeBase.setMetaData(_objectSpread$1({
props: props
}, props.__parentMetadata)),
ptm = _BadgeBase$setMetaDat.ptm,
cx = _BadgeBase$setMetaDat.cx,
isUnstyled = _BadgeBase$setMetaDat.isUnstyled;
componentbase.useHandleStyle(BadgeBase.css.styles, isUnstyled, {
name: 'badge'
});
var elementRef = React__namespace.useRef(null);
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
getElement: function getElement() {
return elementRef.current;
}
};
});
var rootProps = mergeProps({
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, BadgeBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
}));
Badge.displayName = 'Badge';
var classes = {
icon: function icon(_ref) {
var props = _ref.props;
return utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
},
loadingIcon: function loadingIcon(_ref2) {
var props = _ref2.props,
className = _ref2.className;
return utils.classNames(className, {
'p-button-loading-icon': props.loading
});
},
label: 'p-button-label p-c',
root: function root(_ref3) {
var props = _ref3.props,
size = _ref3.size,
disabled = _ref3.disabled;
return utils.classNames('p-button p-component', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label
}, "p-button-loading-".concat(props.iconPos), props.loading && props.label), "p-button-".concat(size), size), "p-button-".concat(props.severity), props.severity), 'p-button-plain', props.plain));
}
};
var ButtonBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Button',
__parentMetadata: null,
badge: null,
badgeClassName: null,
className: null,
children: undefined,
disabled: false,
icon: null,
iconPos: 'left',
label: null,
link: false,
loading: false,
loadingIcon: null,
outlined: false,
plain: false,
raised: false,
rounded: false,
severity: null,
size: null,
text: false,
tooltip: null,
tooltipOptions: null,
visible: true
},
css: {
classes: classes
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Button = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = ButtonBase.getProps(inProps, context);
var disabled = props.disabled || props.loading;
var metaData = _objectSpread(_objectSpread({
props: props
}, props.__parentMetadata), {}, {
context: {
disabled: disabled
}
});
var _ButtonBase$setMetaDa = ButtonBase.setMetaData(metaData),
ptm = _ButtonBase$setMetaDa.ptm,
cx = _ButtonBase$setMetaDa.cx,
isUnstyled = _ButtonBase$setMetaDa.isUnstyled;
componentbase.useHandleStyle(ButtonBase.css.styles, isUnstyled, {
name: 'button',
styled: true
});
var elementRef = React__namespace.useRef(ref);
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
var createIcon = function createIcon() {
var className = utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
var iconsProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
className = utils.classNames(className, {
'p-button-loading-icon': props.loading
});
var loadingIconProps = mergeProps({
className: cx('loadingIcon', {
className: className
})
}, ptm('loadingIcon'));
var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
spin: true
})) : props.icon;
return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
props: props
});
};
var createLabel = function createLabel() {
var labelProps = mergeProps({
className: cx('label')
}, ptm('label'));
if (props.label) {
return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
}
return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", _extends({}, labelProps, {
dangerouslySetInnerHTML: {
__html: '&nbsp;'
}
}));
};
var createBadge = function createBadge() {
if (props.badge) {
var badgeProps = mergeProps({
className: utils.classNames(props.badgeClassName),
value: props.badge,
unstyled: props.unstyled,
__parentMetadata: {
parent: metaData
}
}, ptm('badge'));
return /*#__PURE__*/React__namespace.createElement(Badge, badgeProps, props.badge);
}
return null;
};
var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
var sizeMapping = {
large: 'lg',
small: 'sm'
};
var size = sizeMapping[props.size];
var icon = createIcon();
var label = createLabel();
var badge = createBadge();
var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
var rootProps = mergeProps({
ref: elementRef,
'aria-label': defaultAriaLabel,
'data-pc-autofocus': props.autoFocus,
className: utils.classNames(props.className, cx('root', {
size: size,
disabled: disabled
})),
disabled: disabled
}, ButtonBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Button.displayName = 'Button';
exports.Button = Button;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils, primereact.icons.spinner, primereact.ripple, primereact.tooltip);
+1
View File
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./button.cjs.js",
"module": "./button.esm.js",
"unpkg": "./button.min.js",
"types": "./button.d.ts",
"sideEffects": false
}
+74
View File
@@ -0,0 +1,74 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-button-group p-component'
};
var ButtonGroupBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'ButtonGroup',
children: undefined
},
css: {
classes: classes
}
});
var ButtonGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = ButtonGroupBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(ref);
var _ButtonGroupBase$setM = ButtonGroupBase.setMetaData({
props: props
}),
ptm = _ButtonGroupBase$setM.ptm,
cx = _ButtonGroupBase$setM.cx,
isUnstyled = _ButtonGroupBase$setM.isUnstyled;
componentbase.useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, {
name: 'buttongroup'
});
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var isSingleButton = React__namespace.Children.count(props.children) === 1;
var rootProps = mergeProps({
ref: elementRef,
className: utils.classNames(cx('root'), {
'p-button-group-single': isSingleButton
}),
role: 'group'
}, ButtonGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.children);
}));
ButtonGroup.displayName = 'ButtonGroup';
exports.ButtonGroup = ButtonGroup;
+1
View File
@@ -0,0 +1 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/componentbase"),o=require("primereact/hooks"),n=require("primereact/utils");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=s(e),a=r.ComponentBase.extend({defaultProps:{__TYPE:"ButtonGroup",children:void 0},css:{classes:{root:"p-button-group p-component"}}}),c=u.memo(u.forwardRef((function(e,s){var c=o.useMergeProps(),i=u.useContext(t.PrimeReactContext),p=a.getProps(e,i),l=u.useRef(s),f=a.setMetaData({props:p}),d=f.ptm,m=f.cx;r.useHandleStyle(a.css.styles,f.isUnstyled,{name:"buttongroup"}),u.useEffect((function(){n.ObjectUtils.combinedRefs(l,s)}),[l,s]);var b=1===u.Children.count(p.children),g=c({ref:l,className:n.classNames(m("root"),{"p-button-group-single":b}),role:"group"},a.getOtherProps(p),d("root"));return u.createElement("span",g,p.children)})));c.displayName="ButtonGroup",exports.ButtonGroup=c;
+86
View File
@@ -0,0 +1,86 @@
/**
*
* A set of Buttons can be displayed together using the ButtonGroup component.
*
* [Live Demo](https://www.primereact.org/button/)
*
* @module buttongroup
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
export declare type ButtonGroupPassThroughOptionType = ButtonGroupPassThroughAttributes | ((options: ButtonGroupPassThroughMethodOptions) => ButtonGroupPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ButtonGroupPassThroughMethodOptions {
/**
* Defines valid properties.
*/
props: ButtonGroupProps;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link ButtonGroupProps.pt}
*/
export interface ButtonGroupPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: ButtonGroupPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ButtonGroupPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in ButtonGroup component.
*/
export interface ButtonGroupProps {
/**
* Used to pass attributes to DOM elements inside the component.
* @type {ButtonGroupPassThroughOptions}
*/
pt?: ButtonGroupPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - ButtonGroup**
*
* _ButtonGroup appears on top of the input field when focused._
*
* [Live Demo](https://www.primereact.org/button/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*
*/
export declare const ButtonGroup: React.ForwardRefExoticComponent<React.PropsWithChildren<ButtonGroupProps> & React.RefAttributes<HTMLDivElement>>;
+50
View File
@@ -0,0 +1,50 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { ObjectUtils, classNames } from 'primereact/utils';
var classes = {
root: 'p-button-group p-component'
};
var ButtonGroupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ButtonGroup',
children: undefined
},
css: {
classes: classes
}
});
var ButtonGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = ButtonGroupBase.getProps(inProps, context);
var elementRef = React.useRef(ref);
var _ButtonGroupBase$setM = ButtonGroupBase.setMetaData({
props: props
}),
ptm = _ButtonGroupBase$setM.ptm,
cx = _ButtonGroupBase$setM.cx,
isUnstyled = _ButtonGroupBase$setM.isUnstyled;
useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, {
name: 'buttongroup'
});
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var isSingleButton = React.Children.count(props.children) === 1;
var rootProps = mergeProps({
ref: elementRef,
className: classNames(cx('root'), {
'p-button-group-single': isSingleButton
}),
role: 'group'
}, ButtonGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React.createElement("span", rootProps, props.children);
}));
ButtonGroup.displayName = 'ButtonGroup';
export { ButtonGroup };
+1
View File
@@ -0,0 +1 @@
import*as e from"react";import{PrimeReactContext as r}from"primereact/api";import{ComponentBase as o,useHandleStyle as t}from"primereact/componentbase";import{useMergeProps as p}from"primereact/hooks";import{ObjectUtils as s,classNames as n}from"primereact/utils";var a=o.extend({defaultProps:{__TYPE:"ButtonGroup",children:void 0},css:{classes:{root:"p-button-group p-component"}}}),m=e.memo(e.forwardRef((function(o,m){var i=p(),c=e.useContext(r),u=a.getProps(o,c),f=e.useRef(m),l=a.setMetaData({props:u}),d=l.ptm,g=l.cx;t(a.css.styles,l.isUnstyled,{name:"buttongroup"}),e.useEffect((function(){s.combinedRefs(f,m)}),[f,m]);var h=1===e.Children.count(u.children),b=i({ref:f,className:n(g("root"),{"p-button-group-single":h}),role:"group"},a.getOtherProps(u),d("root"));return e.createElement("span",b,u.children)})));m.displayName="ButtonGroup";export{m as ButtonGroup};
+73
View File
@@ -0,0 +1,73 @@
this.primereact = this.primereact || {};
this.primereact.buttongroup = (function (exports, React, api, componentbase, hooks, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-button-group p-component'
};
var ButtonGroupBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'ButtonGroup',
children: undefined
},
css: {
classes: classes
}
});
var ButtonGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = ButtonGroupBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(ref);
var _ButtonGroupBase$setM = ButtonGroupBase.setMetaData({
props: props
}),
ptm = _ButtonGroupBase$setM.ptm,
cx = _ButtonGroupBase$setM.cx,
isUnstyled = _ButtonGroupBase$setM.isUnstyled;
componentbase.useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, {
name: 'buttongroup'
});
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var isSingleButton = React__namespace.Children.count(props.children) === 1;
var rootProps = mergeProps({
ref: elementRef,
className: utils.classNames(cx('root'), {
'p-button-group-single': isSingleButton
}),
role: 'group'
}, ButtonGroupBase.getOtherProps(props), ptm('root'));
return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.children);
}));
ButtonGroup.displayName = 'ButtonGroup';
exports.ButtonGroup = ButtonGroup;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);
+1
View File
@@ -0,0 +1 @@
this.primereact=this.primereact||{},this.primereact.buttongroup=function(e,t,r,o,n,s){"use strict";function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(t),a=o.ComponentBase.extend({defaultProps:{__TYPE:"ButtonGroup",children:void 0},css:{classes:{root:"p-button-group p-component"}}}),i=c.memo(c.forwardRef((function(e,t){var u=n.useMergeProps(),i=c.useContext(r.PrimeReactContext),p=a.getProps(e,i),l=c.useRef(t),f=a.setMetaData({props:p}),m=f.ptm,d=f.cx;o.useHandleStyle(a.css.styles,f.isUnstyled,{name:"buttongroup"}),c.useEffect((function(){s.ObjectUtils.combinedRefs(l,t)}),[l,t]);var b=1===c.Children.count(p.children),g=u({ref:l,className:s.classNames(d("root"),{"p-button-group-single":b}),role:"group"},a.getOtherProps(p),m("root"));return c.createElement("span",g,p.children)})));return i.displayName="ButtonGroup",e.ButtonGroup=i,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./buttongroup.cjs.js",
"module": "./buttongroup.esm.js",
"unpkg": "./buttongroup.min.js",
"types": "./buttongroup.d.ts",
"sideEffects": false
}
+4134
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+1048
View File
File diff suppressed because it is too large Load Diff
+4107
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+4122
View File
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./calendar.cjs.js",
"module": "./calendar.esm.js",
"unpkg": "./calendar.min.js",
"types": "./calendar.d.ts",
"sideEffects": false
}
+120
View File
@@ -0,0 +1,120 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var api = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var utils = require('primereact/utils');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-card p-component',
header: 'p-card-header',
title: 'p-card-title',
subTitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer',
body: 'p-card-body'
};
var styles = "\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n";
var CardBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Card',
id: null,
header: null,
footer: null,
title: null,
subTitle: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var Card = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = CardBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(ref);
var _CardBase$setMetaData = CardBase.setMetaData({
props: props
}),
ptm = _CardBase$setMetaData.ptm,
cx = _CardBase$setMetaData.cx,
isUnstyled = _CardBase$setMetaData.isUnstyled;
componentbase.useHandleStyle(CardBase.css.styles, isUnstyled, {
name: 'card'
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React__namespace.createElement("div", headerProps, utils.ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createBody = function createBody() {
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
var title = props.title && /*#__PURE__*/React__namespace.createElement("div", titleProps, utils.ObjectUtils.getJSXElement(props.title, props));
var subTitleProps = mergeProps({
className: cx('subTitle')
}, ptm('subTitle'));
var subTitle = props.subTitle && /*#__PURE__*/React__namespace.createElement("div", subTitleProps, utils.ObjectUtils.getJSXElement(props.subTitle, props));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var children = props.children && /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var footer = props.footer && /*#__PURE__*/React__namespace.createElement("div", footerProps, utils.ObjectUtils.getJSXElement(props.footer, props));
var bodyProps = mergeProps({
className: cx('body')
}, ptm('body'));
return /*#__PURE__*/React__namespace.createElement("div", bodyProps, title, subTitle, children, footer);
};
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, CardBase.getOtherProps(props), ptm('root'));
var header = createHeader();
var body = createBody();
return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, body);
});
Card.displayName = 'Card';
exports.Card = Card;
+1
View File
@@ -0,0 +1 @@
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/componentbase"),a=require("primereact/hooks"),l=require("primereact/utils");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=s(e),n=r.ComponentBase.extend({defaultProps:{__TYPE:"Card",id:null,header:null,footer:null,title:null,subTitle:null,style:null,className:null,children:void 0},css:{classes:{root:"p-card p-component",header:"p-card-header",title:"p-card-title",subTitle:"p-card-subtitle",content:"p-card-content",footer:"p-card-footer",body:"p-card-body"},styles:"\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n"}}),i=c.forwardRef((function(e,s){var i=a.useMergeProps(),o=c.useContext(t.PrimeReactContext),d=n.getProps(e,o),u=c.useRef(s),m=n.setMetaData({props:d}),p=m.ptm,f=m.cx;r.useHandleStyle(n.css.styles,m.isUnstyled,{name:"card"});c.useEffect((function(){l.ObjectUtils.combinedRefs(u,s)}),[u,s]);var b,y,h,v,E,O,g,j,N,P,T=i({id:d.id,ref:u,style:d.style,className:l.classNames(d.className,f("root"))},n.getOtherProps(d),p("root")),x=(b=i({className:f("header")},p("header")),d.header?c.createElement("div",b,l.ObjectUtils.getJSXElement(d.header,d)):null),C=(y=i({className:f("title")},p("title")),h=d.title&&c.createElement("div",y,l.ObjectUtils.getJSXElement(d.title,d)),v=i({className:f("subTitle")},p("subTitle")),E=d.subTitle&&c.createElement("div",v,l.ObjectUtils.getJSXElement(d.subTitle,d)),O=i({className:f("content")},p("content")),g=d.children&&c.createElement("div",O,d.children),j=i({className:f("footer")},p("footer")),N=d.footer&&c.createElement("div",j,l.ObjectUtils.getJSXElement(d.footer,d)),P=i({className:f("body")},p("body")),c.createElement("div",P,h,E,g,N));return c.createElement("div",T,x,C)}));i.displayName="Card",exports.Card=i;
+118
View File
@@ -0,0 +1,118 @@
/**
*
* Card is a flexible container component.
*
* [Live Demo](https://www.primereact.org/card/)
*
* @module card
*
*/
import * as React from 'react';
import { ComponentHooks } from '../componentbase/componentbase';
import { PassThroughOptions } from '../passthrough';
import { PassThroughType } from '../utils';
export declare type CardPassThroughType<T> = PassThroughType<T, CardPassThroughMethodOptions>;
/**
* Custom passthrough(pt) option method.
*/
export interface CardPassThroughMethodOptions {
props: CardProps;
}
/**
* Custom passthrough(pt) options.
* @see {@link CardProps.pt}
*/
export interface CardPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header's DOM element.
*/
header?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the body's DOM element.
*/
body?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the title's DOM element.
*/
title?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the subtitle's DOM element.
*/
subTitle?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the content's DOM element.
*/
content?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the footer's DOM element.
*/
footer?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Defines valid properties in Card component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
export interface CardProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'title'> {
/**
* Header of the card.
*/
header?: React.ReactNode | ((props: CardProps) => React.ReactNode);
/**
* Footer of the card.
*/
footer?: React.ReactNode | ((props: CardProps) => React.ReactNode);
/**
* Title of the card.
*/
title?: React.ReactNode | ((props: CardProps) => React.ReactNode);
/**
* Secondary title of the card.
*/
subTitle?: React.ReactNode | ((props: CardProps) => React.ReactNode);
/**
* Used to get the child elements of the component.
* @readonly
*/
children?: React.ReactNode | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {CardPassThroughOptions}
*/
pt?: CardPassThroughOptions;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* **PrimeReact - Card**
*
* _Card is a flexible container component._
*
* [Live Demo](https://www.primereact.org/card/)
* --- ---
* ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
*
* @group Component
*/
export declare class Card extends React.Component<CardProps, any> {}
+96
View File
@@ -0,0 +1,96 @@
'use client';
import * as React from 'react';
import { PrimeReactContext } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps } from 'primereact/hooks';
import { ObjectUtils, classNames } from 'primereact/utils';
var classes = {
root: 'p-card p-component',
header: 'p-card-header',
title: 'p-card-title',
subTitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer',
body: 'p-card-body'
};
var styles = "\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n";
var CardBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Card',
id: null,
header: null,
footer: null,
title: null,
subTitle: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var Card = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CardBase.getProps(inProps, context);
var elementRef = React.useRef(ref);
var _CardBase$setMetaData = CardBase.setMetaData({
props: props
}),
ptm = _CardBase$setMetaData.ptm,
cx = _CardBase$setMetaData.cx,
isUnstyled = _CardBase$setMetaData.isUnstyled;
useHandleStyle(CardBase.css.styles, isUnstyled, {
name: 'card'
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React.createElement("div", headerProps, ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createBody = function createBody() {
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
var title = props.title && /*#__PURE__*/React.createElement("div", titleProps, ObjectUtils.getJSXElement(props.title, props));
var subTitleProps = mergeProps({
className: cx('subTitle')
}, ptm('subTitle'));
var subTitle = props.subTitle && /*#__PURE__*/React.createElement("div", subTitleProps, ObjectUtils.getJSXElement(props.subTitle, props));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var children = props.children && /*#__PURE__*/React.createElement("div", contentProps, props.children);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var footer = props.footer && /*#__PURE__*/React.createElement("div", footerProps, ObjectUtils.getJSXElement(props.footer, props));
var bodyProps = mergeProps({
className: cx('body')
}, ptm('body'));
return /*#__PURE__*/React.createElement("div", bodyProps, title, subTitle, children, footer);
};
React.useEffect(function () {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: classNames(props.className, cx('root'))
}, CardBase.getOtherProps(props), ptm('root'));
var header = createHeader();
var body = createBody();
return /*#__PURE__*/React.createElement("div", rootProps, header, body);
});
Card.displayName = 'Card';
export { Card };
+1
View File
@@ -0,0 +1 @@
import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as r,useHandleStyle as a}from"primereact/componentbase";import{useMergeProps as l}from"primereact/hooks";import{ObjectUtils as o,classNames as s}from"primereact/utils";var n=r.extend({defaultProps:{__TYPE:"Card",id:null,header:null,footer:null,title:null,subTitle:null,style:null,className:null,children:void 0},css:{classes:{root:"p-card p-component",header:"p-card-header",title:"p-card-title",subTitle:"p-card-subtitle",content:"p-card-content",footer:"p-card-footer",body:"p-card-body"},styles:"\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n"}}),c=e.forwardRef((function(r,c){var i=l(),d=e.useContext(t),m=n.getProps(r,d),p=e.useRef(c),u=n.setMetaData({props:m}),f=u.ptm,h=u.cx;a(n.css.styles,u.isUnstyled,{name:"card"});e.useEffect((function(){o.combinedRefs(p,c)}),[p,c]);var b,E,y,v,N,g,T,x,J,P,S=i({id:m.id,ref:p,style:m.style,className:s(m.className,h("root"))},n.getOtherProps(m),f("root")),X=(b=i({className:h("header")},f("header")),m.header?e.createElement("div",b,o.getJSXElement(m.header,m)):null),C=(E=i({className:h("title")},f("title")),y=m.title&&e.createElement("div",E,o.getJSXElement(m.title,m)),v=i({className:h("subTitle")},f("subTitle")),N=m.subTitle&&e.createElement("div",v,o.getJSXElement(m.subTitle,m)),g=i({className:h("content")},f("content")),T=m.children&&e.createElement("div",g,m.children),x=i({className:h("footer")},f("footer")),J=m.footer&&e.createElement("div",x,o.getJSXElement(m.footer,m)),P=i({className:h("body")},f("body")),e.createElement("div",P,y,N,T,J));return e.createElement("div",S,X,C)}));c.displayName="Card";export{c as Card};
+119
View File
@@ -0,0 +1,119 @@
this.primereact = this.primereact || {};
this.primereact.card = (function (exports, React, api, componentbase, hooks, utils) {
'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var classes = {
root: 'p-card p-component',
header: 'p-card-header',
title: 'p-card-title',
subTitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer',
body: 'p-card-body'
};
var styles = "\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n";
var CardBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Card',
id: null,
header: null,
footer: null,
title: null,
subTitle: null,
style: null,
className: null,
children: undefined
},
css: {
classes: classes,
styles: styles
}
});
var Card = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(api.PrimeReactContext);
var props = CardBase.getProps(inProps, context);
var elementRef = React__namespace.useRef(ref);
var _CardBase$setMetaData = CardBase.setMetaData({
props: props
}),
ptm = _CardBase$setMetaData.ptm,
cx = _CardBase$setMetaData.cx,
isUnstyled = _CardBase$setMetaData.isUnstyled;
componentbase.useHandleStyle(CardBase.css.styles, isUnstyled, {
name: 'card'
});
var createHeader = function createHeader() {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
if (props.header) {
return /*#__PURE__*/React__namespace.createElement("div", headerProps, utils.ObjectUtils.getJSXElement(props.header, props));
}
return null;
};
var createBody = function createBody() {
var titleProps = mergeProps({
className: cx('title')
}, ptm('title'));
var title = props.title && /*#__PURE__*/React__namespace.createElement("div", titleProps, utils.ObjectUtils.getJSXElement(props.title, props));
var subTitleProps = mergeProps({
className: cx('subTitle')
}, ptm('subTitle'));
var subTitle = props.subTitle && /*#__PURE__*/React__namespace.createElement("div", subTitleProps, utils.ObjectUtils.getJSXElement(props.subTitle, props));
var contentProps = mergeProps({
className: cx('content')
}, ptm('content'));
var children = props.children && /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children);
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
var footer = props.footer && /*#__PURE__*/React__namespace.createElement("div", footerProps, utils.ObjectUtils.getJSXElement(props.footer, props));
var bodyProps = mergeProps({
className: cx('body')
}, ptm('body'));
return /*#__PURE__*/React__namespace.createElement("div", bodyProps, title, subTitle, children, footer);
};
React__namespace.useEffect(function () {
utils.ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
style: props.style,
className: utils.classNames(props.className, cx('root'))
}, CardBase.getOtherProps(props), ptm('root'));
var header = createHeader();
var body = createBody();
return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, body);
});
Card.displayName = 'Card';
exports.Card = Card;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.utils);
+1
View File
@@ -0,0 +1 @@
this.primereact=this.primereact||{},this.primereact.card=function(e,t,r,a,l,s){"use strict";function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=c(t),i=a.ComponentBase.extend({defaultProps:{__TYPE:"Card",id:null,header:null,footer:null,title:null,subTitle:null,style:null,className:null,children:void 0},css:{classes:{root:"p-card p-component",header:"p-card-header",title:"p-card-title",subTitle:"p-card-subtitle",content:"p-card-content",footer:"p-card-footer",body:"p-card-body"},styles:"\n@layer primereact {\n .p-card-header img {\n width: 100%;\n }\n}\n"}}),o=n.forwardRef((function(e,t){var c=l.useMergeProps(),o=n.useContext(r.PrimeReactContext),d=i.getProps(e,o),u=n.useRef(t),m=i.setMetaData({props:d}),p=m.ptm,f=m.cx;a.useHandleStyle(i.css.styles,m.isUnstyled,{name:"card"});n.useEffect((function(){s.ObjectUtils.combinedRefs(u,t)}),[u,t]);var b,h,y,v,E,O,g,j,N,P,T=c({id:d.id,ref:u,style:d.style,className:s.classNames(d.className,f("root"))},i.getOtherProps(d),p("root")),C=(b=c({className:f("header")},p("header")),d.header?n.createElement("div",b,s.ObjectUtils.getJSXElement(d.header,d)):null),U=(h=c({className:f("title")},p("title")),y=d.title&&n.createElement("div",h,s.ObjectUtils.getJSXElement(d.title,d)),v=c({className:f("subTitle")},p("subTitle")),E=d.subTitle&&n.createElement("div",v,s.ObjectUtils.getJSXElement(d.subTitle,d)),O=c({className:f("content")},p("content")),g=d.children&&n.createElement("div",O,d.children),j=c({className:f("footer")},p("footer")),N=d.footer&&n.createElement("div",j,s.ObjectUtils.getJSXElement(d.footer,d)),P=c({className:f("body")},p("body")),n.createElement("div",P,y,E,g,N));return n.createElement("div",T,C,U)}));return o.displayName="Card",e.Card=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+7
View File
@@ -0,0 +1,7 @@
{
"main": "./card.cjs.js",
"module": "./card.esm.js",
"unpkg": "./card.min.js",
"types": "./card.d.ts",
"sideEffects": false
}
+927
View File
@@ -0,0 +1,927 @@
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var PrimeReact = require('primereact/api');
var componentbase = require('primereact/componentbase');
var hooks = require('primereact/hooks');
var chevrondown = require('primereact/icons/chevrondown');
var chevronleft = require('primereact/icons/chevronleft');
var chevronright = require('primereact/icons/chevronright');
var chevronup = require('primereact/icons/chevronup');
var ripple = require('primereact/ripple');
var utils = require('primereact/utils');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
var styles = "\n@layer primereact {\n .p-carousel {\n display: flex;\n flex-direction: column;\n }\n \n .p-carousel-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n \n .p-carousel-prev,\n .p-carousel-next {\n align-self: center;\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-carousel-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-items-content {\n overflow: hidden;\n width: 100%;\n }\n \n .p-carousel-items-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-indicators {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .p-carousel-indicator > button {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n /* Vertical */\n .p-carousel-vertical .p-carousel-container {\n flex-direction: column;\n }\n \n .p-carousel-vertical .p-carousel-items-container {\n flex-direction: column;\n height: 100%;\n }\n \n /* Keyboard Support */\n .p-items-hidden .p-carousel-item {\n visibility: hidden;\n }\n \n .p-items-hidden .p-carousel-item.p-carousel-item-active {\n visibility: visible;\n }\n}\n";
var classes = {
root: function root(_ref) {
var isVertical = _ref.isVertical;
return utils.classNames('p-carousel p-component', {
'p-carousel-vertical': isVertical,
'p-carousel-horizontal': !isVertical
});
},
container: 'p-carousel-container',
content: 'p-carousel-content',
indicators: 'p-carousel-indicators p-reset',
header: 'p-carousel-header',
footer: 'p-carousel-footer',
itemsContainer: 'p-carousel-items-container',
itemsContent: 'p-carousel-items-content',
previousButton: function previousButton(_ref2) {
var isDisabled = _ref2.isDisabled;
return utils.classNames('p-carousel-prev p-link', {
'p-disabled': isDisabled
});
},
previousButtonIcon: 'p-carousel-prev-icon',
nextButton: function nextButton(_ref3) {
var isDisabled = _ref3.isDisabled;
return utils.classNames('p-carousel-next p-link', {
'p-disabled': isDisabled
});
},
nextButtonIcon: 'p-carousel-next-icon',
indicator: function indicator(_ref4) {
var isActive = _ref4.isActive;
return utils.classNames('p-carousel-indicator', {
'p-highlight': isActive
});
},
indicatorButton: 'p-link',
itemCloned: function itemCloned(_ref5) {
var props = _ref5.itemProps;
return utils.classNames(props.className, 'p-carousel-item', {
'p-carousel-item-active': props.active,
'p-carousel-item-start': props.start,
'p-carousel-item-end': props.end
});
},
item: function item(_ref6) {
var props = _ref6.itemProps;
return utils.classNames(props.className, 'p-carousel-item', {
'p-carousel-item-active': props.active,
'p-carousel-item-start': props.start,
'p-carousel-item-end': props.end
});
}
};
var inlineStyles = {
itemsContent: function itemsContent(_ref7) {
var height = _ref7.height;
return {
height: height
};
}
};
var CarouselBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Carousel',
id: null,
value: null,
page: 0,
header: null,
footer: null,
style: null,
className: null,
itemTemplate: null,
circular: false,
showIndicators: true,
showNavigators: true,
autoplayInterval: 0,
numVisible: 1,
numScroll: 1,
prevIcon: null,
nextIcon: null,
responsiveOptions: null,
orientation: 'horizontal',
verticalViewPortHeight: '300px',
contentClassName: null,
containerClassName: null,
indicatorsContentClassName: null,
onPageChange: null,
children: undefined
},
css: {
classes: classes,
styles: styles,
inlineStyles: inlineStyles
}
});
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CarouselItem = /*#__PURE__*/React__namespace.memo(function (props) {
var mergeProps = hooks.useMergeProps();
var ptm = props.ptm,
cx = props.cx;
var key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item';
var content = props.template(props.item);
var itemClonedProps = mergeProps({
className: cx(key, {
itemProps: props
}),
role: props.role,
'aria-roledescription': props.ariaRoledescription,
'aria-label': props.ariaLabel,
'aria-hidden': props.ariaHidden,
'data-p-carousel-item-active': props.active,
'data-p-carousel-item-start': props.start,
'data-p-carousel-item-end': props.end
}, ptm(key));
return /*#__PURE__*/React__namespace.createElement("div", itemClonedProps, content);
});
var Carousel = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
var props = CarouselBase.getProps(inProps, context);
var _React$useState = React__namespace.useState(props.numVisible),
_React$useState2 = _slicedToArray(_React$useState, 2),
numVisibleState = _React$useState2[0],
setNumVisibleState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(props.numScroll),
_React$useState4 = _slicedToArray(_React$useState3, 2),
numScrollState = _React$useState4[0],
setNumScrollState = _React$useState4[1];
var _React$useState5 = React__namespace.useState(props.page * props.numScroll * -1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
totalShiftedItemsState = _React$useState6[0],
setTotalShiftedItemsState = _React$useState6[1];
var _React$useState7 = React__namespace.useState(props.page),
_React$useState8 = _slicedToArray(_React$useState7, 2),
pageState = _React$useState8[0],
setPageState = _React$useState8[1];
var _CarouselBase$setMeta = CarouselBase.setMetaData({
props: props,
state: {
numVisible: numVisibleState,
numScroll: numScrollState,
totalShiftedItems: totalShiftedItemsState,
page: pageState
}
}),
ptm = _CarouselBase$setMeta.ptm,
cx = _CarouselBase$setMeta.cx,
sx = _CarouselBase$setMeta.sx,
isUnstyled = _CarouselBase$setMeta.isUnstyled;
componentbase.useHandleStyle(CarouselBase.css.styles, isUnstyled, {
name: 'carousel'
});
var elementRef = React__namespace.useRef(null);
var itemsContainerRef = React__namespace.useRef(null);
var remainingItems = React__namespace.useRef(0);
var allowAutoplay = React__namespace.useRef(!!props.autoplayInterval);
var attributeSelector = React__namespace.useRef('');
var swipeThreshold = React__namespace.useRef(20);
var startPos = React__namespace.useRef(null);
var interval = React__namespace.useRef(null);
var carouselStyle = React__namespace.useRef(null);
var indicatorContent = React__namespace.useRef(null);
var isRemainingItemsAdded = React__namespace.useRef(false);
var responsiveOptions = React__namespace.useRef(null);
var prevNumScroll = hooks.usePrevious(numScrollState);
var prevNumVisible = hooks.usePrevious(numVisibleState);
var prevValue = hooks.usePrevious(props.value);
var prevPage = hooks.usePrevious(props.page);
var isVertical = props.orientation === 'vertical';
var circular = props.circular || !!props.autoplayInterval;
var isCircular = circular && props.value && props.value.length >= numVisibleState;
var totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
var isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
var isControlled = props.onPageChange && !isAutoplay;
var currentPage = isControlled ? props.page : pageState;
var _useResizeListener = hooks.useResizeListener({
listener: function listener() {
calculatePosition();
},
when: props.responsiveOptions
}),
_useResizeListener2 = _slicedToArray(_useResizeListener, 1),
bindWindowResizeListener = _useResizeListener2[0];
var step = function step(dir, page) {
var totalShiftedItems = totalShiftedItemsState;
if (page != null) {
totalShiftedItems = numScrollState * page * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - numVisibleState;
}
isRemainingItemsAdded.current = false;
} else {
totalShiftedItems = totalShiftedItems + numScrollState * dir;
if (isRemainingItemsAdded.current) {
totalShiftedItems = totalShiftedItems + (remainingItems.current - numScrollState * dir);
isRemainingItemsAdded.current = false;
}
var originalShiftedItems = isCircular ? totalShiftedItems + numVisibleState : totalShiftedItems;
page = Math.abs(Math.floor(originalShiftedItems / numScrollState));
}
if (isCircular && pageState === totalIndicators - 1 && dir === -1) {
totalShiftedItems = -1 * (props.value.length + numVisibleState);
page = 0;
} else if (isCircular && pageState === 0 && dir === 1) {
totalShiftedItems = 0;
page = totalIndicators - 1;
} else if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems = totalShiftedItems + (remainingItems.current * -1 - numScrollState * dir);
isRemainingItemsAdded.current = true;
}
if (itemsContainerRef.current) {
!isUnstyled() && utils.DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
changePosition(totalShiftedItems);
itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
}
changePage(page);
setTotalShiftedItemsState(totalShiftedItems);
};
var calculatePosition = function calculatePosition() {
if (itemsContainerRef.current && responsiveOptions.current) {
var windowWidth = window.innerWidth;
var matchedResponsiveData = {
numVisible: props.numVisible,
numScroll: props.numScroll
};
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
if (parseInt(res.breakpoint, 10) >= windowWidth) {
matchedResponsiveData = res;
}
}
if (numScrollState !== matchedResponsiveData.numScroll) {
var page = Math.floor(currentPage * numScrollState / matchedResponsiveData.numScroll);
var totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - matchedResponsiveData.numVisible;
}
setTotalShiftedItemsState(totalShiftedItems);
setNumScrollState(matchedResponsiveData.numScroll);
changePage(page);
}
if (numVisibleState !== matchedResponsiveData.numVisible) {
setNumVisibleState(matchedResponsiveData.numVisible);
}
}
};
var navBackward = function navBackward(e, page) {
if (circular || currentPage !== 0) {
step(1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var navForward = function navForward(e, page) {
if (circular || currentPage < totalIndicators - 1) {
step(-1, page);
}
allowAutoplay.current = false;
if (e.cancelable) {
e.preventDefault();
}
};
var onIndicatorClick = function onIndicatorClick(e, page) {
if (page > currentPage) {
navForward(e, page);
} else if (page < currentPage) {
navBackward(e, page);
}
};
var onTransitionEnd = function onTransitionEnd(e) {
if (itemsContainerRef.current && e.propertyName === 'transform') {
utils.DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
itemsContainerRef.current.style.transition = '';
if ((pageState === 0 || pageState === totalIndicators - 1) && isCircular) {
changePosition(totalShiftedItemsState);
}
}
};
var _onTouchStart = function onTouchStart(e) {
var touchobj = e.changedTouches[0];
startPos.current = {
x: touchobj.pageX,
y: touchobj.pageY
};
};
var _onTouchMove = function onTouchMove(e) {
if (e.cancelable) {
e.preventDefault();
}
};
var _onTouchEnd = function onTouchEnd(e) {
var touchobj = e.changedTouches[0];
if (isVertical) {
changePageOnTouch(e, touchobj.pageY - startPos.current.y);
} else {
changePageOnTouch(e, touchobj.pageX - startPos.current.x);
}
};
var changePageOnTouch = function changePageOnTouch(e, diff) {
if (Math.abs(diff) > swipeThreshold.current) {
if (diff < 0) {
// left
navForward(e);
} else {
// right
navBackward(e);
}
}
};
var onIndicatorKeydown = function onIndicatorKeydown(event) {
switch (event.code) {
case 'ArrowRight':
onRightKey();
break;
case 'ArrowLeft':
onLeftKey();
break;
case 'Home':
onHomeKey();
event.preventDefault();
break;
case 'End':
onEndKey();
event.preventDefault();
break;
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
break;
case 'Tab':
onTabKey();
break;
}
};
var onRightKey = function onRightKey() {
var indicators = _toConsumableArray(utils.DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
};
var onLeftKey = function onLeftKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
};
var onHomeKey = function onHomeKey() {
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, 0);
};
var onEndKey = function onEndKey() {
var indicators = _toConsumableArray(utils.DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]r'));
var activeIndex = findFocusedIndicatorIndex();
changedFocusedIndicator(activeIndex, indicators.length - 1);
};
var onTabKey = function onTabKey() {
var indicators = _toConsumableArray(utils.DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var highlightedIndex = indicators.findIndex(function (ind) {
return utils.DomHandler.getAttribute(ind, 'data-p-highlight') === true;
});
var activeIndicator = utils.DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
var activeIndex = indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
};
var findFocusedIndicatorIndex = function findFocusedIndicatorIndex() {
var indicators = _toConsumableArray(utils.DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
var activeIndicator = utils.DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex(function (ind) {
return ind === activeIndicator.parentElement;
});
};
var changedFocusedIndicator = function changedFocusedIndicator(prevInd, nextInd) {
var indicators = _toConsumableArray(utils.DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]'));
indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0';
indicators[nextInd].children[0].focus();
};
var startAutoplay = function startAutoplay() {
if (props.autoplayInterval > 0) {
interval.current = setInterval(function () {
if (pageState === totalIndicators - 1) {
step(-1, 0);
} else {
step(-1, pageState + 1);
}
}, props.autoplayInterval);
}
};
var stopAutoplay = function stopAutoplay() {
if (interval.current) {
clearInterval(interval.current);
}
};
var createStyle = function createStyle() {
if (!carouselStyle.current) {
carouselStyle.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
}
var innerHTML = "\n .p-carousel[".concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / numVisibleState, "%\n }\n ");
if (props.responsiveOptions) {
var comparator = utils.ObjectUtils.localeComparator(context && context.locale || PrimeReact__default["default"].locale);
responsiveOptions.current = _toConsumableArray(props.responsiveOptions);
responsiveOptions.current.sort(function (data1, data2) {
var value1 = data1.breakpoint;
var value2 = data2.breakpoint;
return utils.ObjectUtils.sort(value1, value2, -1, comparator, context && context.nullSortOrder || PrimeReact__default["default"].nullSortOrder);
});
for (var i = 0; i < responsiveOptions.current.length; i++) {
var res = responsiveOptions.current[i];
innerHTML = innerHTML + "\n @media screen and (max-width: ".concat(res.breakpoint, ") {\n .p-carousel[").concat(attributeSelector.current, "] .p-carousel-item {\n flex: 1 0 ").concat(100 / res.numVisible, "%\n }\n }\n ");
}
calculatePosition();
}
carouselStyle.current.innerHTML = innerHTML;
};
var destroyStyle = function destroyStyle() {
carouselStyle.current = utils.DomHandler.removeInlineStyle(carouselStyle.current);
};
var changePosition = function changePosition(totalShiftedItems) {
if (itemsContainerRef.current) {
itemsContainerRef.current.style.transform = isVertical ? "translate3d(0, ".concat(totalShiftedItems * (100 / numVisibleState), "%, 0)") : "translate3d(".concat(totalShiftedItems * (100 / numVisibleState), "%, 0, 0)");
}
};
var changePage = function changePage(page) {
!isControlled && setPageState(page);
props.onPageChange && props.onPageChange({
page: page
});
};
React__namespace.useImperativeHandle(ref, function () {
return {
props: props,
startAutoplay: startAutoplay,
stopAutoplay: stopAutoplay,
getElement: function getElement() {
return elementRef.current;
}
};
});
hooks.useMountEffect(function () {
if (elementRef.current) {
attributeSelector.current = utils.UniqueComponentId();
elementRef.current.setAttribute(attributeSelector.current, '');
}
if (!carouselStyle.current) {
calculatePosition();
// Workaround: force correct initial position for circular
if (isCircular) {
var initialPosition = -1 * numVisibleState;
setTotalShiftedItemsState(initialPosition);
changePosition(initialPosition);
} else {
changePosition(totalShiftedItemsState);
}
bindWindowResizeListener();
}
});
hooks.useUpdateEffect(function () {
var stateChanged = false;
var totalShiftedItems = totalShiftedItemsState;
createStyle();
if (props.autoplayInterval) {
stopAutoplay();
}
if (prevNumScroll !== numScrollState || prevNumVisible !== numVisibleState || props.value && prevValue && prevValue.length !== props.value.length) {
remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
var page = currentPage;
if (totalIndicators !== 0 && page >= totalIndicators) {
page = totalIndicators - 1;
changePage(page);
stateChanged = true;
}
totalShiftedItems = page * numScrollState * -1;
if (isCircular) {
totalShiftedItems = totalShiftedItems - numVisibleState;
}
if (page === totalIndicators - 1 && remainingItems.current > 0) {
totalShiftedItems = totalShiftedItems + (-1 * remainingItems.current + numScrollState);
isRemainingItemsAdded.current = true;
} else {
isRemainingItemsAdded.current = false;
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
changePosition(totalShiftedItems);
}
if (isCircular) {
if (pageState === 0) {
totalShiftedItems = -1 * numVisibleState;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * props.value.length;
if (remainingItems.current > 0) {
isRemainingItemsAdded.current = true;
}
}
if (totalShiftedItems !== totalShiftedItemsState) {
setTotalShiftedItemsState(totalShiftedItems);
stateChanged = true;
}
}
if (prevPage !== props.page) {
if (props.page > prevPage && props.page <= totalIndicators - 1) {
step(-1, props.page);
} else if (props.page < prevPage) {
step(1, props.page);
}
}
if (!stateChanged && isAutoplay) {
startAutoplay();
}
return function () {
if (props.autoplayInterval) {
stopAutoplay();
}
destroyStyle();
};
});
var ariaSlideNumber = function ariaSlideNumber(value) {
return PrimeReact.ariaLabel('slideNumber', {
slideNumber: value
});
};
var createItems = function createItems() {
if (props.value && props.value.length) {
var clonedItemsForStarting = null;
var clonedItemsForFinishing = null;
if (isCircular) {
var clonedElements = null;
clonedElements = props.value.slice(-1 * numVisibleState);
clonedItemsForStarting = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState * -1 === props.value.length + numVisibleState;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_scloned';
return /*#__PURE__*/React__namespace.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
ptm: ptm,
cx: cx
});
});
clonedElements = props.value.slice(0, numVisibleState);
clonedItemsForFinishing = clonedElements.map(function (item, index) {
var isActive = totalShiftedItemsState === 0;
var start = index === 0;
var end = index === clonedElements.length - 1;
var key = index + '_fcloned';
return /*#__PURE__*/React__namespace.createElement(CarouselItem, {
key: key,
className: "p-carousel-item-cloned",
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
end: end,
ptm: ptm,
cx: cx
});
});
}
var items = props.value.map(function (item, index) {
var firstIndex = isCircular ? -1 * (totalShiftedItemsState + numVisibleState) : totalShiftedItemsState * -1;
var lastIndex = firstIndex + numVisibleState - 1;
var isActive = firstIndex <= index && lastIndex >= index;
var start = firstIndex === index;
var end = lastIndex === index;
var ariaHidden = firstIndex > index || lastIndex < index ? true : undefined;
var ariaLabel = ariaSlideNumber(index);
var ariaRoledescription = PrimeReact.localeOption('aria') ? PrimeReact.localeOption('aria').slide : undefined;
return /*#__PURE__*/React__namespace.createElement(CarouselItem, {
key: index,
template: props.itemTemplate,
item: item,
active: isActive,
start: start,
ariaHidden: ariaHidden,
ariaLabel: ariaLabel,
ariaRoledescription: ariaRoledescription,
role: "group",
end: end,
ptm: ptm,
cx: cx
});
});
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, clonedItemsForStarting, items, clonedItemsForFinishing);
}
};
var createHeader = function createHeader() {
if (props.header) {
var headerProps = mergeProps({
className: cx('header')
}, ptm('header'));
return /*#__PURE__*/React__namespace.createElement("div", headerProps, props.header);
}
return null;
};
var createFooter = function createFooter() {
if (props.footer) {
var footerProps = mergeProps({
className: cx('footer')
}, ptm('footer'));
return /*#__PURE__*/React__namespace.createElement("div", footerProps, props.footer);
}
return null;
};
var createContent = function createContent() {
var items = createItems();
var height = isVertical ? props.verticalViewPortHeight : 'auto';
var backwardNavigator = createBackwardNavigator();
var forwardNavigator = createForwardNavigator();
var itemsContentProps = mergeProps({
className: cx('itemsContent'),
style: sx('itemsContent', {
height: height
}),
onTouchStart: function onTouchStart(e) {
return _onTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
return _onTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
return _onTouchEnd(e);
}
}, ptm('itemsContent'));
var containerProps = mergeProps({
className: utils.classNames(props.containerClassName, cx('container')),
'aria-live': allowAutoplay.current ? 'polite' : 'off'
}, ptm('container'));
var itemsContainerProps = mergeProps({
className: cx('itemsContainer'),
onTransitionEnd: onTransitionEnd
}, ptm('itemsContainer'));
return /*#__PURE__*/React__namespace.createElement("div", containerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", itemsContentProps, /*#__PURE__*/React__namespace.createElement("div", _extends({
ref: itemsContainerRef
}, itemsContainerProps), items)), forwardNavigator);
};
var createBackwardNavigator = function createBackwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && currentPage === 0;
var previousButtonIconProps = mergeProps({
className: cx('previousButtonIcon')
}, ptm('previousButtonIcon'));
var icon = isVertical ? props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, previousButtonIconProps) : props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousButtonIconProps);
var backwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, previousButtonIconProps), {
props: props
});
var previousButtonProps = mergeProps({
type: 'button',
className: cx('previousButton', {
isDisabled: isDisabled
}),
onClick: function onClick(e) {
return navBackward(e);
},
disabled: isDisabled,
'aria-label': PrimeReact.localeOption('aria') ? PrimeReact.localeOption('aria').prevPageLabel : undefined,
'data-pc-group-section': 'navigator'
}, ptm('previousButton'));
return /*#__PURE__*/React__namespace.createElement("button", previousButtonProps, backwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
}
return null;
};
var createForwardNavigator = function createForwardNavigator() {
if (props.showNavigators) {
var isDisabled = (!circular || props.value && props.value.length < numVisibleState) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
var nextButtonIconProps = mergeProps({
className: cx('nextButtonIcon')
}, ptm('nextButtonIcon'));
var icon = isVertical ? props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, nextButtonIconProps) : props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextButtonIconProps);
var forwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, nextButtonIconProps), {
props: props
});
var nextButtonProps = mergeProps({
type: 'button',
className: cx('nextButton', {
isDisabled: isDisabled
}),
onClick: function onClick(e) {
return navForward(e);
},
disabled: isDisabled,
'aria-label': PrimeReact.localeOption('aria') ? PrimeReact.localeOption('aria').nextPageLabel : undefined,
'data-pc-group-section': 'navigator'
}, ptm('nextButton'));
return /*#__PURE__*/React__namespace.createElement("button", nextButtonProps, forwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
}
return null;
};
var ariaPageLabel = function ariaPageLabel(value) {
return PrimeReact.ariaLabel('pageLabel', {
page: value
});
};
var createIndicator = function createIndicator(index) {
var isActive = currentPage === index;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
context: {
active: isActive
}
});
};
var key = 'carousel-indicator-' + index;
var indicatorProps = mergeProps({
className: cx('indicator', {
isActive: isActive
}),
'data-p-highlight': isActive
}, getPTOptions('indicator'));
var indicatorButtonProps = mergeProps({
type: 'button',
className: cx('indicatorButton'),
tabIndex: currentPage === index ? '0' : '-1',
onClick: function onClick(e) {
return onIndicatorClick(e, index);
},
'aria-label': ariaPageLabel(index + 1),
'aria-current': currentPage === index ? 'page' : undefined
}, getPTOptions('indicatorButton'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({}, indicatorProps, {
key: key
}), /*#__PURE__*/React__namespace.createElement("button", indicatorButtonProps, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
};
var createIndicators = function createIndicators() {
if (props.showIndicators) {
var _indicators = [];
for (var i = 0; i < totalIndicators; i++) {
_indicators.push(createIndicator(i));
}
var indicatorsProps = mergeProps({
ref: indicatorContent,
className: utils.classNames(props.indicatorsContentClassName, cx('indicators')),
onKeyDown: onIndicatorKeydown
}, ptm('indicators'));
return /*#__PURE__*/React__namespace.createElement("ul", indicatorsProps, _indicators);
}
return null;
};
var content = createContent();
var indicators = createIndicators();
var header = createHeader();
var footer = createFooter();
var rootProps = mergeProps({
id: props.id,
ref: elementRef,
className: utils.classNames(props.className, cx('root', {
isVertical: isVertical
})),
style: props.style,
role: 'region'
}, CarouselBase.getOtherProps(props), ptm('root'));
var contentProps = mergeProps({
className: utils.classNames(props.contentClassName, cx('content'))
}, ptm('content'));
return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, /*#__PURE__*/React__namespace.createElement("div", contentProps, content, indicators), footer);
}));
CarouselItem.displayName = 'CarouselItem';
Carousel.displayName = 'Carousel';
exports.Carousel = Carousel;
File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More