Skip to content

Commit 47eda1a

Browse files
author
Administrator
committed
1.0.2
1 parent 63204f1 commit 47eda1a

File tree

11 files changed

+777
-4
lines changed

11 files changed

+777
-4
lines changed

‎build/CascadeForms/CascadeForms.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
import { FormActions, ControlItemProps } from "./CascadeForms.types";
3+
export * from "./CascadeForms.types";
4+
declare const CascadeForms: React.ForwardRefExoticComponent<{
5+
form: import("./CascadeForms.types").FormItems;
6+
} & Omit<ControlItemProps, "item"> & React.RefAttributes<FormActions>>;
7+
export default CascadeForms;

‎build/CascadeForms/CascadeForms.types.d.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/// <reference types="react" />
2+
import { ValidationRuleObject } from "fastest-validator";
3+
type FormItemVisible = {
4+
state: string;
5+
expect: string | boolean | unknown;
6+
};
7+
type FormValue = {
8+
value: any;
9+
state?: string | boolean;
10+
};
11+
export type FormState = Record<string | number, FormValue>;
12+
export type FormPayload = any;
13+
export type FormItem = {
14+
id: string;
15+
type: string;
16+
payload?: FormPayload;
17+
validator?: ValidationRuleObject;
18+
className?: string;
19+
title?: string;
20+
visible?: FormItemVisible;
21+
items?: Array<FormItem>;
22+
};
23+
export type FormItems = FormItem[];
24+
export type OnChangeFn = (id: string, value: string) => void;
25+
export type FormControlRenderFn = (formState: FormState, item: FormItem, onChange: OnChangeFn) => JSX.Element;
26+
export type StateUpdateFn = (state: FormState) => void;
27+
export type ControlRenderProps = {
28+
formState: FormState;
29+
item: FormItem;
30+
onChange: OnChangeFn;
31+
};
32+
export type ControlItemProps = {
33+
item: FormItem;
34+
formState: FormState;
35+
onRender: FormControlRenderFn;
36+
onUpdate: StateUpdateFn;
37+
};
38+
export type CascadeFormProps = {
39+
form: FormItems;
40+
} & Omit<ControlItemProps, "item">;
41+
export type RenderProps = {
42+
items: FormItems;
43+
parent?: FormItem;
44+
} & Omit<ControlItemProps, "item">;
45+
export type FormActions = {
46+
getState: () => FormState;
47+
};
48+
export {};

‎build/index.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CascadeForms, { OnChangeFn, ControlRenderProps, FormActions, FormItem, FormItems, FormState } from "./CascadeForms/CascadeForms";
2+
export { OnChangeFn, ControlRenderProps, FormItem, FormState, FormActions, FormItems, };
3+
export default CascadeForms;

‎build/index.esm.js‎

Lines changed: 220 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.esm.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js‎

