@geneui/components
Version:
The Gene UI components library designed for BI tools
196 lines (190 loc) • 9.04 kB
JavaScript
import React__default, { useMemo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { a as conflictPropsLog } from '../index-a0e4e333.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .accordion-holder{overflow:hidden;width:100%}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-minimal:not(.active)+.a-minimal{margin:1.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-minimal.active .accordion-head-arrow{transform:rotate(180deg)}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-minimal .a-minimal:not(.active) .accordion-head-arrow{transform:rotate(-90deg)}html[dir=rtl] .accordion-holder.a-minimal .a-minimal:not(.active) .accordion-head-arrow{transform:rotate(90deg)}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-default{border:1px solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-default+.a-default{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-default:first-of-type{border-top-left-radius:1rem;border-top-right-radius:1rem}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-default:last-of-type{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.a-default:not(.active) .accordion-head-arrow{transform:rotate(-90deg)}html[dir=rtl] .accordion-holder.a-default:not(.active) .accordion-head-arrow{transform:rotate(90deg)}[data-gene-ui-version=\"2.16.5\"] .accordion-holder.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .accordion-head{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2.4rem var(--font-family);-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .a-default>.accordion-head{background:rgba(var(--background-sc-rgb),.02);height:4rem;padding:0 1.2rem}[data-gene-ui-version=\"2.16.5\"] .a-default>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .a-default>.accordion-head>li+li{margin:0 0 0 1.8rem}html[dir=rtl] .a-default>.accordion-head>li+li{margin:0 1.8rem 0 0}[data-gene-ui-version=\"2.16.5\"] .a-default>.accordion-head>li.ellipsis-text{flex:auto}[data-gene-ui-version=\"2.16.5\"] .a-minimal>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .a-minimal>.accordion-head>li.ellipsis-text{margin:0 1rem 0 .4rem}html[dir=rtl] .a-minimal>.accordion-head>li.ellipsis-text{margin:0 .4rem 0 1rem}[data-gene-ui-version=\"2.16.5\"] .a-minimal>.accordion-head>li.line{flex:auto}[data-gene-ui-version=\"2.16.5\"] .a-minimal>.accordion-head .line{background:rgba(var(--background-sc-rgb),.1);height:1px}[data-gene-ui-version=\"2.16.5\"] .accordion-head .accordion-head-arrow{transition:transform .3s}[data-gene-ui-version=\"2.16.5\"] .accordion-body{font:1.2rem/1.33 var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .a-default .accordion-body{padding:1rem 2rem}[data-gene-ui-version=\"2.16.5\"] .a-minimal .accordion-body{padding:1rem 0 1rem 2.8rem}html[dir=rtl] .a-minimal .accordion-body{padding:1rem 2.8rem 1rem 0}";
styleInject(css_248z);
const appearances$1 = ['default', 'minimal'];
function Panel(props) {
const {
appearance,
disabled,
opened,
title,
children,
onClick,
expandIcon,
showIcon,
className,
rightAction,
...restProps
} = props;
return /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
className: classnames('accordion-holder', className, "a-".concat(appearance), {
disabled,
active: opened
})
}), /*#__PURE__*/React__default.createElement("ul", {
className: "accordion-head",
onClick: onClick
}, showIcon && /*#__PURE__*/React__default.createElement("li", null, expandIcon ? expandIcon(opened, props) : /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-arrow-down",
className: "accordion-head-arrow"
})), /*#__PURE__*/React__default.createElement("li", {
className: "ellipsis-text"
}, title), /*#__PURE__*/React__default.createElement("li", {
className: "line"
}), /*#__PURE__*/React__default.createElement("li", null, rightAction)), opened && /*#__PURE__*/React__default.createElement("div", {
className: "accordion-body"
}, children));
}
Panel.propTypes = {
/**
* Same as "Collapse" appearance. Note that you must not specify this prop in Panel itself
*/
appearance: PropTypes.oneOf(appearances$1),
/**
* Disabled state of Panel. Note it will set css "pointer-events" to "none" when set to "true"
*/
disabled: PropTypes.bool,
/**
* Panel is opened when set to "true". Note that you must not specify this prop in Panel itself
*/
opened: PropTypes.bool,
/**
* Use this prop to specify Panel's title. Any valid React node
*/
title: PropTypes.node,
/**
* Use this prop to specify Panel's content. Any valid React node
*/
children: PropTypes.node,
/**
* Fires an event on Panel click((event: Event) => void)
*/
onClick: PropTypes.func,
/**
* Same as Collapse. Note that you must not specify this prop in Panel itself
*/
expandIcon: PropTypes.func,
/**
* Hides the Panel icon when set to "false"
*/
showIcon: PropTypes.bool,
/**
* Additional className
*/
className: PropTypes.string,
/**
* Right action bar. Any valid React node
*/
rightAction: PropTypes.node
};
Panel.defaultProps = {
disabled: false,
showIcon: true
};
const deepCheck = children => {
Array.from(children).every(child => {
Array.isArray(child) && deepCheck(child);
return PropTypes.shape({
type: PropTypes.instanceOf(Panel)
});
});
};
const appearances = ['default', 'minimal'];
const getActiveKeys = (activeKeys, key, accordion, isControlled) => !isControlled && accordion ? activeKeys[0] === key ? [] : [key] : activeKeys.includes(key) ? activeKeys.filter(item => item !== key) : [...activeKeys, key];
function Collapse(props) {
const {
children,
defaultActiveKeys,
onChange,
appearance,
accordion,
expandIcon,
allActive
} = props;
const allKeys = useMemo(() => React__default.Children.map(children, _ref => {
let {
key
} = _ref;
return key;
}), [children]);
const isControlled = ('activeKeys' in props);
const [activeKeysState, setActiveKeysState] = useState(() => allActive ? allKeys : defaultActiveKeys);
const activeKeys = isControlled ? props.activeKeys : activeKeysState;
isControlled && accordion && conflictPropsLog('Collapse', ['activeKeys', 'accordion'], true);
useEffect(() => {
accordion && setActiveKeysState(prev => [prev[0]]);
}, [accordion]);
useEffect(() => {
allActive && setActiveKeysState(allKeys);
}, [allActive, allKeys]);
return React__default.Children.map(children, (child, index) => {
var _childProps$opened;
const {
key,
props: childProps
} = child;
const handleClick = e => {
const newActiveKeys = getActiveKeys(activeKeys, key, accordion, isControlled);
!isControlled && setActiveKeysState(newActiveKeys);
onChange && onChange(newActiveKeys);
childProps.onClick && childProps.onClick(e, childProps, index);
};
return /*#__PURE__*/React__default.cloneElement(child, {
opened: (_childProps$opened = childProps.opened) !== null && _childProps$opened !== void 0 ? _childProps$opened : activeKeys.includes(key),
onClick: handleClick,
appearance,
expandIcon
});
});
}
Collapse.propTypes = {
/**
* The child or children of Collapse molecule is "Panel"
*/
children: (props, propName, componentName) => deepCheck(props.children),
/**
* Keys provided in array must correspond the keys which are set on child "Panel"'s. Also they will be opened.
* Using this prop means that you are controlling Collapse molecule
*/
activeKeys: PropTypes.arrayOf(PropTypes.string),
/**
* Provide default state of opened "Panel"-s. Note that using this key does not mean to control Collapse
*/
defaultActiveKeys: PropTypes.arrayOf(PropTypes.string),
/**
* Fires an event on Panel click((arrayOfKeys: string[]) => void)
*/
onChange: PropTypes.func,
/**
* Collapse appearance
*/
appearance: PropTypes.oneOf(appearances),
/**
* Only one "Panel" can be opened at a time when set to "true"
*/
accordion: PropTypes.bool,
/**
* Use this prop to override default icons of "Panel"(opened: boolean) => ReactElement
*/
expandIcon: PropTypes.func,
/**
* All 'Panel'-s are open/close by this prop
*/
allActive: PropTypes.bool
};
Collapse.defaultProps = {
appearance: appearances[1],
accordion: false,
defaultActiveKeys: [],
allActive: false
};
export { Collapse, Panel };