Added examples for Existing Components - Demo

lowcoder-org · Nov 15, 2024 · 6d3f013 · 6d3f013
1 parent 6952535
commit 6d3f013
Show file tree

Hide file tree

Showing 17 changed files with 365 additions and 47 deletions.
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx
@@ -29,6 +29,7 @@ export default function ButtonExample() {
           compFactory={ButtonComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
         <Example
           title={trans("componentDoc.danger")}

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx
@@ -43,18 +43,6 @@ export default function DropdownExample() {
           blackListConfig={blackListConfig}
           compFactory={DropdownComp}
         />
-        <Example
-          title={trans("componentDoc.loading")}
-          width={120}
-          config={{
-            type: "default",
-            text: trans("componentDoc.menu"),
-            loading: true,
-            options: options,
-          }}
-          blackListConfig={blackListConfig}
-          compFactory={DropdownComp}
-        />
         <Example
           title={trans("componentDoc.disabled")}
           width={120}
@@ -68,31 +56,8 @@ export default function DropdownExample() {
           compFactory={DropdownComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
-        <Example
-          title={trans("componentDoc.danger")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#e0ecf6" },
-          }}
-          compFactory={DropdownComp}
-        />
-        <Example
-          title={trans("componentDoc.warning")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
-          }}
-          compFactory={DropdownComp}
-        />
-        <Example
-          title={trans("componentDoc.success")}
-          width={120}
-          config={{
-            style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#e0ecf6" },
-          }}
-          compFactory={DropdownComp}
-        />
         <Example
           title={trans("componentDoc.onlyMenu")}
           width={120}

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Date.tsx
@@ -29,6 +29,7 @@ export default function DateExample() {
           config={{
             value: trans("componentDoc.noValue"),
             format: "YYYY-MM-DD",
+            placeholder: "Select Date",
             disabled: false,
             label: {
               text: trans("componentDoc.date"),
@@ -51,6 +52,7 @@ export default function DateExample() {
           compFactory={DatePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function DateExample() {
           compFactory={DatePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/DateRange.tsx
@@ -72,6 +72,7 @@ export default function DateRangeExample() {
           compFactory={DateRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -132,6 +133,7 @@ export default function DateRangeExample() {
           compFactory={DateRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -164,6 +166,37 @@ export default function DateRangeExample() {
           blackListConfig={blackListConfig.slice(0, 3)}
           compFactory={DateRangeComp}
         />
+        <Example
+          title="Show Time"
+          config={{
+            required: true,
+            showTime: true,
+            label: {
+              text: trans("componentDoc.date"),
+              position: "column",
+              align: "left",
+            },
+          }}
+          nameMap={nameMap}
+          blackListConfig={blackListConfig.slice(0, 3)}
+          compFactory={DateRangeComp}
+        />
+        <Example
+          title="Show Time ( 12 hours format )"
+          config={{
+            required: true,
+            showTime: true,
+            use12Hours: true,
+            label: {
+              text: trans("componentDoc.date"),
+              position: "column",
+              align: "left",
+            },
+          }}
+          nameMap={nameMap}
+          blackListConfig={blackListConfig.slice(0, 3)}
+          compFactory={DateRangeComp}
+        />
       </ExampleGroup>
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Time.tsx
@@ -29,6 +29,7 @@ export default function TimeExample() {
           config={{
             value: trans("componentDoc.noValue"),
             format: "hh:mm:ss",
+            placeholder: "Select Time",
             disabled: false,
             label: {
               text: trans("componentDoc.time"),
@@ -51,6 +52,7 @@ export default function TimeExample() {
           compFactory={TimePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -101,6 +103,7 @@ export default function TimeExample() {
           compFactory={TimePickerComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -126,6 +129,35 @@ export default function TimeExample() {
           blackListConfig={blackListConfig}
           compFactory={TimePickerComp}
         />
+        <Example
+          title="Time Steps"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "10",
+            secondStep: "30",
+            label: {
+              text: trans("componentDoc.time"),
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimePickerComp}
+        />
+        <Example
+          title= "Show Time ( 12 Hours format )"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "10",
+            secondStep: "30",
+            use12Hours: true,
+            label: {
+              text: trans("componentDoc.time"),
+            },
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimePickerComp}
+        />
       </ExampleGroup>
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/TimeRange.tsx
@@ -37,6 +37,7 @@ export default function TimeRangeExample() {
           title={trans("componentDoc.noDefaultValue")}
           config={{
             format: "hh:mm:ss",
+            placeholder: "Select Time",
             disabled: false,
             label: {
               text: trans("componentDoc.time"),
@@ -64,6 +65,7 @@ export default function TimeRangeExample() {
           compFactory={TimeRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.labelText")} description="">
         <Example
           title={trans("componentDoc.leftLeftAlign")}
@@ -120,6 +122,7 @@ export default function TimeRangeExample() {
           compFactory={TimeRangeComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.required")}
@@ -150,6 +153,29 @@ export default function TimeRangeExample() {
           blackListConfig={blackListConfig}
           compFactory={TimeRangeComp}
         />
+        <Example
+          title="Time Steps"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "5",
+            secondStep: "15",
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimeRangeComp}
+        />
+        <Example
+          title="Show Time ( 12 hours format )"
+          config={{
+            required: true,
+            hourStep: "2",
+            minuteStep: "5",
+            secondStep: "15",
+            use12Hours: true,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={TimeRangeComp}
+        />
       </ExampleGroup>
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/NumberInput.tsx
@@ -54,6 +54,7 @@ export default function NumberInputExample() {
           compFactory={NumberInputComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.format")} description="">
         <Example
           title={trans("componentDoc.percent")}
@@ -79,7 +80,25 @@ export default function NumberInputExample() {
           }}
           compFactory={NumberInputComp}
         />
+        <Example
+          title="Step"
+          config={{
+            value: "1",
+            step: "10",
+          }}
+          compFactory={NumberInputComp}
+        />
+        <Example
+          title="Hide Increment/Decrement buttons"
+          config={{
+            value: "1",
+            step: "10",
+            controls: false,
+          }}
+          compFactory={NumberInputComp}
+        />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.validation")}>
         <Example
           title={trans("componentDoc.mostValue")}

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
@@ -36,6 +36,20 @@ export default function RangeSliderExample() {
           }}
           compFactory={RangeSliderComp}
         />
+        <Example
+          title={trans("componentDoc.default")}
+          config={{
+            value: "60",
+            disabled: "false",
+            start: "10",
+            end: "70",
+            min: "0",
+            max: "100",
+            step: "10",
+            vertical: true,
+          }}
+          compFactory={RangeSliderComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.labelText")} description="">

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Rating.tsx
@@ -16,7 +16,7 @@ export default function RatingExample() {
         <Example
           title={trans("componentDoc.default")}
           config={{
-            value: "4",
+            defaultValue: "4",
             disabled: "false",
           }}
           compFactory={RatingComp}
@@ -25,15 +25,15 @@ export default function RatingExample() {
           title={trans("componentDoc.notSelect")}
           config={{
             disabled: "false",
-            value: "0",
+            defaultValue: "0",
           }}
           compFactory={RatingComp}
         />
         <Example
           title={trans("componentDoc.disabled")}
           config={{
             disabled: "true",
-            value: "4",
+            defaultValue: "2",
           }}
           compFactory={RatingComp}
         />
@@ -48,7 +48,7 @@ export default function RatingExample() {
               position: "row",
               align: "left",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -60,7 +60,7 @@ export default function RatingExample() {
               position: "row",
               align: "right",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -72,7 +72,7 @@ export default function RatingExample() {
               position: "column",
               align: "left",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
@@ -84,16 +84,17 @@ export default function RatingExample() {
               position: "column",
               align: "right",
             },
-            value: "4",
+            defaultValue: "4",
           }}
           compFactory={RatingComp}
         />
       </ExampleGroup>
+
       <ExampleGroup title={trans("componentDoc.style")}>
         <Example
           title={trans("componentDoc.maxRating")}
           config={{
-            value: "4",
+            defaultValue: "4",
             max: "6",
           }}
           nameMap={nameMap}
@@ -102,7 +103,8 @@ export default function RatingExample() {
         <Example
           title={trans("componentDoc.halfSelect")}
           config={{
-            value: "4.5",
+            max: "6",
+            defaultValue: "3.5",
             allowHalf: "true",
           }}
           compFactory={RatingComp}