yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color picker

Browse Source
This commit is contained in:
Vinix
2025-10-24 11:46:58 +07:00
parent dd874cbe9c
commit 50d040953f
2 changed files with 104 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/master/status/component/DetailStatus.jsx
View File

@@ -9,7 +9,7 @@ import {
Switch,
Row,
Col,
Radio,
ColorPicker,
} from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { validateRun } from '../../../../Utils/validate';
@@ -18,18 +18,6 @@ import { createStatus, updateStatus } from '../../../../api/master-status';
const { Text } = Typography;
const { TextArea } = Input;
// Daftar 8 warna yang tersedia
const COLOR_OPTIONS = [
{ label: 'Merah', value: '#EF4444', hex: '#EF4444' },
{ label: 'Biru', value: '#3B82F6', hex: '#3B82F6' },
{ label: 'Hijau', value: '#10B981', hex: '#10B981' },
{ label: 'Kuning', value: '#F59E0B', hex: '#F59E0B' },
{ label: 'Ungu', value: '#8B5CF6', hex: '#8B5CF6' },
{ label: 'Pink', value: '#EC4899', hex: '#EC4899' },
{ label: 'Orange', value: '#F97316', hex: '#F97316' },
{ label: 'Teal', value: '#14B8A6', hex: '#14B8A6' },
];
const DetailStatus = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
@@ -57,8 +45,8 @@ const DetailStatus = (props) => {
setFormData({ ...formData, is_active: checked });
};
const handleColorChange = (e) => {
setFormData({ ...formData, status_color: e.target.value });
const handleColorChange = (color, hex) => {
setFormData({ ...formData, status_color: hex });
};
const handleCancel = () => {
@@ -213,38 +201,33 @@ const DetailStatus = (props) => {
<Text strong>Status Color</Text>
<Text style={{ color: 'red' }}> *</Text>
<div style={{ marginTop: '8px' }}>
<Radio.Group
<ColorPicker
value={formData.status_color || '#000000'}
onChange={handleColorChange}
value={formData.status_color}
disabled={props.readOnly}
>
<Row gutter={[8, 8]}>
{COLOR_OPTIONS.map((color) => (
<Col span={12} key={color.value}>
<Radio value={color.value} style={{ width: '100%' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
width: '20px',
height: '20px',
backgroundColor: color.hex,
borderRadius: '4px',
border: '1px solid #d9d9d9',
}}
/>
<span>{color.label}</span>
</div>
</Radio>
</Col>
))}
</Row>
</Radio.Group>
showText={(color) => `color hex: ${color.toHexString()}`}
allowClear={false}
format="hex"
size="large"
style={{ width: '100%' }}
presets={[
{
label: 'Recommended',
colors: [
'#EF4444', // Merah
'#3B82F6', // Biru
'#10B981', // Hijau
'#F59E0B', // Kuning
'#8B5CF6', // Ungu
'#EC4899', // Pink
'#F97316', // Orange
'#14B8A6', // Teal
'#6B7280', // Gray
'#000000', // Black
],
},
]}
/>
</div>
</div>
<div style={{ marginBottom: 12 }}>