Lines changed: 226 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/styles.css‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
.tree-menu {
2+
--font-family: "Avenir Next", Helvetica, Arial, sans-serif;
3+
--item-padding: 5px;
4+
--item-height: 32px;
5+
}
6+
@media (prefers-color-scheme: light) {
7+
.tree-menu {
8+
--tree-background: #ffffff;
9+
--item-title: rgba(31, 31, 31, 0.787);
10+
--item-info: #79aaff;
11+
--item-group-icon: #babec2;
12+
--item-selected-background: rgba(129, 129, 129, 0.364);
13+
--item-selected-color: #202020;
14+
--item-hover-background: rgba(0, 0, 0, 0.063);
15+
--item-hover-color: #000000;
16+
--item-disabled-color: rgba(129, 129, 129, 0.533);
17+
--item-sizer-color: #868686;
18+
}
19+
}
20+
@media (prefers-color-scheme: dark) {
21+
.tree-menu {
22+
--tree-background: #242539;
23+
--item-title: rgba(225, 225, 225, 0.787);
24+
--item-info: #c8a636;
25+
--item-group-icon: #ff8c00;
26+
--item-selected-background: rgba(148, 185, 247, 0.364);
27+
--item-selected-color: #ffffff;
28+
--item-hover-background: rgba(190, 198, 255, 0.08);
29+
--item-hover-color: #04c5ff;
30+
--item-disabled-color: rgba(129, 129, 129, 0.533);
31+
--item-sizer-color: #3c92fc;
32+
}
33+
}
34+
.dark.tree-menu,
35+
.dark .tree-menu {
36+
--tree-background: #242539;
37+
--item-title: rgba(225, 225, 225, 0.787);
38+
--item-info: #c8a636;
39+
--item-group-icon: #ff8c00;
40+
--item-selected-background: rgba(148, 185, 247, 0.364);
41+
--item-selected-color: #ffffff;
42+
--item-hover-background: rgba(190, 198, 255, 0.08);
43+
--item-hover-color: #04c5ff;
44+
--item-disabled-color: rgba(129, 129, 129, 0.533);
45+
--item-sizer-color: #3c92fc;
46+
}
47+
.light.tree-menu,
48+
.light .tree-menu {
49+
--tree-background: #ffffff;
50+
--item-title: rgba(31, 31, 31, 0.787);
51+
--item-info: #79aaff;
52+
--item-group-icon: #babec2;
53+
--item-selected-background: rgba(129, 129, 129, 0.364);
54+
--item-selected-color: #202020;
55+
--item-hover-background: rgba(0, 0, 0, 0.063);
56+
--item-hover-color: #000000;
57+
--item-disabled-color: rgba(129, 129, 129, 0.533);
58+
--item-sizer-color: #868686;
59+
}
60+
.heading {
61+
font-family: "Avenir Next", Helvetica, Arial, sans-serif;
62+
font-size: 40px;
63+
font-weight: bold;
64+
}
65+
.tree-menu {
66+
--resizeX: 65%;
67+
overflow-x: hidden;
68+
background-color: var(--tree-background);
69+
font-family: var(--font-family);
70+
-webkit-touch-callout: none;
71+
/* iOS Safari */
72+
-webkit-user-select: none;
73+
/* Safari */
74+
-khtml-user-select: none;
75+
/* Konqueror HTML */
76+
-moz-user-select: none;
77+
/* Old versions of Firefox */
78+
-ms-user-select: none;
79+
/* Internet Explorer/Edge */
80+
user-select: none;
81+
/* Non-prefixed version, currently */
82+
/*
83+
.wrapper {
84+
}
85+
*/
86+
}
87+
.tree-menu .value {
88+
position: relative;
89+
background-color: var(--tree-background);
90+
position: absolute;
91+
display: flex;
92+
flex-grow: 1;
93+
align-self: center;
94+
left: var(--resizeX);
95+
height: var(--item-height);
96+
width: calc(99% - var(--resizeX));
97+
z-index: 2;
98+
}
99+
.tree-menu .value > .sizer {
100+
--padding: calc(var(--item-padding) * -1);
101+
position: absolute;
102+
top: var(--padding);
103+
bottom: calc(var(--padding) + 1px);
104+
min-height: 100%;
105+
min-width: 10px;
106+
cursor: e-resize;
107+
z-index: 3;
108+
border-left: 1px dotted var(--item-sizer-color);
109+
opacity: 0.4;
110+
margin-left: -2px;
111+
}
112+
.tree-menu .value > .sizer:hover {
113+
border-left: 1px dotted var(--item-sizer-color);
114+
opacity: 1;
115+
}
116+
.tree-menu .value .control {
117+
display: flex;
118+
justify-content: center;
119+
padding-left: 0px;
120+
align-items: center;
121+
flex-grow: 1;
122+
overflow-x: hidden;
123+
overflow-y: hidden;
124+
}
125+
.tree-menu .group {
126+
position: relative;
127+
transition: all 0.3s cubic-bezier(0.81, 0.58, 0.48, 1.41);
128+
}
129+
.tree-menu .folder {
130+
transition: all 0.2s linear;
131+
margin-right: 5px;
132+
}
133+
.tree-menu .item {
134+
display: flex;
135+
flex-direction: row;
136+
cursor: pointer;
137+
transition: all 0.3s ease-in;
138+
color: var(--item-title);
139+
}
140+
.tree-menu .item.disabled {
141+
pointer-events: none;
142+
color: var(--item-disabled-color);
143+
}
144+
.tree-menu .item:hover {
145+
color: var(--item-hover-color);
146+
background-color: var(--item-hover-background);
147+
transition: all 0.3s ease-in;
148+
opacity: 1;
149+
}
150+
.tree-menu .item.hasChilds {
151+
font-weight: 800;
152+
}
153+
.tree-menu .item.hasChilds .folder {
154+
display: flex;
155+
margin-left: 5px;
156+
justify-content: center;
157+
align-items: center;
158+
}
159+
.tree-menu .item ~ .group {
160+
max-height: var(--mh);
161+
overflow: hidden;
162+
}
163+
.tree-menu .item ~ .group.disabled {
164+
pointer-events: none;
165+
color: var(--item-disabled-color);
166+
}
167+
.tree-menu .item.collapsed ~ .group {
168+
max-height: 0px;
169+
overflow: hidden;
170+
}
171+
.tree-menu .item.expanded {
172+
/*
173+
~ .group {
174+
175+
}
176+
*/
177+
}
178+
.tree-menu .item.expanded .folder.enable-rotate {
179+
transform: rotate(90deg);
180+
}
181+
.tree-menu .item > .content {
182+
padding: var(--item-padding);
183+
min-height: var(--item-height);
184+
display: flex;
185+
flex-direction: row;
186+
align-items: center;
187+
overflow: hidden;
188+
flex-grow: 1;
189+
}
190+
.tree-menu .item > .content > .text .title,
191+
.tree-menu .item > .content .text .info {
192+
overflow: hidden;
193+
transition: all 0.4s ease-in-out;
194+
}
195+
.tree-menu .item > .content:hover:has(.info) {
196+
color: var(--item-hover-color);
197+
}
198+
.tree-menu .item > .content:hover:has(.info) > .text .title.vertical {
199+
top: 0%;
200+
transform: translateY(-100%);
201+
opacity: 0.1;
202+
}
203+
.tree-menu .item > .content:hover:has(.info) > .text .title.horizontal {
204+
top: 0%;
205+
transform: translateY(-100%);
206+
}
207+
.tree-menu .item > .content:hover:has(.info) > .text .info.vertical {
208+
top: 50%;
209+
transform: translateY(0%);
210+
}
211+
.tree-menu .item > .content:hover:has(.info) > .text .info.horizontal {
212+
position: absolute;
213+
transform: translateX(0%);
214+
}
215+
.tree-menu .item > .content > .text {
216+
position: relative;
217+
flex-grow: 1;
218+
display: flex;
219+
flex-direction: column;
220+
align-content: center;
221+
overflow-x: clip;
222+
max-height: var(--item-height);
223+
}
224+
.tree-menu .item > .content > .text > .title:has(~.info.vertical,~.info.horizontal) {
225+
position: absolute;
226+
top: 50%;
227+
transform: translateY(-50%);
228+
display: flex;
229+
flex-grow: 1;
230+
align-content: center;
231+
}
232+
.tree-menu .item > .content > .text > .info {
233+
position: relative;
234+
font-size: 0.7em;
235+
color: var(--item-info);
236+
overflow: hidden;
237+
display: flex;
238+
}
239+
.tree-menu .item > .content > .text > .info.vertical {
240+
transform: translateY(300%);
241+
}
242+
.tree-menu .item > .content > .text > .info.horizontal {
243+
transform: translateX(-300%);
244+
}
245+
.tree-menu .item > .content > .icon {
246+
display: flex;
247+
padding-right: 5px;
248+
}
249+
.tree-menu .selected {
250+
background-color: var(--item-selected-background);
251+
color: var(--item-selected-color) !important;
252+
z-index: 9999;
253+
}
254+
/*
255+
.test {
256+
&.tree-menu {
257+
.item:hover {
258+
background-color: red;
259+
}
260+
}
261+
}
262+
*/

‎build/variables.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@code4bones/react-cascade-forms",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"main": "build/index.js",
55
"module": "build/index.esm.js",
66
"files": [

0 commit comments

Comments
 (0)