funda-ui 1.0.272

package/CascadingSelectE2E/index.css

@@ -0,0 +1,159 @@
+/* ======================================================
+    <!-- Cascading Select End-to-end -->
+/* ====================================================== */
+.cascading-select-e2e__wrapper {
+  --cascading-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
+  --cascading-select-e2e-opt-hover-bg: #f7f7f7;
+  --cascading-select-e2e-opt-active-bg: #eeeeee;
+  --cascading-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
+  --cascading-select-e2e-items-bg: #fff;
+  --cascading-select-e2e-items-color: inherit;
+  --cascading-select-e2e-items-border-color: rgba(0, 0, 0, .1);
+  --cascading-select-e2e-items-li-border-color: #eee;
+  --cascading-select-e2e-arrow-fill: #a5a5a5;
+  --cascading-select-e2e-result-arrow-fill: #a5a5a5;
+  --cascading-select-e2e-result-font-size: 1rem;
+  --cascading-select-e2e-result-padding-x: 0.75rem;
+  --cascading-select-e2e-result-padding-y: 0.375rem;
+  --cascading-select-e2e-opt-font-size: 0.875rem;
+  --cascading-select-e2e-opt-padding-x: .4rem;
+  --cascading-select-e2e-opt-padding-y: .3rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result {
+  position: absolute;
+  left: auto;
+  z-index: 1;
+  top: 0;
+  padding: var(--cascading-select-e2e-result-padding-y) var(--cascading-select-e2e-result-padding-x);
+  font-size: var(--cascading-select-e2e-result-font-size);
+  font-weight: 400;
+  line-height: 1.5;
+  color: inherit;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result div {
+  display: inline;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result span {
+  padding: 3px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result svg {
+  margin: 0 0.3rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__result svg path {
+  fill: var(--cascading-select-e2e-result-arrow-fill);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__closemask {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val {
+  position: relative;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val input {
+  cursor: pointer;
+  color: transparent !important;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val input:focus {
+  color: transparent !important;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow {
+  position: absolute;
+  top: 0;
+  margin-top: 0.3rem;
+  right: 0.5rem;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow svg .arrow-fill-g {
+  fill: var(--cascading-select-e2e-arrow-fill);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e ul,
+.cascading-select-e2e__wrapper .cascading-select-e2e li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__trigger {
+  position: relative;
+  z-index: 0;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items {
+  box-shadow: var(--cascading-select-e2e-items-box-shadow);
+  position: absolute;
+  left: auto;
+  max-height: 350px;
+  border: 1px solid var(--cascading-select-e2e-items-border-color);
+  background: var(--cascading-select-e2e-items-bg);
+  padding: 10px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  z-index: 1;
+  top: 2.3rem;
+  border-radius: 5px;
+  width: max-content;
+  /* required -> the content will not wrap at all even if it causes overflows*/
+  color: var(--cascading-select-e2e-items-color);
+  /* each item */
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items.bottom-0 {
+  top: auto;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close svg {
+  opacity: 0.4;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close:hover svg {
+  transition: 0.2s ease-out;
+  opacity: 0.7;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul {
+  transition: 0.2s ease-out;
+  min-width: 8px;
+  min-height: 9px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li {
+  position: relative;
+  cursor: pointer;
+  float: left;
+  padding: 0 10px;
+  margin-right: 15px;
+  border-right: 1px dotted var(--cascading-select-e2e-items-li-border-color);
+  transition: 0.2s ease-out;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt {
+  padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
+  font-size: var(--cascading-select-e2e-opt-font-size);
+  border-radius: 2px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt:hover {
+  background: var(--cascading-select-e2e-opt-hover-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt.active {
+  background: var(--cascading-select-e2e-opt-active-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header {
+  padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
+  font-size: var(--cascading-select-e2e-opt-font-size);
+  opacity: 0.5;
+  border-bottom: 1px dotted var(--cascading-select-e2e-opt-header-border-color);
+  border-radius: 2px;
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header:hover {
+  background: var(--cascading-select-e2e-opt-hover-bg);
+}
+.cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header.active {
+  background: var(--cascading-select-e2e-opt-active-bg);
+}

package/CascadingSelectE2E/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+declare type CascadingSelectE2EOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: any) => void;
+interface fetchArrayConfig {
+    fetchFuncAsync?: any | undefined;
+    fetchFuncMethod?: string | undefined;
+    fetchFuncMethodParams?: any[] | undefined;
+    fetchCallback?: (data: any) => void;
+}
+declare type CascadingSelectE2EProps = {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    placeholder?: string;
+    disabled?: any;
+    required?: any;
+    /** Set headers for each column group */
+    columnTitle?: any[];
+    /** Set whether to use "label" or "value" for the value of this form, they will be separated by commas, such as `Text 1,Text 1_1,Text 1_1_1` or `1,1_1,1_1_1`.
+     * Optional values: `label`, `value`
+     */
+    valueType?: string;
+    /** Whether to display the close button. */
+    showCloseBtn?: boolean;
+    /** Set the depth value of the control to control the display of the pop-up layer appear above.
+     * Please set it when multiple controls are used at the same time. */
+    depth?: number;
+    /** Set a loader component to show while the component waits for the next load of data.
+     * e.g. `<span>Loading...</span>` or any fancy loader element */
+    loader?: React.ReactNode;
+    /** Whether to show breadcrumb result */
+    displayResult?: boolean;
+    /** Set an arrow of breadcrumb result */
+    displayResultArrow?: React.ReactNode;
+    /** Set an arrow of control */
+    controlArrow?: React.ReactNode;
+    /** Specify a class for this Node. */
+    triggerClassName?: string;
+    /** Set a piece of text or HTML code for the trigger */
+    triggerContent?: React.ReactNode;
+    /** Configuration for multiple requests */
+    fetchArray?: fetchArrayConfig[];
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onFetch?: (data: any, childrenData: any) => void;
+    onChange?: CascadingSelectE2EOptionChangeFnType | null;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+declare const CascadingSelectE2E: (props: CascadingSelectE2EProps) => JSX.Element;
+export default CascadingSelectE2E;