gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor input components to use consistent color

Browse Source 
variables
This commit is contained in:
rstubryan
2026-02-11 14:19:52 +07:00
parent 1b4d373fea
commit 498602a2c9
3 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+14 -12
View File
@@ -246,8 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn( className={cn(
'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200', 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
{ {
'bg-gray-100 border-base-content/10': !isDisabled, 'bg-base-100 border-base-content/10': !isDisabled,
'bg-gray-50 border-base-content/10': isDisabled, 'bg-base-200 border-base-content/10': isDisabled,
'border-error': isError, 'border-error': isError,
}, },
className?.inputPrefix className?.inputPrefix
@@ -278,15 +278,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn('w-full flex-1', className?.select)} className={cn('w-full flex-1', className?.select)}
classNames={{ classNames={{
control: ({ isFocused, isDisabled }) => control: ({ isFocused, isDisabled }) =>
cn('w-full border bg-white transition-shadow', 'rounded-lg!', { cn('w-full border transition-shadow', 'rounded-lg!', {
'bg-base-100!': !isDisabled && !readOnly,
'bg-base-200! text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'cursor-pointer!': !readOnly && !isDisabled, 'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError, 'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': 'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment, isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'rounded-l-none!': inputPrefix && !startAdornment, 'rounded-l-none!': inputPrefix && !startAdornment,
'rounded-r-none!': inputSuffix && !startAdornment, 'rounded-r-none!': inputSuffix && !startAdornment,
}), }),
@@ -370,8 +371,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn( className={cn(
'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200', 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
{ {
'bg-gray-100 border-base-content/10': !isDisabled, 'bg-base-100 border-base-content/10': !isDisabled,
'bg-gray-50 border-base-content/10': isDisabled, 'bg-base-200 border-base-content/10': isDisabled,
'border-error': isError, 'border-error': isError,
}, },
className?.inputSuffix className?.inputSuffix
@@ -404,18 +405,19 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{ classNames={{
control: ({ isFocused, isDisabled }) => control: ({ isFocused, isDisabled }) =>
cn( cn(
'w-full border bg-white transition-shadow', 'w-full border transition-shadow',
// Gunakan rounded-lg untuk semua kasus // Gunakan rounded-lg untuk semua kasus
'rounded-lg!', 'rounded-lg!',
{ {
'bg-base-100!': !isDisabled && !readOnly,
'bg-base-200! text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'cursor-pointer!': !readOnly && !isDisabled, 'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError, 'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': 'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment, isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
} }
), ),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'), valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
src/components/input/TextInput.tsx
+9 -8
View File
@@ -104,8 +104,8 @@ const TextInput = ({
className={cn( className={cn(
'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200', 'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
{ {
'bg-gray-100 border-base-content/10': !disabled, 'bg-base-100 border-base-content/10': !disabled,
'bg-gray-50 border-base-content/10': disabled, 'bg-base-200 border-base-content/10': disabled,
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
}, },
@@ -118,7 +118,7 @@ const TextInput = ({
<div <div
className={cn( className={cn(
'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10', 'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
{ {
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
@@ -126,7 +126,8 @@ const TextInput = ({
'rounded-r-none!': inputSuffix, 'rounded-r-none!': inputSuffix,
'input-disabled': disabled, 'input-disabled': disabled,
'cursor-not-allowed': disabled, 'cursor-not-allowed': disabled,
'bg-gray-50': disabled, 'bg-base-100': !disabled,
'bg-base-200': disabled,
}, },
className?.inputWrapper className?.inputWrapper
)} )}
@@ -167,8 +168,8 @@ const TextInput = ({
className={cn( className={cn(
'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200', 'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
{ {
'bg-gray-100 border-base-content/10': !disabled, 'bg-base-100 border-base-content/10': !disabled,
'bg-gray-50 border-base-content/10': disabled, 'bg-base-200 border-base-content/10': disabled,
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
}, },
@@ -186,8 +187,8 @@ const TextInput = ({
{ {
'border-error': isError, 'border-error': isError,
'border-success!': isValid, 'border-success!': isValid,
'bg-white': !disabled, 'bg-base-100': !disabled,
'bg-base-content/5': disabled, 'bg-base-200': disabled,
}, },
className?.inputWrapper className?.inputWrapper
)} )}
src/components/pages/production/recording/form/RecordingForm.tsx
+4
View File
@@ -2469,6 +2469,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
) )
: null : null
} }
disabled={type === 'detail'}
/> />
{getStockUsageAdornment(idx)} {getStockUsageAdornment(idx)}
</div> </div>
@@ -2675,6 +2676,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
) )
: null : null
} }
disabled={type === 'detail'}
/> />
</td> </td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && ( {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2891,6 +2893,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}} }}
placeholder='Masukkan jumlah telur' placeholder='Masukkan jumlah telur'
inputSuffix={'Butir'} inputSuffix={'Butir'}
disabled={type === 'detail'}
/> />
</td> </td>
<td> <td>
@@ -2917,6 +2920,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}} }}
placeholder='Masukkan total berat telur (Kilogram)...' placeholder='Masukkan total berat telur (Kilogram)...'
inputSuffix='Kilogram' inputSuffix='Kilogram'
disabled={type === 'detail'}
/> />
</td> </td>
{(type as 'add' | 'edit' | 'detail') !== {(type as 'add' | 'edit' | 'detail') !==