Skip to content

Commit

Permalink
feat: form builder v2 adjustment (#73)
Browse files Browse the repository at this point in the history
* feat: add custom listen input

* feat: add ref checkbox form

* bump version

* bump alpha version

* chore: update version
rianmandala authored Dec 16, 2024
1 parent 878ab31 commit 9de9c33
Showing 5 changed files with 73 additions and 56 deletions.
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"packages": ["packages/*"],
"npmClient": "yarn",
"useWorkspaces": true,
"version": "0.11.1",
"version": "0.11.2",
"command": {
"version": {
"message": "chore(release): publish %s"
2 changes: 1 addition & 1 deletion packages/apsara-icons/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@goto-company/icons",
"version": "0.11.1",
"version": "0.11.2",
"description": "Apsara icons",
"scripts": {
"build": "node scripts/build.js",
2 changes: 1 addition & 1 deletion packages/apsara-ui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@goto-company/apsara",
"version": "0.11.1",
"version": "0.11.2",
"description": "A list of base components for apsara",
"author": "Praveen Yadav <praveen.yadav@go-jek.com>",
"license": "Apache-2.0",
100 changes: 55 additions & 45 deletions packages/apsara-ui/src/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CheckIcon } from "@radix-ui/react-icons";
import React, { useEffect, useState } from "react";
import React, { forwardRef, Ref, useEffect, useState } from "react";
import { CheckboxWrapper, CheckboxGroupWrapper, StyledCheckbox, StyledIndicator } from "./Checkbox.styles";
import { generateRandomId } from "../helper";
import transformCheckedValue from "../helper/transform-checked-value";
@@ -16,6 +16,7 @@ type CheckboxProps = {
className?: string;
style?: React.CSSProperties;
id?: string;
ref?: Ref<HTMLButtonElement>;
};

type CheckboxGroupProps = {
@@ -31,51 +32,57 @@ type CheckboxGroupProps = {
};

const prefixCls = "apsara-checkbox";
const Checkbox = ({
defaultChecked = false,
checked,
onChange,
disabled,
required,
name,
value,
label,
style,
id = generateRandomId(),
}: CheckboxProps) => {
const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false);
const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
(
{
defaultChecked = false,
checked,
onChange,
disabled,
required,
name,
value,
label,
style,
id = generateRandomId(),
},
ref,
) => {
const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false);

useEffect(() => {
setIsChecked(checked || false);
}, [checked]);
useEffect(() => {
setIsChecked(checked || false);
}, [checked]);

return (
<CheckboxWrapper className={`${prefixCls}-wrapper`}>
<StyledCheckbox
defaultChecked={defaultChecked}
id={id}
checked={isChecked || transformCheckedValue(value)}
onCheckedChange={
onChange ||
function (checked) {
setIsChecked(checked);
return (
<CheckboxWrapper className={`${prefixCls}-wrapper`}>
<StyledCheckbox
ref={ref}
defaultChecked={defaultChecked}
id={id}
checked={isChecked || transformCheckedValue(value)}
onCheckedChange={
onChange ||
function (checked) {
setIsChecked(checked);
}
}
}
disabled={disabled}
required={required}
name={name}
value={value}
style={style}
className={prefixCls}
>
<StyledIndicator>
<CheckIcon style={{ width: "13px", height: "13px" }} />
</StyledIndicator>
</StyledCheckbox>
{label && <label htmlFor={id}>{label}</label>}
</CheckboxWrapper>
);
};
disabled={disabled}
required={required}
name={name}
value={value}
style={style}
className={prefixCls}
>
<StyledIndicator>
<CheckIcon style={{ width: "13px", height: "13px" }} />
</StyledIndicator>
</StyledCheckbox>
{label && <label htmlFor={id}>{label}</label>}
</CheckboxWrapper>
);
},
);

const CheckboxGroup = ({
defaultValue,
@@ -111,6 +118,7 @@ const CheckboxGroup = ({
id={`${id}${option.value}${index}`}
checked={selectedValues.includes(option.value || "")}
value={option.value}
ref={option.ref}
{...props}
/>
<label className="checkbox_label" htmlFor={`${id}${option.value}${index}`}>
@@ -122,6 +130,8 @@ const CheckboxGroup = ({
);
};

Checkbox.Group = CheckboxGroup;
Checkbox.displayName = "Checkbox";

const CompoundCheckbox = Object.assign(Checkbox, { CheckboxGroup });

export default Checkbox;
export default CompoundCheckbox;
23 changes: 15 additions & 8 deletions packages/apsara-ui/src/form-builder-v2/components/field/field.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export interface FieldProps extends UseControllerProps {
children: ReactElement;
className?: string;
style?: React.CSSProperties;
onChange?: (value: any) => void;
}

const Field = (props: FieldProps) => {
@@ -59,14 +60,20 @@ const Field = (props: FieldProps) => {
control={control}
rules={enhancedRules}
{...controllerProps}
render={({ field }) => (
<>
{React.cloneElement(children, {
...field,
id: controllerProps.name,
})}
</>
)}
render={({ field }) => {
const handleChange = (value: any) => {
field.onChange(value);
if (controllerProps.onChange) {
controllerProps.onChange(value);
}
};

return React.cloneElement(children, {
...field,
id: controllerProps.name,
onChange: handleChange,
});
}}
/>
<ErrorMessageWrapper
errors={errors}

0 comments on commit 9de9c33

Please sign in to comment.